@ziadshalaby/ngx-zs-component 3.0.7 → 3.0.9

package/fesm2022/ziadshalaby-ngx-zs-component.mjs

@@ -367,11 +367,11 @@ class NavItem {
                 : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NavItem, isStandalone: true, selector: "ZS-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, collectionName: { classPropertyName: "collectionName", publicName: "collectionName", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { anyItemClickedEv: "anyItemClickedEv" }, ngImport: i0, template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n  @if (item().children?.length) {\n\n    <!-- ========================= Parent Item with Dropdown ========================= -->\n    <div class=\"zs:relative zs:w-full\">\n\n      <!-- ========================= Main Toggle Button ========================= -->\n      <button\n        type=\"button\"\n        (click)=\"toggle()\"\n        [ngClass]=\"getItemClasses(item())\"\n        class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n        zs:text-sm zs:font-medium zs:md:text-base\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"'submenu-' + index()\"\n      >\n        <div class=\"zs:flex zs:items-center\">\n          @if (item().icon) {\n            <i [ngClass]=\"[\n              item().icon, \n              item().iconClass ?? '',\n              (item().icon && item().label) ? 'zs:mr-2' : ''\n            ]\" aria-hidden=\"true\"></i>\n          }\n          <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n        </div>\n        <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n      </button>\n\n      <!-- ========================= Dropdown Menu ========================= -->\n      <div\n        [id]=\"'submenu-' + index()\"\n        [ngClass]=\"{\n          'zs:block': isOpen(),\n          'zs:hidden': !isOpen(),\n          'zs:absolute zs:left-6 zs:w-50 zs:mt-1 zs:py-1 zs:bg-white zs:dark:bg-gray-800 \n          zs:rounded-md shadow-md-all shadow-md-all-night': item().childrenOpenWindow,\n          'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n        }\"\n        class=\"{{ zIndices.navItemDropdown }}\"\n        role=\"menu\"\n        [attr.aria-label]=\"item().label + ' submenu'\"\n      >\n        @for (child of item().children; track $index) {\n          <ZS-nav-item\n            [item]=\"child\"\n            [collectionName]=\"collectionName() + '-' + index()\"\n            (anyItemClickedEv)=\"handleChildClick($event)\"\n            role=\"menuitem\"\n          ></ZS-nav-item>\n        }\n      </div>\n\n    </div>\n\n  } @else {\n\n    <!-- ========================= Leaf Item (No Children) ========================= -->\n    <a\n      [routerLink]=\"item().routerLink\"\n      [routerLinkActive]=\"item().routerLinkActive ?? ''\"\n      #rla=\"routerLinkActive\"\n      [ngClass]=\"rla.isActive ? '' : getItemClasses(item())\"\n      class=\"zs:flex zs:items-center zs:rounded-md zs:px-3 zs:py-2 \n      zs:text-sm zs:font-medium zs:md:text-base\"\n      (click)=\"onItemClick()\"\n      role=\"menuitem\"\n    >\n      @if (item().icon) {\n        <i [ngClass]=\"[\n          item().icon,\n          rla.isActive ? '' : item().iconClass ?? '',\n          (item().icon && item().label) ? 'zs:mr-2' : ''\n        ]\"\n        aria-hidden=\"true\"></i>\n      }\n      <span class=\"zs:wrap-break-word zs:line-clamp-3\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n    </a>\n  }\n}", styles: [""], dependencies: [{ kind: "component", type: NavItem, selector: "ZS-nav-item", inputs: ["item", "collectionName"], outputs: ["anyItemClickedEv"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: NavItem, isStandalone: true, selector: "ZS-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, collectionName: { classPropertyName: "collectionName", publicName: "collectionName", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { anyItemClickedEv: "anyItemClickedEv" }, ngImport: i0, template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n  @if (item().children?.length) {\n\n    <!-- ========================= Parent Item with Dropdown ========================= -->\n    <div class=\"zs:relative zs:w-full\">\n\n      <!-- ========================= Main Toggle Button ========================= -->\n      <button\n        type=\"button\"\n        (click)=\"toggle()\"\n        [ngClass]=\"getItemClasses(item())\"\n        class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n        zs:text-sm zs:font-medium zs:md:text-base\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"'submenu-' + index()\"\n      >\n        <div class=\"zs:flex zs:items-center\">\n          @if (item().icon) {\n            <i [ngClass]=\"[\n              item().icon, \n              item().iconClass ?? '',\n              (item().icon && item().label) ? 'zs:mr-2' : ''\n            ]\" aria-hidden=\"true\"></i>\n          }\n          <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n        </div>\n        <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n      </button>\n\n      <!-- ========================= Dropdown Menu ========================= -->\n      <div\n        [id]=\"'submenu-' + index()\"\n        [ngClass]=\"{\n          'zs:block': isOpen(),\n          'zs:hidden': !isOpen(),\n          'zs:absolute zs:left-6 zs:w-50 zs:mt-1 zs:py-1 zs:bg-white zs:dark:bg-gray-800 \n          zs:rounded-md shadow-md-all shadow-md-all-night': item().childrenOpenWindow,\n          'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n        }\"\n        class=\"{{ zIndices.navItemDropdown }}\"\n        role=\"menu\"\n        [attr.aria-label]=\"item().label + ' submenu'\"\n      >\n        @for (child of item().children; track $index) {\n          <ZS-nav-item\n            [item]=\"child\"\n            [collectionName]=\"collectionName() + '-' + index()\"\n            (anyItemClickedEv)=\"handleChildClick($event)\"\n            role=\"menuitem\"\n          ></ZS-nav-item>\n        }\n      </div>\n\n    </div>\n\n  } @else {\n\n    <!-- ========================= Leaf Item (No Children) ========================= -->\n    <a\n      [routerLink]=\"item().routerLink\"\n      [routerLinkActive]=\"item().routerLinkActive ?? ''\"\n      #rla=\"routerLinkActive\"\n      [ngClass]=\"rla.isActive && item().routerLinkActive ? '' : getItemClasses(item())\"\n      class=\"zs:flex zs:items-center zs:rounded-md zs:px-3 zs:py-2 \n      zs:text-sm zs:font-medium zs:md:text-base\"\n      (click)=\"onItemClick()\"\n      role=\"menuitem\"\n    >\n      @if (item().icon) {\n        <i [ngClass]=\"[\n          item().icon,\n          rla.isActive && item().routerLinkActive ? '' : (item().iconClass ?? ''),\n          (item().icon && item().label) ? 'zs:mr-2' : ''\n        ]\"\n        aria-hidden=\"true\"></i>\n      }\n      <span class=\"zs:wrap-break-word zs:line-clamp-3\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n    </a>\n  }\n}", styles: [""], dependencies: [{ kind: "component", type: NavItem, selector: "ZS-nav-item", inputs: ["item", "collectionName"], outputs: ["anyItemClickedEv"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NavItem, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-nav-item', imports: [CommonModule, RouterModule], template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n  @if (item().children?.length) {\n\n    <!-- ========================= Parent Item with Dropdown ========================= -->\n    <div class=\"zs:relative zs:w-full\">\n\n      <!-- ========================= Main Toggle Button ========================= -->\n      <button\n        type=\"button\"\n        (click)=\"toggle()\"\n        [ngClass]=\"getItemClasses(item())\"\n        class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n        zs:text-sm zs:font-medium zs:md:text-base\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"'submenu-' + index()\"\n      >\n        <div class=\"zs:flex zs:items-center\">\n          @if (item().icon) {\n            <i [ngClass]=\"[\n              item().icon, \n              item().iconClass ?? '',\n              (item().icon && item().label) ? 'zs:mr-2' : ''\n            ]\" aria-hidden=\"true\"></i>\n          }\n          <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n        </div>\n        <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n      </button>\n\n      <!-- ========================= Dropdown Menu ========================= -->\n      <div\n        [id]=\"'submenu-' + index()\"\n        [ngClass]=\"{\n          'zs:block': isOpen(),\n          'zs:hidden': !isOpen(),\n          'zs:absolute zs:left-6 zs:w-50 zs:mt-1 zs:py-1 zs:bg-white zs:dark:bg-gray-800 \n          zs:rounded-md shadow-md-all shadow-md-all-night': item().childrenOpenWindow,\n          'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n        }\"\n        class=\"{{ zIndices.navItemDropdown }}\"\n        role=\"menu\"\n        [attr.aria-label]=\"item().label + ' submenu'\"\n      >\n        @for (child of item().children; track $index) {\n          <ZS-nav-item\n            [item]=\"child\"\n            [collectionName]=\"collectionName() + '-' + index()\"\n            (anyItemClickedEv)=\"handleChildClick($event)\"\n            role=\"menuitem\"\n          ></ZS-nav-item>\n        }\n      </div>\n\n    </div>\n\n  } @else {\n\n    <!-- ========================= Leaf Item (No Children) ========================= -->\n    <a\n      [routerLink]=\"item().routerLink\"\n      [routerLinkActive]=\"item().routerLinkActive ?? ''\"\n      #rla=\"routerLinkActive\"\n      [ngClass]=\"rla.isActive ? '' : getItemClasses(item())\"\n      class=\"zs:flex zs:items-center zs:rounded-md zs:px-3 zs:py-2 \n      zs:text-sm zs:font-medium zs:md:text-base\"\n      (click)=\"onItemClick()\"\n      role=\"menuitem\"\n    >\n      @if (item().icon) {\n        <i [ngClass]=\"[\n          item().icon,\n          rla.isActive ? '' : item().iconClass ?? '',\n          (item().icon && item().label) ? 'zs:mr-2' : ''\n        ]\"\n        aria-hidden=\"true\"></i>\n      }\n      <span class=\"zs:wrap-break-word zs:line-clamp-3\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n    </a>\n  }\n}" }]
+            args: [{ selector: 'ZS-nav-item', imports: [CommonModule, RouterModule], template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n  @if (item().children?.length) {\n\n    <!-- ========================= Parent Item with Dropdown ========================= -->\n    <div class=\"zs:relative zs:w-full\">\n\n      <!-- ========================= Main Toggle Button ========================= -->\n      <button\n        type=\"button\"\n        (click)=\"toggle()\"\n        [ngClass]=\"getItemClasses(item())\"\n        class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n        zs:text-sm zs:font-medium zs:md:text-base\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"'submenu-' + index()\"\n      >\n        <div class=\"zs:flex zs:items-center\">\n          @if (item().icon) {\n            <i [ngClass]=\"[\n              item().icon, \n              item().iconClass ?? '',\n              (item().icon && item().label) ? 'zs:mr-2' : ''\n            ]\" aria-hidden=\"true\"></i>\n          }\n          <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n        </div>\n        <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n      </button>\n\n      <!-- ========================= Dropdown Menu ========================= -->\n      <div\n        [id]=\"'submenu-' + index()\"\n        [ngClass]=\"{\n          'zs:block': isOpen(),\n          'zs:hidden': !isOpen(),\n          'zs:absolute zs:left-6 zs:w-50 zs:mt-1 zs:py-1 zs:bg-white zs:dark:bg-gray-800 \n          zs:rounded-md shadow-md-all shadow-md-all-night': item().childrenOpenWindow,\n          'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n        }\"\n        class=\"{{ zIndices.navItemDropdown }}\"\n        role=\"menu\"\n        [attr.aria-label]=\"item().label + ' submenu'\"\n      >\n        @for (child of item().children; track $index) {\n          <ZS-nav-item\n            [item]=\"child\"\n            [collectionName]=\"collectionName() + '-' + index()\"\n            (anyItemClickedEv)=\"handleChildClick($event)\"\n            role=\"menuitem\"\n          ></ZS-nav-item>\n        }\n      </div>\n\n    </div>\n\n  } @else {\n\n    <!-- ========================= Leaf Item (No Children) ========================= -->\n    <a\n      [routerLink]=\"item().routerLink\"\n      [routerLinkActive]=\"item().routerLinkActive ?? ''\"\n      #rla=\"routerLinkActive\"\n      [ngClass]=\"rla.isActive && item().routerLinkActive ? '' : getItemClasses(item())\"\n      class=\"zs:flex zs:items-center zs:rounded-md zs:px-3 zs:py-2 \n      zs:text-sm zs:font-medium zs:md:text-base\"\n      (click)=\"onItemClick()\"\n      role=\"menuitem\"\n    >\n      @if (item().icon) {\n        <i [ngClass]=\"[\n          item().icon,\n          rla.isActive && item().routerLinkActive ? '' : (item().iconClass ?? ''),\n          (item().icon && item().label) ? 'zs:mr-2' : ''\n        ]\"\n        aria-hidden=\"true\"></i>\n      }\n      <span class=\"zs:wrap-break-word zs:line-clamp-3\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n    </a>\n  }\n}" }]
         }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], collectionName: [{ type: i0.Input, args: [{ isSignal: true, alias: "collectionName", required: true }] }], anyItemClickedEv: [{ type: i0.Output, args: ["anyItemClickedEv"] }] } });
 
 // Unified palette map with all configurations
