@ziadshalaby/ngx-zs-component 3.0.8 → 3.0.9

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

@@ -1881,11 +1881,11 @@ class Spinner {
     borderColor = computed(() => ColorMapping.get(this.color())?.border, ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
     textColor = computed(() => ColorMapping.get(this.color())?.text, ...(ngDevMode ? [{ debugName: "textColor" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Spinner, isStandalone: true, selector: "ZS-spinner", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isFloating: { classPropertyName: "isFloating", publicName: "isFloating", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, withBox: { classPropertyName: "withBox", publicName: "withBox", isSignal: true, isRequired: false, transformFunction: null }, boxColorClass: { classPropertyName: "boxColorClass", publicName: "boxColorClass", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n  <div \n    [class]=\"wrapperClasses()\" \n    role=\"status\" \n    aria-live=\"polite\" \n    aria-busy=\"true\"\n  >\n    <div [class]=\"boxClasses()\">\n  \n      @switch (type()) {\n  \n        <!-- ========================= Spinner ========================= -->\n        @case ('spinner') {\n          <i \n            [ngClass]=\"['fas fa-spinner fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pro Spinner ========================= -->\n        @case ('pro') {\n          <div \n            [ngClass]=\"['zs:animate-spin zs:rounded-full zs:border-solid', spinnerSizeProClass(), borderColor()]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Gear ========================= -->\n        @case ('gear') {\n          <i \n            [ngClass]=\"['fas fa-gear fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Fan ========================= -->\n        @case ('fan') {\n          <i \n            [ngClass]=\"['fas fa-fan fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pulse ========================= -->\n        @case ('pulse') {\n          <div \n            [ngClass]=\"[\n              'zs:animate-spin zs:rounded-full zs:border-solid',\n              spinnerSizePulseClass(),\n              borderColor(),\n              'zs:border-t-transparent!'\n            ]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Dots ========================= -->\n        @case ('dots') {\n          <div class=\"zs:flex zs:gap-2 zs:items-center\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Bars ========================= -->\n        @case ('bars') {\n          <div class=\"zs:flex zs:gap-1 zs:items-center zs:h-6\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(1)]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(2)]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(3)]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Double Spinner ========================= -->\n        @case ('double') {\n          <div class=\"zs:relative\" aria-hidden=\"true\">\n            <!-- Outer ring -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:rounded-full zs:border-solid',\n                spinnerSizeDoubleClass(1),\n                borderColor(), \n                'zs:border-t-transparent!'\n              ]\"\n            ></div>\n            <!-- Inner ring (reversed animation) -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:opacity-75 zs:rounded-full zs:border-solid zs:absolute \n                zs:top-1/2 zs:left-1/2 zs:-translate-x-1/2 zs:-translate-y-1/2',\n                spinnerSizeDoubleClass(2),\n                borderColor(), \n                'zs:border-b-transparent!'\n              ]\"\n              style=\"animation-direction: reverse;\"\n            ></div>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n      }\n      \n    </div>\n  </div>\n}", styles: ["@keyframes bar-scale{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.animate-bar-scale{animation:bar-scale .9s ease-in-out infinite}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Spinner, isStandalone: true, selector: "ZS-spinner", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isFloating: { classPropertyName: "isFloating", publicName: "isFloating", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, withBox: { classPropertyName: "withBox", publicName: "withBox", isSignal: true, isRequired: false, transformFunction: null }, boxColorClass: { classPropertyName: "boxColorClass", publicName: "boxColorClass", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n  <div \n    [class]=\"wrapperClasses()\" \n    role=\"status\" \n    aria-live=\"polite\" \n    aria-busy=\"true\"\n  >\n    <div [class]=\"boxClasses()\">\n  \n      @switch (type()) {\n  \n        <!-- ========================= Spinner ========================= -->\n        @case ('spinner') {\n          <i \n            [ngClass]=\"['fas fa-spinner fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pro Spinner ========================= -->\n        @case ('pro') {\n          <div \n            [ngClass]=\"['zs:animate-spin zs:rounded-full zs:border-solid', spinnerSizeProClass(), borderColor()]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Gear ========================= -->\n        @case ('gear') {\n          <i \n            [ngClass]=\"['fas fa-gear fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Fan ========================= -->\n        @case ('fan') {\n          <i \n            [ngClass]=\"['fas fa-fan fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pulse ========================= -->\n        @case ('pulse') {\n          <div \n            [ngClass]=\"[\n              'zs:animate-spin zs:rounded-full zs:border-solid',\n              spinnerSizePulseClass(),\n              borderColor(),\n              'zs:border-t-transparent!'\n            ]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Dots ========================= -->\n        @case ('dots') {\n          <div class=\"zs:flex zs:gap-2 zs:items-center\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Bars ========================= -->\n        @case ('bars') {\n          <div class=\"zs:flex zs:gap-1 zs:items-center zs:h-6\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(1)]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(2)]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(3)]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Double Spinner ========================= -->\n        @case ('double') {\n          <div class=\"zs:relative\" aria-hidden=\"true\">\n            <!-- Outer ring -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:rounded-full zs:border-solid',\n                spinnerSizeDoubleClass(1),\n                borderColor(), \n                'zs:border-t-transparent!'\n              ]\"\n            ></div>\n            <!-- Inner ring (reversed animation) -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:opacity-75 zs:rounded-full zs:border-solid zs:absolute \n                zs:top-1/2 zs:left-1/2 zs:-translate-x-1/2 zs:-translate-y-1/2',\n                spinnerSizeDoubleClass(2),\n                borderColor(), \n                'zs:border-b-transparent!'\n              ]\"\n              style=\"animation-direction: reverse;\"\n            ></div>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n      }\n    </div>\n  </div>\n}", styles: ["@keyframes bar-scale{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.animate-bar-scale{animation:bar-scale .9s ease-in-out infinite}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Spinner, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-spinner', imports: [CommonModule], template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n  <div \n    [class]=\"wrapperClasses()\" \n    role=\"status\" \n    aria-live=\"polite\" \n    aria-busy=\"true\"\n  >\n    <div [class]=\"boxClasses()\">\n  \n      @switch (type()) {\n  \n        <!-- ========================= Spinner ========================= -->\n        @case ('spinner') {\n          <i \n            [ngClass]=\"['fas fa-spinner fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pro Spinner ========================= -->\n        @case ('pro') {\n          <div \n            [ngClass]=\"['zs:animate-spin zs:rounded-full zs:border-solid', spinnerSizeProClass(), borderColor()]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Gear ========================= -->\n        @case ('gear') {\n          <i \n            [ngClass]=\"['fas fa-gear fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Fan ========================= -->\n        @case ('fan') {\n          <i \n            [ngClass]=\"['fas fa-fan fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pulse ========================= -->\n        @case ('pulse') {\n          <div \n            [ngClass]=\"[\n              'zs:animate-spin zs:rounded-full zs:border-solid',\n              spinnerSizePulseClass(),\n              borderColor(),\n              'zs:border-t-transparent!'\n            ]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Dots ========================= -->\n        @case ('dots') {\n          <div class=\"zs:flex zs:gap-2 zs:items-center\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Bars ========================= -->\n        @case ('bars') {\n          <div class=\"zs:flex zs:gap-1 zs:items-center zs:h-6\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(1)]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(2)]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(3)]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Double Spinner ========================= -->\n        @case ('double') {\n          <div class=\"zs:relative\" aria-hidden=\"true\">\n            <!-- Outer ring -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:rounded-full zs:border-solid',\n                spinnerSizeDoubleClass(1),\n                borderColor(), \n                'zs:border-t-transparent!'\n              ]\"\n            ></div>\n            <!-- Inner ring (reversed animation) -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:opacity-75 zs:rounded-full zs:border-solid zs:absolute \n                zs:top-1/2 zs:left-1/2 zs:-translate-x-1/2 zs:-translate-y-1/2',\n                spinnerSizeDoubleClass(2),\n                borderColor(), \n                'zs:border-b-transparent!'\n              ]\"\n              style=\"animation-direction: reverse;\"\n            ></div>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n      }\n      \n    </div>\n  </div>\n}", styles: ["@keyframes bar-scale{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.animate-bar-scale{animation:bar-scale .9s ease-in-out infinite}\n"] }]
+            args: [{ selector: 'ZS-spinner', imports: [CommonModule], template: "<!-- ========================= Loader Wrapper ========================= -->\n@if(loading()) {\n  <div \n    [class]=\"wrapperClasses()\" \n    role=\"status\" \n    aria-live=\"polite\" \n    aria-busy=\"true\"\n  >\n    <div [class]=\"boxClasses()\">\n  \n      @switch (type()) {\n  \n        <!-- ========================= Spinner ========================= -->\n        @case ('spinner') {\n          <i \n            [ngClass]=\"['fas fa-spinner fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pro Spinner ========================= -->\n        @case ('pro') {\n          <div \n            [ngClass]=\"['zs:animate-spin zs:rounded-full zs:border-solid', spinnerSizeProClass(), borderColor()]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Gear ========================= -->\n        @case ('gear') {\n          <i \n            [ngClass]=\"['fas fa-gear fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Fan ========================= -->\n        @case ('fan') {\n          <i \n            [ngClass]=\"['fas fa-fan fa-spin', spinnerSizeTextClass(), textColor()]\" \n            aria-hidden=\"true\"\n          ></i>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Pulse ========================= -->\n        @case ('pulse') {\n          <div \n            [ngClass]=\"[\n              'zs:animate-spin zs:rounded-full zs:border-solid',\n              spinnerSizePulseClass(),\n              borderColor(),\n              'zs:border-t-transparent!'\n            ]\" \n            aria-hidden=\"true\"\n          ></div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Dots ========================= -->\n        @case ('dots') {\n          <div class=\"zs:flex zs:gap-2 zs:items-center\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-full zs:animate-bounce\" \n              [ngClass]=\"[bgColor(), spinnerSizeDotsClass()]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Bars ========================= -->\n        @case ('bars') {\n          <div class=\"zs:flex zs:gap-1 zs:items-center zs:h-6\" aria-hidden=\"true\">\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(1)]\" \n              style=\"animation-delay: 0s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(2)]\" \n              style=\"animation-delay: 0.2s\"\n            ></span>\n            <span \n              class=\"zs:rounded-sm animate-bar-scale\" \n              [ngClass]=\"[bgColor(), spinnerSizeBarsClass(3)]\" \n              style=\"animation-delay: 0.4s\"\n            ></span>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n  \n        <!-- ========================= Double Spinner ========================= -->\n        @case ('double') {\n          <div class=\"zs:relative\" aria-hidden=\"true\">\n            <!-- Outer ring -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:rounded-full zs:border-solid',\n                spinnerSizeDoubleClass(1),\n                borderColor(), \n                'zs:border-t-transparent!'\n              ]\"\n            ></div>\n            <!-- Inner ring (reversed animation) -->\n            <div \n              [ngClass]=\"[\n                'zs:animate-spin zs:opacity-75 zs:rounded-full zs:border-solid zs:absolute \n                zs:top-1/2 zs:left-1/2 zs:-translate-x-1/2 zs:-translate-y-1/2',\n                spinnerSizeDoubleClass(2),\n                borderColor(), \n                'zs:border-b-transparent!'\n              ]\"\n              style=\"animation-direction: reverse;\"\n            ></div>\n          </div>\n          <span class=\"sr-only\">Loading...</span>\n        }\n      }\n    </div>\n  </div>\n}", styles: ["@keyframes bar-scale{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.animate-bar-scale{animation:bar-scale .9s ease-in-out infinite}\n"] }]
         }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], isFloating: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFloating", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], withBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBox", required: false }] }], boxColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "boxColorClass", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 // ==============================================
@@ -2026,11 +2026,11 @@ class Label {
         return sizes[this.size()];
     }, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Label, isStandalone: true, selector: "ZS-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintId: { classPropertyName: "hintId", publicName: "hintId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n  <label \n    [for]=\"for()\" \n    class=\"zs:flex zs:items-center zs:gap-2\"\n  >\n\n    <!-- ========== Label Text ========== -->\n    @if (label()) {\n      <span class=\"zs:font-semibold zs:truncate\" [ngClass]=\"sizeClasses().label\">\n        {{ label() }}\n\n        <!-- Required Indicator -->\n        @if (required()) {\n          <span class=\"zs:text-red-500\" aria-hidden=\"true\">*</span>\n          <span class=\"sr-only\">(required)</span>\n        }\n      </span>\n    }\n\n    <!-- ========== Hint Text ========== -->\n    @if (hint()) {\n      <small\n        [id]=\"hintId()\"\n        class=\"zs:text-slate-500 zs:dark:text-slate-400\" \n        [ngClass]=\"sizeClasses().hint\"\n      >\n        {{ hint() }}\n      </small>\n    }\n    <!-- ========== End Hint Text ========== -->\n\n  </label>\n}\n<!-- ================= End Label Wrapper ================= -->", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Label, isStandalone: true, selector: "ZS-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintId: { classPropertyName: "hintId", publicName: "hintId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n  <label \n    [for]=\"for()\" \n    class=\"zs:flex zs:flex-wrap zs:items-center zs:gap-2\"\n  >\n\n    <!-- ========== Label Text ========== -->\n    @if (label()) {\n      <span class=\"zs:font-semibold\" [ngClass]=\"sizeClasses().label\">\n        {{ label() }}\n\n        <!-- Required Indicator -->\n        @if (required()) {\n          <span class=\"zs:text-red-500\" aria-hidden=\"true\">*</span>\n          <span class=\"sr-only\">(required)</span>\n        }\n      </span>\n    }\n\n    <!-- ========== Hint Text ========== -->\n    @if (hint()) {\n      <small\n        [id]=\"hintId()\"\n        class=\"zs:text-slate-500 zs:dark:text-slate-400\" \n        [ngClass]=\"sizeClasses().hint\"\n      >\n        {{ hint() }}\n      </small>\n    }\n    <!-- ========== End Hint Text ========== -->\n\n  </label>\n}\n<!-- ================= End Label Wrapper ================= -->", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Label, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-label', imports: [CommonModule], template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n  <label \n    [for]=\"for()\" \n    class=\"zs:flex zs:items-center zs:gap-2\"\n  >\n\n    <!-- ========== Label Text ========== -->\n    @if (label()) {\n      <span class=\"zs:font-semibold zs:truncate\" [ngClass]=\"sizeClasses().label\">\n        {{ label() }}\n\n        <!-- Required Indicator -->\n        @if (required()) {\n          <span class=\"zs:text-red-500\" aria-hidden=\"true\">*</span>\n          <span class=\"sr-only\">(required)</span>\n        }\n      </span>\n    }\n\n    <!-- ========== Hint Text ========== -->\n    @if (hint()) {\n      <small\n        [id]=\"hintId()\"\n        class=\"zs:text-slate-500 zs:dark:text-slate-400\" \n        [ngClass]=\"sizeClasses().hint\"\n      >\n        {{ hint() }}\n      </small>\n    }\n    <!-- ========== End Hint Text ========== -->\n\n  </label>\n}\n<!-- ================= End Label Wrapper ================= -->", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ZS-label', imports: [CommonModule], template: "<!-- ================= Label Wrapper ================= -->\n@if (label() || hint()) {\n  <label \n    [for]=\"for()\" \n    class=\"zs:flex zs:flex-wrap zs:items-center zs:gap-2\"\n  >\n\n    <!-- ========== Label Text ========== -->\n    @if (label()) {\n      <span class=\"zs:font-semibold\" [ngClass]=\"sizeClasses().label\">\n        {{ label() }}\n\n        <!-- Required Indicator -->\n        @if (required()) {\n          <span class=\"zs:text-red-500\" aria-hidden=\"true\">*</span>\n          <span class=\"sr-only\">(required)</span>\n        }\n      </span>\n    }\n\n    <!-- ========== Hint Text ========== -->\n    @if (hint()) {\n      <small\n        [id]=\"hintId()\"\n        class=\"zs:text-slate-500 zs:dark:text-slate-400\" \n        [ngClass]=\"sizeClasses().hint\"\n      >\n        {{ hint() }}\n      </small>\n    }\n    <!-- ========== End Hint Text ========== -->\n\n  </label>\n}\n<!-- ================= End Label Wrapper ================= -->", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], hintId: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }] } });
 
 // ==============================================