@ziadshalaby/ngx-zs-component 3.2.4 → 3.2.5

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

@@ -205,11 +205,11 @@ class Alert {
         this.alertService.onAlertClosed(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Alert, isStandalone: true, selector: "ZS-alert", inputs: { positionClass: { classPropertyName: "positionClass", publicName: "positionClass", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, maxh: { classPropertyName: "maxh", publicName: "maxh", isSignal: true, isRequired: false, transformFunction: null }, defaultShowCloseButton: { classPropertyName: "defaultShowCloseButton", publicName: "defaultShowCloseButton", isSignal: true, isRequired: false, transformFunction: null }, defaultAutoClose: { classPropertyName: "defaultAutoClose", publicName: "defaultAutoClose", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Alert Container ========================= -->\n<div\n  class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n  zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3\"\n  [ngClass]=\"[positionClass(), maxh()]\"\n  role=\"region\"\n  aria-label=\"Notification area\"\n  aria-live=\"polite\"\n>\n\n  @for (alert of alertConfig(); track alert.id) {\n\n    <!-- ========================= Alert Card ========================= -->\n    <div\n      class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n              zs:transition-all zs:duration-300 zs:ease-in-out animate-fade-in zs:relative zs:overflow-hidden\"\n      [class]=\"alert.bgColor + ' ' + alert.textColor + ' ' + alert.borderColor\"\n      role=\"alert\"\n    >\n\n      <!-- ========================= Alert Content ========================= -->\n      <div class=\"zs:flex zs:items-center\">\n\n        <!-- Icon -->\n        <i\n          [class]=\"alert.icon + ' zs:mt-0.5 zs:me-3'\"\n          aria-hidden=\"true\"\n        ></i>\n\n        <!-- Message -->\n        <div class=\"zs:flex-1 zs:text-sm zs:font-medium\">\n          {{ alert.message }}\n        </div>\n\n        <!-- Close Button -->\n        @if (alert.showCloseButton ?? defaultShowCloseButton()) {\n          <button\n            type=\"button\"\n            class=\"zs:ms-2 zs:inline-flex zs:h-6 zs:w-6 zs:items-center zs:justify-center zs:rounded-full\n                    zs:text-gray-500 zs:dark:text-gray-300 zs:transition-colors\n                    zs:hover:bg-gray-200 zs:dark:hover:bg-gray-700\n                    zs:hover:text-gray-700 zs:dark:hover:text-gray-100\n                    zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-within:ring-indigo-500\"\n            (click)=\"closeAlert(alert.id!)\"\n            aria-label=\"Close alert\"\n          >\n            <i class=\"fas fa-times zs:text-xs\" aria-hidden=\"true\"></i>\n          </button>\n        }\n\n      </div>\n\n      <!-- ========================= Auto-Close Progress Bar ========================= -->\n      @if (alert.autoClose ?? defaultAutoClose()) {\n        <div\n          class=\"zs:absolute zs:bottom-0 zs:left-0 zs:h-1 zs:bg-gray-300 zs:dark:bg-gray-700 zs:w-full zs:transition-colors\"\n          role=\"progressbar\"\n          [attr.aria-valuenow]=\"alert.progress ?? 100\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n        >\n          <div\n            class=\"zs:h-1 zs:bg-current zs:transition-[width] zs:duration-100\"\n            [style.width.%]=\"alert.progress ?? 100\"\n          ></div>\n        </div>\n      }\n    </div>\n  }\n</div>", styles: ["@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out forwards}\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: Alert, isStandalone: true, selector: "ZS-alert", inputs: { positionClass: { classPropertyName: "positionClass", publicName: "positionClass", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, maxh: { classPropertyName: "maxh", publicName: "maxh", isSignal: true, isRequired: false, transformFunction: null }, defaultShowCloseButton: { classPropertyName: "defaultShowCloseButton", publicName: "defaultShowCloseButton", isSignal: true, isRequired: false, transformFunction: null }, defaultAutoClose: { classPropertyName: "defaultAutoClose", publicName: "defaultAutoClose", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Alert Container ========================= -->\n<div\n  class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n  zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3\"\n  [ngClass]=\"[positionClass(), maxh()]\"\n  role=\"region\"\n  aria-label=\"Notification area\"\n  aria-live=\"polite\"\n>\n\n  @for (alert of alertConfig(); track alert.id) {\n\n    <!-- ========================= Alert Card ========================= -->\n    <div\n      class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n            animate-fade-in zs:relative zs:overflow-hidden\"\n      [class]=\"alert.bgColor + ' ' + alert.textColor + ' ' + alert.borderColor\"\n      role=\"alert\"\n    >\n\n      <!-- ========================= Alert Content ========================= -->\n      <div class=\"zs:flex zs:items-center\">\n\n        <!-- Icon -->\n        <i\n          [class]=\"alert.icon + ' zs:mt-0.5 zs:me-3'\"\n          aria-hidden=\"true\"\n        ></i>\n\n        <!-- Message -->\n        <div class=\"zs:flex-1 zs:text-sm zs:font-medium\">\n          {{ alert.message }}\n        </div>\n\n        <!-- Close Button -->\n        @if (alert.showCloseButton ?? defaultShowCloseButton()) {\n          <button\n            type=\"button\"\n            class=\"zs:ms-2 zs:inline-flex zs:h-6 zs:w-6 zs:items-center zs:justify-center zs:rounded-full\n                    zs:text-gray-500 zs:dark:text-gray-300\n                    zs:hover:bg-gray-200 zs:dark:hover:bg-gray-700\n                    zs:hover:text-gray-700 zs:dark:hover:text-gray-100\n                    zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-within:ring-indigo-500\"\n            (click)=\"closeAlert(alert.id!)\"\n            aria-label=\"Close alert\"\n          >\n            <i class=\"fas fa-times zs:text-xs\" aria-hidden=\"true\"></i>\n          </button>\n        }\n\n      </div>\n\n      <!-- ========================= Auto-Close Progress Bar ========================= -->\n      @if (alert.autoClose ?? defaultAutoClose()) {\n        <div\n          class=\"zs:absolute zs:bottom-0 zs:left-0 zs:h-1 zs:bg-gray-300 zs:dark:bg-gray-700 zs:w-full\"\n          role=\"progressbar\"\n          [attr.aria-valuenow]=\"alert.progress ?? 100\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n        >\n          <div\n            class=\"zs:h-1 zs:bg-current zs:transition-[width] zs:duration-100\"\n            [style.width.%]=\"alert.progress ?? 100\"\n          ></div>\n        </div>\n      }\n    </div>\n  }\n</div>", styles: ["@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out forwards}\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: Alert, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-alert', imports: [CommonModule], template: "<!-- ========================= Alert Container ========================= -->\n<div\n  class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n  zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3\"\n  [ngClass]=\"[positionClass(), maxh()]\"\n  role=\"region\"\n  aria-label=\"Notification area\"\n  aria-live=\"polite\"\n>\n\n  @for (alert of alertConfig(); track alert.id) {\n\n    <!-- ========================= Alert Card ========================= -->\n    <div\n      class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n              zs:transition-all zs:duration-300 zs:ease-in-out animate-fade-in zs:relative zs:overflow-hidden\"\n      [class]=\"alert.bgColor + ' ' + alert.textColor + ' ' + alert.borderColor\"\n      role=\"alert\"\n    >\n\n      <!-- ========================= Alert Content ========================= -->\n      <div class=\"zs:flex zs:items-center\">\n\n        <!-- Icon -->\n        <i\n          [class]=\"alert.icon + ' zs:mt-0.5 zs:me-3'\"\n          aria-hidden=\"true\"\n        ></i>\n\n        <!-- Message -->\n        <div class=\"zs:flex-1 zs:text-sm zs:font-medium\">\n          {{ alert.message }}\n        </div>\n\n        <!-- Close Button -->\n        @if (alert.showCloseButton ?? defaultShowCloseButton()) {\n          <button\n            type=\"button\"\n            class=\"zs:ms-2 zs:inline-flex zs:h-6 zs:w-6 zs:items-center zs:justify-center zs:rounded-full\n                    zs:text-gray-500 zs:dark:text-gray-300 zs:transition-colors\n                    zs:hover:bg-gray-200 zs:dark:hover:bg-gray-700\n                    zs:hover:text-gray-700 zs:dark:hover:text-gray-100\n                    zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-within:ring-indigo-500\"\n            (click)=\"closeAlert(alert.id!)\"\n            aria-label=\"Close alert\"\n          >\n            <i class=\"fas fa-times zs:text-xs\" aria-hidden=\"true\"></i>\n          </button>\n        }\n\n      </div>\n\n      <!-- ========================= Auto-Close Progress Bar ========================= -->\n      @if (alert.autoClose ?? defaultAutoClose()) {\n        <div\n          class=\"zs:absolute zs:bottom-0 zs:left-0 zs:h-1 zs:bg-gray-300 zs:dark:bg-gray-700 zs:w-full zs:transition-colors\"\n          role=\"progressbar\"\n          [attr.aria-valuenow]=\"alert.progress ?? 100\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n        >\n          <div\n            class=\"zs:h-1 zs:bg-current zs:transition-[width] zs:duration-100\"\n            [style.width.%]=\"alert.progress ?? 100\"\n          ></div>\n        </div>\n      }\n    </div>\n  }\n</div>", styles: ["@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out forwards}\n"] }]
+            args: [{ selector: 'ZS-alert', imports: [CommonModule], template: "<!-- ========================= Alert Container ========================= -->\n<div\n  class=\"zs:fixed zs:ml-4 zs:break-all {{ zIndices.alert }} zs:flex zs:flex-col \n  zs:overflow-y-auto scroll scroll-secondary zs:p-2 zs:gap-3\"\n  [ngClass]=\"[positionClass(), maxh()]\"\n  role=\"region\"\n  aria-label=\"Notification area\"\n  aria-live=\"polite\"\n>\n\n  @for (alert of alertConfig(); track alert.id) {\n\n    <!-- ========================= Alert Card ========================= -->\n    <div\n      class=\"zs:pointer-events-auto zs:max-w-sm zs:min-h-14 zs:rounded-lg zs:border zs:p-4 zs:shadow-md zs:dark:shadow-gray-400/30\n            animate-fade-in zs:relative zs:overflow-hidden\"\n      [class]=\"alert.bgColor + ' ' + alert.textColor + ' ' + alert.borderColor\"\n      role=\"alert\"\n    >\n\n      <!-- ========================= Alert Content ========================= -->\n      <div class=\"zs:flex zs:items-center\">\n\n        <!-- Icon -->\n        <i\n          [class]=\"alert.icon + ' zs:mt-0.5 zs:me-3'\"\n          aria-hidden=\"true\"\n        ></i>\n\n        <!-- Message -->\n        <div class=\"zs:flex-1 zs:text-sm zs:font-medium\">\n          {{ alert.message }}\n        </div>\n\n        <!-- Close Button -->\n        @if (alert.showCloseButton ?? defaultShowCloseButton()) {\n          <button\n            type=\"button\"\n            class=\"zs:ms-2 zs:inline-flex zs:h-6 zs:w-6 zs:items-center zs:justify-center zs:rounded-full\n                    zs:text-gray-500 zs:dark:text-gray-300\n                    zs:hover:bg-gray-200 zs:dark:hover:bg-gray-700\n                    zs:hover:text-gray-700 zs:dark:hover:text-gray-100\n                    zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-within:ring-indigo-500\"\n            (click)=\"closeAlert(alert.id!)\"\n            aria-label=\"Close alert\"\n          >\n            <i class=\"fas fa-times zs:text-xs\" aria-hidden=\"true\"></i>\n          </button>\n        }\n\n      </div>\n\n      <!-- ========================= Auto-Close Progress Bar ========================= -->\n      @if (alert.autoClose ?? defaultAutoClose()) {\n        <div\n          class=\"zs:absolute zs:bottom-0 zs:left-0 zs:h-1 zs:bg-gray-300 zs:dark:bg-gray-700 zs:w-full\"\n          role=\"progressbar\"\n          [attr.aria-valuenow]=\"alert.progress ?? 100\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n        >\n          <div\n            class=\"zs:h-1 zs:bg-current zs:transition-[width] zs:duration-100\"\n            [style.width.%]=\"alert.progress ?? 100\"\n          ></div>\n        </div>\n      }\n    </div>\n  }\n</div>", styles: ["@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out forwards}\n"] }]
         }], ctorParameters: () => [], propDecorators: { positionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionClass", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], maxh: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxh", required: false }] }], defaultShowCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultShowCloseButton", required: false }] }], defaultAutoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultAutoClose", required: false }] }], defaultDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultDuration", required: false }] }] } });
 
 // ==============================================