@@ -1539,35 +1539,23 @@ class Navbar {
     visibleNavItems = computed(() => {
         const items = this.navItems()?.navItems ?? [];
         const limit = this.showSearchBar() ? 2 : 5;
-        return items.slice(0, limit).map(item => this.toNavbarItem(item, true));
+        return items.slice(0, limit).map(item => this.toNavbarItem(item, true, this.navItems()?.routerLinkActive, this.navItems()?.colorClass));
     }, ...(ngDevMode ? [{ debugName: "visibleNavItems" }] : []));
     moreNavItems = computed(() => {
         const items = this.navItems()?.navItems ?? [];
         const start = this.showSearchBar() ? 2 : 5;
-        return items.slice(start).map(item => this.toNavbarItem(item, true));
+        return items.slice(start).map(item => this.toNavbarItem(item, true, this.navItems()?.routerLinkActive, this.navItems()?.colorClass));
     }, ...(ngDevMode ? [{ debugName: "moreNavItems" }] : []));
-    mobileNavItems = computed(() => {
-        const items = this.navItems()?.navItems ?? [];
-        // عدل البيانات الأصلية بأمان
-        items.forEach(item => {
-            if (!item.routerLinkActive) {
-                item.routerLinkActive = item.colorClass;
-            }
-        });
-        // رجّع الشكل النهائي
-        return items.map(item => this.toNavbarItem(item, false));
-    }, ...(ngDevMode ? [{ debugName: "mobileNavItems" }] : []));
+    mobileNavItems = computed(() => (this.navItems()?.navItems ?? []).map(item => this.toNavbarItem(item, false, this.navItems()?.routerLinkActive, this.navItems()?.colorClass)), ...(ngDevMode ? [{ debugName: "mobileNavItems" }] : []));
     getUserMenuItems = computed(() => this.userMenuItems().map(item => this.toNavbarItem(item, false)), ...(ngDevMode ? [{ debugName: "getUserMenuItems" }] : []));
     // ==============================================
     // Private Helper Methods
     // ==============================================
-    toNavbarItem(item, childrenOpenWindow = false) {
-        const routerLinkActive = this.navItems()?.routerLinkActive;
-        const colorClass = this.navItems()?.colorClass;
+    toNavbarItem(item, childrenOpenWindow = false, generalRouterLinkActive, generalColorClass) {
         return {
             ...item,
-            colorClass: item.colorClass ?? colorClass,
-            routerLinkActive: item.routerLinkActive ?? routerLinkActive,
+            colorClass: item.colorClass ?? generalColorClass,
+            routerLinkActive: item.routerLinkActive ?? generalRouterLinkActive,
             childrenOpenWindow,
             children: item.children?.map(child => this.toNavbarItem(child, childrenOpenWindow)) ?? []
         };
@@ -1893,11 +1881,11 @@ class Spinner {
     borderColor = computed(() => ColorMapping.get(this.color())?.border, ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
     textColor = computed(() => ColorMapping.get(this.color())?.text, ...(ngDevMode ? [{ debugName: "textColor" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Spinner, isStandalone: true, selector: "ZS-spinner", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isFloating: { classPropertyName: "isFloating", publicName: "isFloating", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, withBox: { classPropertyName: "withBox", publicName: "withBox", isSignal: true, isRequired: false, transformFunction: null }, boxColorClass: { classPropertyName: "boxColorClass", publicName: "boxColorClass", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n  <div \n    [class]=\"wrapperClasses()\" \n    role=\"status\" \n    aria-live=\"polite\" \n    aria-busy=\"true\"\n  >\n    <div [class]=\"boxClasses()\">\n  \n      @switch (type()) {\n  \n        <!-- ========================= Spinner ========================= -->\n        @case ('spinner') {\n          <i \n            [ngClass]=\"['fas fa-spinner fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pro Spinner ========================= -->\n        @case ('pro') {\n          <div \n            [ngClass]=\"['zs:animate-spin zs:rounded-full zs:border-solid', spinnerSizeProClass(), borderColor()]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Gear ========================= -->\n        @case ('gear') {\n          <i \n            [ngClass]=\"['fas fa-gear fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Fan ========================= -->\n        @case ('fan') {\n          <i \n            [ngClass]=\"['fas fa-fan fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pulse ========================= -->\n        @case ('pulse') {\n          <div \n            [ngClass]=\"[\n              'zs:animate-spin zs:rounded-full zs:border-solid',\n              spinnerSizePulseClass(),\n              borderColor(),\n              'zs:border-t-transparent!'\n            ]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Dots ========================= -->\n        @case ('dots') {\n          <div class=\"zs:flex zs:gap-2 zs:items-center\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Bars ========================= -->\n        @case ('bars') {\n          <div class=\"zs:flex zs:gap-1 zs:items-center zs:h-6\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(1)]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(2)]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(3)]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Double Spinner ========================= -->\n        @case ('double') {\n          <div class=\"zs:relative\" aria-hidden=\"true\">\n            <!-- Outer ring -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:rounded-full zs:border-solid',\n                spinnerSizeDoubleClass(1),\n                borderColor(), \n                'zs:border-t-transparent!'\n              ]\"\n            ></div>\n            <!-- Inner ring (reversed animation) -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:opacity-75 zs:rounded-full zs:border-solid zs:absolute \n                zs:top-1/2 zs:left-1/2 zs:-translate-x-1/2 zs:-translate-y-1/2',\n                spinnerSizeDoubleClass(2),\n                borderColor(), \n                'zs:border-b-transparent!'\n              ]\"\n              style=\"animation-direction: reverse;\"\n            ></div>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n      }\n      \n    </div>\n  </div>\n}", styles: ["@keyframes bar-scale{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.animate-bar-scale{animation:bar-scale .9s ease-in-out infinite}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Spinner, isStandalone: true, selector: "ZS-spinner", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isFloating: { classPropertyName: "isFloating", publicName: "isFloating", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, withBox: { classPropertyName: "withBox", publicName: "withBox", isSignal: true, isRequired: false, transformFunction: null }, boxColorClass: { classPropertyName: "boxColorClass", publicName: "boxColorClass", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n  <div \n    [class]=\"wrapperClasses()\" \n    role=\"status\" \n    aria-live=\"polite\" \n    aria-busy=\"true\"\n  >\n    <div [class]=\"boxClasses()\">\n  \n      @switch (type()) {\n  \n        <!-- ========================= Spinner ========================= -->\n        @case ('spinner') {\n          <i \n            [ngClass]=\"['fas fa-spinner fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pro Spinner ========================= -->\n        @case ('pro') {\n          <div \n            [ngClass]=\"['zs:animate-spin zs:rounded-full zs:border-solid', spinnerSizeProClass(), borderColor()]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Gear ========================= -->\n        @case ('gear') {\n          <i \n            [ngClass]=\"['fas fa-gear fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Fan ========================= -->\n        @case ('fan') {\n          <i \n            [ngClass]=\"['fas fa-fan fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pulse ========================= -->\n        @case ('pulse') {\n          <div \n            [ngClass]=\"[\n              'zs:animate-spin zs:rounded-full zs:border-solid',\n              spinnerSizePulseClass(),\n              borderColor(),\n              'zs:border-t-transparent!'\n            ]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Dots ========================= -->\n        @case ('dots') {\n          <div class=\"zs:flex zs:gap-2 zs:items-center\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Bars ========================= -->\n        @case ('bars') {\n          <div class=\"zs:flex zs:gap-1 zs:items-center zs:h-6\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(1)]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(2)]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(3)]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Double Spinner ========================= -->\n        @case ('double') {\n          <div class=\"zs:relative\" aria-hidden=\"true\">\n            <!-- Outer ring -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:rounded-full zs:border-solid',\n                spinnerSizeDoubleClass(1),\n                borderColor(), \n                'zs:border-t-transparent!'\n              ]\"\n            ></div>\n            <!-- Inner ring (reversed animation) -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:opacity-75 zs:rounded-full zs:border-solid zs:absolute \n                zs:top-1/2 zs:left-1/2 zs:-translate-x-1/2 zs:-translate-y-1/2',\n                spinnerSizeDoubleClass(2),\n                borderColor(), \n                'zs:border-b-transparent!'\n              ]\"\n              style=\"animation-direction: reverse;\"\n            ></div>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n      }\n    </div>\n  </div>\n}", styles: ["@keyframes bar-scale{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.animate-bar-scale{animation:bar-scale .9s ease-in-out infinite}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Spinner, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-spinner', imports: [CommonModule], template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n  <div \n    [class]=\"wrapperClasses()\" \n    role=\"status\" \n    aria-live=\"polite\" \n    aria-busy=\"true\"\n  >\n    <div [class]=\"boxClasses()\">\n  \n      @switch (type()) {\n  \n        <!-- ========================= Spinner ========================= -->\n        @case ('spinner') {\n          <i \n            [ngClass]=\"['fas fa-spinner fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pro Spinner ========================= -->\n        @case ('pro') {\n          <div \n            [ngClass]=\"['zs:animate-spin zs:rounded-full zs:border-solid', spinnerSizeProClass(), borderColor()]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Gear ========================= -->\n        @case ('gear') {\n          <i \n            [ngClass]=\"['fas fa-gear fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Fan ========================= -->\n        @case ('fan') {\n          <i \n            [ngClass]=\"['fas fa-fan fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pulse ========================= -->\n        @case ('pulse') {\n          <div \n            [ngClass]=\"[\n              'zs:animate-spin zs:rounded-full zs:border-solid',\n              spinnerSizePulseClass(),\n              borderColor(),\n              'zs:border-t-transparent!'\n            ]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Dots ========================= -->\n        @case ('dots') {\n          <div class=\"zs:flex zs:gap-2 zs:items-center\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Bars ========================= -->\n        @case ('bars') {\n          <div class=\"zs:flex zs:gap-1 zs:items-center zs:h-6\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(1)]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(2)]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(3)]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Double Spinner ========================= -->\n        @case ('double') {\n          <div class=\"zs:relative\" aria-hidden=\"true\">\n            <!-- Outer ring -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:rounded-full zs:border-solid',\n                spinnerSizeDoubleClass(1),\n                borderColor(), \n                'zs:border-t-transparent!'\n              ]\"\n            ></div>\n            <!-- Inner ring (reversed animation) -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:opacity-75 zs:rounded-full zs:border-solid zs:absolute \n                zs:top-1/2 zs:left-1/2 zs:-translate-x-1/2 zs:-translate-y-1/2',\n                spinnerSizeDoubleClass(2),\n                borderColor(), \n                'zs:border-b-transparent!'\n              ]\"\n              style=\"animation-direction: reverse;\"\n            ></div>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n      }\n      \n    </div>\n  </div>\n}", styles: ["@keyframes bar-scale{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.animate-bar-scale{animation:bar-scale .9s ease-in-out infinite}\n"] }]
+            args: [{ selector: 'ZS-spinner', imports: [CommonModule], template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n  <div \n    [class]=\"wrapperClasses()\" \n    role=\"status\" \n    aria-live=\"polite\" \n    aria-busy=\"true\"\n  >\n    <div [class]=\"boxClasses()\">\n  \n      @switch (type()) {\n  \n        <!-- ========================= Spinner ========================= -->\n        @case ('spinner') {\n          <i \n            [ngClass]=\"['fas fa-spinner fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pro Spinner ========================= -->\n        @case ('pro') {\n          <div \n            [ngClass]=\"['zs:animate-spin zs:rounded-full zs:border-solid', spinnerSizeProClass(), borderColor()]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Gear ========================= -->\n        @case ('gear') {\n          <i \n            [ngClass]=\"['fas fa-gear fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Fan ========================= -->\n        @case ('fan') {\n          <i \n            [ngClass]=\"['fas fa-fan fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pulse ========================= -->\n        @case ('pulse') {\n          <div \n            [ngClass]=\"[\n              'zs:animate-spin zs:rounded-full zs:border-solid',\n              spinnerSizePulseClass(),\n              borderColor(),\n              'zs:border-t-transparent!'\n            ]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Dots ========================= -->\n        @case ('dots') {\n          <div class=\"zs:flex zs:gap-2 zs:items-center\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Bars ========================= -->\n        @case ('bars') {\n          <div class=\"zs:flex zs:gap-1 zs:items-center zs:h-6\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(1)]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(2)]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(3)]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Double Spinner ========================= -->\n        @case ('double') {\n          <div class=\"zs:relative\" aria-hidden=\"true\">\n            <!-- Outer ring -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:rounded-full zs:border-solid',\n                spinnerSizeDoubleClass(1),\n                borderColor(), \n                'zs:border-t-transparent!'\n              ]\"\n            ></div>\n            <!-- Inner ring (reversed animation) -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:opacity-75 zs:rounded-full zs:border-solid zs:absolute \n                zs:top-1/2 zs:left-1/2 zs:-translate-x-1/2 zs:-translate-y-1/2',\n                spinnerSizeDoubleClass(2),\n                borderColor(), \n                'zs:border-b-transparent!'\n              ]\"\n              style=\"animation-direction: reverse;\"\n            ></div>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n      }\n    </div>\n  </div>\n}", styles: ["@keyframes bar-scale{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.animate-bar-scale{animation:bar-scale .9s ease-in-out infinite}\n"] }]
         }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], isFloating: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFloating", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], withBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBox", required: false }] }], boxColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "boxColorClass", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 // ==============================================
@@ -2038,11 +2026,11 @@ class Label {
         return sizes[this.size()];
     }, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Label, isStandalone: true, selector: "ZS-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintId: { classPropertyName: "hintId", publicName: "hintId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n  <label \n    [for]=\"for()\" \n    class=\"zs:flex zs:items-center zs:gap-2\"\n  >\n\n    <!-- ========== Label Text ========== -->\n    @if (label()) {\n      <span class=\"zs:font-semibold zs:truncate\" [ngClass]=\"sizeClasses().label\">\n        {{ label() }}\n\n        <!-- Required Indicator -->\n        @if (required()) {\n          <span class=\"zs:text-red-500\" aria-hidden=\"true\">*</span>\n          <span class=\"sr-only\">(required)</span>\n        }\n      </span>\n    }\n\n    <!-- ========== Hint Text ========== -->\n    @if (hint()) {\n      <small\n        [id]=\"hintId()\"\n        class=\"zs:text-slate-500 zs:dark:text-slate-400\" \n        [ngClass]=\"sizeClasses().hint\"\n      >\n        {{ hint() }}\n      </small>\n    }\n    <!-- ========== End Hint Text ========== -->\n\n  </label>\n}\n<!-- ================= End Label Wrapper ================= -->", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Label, isStandalone: true, selector: "ZS-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintId: { classPropertyName: "hintId", publicName: "hintId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n  <label \n    [for]=\"for()\" \n    class=\"zs:flex zs:flex-wrap zs:items-center zs:gap-2\"\n  >\n\n    <!-- ========== Label Text ========== -->\n    @if (label()) {\n      <span class=\"zs:font-semibold\" [ngClass]=\"sizeClasses().label\">\n        {{ label() }}\n\n        <!-- Required Indicator -->\n        @if (required()) {\n          <span class=\"zs:text-red-500\" aria-hidden=\"true\">*</span>\n          <span class=\"sr-only\">(required)</span>\n        }\n      </span>\n    }\n\n    <!-- ========== Hint Text ========== -->\n    @if (hint()) {\n      <small\n        [id]=\"hintId()\"\n        class=\"zs:text-slate-500 zs:dark:text-slate-400\" \n        [ngClass]=\"sizeClasses().hint\"\n      >\n        {{ hint() }}\n      </small>\n    }\n    <!-- ========== End Hint Text ========== -->\n\n  </label>\n}\n<!-- ================= End Label Wrapper ================= -->", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Label, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-label', imports: [CommonModule], template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n  <label \n    [for]=\"for()\" \n    class=\"zs:flex zs:items-center zs:gap-2\"\n  >\n\n    <!-- ========== Label Text ========== -->\n    @if (label()) {\n      <span class=\"zs:font-semibold zs:truncate\" [ngClass]=\"sizeClasses().label\">\n        {{ label() }}\n\n        <!-- Required Indicator -->\n        @if (required()) {\n          <span class=\"zs:text-red-500\" aria-hidden=\"true\">*</span>\n          <span class=\"sr-only\">(required)</span>\n        }\n      </span>\n    }\n\n    <!-- ========== Hint Text ========== -->\n    @if (hint()) {\n      <small\n        [id]=\"hintId()\"\n        class=\"zs:text-slate-500 zs:dark:text-slate-400\" \n        [ngClass]=\"sizeClasses().hint\"\n      >\n        {{ hint() }}\n      </small>\n    }\n    <!-- ========== End Hint Text ========== -->\n\n  </label>\n}\n<!-- ================= End Label Wrapper ================= -->", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ZS-label', imports: [CommonModule], template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n  <label \n    [for]=\"for()\" \n    class=\"zs:flex zs:flex-wrap zs:items-center zs:gap-2\"\n  >\n\n    <!-- ========== Label Text ========== -->\n    @if (label()) {\n      <span class=\"zs:font-semibold\" [ngClass]=\"sizeClasses().label\">\n        {{ label() }}\n\n        <!-- Required Indicator -->\n        @if (required()) {\n          <span class=\"zs:text-red-500\" aria-hidden=\"true\">*</span>\n          <span class=\"sr-only\">(required)</span>\n        }\n      </span>\n    }\n\n    <!-- ========== Hint Text ========== -->\n    @if (hint()) {\n      <small\n        [id]=\"hintId()\"\n        class=\"zs:text-slate-500 zs:dark:text-slate-400\" \n        [ngClass]=\"sizeClasses().hint\"\n      >\n        {{ hint() }}\n      </small>\n    }\n    <!-- ========== End Hint Text ========== -->\n\n  </label>\n}\n<!-- ================= End Label Wrapper ================= -->", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], hintId: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }] } });
 
 // ==============================================