Updated package and docs

Author: sid-devspot

docs/index.html

@@ -5,6 +5,7 @@ import { DropdownDirective } from './directives/dropdown.directive';
 import { NavDirective } from './directives/nav.directive';
 import { TableDirective } from './directives/table.directive';
 import { TabsDirective } from './directives/tab.directive';
+import { TypewriterDirective } from './directives/typewriter.directive';
 
 @NgModule({
   declarations: [
@@ -14,6 +15,7 @@ import { TabsDirective } from './directives/tab.directive';
     NavDirective,
     TableDirective,
     TabsDirective,
+    TypewriterDirective,
   ],
   imports: [],
   exports: [
@@ -23,6 +25,7 @@ import { TabsDirective } from './directives/tab.directive';
     NavDirective,
     TableDirective,
     TabsDirective,
+    TypewriterDirective,
   ],
 })
 export class CssFusionModule {}

docs/main.680109a70c1b29c9.js

@@ -0,0 +1,8 @@
+import { TypewriterDirective } from './typewriter.directive';
+
+describe('TypewriterDirective', () => {
+  it('should create an instance', () => {
+    const directive = new TypewriterDirective();
+    expect(directive).toBeTruthy();
+  });
+});

docs/main.a0c54774b2d69c1a.js

@@ -0,0 +1,45 @@
+import { Directive, ElementRef, AfterViewInit } from '@angular/core';
+
+@Directive({
+  selector: '[libTypewriter]',
+})
+export class TypewriterDirective implements AfterViewInit {
+  private fullText: string = '';
+  private index: number = 0;
+  private caretElement!: HTMLElement;
+
+  constructor(private elRef: ElementRef<HTMLElement>) {}
+
+  ngAfterViewInit(): void {
+    const el = this.elRef.nativeElement;
+
+    // Find and store caret
+    this.caretElement = el.querySelector('.caret') as HTMLElement;
+
+    // Extract full text excluding caret
+    this.fullText = el.textContent?.replace(/\s+/g, ' ').trim() ?? '';
+
+    // Clear all content
+    el.innerHTML = '';
+
+    // Add back caret
+    if (this.caretElement) {
+      el.appendChild(this.caretElement);
+    }
+
+    this.typeWriter();
+  }
+
+  private typeWriter(): void {
+    const el = this.elRef.nativeElement;
+
+    if (this.index < this.fullText.length) {
+      const textNode = document.createTextNode(
+        this.fullText.charAt(this.index)
+      );
+      el.insertBefore(textNode, this.caretElement);
+      this.index++;
+      setTimeout(() => this.typeWriter(), 150);
+    }
+  }
+}

docs/styles.c380efe5c6634a15.css docs/styles.dd72546108b2dbc2.cssdocs/styles.c380efe5c6634a15.css renamed to docs/styles.dd72546108b2dbc2.css

@@ -1,25 +1,26 @@
 .menubar-box {
-  background-color: rgb(25, 27, 31);
-  border-bottom: 0.1rem solid rgb(60, 61, 65);
+  background-color: var(--menubar-bg);
+  border-bottom: 1.6px solid var(--menubar-bdr);
   width: 100%;
-  height: 68px;
+  height: var(--menubar-height);
   display: grid;
   grid-template-columns: var(--menubar-set01-size) 1fr var(--menubar-set03-size);
-  padding: 0 16px;
+  padding: 0 28px;
+  border-radius: var(--menubar-curv);
 
   .menubar-set-01 {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 10px;
 
-    .logo {
-      width: 32px;
+    .menubar-logo {
+      width: var(--menubar-logo-size);
       display: block;
     }
 
-    p {
-      color: #ffffff;
+    .menubar-logo-name {
+      color: var(--menubar-logo-name);
     }
   }
 
@@ -28,7 +29,7 @@
 
     .menubar-link {
       font-family: var(--me-font-content);
-      color: rgb(124, 124, 124) !important;
+      color: var(--menubar-link) !important;
       font-weight: 500;
       padding: 6px 10px;
       border-radius: 0.4rem;
@@ -39,8 +40,8 @@
     }
 
     .active-link {
-      background-color: rgba(77, 77, 77, 0.498) !important;
-      color: #ffffff !important;
+      background-color: var(--menubar-active-bg) !important;
+      color: var(--menubar-active-text) !important;
     }
 
     .menubar-link-center {
@@ -52,7 +53,7 @@
     }
 
     .menubar-link-left {
-      border-left: 2px solid #555555;
+      border-left: 2px solid var(--menubar-links-bdr);
       height: fit-content;
       display: flex;
       align-items: center;
@@ -62,7 +63,7 @@
     }
 
     .menubar-link-right {
-      border-right: 2px solid #555555;
+      border-right: 2px solid var(--menubar-links-bdr);
       height: fit-content;
       display: flex;
       align-items: center;
@@ -81,15 +82,16 @@
 }
 
 .menubar-resizable {
-  background-color: rgb(25, 27, 31);
-  border-bottom: 0.1rem solid rgb(60, 61, 65);
+  background-color: var(--menubar-bg);
+  border-bottom: 0.1rem solid var(--menubar-bdr);
   width: 100%;
-  height: 68px;
+  height: var(--menubar-height);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 0 16px;
+  padding: 0 28px;
+  border-radius: var(--menubar-curv);
 
   .menubar-set-01 {
     display: flex;
@@ -98,12 +100,12 @@
     gap: 10px;
 
     .menubar-logo {
-      width: 32px;
+      width: var(--menubar-logo-size);
       display: block;
     }
 
-    p {
-      color: #ffffff;
+    .menubar-logo-name {
+      color: var(--menubar-logo-name);
     }
   }
 
@@ -113,9 +115,9 @@
     justify-content: flex-end;
     gap: 1rem;
 
-    .btn-icon {
+    .menubar-icons {
       font-size: 28px;
-      color: #fff;
+      color: var(--menubar-icons);
     }
 
     .menubar-profile-box {
@@ -128,16 +130,16 @@
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
-        
+
         .profile-name {
           font-size: 12px;
           line-height: 14px;
           font-weight: 500;
-          color: #fff;
+          color: var(--menubar-profile-title);
         }
 
         .profile-role {
-          color: #b9b9b9;
+          color: var(--menubar-profile-content);
         }
       }
     }
@@ -146,8 +148,12 @@
 
 #menubar-thumb {
   font-size: 2.6rem;
-  color: #fff;
+  color: var(--menubar-thumb);
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+.menubar-lined {
+  border: 1.6px solid var(--menubar-bdr) !important;
+}