@@ -353,7 +353,7 @@ class NavItem {
     // Helper Methods
     // ==============================================
     getItemClasses = (item) => {
-        const base = 'zs:text-gray-600 zs:dark:text-gray-300 zs:transition-colors';
+        const base = 'zs:text-gray-600 zs:dark:text-gray-300';
         const defaultTextClass = base + ' zs:hover:text-gray-900 zs:dark:hover:text-gray-100';
         const defaultBgClass = base + ' zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700';
         if (item.colorClass) {
@@ -369,11 +369,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-4 zs:w-54 zs:mt-1 zs:p-2 zs:bg-white zs:dark:bg-gray-800 \n          zs:rounded-md shadow-md-all shadow-md-all-night zs:transition-colors': item().childrenOpenWindow,\n          'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n        }\"\n        class=\"{{ zIndices.navItemDropdown }} zs:flex zs:flex-col zs:gap-2\"\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"] }] });
+    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-4 zs:w-54 zs:mt-1 zs:p-2 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 }} zs:flex zs:flex-col zs:gap-2\"\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-4 zs:w-54 zs:mt-1 zs:p-2 zs:bg-white zs:dark:bg-gray-800 \n          zs:rounded-md shadow-md-all shadow-md-all-night zs:transition-colors': item().childrenOpenWindow,\n          'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n        }\"\n        class=\"{{ zIndices.navItemDropdown }} zs:flex zs:flex-col zs:gap-2\"\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}" }]
+            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-4 zs:w-54 zs:mt-1 zs:p-2 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 }} zs:flex zs:flex-col zs:gap-2\"\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
@@ -906,7 +906,7 @@ class Card {
       zs:will-change-transform
       zs:translate-x-0
       zs:translate-y-0
-      zs:transition zs:duration-500`;
+      zs:transition-[transform,opacity] zs:duration-500`;
         }
         // Hidden state
         if (animation === 'none') {
@@ -926,7 +926,7 @@ class Card {
         const bodyClass = this.bodyClass();
         const ringPalette = ringPaletteMap.get(style);
         const cardPalette = cardPaletteMap.get(style);
-        const base = 'zs:w-full zs:h-full zs:overflow-hidden zs:flex zs:flex-col zs:gap-4 zs:rounded-lg zs:transition-all zs:duration-300';
+        const base = 'zs:w-full zs:h-full zs:overflow-hidden zs:flex zs:flex-col zs:gap-4 zs:rounded-lg zs:transition-transform zs:duration-300 motion-reduce:zs:transition-none';
         // ---------------------
         // Border Handling
         // ---------------------
@@ -1153,11 +1153,11 @@ class Carousel {
         trackEl.nativeElement.style.transition = transition ?? 'none';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Carousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Carousel, isStandalone: true, selector: "ZS-carousel", inputs: { itemsNumber: { classPropertyName: "itemsNumber", publicName: "itemsNumber", isSignal: true, isRequired: true, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: true, isRequired: false, transformFunction: null }, arrowColor: { classPropertyName: "arrowColor", publicName: "arrowColor", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, maxItemsPerBox: { classPropertyName: "maxItemsPerBox", publicName: "maxItemsPerBox", isSignal: true, isRequired: false, transformFunction: null }, itemMinWidth: { classPropertyName: "itemMinWidth", publicName: "itemMinWidth", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChangeEv: "indexChangeEv", currentIndex: "currentIndexChange" }, viewQueries: [{ propertyName: "carouselContainer", first: true, predicate: ["carouselContainer"], descendants: true, isSignal: true }, { propertyName: "carouselTrack", first: true, predicate: ["carouselTrack"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- =================================== Main Container =================================== -->\n<div \n  class=\"zs:relative zs:w-full zs:mt-6\"\n  role=\"region\"\n  aria-label=\"Image carousel\"\n  aria-roledescription=\"carousel\"\n>\n\n  <!-- =================================== Carousel Track =================================== -->\n  <div \n    carousel-container\n    #carouselContainer\n    class=\"zs:overflow-hidden zs:relative\"\n    role=\"group\"\n    aria-label=\"Carousel track\"\n    (pointerdown)=\"onDragStart($event)\"\n    (pointermove)=\"onDragMove($event)\"\n    (pointerup)=\"onDragEnd()\"\n    (pointerleave)=\"onDragEnd()\"\n    (pointercancel)=\"onDragEnd()\"\n    [class.dragging]=\"dragging()\"\n  >\n    <div \n      #carouselTrack \n      [style.--carousel-item-width]=\"itemsPerBoxWidth()\"\n      class=\"zs:flex zs:transition-transform zs:duration-500 zs:ease-in-out\"\n      [style.transform]=\"'translateX(' + currentTranslate() + 'px)'\"\n    >\n      <!-- Cards -->\n      <ng-content select=\"[carousel-item]\"></ng-content>\n      <!-- /Cards -->\n    </div>\n  </div>\n  <!-- =================================== /Carousel Track =================================== -->\n\n  <!-- =================================== Navigation Arrows =================================== -->\n  @if (arrows()) {\n    <button\n      type=\"button\"\n      class=\"zs:absolute zs:top-1/2 zs:left-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex zs:items-center zs:justify-center \n      zs:rounded-full zs:bg-gray-100/50 zs:dark:bg-gray-500/50 zs:hover:bg-gray-100/70 \n      zs:dark:hover:bg-gray-500/70 zs:transition shadow-lg-all shadow-lg-all-night\"\n      (click)=\"previous()\"\n      aria-label=\"Previous slide\"\n      [attr.aria-controls]=\"carouselContainer?.id\"\n    >\n      <i [ngClass]=\"arrowColorClass()\" class=\"fas fa-chevron-left zs:text-xl\" aria-hidden=\"true\"></i>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"zs:absolute zs:top-1/2 zs:right-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex zs:items-center zs:justify-center \n      zs:rounded-full zs:bg-gray-100/50 zs:dark:bg-gray-500/50 zs:hover:bg-gray-100/70 \n      zs:dark:hover:bg-gray-500/70 zs:transition shadow-lg-all shadow-lg-all-night\"\n      (click)=\"next()\"\n      aria-label=\"Next slide\"\n      [attr.aria-controls]=\"carouselContainer?.id\"\n    >\n      <i [ngClass]=\"arrowColorClass()\" class=\"fas fa-chevron-right zs:text-xl\" aria-hidden=\"true\"></i>\n    </button>\n  }\n  <!-- =================================== /Navigation Arrows =================================== -->\n\n</div>\n<!-- =================================== /Main Container =================================== -->\n\n\n<!-- =================================== Indicators =================================== -->\n@if(showIndicators()) {\n  <div class=\"zs:flex zs:justify-center zs:mt-4 zs:gap-2\" role=\"tablist\" aria-label=\"Carousel indicators\">\n    @for (item of indicatorBoxes(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"zs:w-3 zs:h-3 zs:rounded-full zs:transition\"\n        [ngClass]=\"currentIndex() === i \n                    ? 'zs:bg-gray-800 zs:dark:bg-gray-200 zs:scale-110' \n                    : 'zs:bg-gray-400 zs:dark:bg-gray-600 zs:hover:bg-gray-600 zs:dark:hover:bg-gray-400'\"\n        (click)=\"updateIndex(i)\"\n        [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n        [attr.aria-current]=\"currentIndex() === i ? 'true' : null\"\n        tabindex=\"0\"\n      ></button>\n    }\n  </div>\n}\n<!-- =================================== /Indicators =================================== -->", styles: [":host{display:block}[carousel-container]{touch-action:pan-y;cursor:grab}[carousel-container].dragging{cursor:grabbing!important}\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: Carousel, isStandalone: true, selector: "ZS-carousel", inputs: { itemsNumber: { classPropertyName: "itemsNumber", publicName: "itemsNumber", isSignal: true, isRequired: true, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: true, isRequired: false, transformFunction: null }, arrowColor: { classPropertyName: "arrowColor", publicName: "arrowColor", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, maxItemsPerBox: { classPropertyName: "maxItemsPerBox", publicName: "maxItemsPerBox", isSignal: true, isRequired: false, transformFunction: null }, itemMinWidth: { classPropertyName: "itemMinWidth", publicName: "itemMinWidth", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChangeEv: "indexChangeEv", currentIndex: "currentIndexChange" }, viewQueries: [{ propertyName: "carouselContainer", first: true, predicate: ["carouselContainer"], descendants: true, isSignal: true }, { propertyName: "carouselTrack", first: true, predicate: ["carouselTrack"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- =================================== Main Container =================================== -->\n<div \n  class=\"zs:relative zs:w-full zs:mt-6\"\n  role=\"region\"\n  aria-label=\"Image carousel\"\n  aria-roledescription=\"carousel\"\n>\n\n  <!-- =================================== Carousel Track =================================== -->\n  <div \n    carousel-container\n    #carouselContainer\n    class=\"zs:overflow-hidden zs:relative\"\n    role=\"group\"\n    aria-label=\"Carousel track\"\n    (pointerdown)=\"onDragStart($event)\"\n    (pointermove)=\"onDragMove($event)\"\n    (pointerup)=\"onDragEnd()\"\n    (pointerleave)=\"onDragEnd()\"\n    (pointercancel)=\"onDragEnd()\"\n    [class.dragging]=\"dragging()\"\n  >\n    <div \n      #carouselTrack \n      [style.--carousel-item-width]=\"itemsPerBoxWidth()\"\n      class=\"zs:flex zs:transition-transform zs:duration-500 zs:ease-in-out\"\n      [style.transform]=\"'translateX(' + currentTranslate() + 'px)'\"\n    >\n      <!-- Cards -->\n      <ng-content select=\"[carousel-item]\"></ng-content>\n      <!-- /Cards -->\n    </div>\n  </div>\n  <!-- =================================== /Carousel Track =================================== -->\n\n  <!-- =================================== Navigation Arrows =================================== -->\n  @if (arrows()) {\n    <button\n      type=\"button\"\n      class=\"zs:absolute zs:top-1/2 zs:left-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex \n      zs:items-center zs:justify-center zs:rounded-full zs:bg-gray-100/50 zs:dark:bg-gray-500/50 \n      zs:hover:bg-gray-100/70 zs:dark:hover:bg-gray-500/70 zs:transition-[background-color,box-shadow] \n      shadow-lg-all shadow-lg-all-night\"\n      (click)=\"previous()\"\n      aria-label=\"Previous slide\"\n      [attr.aria-controls]=\"carouselContainer?.id\"\n    >\n      <i [ngClass]=\"arrowColorClass()\" class=\"fas fa-chevron-left zs:text-xl\" aria-hidden=\"true\"></i>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"zs:absolute zs:top-1/2 zs:right-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex \n      zs:items-center zs:justify-center zs:rounded-full zs:bg-gray-100/50 zs:dark:bg-gray-500/50 \n      zs:hover:bg-gray-100/70 zs:dark:hover:bg-gray-500/70 zs:transition-[background-color,box-shadow] \n      shadow-lg-all shadow-lg-all-night\"\n      (click)=\"next()\"\n      aria-label=\"Next slide\"\n      [attr.aria-controls]=\"carouselContainer?.id\"\n    >\n      <i [ngClass]=\"arrowColorClass()\" class=\"fas fa-chevron-right zs:text-xl\" aria-hidden=\"true\"></i>\n    </button>\n  }\n  <!-- =================================== /Navigation Arrows =================================== -->\n\n</div>\n<!-- =================================== /Main Container =================================== -->\n\n\n<!-- =================================== Indicators =================================== -->\n@if(showIndicators()) {\n  <div class=\"zs:flex zs:justify-center zs:mt-4 zs:gap-2\" role=\"tablist\" aria-label=\"Carousel indicators\">\n    @for (item of indicatorBoxes(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"zs:w-3 zs:h-3 zs:rounded-full zs:transition\"\n        [ngClass]=\"currentIndex() === i \n                    ? 'zs:bg-gray-800 zs:dark:bg-gray-200 zs:scale-110' \n                    : 'zs:bg-gray-400 zs:dark:bg-gray-600 zs:hover:bg-gray-600 zs:dark:hover:bg-gray-400'\"\n        (click)=\"updateIndex(i)\"\n        [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n        [attr.aria-current]=\"currentIndex() === i ? 'true' : null\"\n        tabindex=\"0\"\n      ></button>\n    }\n  </div>\n}\n<!-- =================================== /Indicators =================================== -->", styles: [":host{display:block}[carousel-container]{touch-action:pan-y;cursor:grab}[carousel-container].dragging{cursor:grabbing!important}\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: Carousel, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-carousel', imports: [CommonModule], template: "<!-- =================================== Main Container =================================== -->\n<div \n  class=\"zs:relative zs:w-full zs:mt-6\"\n  role=\"region\"\n  aria-label=\"Image carousel\"\n  aria-roledescription=\"carousel\"\n>\n\n  <!-- =================================== Carousel Track =================================== -->\n  <div \n    carousel-container\n    #carouselContainer\n    class=\"zs:overflow-hidden zs:relative\"\n    role=\"group\"\n    aria-label=\"Carousel track\"\n    (pointerdown)=\"onDragStart($event)\"\n    (pointermove)=\"onDragMove($event)\"\n    (pointerup)=\"onDragEnd()\"\n    (pointerleave)=\"onDragEnd()\"\n    (pointercancel)=\"onDragEnd()\"\n    [class.dragging]=\"dragging()\"\n  >\n    <div \n      #carouselTrack \n      [style.--carousel-item-width]=\"itemsPerBoxWidth()\"\n      class=\"zs:flex zs:transition-transform zs:duration-500 zs:ease-in-out\"\n      [style.transform]=\"'translateX(' + currentTranslate() + 'px)'\"\n    >\n      <!-- Cards -->\n      <ng-content select=\"[carousel-item]\"></ng-content>\n      <!-- /Cards -->\n    </div>\n  </div>\n  <!-- =================================== /Carousel Track =================================== -->\n\n  <!-- =================================== Navigation Arrows =================================== -->\n  @if (arrows()) {\n    <button\n      type=\"button\"\n      class=\"zs:absolute zs:top-1/2 zs:left-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex zs:items-center zs:justify-center \n      zs:rounded-full zs:bg-gray-100/50 zs:dark:bg-gray-500/50 zs:hover:bg-gray-100/70 \n      zs:dark:hover:bg-gray-500/70 zs:transition shadow-lg-all shadow-lg-all-night\"\n      (click)=\"previous()\"\n      aria-label=\"Previous slide\"\n      [attr.aria-controls]=\"carouselContainer?.id\"\n    >\n      <i [ngClass]=\"arrowColorClass()\" class=\"fas fa-chevron-left zs:text-xl\" aria-hidden=\"true\"></i>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"zs:absolute zs:top-1/2 zs:right-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex zs:items-center zs:justify-center \n      zs:rounded-full zs:bg-gray-100/50 zs:dark:bg-gray-500/50 zs:hover:bg-gray-100/70 \n      zs:dark:hover:bg-gray-500/70 zs:transition shadow-lg-all shadow-lg-all-night\"\n      (click)=\"next()\"\n      aria-label=\"Next slide\"\n      [attr.aria-controls]=\"carouselContainer?.id\"\n    >\n      <i [ngClass]=\"arrowColorClass()\" class=\"fas fa-chevron-right zs:text-xl\" aria-hidden=\"true\"></i>\n    </button>\n  }\n  <!-- =================================== /Navigation Arrows =================================== -->\n\n</div>\n<!-- =================================== /Main Container =================================== -->\n\n\n<!-- =================================== Indicators =================================== -->\n@if(showIndicators()) {\n  <div class=\"zs:flex zs:justify-center zs:mt-4 zs:gap-2\" role=\"tablist\" aria-label=\"Carousel indicators\">\n    @for (item of indicatorBoxes(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"zs:w-3 zs:h-3 zs:rounded-full zs:transition\"\n        [ngClass]=\"currentIndex() === i \n                    ? 'zs:bg-gray-800 zs:dark:bg-gray-200 zs:scale-110' \n                    : 'zs:bg-gray-400 zs:dark:bg-gray-600 zs:hover:bg-gray-600 zs:dark:hover:bg-gray-400'\"\n        (click)=\"updateIndex(i)\"\n        [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n        [attr.aria-current]=\"currentIndex() === i ? 'true' : null\"\n        tabindex=\"0\"\n      ></button>\n    }\n  </div>\n}\n<!-- =================================== /Indicators =================================== -->", styles: [":host{display:block}[carousel-container]{touch-action:pan-y;cursor:grab}[carousel-container].dragging{cursor:grabbing!important}\n"] }]
+            args: [{ selector: 'ZS-carousel', imports: [CommonModule], template: "<!-- =================================== Main Container =================================== -->\n<div \n  class=\"zs:relative zs:w-full zs:mt-6\"\n  role=\"region\"\n  aria-label=\"Image carousel\"\n  aria-roledescription=\"carousel\"\n>\n\n  <!-- =================================== Carousel Track =================================== -->\n  <div \n    carousel-container\n    #carouselContainer\n    class=\"zs:overflow-hidden zs:relative\"\n    role=\"group\"\n    aria-label=\"Carousel track\"\n    (pointerdown)=\"onDragStart($event)\"\n    (pointermove)=\"onDragMove($event)\"\n    (pointerup)=\"onDragEnd()\"\n    (pointerleave)=\"onDragEnd()\"\n    (pointercancel)=\"onDragEnd()\"\n    [class.dragging]=\"dragging()\"\n  >\n    <div \n      #carouselTrack \n      [style.--carousel-item-width]=\"itemsPerBoxWidth()\"\n      class=\"zs:flex zs:transition-transform zs:duration-500 zs:ease-in-out\"\n      [style.transform]=\"'translateX(' + currentTranslate() + 'px)'\"\n    >\n      <!-- Cards -->\n      <ng-content select=\"[carousel-item]\"></ng-content>\n      <!-- /Cards -->\n    </div>\n  </div>\n  <!-- =================================== /Carousel Track =================================== -->\n\n  <!-- =================================== Navigation Arrows =================================== -->\n  @if (arrows()) {\n    <button\n      type=\"button\"\n      class=\"zs:absolute zs:top-1/2 zs:left-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex \n      zs:items-center zs:justify-center zs:rounded-full zs:bg-gray-100/50 zs:dark:bg-gray-500/50 \n      zs:hover:bg-gray-100/70 zs:dark:hover:bg-gray-500/70 zs:transition-[background-color,box-shadow] \n      shadow-lg-all shadow-lg-all-night\"\n      (click)=\"previous()\"\n      aria-label=\"Previous slide\"\n      [attr.aria-controls]=\"carouselContainer?.id\"\n    >\n      <i [ngClass]=\"arrowColorClass()\" class=\"fas fa-chevron-left zs:text-xl\" aria-hidden=\"true\"></i>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"zs:absolute zs:top-1/2 zs:right-3 zs:size-10 zs:-translate-y-1/2 zs:p-3 zs:flex \n      zs:items-center zs:justify-center zs:rounded-full zs:bg-gray-100/50 zs:dark:bg-gray-500/50 \n      zs:hover:bg-gray-100/70 zs:dark:hover:bg-gray-500/70 zs:transition-[background-color,box-shadow] \n      shadow-lg-all shadow-lg-all-night\"\n      (click)=\"next()\"\n      aria-label=\"Next slide\"\n      [attr.aria-controls]=\"carouselContainer?.id\"\n    >\n      <i [ngClass]=\"arrowColorClass()\" class=\"fas fa-chevron-right zs:text-xl\" aria-hidden=\"true\"></i>\n    </button>\n  }\n  <!-- =================================== /Navigation Arrows =================================== -->\n\n</div>\n<!-- =================================== /Main Container =================================== -->\n\n\n<!-- =================================== Indicators =================================== -->\n@if(showIndicators()) {\n  <div class=\"zs:flex zs:justify-center zs:mt-4 zs:gap-2\" role=\"tablist\" aria-label=\"Carousel indicators\">\n    @for (item of indicatorBoxes(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"zs:w-3 zs:h-3 zs:rounded-full zs:transition\"\n        [ngClass]=\"currentIndex() === i \n                    ? 'zs:bg-gray-800 zs:dark:bg-gray-200 zs:scale-110' \n                    : 'zs:bg-gray-400 zs:dark:bg-gray-600 zs:hover:bg-gray-600 zs:dark:hover:bg-gray-400'\"\n        (click)=\"updateIndex(i)\"\n        [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n        [attr.aria-current]=\"currentIndex() === i ? 'true' : null\"\n        tabindex=\"0\"\n      ></button>\n    }\n  </div>\n}\n<!-- =================================== /Indicators =================================== -->", styles: [":host{display:block}[carousel-container]{touch-action:pan-y;cursor:grab}[carousel-container].dragging{cursor:grabbing!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { itemsNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsNumber", required: true }] }], arrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrows", required: false }] }], arrowColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowColor", required: false }] }], showIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicators", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], maxItemsPerBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItemsPerBox", required: false }] }], itemMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemMinWidth", required: false }] }], indexChangeEv: [{ type: i0.Output, args: ["indexChangeEv"] }], currentIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentIndex", required: false }] }, { type: i0.Output, args: ["currentIndexChange"] }], carouselContainer: [{ type: i0.ViewChild, args: ['carouselContainer', { isSignal: true }] }], carouselTrack: [{ type: i0.ViewChild, args: ['carouselTrack', { isSignal: true }] }] } });
 
 class Connection {
@@ -1181,11 +1181,11 @@ class Connection {
             this.offlineListener();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Connection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Connection, isStandalone: true, selector: "ZS-connection", outputs: { isOnlineEv: "isOnlineEv" }, ngImport: i0, template: "<div tabindex=\"0\" \n  class=\"zs:inline-flex zs:items-center zs:justify-center zs:gap-2 zs:rounded-full \n  zs:text-sm zs:font-medium zs:px-3 zs:h-8 zs:w-fit zs:cursor-pointer zs:transition-colors\"\n  [ngClass]=\"[\n    isOnline() \n      ? 'zs:bg-green-100 zs:text-green-800 zs:dark:bg-green-700 zs:dark:text-green-100'\n      : 'zs:bg-red-100 zs:text-red-800 zs:dark:bg-red-700 zs:dark:text-red-100'\n  ]\"\n>\n  <i\n    class=\"fa fa-circle zs:text-xs zs:leading-none\"\n    [ngClass]=\"[\n      isOnline() ? 'zs:text-green-500' : 'zs:text-red-500'\n    ]\"\n    aria-hidden=\"true\"\n  ></i>\n  <span>\n    @if (isOnline()) {\n      Online\n    } @else {\n      Offline\n    }\n  </span>\n</div>", styles: ["div{box-shadow:0 1px 2px #0000000d}\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: Connection, isStandalone: true, selector: "ZS-connection", outputs: { isOnlineEv: "isOnlineEv" }, ngImport: i0, template: "<div tabindex=\"0\" \n  class=\"zs:inline-flex zs:items-center zs:justify-center zs:gap-2 zs:rounded-full \n  zs:text-sm zs:font-medium zs:px-3 zs:h-8 zs:w-fit zs:cursor-pointer\"\n  [ngClass]=\"[\n    isOnline() \n      ? 'zs:bg-green-100 zs:text-green-800 zs:dark:bg-green-700 zs:dark:text-green-100'\n      : 'zs:bg-red-100 zs:text-red-800 zs:dark:bg-red-700 zs:dark:text-red-100'\n  ]\"\n>\n  <i\n    class=\"fa fa-circle zs:text-xs zs:leading-none\"\n    [ngClass]=\"[\n      isOnline() ? 'zs:text-green-500' : 'zs:text-red-500'\n    ]\"\n    aria-hidden=\"true\"\n  ></i>\n  <span>\n    @if (isOnline()) {\n      Online\n    } @else {\n      Offline\n    }\n  </span>\n</div>", styles: ["div{box-shadow:0 1px 2px #0000000d}\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: Connection, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-connection', imports: [CommonModule], template: "<div tabindex=\"0\" \n  class=\"zs:inline-flex zs:items-center zs:justify-center zs:gap-2 zs:rounded-full \n  zs:text-sm zs:font-medium zs:px-3 zs:h-8 zs:w-fit zs:cursor-pointer zs:transition-colors\"\n  [ngClass]=\"[\n    isOnline() \n      ? 'zs:bg-green-100 zs:text-green-800 zs:dark:bg-green-700 zs:dark:text-green-100'\n      : 'zs:bg-red-100 zs:text-red-800 zs:dark:bg-red-700 zs:dark:text-red-100'\n  ]\"\n>\n  <i\n    class=\"fa fa-circle zs:text-xs zs:leading-none\"\n    [ngClass]=\"[\n      isOnline() ? 'zs:text-green-500' : 'zs:text-red-500'\n    ]\"\n    aria-hidden=\"true\"\n  ></i>\n  <span>\n    @if (isOnline()) {\n      Online\n    } @else {\n      Offline\n    }\n  </span>\n</div>", styles: ["div{box-shadow:0 1px 2px #0000000d}\n"] }]
+            args: [{ selector: 'ZS-connection', imports: [CommonModule], template: "<div tabindex=\"0\" \n  class=\"zs:inline-flex zs:items-center zs:justify-center zs:gap-2 zs:rounded-full \n  zs:text-sm zs:font-medium zs:px-3 zs:h-8 zs:w-fit zs:cursor-pointer\"\n  [ngClass]=\"[\n    isOnline() \n      ? 'zs:bg-green-100 zs:text-green-800 zs:dark:bg-green-700 zs:dark:text-green-100'\n      : 'zs:bg-red-100 zs:text-red-800 zs:dark:bg-red-700 zs:dark:text-red-100'\n  ]\"\n>\n  <i\n    class=\"fa fa-circle zs:text-xs zs:leading-none\"\n    [ngClass]=\"[\n      isOnline() ? 'zs:text-green-500' : 'zs:text-red-500'\n    ]\"\n    aria-hidden=\"true\"\n  ></i>\n  <span>\n    @if (isOnline()) {\n      Online\n    } @else {\n      Offline\n    }\n  </span>\n</div>", styles: ["div{box-shadow:0 1px 2px #0000000d}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isOnlineEv: [{ type: i0.Output, args: ["isOnlineEv"] }] } });
 
 class ExtractorService {
@@ -1394,11 +1394,11 @@ class Button {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Button, isStandalone: true, selector: "ZS-button", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, btnStyle: { classPropertyName: "btnStyle", publicName: "btnStyle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedEv: "clickedEv" }, ngImport: i0, template: "<!-- ========================= Button Core Attributes ========================= -->\n<button \n  [id]=\"Id()\"\n  class=\"zs:w-full\"\n  [attr.type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [ngClass]=\"['zs:flex zs:gap-2 zs:transition-colors', baseClasses()]\"\n\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-label]=\"icon() ? (icon() + ' button') : undefined\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n\n  (click)=\"onClick($event)\"\n>\n  <!-- ========================= Button Content ========================= -->\n  @if (icon()) {\n    <i [class]=\"icon()\" aria-hidden=\"true\"></i>\n  }\n  <ng-content></ng-content>\n</button>", styles: [":host{display:inline-flex}\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: Button, isStandalone: true, selector: "ZS-button", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, btnStyle: { classPropertyName: "btnStyle", publicName: "btnStyle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedEv: "clickedEv" }, ngImport: i0, template: "<!-- ========================= Button Core Attributes ========================= -->\n<button \n  [id]=\"Id()\"\n  class=\"zs:w-full\"\n  [attr.type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [ngClass]=\"['zs:flex zs:gap-2', baseClasses()]\"\n\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-label]=\"icon() ? (icon() + ' button') : undefined\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n\n  (click)=\"onClick($event)\"\n>\n  <!-- ========================= Button Content ========================= -->\n  @if (icon()) {\n    <i [class]=\"icon()\" aria-hidden=\"true\"></i>\n  }\n  <ng-content></ng-content>\n</button>", styles: [":host{display:inline-flex}\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: Button, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-button', imports: [CommonModule], template: "<!-- ========================= Button Core Attributes ========================= -->\n<button \n  [id]=\"Id()\"\n  class=\"zs:w-full\"\n  [attr.type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [ngClass]=\"['zs:flex zs:gap-2 zs:transition-colors', baseClasses()]\"\n\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-label]=\"icon() ? (icon() + ' button') : undefined\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n\n  (click)=\"onClick($event)\"\n>\n  <!-- ========================= Button Content ========================= -->\n  @if (icon()) {\n    <i [class]=\"icon()\" aria-hidden=\"true\"></i>\n  }\n  <ng-content></ng-content>\n</button>", styles: [":host{display:inline-flex}\n"] }]
+            args: [{ selector: 'ZS-button', imports: [CommonModule], template: "<!-- ========================= Button Core Attributes ========================= -->\n<button \n  [id]=\"Id()\"\n  class=\"zs:w-full\"\n  [attr.type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [ngClass]=\"['zs:flex zs:gap-2', baseClasses()]\"\n\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-label]=\"icon() ? (icon() + ' button') : undefined\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n\n  (click)=\"onClick($event)\"\n>\n  <!-- ========================= Button Content ========================= -->\n  @if (icon()) {\n    <i [class]=\"icon()\" aria-hidden=\"true\"></i>\n  }\n  <ng-content></ng-content>\n</button>", styles: [":host{display:inline-flex}\n"] }]
         }], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], btnStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnStyle", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], clickedEv: [{ type: i0.Output, args: ["clickedEv"] }] } });
 
 // ==============================================
@@ -1506,11 +1506,11 @@ class Modal {
             this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Modal, isStandalone: true, selector: "ZS-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, showCancelIcon: { classPropertyName: "showCancelIcon", publicName: "showCancelIcon", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelConfig: { classPropertyName: "cancelConfig", publicName: "cancelConfig", isSignal: true, isRequired: false, transformFunction: null }, confirmConfig: { classPropertyName: "confirmConfig", publicName: "confirmConfig", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlay: { classPropertyName: "closeOnOverlay", publicName: "closeOnOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmEv: "confirmEv", cancelEv: "cancelEv", closedEv: "closedEv" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n  <div #modalRef\n    class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70 zs:transition-all zs:duration-300\"\n    [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n    (click)=\"onOverlayClick($event)\"\n    role=\"presentation\"\n    [attr.inert]=\"isOpen() ? null : ''\"\n  >\n\n    <!-- ========================= Modal Container ========================= -->\n    <div\n      class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n      zs:rounded-2xl zs:shadow-lg zs:transition-all zs:duration-300 zs:outline-hidden\"\n      [ngClass]=\"[\n        'zs:border', \n        palette().border,\n        palette().text,\n        open() ? 'animate-modalIn' : 'animate-modalOut'\n      ]\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"'modal-title'\"\n      [attr.aria-describedby]=\"'modal-body'\"\n      tabindex=\"0\"\n      (keydown.escape)=\"close()\"\n    >\n\n        <!-- ========================= Modal Header ========================= -->\n        <div\n            class=\"zs:flex zs:items-center zs:justify-between zs:px-4 zs:py-3 zs:border-b\"\n            [class]=\"palette().border\"\n        >\n            <h3 id=\"modal-title\" class=\"zs:font-semibold zs:text-lg\">\n            {{ title() }}\n            </h3>\n            @if(showCancelIcon()) {\n                <button \n                class=\"zs:text-xl zs:hover:opacity-85 zs:cursor-pointer zs:transition-colors \n                zs:duration-200 zs:focus:outline-hidden zs:focus-visible:ring-2 \n                zs:focus-visible:ring-offset-2 zs:focus-visible:ring-blue-500 \n                zs:rounded-md zs:hover:scale-[1.02] zs:active:scale-[0.97]\"\n                (click)=\"close()\"\n                aria-label=\"Close dialog\"\n                >\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            }\n        </div>\n\n        <!-- ========================= Modal Body ========================= -->\n        <div id=\"modal-body\" class=\"zs:p-4 scroll zs:max-h-[75vh] scroll-{{ modalStyle() }}\">\n            <ng-content></ng-content>\n        </div>\n\n        <!-- ========================= Modal Footer ========================= -->\n        @if (showFooter()) {\n            <div\n            class=\"zs:flex zs:justify-end zs:gap-3 zs:p-4 zs:border-t\"\n            [class]=\"palette().border\"\n            >\n                @if (cancelMerged().show) {\n                    <ZS-button\n                    [btnStyle]=\"cancelMerged().btnStyle\"\n                    variant=\"solid\"\n                    type=\"button\"\n                    (clickedEv)=\"cancelEv.emit()\"\n                    [icon]=\"cancelMerged().icon\"\n                    [disabled]=\"cancelMerged().disabled\"\n                    [size]=\"cancelMerged().size\"\n                    [variant]=\"cancelMerged().variant\"\n                    aria-label=\"Cancel\"\n                    >\n                        {{ cancelMerged().text}}\n                    </ZS-button>\n                }\n                @if (confirmMerged().show) {\n                    <ZS-button\n                    type=\"button\"\n                    [btnStyle]=\"confirmMerged().btnStyle\"\n                    (clickedEv)=\"confirmEv.emit()\"\n                    [icon]=\"confirmMerged().icon\"\n                    [disabled]=\"confirmMerged().disabled\"\n                    [size]=\"confirmMerged().size\"\n                    [variant]=\"confirmMerged().variant\"\n                    aria-label=\"Confirm\"\n                    >\n                        {{ confirmMerged().text}}\n                    </ZS-button>\n                }\n            </div>\n        }\n    </div>\n  </div>\n}", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(10px)}}.animate-fadeIn{animation:fadeIn .25s ease-out forwards}.animate-modalIn{animation:modalIn .25s ease-out forwards}.animate-fadeOut{animation:fadeOut .25s ease-in forwards}.animate-modalOut{animation:modalOut .25s ease-in forwards}\n"], dependencies: [{ kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }, { 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: Modal, isStandalone: true, selector: "ZS-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, showCancelIcon: { classPropertyName: "showCancelIcon", publicName: "showCancelIcon", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelConfig: { classPropertyName: "cancelConfig", publicName: "cancelConfig", isSignal: true, isRequired: false, transformFunction: null }, confirmConfig: { classPropertyName: "confirmConfig", publicName: "confirmConfig", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlay: { classPropertyName: "closeOnOverlay", publicName: "closeOnOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmEv: "confirmEv", cancelEv: "cancelEv", closedEv: "closedEv" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n  <div #modalRef\n    class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70\"\n    [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n    (click)=\"onOverlayClick($event)\"\n    role=\"presentation\"\n    [attr.inert]=\"isOpen() ? null : ''\"\n  >\n\n    <!-- ========================= Modal Container ========================= -->\n    <div\n      class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n      zs:rounded-2xl zs:shadow-lg zs:outline-hidden\"\n      [ngClass]=\"[\n        'zs:border', \n        palette().border,\n        palette().text,\n        open() ? 'animate-modalIn' : 'animate-modalOut'\n      ]\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"'modal-title'\"\n      [attr.aria-describedby]=\"'modal-body'\"\n      tabindex=\"0\"\n      (keydown.escape)=\"close()\"\n    >\n\n        <!-- ========================= Modal Header ========================= -->\n        <div\n            class=\"zs:flex zs:items-center zs:justify-between zs:px-4 zs:py-3 zs:border-b\"\n            [class]=\"palette().border\"\n        >\n            <h3 id=\"modal-title\" class=\"zs:font-semibold zs:text-lg\">\n            {{ title() }}\n            </h3>\n            @if(showCancelIcon()) {\n                <button \n                class=\"zs:text-xl zs:hover:opacity-85 zs:cursor-pointer\n                zs:focus:outline-hidden zs:focus-visible:ring-2 \n                zs:focus-visible:ring-offset-2 zs:focus-visible:ring-blue-500 \n                zs:rounded-md zs:hover:scale-[1.02] zs:active:scale-[0.97]\"\n                (click)=\"close()\"\n                aria-label=\"Close dialog\"\n                >\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            }\n        </div>\n\n        <!-- ========================= Modal Body ========================= -->\n        <div id=\"modal-body\" class=\"zs:p-4 scroll zs:max-h-[75vh] scroll-{{ modalStyle() }}\">\n            <ng-content></ng-content>\n        </div>\n\n        <!-- ========================= Modal Footer ========================= -->\n        @if (showFooter()) {\n            <div\n            class=\"zs:flex zs:justify-end zs:gap-3 zs:p-4 zs:border-t\"\n            [class]=\"palette().border\"\n            >\n                @if (cancelMerged().show) {\n                    <ZS-button\n                    [btnStyle]=\"cancelMerged().btnStyle\"\n                    variant=\"solid\"\n                    type=\"button\"\n                    (clickedEv)=\"cancelEv.emit()\"\n                    [icon]=\"cancelMerged().icon\"\n                    [disabled]=\"cancelMerged().disabled\"\n                    [size]=\"cancelMerged().size\"\n                    [variant]=\"cancelMerged().variant\"\n                    aria-label=\"Cancel\"\n                    >\n                        {{ cancelMerged().text}}\n                    </ZS-button>\n                }\n                @if (confirmMerged().show) {\n                    <ZS-button\n                    type=\"button\"\n                    [btnStyle]=\"confirmMerged().btnStyle\"\n                    (clickedEv)=\"confirmEv.emit()\"\n                    [icon]=\"confirmMerged().icon\"\n                    [disabled]=\"confirmMerged().disabled\"\n                    [size]=\"confirmMerged().size\"\n                    [variant]=\"confirmMerged().variant\"\n                    aria-label=\"Confirm\"\n                    >\n                        {{ confirmMerged().text}}\n                    </ZS-button>\n                }\n            </div>\n        }\n    </div>\n  </div>\n}", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(10px)}}.animate-fadeIn{animation:fadeIn .25s ease-out forwards}.animate-modalIn{animation:modalIn .25s ease-out forwards}.animate-fadeOut{animation:fadeOut .25s ease-in forwards}.animate-modalOut{animation:modalOut .25s ease-in forwards}\n"], dependencies: [{ kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }, { 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: Modal, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-modal', imports: [Button, CommonModule], template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n  <div #modalRef\n    class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70 zs:transition-all zs:duration-300\"\n    [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n    (click)=\"onOverlayClick($event)\"\n    role=\"presentation\"\n    [attr.inert]=\"isOpen() ? null : ''\"\n  >\n\n    <!-- ========================= Modal Container ========================= -->\n    <div\n      class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n      zs:rounded-2xl zs:shadow-lg zs:transition-all zs:duration-300 zs:outline-hidden\"\n      [ngClass]=\"[\n        'zs:border', \n        palette().border,\n        palette().text,\n        open() ? 'animate-modalIn' : 'animate-modalOut'\n      ]\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"'modal-title'\"\n      [attr.aria-describedby]=\"'modal-body'\"\n      tabindex=\"0\"\n      (keydown.escape)=\"close()\"\n    >\n\n        <!-- ========================= Modal Header ========================= -->\n        <div\n            class=\"zs:flex zs:items-center zs:justify-between zs:px-4 zs:py-3 zs:border-b\"\n            [class]=\"palette().border\"\n        >\n            <h3 id=\"modal-title\" class=\"zs:font-semibold zs:text-lg\">\n            {{ title() }}\n            </h3>\n            @if(showCancelIcon()) {\n                <button \n                class=\"zs:text-xl zs:hover:opacity-85 zs:cursor-pointer zs:transition-colors \n                zs:duration-200 zs:focus:outline-hidden zs:focus-visible:ring-2 \n                zs:focus-visible:ring-offset-2 zs:focus-visible:ring-blue-500 \n                zs:rounded-md zs:hover:scale-[1.02] zs:active:scale-[0.97]\"\n                (click)=\"close()\"\n                aria-label=\"Close dialog\"\n                >\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            }\n        </div>\n\n        <!-- ========================= Modal Body ========================= -->\n        <div id=\"modal-body\" class=\"zs:p-4 scroll zs:max-h-[75vh] scroll-{{ modalStyle() }}\">\n            <ng-content></ng-content>\n        </div>\n\n        <!-- ========================= Modal Footer ========================= -->\n        @if (showFooter()) {\n            <div\n            class=\"zs:flex zs:justify-end zs:gap-3 zs:p-4 zs:border-t\"\n            [class]=\"palette().border\"\n            >\n                @if (cancelMerged().show) {\n                    <ZS-button\n                    [btnStyle]=\"cancelMerged().btnStyle\"\n                    variant=\"solid\"\n                    type=\"button\"\n                    (clickedEv)=\"cancelEv.emit()\"\n                    [icon]=\"cancelMerged().icon\"\n                    [disabled]=\"cancelMerged().disabled\"\n                    [size]=\"cancelMerged().size\"\n                    [variant]=\"cancelMerged().variant\"\n                    aria-label=\"Cancel\"\n                    >\n                        {{ cancelMerged().text}}\n                    </ZS-button>\n                }\n                @if (confirmMerged().show) {\n                    <ZS-button\n                    type=\"button\"\n                    [btnStyle]=\"confirmMerged().btnStyle\"\n                    (clickedEv)=\"confirmEv.emit()\"\n                    [icon]=\"confirmMerged().icon\"\n                    [disabled]=\"confirmMerged().disabled\"\n                    [size]=\"confirmMerged().size\"\n                    [variant]=\"confirmMerged().variant\"\n                    aria-label=\"Confirm\"\n                    >\n                        {{ confirmMerged().text}}\n                    </ZS-button>\n                }\n            </div>\n        }\n    </div>\n  </div>\n}", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(10px)}}.animate-fadeIn{animation:fadeIn .25s ease-out forwards}.animate-modalIn{animation:modalIn .25s ease-out forwards}.animate-fadeOut{animation:fadeOut .25s ease-in forwards}.animate-modalOut{animation:modalOut .25s ease-in forwards}\n"] }]
+            args: [{ selector: 'ZS-modal', imports: [Button, CommonModule], template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n  <div #modalRef\n    class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70\"\n    [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n    (click)=\"onOverlayClick($event)\"\n    role=\"presentation\"\n    [attr.inert]=\"isOpen() ? null : ''\"\n  >\n\n    <!-- ========================= Modal Container ========================= -->\n    <div\n      class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n      zs:rounded-2xl zs:shadow-lg zs:outline-hidden\"\n      [ngClass]=\"[\n        'zs:border', \n        palette().border,\n        palette().text,\n        open() ? 'animate-modalIn' : 'animate-modalOut'\n      ]\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"'modal-title'\"\n      [attr.aria-describedby]=\"'modal-body'\"\n      tabindex=\"0\"\n      (keydown.escape)=\"close()\"\n    >\n\n        <!-- ========================= Modal Header ========================= -->\n        <div\n            class=\"zs:flex zs:items-center zs:justify-between zs:px-4 zs:py-3 zs:border-b\"\n            [class]=\"palette().border\"\n        >\n            <h3 id=\"modal-title\" class=\"zs:font-semibold zs:text-lg\">\n            {{ title() }}\n            </h3>\n            @if(showCancelIcon()) {\n                <button \n                class=\"zs:text-xl zs:hover:opacity-85 zs:cursor-pointer\n                zs:focus:outline-hidden zs:focus-visible:ring-2 \n                zs:focus-visible:ring-offset-2 zs:focus-visible:ring-blue-500 \n                zs:rounded-md zs:hover:scale-[1.02] zs:active:scale-[0.97]\"\n                (click)=\"close()\"\n                aria-label=\"Close dialog\"\n                >\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            }\n        </div>\n\n        <!-- ========================= Modal Body ========================= -->\n        <div id=\"modal-body\" class=\"zs:p-4 scroll zs:max-h-[75vh] scroll-{{ modalStyle() }}\">\n            <ng-content></ng-content>\n        </div>\n\n        <!-- ========================= Modal Footer ========================= -->\n        @if (showFooter()) {\n            <div\n            class=\"zs:flex zs:justify-end zs:gap-3 zs:p-4 zs:border-t\"\n            [class]=\"palette().border\"\n            >\n                @if (cancelMerged().show) {\n                    <ZS-button\n                    [btnStyle]=\"cancelMerged().btnStyle\"\n                    variant=\"solid\"\n                    type=\"button\"\n                    (clickedEv)=\"cancelEv.emit()\"\n                    [icon]=\"cancelMerged().icon\"\n                    [disabled]=\"cancelMerged().disabled\"\n                    [size]=\"cancelMerged().size\"\n                    [variant]=\"cancelMerged().variant\"\n                    aria-label=\"Cancel\"\n                    >\n                        {{ cancelMerged().text}}\n                    </ZS-button>\n                }\n                @if (confirmMerged().show) {\n                    <ZS-button\n                    type=\"button\"\n                    [btnStyle]=\"confirmMerged().btnStyle\"\n                    (clickedEv)=\"confirmEv.emit()\"\n                    [icon]=\"confirmMerged().icon\"\n                    [disabled]=\"confirmMerged().disabled\"\n                    [size]=\"confirmMerged().size\"\n                    [variant]=\"confirmMerged().variant\"\n                    aria-label=\"Confirm\"\n                    >\n                        {{ confirmMerged().text}}\n                    </ZS-button>\n                }\n            </div>\n        }\n    </div>\n  </div>\n}", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(10px)}}.animate-fadeIn{animation:fadeIn .25s ease-out forwards}.animate-modalIn{animation:modalIn .25s ease-out forwards}.animate-fadeOut{animation:fadeOut .25s ease-in forwards}.animate-modalOut{animation:modalOut .25s ease-in forwards}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], modalStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalStyle", required: false }] }], showCancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelIcon", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], cancelConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelConfig", required: false }] }], confirmConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmConfig", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closeOnOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOverlay", required: false }] }], confirmEv: [{ type: i0.Output, args: ["confirmEv"] }], cancelEv: [{ type: i0.Output, args: ["cancelEv"] }], closedEv: [{ type: i0.Output, args: ["closedEv"] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -1625,11 +1625,11 @@ class Navbar {
         this.resizeObserver.disconnect();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Navbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Navbar, isStandalone: true, selector: "ZS-navbar", inputs: { fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, siteNameConfig: { classPropertyName: "siteNameConfig", publicName: "siteNameConfig", isSignal: true, isRequired: false, transformFunction: null }, authButtons: { classPropertyName: "authButtons", publicName: "authButtons", isSignal: true, isRequired: false, transformFunction: null }, showUserSection: { classPropertyName: "showUserSection", publicName: "showUserSection", isSignal: true, isRequired: false, transformFunction: null }, showSearchBar: { classPropertyName: "showSearchBar", publicName: "showSearchBar", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, isLoggedIn: { classPropertyName: "isLoggedIn", publicName: "isLoggedIn", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuOpen: { classPropertyName: "isMobileMenuOpen", publicName: "isMobileMenuOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loginClickedEv: "loginClickedEv", signupClickedEv: "signupClickedEv", searchSubmittedEv: "searchSubmittedEv", anyItemClickedEv: "anyItemClickedEv", searchValue: "searchValueChange", isMobileMenuOpen: "isMobileMenuOpenChange" }, ngImport: i0, template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n  class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30 zs:transition-colors\"\n  [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n  role=\"navigation\"\n  aria-label=\"Main Navigation\"\n>\n  <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n    <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n      <!-- ========================= Logo & Site Name ========================= -->\n      <div class=\"zs:flex zs:items-center\">\n        @if (logoUrl() || siteNameConfig()) {\n          <a\n            [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n            class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n            aria-label=\"Homepage\"\n          >\n            @if (logoUrl()) {\n              <img\n                [src]=\"logoUrl()\"\n                alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n                class=\"zs:h-9 zs:w-auto\"\n              />\n            }\n            @if (siteNameConfig()) {\n              <span\n                [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100 zs:transition-colors'\"\n                class=\"zs:font-bold zs:text-xl\"\n              >\n                {{ siteNameConfig()?.siteName }}\n              </span>\n            }\n          </a>\n        }\n      </div>\n\n      <!-- ========================= Desktop Navigation ========================= -->\n      <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"menubar\">\n        @for (item of visibleNavItems(); track $index) {\n          <ZS-nav-item\n            [item]=\"item\"\n            [collectionName]=\"'navItems'\"\n            (anyItemClickedEv)=\"itemClicked($event)\"\n            role=\"menuitem\"\n          />\n        }\n\n        @if (moreNavItems().length > 0) {\n          <div class=\"zs:relative\" role=\"none\">\n            <button\n              (click)=\"isMoreOpen.set(!isMoreOpen())\"\n              [attr.aria-expanded]=\"isMoreOpen()\"\n              aria-haspopup=\"true\"\n              aria-controls=\"more-menu\"\n              class=\"zs:px-3 zs:py-2 zs:text-sm zs:font-bold zs:text-blue-600 zs:dark:text-blue-400\n               zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden \n               zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500 zs:transition-colors\"\n            >\n              More\n              <i class=\"fas fa-chevron-down zs:ml-1 zs:text-xs zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\"></i>\n            </button>\n            <div\n              id=\"more-menu\"\n              [ngClass]=\"{ 'zs:block': isMoreOpen(), 'zs:hidden': !isMoreOpen() }\"\n              class=\"zs:absolute zs:bg-white zs:dark:bg-[#18202F] shadow-md-all \n              shadow-md-all-night zs:rounded-md zs:mt-1 zs:p-2 zs:min-w-50 zs:z-200 \n              zs:transition-colors zs:flex zs:flex-col zs:gap-2\"\n              role=\"menu\"\n            >\n              @for (item of moreNavItems(); track $index) {\n                <ZS-nav-item\n                  [item]=\"item\"\n                  [collectionName]=\"'navItems'\"\n                  (anyItemClickedEv)=\"itemClicked($event)\"\n                  role=\"menuitem\"\n                />\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- ========================= Right Controls ========================= -->\n      <div class=\"zs:flex zs:items-center zs:gap-3\">\n\n        <!-- Search Bar (Desktop) -->\n        @if (showSearchBar()) {\n          <div class=\"zs:hidden zs:lg:block\" role=\"search\">\n            <div class=\"zs:relative\">\n              <label for=\"desktop-search\" class=\"sr-only\">Search</label>\n              <input\n                id=\"desktop-search\"\n                type=\"text\"\n                [value]=\"searchValue()\"\n                (input)=\"searchValue.set($any($event.target).value)\"\n                (keyup.enter)=\"onSearchSubmit()\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200 zs:rounded-full zs:py-2 zs:px-4 zs:w-64\n                       zs:transition-all zs:duration-200 zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-blue-500\n                       zs:focus:bg-white zs:dark:focus:bg-gray-600 zs:shadow-sm zs:dark:shadow-gray-500/40\n                       zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n              />\n              <button\n                (click)=\"onSearchSubmit()\"\n                class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n                       zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n                aria-label=\"Submit search\"\n              >\n                <i class=\"fas fa-search\"></i>\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- User Profile Dropdown -->\n        @if (isLoggedIn() && userProfile() && showUserSection()) {\n          <div class=\"zs:relative\">\n            <button\n              (click)=\"toggleUserMenu()\"\n              class=\"zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n              aria-haspopup=\"true\"\n              [attr.aria-expanded]=\"isUserMenuOpen()\"\n              aria-controls=\"user-menu\"\n              aria-label=\"User menu\"\n            >\n              @if (userProfile()?.imageUrl) {\n                <img\n                  [src]=\"userProfile()?.imageUrl\"\n                  alt=\"{{ userProfile()?.name ?? 'User profile image' }}\"\n                  class=\"zs:size-9 zs:rounded-full zs:object-cover\"\n                />\n              } @else {\n                <div\n                  class=\"zs:size-9 zs:rounded-full zs:bg-blue-500 zs:flex zs:items-center zs:justify-center zs:text-white zs:font-semibold\"\n                  aria-hidden=\"true\"\n                >\n                  {{ userProfile()?.name?.charAt(0)?.toUpperCase() }}\n                </div>\n              }\n              <i class=\"fas fa-chevron-down zs:text-xs zs:text-gray-600 zs:dark:text-gray-400\n                      zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors\"></i>\n            </button>\n\n            @if (isUserMenuOpen() && userMenuItems().length > 0) {\n              <div\n                id=\"user-menu\"\n                class=\"zs:absolute zs:right-0 zs:mt-2.5 zs:min-w-56 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md\n                      shadow-md-all shadow-md-all-night zs:pt-2 zs:z-400 zs:transition-colors\"\n                role=\"menu\"\n              >\n                <!-- User Info Section -->\n                <div class=\"zs:px-4 zs:py-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700 zs:transition-colors\">\n                  @if (userProfile()?.name) {\n                    <div class=\"zs:font-semibold zs:text-gray-900 zs:dark:text-gray-100 zs:transition-colors\">\n                      {{ userProfile()?.name }}\n                    </div>\n                  }\n                  @if (userProfile()?.username) {\n                    <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-400 zs:transition-colors\">\n                      @{{ userProfile()?.username }}\n                    </div>\n                  }\n                  @if (userProfile()?.email) {\n                    <div class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\">\n                      {{ userProfile()?.email }}\n                    </div>\n                  }\n                </div>\n\n                <!-- Menu Items -->\n                @if (userMenuItems().length > 0) {\n                  <div class=\"zs:py-1\">\n                    @for (item of getUserMenuItems(); track $index) {\n                      <ZS-nav-item\n                        [item]=\"item\"\n                        [collectionName]=\"'MenuItems'\"\n                        (anyItemClickedEv)=\"itemClicked($event)\"\n                        role=\"menuitem\"\n                      />\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Auth Buttons -->\n        @else if (authButtons().showAuthButtons && !isLoggedIn()) {\n          <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"group\" aria-label=\"Authentication\">\n            <ZS-button\n            [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n            [variant]=\"authButtons().login?.variant ?? 'outline'\"\n            [size]=\"authButtons().login?.size ?? 'md'\"\n            [icon]=\"authButtons().login?.icon  ?? ''\"\n            (clickedEv)=\"onLogin()\"\n            >\n              Login\n            </ZS-button>\n\n            <ZS-button\n            [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n            [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n            [size]=\"authButtons().signup?.size ?? 'md'\"\n            [icon]=\"authButtons().signup?.icon  ?? ''\"\n            (clickedEv)=\"onSignup()\"\n            >\n              Sign Up\n            </ZS-button>\n          </div>\n        }\n\n        <!-- Mobile Menu Toggle -->\n        @if(mobileNavItems().length || showSearchBar() || (authButtons().showAuthButtons && !isLoggedIn())) {\n          <div class=\"zs:lg:hidden\">\n            <button\n              (click)=\"toggleMobileMenu()\"\n              class=\"zs:p-2 zs:rounded-md zs:text-gray-600 zs:dark:text-gray-300\n                    zs:hover:text-gray-900 zs:dark:hover:text-gray-100\n                    zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-inset\n                    zs:focus:ring-gray-200 zs:dark:focus:ring-gray-700 zs:transition-colors\"\n              aria-controls=\"mobile-menu\"\n              aria-expanded=\"{{ isMobileMenuOpen() }}\"\n              aria-label=\"Toggle mobile menu\"\n            >\n              <i class=\"fas fa-bars zs:px-1\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- ========================= Mobile Menu ========================= -->\n  @if (isMobileMenuOpen()) {\n    <div\n      id=\"mobile-menu\"\n      class=\"zs:lg:hidden zs:bg-white zs:dark:bg-[#18202F] zs:transition-colors\n      zs:[box-shadow:0_8px_0_0_#364153] zs:dark:[box-shadow:0_8px_0_0_black]\"\n      role=\"menu\"\n      aria-label=\"Mobile navigation\"\n    >\n      <div class=\"zs:px-2 zs:pt-2 zs:pb-3 zs:flex zs:flex-col zs:gap-1 zs:sm:px-3\">\n\n        <!-- Navigation Items -->\n        <div class=\"zs:max-h-96 zs:flex zs:flex-col zs:gap-2 zs:pb-2 zs:overflow-y-auto\">\n          @for (item of mobileNavItems(); track $index) {\n            <ZS-nav-item\n              [item]=\"item\"\n              [collectionName]=\"'navItems'\"\n              (anyItemClickedEv)=\"itemClicked($event)\"\n              role=\"menuitem\"\n            />\n          }\n        </div>\n\n        <!-- Search Bar (Mobile) -->\n        @if (showSearchBar()) {\n          <div class=\"zs:px-3 zs:pb-2\" role=\"search\">\n            <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n            <div class=\"zs:relative\">\n              <input\n                id=\"mobile-search\"\n                type=\"text\"\n                [value]=\"searchValue()\"\n                (input)=\"searchValue.set($any($event.target).value)\"\n                (keyup.enter)=\"onSearchSubmit()\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n                       zs:rounded-full zs:py-2 zs:px-4 zs:transition-all zs:duration-200 zs:focus:outline-hidden\n                       zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n                       zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n              />\n              <button\n                (click)=\"onSearchSubmit()\"\n                class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n                       zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n                aria-label=\"Submit search\"\n              >\n                <i class=\"fas fa-search\"></i>\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- Auth Buttons (Mobile) -->\n        @if (authButtons().showAuthButtons && !isLoggedIn()) {\n          <div\n            class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n            zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2 zs:transition-colors\"\n            role=\"group\"\n            aria-label=\"Authentication (mobile)\"\n          >\n            <ZS-button\n            [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n            [variant]=\"authButtons().login?.variant ?? 'outline'\"\n            [size]=\"authButtons().login?.size ?? 'md'\"\n            [icon]=\"authButtons().login?.icon  ?? ''\"\n            (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n            >\n              Login\n            </ZS-button>\n\n            <ZS-button\n            [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n            [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n            [size]=\"authButtons().signup?.size ?? 'md'\"\n            [icon]=\"authButtons().signup?.icon  ?? ''\"\n            (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n            >\n              Sign Up\n            </ZS-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n  <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n  <div\n    class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black {{ zIndices.navbarOverlay }} zs:transition-colors\"\n    (click)=\"closeAllMenus()\"\n    aria-hidden=\"true\"\n  ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\n"], dependencies: [{ 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NavItem, selector: "ZS-nav-item", inputs: ["item", "collectionName"], outputs: ["anyItemClickedEv"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Navbar, isStandalone: true, selector: "ZS-navbar", inputs: { fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, siteNameConfig: { classPropertyName: "siteNameConfig", publicName: "siteNameConfig", isSignal: true, isRequired: false, transformFunction: null }, authButtons: { classPropertyName: "authButtons", publicName: "authButtons", isSignal: true, isRequired: false, transformFunction: null }, showUserSection: { classPropertyName: "showUserSection", publicName: "showUserSection", isSignal: true, isRequired: false, transformFunction: null }, showSearchBar: { classPropertyName: "showSearchBar", publicName: "showSearchBar", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, isLoggedIn: { classPropertyName: "isLoggedIn", publicName: "isLoggedIn", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuOpen: { classPropertyName: "isMobileMenuOpen", publicName: "isMobileMenuOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loginClickedEv: "loginClickedEv", signupClickedEv: "signupClickedEv", searchSubmittedEv: "searchSubmittedEv", anyItemClickedEv: "anyItemClickedEv", searchValue: "searchValueChange", isMobileMenuOpen: "isMobileMenuOpenChange" }, ngImport: i0, template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n  class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30\"\n  [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n  role=\"navigation\"\n  aria-label=\"Main Navigation\"\n>\n  <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n    <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n      <!-- ========================= Logo & Site Name ========================= -->\n      <div class=\"zs:flex zs:items-center\">\n        @if (logoUrl() || siteNameConfig()) {\n          <a\n            [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n            class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n            aria-label=\"Homepage\"\n          >\n            @if (logoUrl()) {\n              <img\n                [src]=\"logoUrl()\"\n                alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n                class=\"zs:h-9 zs:w-auto\"\n              />\n            }\n            @if (siteNameConfig()) {\n              <span\n                [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100'\"\n                class=\"zs:font-bold zs:text-xl\"\n              >\n                {{ siteNameConfig()?.siteName }}\n              </span>\n            }\n          </a>\n        }\n      </div>\n\n      <!-- ========================= Desktop Navigation ========================= -->\n      <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"menubar\">\n        @for (item of visibleNavItems(); track $index) {\n          <ZS-nav-item\n            [item]=\"item\"\n            [collectionName]=\"'navItems'\"\n            (anyItemClickedEv)=\"itemClicked($event)\"\n            role=\"menuitem\"\n          />\n        }\n\n        @if (moreNavItems().length > 0) {\n          <div class=\"zs:relative\" role=\"none\">\n            <button\n              (click)=\"isMoreOpen.set(!isMoreOpen())\"\n              [attr.aria-expanded]=\"isMoreOpen()\"\n              aria-haspopup=\"true\"\n              aria-controls=\"more-menu\"\n              class=\"zs:px-3 zs:py-2 zs:text-sm zs:font-bold zs:text-blue-600 zs:dark:text-blue-400\n               zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden \n               zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n            >\n              More\n              <i class=\"fas fa-chevron-down zs:ml-1 zs:text-xs zs:text-gray-500 zs:dark:text-gray-400\"></i>\n            </button>\n            <div\n              id=\"more-menu\"\n              [ngClass]=\"{ 'zs:block': isMoreOpen(), 'zs:hidden': !isMoreOpen() }\"\n              class=\"zs:absolute zs:bg-white zs:dark:bg-[#18202F] shadow-md-all \n              shadow-md-all-night zs:rounded-md zs:mt-1 zs:p-2 zs:min-w-50 zs:z-200 \n              zs:flex zs:flex-col zs:gap-2\"\n              role=\"menu\"\n            >\n              @for (item of moreNavItems(); track $index) {\n                <ZS-nav-item\n                  [item]=\"item\"\n                  [collectionName]=\"'navItems'\"\n                  (anyItemClickedEv)=\"itemClicked($event)\"\n                  role=\"menuitem\"\n                />\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- ========================= Right Controls ========================= -->\n      <div class=\"zs:flex zs:items-center zs:gap-3\">\n\n        <!-- Search Bar (Desktop) -->\n        @if (showSearchBar()) {\n          <div class=\"zs:hidden zs:lg:block\" role=\"search\">\n            <div class=\"zs:relative\">\n              <label for=\"desktop-search\" class=\"sr-only\">Search</label>\n              <input\n                id=\"desktop-search\"\n                type=\"text\"\n                [value]=\"searchValue()\"\n                (input)=\"searchValue.set($any($event.target).value)\"\n                (keyup.enter)=\"onSearchSubmit()\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200 zs:rounded-full zs:py-2 zs:px-4 zs:w-64\n                       zs:transition-shadow zs:duration-200 zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-blue-500\n                       zs:focus:bg-white zs:dark:focus:bg-gray-600 zs:shadow-sm zs:dark:shadow-gray-500/40\n                       zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n              />\n              <button\n                (click)=\"onSearchSubmit()\"\n                class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n                       zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"\n                aria-label=\"Submit search\"\n              >\n                <i class=\"fas fa-search\"></i>\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- User Profile Dropdown -->\n        @if (isLoggedIn() && userProfile() && showUserSection()) {\n          <div class=\"zs:relative\">\n            <button\n              (click)=\"toggleUserMenu()\"\n              class=\"zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n              aria-haspopup=\"true\"\n              [attr.aria-expanded]=\"isUserMenuOpen()\"\n              aria-controls=\"user-menu\"\n              aria-label=\"User menu\"\n            >\n              @if (userProfile()?.imageUrl) {\n                <img\n                  [src]=\"userProfile()?.imageUrl\"\n                  alt=\"{{ userProfile()?.name ?? 'User profile image' }}\"\n                  class=\"zs:size-9 zs:rounded-full zs:object-cover\"\n                />\n              } @else {\n                <div\n                  class=\"zs:size-9 zs:rounded-full zs:bg-blue-500 zs:flex zs:items-center zs:justify-center zs:text-white zs:font-semibold\"\n                  aria-hidden=\"true\"\n                >\n                  {{ userProfile()?.name?.charAt(0)?.toUpperCase() }}\n                </div>\n              }\n              <i class=\"fas fa-chevron-down zs:text-xs zs:text-gray-600 zs:dark:text-gray-400\n                      zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"></i>\n            </button>\n\n            @if (isUserMenuOpen() && userMenuItems().length > 0) {\n              <div\n                id=\"user-menu\"\n                class=\"zs:absolute zs:right-0 zs:mt-2.5 zs:min-w-56 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md\n                      shadow-md-all shadow-md-all-night zs:pt-2 zs:z-400\"\n                role=\"menu\"\n              >\n                <!-- User Info Section -->\n                <div class=\"zs:px-4 zs:py-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700\">\n                  @if (userProfile()?.name) {\n                    <div class=\"zs:font-semibold zs:text-gray-900 zs:dark:text-gray-100\">\n                      {{ userProfile()?.name }}\n                    </div>\n                  }\n                  @if (userProfile()?.username) {\n                    <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-400\">\n                      @{{ userProfile()?.username }}\n                    </div>\n                  }\n                  @if (userProfile()?.email) {\n                    <div class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n                      {{ userProfile()?.email }}\n                    </div>\n                  }\n                </div>\n\n                <!-- Menu Items -->\n                @if (userMenuItems().length > 0) {\n                  <div class=\"zs:py-1\">\n                    @for (item of getUserMenuItems(); track $index) {\n                      <ZS-nav-item\n                        [item]=\"item\"\n                        [collectionName]=\"'MenuItems'\"\n                        (anyItemClickedEv)=\"itemClicked($event)\"\n                        role=\"menuitem\"\n                      />\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Auth Buttons -->\n        @else if (authButtons().showAuthButtons && !isLoggedIn()) {\n          <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"group\" aria-label=\"Authentication\">\n            <ZS-button\n            [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n            [variant]=\"authButtons().login?.variant ?? 'outline'\"\n            [size]=\"authButtons().login?.size ?? 'md'\"\n            [icon]=\"authButtons().login?.icon  ?? ''\"\n            (clickedEv)=\"onLogin()\"\n            >\n              Login\n            </ZS-button>\n\n            <ZS-button\n            [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n            [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n            [size]=\"authButtons().signup?.size ?? 'md'\"\n            [icon]=\"authButtons().signup?.icon  ?? ''\"\n            (clickedEv)=\"onSignup()\"\n            >\n              Sign Up\n            </ZS-button>\n          </div>\n        }\n\n        <!-- Mobile Menu Toggle -->\n        @if(mobileNavItems().length || showSearchBar() || (authButtons().showAuthButtons && !isLoggedIn())) {\n          <div class=\"zs:lg:hidden\">\n            <button\n              (click)=\"toggleMobileMenu()\"\n              class=\"zs:p-2 zs:rounded-md zs:text-gray-600 zs:dark:text-gray-300\n                    zs:hover:text-gray-900 zs:dark:hover:text-gray-100\n                    zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-inset\n                    zs:focus:ring-gray-200 zs:dark:focus:ring-gray-700\"\n              aria-controls=\"mobile-menu\"\n              aria-expanded=\"{{ isMobileMenuOpen() }}\"\n              aria-label=\"Toggle mobile menu\"\n            >\n              <i class=\"fas fa-bars zs:px-1\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- ========================= Mobile Menu ========================= -->\n  @if (isMobileMenuOpen()) {\n    <div\n      id=\"mobile-menu\"\n      class=\"zs:lg:hidden zs:bg-white zs:dark:bg-[#18202F]\n      zs:[box-shadow:0_8px_0_0_#364153] zs:dark:[box-shadow:0_8px_0_0_black]\"\n      role=\"menu\"\n      aria-label=\"Mobile navigation\"\n    >\n      <div class=\"zs:px-2 zs:pt-2 zs:pb-3 zs:flex zs:flex-col zs:gap-1 zs:sm:px-3\">\n\n        <!-- Navigation Items -->\n        <div class=\"zs:max-h-96 zs:flex zs:flex-col zs:gap-2 zs:pb-2 zs:overflow-y-auto\">\n          @for (item of mobileNavItems(); track $index) {\n            <ZS-nav-item\n              [item]=\"item\"\n              [collectionName]=\"'navItems'\"\n              (anyItemClickedEv)=\"itemClicked($event)\"\n              role=\"menuitem\"\n            />\n          }\n        </div>\n\n        <!-- Search Bar (Mobile) -->\n        @if (showSearchBar()) {\n          <div class=\"zs:px-3 zs:pb-2\" role=\"search\">\n            <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n            <div class=\"zs:relative\">\n              <input\n                id=\"mobile-search\"\n                type=\"text\"\n                [value]=\"searchValue()\"\n                (input)=\"searchValue.set($any($event.target).value)\"\n                (keyup.enter)=\"onSearchSubmit()\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n                       zs:rounded-full zs:py-2 zs:px-4 zs:transition-shadow zs:duration-200 zs:focus:outline-hidden\n                       zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n                       zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n              />\n              <button\n                (click)=\"onSearchSubmit()\"\n                class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n                       zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"\n                aria-label=\"Submit search\"\n              >\n                <i class=\"fas fa-search\"></i>\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- Auth Buttons (Mobile) -->\n        @if (authButtons().showAuthButtons && !isLoggedIn()) {\n          <div\n            class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n            zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2\"\n            role=\"group\"\n            aria-label=\"Authentication (mobile)\"\n          >\n            <ZS-button\n            [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n            [variant]=\"authButtons().login?.variant ?? 'outline'\"\n            [size]=\"authButtons().login?.size ?? 'md'\"\n            [icon]=\"authButtons().login?.icon  ?? ''\"\n            (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n            >\n              Login\n            </ZS-button>\n\n            <ZS-button\n            [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n            [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n            [size]=\"authButtons().signup?.size ?? 'md'\"\n            [icon]=\"authButtons().signup?.icon  ?? ''\"\n            (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n            >\n              Sign Up\n            </ZS-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n  <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n  <div\n    class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black {{ zIndices.navbarOverlay }}\"\n    (click)=\"closeAllMenus()\"\n    aria-hidden=\"true\"\n  ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\n"], dependencies: [{ 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NavItem, selector: "ZS-nav-item", inputs: ["item", "collectionName"], outputs: ["anyItemClickedEv"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Navbar, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-navbar', imports: [RouterModule, CommonModule, NavItem, Button], template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n  class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30 zs:transition-colors\"\n  [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n  role=\"navigation\"\n  aria-label=\"Main Navigation\"\n>\n  <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n    <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n      <!-- ========================= Logo & Site Name ========================= -->\n      <div class=\"zs:flex zs:items-center\">\n        @if (logoUrl() || siteNameConfig()) {\n          <a\n            [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n            class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n            aria-label=\"Homepage\"\n          >\n            @if (logoUrl()) {\n              <img\n                [src]=\"logoUrl()\"\n                alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n                class=\"zs:h-9 zs:w-auto\"\n              />\n            }\n            @if (siteNameConfig()) {\n              <span\n                [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100 zs:transition-colors'\"\n                class=\"zs:font-bold zs:text-xl\"\n              >\n                {{ siteNameConfig()?.siteName }}\n              </span>\n            }\n          </a>\n        }\n      </div>\n\n      <!-- ========================= Desktop Navigation ========================= -->\n      <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"menubar\">\n        @for (item of visibleNavItems(); track $index) {\n          <ZS-nav-item\n            [item]=\"item\"\n            [collectionName]=\"'navItems'\"\n            (anyItemClickedEv)=\"itemClicked($event)\"\n            role=\"menuitem\"\n          />\n        }\n\n        @if (moreNavItems().length > 0) {\n          <div class=\"zs:relative\" role=\"none\">\n            <button\n              (click)=\"isMoreOpen.set(!isMoreOpen())\"\n              [attr.aria-expanded]=\"isMoreOpen()\"\n              aria-haspopup=\"true\"\n              aria-controls=\"more-menu\"\n              class=\"zs:px-3 zs:py-2 zs:text-sm zs:font-bold zs:text-blue-600 zs:dark:text-blue-400\n               zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden \n               zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500 zs:transition-colors\"\n            >\n              More\n              <i class=\"fas fa-chevron-down zs:ml-1 zs:text-xs zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\"></i>\n            </button>\n            <div\n              id=\"more-menu\"\n              [ngClass]=\"{ 'zs:block': isMoreOpen(), 'zs:hidden': !isMoreOpen() }\"\n              class=\"zs:absolute zs:bg-white zs:dark:bg-[#18202F] shadow-md-all \n              shadow-md-all-night zs:rounded-md zs:mt-1 zs:p-2 zs:min-w-50 zs:z-200 \n              zs:transition-colors zs:flex zs:flex-col zs:gap-2\"\n              role=\"menu\"\n            >\n              @for (item of moreNavItems(); track $index) {\n                <ZS-nav-item\n                  [item]=\"item\"\n                  [collectionName]=\"'navItems'\"\n                  (anyItemClickedEv)=\"itemClicked($event)\"\n                  role=\"menuitem\"\n                />\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- ========================= Right Controls ========================= -->\n      <div class=\"zs:flex zs:items-center zs:gap-3\">\n\n        <!-- Search Bar (Desktop) -->\n        @if (showSearchBar()) {\n          <div class=\"zs:hidden zs:lg:block\" role=\"search\">\n            <div class=\"zs:relative\">\n              <label for=\"desktop-search\" class=\"sr-only\">Search</label>\n              <input\n                id=\"desktop-search\"\n                type=\"text\"\n                [value]=\"searchValue()\"\n                (input)=\"searchValue.set($any($event.target).value)\"\n                (keyup.enter)=\"onSearchSubmit()\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200 zs:rounded-full zs:py-2 zs:px-4 zs:w-64\n                       zs:transition-all zs:duration-200 zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-blue-500\n                       zs:focus:bg-white zs:dark:focus:bg-gray-600 zs:shadow-sm zs:dark:shadow-gray-500/40\n                       zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n              />\n              <button\n                (click)=\"onSearchSubmit()\"\n                class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n                       zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n                aria-label=\"Submit search\"\n              >\n                <i class=\"fas fa-search\"></i>\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- User Profile Dropdown -->\n        @if (isLoggedIn() && userProfile() && showUserSection()) {\n          <div class=\"zs:relative\">\n            <button\n              (click)=\"toggleUserMenu()\"\n              class=\"zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n              aria-haspopup=\"true\"\n              [attr.aria-expanded]=\"isUserMenuOpen()\"\n              aria-controls=\"user-menu\"\n              aria-label=\"User menu\"\n            >\n              @if (userProfile()?.imageUrl) {\n                <img\n                  [src]=\"userProfile()?.imageUrl\"\n                  alt=\"{{ userProfile()?.name ?? 'User profile image' }}\"\n                  class=\"zs:size-9 zs:rounded-full zs:object-cover\"\n                />\n              } @else {\n                <div\n                  class=\"zs:size-9 zs:rounded-full zs:bg-blue-500 zs:flex zs:items-center zs:justify-center zs:text-white zs:font-semibold\"\n                  aria-hidden=\"true\"\n                >\n                  {{ userProfile()?.name?.charAt(0)?.toUpperCase() }}\n                </div>\n              }\n              <i class=\"fas fa-chevron-down zs:text-xs zs:text-gray-600 zs:dark:text-gray-400\n                      zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors\"></i>\n            </button>\n\n            @if (isUserMenuOpen() && userMenuItems().length > 0) {\n              <div\n                id=\"user-menu\"\n                class=\"zs:absolute zs:right-0 zs:mt-2.5 zs:min-w-56 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md\n                      shadow-md-all shadow-md-all-night zs:pt-2 zs:z-400 zs:transition-colors\"\n                role=\"menu\"\n              >\n                <!-- User Info Section -->\n                <div class=\"zs:px-4 zs:py-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700 zs:transition-colors\">\n                  @if (userProfile()?.name) {\n                    <div class=\"zs:font-semibold zs:text-gray-900 zs:dark:text-gray-100 zs:transition-colors\">\n                      {{ userProfile()?.name }}\n                    </div>\n                  }\n                  @if (userProfile()?.username) {\n                    <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-400 zs:transition-colors\">\n                      @{{ userProfile()?.username }}\n                    </div>\n                  }\n                  @if (userProfile()?.email) {\n                    <div class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\">\n                      {{ userProfile()?.email }}\n                    </div>\n                  }\n                </div>\n\n                <!-- Menu Items -->\n                @if (userMenuItems().length > 0) {\n                  <div class=\"zs:py-1\">\n                    @for (item of getUserMenuItems(); track $index) {\n                      <ZS-nav-item\n                        [item]=\"item\"\n                        [collectionName]=\"'MenuItems'\"\n                        (anyItemClickedEv)=\"itemClicked($event)\"\n                        role=\"menuitem\"\n                      />\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Auth Buttons -->\n        @else if (authButtons().showAuthButtons && !isLoggedIn()) {\n          <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"group\" aria-label=\"Authentication\">\n            <ZS-button\n            [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n            [variant]=\"authButtons().login?.variant ?? 'outline'\"\n            [size]=\"authButtons().login?.size ?? 'md'\"\n            [icon]=\"authButtons().login?.icon  ?? ''\"\n            (clickedEv)=\"onLogin()\"\n            >\n              Login\n            </ZS-button>\n\n            <ZS-button\n            [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n            [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n            [size]=\"authButtons().signup?.size ?? 'md'\"\n            [icon]=\"authButtons().signup?.icon  ?? ''\"\n            (clickedEv)=\"onSignup()\"\n            >\n              Sign Up\n            </ZS-button>\n          </div>\n        }\n\n        <!-- Mobile Menu Toggle -->\n        @if(mobileNavItems().length || showSearchBar() || (authButtons().showAuthButtons && !isLoggedIn())) {\n          <div class=\"zs:lg:hidden\">\n            <button\n              (click)=\"toggleMobileMenu()\"\n              class=\"zs:p-2 zs:rounded-md zs:text-gray-600 zs:dark:text-gray-300\n                    zs:hover:text-gray-900 zs:dark:hover:text-gray-100\n                    zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-inset\n                    zs:focus:ring-gray-200 zs:dark:focus:ring-gray-700 zs:transition-colors\"\n              aria-controls=\"mobile-menu\"\n              aria-expanded=\"{{ isMobileMenuOpen() }}\"\n              aria-label=\"Toggle mobile menu\"\n            >\n              <i class=\"fas fa-bars zs:px-1\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- ========================= Mobile Menu ========================= -->\n  @if (isMobileMenuOpen()) {\n    <div\n      id=\"mobile-menu\"\n      class=\"zs:lg:hidden zs:bg-white zs:dark:bg-[#18202F] zs:transition-colors\n      zs:[box-shadow:0_8px_0_0_#364153] zs:dark:[box-shadow:0_8px_0_0_black]\"\n      role=\"menu\"\n      aria-label=\"Mobile navigation\"\n    >\n      <div class=\"zs:px-2 zs:pt-2 zs:pb-3 zs:flex zs:flex-col zs:gap-1 zs:sm:px-3\">\n\n        <!-- Navigation Items -->\n        <div class=\"zs:max-h-96 zs:flex zs:flex-col zs:gap-2 zs:pb-2 zs:overflow-y-auto\">\n          @for (item of mobileNavItems(); track $index) {\n            <ZS-nav-item\n              [item]=\"item\"\n              [collectionName]=\"'navItems'\"\n              (anyItemClickedEv)=\"itemClicked($event)\"\n              role=\"menuitem\"\n            />\n          }\n        </div>\n\n        <!-- Search Bar (Mobile) -->\n        @if (showSearchBar()) {\n          <div class=\"zs:px-3 zs:pb-2\" role=\"search\">\n            <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n            <div class=\"zs:relative\">\n              <input\n                id=\"mobile-search\"\n                type=\"text\"\n                [value]=\"searchValue()\"\n                (input)=\"searchValue.set($any($event.target).value)\"\n                (keyup.enter)=\"onSearchSubmit()\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n                       zs:rounded-full zs:py-2 zs:px-4 zs:transition-all zs:duration-200 zs:focus:outline-hidden\n                       zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n                       zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n              />\n              <button\n                (click)=\"onSearchSubmit()\"\n                class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n                       zs:hover:text-gray-700 zs:dark:hover:text-gray-300 zs:transition-colors zs:duration-200\"\n                aria-label=\"Submit search\"\n              >\n                <i class=\"fas fa-search\"></i>\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- Auth Buttons (Mobile) -->\n        @if (authButtons().showAuthButtons && !isLoggedIn()) {\n          <div\n            class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n            zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2 zs:transition-colors\"\n            role=\"group\"\n            aria-label=\"Authentication (mobile)\"\n          >\n            <ZS-button\n            [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n            [variant]=\"authButtons().login?.variant ?? 'outline'\"\n            [size]=\"authButtons().login?.size ?? 'md'\"\n            [icon]=\"authButtons().login?.icon  ?? ''\"\n            (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n            >\n              Login\n            </ZS-button>\n\n            <ZS-button\n            [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n            [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n            [size]=\"authButtons().signup?.size ?? 'md'\"\n            [icon]=\"authButtons().signup?.icon  ?? ''\"\n            (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n            >\n              Sign Up\n            </ZS-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n  <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n  <div\n    class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black {{ zIndices.navbarOverlay }} zs:transition-colors\"\n    (click)=\"closeAllMenus()\"\n    aria-hidden=\"true\"\n  ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\n"] }]
+            args: [{ selector: 'ZS-navbar', imports: [RouterModule, CommonModule, NavItem, Button], template: "<!-- ========================= Fixed Navbar Container ========================= -->\n\n<nav\n  class=\"zs:bg-white zs:dark:bg-[#18202F] zs:top-0 zs:left-0 zs:right-0 {{ zIndices.navbar }} zs:shadow-md zs:dark:shadow-gray-400/30\"\n  [ngClass]=\"fixed() ? 'zs:fixed' : 'zs:relative'\"\n  role=\"navigation\"\n  aria-label=\"Main Navigation\"\n>\n  <div class=\"zs:max-w-7xl zs:mx-auto zs:px-4 zs:sm:px-6 zs:lg:px-8\">\n    <div class=\"zs:flex zs:justify-between zs:h-16 zs:gap-4\">\n\n      <!-- ========================= Logo & Site Name ========================= -->\n      <div class=\"zs:flex zs:items-center\">\n        @if (logoUrl() || siteNameConfig()) {\n          <a\n            [routerLink]=\"[siteNameConfig()?.routerLink ?? '/']\"\n            class=\"zs:shrink-0 zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n            aria-label=\"Homepage\"\n          >\n            @if (logoUrl()) {\n              <img\n                [src]=\"logoUrl()\"\n                alt=\"{{ siteNameConfig()?.siteName ?? 'Site Logo' }}\"\n                class=\"zs:h-9 zs:w-auto\"\n              />\n            }\n            @if (siteNameConfig()) {\n              <span\n                [class]=\"siteNameConfig()?.siteNameColorClass ?? 'zs:text-gray-800 zs:dark:text-gray-100'\"\n                class=\"zs:font-bold zs:text-xl\"\n              >\n                {{ siteNameConfig()?.siteName }}\n              </span>\n            }\n          </a>\n        }\n      </div>\n\n      <!-- ========================= Desktop Navigation ========================= -->\n      <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"menubar\">\n        @for (item of visibleNavItems(); track $index) {\n          <ZS-nav-item\n            [item]=\"item\"\n            [collectionName]=\"'navItems'\"\n            (anyItemClickedEv)=\"itemClicked($event)\"\n            role=\"menuitem\"\n          />\n        }\n\n        @if (moreNavItems().length > 0) {\n          <div class=\"zs:relative\" role=\"none\">\n            <button\n              (click)=\"isMoreOpen.set(!isMoreOpen())\"\n              [attr.aria-expanded]=\"isMoreOpen()\"\n              aria-haspopup=\"true\"\n              aria-controls=\"more-menu\"\n              class=\"zs:px-3 zs:py-2 zs:text-sm zs:font-bold zs:text-blue-600 zs:dark:text-blue-400\n               zs:hover:text-blue-700 zs:dark:hover:text-blue-300 zs:focus:outline-hidden \n               zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n            >\n              More\n              <i class=\"fas fa-chevron-down zs:ml-1 zs:text-xs zs:text-gray-500 zs:dark:text-gray-400\"></i>\n            </button>\n            <div\n              id=\"more-menu\"\n              [ngClass]=\"{ 'zs:block': isMoreOpen(), 'zs:hidden': !isMoreOpen() }\"\n              class=\"zs:absolute zs:bg-white zs:dark:bg-[#18202F] shadow-md-all \n              shadow-md-all-night zs:rounded-md zs:mt-1 zs:p-2 zs:min-w-50 zs:z-200 \n              zs:flex zs:flex-col zs:gap-2\"\n              role=\"menu\"\n            >\n              @for (item of moreNavItems(); track $index) {\n                <ZS-nav-item\n                  [item]=\"item\"\n                  [collectionName]=\"'navItems'\"\n                  (anyItemClickedEv)=\"itemClicked($event)\"\n                  role=\"menuitem\"\n                />\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- ========================= Right Controls ========================= -->\n      <div class=\"zs:flex zs:items-center zs:gap-3\">\n\n        <!-- Search Bar (Desktop) -->\n        @if (showSearchBar()) {\n          <div class=\"zs:hidden zs:lg:block\" role=\"search\">\n            <div class=\"zs:relative\">\n              <label for=\"desktop-search\" class=\"sr-only\">Search</label>\n              <input\n                id=\"desktop-search\"\n                type=\"text\"\n                [value]=\"searchValue()\"\n                (input)=\"searchValue.set($any($event.target).value)\"\n                (keyup.enter)=\"onSearchSubmit()\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200 zs:rounded-full zs:py-2 zs:px-4 zs:w-64\n                       zs:transition-shadow zs:duration-200 zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-blue-500\n                       zs:focus:bg-white zs:dark:focus:bg-gray-600 zs:shadow-sm zs:dark:shadow-gray-500/40\n                       zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n              />\n              <button\n                (click)=\"onSearchSubmit()\"\n                class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n                       zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"\n                aria-label=\"Submit search\"\n              >\n                <i class=\"fas fa-search\"></i>\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- User Profile Dropdown -->\n        @if (isLoggedIn() && userProfile() && showUserSection()) {\n          <div class=\"zs:relative\">\n            <button\n              (click)=\"toggleUserMenu()\"\n              class=\"zs:flex zs:items-center zs:gap-2 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-blue-500\"\n              aria-haspopup=\"true\"\n              [attr.aria-expanded]=\"isUserMenuOpen()\"\n              aria-controls=\"user-menu\"\n              aria-label=\"User menu\"\n            >\n              @if (userProfile()?.imageUrl) {\n                <img\n                  [src]=\"userProfile()?.imageUrl\"\n                  alt=\"{{ userProfile()?.name ?? 'User profile image' }}\"\n                  class=\"zs:size-9 zs:rounded-full zs:object-cover\"\n                />\n              } @else {\n                <div\n                  class=\"zs:size-9 zs:rounded-full zs:bg-blue-500 zs:flex zs:items-center zs:justify-center zs:text-white zs:font-semibold\"\n                  aria-hidden=\"true\"\n                >\n                  {{ userProfile()?.name?.charAt(0)?.toUpperCase() }}\n                </div>\n              }\n              <i class=\"fas fa-chevron-down zs:text-xs zs:text-gray-600 zs:dark:text-gray-400\n                      zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"></i>\n            </button>\n\n            @if (isUserMenuOpen() && userMenuItems().length > 0) {\n              <div\n                id=\"user-menu\"\n                class=\"zs:absolute zs:right-0 zs:mt-2.5 zs:min-w-56 zs:bg-white zs:dark:bg-gray-800 zs:rounded-md\n                      shadow-md-all shadow-md-all-night zs:pt-2 zs:z-400\"\n                role=\"menu\"\n              >\n                <!-- User Info Section -->\n                <div class=\"zs:px-4 zs:py-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700\">\n                  @if (userProfile()?.name) {\n                    <div class=\"zs:font-semibold zs:text-gray-900 zs:dark:text-gray-100\">\n                      {{ userProfile()?.name }}\n                    </div>\n                  }\n                  @if (userProfile()?.username) {\n                    <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-400\">\n                      @{{ userProfile()?.username }}\n                    </div>\n                  }\n                  @if (userProfile()?.email) {\n                    <div class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n                      {{ userProfile()?.email }}\n                    </div>\n                  }\n                </div>\n\n                <!-- Menu Items -->\n                @if (userMenuItems().length > 0) {\n                  <div class=\"zs:py-1\">\n                    @for (item of getUserMenuItems(); track $index) {\n                      <ZS-nav-item\n                        [item]=\"item\"\n                        [collectionName]=\"'MenuItems'\"\n                        (anyItemClickedEv)=\"itemClicked($event)\"\n                        role=\"menuitem\"\n                      />\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Auth Buttons -->\n        @else if (authButtons().showAuthButtons && !isLoggedIn()) {\n          <div class=\"zs:hidden zs:lg:flex zs:items-center zs:gap-3\" role=\"group\" aria-label=\"Authentication\">\n            <ZS-button\n            [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n            [variant]=\"authButtons().login?.variant ?? 'outline'\"\n            [size]=\"authButtons().login?.size ?? 'md'\"\n            [icon]=\"authButtons().login?.icon  ?? ''\"\n            (clickedEv)=\"onLogin()\"\n            >\n              Login\n            </ZS-button>\n\n            <ZS-button\n            [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n            [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n            [size]=\"authButtons().signup?.size ?? 'md'\"\n            [icon]=\"authButtons().signup?.icon  ?? ''\"\n            (clickedEv)=\"onSignup()\"\n            >\n              Sign Up\n            </ZS-button>\n          </div>\n        }\n\n        <!-- Mobile Menu Toggle -->\n        @if(mobileNavItems().length || showSearchBar() || (authButtons().showAuthButtons && !isLoggedIn())) {\n          <div class=\"zs:lg:hidden\">\n            <button\n              (click)=\"toggleMobileMenu()\"\n              class=\"zs:p-2 zs:rounded-md zs:text-gray-600 zs:dark:text-gray-300\n                    zs:hover:text-gray-900 zs:dark:hover:text-gray-100\n                    zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-inset\n                    zs:focus:ring-gray-200 zs:dark:focus:ring-gray-700\"\n              aria-controls=\"mobile-menu\"\n              aria-expanded=\"{{ isMobileMenuOpen() }}\"\n              aria-label=\"Toggle mobile menu\"\n            >\n              <i class=\"fas fa-bars zs:px-1\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- ========================= Mobile Menu ========================= -->\n  @if (isMobileMenuOpen()) {\n    <div\n      id=\"mobile-menu\"\n      class=\"zs:lg:hidden zs:bg-white zs:dark:bg-[#18202F]\n      zs:[box-shadow:0_8px_0_0_#364153] zs:dark:[box-shadow:0_8px_0_0_black]\"\n      role=\"menu\"\n      aria-label=\"Mobile navigation\"\n    >\n      <div class=\"zs:px-2 zs:pt-2 zs:pb-3 zs:flex zs:flex-col zs:gap-1 zs:sm:px-3\">\n\n        <!-- Navigation Items -->\n        <div class=\"zs:max-h-96 zs:flex zs:flex-col zs:gap-2 zs:pb-2 zs:overflow-y-auto\">\n          @for (item of mobileNavItems(); track $index) {\n            <ZS-nav-item\n              [item]=\"item\"\n              [collectionName]=\"'navItems'\"\n              (anyItemClickedEv)=\"itemClicked($event)\"\n              role=\"menuitem\"\n            />\n          }\n        </div>\n\n        <!-- Search Bar (Mobile) -->\n        @if (showSearchBar()) {\n          <div class=\"zs:px-3 zs:pb-2\" role=\"search\">\n            <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n            <div class=\"zs:relative\">\n              <input\n                id=\"mobile-search\"\n                type=\"text\"\n                [value]=\"searchValue()\"\n                (input)=\"searchValue.set($any($event.target).value)\"\n                (keyup.enter)=\"onSearchSubmit()\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"zs:w-full zs:bg-gray-100 zs:dark:bg-gray-700 zs:text-gray-800 zs:dark:text-gray-200\n                       zs:rounded-full zs:py-2 zs:px-4 zs:transition-shadow zs:duration-200 zs:focus:outline-hidden\n                       zs:focus:ring-2 zs:focus:ring-blue-500 zs:focus:bg-white zs:dark:focus:bg-gray-600\n                       zs:shadow-sm zs:dark:shadow-gray-500/40 zs:hover:shadow-md zs:dark:hover:shadow-gray-500/50\"\n              />\n              <button\n                (click)=\"onSearchSubmit()\"\n                class=\"zs:absolute zs:py-1 zs:px-2 zs:right-2 zs:top-1/2 zs:-translate-y-1/2 zs:text-gray-500 zs:dark:text-gray-400\n                       zs:hover:text-gray-700 zs:dark:hover:text-gray-300\"\n                aria-label=\"Submit search\"\n              >\n                <i class=\"fas fa-search\"></i>\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- Auth Buttons (Mobile) -->\n        @if (authButtons().showAuthButtons && !isLoggedIn()) {\n          <div\n            class=\"zs:pt-3 zs:pb-4 zs:border-t zs:border-gray-300 zs:dark:border-gray-500\n            zs:flex zs:flex-wrap zs:justify-start zs:items-center zs:gap-2\"\n            role=\"group\"\n            aria-label=\"Authentication (mobile)\"\n          >\n            <ZS-button\n            [btnStyle]=\"authButtons().login?.btnStyle ?? 'secondary'\"\n            [variant]=\"authButtons().login?.variant ?? 'outline'\"\n            [size]=\"authButtons().login?.size ?? 'md'\"\n            [icon]=\"authButtons().login?.icon  ?? ''\"\n            (clickedEv)=\"onLogin(); isMobileMenuOpen.set(false)\"\n            >\n              Login\n            </ZS-button>\n\n            <ZS-button\n            [btnStyle]=\"authButtons().signup?.btnStyle ?? 'primary'\"\n            [variant]=\"authButtons().signup?.variant ?? 'solid'\"\n            [size]=\"authButtons().signup?.size ?? 'md'\"\n            [icon]=\"authButtons().signup?.icon  ?? ''\"\n            (clickedEv)=\"onSignup(); isMobileMenuOpen.set(false)\"\n            >\n              Sign Up\n            </ZS-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</nav>\n\n<!-- ========================= Spacer for Fixed Navbar ========================= -->\n@if (fixed()) {\n  <div class=\"zs:h-16\" aria-hidden=\"true\"></div>\n}\n\n<!-- ========================= Overlay for Menu Closing ========================= -->\n@if (isMobileMenuOpen()) {\n  <div\n    class=\"zs:fixed zs:inset-0 zs:bg-gray-700 zs:dark:bg-black {{ zIndices.navbarOverlay }}\"\n    (click)=\"closeAllMenus()\"\n    aria-hidden=\"true\"\n  ></div>\n}\n", styles: [":host{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}a,button{transition:all .2s ease-in-out}img{object-fit:cover}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.rtl\\:space-x-reverse{margin-right:0;margin-left:.75rem}}\n"] }]
         }], propDecorators: { fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], logoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoUrl", required: false }] }], siteNameConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "siteNameConfig", required: false }] }], authButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "authButtons", required: false }] }], showUserSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUserSection", required: false }] }], showSearchBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearchBar", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], isLoggedIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoggedIn", required: false }] }], userProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "userProfile", required: false }] }], userMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "userMenuItems", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], loginClickedEv: [{ type: i0.Output, args: ["loginClickedEv"] }], signupClickedEv: [{ type: i0.Output, args: ["signupClickedEv"] }], searchSubmittedEv: [{ type: i0.Output, args: ["searchSubmittedEv"] }], anyItemClickedEv: [{ type: i0.Output, args: ["anyItemClickedEv"] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], isMobileMenuOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileMenuOpen", required: false }] }, { type: i0.Output, args: ["isMobileMenuOpenChange"] }] } });
 
 class Page404 {
@@ -1665,11 +1665,11 @@ class Page404 {
     // ========================================================================
     onAction = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Page404, isStandalone: true, selector: "ZS-page404", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, pageStyle: { classPropertyName: "pageStyle", publicName: "pageStyle", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n    zs:text-center zs:transition-colors zs:duration-500 zs:animate-fadeIn\"\n    [ngClass]=\"[style().iconText]\"\n    >\n\n  <!-- ========================= Icon ========================= --> \n  <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n    <i class=\"fa-solid\" [class]=\"icon()\"></i>\n  </div>\n\n  <!-- ========================= Title ========================= -->\n  <h1 class=\"zs:text-6xl zs:font-black zs:tracking-widest zs:mb-2 \n  zs:text-rose-600 zs:dark:text-rose-500 zs:select-none zs:transition-colors\n  zs:drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]\">\n    404\n  </h1>\n\n\n  <!-- ========================= Message ========================= -->\n  <h2 class=\"zs:text-2xl zs:text-rose-600/80 zs:dark:text-rose-800/80 zs:font-semibold zs:mb-4 zs:transition-colors\">\n    {{ title() }}\n  </h2>\n  <p class=\"zs:text-base zs:max-w-md zs:text-gray-600 zs:dark:text-gray-400 zs:mb-8 zs:transition-colors\">\n    {{ message() }}\n  </p>\n\n  <!-- ========================= Button ========================= -->\n  @if (showButton()) {\n    <a\n      [routerLink]=\"routerLink()\"\n      (click)=\"onAction.emit()\"\n      class=\"zs:px-6 zs:py-2 zs:rounded-full\n             zs:text-white zs:font-medium zs:shadow-md\n             zs:hover:shadow-lg zs:flex zs:items-center \n             zs:justify-center zs:transition-all zs:duration-300 zs:ease-out \n             zs:gap-1.5\"\n      [ngClass]=\"[style().btnBG, style().btnBGHover]\"\n    >\n      <i class=\"fa-solid fa-house\"></i>\n      {{ buttonText() }}\n    </a>\n  }\n</div>\n", styles: ["@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\n"], dependencies: [{ 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: "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: Page404, isStandalone: true, selector: "ZS-page404", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, pageStyle: { classPropertyName: "pageStyle", publicName: "pageStyle", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n    zs:text-center zs:animate-fadeIn\"\n    [ngClass]=\"[style().iconText]\"\n    >\n\n  <!-- ========================= Icon ========================= --> \n  <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n    <i class=\"fa-solid\" [class]=\"icon()\"></i>\n  </div>\n\n  <!-- ========================= Title ========================= -->\n  <h1 class=\"zs:text-6xl zs:font-black zs:tracking-widest zs:mb-2 \n  zs:text-rose-600 zs:dark:text-rose-500 zs:select-none\n  zs:drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]\">\n    404\n  </h1>\n\n\n  <!-- ========================= Message ========================= -->\n  <h2 class=\"zs:text-2xl zs:text-rose-600/80 zs:dark:text-rose-800/80 zs:font-semibold zs:mb-4\">\n    {{ title() }}\n  </h2>\n  <p class=\"zs:text-base zs:max-w-md zs:text-gray-600 zs:dark:text-gray-400 zs:mb-8\">\n    {{ message() }}\n  </p>\n\n  <!-- ========================= Button ========================= -->\n  @if (showButton()) {\n    <a\n      [routerLink]=\"routerLink()\"\n      (click)=\"onAction.emit()\"\n      class=\"zs:px-6 zs:py-2 zs:rounded-full\n             zs:text-white zs:font-medium zs:shadow-md\n             zs:hover:shadow-lg zs:flex zs:items-center \n             zs:justify-center\n             zs:gap-1.5\"\n      [ngClass]=\"[style().btnBG, style().btnBGHover]\"\n    >\n      <i class=\"fa-solid fa-house\"></i>\n      {{ buttonText() }}\n    </a>\n  }\n</div>\n", styles: ["@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\n"], dependencies: [{ 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: "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: Page404, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-page404', imports: [RouterModule, CommonModule], template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n    zs:text-center zs:transition-colors zs:duration-500 zs:animate-fadeIn\"\n    [ngClass]=\"[style().iconText]\"\n    >\n\n  <!-- ========================= Icon ========================= --> \n  <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n    <i class=\"fa-solid\" [class]=\"icon()\"></i>\n  </div>\n\n  <!-- ========================= Title ========================= -->\n  <h1 class=\"zs:text-6xl zs:font-black zs:tracking-widest zs:mb-2 \n  zs:text-rose-600 zs:dark:text-rose-500 zs:select-none zs:transition-colors\n  zs:drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]\">\n    404\n  </h1>\n\n\n  <!-- ========================= Message ========================= -->\n  <h2 class=\"zs:text-2xl zs:text-rose-600/80 zs:dark:text-rose-800/80 zs:font-semibold zs:mb-4 zs:transition-colors\">\n    {{ title() }}\n  </h2>\n  <p class=\"zs:text-base zs:max-w-md zs:text-gray-600 zs:dark:text-gray-400 zs:mb-8 zs:transition-colors\">\n    {{ message() }}\n  </p>\n\n  <!-- ========================= Button ========================= -->\n  @if (showButton()) {\n    <a\n      [routerLink]=\"routerLink()\"\n      (click)=\"onAction.emit()\"\n      class=\"zs:px-6 zs:py-2 zs:rounded-full\n             zs:text-white zs:font-medium zs:shadow-md\n             zs:hover:shadow-lg zs:flex zs:items-center \n             zs:justify-center zs:transition-all zs:duration-300 zs:ease-out \n             zs:gap-1.5\"\n      [ngClass]=\"[style().btnBG, style().btnBGHover]\"\n    >\n      <i class=\"fa-solid fa-house\"></i>\n      {{ buttonText() }}\n    </a>\n  }\n</div>\n", styles: ["@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\n"] }]
+            args: [{ selector: 'ZS-page404', imports: [RouterModule, CommonModule], template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n    zs:text-center zs:animate-fadeIn\"\n    [ngClass]=\"[style().iconText]\"\n    >\n\n  <!-- ========================= Icon ========================= --> \n  <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n    <i class=\"fa-solid\" [class]=\"icon()\"></i>\n  </div>\n\n  <!-- ========================= Title ========================= -->\n  <h1 class=\"zs:text-6xl zs:font-black zs:tracking-widest zs:mb-2 \n  zs:text-rose-600 zs:dark:text-rose-500 zs:select-none\n  zs:drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]\">\n    404\n  </h1>\n\n\n  <!-- ========================= Message ========================= -->\n  <h2 class=\"zs:text-2xl zs:text-rose-600/80 zs:dark:text-rose-800/80 zs:font-semibold zs:mb-4\">\n    {{ title() }}\n  </h2>\n  <p class=\"zs:text-base zs:max-w-md zs:text-gray-600 zs:dark:text-gray-400 zs:mb-8\">\n    {{ message() }}\n  </p>\n\n  <!-- ========================= Button ========================= -->\n  @if (showButton()) {\n    <a\n      [routerLink]=\"routerLink()\"\n      (click)=\"onAction.emit()\"\n      class=\"zs:px-6 zs:py-2 zs:rounded-full\n             zs:text-white zs:font-medium zs:shadow-md\n             zs:hover:shadow-lg zs:flex zs:items-center \n             zs:justify-center\n             zs:gap-1.5\"\n      [ngClass]=\"[style().btnBG, style().btnBGHover]\"\n    >\n      <i class=\"fa-solid fa-house\"></i>\n      {{ buttonText() }}\n    </a>\n  }\n</div>\n", styles: ["@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], pageStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageStyle", required: false }] }], showButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButton", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
 
 // ========================================================================
@@ -1740,11 +1740,11 @@ class Pagination {
         this.goToPage(this.currentPage() - 1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Pagination, isStandalone: true, selector: "ZS-pagination", inputs: { totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, showTotalItems: { classPropertyName: "showTotalItems", publicName: "showTotalItems", isSignal: true, isRequired: false, transformFunction: null }, totalItemsMessage: { classPropertyName: "totalItemsMessage", publicName: "totalItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChangeEv: "pageChangeEv" }, ngImport: i0, template: "<!-- ========================= Top Spacing ========================= -->\n<div class=\"zs:mt-6\"></div>\n\n<!-- ========================= Total Items Count ========================= -->\n@if (showTotalItems()) {\n  <div\n    class=\"zs:text-center zs:text-sm zs:text-gray-500 zs:dark:text-gray-300 zs:mb-2 zs:transition-colors\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    {{ totalItemsMessage() }} {{ totalItems() }}\n  </div>\n}\n\n<!-- ========================= Pagination Navigation ========================= -->\n<nav\n  class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center zs:gap-1\"\n  role=\"navigation\"\n  aria-label=\"Pagination\"\n>\n  <!-- ========================= Previous Button ========================= -->\n  <button\n    type=\"button\"\n    class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 \n    zs:rounded-lg zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 \n    zs:dark:hover:bg-blue-700 zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-all \n    zs:duration-200\"\n    (click)=\"prevPage()\"\n    [disabled]=\"currentPage() === 1\"\n    [attr.aria-disabled]=\"currentPage() === 1\"\n    aria-label=\"Go to previous page\"\n  >\n    <i class=\"fas fa-chevron-left zs:text-gray-600 zs:dark:text-gray-200 zs:transition-colors\" aria-hidden=\"true\"></i>\n    <span class=\"sr-only\">Previous</span>\n  </button>\n\n  <!-- ========================= Page Numbers ========================= -->\n  @for (page of pages(); track page) {\n    <button\n      type=\"button\"\n      (click)=\"goToPage(page)\"\n      class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg \n      zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n      zs:transition-all zs:duration-200\"\n      [ngClass]=\"{\n        'zs:bg-blue-500 zs:text-white zs:dark:bg-blue-400 zs:dark:text-black': page === currentPage()\n      }\"\n      [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n      [attr.aria-label]=\"'Go to page ' + page\"\n    >\n      {{ page }}\n    </button>\n  }\n\n  <!-- ========================= Next Button ========================= -->\n  <button\n    type=\"button\"\n    class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg zs:border \n    zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n    zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-all zs:duration-200\"\n    (click)=\"nextPage()\"\n    [disabled]=\"currentPage() === totalPages()\"\n    [attr.aria-disabled]=\"currentPage() === totalPages()\"\n    aria-label=\"Go to next page\"\n  >\n    <i class=\"fas fa-chevron-right zs:text-gray-600 zs:dark:text-gray-200 zs:transition-colors\" aria-hidden=\"true\"></i>\n    <span class=\"sr-only\">Next</span>\n  </button>\n</nav>", 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: Pagination, isStandalone: true, selector: "ZS-pagination", inputs: { totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, showTotalItems: { classPropertyName: "showTotalItems", publicName: "showTotalItems", isSignal: true, isRequired: false, transformFunction: null }, totalItemsMessage: { classPropertyName: "totalItemsMessage", publicName: "totalItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChangeEv: "pageChangeEv" }, ngImport: i0, template: "<!-- ========================= Top Spacing ========================= -->\n<div class=\"zs:mt-6\"></div>\n\n<!-- ========================= Total Items Count ========================= -->\n@if (showTotalItems()) {\n  <div\n    class=\"zs:text-center zs:text-sm zs:text-gray-500 zs:dark:text-gray-300 zs:mb-2\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    {{ totalItemsMessage() }} {{ totalItems() }}\n  </div>\n}\n\n<!-- ========================= Pagination Navigation ========================= -->\n<nav\n  class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center zs:gap-1\"\n  role=\"navigation\"\n  aria-label=\"Pagination\"\n>\n  <!-- ========================= Previous Button ========================= -->\n  <button\n    type=\"button\"\n    class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 \n    zs:rounded-lg zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 \n    zs:dark:hover:bg-blue-700 zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-[opacity,color,background-color]\n    zs:duration-200\"\n    (click)=\"prevPage()\"\n    [disabled]=\"currentPage() === 1\"\n    [attr.aria-disabled]=\"currentPage() === 1\"\n    aria-label=\"Go to previous page\"\n  >\n    <i class=\"fas fa-chevron-left zs:text-gray-600 zs:dark:text-gray-200\" aria-hidden=\"true\"></i>\n    <span class=\"sr-only\">Previous</span>\n  </button>\n\n  <!-- ========================= Page Numbers ========================= -->\n  @for (page of pages(); track page) {\n    <button\n      type=\"button\"\n      (click)=\"goToPage(page)\"\n      class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg \n      zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n      zs:transition-[opacity,color,background-color] zs:duration-200\"\n      [ngClass]=\"{\n        'zs:bg-blue-500 zs:text-white zs:hover:text-black zs:dark:bg-blue-400 zs:dark:text-black': page === currentPage()\n      }\"\n      [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n      [attr.aria-label]=\"'Go to page ' + page\"\n    >\n      {{ page }}\n    </button>\n  }\n\n  <!-- ========================= Next Button ========================= -->\n  <button\n    type=\"button\"\n    class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg zs:border \n    zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n    zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-[opacity,color,background-color] zs:duration-200\"\n    (click)=\"nextPage()\"\n    [disabled]=\"currentPage() === totalPages()\"\n    [attr.aria-disabled]=\"currentPage() === totalPages()\"\n    aria-label=\"Go to next page\"\n  >\n    <i class=\"fas fa-chevron-right zs:text-gray-600 zs:dark:text-gray-200\" aria-hidden=\"true\"></i>\n    <span class=\"sr-only\">Next</span>\n  </button>\n</nav>", 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: Pagination, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-pagination', imports: [CommonModule], template: "<!-- ========================= Top Spacing ========================= -->\n<div class=\"zs:mt-6\"></div>\n\n<!-- ========================= Total Items Count ========================= -->\n@if (showTotalItems()) {\n  <div\n    class=\"zs:text-center zs:text-sm zs:text-gray-500 zs:dark:text-gray-300 zs:mb-2 zs:transition-colors\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    {{ totalItemsMessage() }} {{ totalItems() }}\n  </div>\n}\n\n<!-- ========================= Pagination Navigation ========================= -->\n<nav\n  class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center zs:gap-1\"\n  role=\"navigation\"\n  aria-label=\"Pagination\"\n>\n  <!-- ========================= Previous Button ========================= -->\n  <button\n    type=\"button\"\n    class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 \n    zs:rounded-lg zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 \n    zs:dark:hover:bg-blue-700 zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-all \n    zs:duration-200\"\n    (click)=\"prevPage()\"\n    [disabled]=\"currentPage() === 1\"\n    [attr.aria-disabled]=\"currentPage() === 1\"\n    aria-label=\"Go to previous page\"\n  >\n    <i class=\"fas fa-chevron-left zs:text-gray-600 zs:dark:text-gray-200 zs:transition-colors\" aria-hidden=\"true\"></i>\n    <span class=\"sr-only\">Previous</span>\n  </button>\n\n  <!-- ========================= Page Numbers ========================= -->\n  @for (page of pages(); track page) {\n    <button\n      type=\"button\"\n      (click)=\"goToPage(page)\"\n      class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg \n      zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n      zs:transition-all zs:duration-200\"\n      [ngClass]=\"{\n        'zs:bg-blue-500 zs:text-white zs:dark:bg-blue-400 zs:dark:text-black': page === currentPage()\n      }\"\n      [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n      [attr.aria-label]=\"'Go to page ' + page\"\n    >\n      {{ page }}\n    </button>\n  }\n\n  <!-- ========================= Next Button ========================= -->\n  <button\n    type=\"button\"\n    class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg zs:border \n    zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n    zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-all zs:duration-200\"\n    (click)=\"nextPage()\"\n    [disabled]=\"currentPage() === totalPages()\"\n    [attr.aria-disabled]=\"currentPage() === totalPages()\"\n    aria-label=\"Go to next page\"\n  >\n    <i class=\"fas fa-chevron-right zs:text-gray-600 zs:dark:text-gray-200 zs:transition-colors\" aria-hidden=\"true\"></i>\n    <span class=\"sr-only\">Next</span>\n  </button>\n</nav>", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ZS-pagination', imports: [CommonModule], template: "<!-- ========================= Top Spacing ========================= -->\n<div class=\"zs:mt-6\"></div>\n\n<!-- ========================= Total Items Count ========================= -->\n@if (showTotalItems()) {\n  <div\n    class=\"zs:text-center zs:text-sm zs:text-gray-500 zs:dark:text-gray-300 zs:mb-2\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    {{ totalItemsMessage() }} {{ totalItems() }}\n  </div>\n}\n\n<!-- ========================= Pagination Navigation ========================= -->\n<nav\n  class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center zs:gap-1\"\n  role=\"navigation\"\n  aria-label=\"Pagination\"\n>\n  <!-- ========================= Previous Button ========================= -->\n  <button\n    type=\"button\"\n    class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 \n    zs:rounded-lg zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 \n    zs:dark:hover:bg-blue-700 zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-[opacity,color,background-color]\n    zs:duration-200\"\n    (click)=\"prevPage()\"\n    [disabled]=\"currentPage() === 1\"\n    [attr.aria-disabled]=\"currentPage() === 1\"\n    aria-label=\"Go to previous page\"\n  >\n    <i class=\"fas fa-chevron-left zs:text-gray-600 zs:dark:text-gray-200\" aria-hidden=\"true\"></i>\n    <span class=\"sr-only\">Previous</span>\n  </button>\n\n  <!-- ========================= Page Numbers ========================= -->\n  @for (page of pages(); track page) {\n    <button\n      type=\"button\"\n      (click)=\"goToPage(page)\"\n      class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg \n      zs:border zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n      zs:transition-[opacity,color,background-color] zs:duration-200\"\n      [ngClass]=\"{\n        'zs:bg-blue-500 zs:text-white zs:hover:text-black zs:dark:bg-blue-400 zs:dark:text-black': page === currentPage()\n      }\"\n      [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n      [attr.aria-label]=\"'Go to page ' + page\"\n    >\n      {{ page }}\n    </button>\n  }\n\n  <!-- ========================= Next Button ========================= -->\n  <button\n    type=\"button\"\n    class=\"zs:flex zs:items-center zs:justify-center zs:size-9 zs:sm:size-10 zs:rounded-lg zs:border \n    zs:border-gray-300 zs:dark:border-gray-600 zs:hover:bg-blue-100 zs:dark:hover:bg-blue-700 \n    zs:disabled:opacity-50 zs:disabled:cursor-not-allowed zs:transition-[opacity,color,background-color] zs:duration-200\"\n    (click)=\"nextPage()\"\n    [disabled]=\"currentPage() === totalPages()\"\n    [attr.aria-disabled]=\"currentPage() === totalPages()\"\n    aria-label=\"Go to next page\"\n  >\n    <i class=\"fas fa-chevron-right zs:text-gray-600 zs:dark:text-gray-200\" aria-hidden=\"true\"></i>\n    <span class=\"sr-only\">Next</span>\n  </button>\n</nav>", styles: [":host{display:block}\n"] }]
         }], propDecorators: { totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: true }] }], showTotalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotalItems", required: false }] }], totalItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItemsMessage", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageChangeEv: [{ type: i0.Output, args: ["pageChangeEv"] }] } });
 
 // ========================================================================
@@ -1766,7 +1766,7 @@ class ScrollToTop {
     /**
      * Tailwind CSS class for the circle's color (background ring).
      */
-    circleColorClass = input('zs:text-gray-400/60 zs:dark:text-gray-600/70 zs:group-hover:brightness-110 zs:transition-colors', ...(ngDevMode ? [{ debugName: "circleColorClass" }] : []));
+    circleColorClass = input('zs:text-gray-400/60 zs:dark:text-gray-600/70 zs:group-hover:brightness-110', ...(ngDevMode ? [{ debugName: "circleColorClass" }] : []));
     /**
      * BaseColors class for the arrow and progress indicator color.
      */
@@ -1816,11 +1816,11 @@ class ScrollToTop {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ScrollToTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: ScrollToTop, isStandalone: true, selector: "ZS-scroll-to-top", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, circleColorClass: { classPropertyName: "circleColorClass", publicName: "circleColorClass", isSignal: true, isRequired: false, transformFunction: null }, arrowProgressColor: { classPropertyName: "arrowProgressColor", publicName: "arrowProgressColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "onScroll($event)" } }, ngImport: i0, template: "<!-- ========================= Scroll-to-Top Container ========================= -->\n<div\n  [ngClass]=\"positionClass()\"\n  class=\"zs:fixed zs:group zs:bottom-4 {{ zIndices.scrollToTop }} \n  zs:transition-opacity zs:duration-300\"\n  [style.opacity]=\"scrollY() > 200 ? 1 : 0\"\n>\n  <!-- ========================= Scroll Button ========================= -->\n  <button\n    (click)=\"scrollToTop()\"\n    class=\"zs:w-12 zs:h-12 zs:group-hover:scale-105 zs:rounded-full zs:flex zs:items-center \n    zs:justify-center zs:relative zs:overflow-hidden zs:focus:outline-hidden\"\n    type=\"button\"\n    role=\"button\"\n    aria-label=\"Scroll to top\"\n    title=\"Scroll to top\"\n  >\n    <!-- ========================= Progress Ring (SVG) ========================= -->\n    <svg\n      class=\"zs:absolute zs:inset-0 zs:w-full zs:h-full zs:transform zs:-rotate-90\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <!-- Background Circle -->\n      <circle\n        cx=\"24\"\n        cy=\"24\"\n        r=\"22\"\n        stroke=\"transparent\"\n        stroke-width=\"5\"\n        fill=\"currentColor\"\n        [ngClass]=\"circleColorClass()\"\n      />\n\n      <!-- Animated Progress Circle -->\n      <circle\n        cx=\"24\"\n        cy=\"24\"\n        r=\"22\"\n        stroke=\"currentColor\"\n        stroke-width=\"5\"\n        fill=\"transparent\"\n        [attr.stroke-dasharray]=\"circleCircumference\"\n        [attr.stroke-dashoffset]=\"progressOffset()\"\n        [ngClass]=\"arrowProgressColorClass()\"\n        class=\"zs:transition-all zs:duration-300 zs:ease-out\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n\n    <!-- ========================= Up Arrow Icon ========================= -->\n    <i\n      class=\"fas fa-arrow-up zs:relative zs:z-100 zs:text-lg\"\n      [ngClass]=\"arrowProgressColorClass()\"\n      aria-hidden=\"true\"\n    ></i>\n  </button>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: ScrollToTop, isStandalone: true, selector: "ZS-scroll-to-top", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, circleColorClass: { classPropertyName: "circleColorClass", publicName: "circleColorClass", isSignal: true, isRequired: false, transformFunction: null }, arrowProgressColor: { classPropertyName: "arrowProgressColor", publicName: "arrowProgressColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "onScroll($event)" } }, ngImport: i0, template: "<!-- ========================= Scroll-to-Top Container ========================= -->\n<div\n  [ngClass]=\"positionClass()\"\n  class=\"zs:fixed zs:group zs:bottom-4 {{ zIndices.scrollToTop }} \n  zs:transition-opacity zs:duration-300\"\n  [style.opacity]=\"scrollY() > 200 ? 1 : 0\"\n>\n  <!-- ========================= Scroll Button ========================= -->\n  <button\n    (click)=\"scrollToTop()\"\n    class=\"zs:w-12 zs:h-12 zs:group-hover:scale-105 zs:rounded-full zs:flex zs:items-center \n    zs:justify-center zs:relative zs:overflow-hidden zs:focus:outline-hidden\"\n    type=\"button\"\n    role=\"button\"\n    aria-label=\"Scroll to top\"\n    title=\"Scroll to top\"\n  >\n    <!-- ========================= Progress Ring (SVG) ========================= -->\n    <svg\n      class=\"zs:absolute zs:inset-0 zs:w-full zs:h-full zs:transform zs:-rotate-90\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <!-- Background Circle -->\n      <circle\n        cx=\"24\"\n        cy=\"24\"\n        r=\"22\"\n        stroke=\"transparent\"\n        stroke-width=\"5\"\n        fill=\"currentColor\"\n        [ngClass]=\"circleColorClass()\"\n      />\n\n      <!-- Animated Progress Circle -->\n      <circle\n        cx=\"24\"\n        cy=\"24\"\n        r=\"22\"\n        stroke=\"currentColor\"\n        stroke-width=\"5\"\n        fill=\"transparent\"\n        [attr.stroke-dasharray]=\"circleCircumference\"\n        [attr.stroke-dashoffset]=\"progressOffset()\"\n        [ngClass]=\"arrowProgressColorClass()\"\n        class=\"zs:transition-[stroke-dashoffset] zs:duration-300 zs:ease-out\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n\n    <!-- ========================= Up Arrow Icon ========================= -->\n    <i\n      class=\"fas fa-arrow-up zs:relative zs:z-100 zs:text-lg\"\n      [ngClass]=\"arrowProgressColorClass()\"\n      aria-hidden=\"true\"\n    ></i>\n  </button>\n</div>", styles: [""], 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: ScrollToTop, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-scroll-to-top', imports: [CommonModule], template: "<!-- ========================= Scroll-to-Top Container ========================= -->\n<div\n  [ngClass]=\"positionClass()\"\n  class=\"zs:fixed zs:group zs:bottom-4 {{ zIndices.scrollToTop }} \n  zs:transition-opacity zs:duration-300\"\n  [style.opacity]=\"scrollY() > 200 ? 1 : 0\"\n>\n  <!-- ========================= Scroll Button ========================= -->\n  <button\n    (click)=\"scrollToTop()\"\n    class=\"zs:w-12 zs:h-12 zs:group-hover:scale-105 zs:rounded-full zs:flex zs:items-center \n    zs:justify-center zs:relative zs:overflow-hidden zs:focus:outline-hidden\"\n    type=\"button\"\n    role=\"button\"\n    aria-label=\"Scroll to top\"\n    title=\"Scroll to top\"\n  >\n    <!-- ========================= Progress Ring (SVG) ========================= -->\n    <svg\n      class=\"zs:absolute zs:inset-0 zs:w-full zs:h-full zs:transform zs:-rotate-90\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <!-- Background Circle -->\n      <circle\n        cx=\"24\"\n        cy=\"24\"\n        r=\"22\"\n        stroke=\"transparent\"\n        stroke-width=\"5\"\n        fill=\"currentColor\"\n        [ngClass]=\"circleColorClass()\"\n      />\n\n      <!-- Animated Progress Circle -->\n      <circle\n        cx=\"24\"\n        cy=\"24\"\n        r=\"22\"\n        stroke=\"currentColor\"\n        stroke-width=\"5\"\n        fill=\"transparent\"\n        [attr.stroke-dasharray]=\"circleCircumference\"\n        [attr.stroke-dashoffset]=\"progressOffset()\"\n        [ngClass]=\"arrowProgressColorClass()\"\n        class=\"zs:transition-all zs:duration-300 zs:ease-out\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n\n    <!-- ========================= Up Arrow Icon ========================= -->\n    <i\n      class=\"fas fa-arrow-up zs:relative zs:z-100 zs:text-lg\"\n      [ngClass]=\"arrowProgressColorClass()\"\n      aria-hidden=\"true\"\n    ></i>\n  </button>\n</div>" }]
+            args: [{ selector: 'ZS-scroll-to-top', imports: [CommonModule], template: "<!-- ========================= Scroll-to-Top Container ========================= -->\n<div\n  [ngClass]=\"positionClass()\"\n  class=\"zs:fixed zs:group zs:bottom-4 {{ zIndices.scrollToTop }} \n  zs:transition-opacity zs:duration-300\"\n  [style.opacity]=\"scrollY() > 200 ? 1 : 0\"\n>\n  <!-- ========================= Scroll Button ========================= -->\n  <button\n    (click)=\"scrollToTop()\"\n    class=\"zs:w-12 zs:h-12 zs:group-hover:scale-105 zs:rounded-full zs:flex zs:items-center \n    zs:justify-center zs:relative zs:overflow-hidden zs:focus:outline-hidden\"\n    type=\"button\"\n    role=\"button\"\n    aria-label=\"Scroll to top\"\n    title=\"Scroll to top\"\n  >\n    <!-- ========================= Progress Ring (SVG) ========================= -->\n    <svg\n      class=\"zs:absolute zs:inset-0 zs:w-full zs:h-full zs:transform zs:-rotate-90\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <!-- Background Circle -->\n      <circle\n        cx=\"24\"\n        cy=\"24\"\n        r=\"22\"\n        stroke=\"transparent\"\n        stroke-width=\"5\"\n        fill=\"currentColor\"\n        [ngClass]=\"circleColorClass()\"\n      />\n\n      <!-- Animated Progress Circle -->\n      <circle\n        cx=\"24\"\n        cy=\"24\"\n        r=\"22\"\n        stroke=\"currentColor\"\n        stroke-width=\"5\"\n        fill=\"transparent\"\n        [attr.stroke-dasharray]=\"circleCircumference\"\n        [attr.stroke-dashoffset]=\"progressOffset()\"\n        [ngClass]=\"arrowProgressColorClass()\"\n        class=\"zs:transition-[stroke-dashoffset] zs:duration-300 zs:ease-out\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n\n    <!-- ========================= Up Arrow Icon ========================= -->\n    <i\n      class=\"fas fa-arrow-up zs:relative zs:z-100 zs:text-lg\"\n      [ngClass]=\"arrowProgressColorClass()\"\n      aria-hidden=\"true\"\n    ></i>\n  </button>\n</div>" }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], circleColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "circleColorClass", required: false }] }], arrowProgressColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowProgressColor", required: false }] }], onScroll: [{
                 type: HostListener,
                 args: ['window:scroll', ['$event']]
@@ -1903,11 +1903,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    [ngClass]=\"[wrapperClasses(), 'zs:transition-colors']\" \n    role=\"status\" \n    aria-live=\"polite\" \n    aria-busy=\"true\"\n  >\n    <div [ngClass]=\"[boxClasses(), 'zs:transition-colors']\">\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"] }] });
+    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    [ngClass]=\"[wrapperClasses()]\" \n    role=\"status\" \n    aria-live=\"polite\" \n    aria-busy=\"true\"\n  >\n    <div [ngClass]=\"[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    [ngClass]=\"[wrapperClasses(), 'zs:transition-colors']\" \n    role=\"status\" \n    aria-live=\"polite\" \n    aria-busy=\"true\"\n  >\n    <div [ngClass]=\"[boxClasses(), 'zs:transition-colors']\">\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"] }]
+            args: [{ selector: 'ZS-spinner', imports: [CommonModule], template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n  <div \n    [ngClass]=\"[wrapperClasses()]\" \n    role=\"status\" \n    aria-live=\"polite\" \n    aria-busy=\"true\"\n  >\n    <div [ngClass]=\"[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 }] }] } });
 
 // ==============================================
@@ -1926,7 +1926,7 @@ class ThemeToggle {
     // ==============================================
     // Inputs
     // ==============================================
-    bodyClass = input('zs:bg-white zs:dark:bg-gray-900 zs:text-gray-900 zs:dark:text-gray-100 zs:transition-colors', ...(ngDevMode ? [{ debugName: "bodyClass" }] : []));
+    bodyClass = input('zs:bg-white zs:dark:bg-gray-900 zs:text-gray-900 zs:dark:text-gray-100', ...(ngDevMode ? [{ debugName: "bodyClass" }] : []));
     showDefaultUI = input(true, ...(ngDevMode ? [{ debugName: "showDefaultUI" }] : []));
     setManualTheme = input(null, ...(ngDevMode ? [{ debugName: "setManualTheme" }] : []));
     fromTop = input(1 / 4, ...(ngDevMode ? [{ debugName: "fromTop" }] : []));
@@ -1935,7 +1935,7 @@ class ThemeToggle {
     isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
     startY = 0;
     startTop = 0;
-    transitionValue = 'zs:transition-all zs:duration-300';
+    transitionValue = 'zs:transition-[translate] zs:duration-300';
     transition = signal('', ...(ngDevMode ? [{ debugName: "transition" }] : []));
     // ==============================================
     // Outputs
@@ -2068,11 +2068,11 @@ class ThemeToggle {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ThemeToggle, isStandalone: true, selector: "ZS-theme-toggle", inputs: { bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, showDefaultUI: { classPropertyName: "showDefaultUI", publicName: "showDefaultUI", isSignal: true, isRequired: false, transformFunction: null }, setManualTheme: { classPropertyName: "setManualTheme", publicName: "setManualTheme", isSignal: true, isRequired: false, transformFunction: null }, fromTop: { classPropertyName: "fromTop", publicName: "fromTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeChangeEv: "themeChangeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- ========================= Theme Switcher Panel ========================= -->\n@if(showDefaultUI()) {\n  <div\n    class=\"zs:fixed zs:left-0 {{ zIndices.themeToggle }} zs:transform \n    zs:-translate-y-1/2\"\n\n    [style.top.px]=\"panelTop()\"\n    [ngClass]=\"[!isOpen() ? 'zs:-translate-x-24' : '', transition()]\"\n\n    (pointerdown)=\"onDragStart($event)\"\n    (pointermove)=\"onDragMove($event)\"\n    (pointerup)=\"onDragEnd($event)\"\n    (pointercancel)=\"onDragEnd($event)\"\n\n    style=\"touch-action: none; cursor: grab;\"\n  >\n    <!-- ========================= Theme Selection Buttons ========================= -->\n    <div class=\"zs:flex zs:items-center\">\n      <div \n        class=\"zs:flex zs:overflow-hidden zs:transition-all zs:duration-300\"\n        role=\"group\"\n        aria-label=\"Theme selection\"\n      >\n        <!-- Light Theme Button -->\n        <button\n          (click)=\"setTheme('light')\"\n          type=\"button\"\n          class=\"zs:px-3 zs:py-2 zs:rounded-l-none zs:border-l-0 zs:border-y \n          zs:transition-colors zs:shrink-0\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Activate light theme\"\n          [attr.aria-pressed]=\"currentTheme() === 'light'\"\n        >\n          <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n        </button>\n  \n        <!-- Dark Theme Button -->\n        <button\n          (click)=\"setTheme('dark')\"\n          type=\"button\"\n          class=\"zs:px-3 zs:py-2 zs:rounded-r-lg zs:border-y zs:border-r \n          zs:transition-colors zs:shrink-0\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Activate dark theme\"\n          [attr.aria-pressed]=\"currentTheme() === 'dark'\"\n        >\n          <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n  \n      <!-- ========================= Toggle Button with Connector ========================= -->\n      <div \n        class=\"zs:relative\"\n        [ngClass]=\"isOpen() ? 'zs:hidden' : ''\"\n      >\n        <!-- Connector Line -->\n        <div\n          class=\"zs:absolute zs:top-1/2 zs:right-0 zs:h-0.5 zs:w-3 zs:transform zs:-translate-y-1/2\n                  zs:bg-gray-300 zs:dark:bg-gray-600 zs:transition-colors\"\n          aria-hidden=\"true\"\n        ></div>\n  \n        <!-- Toggle Button -->\n        <button\n          (click)=\"toggleOpen()\"\n          type=\"button\"\n          class=\"zs:relative zs:z-100 zs:w-12 zs:h-12 zs:rounded-full zs:rounded-l-none zs:border-l-0 \n          zs:border-2\n          zs:transition-all zs:duration-300 zs:flex zs:items-center zs:justify-center\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Toggle theme switcher\"\n          [attr.aria-expanded]=\"isOpen()\"\n          aria-controls=\"theme-panel\"\n        >\n          @if (currentTheme() === 'dark') {\n            <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n          } @else {\n            <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n}", 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: ThemeToggle, isStandalone: true, selector: "ZS-theme-toggle", inputs: { bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, showDefaultUI: { classPropertyName: "showDefaultUI", publicName: "showDefaultUI", isSignal: true, isRequired: false, transformFunction: null }, setManualTheme: { classPropertyName: "setManualTheme", publicName: "setManualTheme", isSignal: true, isRequired: false, transformFunction: null }, fromTop: { classPropertyName: "fromTop", publicName: "fromTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeChangeEv: "themeChangeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- ========================= Theme Switcher Panel ========================= -->\n@if(showDefaultUI()) {\n  <div\n    class=\"zs:fixed zs:left-0 {{ zIndices.themeToggle }} zs:transform \n    zs:-translate-y-1/2\"\n\n    [style.top.px]=\"panelTop()\"\n    [ngClass]=\"[!isOpen() ? 'zs:-translate-x-24' : '', transition()]\"\n\n    (pointerdown)=\"onDragStart($event)\"\n    (pointermove)=\"onDragMove($event)\"\n    (pointerup)=\"onDragEnd($event)\"\n    (pointercancel)=\"onDragEnd($event)\"\n\n    style=\"touch-action: none; cursor: grab;\"\n  >\n    <!-- ========================= Theme Selection Buttons ========================= -->\n    <div class=\"zs:flex zs:items-center\">\n      <div \n        class=\"zs:flex zs:overflow-hidden\"\n        role=\"group\"\n        aria-label=\"Theme selection\"\n      >\n        <!-- Light Theme Button -->\n        <button\n          (click)=\"setTheme('light')\"\n          type=\"button\"\n          class=\"zs:px-3 zs:py-2 zs:rounded-l-none zs:border-l-0 zs:border-y \n          zs:shrink-0\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Activate light theme\"\n          [attr.aria-pressed]=\"currentTheme() === 'light'\"\n        >\n          <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n        </button>\n  \n        <!-- Dark Theme Button -->\n        <button\n          (click)=\"setTheme('dark')\"\n          type=\"button\"\n          class=\"zs:px-3 zs:py-2 zs:rounded-r-lg zs:border-y zs:border-r \n          zs:shrink-0\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Activate dark theme\"\n          [attr.aria-pressed]=\"currentTheme() === 'dark'\"\n        >\n          <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n  \n      <!-- ========================= Toggle Button with Connector ========================= -->\n      <div \n        class=\"zs:relative\"\n        [ngClass]=\"isOpen() ? 'zs:hidden' : ''\"\n      >\n        <!-- Connector Line -->\n        <div\n          class=\"zs:absolute zs:top-1/2 zs:right-0 zs:h-0.5 zs:w-3 zs:transform zs:-translate-y-1/2\n                  zs:bg-gray-300 zs:dark:bg-gray-600\"\n          aria-hidden=\"true\"\n        ></div>\n  \n        <!-- Toggle Button -->\n        <button\n          (click)=\"toggleOpen()\"\n          type=\"button\"\n          class=\"zs:relative zs:z-100 zs:w-12 zs:h-12 zs:rounded-full zs:rounded-l-none zs:border-l-0 \n          zs:border-2 zs:flex zs:items-center zs:justify-center\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Toggle theme switcher\"\n          [attr.aria-expanded]=\"isOpen()\"\n          aria-controls=\"theme-panel\"\n        >\n          @if (currentTheme() === 'dark') {\n            <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n          } @else {\n            <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n}", 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: ThemeToggle, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-theme-toggle', imports: [CommonModule], template: "<!-- ========================= Theme Switcher Panel ========================= -->\n@if(showDefaultUI()) {\n  <div\n    class=\"zs:fixed zs:left-0 {{ zIndices.themeToggle }} zs:transform \n    zs:-translate-y-1/2\"\n\n    [style.top.px]=\"panelTop()\"\n    [ngClass]=\"[!isOpen() ? 'zs:-translate-x-24' : '', transition()]\"\n\n    (pointerdown)=\"onDragStart($event)\"\n    (pointermove)=\"onDragMove($event)\"\n    (pointerup)=\"onDragEnd($event)\"\n    (pointercancel)=\"onDragEnd($event)\"\n\n    style=\"touch-action: none; cursor: grab;\"\n  >\n    <!-- ========================= Theme Selection Buttons ========================= -->\n    <div class=\"zs:flex zs:items-center\">\n      <div \n        class=\"zs:flex zs:overflow-hidden zs:transition-all zs:duration-300\"\n        role=\"group\"\n        aria-label=\"Theme selection\"\n      >\n        <!-- Light Theme Button -->\n        <button\n          (click)=\"setTheme('light')\"\n          type=\"button\"\n          class=\"zs:px-3 zs:py-2 zs:rounded-l-none zs:border-l-0 zs:border-y \n          zs:transition-colors zs:shrink-0\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Activate light theme\"\n          [attr.aria-pressed]=\"currentTheme() === 'light'\"\n        >\n          <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n        </button>\n  \n        <!-- Dark Theme Button -->\n        <button\n          (click)=\"setTheme('dark')\"\n          type=\"button\"\n          class=\"zs:px-3 zs:py-2 zs:rounded-r-lg zs:border-y zs:border-r \n          zs:transition-colors zs:shrink-0\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Activate dark theme\"\n          [attr.aria-pressed]=\"currentTheme() === 'dark'\"\n        >\n          <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n  \n      <!-- ========================= Toggle Button with Connector ========================= -->\n      <div \n        class=\"zs:relative\"\n        [ngClass]=\"isOpen() ? 'zs:hidden' : ''\"\n      >\n        <!-- Connector Line -->\n        <div\n          class=\"zs:absolute zs:top-1/2 zs:right-0 zs:h-0.5 zs:w-3 zs:transform zs:-translate-y-1/2\n                  zs:bg-gray-300 zs:dark:bg-gray-600 zs:transition-colors\"\n          aria-hidden=\"true\"\n        ></div>\n  \n        <!-- Toggle Button -->\n        <button\n          (click)=\"toggleOpen()\"\n          type=\"button\"\n          class=\"zs:relative zs:z-100 zs:w-12 zs:h-12 zs:rounded-full zs:rounded-l-none zs:border-l-0 \n          zs:border-2\n          zs:transition-all zs:duration-300 zs:flex zs:items-center zs:justify-center\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Toggle theme switcher\"\n          [attr.aria-expanded]=\"isOpen()\"\n          aria-controls=\"theme-panel\"\n        >\n          @if (currentTheme() === 'dark') {\n            <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n          } @else {\n            <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n}", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ZS-theme-toggle', imports: [CommonModule], template: "<!-- ========================= Theme Switcher Panel ========================= -->\n@if(showDefaultUI()) {\n  <div\n    class=\"zs:fixed zs:left-0 {{ zIndices.themeToggle }} zs:transform \n    zs:-translate-y-1/2\"\n\n    [style.top.px]=\"panelTop()\"\n    [ngClass]=\"[!isOpen() ? 'zs:-translate-x-24' : '', transition()]\"\n\n    (pointerdown)=\"onDragStart($event)\"\n    (pointermove)=\"onDragMove($event)\"\n    (pointerup)=\"onDragEnd($event)\"\n    (pointercancel)=\"onDragEnd($event)\"\n\n    style=\"touch-action: none; cursor: grab;\"\n  >\n    <!-- ========================= Theme Selection Buttons ========================= -->\n    <div class=\"zs:flex zs:items-center\">\n      <div \n        class=\"zs:flex zs:overflow-hidden\"\n        role=\"group\"\n        aria-label=\"Theme selection\"\n      >\n        <!-- Light Theme Button -->\n        <button\n          (click)=\"setTheme('light')\"\n          type=\"button\"\n          class=\"zs:px-3 zs:py-2 zs:rounded-l-none zs:border-l-0 zs:border-y \n          zs:shrink-0\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Activate light theme\"\n          [attr.aria-pressed]=\"currentTheme() === 'light'\"\n        >\n          <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n        </button>\n  \n        <!-- Dark Theme Button -->\n        <button\n          (click)=\"setTheme('dark')\"\n          type=\"button\"\n          class=\"zs:px-3 zs:py-2 zs:rounded-r-lg zs:border-y zs:border-r \n          zs:shrink-0\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Activate dark theme\"\n          [attr.aria-pressed]=\"currentTheme() === 'dark'\"\n        >\n          <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n  \n      <!-- ========================= Toggle Button with Connector ========================= -->\n      <div \n        class=\"zs:relative\"\n        [ngClass]=\"isOpen() ? 'zs:hidden' : ''\"\n      >\n        <!-- Connector Line -->\n        <div\n          class=\"zs:absolute zs:top-1/2 zs:right-0 zs:h-0.5 zs:w-3 zs:transform zs:-translate-y-1/2\n                  zs:bg-gray-300 zs:dark:bg-gray-600\"\n          aria-hidden=\"true\"\n        ></div>\n  \n        <!-- Toggle Button -->\n        <button\n          (click)=\"toggleOpen()\"\n          type=\"button\"\n          class=\"zs:relative zs:z-100 zs:w-12 zs:h-12 zs:rounded-full zs:rounded-l-none zs:border-l-0 \n          zs:border-2 zs:flex zs:items-center zs:justify-center\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Toggle theme switcher\"\n          [attr.aria-expanded]=\"isOpen()\"\n          aria-controls=\"theme-panel\"\n        >\n          @if (currentTheme() === 'dark') {\n            <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n          } @else {\n            <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n}", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], showDefaultUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDefaultUI", required: false }] }], setManualTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "setManualTheme", required: false }] }], fromTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromTop", required: false }] }], themeChangeEv: [{ type: i0.Output, args: ["themeChangeEv"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -2106,11 +2106,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:flex-wrap\"\n  >\n  <!-- ========== Label Text ========== -->\n    @if (label()) {\n      <span class=\"zs:font-semibold\" \n      [ngClass]=\"[\n        sizeClasses().label,\n        hint() ? 'zs:mr-1.5' : ''\n      ]\">\n        {{ label() }}\n\n        <!-- Required Indicator -->\n        @if (true) {\n          <span class=\"zs:text-red-500 zs:ml-1\" 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 zs:transition-colors\" \n        [ngClass]=\"sizeClasses().hint\"\n      >\n        {{ hint() }}\n      </small>\n    }\n    <!-- ========== End Hint Text ========== -->\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:items-center zs:flex-wrap\"\n  >\n  <!-- ========== Label Text ========== -->\n    @if (label()) {\n      <span class=\"zs:font-semibold\" \n      [ngClass]=\"[\n        sizeClasses().label,\n        hint() ? 'zs:mr-1.5' : ''\n      ]\">\n        {{ label() }}\n\n        <!-- Required Indicator -->\n        @if (true) {\n          <span class=\"zs:text-red-500 zs:ml-1\" 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  </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:flex-wrap\"\n  >\n  <!-- ========== Label Text ========== -->\n    @if (label()) {\n      <span class=\"zs:font-semibold\" \n      [ngClass]=\"[\n        sizeClasses().label,\n        hint() ? 'zs:mr-1.5' : ''\n      ]\">\n        {{ label() }}\n\n        <!-- Required Indicator -->\n        @if (true) {\n          <span class=\"zs:text-red-500 zs:ml-1\" 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 zs:transition-colors\" \n        [ngClass]=\"sizeClasses().hint\"\n      >\n        {{ hint() }}\n      </small>\n    }\n    <!-- ========== End Hint Text ========== -->\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:items-center zs:flex-wrap\"\n  >\n  <!-- ========== Label Text ========== -->\n    @if (label()) {\n      <span class=\"zs:font-semibold\" \n      [ngClass]=\"[\n        sizeClasses().label,\n        hint() ? 'zs:mr-1.5' : ''\n      ]\">\n        {{ label() }}\n\n        <!-- Required Indicator -->\n        @if (true) {\n          <span class=\"zs:text-red-500 zs:ml-1\" 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  </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 }] }] } });
 
 // ==============================================
@@ -2199,11 +2199,11 @@ class Checkbox {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Checkbox, isStandalone: true, selector: "ZS-checkbox", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n  <!-- ===================== Checkbox Wrapper ===================== -->\n  <div\n    class=\"zs:cursor-pointer group leading-none\"\n  >\n    <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n    <input\n      type=\"checkbox\"\n      class=\"zs:hidden\"\n      [id]=\"Id()\"\n      [checked]=\"isChecked()\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"toggleChecked()\"\n    />\n\n    <!-- ===================== Custom Accessible Checkbox ===================== -->\n    <span\n      role=\"'checkbox'\"\n      tabindex=\"0\"\n      [attr.aria-checked]=\"isChecked()\"\n      [attr.aria-disabled]=\"disabledOrReadonly()\"\n      [attr.aria-labelledby]=\"Id() + '-label'\"\n      [ngClass]=\"[\n        sizeClass(),\n        palette().checkboxTextPalette.checkBoxText,\n        palette().checkboxTextPalette.checkBoxTextHover,\n        palette().ringPalette.ring,\n        'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2 zs:transition-colors'\n      ]\"\n      (click)=\"toggleChecked()\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <i [class]=\"iconClasses()\"></i>\n    </span>\n  </div>\n\n  <!-- ===================== Label (ZS-label component) ===================== -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1.5' : ''\"\n    [id]=\"Id() + '-label'\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [hintId]=\"Id() + '-hint'\"\n    [size]=\"size()\"\n    [for]=\"Id()\"\n  ></ZS-label>\n</div>", styles: [""], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Checkbox, isStandalone: true, selector: "ZS-checkbox", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n  <!-- ===================== Checkbox Wrapper ===================== -->\n  <div\n    class=\"zs:cursor-pointer group leading-none\"\n  >\n    <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n    <input\n      type=\"checkbox\"\n      class=\"zs:hidden\"\n      [id]=\"Id()\"\n      [checked]=\"isChecked()\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"toggleChecked()\"\n    />\n\n    <!-- ===================== Custom Accessible Checkbox ===================== -->\n    <span\n      role=\"'checkbox'\"\n      tabindex=\"0\"\n      [attr.aria-checked]=\"isChecked()\"\n      [attr.aria-disabled]=\"disabledOrReadonly()\"\n      [attr.aria-labelledby]=\"Id() + '-label'\"\n      [ngClass]=\"[\n        sizeClass(),\n        palette().checkboxTextPalette.checkBoxText,\n        palette().checkboxTextPalette.checkBoxTextHover,\n        palette().ringPalette.ring,\n        'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2'\n      ]\"\n      (click)=\"toggleChecked()\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <i [class]=\"iconClasses()\"></i>\n    </span>\n  </div>\n\n  <!-- ===================== Label (ZS-label component) ===================== -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1.5' : ''\"\n    [id]=\"Id() + '-label'\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [hintId]=\"Id() + '-hint'\"\n    [size]=\"size()\"\n    [for]=\"Id()\"\n  ></ZS-label>\n</div>", styles: [""], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { 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: Checkbox, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-checkbox', imports: [Label, CommonModule], template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n  <!-- ===================== Checkbox Wrapper ===================== -->\n  <div\n    class=\"zs:cursor-pointer group leading-none\"\n  >\n    <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n    <input\n      type=\"checkbox\"\n      class=\"zs:hidden\"\n      [id]=\"Id()\"\n      [checked]=\"isChecked()\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"toggleChecked()\"\n    />\n\n    <!-- ===================== Custom Accessible Checkbox ===================== -->\n    <span\n      role=\"'checkbox'\"\n      tabindex=\"0\"\n      [attr.aria-checked]=\"isChecked()\"\n      [attr.aria-disabled]=\"disabledOrReadonly()\"\n      [attr.aria-labelledby]=\"Id() + '-label'\"\n      [ngClass]=\"[\n        sizeClass(),\n        palette().checkboxTextPalette.checkBoxText,\n        palette().checkboxTextPalette.checkBoxTextHover,\n        palette().ringPalette.ring,\n        'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2 zs:transition-colors'\n      ]\"\n      (click)=\"toggleChecked()\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <i [class]=\"iconClasses()\"></i>\n    </span>\n  </div>\n\n  <!-- ===================== Label (ZS-label component) ===================== -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1.5' : ''\"\n    [id]=\"Id() + '-label'\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [hintId]=\"Id() + '-hint'\"\n    [size]=\"size()\"\n    [for]=\"Id()\"\n  ></ZS-label>\n</div>" }]
+            args: [{ selector: 'ZS-checkbox', imports: [Label, CommonModule], template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n  <!-- ===================== Checkbox Wrapper ===================== -->\n  <div\n    class=\"zs:cursor-pointer group leading-none\"\n  >\n    <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n    <input\n      type=\"checkbox\"\n      class=\"zs:hidden\"\n      [id]=\"Id()\"\n      [checked]=\"isChecked()\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"toggleChecked()\"\n    />\n\n    <!-- ===================== Custom Accessible Checkbox ===================== -->\n    <span\n      role=\"'checkbox'\"\n      tabindex=\"0\"\n      [attr.aria-checked]=\"isChecked()\"\n      [attr.aria-disabled]=\"disabledOrReadonly()\"\n      [attr.aria-labelledby]=\"Id() + '-label'\"\n      [ngClass]=\"[\n        sizeClass(),\n        palette().checkboxTextPalette.checkBoxText,\n        palette().checkboxTextPalette.checkBoxTextHover,\n        palette().ringPalette.ring,\n        'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2'\n      ]\"\n      (click)=\"toggleChecked()\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <i [class]=\"iconClasses()\"></i>\n    </span>\n  </div>\n\n  <!-- ===================== Label (ZS-label component) ===================== -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1.5' : ''\"\n    [id]=\"Id() + '-label'\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [hintId]=\"Id() + '-hint'\"\n    [size]=\"size()\"\n    [for]=\"Id()\"\n  ></ZS-label>\n</div>" }]
         }], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 // ==============================================================================
@@ -2435,11 +2435,11 @@ class FileInput {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FileInput, isStandalone: true, selector: "ZS-file", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, iName: { classPropertyName: "iName", publicName: "iName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, allowPreview: { classPropertyName: "allowPreview", publicName: "allowPreview", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeEv: "changeEv", files: "filesChange", touched: "touchedChange" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n  [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"Id() + '-label'\"\n  [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n  <!-- ========================= Label & Hint ========================= -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id()\"\n    [id]=\"Id() + '-label'\"\n  >\n  </ZS-label>\n\n  <!-- ================= Input ================= -->\n  <div\n    [class]=\"[\n      'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center zs:items-center zs:gap-2 zs:border-2 zs:border-dashed zs:transition-all zs:duration-200',\n      palette().inputPalette.border,\n      palette().ringPalette.ring,\n      palette().inputPalette.borderHover,\n      palette().inputPalette.inputBg\n    ].join(' ')\"\n    [ngClass]=\"disabledOrReadonly() ? 'cursor-not-allowed' : 'cursor-pointer'\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-disabled]=\"disabledOrReadonly()\"\n    [attr.aria-label]=\"placeholder() || 'Upload file'\"\n    (keydown.enter)=\"!disabledOrReadonly() && fileInput.click()\"\n    (keydown.space)=\"!disabledOrReadonly() && fileInput.click()\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      [id]=\"Id()\"\n      [name]=\"iName()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? '' : null\"\n      [attr.autofocus]=\"autofocus() ? true : null\"\n      class=\"zs:absolute zs:inset-0 zs:opacity-0 zs:cursor-pointer\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"handleFileChange($event)\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"!!error().length\"\n      [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n    />\n\n    <div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:text-center zs:p-6 zs:pointer-events-none zs:select-none\">\n      <i class=\"fa-solid fa-upload text-3xl mb-2\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n      <p class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\">\n        {{ placeholder() }}\n      </p>\n    </div>\n  </div>\n\n  <!-- ================= Files Preview ================= -->\n  @if (hasFiles()) {\n    <div\n      class=\"zs:flex zs:flex-col zs:gap-2 zs:mt-3\"\n      role=\"list\"\n      aria-label=\"Uploaded files\"\n    >\n      @for (entry of files().entries(); track entry[0]) {\n        <div\n          class=\"zs:flex zs:flex-col zs:gap-1 zs:p-2 zs:rounded-lg zs:border zs:transition-colors zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-offset-2\"\n          [ngClass]=\"[palette().inputPalette.border, palette().inputPalette.inputBg]\"\n          role=\"listitem\"\n          tabindex=\"0\"\n        >\n          <span class=\"zs:block zs:text-sm zs:font-medium zs:truncate\">\n            {{ entry[1].name }}\n          </span>\n\n          <div class=\"zs:flex zs:items-center zs:justify-between zs:gap-4\">\n            <div class=\"zs:flex zs:items-center zs:gap-1\">\n              <i class=\"text-lg fa-solid fa-file zs:transition-colors\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n              <span class=\"zs:text-xs zs:text-gray-500\">\n                {{ formatSize(entry[1].size) }}\n              </span>\n            </div>\n\n            <div class=\"zs:flex zs:gap-2\">\n              @if (allowPreview() && entry[1].url?.startsWith('blob:')) {\n                <ZS-button\n                  type=\"button\"\n                  (clickedEv)=\"preview(entry[1].url)\"\n                  [btnStyle]=\"inputStyle()\"\n                  size=\"sm\"\n                  aria-label=\"Preview {{ entry[1].name }}\"\n                >\n                  Preview\n                </ZS-button>\n              }\n\n              @if (!disabledOrReadonly()) {\n                <ZS-button\n                  type=\"button\"\n                  variant=\"outline\"\n                  btnStyle=\"danger\"\n                  (clickedEv)=\"removeFile(entry[0])\"\n                  icon=\"fa-solid fa-trash\"\n                  aria-label=\"Remove {{ entry[1].name }}\"\n                >\n                </ZS-button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n    [Id]=\"Id() + '-error'\"\n    [errors]=\"[error()]\"\n    aria-live=\"assertive\"\n    role=\"alert\"\n  >\n  </ZS-input-errors>\n</div>\n", styles: [":host{@apply block w-full;}input[type=file]:disabled{@apply cursor-not-allowed opacity-60;}\n"], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FileInput, isStandalone: true, selector: "ZS-file", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, iName: { classPropertyName: "iName", publicName: "iName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, allowPreview: { classPropertyName: "allowPreview", publicName: "allowPreview", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeEv: "changeEv", files: "filesChange", touched: "touchedChange" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n  [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"Id() + '-label'\"\n  [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n  <!-- ========================= Label & Hint ========================= -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id()\"\n    [id]=\"Id() + '-label'\"\n  >\n  </ZS-label>\n\n  <!-- ================= Input ================= -->\n  <div\n    [class]=\"[\n      'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center \n      zs:items-center zs:gap-2 zs:border-2 zs:border-dashed \n      zs:transition-[border-color,background-color,box-shadow] \n      zs:duration-200',\n      palette().inputPalette.border,\n      palette().ringPalette.ring,\n      palette().inputPalette.borderHover,\n      palette().inputPalette.inputBg\n    ].join(' ')\"\n    [ngClass]=\"disabledOrReadonly() ? 'cursor-not-allowed' : 'cursor-pointer'\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-disabled]=\"disabledOrReadonly()\"\n    [attr.aria-label]=\"placeholder() || 'Upload file'\"\n    (keydown.enter)=\"!disabledOrReadonly() && fileInput.click()\"\n    (keydown.space)=\"!disabledOrReadonly() && fileInput.click()\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      [id]=\"Id()\"\n      [name]=\"iName()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? '' : null\"\n      [attr.autofocus]=\"autofocus() ? true : null\"\n      class=\"zs:absolute zs:inset-0 zs:opacity-0 zs:cursor-pointer\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"handleFileChange($event)\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"!!error().length\"\n      [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n    />\n\n    <div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:text-center zs:p-6 zs:pointer-events-none zs:select-none\">\n      <i class=\"fa-solid fa-upload text-3xl mb-2\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n      <p class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n        {{ placeholder() }}\n      </p>\n    </div>\n  </div>\n\n  <!-- ================= Files Preview ================= -->\n  @if (hasFiles()) {\n    <div\n      class=\"zs:flex zs:flex-col zs:gap-2 zs:mt-3\"\n      role=\"list\"\n      aria-label=\"Uploaded files\"\n    >\n      @for (entry of files().entries(); track entry[0]) {\n        <div\n          class=\"zs:flex zs:flex-col zs:gap-1 zs:p-2 zs:rounded-lg zs:border zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-offset-2\"\n          [ngClass]=\"[palette().inputPalette.border, palette().inputPalette.inputBg]\"\n          role=\"listitem\"\n          tabindex=\"0\"\n        >\n          <span class=\"zs:block zs:text-sm zs:font-medium zs:truncate\">\n            {{ entry[1].name }}\n          </span>\n\n          <div class=\"zs:flex zs:items-center zs:justify-between zs:gap-4\">\n            <div class=\"zs:flex zs:items-center zs:gap-1\">\n              <i class=\"text-lg fa-solid fa-file\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n              <span class=\"zs:text-xs zs:text-gray-500\">\n                {{ formatSize(entry[1].size) }}\n              </span>\n            </div>\n\n            <div class=\"zs:flex zs:gap-2\">\n              @if (allowPreview() && entry[1].url?.startsWith('blob:')) {\n                <ZS-button\n                  type=\"button\"\n                  (clickedEv)=\"preview(entry[1].url)\"\n                  [btnStyle]=\"inputStyle()\"\n                  size=\"sm\"\n                  aria-label=\"Preview {{ entry[1].name }}\"\n                >\n                  Preview\n                </ZS-button>\n              }\n\n              @if (!disabledOrReadonly()) {\n                <ZS-button\n                  type=\"button\"\n                  variant=\"outline\"\n                  btnStyle=\"danger\"\n                  (clickedEv)=\"removeFile(entry[0])\"\n                  icon=\"fa-solid fa-trash\"\n                  aria-label=\"Remove {{ entry[1].name }}\"\n                >\n                </ZS-button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n    [Id]=\"Id() + '-error'\"\n    [errors]=\"[error()]\"\n    aria-live=\"assertive\"\n    role=\"alert\"\n  >\n  </ZS-input-errors>\n</div>\n", styles: [":host{@apply block w-full;}input[type=file]:disabled{@apply cursor-not-allowed opacity-60;}\n"], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileInput, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-file', imports: [Label, InputErrors, CommonModule, Button], template: "<div\n  class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n  [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"Id() + '-label'\"\n  [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n  <!-- ========================= Label & Hint ========================= -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id()\"\n    [id]=\"Id() + '-label'\"\n  >\n  </ZS-label>\n\n  <!-- ================= Input ================= -->\n  <div\n    [class]=\"[\n      'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center zs:items-center zs:gap-2 zs:border-2 zs:border-dashed zs:transition-all zs:duration-200',\n      palette().inputPalette.border,\n      palette().ringPalette.ring,\n      palette().inputPalette.borderHover,\n      palette().inputPalette.inputBg\n    ].join(' ')\"\n    [ngClass]=\"disabledOrReadonly() ? 'cursor-not-allowed' : 'cursor-pointer'\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-disabled]=\"disabledOrReadonly()\"\n    [attr.aria-label]=\"placeholder() || 'Upload file'\"\n    (keydown.enter)=\"!disabledOrReadonly() && fileInput.click()\"\n    (keydown.space)=\"!disabledOrReadonly() && fileInput.click()\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      [id]=\"Id()\"\n      [name]=\"iName()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? '' : null\"\n      [attr.autofocus]=\"autofocus() ? true : null\"\n      class=\"zs:absolute zs:inset-0 zs:opacity-0 zs:cursor-pointer\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"handleFileChange($event)\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"!!error().length\"\n      [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n    />\n\n    <div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:text-center zs:p-6 zs:pointer-events-none zs:select-none\">\n      <i class=\"fa-solid fa-upload text-3xl mb-2\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n      <p class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\">\n        {{ placeholder() }}\n      </p>\n    </div>\n  </div>\n\n  <!-- ================= Files Preview ================= -->\n  @if (hasFiles()) {\n    <div\n      class=\"zs:flex zs:flex-col zs:gap-2 zs:mt-3\"\n      role=\"list\"\n      aria-label=\"Uploaded files\"\n    >\n      @for (entry of files().entries(); track entry[0]) {\n        <div\n          class=\"zs:flex zs:flex-col zs:gap-1 zs:p-2 zs:rounded-lg zs:border zs:transition-colors zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-offset-2\"\n          [ngClass]=\"[palette().inputPalette.border, palette().inputPalette.inputBg]\"\n          role=\"listitem\"\n          tabindex=\"0\"\n        >\n          <span class=\"zs:block zs:text-sm zs:font-medium zs:truncate\">\n            {{ entry[1].name }}\n          </span>\n\n          <div class=\"zs:flex zs:items-center zs:justify-between zs:gap-4\">\n            <div class=\"zs:flex zs:items-center zs:gap-1\">\n              <i class=\"text-lg fa-solid fa-file zs:transition-colors\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n              <span class=\"zs:text-xs zs:text-gray-500\">\n                {{ formatSize(entry[1].size) }}\n              </span>\n            </div>\n\n            <div class=\"zs:flex zs:gap-2\">\n              @if (allowPreview() && entry[1].url?.startsWith('blob:')) {\n                <ZS-button\n                  type=\"button\"\n                  (clickedEv)=\"preview(entry[1].url)\"\n                  [btnStyle]=\"inputStyle()\"\n                  size=\"sm\"\n                  aria-label=\"Preview {{ entry[1].name }}\"\n                >\n                  Preview\n                </ZS-button>\n              }\n\n              @if (!disabledOrReadonly()) {\n                <ZS-button\n                  type=\"button\"\n                  variant=\"outline\"\n                  btnStyle=\"danger\"\n                  (clickedEv)=\"removeFile(entry[0])\"\n                  icon=\"fa-solid fa-trash\"\n                  aria-label=\"Remove {{ entry[1].name }}\"\n                >\n                </ZS-button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n    [Id]=\"Id() + '-error'\"\n    [errors]=\"[error()]\"\n    aria-live=\"assertive\"\n    role=\"alert\"\n  >\n  </ZS-input-errors>\n</div>\n", styles: [":host{@apply block w-full;}input[type=file]:disabled{@apply cursor-not-allowed opacity-60;}\n"] }]
+            args: [{ selector: 'ZS-file', imports: [Label, InputErrors, CommonModule, Button], template: "<div\n  class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n  [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"Id() + '-label'\"\n  [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n  <!-- ========================= Label & Hint ========================= -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id()\"\n    [id]=\"Id() + '-label'\"\n  >\n  </ZS-label>\n\n  <!-- ================= Input ================= -->\n  <div\n    [class]=\"[\n      'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center \n      zs:items-center zs:gap-2 zs:border-2 zs:border-dashed \n      zs:transition-[border-color,background-color,box-shadow] \n      zs:duration-200',\n      palette().inputPalette.border,\n      palette().ringPalette.ring,\n      palette().inputPalette.borderHover,\n      palette().inputPalette.inputBg\n    ].join(' ')\"\n    [ngClass]=\"disabledOrReadonly() ? 'cursor-not-allowed' : 'cursor-pointer'\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-disabled]=\"disabledOrReadonly()\"\n    [attr.aria-label]=\"placeholder() || 'Upload file'\"\n    (keydown.enter)=\"!disabledOrReadonly() && fileInput.click()\"\n    (keydown.space)=\"!disabledOrReadonly() && fileInput.click()\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      [id]=\"Id()\"\n      [name]=\"iName()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? '' : null\"\n      [attr.autofocus]=\"autofocus() ? true : null\"\n      class=\"zs:absolute zs:inset-0 zs:opacity-0 zs:cursor-pointer\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"handleFileChange($event)\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"!!error().length\"\n      [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n    />\n\n    <div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:text-center zs:p-6 zs:pointer-events-none zs:select-none\">\n      <i class=\"fa-solid fa-upload text-3xl mb-2\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n      <p class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n        {{ placeholder() }}\n      </p>\n    </div>\n  </div>\n\n  <!-- ================= Files Preview ================= -->\n  @if (hasFiles()) {\n    <div\n      class=\"zs:flex zs:flex-col zs:gap-2 zs:mt-3\"\n      role=\"list\"\n      aria-label=\"Uploaded files\"\n    >\n      @for (entry of files().entries(); track entry[0]) {\n        <div\n          class=\"zs:flex zs:flex-col zs:gap-1 zs:p-2 zs:rounded-lg zs:border zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-offset-2\"\n          [ngClass]=\"[palette().inputPalette.border, palette().inputPalette.inputBg]\"\n          role=\"listitem\"\n          tabindex=\"0\"\n        >\n          <span class=\"zs:block zs:text-sm zs:font-medium zs:truncate\">\n            {{ entry[1].name }}\n          </span>\n\n          <div class=\"zs:flex zs:items-center zs:justify-between zs:gap-4\">\n            <div class=\"zs:flex zs:items-center zs:gap-1\">\n              <i class=\"text-lg fa-solid fa-file\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n              <span class=\"zs:text-xs zs:text-gray-500\">\n                {{ formatSize(entry[1].size) }}\n              </span>\n            </div>\n\n            <div class=\"zs:flex zs:gap-2\">\n              @if (allowPreview() && entry[1].url?.startsWith('blob:')) {\n                <ZS-button\n                  type=\"button\"\n                  (clickedEv)=\"preview(entry[1].url)\"\n                  [btnStyle]=\"inputStyle()\"\n                  size=\"sm\"\n                  aria-label=\"Preview {{ entry[1].name }}\"\n                >\n                  Preview\n                </ZS-button>\n              }\n\n              @if (!disabledOrReadonly()) {\n                <ZS-button\n                  type=\"button\"\n                  variant=\"outline\"\n                  btnStyle=\"danger\"\n                  (clickedEv)=\"removeFile(entry[0])\"\n                  icon=\"fa-solid fa-trash\"\n                  aria-label=\"Remove {{ entry[1].name }}\"\n                >\n                </ZS-button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n    [Id]=\"Id() + '-error'\"\n    [errors]=\"[error()]\"\n    aria-live=\"assertive\"\n    role=\"alert\"\n  >\n  </ZS-input-errors>\n</div>\n", styles: [":host{@apply block w-full;}input[type=file]:disabled{@apply cursor-not-allowed opacity-60;}\n"] }]
         }], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], iName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iName", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], validateFns: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateFns", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], allowPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowPreview", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], changeEv: [{ type: i0.Output, args: ["changeEv"] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 // ==============================================================================
@@ -2554,7 +2554,7 @@ class Input {
     // ==============================================================================
     disabledOrReadonly = computed(() => this.disabled() || this.isReadonly(), ...(ngDevMode ? [{ debugName: "disabledOrReadonly" }] : []));
     containerClasses = computed(() => {
-        const baseClasses = 'zs:border zs:transition-all zs:duration-150 zs:focus-within:ring-2';
+        const baseClasses = 'zs:border zs:transition-[border-color,background-color,box-shadow,opacity] zs:duration-150 zs:ease-out zs:focus-within:ring-2 motion-reduce:zs:transition-none';
         const hasError = this.error().length;
         let styleConfig = inputPaletteMap.get(this.inputStyle());
         let ringConfig = ringPaletteMap.get(this.inputStyle());
@@ -2775,11 +2775,11 @@ class Input {
         this.changedEv.emit({ value, valid, fromForce });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Input, isStandalone: true, selector: "ZS-input", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, iName: { classPropertyName: "iName", publicName: "iName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, showLoaderIconOnSearchInput: { classPropertyName: "showLoaderIconOnSearchInput", publicName: "showLoaderIconOnSearchInput", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, formatFn: { classPropertyName: "formatFn", publicName: "formatFn", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceDelay: { classPropertyName: "searchDebounceDelay", publicName: "searchDebounceDelay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", enterEv: "enterEv", focusEv: "focusEv", blurEv: "blurEv", changedEv: "changedEv", searchEv: "searchEv", clearedEv: "clearedEv", keydownEv: "keydownEv" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ==============================================\n     Input Field Component (ZS-Input)\n     ============================================== -->\n\n<div class=\"zs:w-full\">\n\n  <!-- ========================= Label & Hint ========================= -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [size]=\"size()\"\n    [for]=\"Id()\"\n  >\n  </ZS-label>\n\n  <!-- ========================= Input Container ========================= -->\n  <div\n    class=\"zs:relative zs:flex zs:items-center zs:w-full zs:transition-colors\"\n    [class]=\"containerClasses() + ' ' + getSize('container')\"\n    (click)=\"focusInput($event)\"\n  >\n\n    <!-- ========================= Left Icon ========================= -->\n    @if (icon() || loaderIconOnSearchInput() || isDate()) {\n      <i\n        [ngClass]=\"(\n          loaderIconOnSearchInput()\n            ? loaderIconOnSearchInput()\n            : \n            icon() ? icon() : dateIcon()\n        ) + ' ' + getSize('leftIcon')\"\n        aria-hidden=\"true\"\n      ></i>\n    }\n\n    <!-- ========================= Input Field ========================= -->\n    <input\n      #inputEl\n      [id]=\"Id()\"\n      [name]=\"iName()\"\n      [type]=\"actualType\"\n      [attr.placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled() ? true : null\"\n      [attr.min]=\"supportsMinMaxStep() ? min() : null\"\n      [attr.max]=\"supportsMinMaxStep() ? max() : null\"\n      [attr.step]=\"supportsMinMaxStep() ? step() : null\"\n      [attr.required]=\"required() ? true : null\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"onEnter()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (change)=\"onChange()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.minlength]=\"minlength()\"\n      [attr.autofocus]=\"autofocus() ? true : null\"\n      [attr.readonly]=\"isReadonly() ? true : null\"\n      [attr.aria-invalid]=\"!!error()\"\n      [attr.inputmode]=\"inputmode()\"\n      [spellcheck]=\"spellcheck()\"\n      class=\"zs:flex-1 zs:bg-transparent zs:outline-hidden zs:caret-current zs:w-full\"\n      [class]=\"getSize('field')\"\n      [attr.aria-describedby]=\"\n        (hint() ? Id() + '-hint' : '') +\n        (hint() && error() ? ' ' : '') +\n        (error() ? Id() + '-error' : '')\n      \"\n    />\n\n    <!-- ========================= Spacer (Maintains Height) ========================= -->\n    <div class=\"zs:h-6\"></div>\n\n    <!-- ========================= Password Toggle ========================= -->\n    @if (type() === 'password') {\n      <button\n        type=\"button\"\n        (click)=\"togglePassword()\"\n        [attr.aria-pressed]=\"showPassword()\"\n        class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n        zs:dark:text-slate-400 zs:dark:hover:text-slate-200 zs:transition-colors\"\n        [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\"\n      >\n        <i\n          class=\"fa\"\n          [class]=\"(showPassword() ? 'fa-eye-slash' : 'fa-eye') + ' ' + getSize('rightIcon')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n    <!-- ========================= Clear Button ========================= -->\n    @if (showClear() && !disabledOrReadonly()) {\n      <button\n        type=\"button\"\n        (click)=\"clear()\"\n        class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n        zs:dark:text-slate-400 zs:dark:hover:text-slate-200 zs:transition-colors\"\n        [attr.aria-label]=\"'Clear ' + (label() || 'input')\"\n      >\n        <i\n          class=\"fa fa-times\"\n          [class]=\"getSize('rightIcon')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n    <!-- ========================= Search Icon ========================= -->\n    @if (type() === 'search' || showSearchIcon()) {\n      <button\n        type=\"button\"\n        (click)=\"onSearch()\"\n        class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n        zs:dark:text-slate-400 zs:dark:hover:text-slate-200 zs:transition-colors\"\n        aria-label=\"Search\"\n      >\n        <i\n          class=\"fa fa-search\"\n          [class]=\"getSize('rightIcon')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n  </div>\n\n  <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n  [Id]=\"Id()\"\n  [errors]=\"[error()]\"\n  >\n  </ZS-input-errors>\n\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Input, isStandalone: true, selector: "ZS-input", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, iName: { classPropertyName: "iName", publicName: "iName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, showLoaderIconOnSearchInput: { classPropertyName: "showLoaderIconOnSearchInput", publicName: "showLoaderIconOnSearchInput", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, formatFn: { classPropertyName: "formatFn", publicName: "formatFn", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceDelay: { classPropertyName: "searchDebounceDelay", publicName: "searchDebounceDelay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", enterEv: "enterEv", focusEv: "focusEv", blurEv: "blurEv", changedEv: "changedEv", searchEv: "searchEv", clearedEv: "clearedEv", keydownEv: "keydownEv" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ==============================================\n     Input Field Component (ZS-Input)\n     ============================================== -->\n\n<div class=\"zs:w-full\">\n\n  <!-- ========================= Label & Hint ========================= -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [size]=\"size()\"\n    [for]=\"Id()\"\n  >\n  </ZS-label>\n\n  <!-- ========================= Input Container ========================= -->\n  <div\n    class=\"zs:relative zs:flex zs:items-center zs:w-full\"\n    [class]=\"containerClasses() + ' ' + getSize('container')\"\n    (click)=\"focusInput($event)\"\n  >\n\n    <!-- ========================= Left Icon ========================= -->\n    @if (icon() || loaderIconOnSearchInput() || isDate()) {\n      <i\n        [ngClass]=\"(\n          loaderIconOnSearchInput()\n            ? loaderIconOnSearchInput()\n            : \n            icon() ? icon() : dateIcon()\n        ) + ' ' + getSize('leftIcon')\"\n        aria-hidden=\"true\"\n      ></i>\n    }\n\n    <!-- ========================= Input Field ========================= -->\n    <input\n      #inputEl\n      [id]=\"Id()\"\n      [name]=\"iName()\"\n      [type]=\"actualType\"\n      [attr.placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled() ? true : null\"\n      [attr.min]=\"supportsMinMaxStep() ? min() : null\"\n      [attr.max]=\"supportsMinMaxStep() ? max() : null\"\n      [attr.step]=\"supportsMinMaxStep() ? step() : null\"\n      [attr.required]=\"required() ? true : null\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"onEnter()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (change)=\"onChange()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.minlength]=\"minlength()\"\n      [attr.autofocus]=\"autofocus() ? true : null\"\n      [attr.readonly]=\"isReadonly() ? true : null\"\n      [attr.aria-invalid]=\"!!error()\"\n      [attr.inputmode]=\"inputmode()\"\n      [spellcheck]=\"spellcheck()\"\n      class=\"zs:flex-1 zs:bg-transparent zs:outline-hidden zs:caret-current zs:w-full\"\n      [class]=\"getSize('field')\"\n      [attr.aria-describedby]=\"\n        (hint() ? Id() + '-hint' : '') +\n        (hint() && error() ? ' ' : '') +\n        (error() ? Id() + '-error' : '')\n      \"\n    />\n\n    <!-- ========================= Spacer (Maintains Height) ========================= -->\n    <div class=\"zs:h-6\"></div>\n\n    <!-- ========================= Password Toggle ========================= -->\n    @if (type() === 'password') {\n      <button\n        type=\"button\"\n        (click)=\"togglePassword()\"\n        [attr.aria-pressed]=\"showPassword()\"\n        class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n        zs:dark:text-slate-400 zs:dark:hover:text-slate-200\"\n        [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\"\n      >\n        <i\n          class=\"fa\"\n          [class]=\"(showPassword() ? 'fa-eye-slash' : 'fa-eye') + ' ' + getSize('rightIcon')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n    <!-- ========================= Clear Button ========================= -->\n    @if (showClear() && !disabledOrReadonly()) {\n      <button\n        type=\"button\"\n        (click)=\"clear()\"\n        class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n        zs:dark:text-slate-400 zs:dark:hover:text-slate-200\"\n        [attr.aria-label]=\"'Clear ' + (label() || 'input')\"\n      >\n        <i\n          class=\"fa fa-times\"\n          [class]=\"getSize('rightIcon')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n    <!-- ========================= Search Icon ========================= -->\n    @if (type() === 'search' || showSearchIcon()) {\n      <button\n        type=\"button\"\n        (click)=\"onSearch()\"\n        class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n        zs:dark:text-slate-400 zs:dark:hover:text-slate-200\"\n        aria-label=\"Search\"\n      >\n        <i\n          class=\"fa fa-search\"\n          [class]=\"getSize('rightIcon')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n  </div>\n\n  <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n  [Id]=\"Id()\"\n  [errors]=\"[error()]\"\n  >\n  </ZS-input-errors>\n\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Input, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-input', imports: [CommonModule, Label, InputErrors], template: "<!-- ==============================================\n     Input Field Component (ZS-Input)\n     ============================================== -->\n\n<div class=\"zs:w-full\">\n\n  <!-- ========================= Label & Hint ========================= -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [size]=\"size()\"\n    [for]=\"Id()\"\n  >\n  </ZS-label>\n\n  <!-- ========================= Input Container ========================= -->\n  <div\n    class=\"zs:relative zs:flex zs:items-center zs:w-full zs:transition-colors\"\n    [class]=\"containerClasses() + ' ' + getSize('container')\"\n    (click)=\"focusInput($event)\"\n  >\n\n    <!-- ========================= Left Icon ========================= -->\n    @if (icon() || loaderIconOnSearchInput() || isDate()) {\n      <i\n        [ngClass]=\"(\n          loaderIconOnSearchInput()\n            ? loaderIconOnSearchInput()\n            : \n            icon() ? icon() : dateIcon()\n        ) + ' ' + getSize('leftIcon')\"\n        aria-hidden=\"true\"\n      ></i>\n    }\n\n    <!-- ========================= Input Field ========================= -->\n    <input\n      #inputEl\n      [id]=\"Id()\"\n      [name]=\"iName()\"\n      [type]=\"actualType\"\n      [attr.placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled() ? true : null\"\n      [attr.min]=\"supportsMinMaxStep() ? min() : null\"\n      [attr.max]=\"supportsMinMaxStep() ? max() : null\"\n      [attr.step]=\"supportsMinMaxStep() ? step() : null\"\n      [attr.required]=\"required() ? true : null\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"onEnter()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (change)=\"onChange()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.minlength]=\"minlength()\"\n      [attr.autofocus]=\"autofocus() ? true : null\"\n      [attr.readonly]=\"isReadonly() ? true : null\"\n      [attr.aria-invalid]=\"!!error()\"\n      [attr.inputmode]=\"inputmode()\"\n      [spellcheck]=\"spellcheck()\"\n      class=\"zs:flex-1 zs:bg-transparent zs:outline-hidden zs:caret-current zs:w-full\"\n      [class]=\"getSize('field')\"\n      [attr.aria-describedby]=\"\n        (hint() ? Id() + '-hint' : '') +\n        (hint() && error() ? ' ' : '') +\n        (error() ? Id() + '-error' : '')\n      \"\n    />\n\n    <!-- ========================= Spacer (Maintains Height) ========================= -->\n    <div class=\"zs:h-6\"></div>\n\n    <!-- ========================= Password Toggle ========================= -->\n    @if (type() === 'password') {\n      <button\n        type=\"button\"\n        (click)=\"togglePassword()\"\n        [attr.aria-pressed]=\"showPassword()\"\n        class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n        zs:dark:text-slate-400 zs:dark:hover:text-slate-200 zs:transition-colors\"\n        [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\"\n      >\n        <i\n          class=\"fa\"\n          [class]=\"(showPassword() ? 'fa-eye-slash' : 'fa-eye') + ' ' + getSize('rightIcon')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n    <!-- ========================= Clear Button ========================= -->\n    @if (showClear() && !disabledOrReadonly()) {\n      <button\n        type=\"button\"\n        (click)=\"clear()\"\n        class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n        zs:dark:text-slate-400 zs:dark:hover:text-slate-200 zs:transition-colors\"\n        [attr.aria-label]=\"'Clear ' + (label() || 'input')\"\n      >\n        <i\n          class=\"fa fa-times\"\n          [class]=\"getSize('rightIcon')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n    <!-- ========================= Search Icon ========================= -->\n    @if (type() === 'search' || showSearchIcon()) {\n      <button\n        type=\"button\"\n        (click)=\"onSearch()\"\n        class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n        zs:dark:text-slate-400 zs:dark:hover:text-slate-200 zs:transition-colors\"\n        aria-label=\"Search\"\n      >\n        <i\n          class=\"fa fa-search\"\n          [class]=\"getSize('rightIcon')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n  </div>\n\n  <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n  [Id]=\"Id()\"\n  [errors]=\"[error()]\"\n  >\n  </ZS-input-errors>\n\n</div>" }]
+            args: [{ selector: 'ZS-input', imports: [CommonModule, Label, InputErrors], template: "<!-- ==============================================\n     Input Field Component (ZS-Input)\n     ============================================== -->\n\n<div class=\"zs:w-full\">\n\n  <!-- ========================= Label & Hint ========================= -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [size]=\"size()\"\n    [for]=\"Id()\"\n  >\n  </ZS-label>\n\n  <!-- ========================= Input Container ========================= -->\n  <div\n    class=\"zs:relative zs:flex zs:items-center zs:w-full\"\n    [class]=\"containerClasses() + ' ' + getSize('container')\"\n    (click)=\"focusInput($event)\"\n  >\n\n    <!-- ========================= Left Icon ========================= -->\n    @if (icon() || loaderIconOnSearchInput() || isDate()) {\n      <i\n        [ngClass]=\"(\n          loaderIconOnSearchInput()\n            ? loaderIconOnSearchInput()\n            : \n            icon() ? icon() : dateIcon()\n        ) + ' ' + getSize('leftIcon')\"\n        aria-hidden=\"true\"\n      ></i>\n    }\n\n    <!-- ========================= Input Field ========================= -->\n    <input\n      #inputEl\n      [id]=\"Id()\"\n      [name]=\"iName()\"\n      [type]=\"actualType\"\n      [attr.placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled() ? true : null\"\n      [attr.min]=\"supportsMinMaxStep() ? min() : null\"\n      [attr.max]=\"supportsMinMaxStep() ? max() : null\"\n      [attr.step]=\"supportsMinMaxStep() ? step() : null\"\n      [attr.required]=\"required() ? true : null\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"onEnter()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (change)=\"onChange()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.minlength]=\"minlength()\"\n      [attr.autofocus]=\"autofocus() ? true : null\"\n      [attr.readonly]=\"isReadonly() ? true : null\"\n      [attr.aria-invalid]=\"!!error()\"\n      [attr.inputmode]=\"inputmode()\"\n      [spellcheck]=\"spellcheck()\"\n      class=\"zs:flex-1 zs:bg-transparent zs:outline-hidden zs:caret-current zs:w-full\"\n      [class]=\"getSize('field')\"\n      [attr.aria-describedby]=\"\n        (hint() ? Id() + '-hint' : '') +\n        (hint() && error() ? ' ' : '') +\n        (error() ? Id() + '-error' : '')\n      \"\n    />\n\n    <!-- ========================= Spacer (Maintains Height) ========================= -->\n    <div class=\"zs:h-6\"></div>\n\n    <!-- ========================= Password Toggle ========================= -->\n    @if (type() === 'password') {\n      <button\n        type=\"button\"\n        (click)=\"togglePassword()\"\n        [attr.aria-pressed]=\"showPassword()\"\n        class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n        zs:dark:text-slate-400 zs:dark:hover:text-slate-200\"\n        [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\"\n      >\n        <i\n          class=\"fa\"\n          [class]=\"(showPassword() ? 'fa-eye-slash' : 'fa-eye') + ' ' + getSize('rightIcon')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n    <!-- ========================= Clear Button ========================= -->\n    @if (showClear() && !disabledOrReadonly()) {\n      <button\n        type=\"button\"\n        (click)=\"clear()\"\n        class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n        zs:dark:text-slate-400 zs:dark:hover:text-slate-200\"\n        [attr.aria-label]=\"'Clear ' + (label() || 'input')\"\n      >\n        <i\n          class=\"fa fa-times\"\n          [class]=\"getSize('rightIcon')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n    <!-- ========================= Search Icon ========================= -->\n    @if (type() === 'search' || showSearchIcon()) {\n      <button\n        type=\"button\"\n        (click)=\"onSearch()\"\n        class=\"zs:ml-1 zs:px-1 zs:text-slate-500 zs:hover:text-slate-700 \n        zs:dark:text-slate-400 zs:dark:hover:text-slate-200\"\n        aria-label=\"Search\"\n      >\n        <i\n          class=\"fa fa-search\"\n          [class]=\"getSize('rightIcon')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n  </div>\n\n  <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n  [Id]=\"Id()\"\n  [errors]=\"[error()]\"\n  >\n  </ZS-input-errors>\n\n</div>" }]
         }], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], iName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iName", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showSearchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearchIcon", required: false }] }], showLoaderIconOnSearchInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoaderIconOnSearchInput", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], validateFns: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateFns", required: false }] }], formatFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatFn", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], searchDebounceDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceDelay", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], enterEv: [{ type: i0.Output, args: ["enterEv"] }], focusEv: [{ type: i0.Output, args: ["focusEv"] }], blurEv: [{ type: i0.Output, args: ["blurEv"] }], changedEv: [{ type: i0.Output, args: ["changedEv"] }], searchEv: [{ type: i0.Output, args: ["searchEv"] }], clearedEv: [{ type: i0.Output, args: ["clearedEv"] }], keydownEv: [{ type: i0.Output, args: ["keydownEv"] }] } });
 
 // ==============================================
@@ -2948,11 +2948,11 @@ class Range {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Range, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Range, isStandalone: true, selector: "ZS-range", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [hintId]=\"Id() + '-hint'\"\n  [size]=\"size()\"\n  [for]=\"Id()\"\n  ></ZS-label>\n\n  <!-- ========================= Slider Container ========================= -->\n  <div class=\"zs:flex zs:items-center\"\n  [class]=\"gapCLasses()\">\n    \n    <!-- ========================= Track ========================= -->\n    <div\n      #track\n      [class]=\"rangeClasses()\"\n      (mousedown)=\"onMouseDown($event)\"\n    >\n      \n      <!-- ========================= Track Background ========================= -->\n      <div\n        class=\"zs:absolute zs:inset-0 zs:rounded-full zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 zs:transition-all zs:duration-300 zs:group-hover:brightness-110\"\n        [ngClass]=\"[\n          ['secondary', 'dark'].includes(inputStyle()) ? 'zs:dark:from-gray-500 zs:dark:to-gray-600' : 'zs:dark:from-gray-700 zs:dark:to-gray-800',\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : ''\n        ]\"\n        ></div>\n\n      <!-- ========================= Fill (Progress) ========================= -->\n      <div\n        class=\"zs:absolute zs:left-0 zs:rounded-full zs:top-0 zs:h-full zs:transition-all zs:duration-200 zs:ease-out zs:shadow-sm\"\n        [style.width.%]=\"percent()\"\n        [ngClass]=\"[\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : '',\n          palette().buttonSolidPalette.btnBG,\n          palette().buttonSolidPalette.btnBGHover\n        ]\"\n      ></div>\n\n      <!-- ========================= Thumb (Handle) ========================= -->\n      <div\n        class=\"zs:absolute zs:top-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center \n        zs:-translate-y-1/2 zs:transition-all zs:duration-200 zs:ease-out zs:shadow-md \n        zs:group-hover:scale-110\"\n        [style.left]=\"calcThumbPosition()\"\n        [ngClass]=\"[ThumbClasses(), disabledOrReadonly() ? 'zs:cursor-not-allowed' : '']\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [attr.id]=\"Id()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"value()\"\n        [attr.aria-disabled]=\"disabledOrReadonly() || null\"\n        [attr.aria-readonly]=\"isReadonly() || null\"\n        [attr.aria-labelledby]=\"Id() + '-label'\"\n        [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n        aria-orientation=\"horizontal\"\n      >\n        <i class=\"fa-solid fa-circle zs:text-white\" [ngClass]=\"dotCLasses()\"></i>\n      </div>\n    </div>\n\n    <!-- ========================= Value Display ========================= -->\n    @if (showValue()) {\n      <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-300 zs:font-medium zs:transition-colors\">\n        {{ value() }}\n      </div>\n    }\n  </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Range, isStandalone: true, selector: "ZS-range", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [hintId]=\"Id() + '-hint'\"\n  [size]=\"size()\"\n  [for]=\"Id()\"\n  ></ZS-label>\n\n  <!-- ========================= Slider Container ========================= -->\n  <div class=\"zs:flex zs:items-center\"\n  [class]=\"gapCLasses()\">\n    \n    <!-- ========================= Track ========================= -->\n    <div\n      #track\n      [class]=\"rangeClasses()\"\n      (mousedown)=\"onMouseDown($event)\"\n    >\n      \n      <!-- ========================= Track Background ========================= -->\n      <div\n        class=\"zs:absolute zs:inset-0 zs:rounded-full \n        zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 \n        zs:transition-[filter,background-image] zs:duration-300 zs:ease-out\n        motion-reduce:zs:transition-none zs:group-hover:brightness-110\"\n        [ngClass]=\"[\n          ['secondary', 'dark'].includes(inputStyle()) ? 'zs:dark:from-gray-500 zs:dark:to-gray-600' : 'zs:dark:from-gray-700 zs:dark:to-gray-800',\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : ''\n        ]\"\n        ></div>\n\n      <!-- ========================= Fill (Progress) ========================= -->\n      <div\n        class=\"zs:absolute zs:left-0 zs:rounded-full zs:top-0 zs:h-full \n          zs:transition-[width,background-color,box-shadow]\n          zs:duration-200 zs:ease-out zs:shadow-sm motion-reduce:zs:transition-none\"\n        [style.width.%]=\"percent()\"\n        [ngClass]=\"[\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : '',\n          palette().buttonSolidPalette.btnBG,\n          palette().buttonSolidPalette.btnBGHover\n        ]\"\n      ></div>\n\n      <!-- ========================= Thumb (Handle) ========================= -->\n      <div\n        class=\"zs:absolute zs:top-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center \n        zs:-translate-y-1/2 zs:transition-[transform,box-shadow,background-color] \n        zs:duration-200 zs:ease-out zs:shadow-md \n        zs:group-hover:scale-110\"\n        [style.left]=\"calcThumbPosition()\"\n        [ngClass]=\"[ThumbClasses(), disabledOrReadonly() ? 'zs:cursor-not-allowed' : '']\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [attr.id]=\"Id()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"value()\"\n        [attr.aria-disabled]=\"disabledOrReadonly() || null\"\n        [attr.aria-readonly]=\"isReadonly() || null\"\n        [attr.aria-labelledby]=\"Id() + '-label'\"\n        [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n        aria-orientation=\"horizontal\"\n      >\n        <i class=\"fa-solid fa-circle zs:text-white\" [ngClass]=\"dotCLasses()\"></i>\n      </div>\n    </div>\n\n    <!-- ========================= Value Display ========================= -->\n    @if (showValue()) {\n      <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-300 zs:font-medium\">\n        {{ value() }}\n      </div>\n    }\n  </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Range, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-range', imports: [Label, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [hintId]=\"Id() + '-hint'\"\n  [size]=\"size()\"\n  [for]=\"Id()\"\n  ></ZS-label>\n\n  <!-- ========================= Slider Container ========================= -->\n  <div class=\"zs:flex zs:items-center\"\n  [class]=\"gapCLasses()\">\n    \n    <!-- ========================= Track ========================= -->\n    <div\n      #track\n      [class]=\"rangeClasses()\"\n      (mousedown)=\"onMouseDown($event)\"\n    >\n      \n      <!-- ========================= Track Background ========================= -->\n      <div\n        class=\"zs:absolute zs:inset-0 zs:rounded-full zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 zs:transition-all zs:duration-300 zs:group-hover:brightness-110\"\n        [ngClass]=\"[\n          ['secondary', 'dark'].includes(inputStyle()) ? 'zs:dark:from-gray-500 zs:dark:to-gray-600' : 'zs:dark:from-gray-700 zs:dark:to-gray-800',\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : ''\n        ]\"\n        ></div>\n\n      <!-- ========================= Fill (Progress) ========================= -->\n      <div\n        class=\"zs:absolute zs:left-0 zs:rounded-full zs:top-0 zs:h-full zs:transition-all zs:duration-200 zs:ease-out zs:shadow-sm\"\n        [style.width.%]=\"percent()\"\n        [ngClass]=\"[\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : '',\n          palette().buttonSolidPalette.btnBG,\n          palette().buttonSolidPalette.btnBGHover\n        ]\"\n      ></div>\n\n      <!-- ========================= Thumb (Handle) ========================= -->\n      <div\n        class=\"zs:absolute zs:top-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center \n        zs:-translate-y-1/2 zs:transition-all zs:duration-200 zs:ease-out zs:shadow-md \n        zs:group-hover:scale-110\"\n        [style.left]=\"calcThumbPosition()\"\n        [ngClass]=\"[ThumbClasses(), disabledOrReadonly() ? 'zs:cursor-not-allowed' : '']\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [attr.id]=\"Id()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"value()\"\n        [attr.aria-disabled]=\"disabledOrReadonly() || null\"\n        [attr.aria-readonly]=\"isReadonly() || null\"\n        [attr.aria-labelledby]=\"Id() + '-label'\"\n        [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n        aria-orientation=\"horizontal\"\n      >\n        <i class=\"fa-solid fa-circle zs:text-white\" [ngClass]=\"dotCLasses()\"></i>\n      </div>\n    </div>\n\n    <!-- ========================= Value Display ========================= -->\n    @if (showValue()) {\n      <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-300 zs:font-medium zs:transition-colors\">\n        {{ value() }}\n      </div>\n    }\n  </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"] }]
+            args: [{ selector: 'ZS-range', imports: [Label, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [hintId]=\"Id() + '-hint'\"\n  [size]=\"size()\"\n  [for]=\"Id()\"\n  ></ZS-label>\n\n  <!-- ========================= Slider Container ========================= -->\n  <div class=\"zs:flex zs:items-center\"\n  [class]=\"gapCLasses()\">\n    \n    <!-- ========================= Track ========================= -->\n    <div\n      #track\n      [class]=\"rangeClasses()\"\n      (mousedown)=\"onMouseDown($event)\"\n    >\n      \n      <!-- ========================= Track Background ========================= -->\n      <div\n        class=\"zs:absolute zs:inset-0 zs:rounded-full \n        zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 \n        zs:transition-[filter,background-image] zs:duration-300 zs:ease-out\n        motion-reduce:zs:transition-none zs:group-hover:brightness-110\"\n        [ngClass]=\"[\n          ['secondary', 'dark'].includes(inputStyle()) ? 'zs:dark:from-gray-500 zs:dark:to-gray-600' : 'zs:dark:from-gray-700 zs:dark:to-gray-800',\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : ''\n        ]\"\n        ></div>\n\n      <!-- ========================= Fill (Progress) ========================= -->\n      <div\n        class=\"zs:absolute zs:left-0 zs:rounded-full zs:top-0 zs:h-full \n          zs:transition-[width,background-color,box-shadow]\n          zs:duration-200 zs:ease-out zs:shadow-sm motion-reduce:zs:transition-none\"\n        [style.width.%]=\"percent()\"\n        [ngClass]=\"[\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : '',\n          palette().buttonSolidPalette.btnBG,\n          palette().buttonSolidPalette.btnBGHover\n        ]\"\n      ></div>\n\n      <!-- ========================= Thumb (Handle) ========================= -->\n      <div\n        class=\"zs:absolute zs:top-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center \n        zs:-translate-y-1/2 zs:transition-[transform,box-shadow,background-color] \n        zs:duration-200 zs:ease-out zs:shadow-md \n        zs:group-hover:scale-110\"\n        [style.left]=\"calcThumbPosition()\"\n        [ngClass]=\"[ThumbClasses(), disabledOrReadonly() ? 'zs:cursor-not-allowed' : '']\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [attr.id]=\"Id()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"value()\"\n        [attr.aria-disabled]=\"disabledOrReadonly() || null\"\n        [attr.aria-readonly]=\"isReadonly() || null\"\n        [attr.aria-labelledby]=\"Id() + '-label'\"\n        [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n        aria-orientation=\"horizontal\"\n      >\n        <i class=\"fa-solid fa-circle zs:text-white\" [ngClass]=\"dotCLasses()\"></i>\n      </div>\n    </div>\n\n    <!-- ========================= Value Display ========================= -->\n    @if (showValue()) {\n      <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-300 zs:font-medium\">\n        {{ value() }}\n      </div>\n    }\n  </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"] }]
         }], ctorParameters: () => [], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
 
 // =================================================================================================
@@ -3022,7 +3022,7 @@ class Select {
     }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
     containerClasses = computed(() => {
         const base = `
-      zs:border zs:transition-all zs:duration-150
+      zs:border zs:transition-opacity zs:duration-150
       zs:flex zs:items-center zs:justify-between
       zs:w-full zs:min-w-48 zs:px-3 zs:py-2
       zs:rounded-lg zs:shadow-sm
@@ -3043,7 +3043,7 @@ class Select {
         ].filter(Boolean).join(' ');
     }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
     clearClass = computed(() => {
-        const base = 'zs:mt-2 zs:text-sm zs:flex zs:items-center zs:transition-colors';
+        const base = 'zs:mt-2 zs:text-sm zs:flex zs:items-center';
         return [
             base,
             this.styleEntry().selectEntry.cleartext,
@@ -3161,11 +3161,11 @@ class Select {
         this.selectedItemsEv.emit({ value, valid, fromForce });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Select, isStandalone: true, selector: "ZS-select", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceDelay: { classPropertyName: "searchDebounceDelay", publicName: "searchDebounceDelay", isSignal: true, isRequired: false, transformFunction: null }, showLoaderIconOnSearchInput: { classPropertyName: "showLoaderIconOnSearchInput", publicName: "showLoaderIconOnSearchInput", isSignal: true, isRequired: false, transformFunction: null }, preselectedIds: { classPropertyName: "preselectedIds", publicName: "preselectedIds", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItems: "selectedItemsChange", touched: "touchedChange", selectedItemsEv: "selectedItemsEv", selectionClearedEv: "selectionClearedEv" }, ngImport: i0, template: "<!-- ========================= Label & Hint ========================= -->\n<div class=\"zs:relative zs:w-full\">\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id() + '-trigger'\">\n  </ZS-label>\n\n  <!-- ========================= Trigger Button (Combobox) ========================= -->\n  <button\n    id=\"{{ Id() + '-trigger' }}\"\n    type=\"button\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"Id() + '-options'\"\n    [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n    [disabled]=\"disabledOrReadonly()\"\n    class=\"zs:transition-colors\"\n    [ngClass]=\"containerClasses()\"\n    (click)=\"toggleDropdown()\">\n\n    @if (selectedItems().length) {\n      @if (!multiple()) {\n        <!-- Single Selection -->\n        <span class=\"zs:truncate\">{{ selectedItems()[0].name }}</span>\n      } @else {\n        <!-- Multiple Selection -->\n        <div class=\"zs:flex zs:flex-wrap zs:gap-2 zs:items-center zs:max-w-full\">\n          @for (item of selectedItems().slice(0, 6); track item.id) {\n            <span\n              [ngClass]=\"showItemsClass()\"\n              class=\"zs:flex zs:gap-1 zs:justify-center zs:items-center zs:text-gray-900 \n              zs:dark:text-gray-100 zs:pl-3 zs:pr-2 zs:py-1.5 zs:rounded-full zs:text-sm \n              zs:max-w-[140px] zs:transition-colors\">\n              <span class=\"zs:truncate\">{{ item.name }}</span>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"'Remove ' + item.name\"\n                class=\"zs:px-1 zs:text-gray-950 zs:hover:text-gray-600 zs:transition-colors zs:dark:text-gray-50 zs:dark:hover:text-gray-300\"\n                (click)=\"selectItem([item]); $event.stopPropagation()\">\n                <i class=\"fas fa-times text-xs\"></i>\n              </button>\n            </span>\n          }\n\n          @if (selectedItems().length > 6) {\n            <!-- +More Indicator -->\n            <span class=\"zs:text-gray-500 zs:text-sm\">\n              +{{ selectedItems().length - 6 }} more\n            </span>\n          }\n        </div>\n      }\n    } @else {\n      <!-- Placeholder -->\n      <span>{{ placeholder() }}</span>\n    }\n\n    @if (!disabledOrReadonly()) {\n      <!-- Dropdown Toggle Icon -->\n      <i class=\"fas zs:ml-2\"\n      [ngClass]=\"[isOpen() ? 'fa-chevron-up' : 'fa-chevron-down']\"\n      >\n      </i>\n    }\n  </button>\n\n  <!-- ========================= Dropdown Menu ========================= -->\n  @if (isOpen()) {\n    <div\n      id=\"{{ Id() + '-options' }}\"\n      role=\"listbox\"\n      [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n      class=\"zs:absolute {{ zIndices.selectDropdown }} zs:w-full zs:mt-1 zs:rounded-lg \n      zs:shadow-lg zs:dark:shadow-gray-400/30 zs:overflow-hidden zs:bg-white zs:border zs:transition-colors\n      zs:border-gray-300 zs:dark:bg-gray-900 zs:dark:border-gray-600 zs:dark:text-gray-100\">\n\n      @if (showSearch()) {\n        <!-- Search Input -->\n        <div class=\"zs:relative zs:p-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700 zs:transition-colors\">\n          <ZS-input\n            role=\"searchbox\"\n            aria-label=\"Search options\"\n            [iName]=\"'ZS-select-[' + Id() + ']'\"\n            type=\"search\"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchQuery()\"\n            (searchEv)=\"searchQuery.set($event)\"\n            (click)=\"$event.stopPropagation()\"\n            [autofocus]=\"true\"\n            [inputStyle]=\"this.error().length ? 'danger' : inputStyle()\"\n            [searchDebounceDelay]=\"searchDebounceDelay()\"\n            [showLoaderIconOnSearchInput]=\"showLoaderIconOnSearchInput()\">\n          </ZS-input>\n        </div>\n      }\n\n      <!-- Options List -->\n      <div class=\"zs:max-h-60 zs:overflow-y-auto\">\n        @for (item of filteredItems(); track trackByFn($index, item)) {\n          <div\n            role=\"option\"\n            [attr.aria-selected]=\"inSelectItems(item)\"\n            class=\"zs:px-4 zs:py-2 zs:cursor-pointer zs:flex zs:items-center zs:justify-between zs:transition-colors zs:text-gray-900 zs:dark:text-gray-100\"\n            [ngClass]=\"getBgSelectClasses(inSelectItems(item))\"\n            (click)=\"selectItem([item]); $event.stopPropagation()\">\n            <span class=\"zs:truncate\">{{ item.name }}</span>\n            @if (inSelectItems(item)) {\n              <i class=\"fas fa-check zs:text-gray-950 zs:dark:text-gray-50 zs:ml-2 zs:transition-colors\"></i>\n            }\n          </div>\n        }\n\n        @if (filteredItems().length === 0) {\n          <!-- No Results Message -->\n          <div class=\"zs:px-4 zs:py-3 zs:text-center zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\">\n            {{ noResultsText() }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- ========================= Clear Selection Button ========================= -->\n  @if (selectedItems().length && showClearButton() && !disabledOrReadonly()) {\n    <button\n      type=\"button\"\n      aria-label=\"Clear all selections\"\n      [class]=\"clearClass()\"\n      (click)=\"clearSelection()\">\n      <i class=\"fas fa-times zs:mr-1\"></i> Clear selection\n    </button>\n  }\n\n   <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n  [Id]=\"Id()\"\n  [errors]=\"[error()]\"\n  >\n  </ZS-input-errors>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: Input, selector: "ZS-input", inputs: ["Id", "iName", "label", "hint", "placeholder", "type", "inputStyle", "disabled", "isReadonly", "autocomplete", "required", "inputmode", "icon", "showSearchIcon", "showLoaderIconOnSearchInput", "maxlength", "minlength", "spellcheck", "min", "max", "step", "validateFns", "formatFn", "autofocus", "searchDebounceDelay", "size", "value", "touched"], outputs: ["valueChange", "touchedChange", "enterEv", "focusEv", "blurEv", "changedEv", "searchEv", "clearedEv", "keydownEv"] }, { kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Select, isStandalone: true, selector: "ZS-select", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceDelay: { classPropertyName: "searchDebounceDelay", publicName: "searchDebounceDelay", isSignal: true, isRequired: false, transformFunction: null }, showLoaderIconOnSearchInput: { classPropertyName: "showLoaderIconOnSearchInput", publicName: "showLoaderIconOnSearchInput", isSignal: true, isRequired: false, transformFunction: null }, preselectedIds: { classPropertyName: "preselectedIds", publicName: "preselectedIds", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItems: "selectedItemsChange", touched: "touchedChange", selectedItemsEv: "selectedItemsEv", selectionClearedEv: "selectionClearedEv" }, ngImport: i0, template: "<!-- ========================= Label & Hint ========================= -->\n<div class=\"zs:relative zs:w-full\">\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id() + '-trigger'\">\n  </ZS-label>\n\n  <!-- ========================= Trigger Button (Combobox) ========================= -->\n  <button\n    id=\"{{ Id() + '-trigger' }}\"\n    type=\"button\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"Id() + '-options'\"\n    [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n    [disabled]=\"disabledOrReadonly()\"\n    [ngClass]=\"containerClasses()\"\n    (click)=\"toggleDropdown()\">\n\n    @if (selectedItems().length) {\n      @if (!multiple()) {\n        <!-- Single Selection -->\n        <span class=\"zs:truncate\">{{ selectedItems()[0].name }}</span>\n      } @else {\n        <!-- Multiple Selection -->\n        <div class=\"zs:flex zs:flex-wrap zs:gap-2 zs:items-center zs:max-w-full\">\n          @for (item of selectedItems().slice(0, 6); track item.id) {\n            <span\n              [ngClass]=\"showItemsClass()\"\n              class=\"zs:flex zs:gap-1 zs:justify-center zs:items-center zs:text-gray-900 \n              zs:dark:text-gray-100 zs:pl-3 zs:pr-2 zs:py-1.5 zs:rounded-full zs:text-sm \n              zs:max-w-[140px]\">\n              <span class=\"zs:truncate\">{{ item.name }}</span>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"'Remove ' + item.name\"\n                class=\"zs:px-1 zs:text-gray-950 zs:hover:text-gray-600 zs:dark:text-gray-50 zs:dark:hover:text-gray-300\"\n                (click)=\"selectItem([item]); $event.stopPropagation()\">\n                <i class=\"fas fa-times text-xs\"></i>\n              </button>\n            </span>\n          }\n\n          @if (selectedItems().length > 6) {\n            <!-- +More Indicator -->\n            <span class=\"zs:text-gray-500 zs:text-sm\">\n              +{{ selectedItems().length - 6 }} more\n            </span>\n          }\n        </div>\n      }\n    } @else {\n      <!-- Placeholder -->\n      <span>{{ placeholder() }}</span>\n    }\n\n    @if (!disabledOrReadonly()) {\n      <!-- Dropdown Toggle Icon -->\n      <i class=\"fas zs:ml-2\"\n      [ngClass]=\"[isOpen() ? 'fa-chevron-up' : 'fa-chevron-down']\"\n      >\n      </i>\n    }\n  </button>\n\n  <!-- ========================= Dropdown Menu ========================= -->\n  @if (isOpen()) {\n    <div\n      id=\"{{ Id() + '-options' }}\"\n      role=\"listbox\"\n      [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n      class=\"zs:absolute {{ zIndices.selectDropdown }} zs:w-full zs:mt-1 zs:rounded-lg \n      zs:shadow-lg zs:dark:shadow-gray-400/30 zs:overflow-hidden zs:bg-white zs:border\n      zs:border-gray-300 zs:dark:bg-gray-900 zs:dark:border-gray-600 zs:dark:text-gray-100\">\n\n      @if (showSearch()) {\n        <!-- Search Input -->\n        <div class=\"zs:relative zs:p-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700\">\n          <ZS-input\n            role=\"searchbox\"\n            aria-label=\"Search options\"\n            [iName]=\"'ZS-select-[' + Id() + ']'\"\n            type=\"search\"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchQuery()\"\n            (searchEv)=\"searchQuery.set($event)\"\n            (click)=\"$event.stopPropagation()\"\n            [autofocus]=\"true\"\n            [inputStyle]=\"this.error().length ? 'danger' : inputStyle()\"\n            [searchDebounceDelay]=\"searchDebounceDelay()\"\n            [showLoaderIconOnSearchInput]=\"showLoaderIconOnSearchInput()\">\n          </ZS-input>\n        </div>\n      }\n\n      <!-- Options List -->\n      <div class=\"zs:max-h-60 zs:overflow-y-auto\">\n        @for (item of filteredItems(); track trackByFn($index, item)) {\n          <div\n            role=\"option\"\n            [attr.aria-selected]=\"inSelectItems(item)\"\n            class=\"zs:px-4 zs:py-2 zs:cursor-pointer zs:flex zs:items-center zs:justify-between zs:text-gray-900 zs:dark:text-gray-100\"\n            [ngClass]=\"getBgSelectClasses(inSelectItems(item))\"\n            (click)=\"selectItem([item]); $event.stopPropagation()\">\n            <span class=\"zs:truncate\">{{ item.name }}</span>\n            @if (inSelectItems(item)) {\n              <i class=\"fas fa-check zs:text-gray-950 zs:dark:text-gray-50 zs:ml-2\"></i>\n            }\n          </div>\n        }\n\n        @if (filteredItems().length === 0) {\n          <!-- No Results Message -->\n          <div class=\"zs:px-4 zs:py-3 zs:text-center zs:text-gray-500 zs:dark:text-gray-400\">\n            {{ noResultsText() }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- ========================= Clear Selection Button ========================= -->\n  @if (selectedItems().length && showClearButton() && !disabledOrReadonly()) {\n    <button\n      type=\"button\"\n      aria-label=\"Clear all selections\"\n      [class]=\"clearClass()\"\n      (click)=\"clearSelection()\">\n      <i class=\"fas fa-times zs:mr-1\"></i> Clear selection\n    </button>\n  }\n\n   <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n  [Id]=\"Id()\"\n  [errors]=\"[error()]\"\n  >\n  </ZS-input-errors>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: Input, selector: "ZS-input", inputs: ["Id", "iName", "label", "hint", "placeholder", "type", "inputStyle", "disabled", "isReadonly", "autocomplete", "required", "inputmode", "icon", "showSearchIcon", "showLoaderIconOnSearchInput", "maxlength", "minlength", "spellcheck", "min", "max", "step", "validateFns", "formatFn", "autofocus", "searchDebounceDelay", "size", "value", "touched"], outputs: ["valueChange", "touchedChange", "enterEv", "focusEv", "blurEv", "changedEv", "searchEv", "clearedEv", "keydownEv"] }, { kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Select, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-select', imports: [CommonModule, FormsModule, Input, Label, InputErrors], template: "<!-- ========================= Label & Hint ========================= -->\n<div class=\"zs:relative zs:w-full\">\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id() + '-trigger'\">\n  </ZS-label>\n\n  <!-- ========================= Trigger Button (Combobox) ========================= -->\n  <button\n    id=\"{{ Id() + '-trigger' }}\"\n    type=\"button\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"Id() + '-options'\"\n    [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n    [disabled]=\"disabledOrReadonly()\"\n    class=\"zs:transition-colors\"\n    [ngClass]=\"containerClasses()\"\n    (click)=\"toggleDropdown()\">\n\n    @if (selectedItems().length) {\n      @if (!multiple()) {\n        <!-- Single Selection -->\n        <span class=\"zs:truncate\">{{ selectedItems()[0].name }}</span>\n      } @else {\n        <!-- Multiple Selection -->\n        <div class=\"zs:flex zs:flex-wrap zs:gap-2 zs:items-center zs:max-w-full\">\n          @for (item of selectedItems().slice(0, 6); track item.id) {\n            <span\n              [ngClass]=\"showItemsClass()\"\n              class=\"zs:flex zs:gap-1 zs:justify-center zs:items-center zs:text-gray-900 \n              zs:dark:text-gray-100 zs:pl-3 zs:pr-2 zs:py-1.5 zs:rounded-full zs:text-sm \n              zs:max-w-[140px] zs:transition-colors\">\n              <span class=\"zs:truncate\">{{ item.name }}</span>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"'Remove ' + item.name\"\n                class=\"zs:px-1 zs:text-gray-950 zs:hover:text-gray-600 zs:transition-colors zs:dark:text-gray-50 zs:dark:hover:text-gray-300\"\n                (click)=\"selectItem([item]); $event.stopPropagation()\">\n                <i class=\"fas fa-times text-xs\"></i>\n              </button>\n            </span>\n          }\n\n          @if (selectedItems().length > 6) {\n            <!-- +More Indicator -->\n            <span class=\"zs:text-gray-500 zs:text-sm\">\n              +{{ selectedItems().length - 6 }} more\n            </span>\n          }\n        </div>\n      }\n    } @else {\n      <!-- Placeholder -->\n      <span>{{ placeholder() }}</span>\n    }\n\n    @if (!disabledOrReadonly()) {\n      <!-- Dropdown Toggle Icon -->\n      <i class=\"fas zs:ml-2\"\n      [ngClass]=\"[isOpen() ? 'fa-chevron-up' : 'fa-chevron-down']\"\n      >\n      </i>\n    }\n  </button>\n\n  <!-- ========================= Dropdown Menu ========================= -->\n  @if (isOpen()) {\n    <div\n      id=\"{{ Id() + '-options' }}\"\n      role=\"listbox\"\n      [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n      class=\"zs:absolute {{ zIndices.selectDropdown }} zs:w-full zs:mt-1 zs:rounded-lg \n      zs:shadow-lg zs:dark:shadow-gray-400/30 zs:overflow-hidden zs:bg-white zs:border zs:transition-colors\n      zs:border-gray-300 zs:dark:bg-gray-900 zs:dark:border-gray-600 zs:dark:text-gray-100\">\n\n      @if (showSearch()) {\n        <!-- Search Input -->\n        <div class=\"zs:relative zs:p-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700 zs:transition-colors\">\n          <ZS-input\n            role=\"searchbox\"\n            aria-label=\"Search options\"\n            [iName]=\"'ZS-select-[' + Id() + ']'\"\n            type=\"search\"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchQuery()\"\n            (searchEv)=\"searchQuery.set($event)\"\n            (click)=\"$event.stopPropagation()\"\n            [autofocus]=\"true\"\n            [inputStyle]=\"this.error().length ? 'danger' : inputStyle()\"\n            [searchDebounceDelay]=\"searchDebounceDelay()\"\n            [showLoaderIconOnSearchInput]=\"showLoaderIconOnSearchInput()\">\n          </ZS-input>\n        </div>\n      }\n\n      <!-- Options List -->\n      <div class=\"zs:max-h-60 zs:overflow-y-auto\">\n        @for (item of filteredItems(); track trackByFn($index, item)) {\n          <div\n            role=\"option\"\n            [attr.aria-selected]=\"inSelectItems(item)\"\n            class=\"zs:px-4 zs:py-2 zs:cursor-pointer zs:flex zs:items-center zs:justify-between zs:transition-colors zs:text-gray-900 zs:dark:text-gray-100\"\n            [ngClass]=\"getBgSelectClasses(inSelectItems(item))\"\n            (click)=\"selectItem([item]); $event.stopPropagation()\">\n            <span class=\"zs:truncate\">{{ item.name }}</span>\n            @if (inSelectItems(item)) {\n              <i class=\"fas fa-check zs:text-gray-950 zs:dark:text-gray-50 zs:ml-2 zs:transition-colors\"></i>\n            }\n          </div>\n        }\n\n        @if (filteredItems().length === 0) {\n          <!-- No Results Message -->\n          <div class=\"zs:px-4 zs:py-3 zs:text-center zs:text-gray-500 zs:dark:text-gray-400 zs:transition-colors\">\n            {{ noResultsText() }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- ========================= Clear Selection Button ========================= -->\n  @if (selectedItems().length && showClearButton() && !disabledOrReadonly()) {\n    <button\n      type=\"button\"\n      aria-label=\"Clear all selections\"\n      [class]=\"clearClass()\"\n      (click)=\"clearSelection()\">\n      <i class=\"fas fa-times zs:mr-1\"></i> Clear selection\n    </button>\n  }\n\n   <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n  [Id]=\"Id()\"\n  [errors]=\"[error()]\"\n  >\n  </ZS-input-errors>\n</div>", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ZS-select', imports: [CommonModule, FormsModule, Input, Label, InputErrors], template: "<!-- ========================= Label & Hint ========================= -->\n<div class=\"zs:relative zs:w-full\">\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id() + '-trigger'\">\n  </ZS-label>\n\n  <!-- ========================= Trigger Button (Combobox) ========================= -->\n  <button\n    id=\"{{ Id() + '-trigger' }}\"\n    type=\"button\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"Id() + '-options'\"\n    [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n    [disabled]=\"disabledOrReadonly()\"\n    [ngClass]=\"containerClasses()\"\n    (click)=\"toggleDropdown()\">\n\n    @if (selectedItems().length) {\n      @if (!multiple()) {\n        <!-- Single Selection -->\n        <span class=\"zs:truncate\">{{ selectedItems()[0].name }}</span>\n      } @else {\n        <!-- Multiple Selection -->\n        <div class=\"zs:flex zs:flex-wrap zs:gap-2 zs:items-center zs:max-w-full\">\n          @for (item of selectedItems().slice(0, 6); track item.id) {\n            <span\n              [ngClass]=\"showItemsClass()\"\n              class=\"zs:flex zs:gap-1 zs:justify-center zs:items-center zs:text-gray-900 \n              zs:dark:text-gray-100 zs:pl-3 zs:pr-2 zs:py-1.5 zs:rounded-full zs:text-sm \n              zs:max-w-[140px]\">\n              <span class=\"zs:truncate\">{{ item.name }}</span>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"'Remove ' + item.name\"\n                class=\"zs:px-1 zs:text-gray-950 zs:hover:text-gray-600 zs:dark:text-gray-50 zs:dark:hover:text-gray-300\"\n                (click)=\"selectItem([item]); $event.stopPropagation()\">\n                <i class=\"fas fa-times text-xs\"></i>\n              </button>\n            </span>\n          }\n\n          @if (selectedItems().length > 6) {\n            <!-- +More Indicator -->\n            <span class=\"zs:text-gray-500 zs:text-sm\">\n              +{{ selectedItems().length - 6 }} more\n            </span>\n          }\n        </div>\n      }\n    } @else {\n      <!-- Placeholder -->\n      <span>{{ placeholder() }}</span>\n    }\n\n    @if (!disabledOrReadonly()) {\n      <!-- Dropdown Toggle Icon -->\n      <i class=\"fas zs:ml-2\"\n      [ngClass]=\"[isOpen() ? 'fa-chevron-up' : 'fa-chevron-down']\"\n      >\n      </i>\n    }\n  </button>\n\n  <!-- ========================= Dropdown Menu ========================= -->\n  @if (isOpen()) {\n    <div\n      id=\"{{ Id() + '-options' }}\"\n      role=\"listbox\"\n      [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n      class=\"zs:absolute {{ zIndices.selectDropdown }} zs:w-full zs:mt-1 zs:rounded-lg \n      zs:shadow-lg zs:dark:shadow-gray-400/30 zs:overflow-hidden zs:bg-white zs:border\n      zs:border-gray-300 zs:dark:bg-gray-900 zs:dark:border-gray-600 zs:dark:text-gray-100\">\n\n      @if (showSearch()) {\n        <!-- Search Input -->\n        <div class=\"zs:relative zs:p-2 zs:border-b zs:border-gray-200 zs:dark:border-gray-700\">\n          <ZS-input\n            role=\"searchbox\"\n            aria-label=\"Search options\"\n            [iName]=\"'ZS-select-[' + Id() + ']'\"\n            type=\"search\"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchQuery()\"\n            (searchEv)=\"searchQuery.set($event)\"\n            (click)=\"$event.stopPropagation()\"\n            [autofocus]=\"true\"\n            [inputStyle]=\"this.error().length ? 'danger' : inputStyle()\"\n            [searchDebounceDelay]=\"searchDebounceDelay()\"\n            [showLoaderIconOnSearchInput]=\"showLoaderIconOnSearchInput()\">\n          </ZS-input>\n        </div>\n      }\n\n      <!-- Options List -->\n      <div class=\"zs:max-h-60 zs:overflow-y-auto\">\n        @for (item of filteredItems(); track trackByFn($index, item)) {\n          <div\n            role=\"option\"\n            [attr.aria-selected]=\"inSelectItems(item)\"\n            class=\"zs:px-4 zs:py-2 zs:cursor-pointer zs:flex zs:items-center zs:justify-between zs:text-gray-900 zs:dark:text-gray-100\"\n            [ngClass]=\"getBgSelectClasses(inSelectItems(item))\"\n            (click)=\"selectItem([item]); $event.stopPropagation()\">\n            <span class=\"zs:truncate\">{{ item.name }}</span>\n            @if (inSelectItems(item)) {\n              <i class=\"fas fa-check zs:text-gray-950 zs:dark:text-gray-50 zs:ml-2\"></i>\n            }\n          </div>\n        }\n\n        @if (filteredItems().length === 0) {\n          <!-- No Results Message -->\n          <div class=\"zs:px-4 zs:py-3 zs:text-center zs:text-gray-500 zs:dark:text-gray-400\">\n            {{ noResultsText() }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- ========================= Clear Selection Button ========================= -->\n  @if (selectedItems().length && showClearButton() && !disabledOrReadonly()) {\n    <button\n      type=\"button\"\n      aria-label=\"Clear all selections\"\n      [class]=\"clearClass()\"\n      (click)=\"clearSelection()\">\n      <i class=\"fas fa-times zs:mr-1\"></i> Clear selection\n    </button>\n  }\n\n   <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n  [Id]=\"Id()\"\n  [errors]=\"[error()]\"\n  >\n  </ZS-input-errors>\n</div>", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], searchDebounceDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceDelay", required: false }] }], showLoaderIconOnSearchInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoaderIconOnSearchInput", required: false }] }], preselectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "preselectedIds", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], validateFns: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateFns", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }, { type: i0.Output, args: ["selectedItemsChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], selectedItemsEv: [{ type: i0.Output, args: ["selectedItemsEv"] }], selectionClearedEv: [{ type: i0.Output, args: ["selectionClearedEv"] }] } });
 
 class Toggle {
@@ -3242,22 +3242,22 @@ class Toggle {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Toggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Toggle, isStandalone: true, selector: "ZS-toggle", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n  <!-- ===================== Checkbox Wrapper ===================== -->\n  <div\n    class=\"zs:cursor-pointer zs:leading-none\"\n  >\n    <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n    <input\n      type=\"checkbox\"\n      class=\"zs:hidden\"\n      [id]=\"Id()\"\n      [checked]=\"isChecked()\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"toggleChecked()\"\n    />\n\n    <!-- ===================== Custom Accessible Toggle ===================== -->\n    <button\n    (click)=\"value.set(!value())\"\n    class=\"zs:relative zs:rounded-full zs:border-2 zs:flex zs:items-center zs:transition-all zs:duration-500 zs:ease-in-out zs:overflow-hidden\"\n    [ngClass]=\"[\n        toggleClasses(),\n        colorClasses('border'),\n        value() ? colorClasses('bg') : '', \n        value() ? '' : 'zs:bg-gray-100 zs:dark:bg-gray-700',\n        btnSize(),\n    ]\"\n    >\n      <div\n          class=\"zs:absolute zs:left-1 zs:top-1/2 zs:-translate-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center zs:transition-all zs:duration-500 zs:ease-in-out zs:shadow-md\"\n          [ngClass]=\"[\n              value() ? '' : colorClasses('bg'),\n              value() ? colorClasses('text') : 'zs:text-gray-100 zs:dark:text-gray-300',\n              value() ? 'zs:bg-gray-100 zs:dark:bg-gray-300' : '',\n              wrapperSize(),\n              value() ? transSize() : 'zs:translate-x-0',\n          ]\"\n      >\n          <i [class]=\"icon()\"></i>\n      </div>\n    </button>\n  </div>\n\n  <!-- ===================== Label (ZS-label component) ===================== -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1' : ''\"\n    [id]=\"Id() + '-label'\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [size]=\"size()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id()\"\n  ></ZS-label>\n</div>", styles: [""], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Toggle, isStandalone: true, selector: "ZS-toggle", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n  <!-- ===================== Checkbox Wrapper ===================== -->\n  <div\n    class=\"zs:cursor-pointer zs:leading-none\"\n  >\n    <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n    <input\n      type=\"checkbox\"\n      class=\"zs:hidden\"\n      [id]=\"Id()\"\n      [checked]=\"isChecked()\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"toggleChecked()\"\n    />\n\n    <!-- ===================== Custom Accessible Toggle ===================== -->\n    <button\n    (click)=\"value.set(!value())\"\n    class=\"zs:relative zs:rounded-full zs:border-2 zs:flex zs:items-center zs:overflow-hidden\"\n    [ngClass]=\"[\n        toggleClasses(),\n        colorClasses('border'),\n        value() ? colorClasses('bg') : '', \n        value() ? '' : 'zs:bg-gray-100 zs:dark:bg-gray-700',\n        btnSize(),\n    ]\"\n    >\n      <div\n          class=\"zs:absolute zs:left-1 zs:top-1/2 zs:-translate-1/2\n           zs:rounded-full zs:flex zs:items-center zs:justify-center \n           zs:transition-[translate] zs:duration-500 zs:ease-in-out zs:shadow-md\"\n          [ngClass]=\"[\n              value() ? '' : colorClasses('bg'),\n              value() ? colorClasses('text') : 'zs:text-gray-100 zs:dark:text-gray-300',\n              value() ? 'zs:bg-gray-100 zs:dark:bg-gray-300' : '',\n              wrapperSize(),\n              value() ? transSize() : 'zs:translate-x-0',\n          ]\"\n      >\n          <i [class]=\"icon()\"></i>\n      </div>\n    </button>\n  </div>\n\n  <!-- ===================== Label (ZS-label component) ===================== -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1' : ''\"\n    [id]=\"Id() + '-label'\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [size]=\"size()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id()\"\n  ></ZS-label>\n</div>", styles: [""], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { 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: Toggle, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-toggle', imports: [Label, CommonModule], template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n  <!-- ===================== Checkbox Wrapper ===================== -->\n  <div\n    class=\"zs:cursor-pointer zs:leading-none\"\n  >\n    <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n    <input\n      type=\"checkbox\"\n      class=\"zs:hidden\"\n      [id]=\"Id()\"\n      [checked]=\"isChecked()\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"toggleChecked()\"\n    />\n\n    <!-- ===================== Custom Accessible Toggle ===================== -->\n    <button\n    (click)=\"value.set(!value())\"\n    class=\"zs:relative zs:rounded-full zs:border-2 zs:flex zs:items-center zs:transition-all zs:duration-500 zs:ease-in-out zs:overflow-hidden\"\n    [ngClass]=\"[\n        toggleClasses(),\n        colorClasses('border'),\n        value() ? colorClasses('bg') : '', \n        value() ? '' : 'zs:bg-gray-100 zs:dark:bg-gray-700',\n        btnSize(),\n    ]\"\n    >\n      <div\n          class=\"zs:absolute zs:left-1 zs:top-1/2 zs:-translate-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center zs:transition-all zs:duration-500 zs:ease-in-out zs:shadow-md\"\n          [ngClass]=\"[\n              value() ? '' : colorClasses('bg'),\n              value() ? colorClasses('text') : 'zs:text-gray-100 zs:dark:text-gray-300',\n              value() ? 'zs:bg-gray-100 zs:dark:bg-gray-300' : '',\n              wrapperSize(),\n              value() ? transSize() : 'zs:translate-x-0',\n          ]\"\n      >\n          <i [class]=\"icon()\"></i>\n      </div>\n    </button>\n  </div>\n\n  <!-- ===================== Label (ZS-label component) ===================== -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1' : ''\"\n    [id]=\"Id() + '-label'\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [size]=\"size()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id()\"\n  ></ZS-label>\n</div>" }]
+            args: [{ selector: 'ZS-toggle', imports: [Label, CommonModule], template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n  <!-- ===================== Checkbox Wrapper ===================== -->\n  <div\n    class=\"zs:cursor-pointer zs:leading-none\"\n  >\n    <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n    <input\n      type=\"checkbox\"\n      class=\"zs:hidden\"\n      [id]=\"Id()\"\n      [checked]=\"isChecked()\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"toggleChecked()\"\n    />\n\n    <!-- ===================== Custom Accessible Toggle ===================== -->\n    <button\n    (click)=\"value.set(!value())\"\n    class=\"zs:relative zs:rounded-full zs:border-2 zs:flex zs:items-center zs:overflow-hidden\"\n    [ngClass]=\"[\n        toggleClasses(),\n        colorClasses('border'),\n        value() ? colorClasses('bg') : '', \n        value() ? '' : 'zs:bg-gray-100 zs:dark:bg-gray-700',\n        btnSize(),\n    ]\"\n    >\n      <div\n          class=\"zs:absolute zs:left-1 zs:top-1/2 zs:-translate-1/2\n           zs:rounded-full zs:flex zs:items-center zs:justify-center \n           zs:transition-[translate] zs:duration-500 zs:ease-in-out zs:shadow-md\"\n          [ngClass]=\"[\n              value() ? '' : colorClasses('bg'),\n              value() ? colorClasses('text') : 'zs:text-gray-100 zs:dark:text-gray-300',\n              value() ? 'zs:bg-gray-100 zs:dark:bg-gray-300' : '',\n              wrapperSize(),\n              value() ? transSize() : 'zs:translate-x-0',\n          ]\"\n      >\n          <i [class]=\"icon()\"></i>\n      </div>\n    </button>\n  </div>\n\n  <!-- ===================== Label (ZS-label component) ===================== -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1' : ''\"\n    [id]=\"Id() + '-label'\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [size]=\"size()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id()\"\n  ></ZS-label>\n</div>" }]
         }], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class Footer {
     showDefultContent = input(true, ...(ngDevMode ? [{ debugName: "showDefultContent" }] : []));
     pages = input([], ...(ngDevMode ? [{ debugName: "pages" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Footer, isStandalone: true, selector: "ZS-footer", inputs: { showDefultContent: { classPropertyName: "showDefultContent", publicName: "showDefultContent", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<footer class=\"zs:bg-gray-700 zs:dark:bg-gray-950 \nzs:dark:text-gray-300 zs:text-white zs:py-6 zs:transition-colors\">\n    <div class=\"zs:text-center zs:flex zs:flex-col zs:gap-8\">\n        <p class=\"zs:text-xs zs:sm:text-sm zs:px-6\">\n            <ng-content select=\"[rights]\"></ng-content>\n\n            @if(showDefultContent()) {\n                &copy;\n                <span class=\"zs:font-semibold\">2026 Ziad Ahmed Shalaby</span>.\n                All rights reserved.\n            }\n        </p>\n\n        @if(pages().length) {\n            <nav class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center\n            zs:gap-y-6 zs:gap-x-4 zs:sm:gap-x-6 zs:md:gap-x-8 zs:lg:gap-x-10 zs:w-full\">\n                @for (page of pages(); track $index) {\n                    <a class=\"zs:text-[10px] zs:sm:text-xs \n                    zs:hover:underline zs:text-center zs:min-w-30\" \n                    [routerLink]=\"page.routerLink\">\n                        {{ page.label }}\n                    </a>\n                }\n            </nav>\n        }\n    </div>\n</footer>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Footer, isStandalone: true, selector: "ZS-footer", inputs: { showDefultContent: { classPropertyName: "showDefultContent", publicName: "showDefultContent", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<footer class=\"zs:bg-gray-700 zs:dark:bg-gray-950 \nzs:dark:text-gray-300 zs:text-white zs:py-6\">\n    <div class=\"zs:text-center zs:flex zs:flex-col zs:gap-8\">\n        <p class=\"zs:text-xs zs:sm:text-sm zs:px-6\">\n            <ng-content select=\"[rights]\"></ng-content>\n\n            @if(showDefultContent()) {\n                &copy;\n                <span class=\"zs:font-semibold\">2026 Ziad Ahmed Shalaby</span>.\n                All rights reserved.\n            }\n        </p>\n\n        @if(pages().length) {\n            <nav class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center\n            zs:gap-y-6 zs:gap-x-4 zs:sm:gap-x-6 zs:md:gap-x-8 zs:lg:gap-x-10 zs:w-full\">\n                @for (page of pages(); track $index) {\n                    <a class=\"zs:text-[10px] zs:sm:text-xs \n                    zs:hover:underline zs:text-center zs:min-w-30\" \n                    [routerLink]=\"page.routerLink\">\n                        {{ page.label }}\n                    </a>\n                }\n            </nav>\n        }\n    </div>\n</footer>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Footer, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-footer', imports: [RouterModule], template: "<footer class=\"zs:bg-gray-700 zs:dark:bg-gray-950 \nzs:dark:text-gray-300 zs:text-white zs:py-6 zs:transition-colors\">\n    <div class=\"zs:text-center zs:flex zs:flex-col zs:gap-8\">\n        <p class=\"zs:text-xs zs:sm:text-sm zs:px-6\">\n            <ng-content select=\"[rights]\"></ng-content>\n\n            @if(showDefultContent()) {\n                &copy;\n                <span class=\"zs:font-semibold\">2026 Ziad Ahmed Shalaby</span>.\n                All rights reserved.\n            }\n        </p>\n\n        @if(pages().length) {\n            <nav class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center\n            zs:gap-y-6 zs:gap-x-4 zs:sm:gap-x-6 zs:md:gap-x-8 zs:lg:gap-x-10 zs:w-full\">\n                @for (page of pages(); track $index) {\n                    <a class=\"zs:text-[10px] zs:sm:text-xs \n                    zs:hover:underline zs:text-center zs:min-w-30\" \n                    [routerLink]=\"page.routerLink\">\n                        {{ page.label }}\n                    </a>\n                }\n            </nav>\n        }\n    </div>\n</footer>\n" }]
+            args: [{ selector: 'ZS-footer', imports: [RouterModule], template: "<footer class=\"zs:bg-gray-700 zs:dark:bg-gray-950 \nzs:dark:text-gray-300 zs:text-white zs:py-6\">\n    <div class=\"zs:text-center zs:flex zs:flex-col zs:gap-8\">\n        <p class=\"zs:text-xs zs:sm:text-sm zs:px-6\">\n            <ng-content select=\"[rights]\"></ng-content>\n\n            @if(showDefultContent()) {\n                &copy;\n                <span class=\"zs:font-semibold\">2026 Ziad Ahmed Shalaby</span>.\n                All rights reserved.\n            }\n        </p>\n\n        @if(pages().length) {\n            <nav class=\"zs:flex zs:flex-wrap zs:justify-center zs:items-center\n            zs:gap-y-6 zs:gap-x-4 zs:sm:gap-x-6 zs:md:gap-x-8 zs:lg:gap-x-10 zs:w-full\">\n                @for (page of pages(); track $index) {\n                    <a class=\"zs:text-[10px] zs:sm:text-xs \n                    zs:hover:underline zs:text-center zs:min-w-30\" \n                    [routerLink]=\"page.routerLink\">\n                        {{ page.label }}\n                    </a>\n                }\n            </nav>\n        }\n    </div>\n</footer>\n" }]
         }], propDecorators: { showDefultContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDefultContent", required: false }] }], pages: [{ type: i0.Input, args: [{ isSignal: true, alias: "pages", required: false }] }] } });
 
 class Sidebar {
@@ -3269,11 +3269,11 @@ class Sidebar {
         this.openSide.update((v) => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Sidebar, isStandalone: true, selector: "ZS-sidebar", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, openSide: { classPropertyName: "openSide", publicName: "openSide", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openSide: "openSideChange" }, ngImport: i0, template: "<div \nclass=\"zs:h-full {{ zIndices.sideBar }} zs:transition-[max-width]\"\n[ngClass]=\"[\n  floating() ? 'zs:absolute' : 'zs:md:relative zs:absolute',\n  openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n]\"\n>\n  <!-- Sidebar -->\n  <div\n    id=\"sidebar\"\n    role=\"complementary\"\n    aria-labelledby=\"sidebar-header\"\n    class=\"\n      zs:h-full \n      zs:bg-white zs:dark:bg-slate-800 zs:backdrop-blur-md \n      zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n      zs:transition-[translate]\n      zs:duration-600 sidebar-shadow-right \n      motion-reduce:zs:transition-none zs:overflow-hidden\n    \"\n\n    [attr.aria-hidden]=\"!openSide()\"\n    [attr.inert]=\"!openSide() ? '' : null\"\n\n    [ngClass]=\"\n      openSide()\n        ? 'zs:translate-x-0'\n        : 'zs:-translate-x-full'\n    \"\n  >\n    <!-- Close Sidebar Button -->\n    <button\n      class=\"\n        zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n        zs:top-3 zs:right-2\n        zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n        zs:dark:hover:bg-gray-600\n        zs:transition-[width,opacity,color,background-color] zs:duration-300 zs:ease-in-out\n      \"\n      aria-label=\"Close sidebar\"\n      aria-controls=\"sidebar\"\n      [attr.aria-expanded]=\"openSide()\"\n      [ngClass]=\"openSide() ? 'zs:opacity-100' : 'zs:opacity-0'\"\n      (click)=\"toggleSide()\"\n    >\n      <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path\n          d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n        />\n        <path d=\"M9 4l0 16\" />\n      </svg>\n    </button>\n\n    <h2\n      id=\"sidebar-header\"\n      class=\"zs:font-semibold zs:text-xl zs:transition-colors zs:duration-300 \n      zs:text-slate-900 zs:dark:text-slate-100 zs:p-2 zs:pt-4\"\n    >\n      {{ header() }}\n    </h2>\n\n    <hr class=\"zs:w-full\" />\n\n    <div class=\"zs:h-[calc(100%-52px)]\">\n      <ng-content select=\"[main]\"></ng-content>\n    </div>\n  </div>\n\n  <!-- Open Sidebar Button -->\n  <button\n    class=\"\n      zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n      zs:top-3 zs:left-2\n      zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n      zs:dark:hover:bg-gray-600\n      zs:transition-[width,opacity,color,background-color] zs:duration-300 zs:ease-in-out\n    \"\n    aria-label=\"Open sidebar\"\n    aria-controls=\"sidebar\"\n    [attr.aria-expanded]=\"openSide()\"\n    [ngClass]=\"openSide() ? 'zs:delay-0 zs:opacity-0 zs:pointer-events-none' : 'zs:delay-300 zs:opacity-100 zs:pointer-events-auto'\"\n    (click)=\"toggleSide()\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path\n        d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n      />\n      <path d=\"M9 4l0 16\" />\n    </svg>\n  </button>\n</div>\n", styles: [":host{display:block;position:relative;width:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Sidebar, isStandalone: true, selector: "ZS-sidebar", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, openSide: { classPropertyName: "openSide", publicName: "openSide", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openSide: "openSideChange" }, ngImport: i0, template: "<div \nclass=\"zs:h-full {{ zIndices.sideBar }} zs:transition-[max-width]\"\n[ngClass]=\"[\n  floating() ? 'zs:absolute' : 'zs:md:relative zs:absolute',\n  openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n]\"\n>\n  <!-- Sidebar -->\n  <div\n    id=\"sidebar\"\n    role=\"complementary\"\n    aria-labelledby=\"sidebar-header\"\n    class=\"\n      zs:h-full \n      zs:bg-white zs:dark:bg-slate-800 zs:backdrop-blur-md \n      zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n      zs:transition-[translate]\n      zs:duration-600 sidebar-shadow-right \n      motion-reduce:zs:transition-none zs:overflow-hidden\n    \"\n\n    [attr.aria-hidden]=\"!openSide()\"\n    [attr.inert]=\"!openSide() ? '' : null\"\n\n    [ngClass]=\"\n      openSide()\n        ? 'zs:translate-x-0'\n        : 'zs:-translate-x-full'\n    \"\n  >\n    <!-- Close Sidebar Button -->\n    <button\n      class=\"\n        zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n        zs:top-3 zs:right-2\n        zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n        zs:dark:hover:bg-gray-600\n        zs:transition-opacity zs:duration-300 zs:ease-in-out\n      \"\n      aria-label=\"Close sidebar\"\n      aria-controls=\"sidebar\"\n      [attr.aria-expanded]=\"openSide()\"\n      [ngClass]=\"openSide() ? 'zs:opacity-100' : 'zs:opacity-0'\"\n      (click)=\"toggleSide()\"\n    >\n      <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path\n          d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n        />\n        <path d=\"M9 4l0 16\" />\n      </svg>\n    </button>\n\n    <h2\n      id=\"sidebar-header\"\n      class=\"zs:font-semibold zs:text-xl\n      zs:text-slate-900 zs:dark:text-slate-100 zs:p-2 zs:pt-4\"\n    >\n      {{ header() }}\n    </h2>\n\n    <hr class=\"zs:w-full\" />\n\n    <div class=\"zs:h-[calc(100%-52px)]\">\n      <ng-content select=\"[main]\"></ng-content>\n    </div>\n  </div>\n\n  <!-- Open Sidebar Button -->\n  <button\n    class=\"\n      zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n      zs:top-3 zs:left-2\n      zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n      zs:dark:hover:bg-gray-600\n      zs:transition-opacity\n      zs:duration-300\n      zs:ease-in-out\n    \"\n    aria-label=\"Open sidebar\"\n    aria-controls=\"sidebar\"\n    [attr.aria-expanded]=\"openSide()\"\n    [ngClass]=\"openSide() ? 'zs:delay-0 zs:opacity-0 zs:pointer-events-none' : 'zs:delay-300 zs:opacity-100 zs:pointer-events-auto'\"\n    (click)=\"toggleSide()\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path\n        d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n      />\n      <path d=\"M9 4l0 16\" />\n    </svg>\n  </button>\n</div>\n", styles: [":host{display:block;position:relative;width:fit-content}\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: Sidebar, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-sidebar', standalone: true, imports: [CommonModule], template: "<div \nclass=\"zs:h-full {{ zIndices.sideBar }} zs:transition-[max-width]\"\n[ngClass]=\"[\n  floating() ? 'zs:absolute' : 'zs:md:relative zs:absolute',\n  openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n]\"\n>\n  <!-- Sidebar -->\n  <div\n    id=\"sidebar\"\n    role=\"complementary\"\n    aria-labelledby=\"sidebar-header\"\n    class=\"\n      zs:h-full \n      zs:bg-white zs:dark:bg-slate-800 zs:backdrop-blur-md \n      zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n      zs:transition-[translate]\n      zs:duration-600 sidebar-shadow-right \n      motion-reduce:zs:transition-none zs:overflow-hidden\n    \"\n\n    [attr.aria-hidden]=\"!openSide()\"\n    [attr.inert]=\"!openSide() ? '' : null\"\n\n    [ngClass]=\"\n      openSide()\n        ? 'zs:translate-x-0'\n        : 'zs:-translate-x-full'\n    \"\n  >\n    <!-- Close Sidebar Button -->\n    <button\n      class=\"\n        zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n        zs:top-3 zs:right-2\n        zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n        zs:dark:hover:bg-gray-600\n        zs:transition-[width,opacity,color,background-color] zs:duration-300 zs:ease-in-out\n      \"\n      aria-label=\"Close sidebar\"\n      aria-controls=\"sidebar\"\n      [attr.aria-expanded]=\"openSide()\"\n      [ngClass]=\"openSide() ? 'zs:opacity-100' : 'zs:opacity-0'\"\n      (click)=\"toggleSide()\"\n    >\n      <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path\n          d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n        />\n        <path d=\"M9 4l0 16\" />\n      </svg>\n    </button>\n\n    <h2\n      id=\"sidebar-header\"\n      class=\"zs:font-semibold zs:text-xl zs:transition-colors zs:duration-300 \n      zs:text-slate-900 zs:dark:text-slate-100 zs:p-2 zs:pt-4\"\n    >\n      {{ header() }}\n    </h2>\n\n    <hr class=\"zs:w-full\" />\n\n    <div class=\"zs:h-[calc(100%-52px)]\">\n      <ng-content select=\"[main]\"></ng-content>\n    </div>\n  </div>\n\n  <!-- Open Sidebar Button -->\n  <button\n    class=\"\n      zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n      zs:top-3 zs:left-2\n      zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n      zs:dark:hover:bg-gray-600\n      zs:transition-[width,opacity,color,background-color] zs:duration-300 zs:ease-in-out\n    \"\n    aria-label=\"Open sidebar\"\n    aria-controls=\"sidebar\"\n    [attr.aria-expanded]=\"openSide()\"\n    [ngClass]=\"openSide() ? 'zs:delay-0 zs:opacity-0 zs:pointer-events-none' : 'zs:delay-300 zs:opacity-100 zs:pointer-events-auto'\"\n    (click)=\"toggleSide()\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path\n        d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n      />\n      <path d=\"M9 4l0 16\" />\n    </svg>\n  </button>\n</div>\n", styles: [":host{display:block;position:relative;width:fit-content}\n"] }]
+            args: [{ selector: 'ZS-sidebar', standalone: true, imports: [CommonModule], template: "<div \nclass=\"zs:h-full {{ zIndices.sideBar }} zs:transition-[max-width]\"\n[ngClass]=\"[\n  floating() ? 'zs:absolute' : 'zs:md:relative zs:absolute',\n  openSide() ? 'zs:max-w-[75vw]' : 'zs:max-w-0'\n]\"\n>\n  <!-- Sidebar -->\n  <div\n    id=\"sidebar\"\n    role=\"complementary\"\n    aria-labelledby=\"sidebar-header\"\n    class=\"\n      zs:h-full \n      zs:bg-white zs:dark:bg-slate-800 zs:backdrop-blur-md \n      zs:w-[75vw] zs:sm:w-[55vw] zs:md:w-[40vw] zs:lg:w-[25vw] zs:xl:w-[15vw]\n      zs:transition-[translate]\n      zs:duration-600 sidebar-shadow-right \n      motion-reduce:zs:transition-none zs:overflow-hidden\n    \"\n\n    [attr.aria-hidden]=\"!openSide()\"\n    [attr.inert]=\"!openSide() ? '' : null\"\n\n    [ngClass]=\"\n      openSide()\n        ? 'zs:translate-x-0'\n        : 'zs:-translate-x-full'\n    \"\n  >\n    <!-- Close Sidebar Button -->\n    <button\n      class=\"\n        zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n        zs:top-3 zs:right-2\n        zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n        zs:dark:hover:bg-gray-600\n        zs:transition-opacity zs:duration-300 zs:ease-in-out\n      \"\n      aria-label=\"Close sidebar\"\n      aria-controls=\"sidebar\"\n      [attr.aria-expanded]=\"openSide()\"\n      [ngClass]=\"openSide() ? 'zs:opacity-100' : 'zs:opacity-0'\"\n      (click)=\"toggleSide()\"\n    >\n      <svg\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path\n          d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n        />\n        <path d=\"M9 4l0 16\" />\n      </svg>\n    </button>\n\n    <h2\n      id=\"sidebar-header\"\n      class=\"zs:font-semibold zs:text-xl\n      zs:text-slate-900 zs:dark:text-slate-100 zs:p-2 zs:pt-4\"\n    >\n      {{ header() }}\n    </h2>\n\n    <hr class=\"zs:w-full\" />\n\n    <div class=\"zs:h-[calc(100%-52px)]\">\n      <ng-content select=\"[main]\"></ng-content>\n    </div>\n  </div>\n\n  <!-- Open Sidebar Button -->\n  <button\n    class=\"\n      zs:absolute zs:rounded-lg zs:p-1 zs:cursor-pointer\n      zs:top-3 zs:left-2\n      zs:bg-gray-200 zs:dark:bg-gray-700 zs:hover:bg-gray-300\n      zs:dark:hover:bg-gray-600\n      zs:transition-opacity\n      zs:duration-300\n      zs:ease-in-out\n    \"\n    aria-label=\"Open sidebar\"\n    aria-controls=\"sidebar\"\n    [attr.aria-expanded]=\"openSide()\"\n    [ngClass]=\"openSide() ? 'zs:delay-0 zs:opacity-0 zs:pointer-events-none' : 'zs:delay-300 zs:opacity-100 zs:pointer-events-auto'\"\n    (click)=\"toggleSide()\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path\n        d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\"\n      />\n      <path d=\"M9 4l0 16\" />\n    </svg>\n  </button>\n</div>\n", styles: [":host{display:block;position:relative;width:fit-content}\n"] }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], openSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "openSide", required: false }] }, { type: i0.Output, args: ["openSideChange"] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }] } });
 
 /*