nath-angular-ui 0.8.11 → 0.8.13

package/fesm2022/nath-angular-ui.mjs

@@ -298,11 +298,11 @@ class NathBooleanControl {
     }
     isLucideIconComponent = isLucideIconComponent;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathBooleanControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathBooleanControl, isStandalone: true, selector: "nath-boolean-control", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, allowIndeterminate: { classPropertyName: "allowIndeterminate", publicName: "allowIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, yesLabel: { classPropertyName: "yesLabel", publicName: "yesLabel", isSignal: true, isRequired: false, transformFunction: null }, noLabel: { classPropertyName: "noLabel", publicName: "noLabel", isSignal: true, isRequired: false, transformFunction: null }, indeterminateLabel: { classPropertyName: "indeterminateLabel", publicName: "indeterminateLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled", value: "valueChange", disabled: "disabledChange" }, viewQueries: [{ propertyName: "checkboxRef", first: true, predicate: ["checkboxElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (mode() === 'checkbox') {\r\n  <div class=\"nath-boolean-checkbox-container\">\r\n    <label\r\n      class=\"nath-boolean-checkbox-label\"\r\n      [class.nath-boolean-disabled]=\"disabled()\"\r\n      [class]=\"styleClass()\"\r\n    >\r\n      <input\r\n        #checkboxElement\r\n        type=\"checkbox\"\r\n        [checked]=\"value() === true\"\r\n        (change)=\"toggle()\"\r\n        [id]=\"inputId()\"\r\n        [disabled]=\"disabled()\"\r\n      />\r\n      @if (label()) {\r\n        <span>\r\n          {{ label() }}\r\n        </span>\r\n      }\r\n    </label>\r\n  </div>\r\n}\r\n\r\n@if (mode() === 'switch') {\r\n  <label\r\n    class=\"nath-boolean-switch-label\"\r\n    [class.nath-boolean-disabled]=\"disabled()\"\r\n    [class]=\"styleClass()\"\r\n  >\r\n    <div class=\"nath-boolean-switch-wrapper\">\r\n      <input\r\n        type=\"checkbox\"\r\n        [checked]=\"value() === true\"\r\n        (change)=\"toggle()\"\r\n        class=\"nath-boolean-switch-input\"\r\n        [id]=\"inputId()\"\r\n        [disabled]=\"disabled()\"\r\n      />\r\n      <div\r\n        class=\"nath-boolean-switch-track\"\r\n        [class.is-null]=\"value() === null\"\r\n        [class.nath-boolean-disabled]=\"disabled()\"\r\n      >\r\n        @if (icon()) {\r\n          <div\r\n            class=\"nath-boolean-switch-handle-content\"\r\n            [class.is-off]=\"value() === false\"\r\n            [class.is-null]=\"value() === null\"\r\n            [class.is-on]=\"value() === true\"\r\n          >\r\n            @if (isLucideIconComponent(icon()!)) {\r\n              <svg [lucideIcon]=\"icon()!\" />\r\n            } @else {\r\n              <i [ngClass]=\"[icon()!]\"></i>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (label()) {\r\n      <span>\r\n        {{ label() }}\r\n      </span>\r\n    }\r\n  </label>\r\n}\r\n\r\n@if (mode() === 'toggle') {\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n    class=\"nath-boolean-toggle-button\"\r\n    [class]=\"styleClass()\"\r\n    [id]=\"inputId()\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"nath-boolean-toggle-content\" [ngClass]=\"toggleButtonClasses()\">\r\n      @if (icon()) {\r\n        @if (isLucideIconComponent(icon()!)) {\r\n          <svg [lucideIcon]=\"icon()!\" />\r\n        } @else {\r\n          <i [ngClass]=\"[icon()!]\"></i>\r\n        }\r\n      }\r\n      {{ label() || fallbackButtonLabel() }}\r\n    </span>\r\n  </button>\r\n}\r\n", styles: ["nath-boolean-control,.nath-boolean-theme{--nath-boolean-gap: .75rem;--nath-boolean-disabled-opacity: .5;--nath-boolean-transition: all .2s ease-in-out;--nath-switch-width: 3.5rem;--nath-switch-height: 2rem;--nath-switch-bg-off: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-switch-bg-on: var(--color-primary-500, #8e9ba5);--nath-switch-bg-null: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-switch-handle-bg: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-switch-handle-bg-on: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-switch-handle-size: 1.75rem;--nath-switch-handle-offset: 2px;--nath-switch-focus-ring: 1px solid var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-bg-null: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-toggle-text-null: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-bg-on: var(--color-zinc-50, oklch(98.4% .001 286.375));--nath-toggle-text-on: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-bg-off: transparent;--nath-toggle-text-off: inherit;--nath-toggle-padding: .25rem;--nath-toggle-inner-padding: .25rem .375rem;--nath-toggle-border-radius: .375rem;--nath-toggle-button-bg: var(--color-slate-300, oklch(92% .004 286.32));--nath-toggle-button-text: var(--color-slate-800, oklch(27.8% .033 256.848));--nath-toggle-button-hover-bg: var(--color-slate-300, oklch(92% .004 286.32));display:block}.dark nath-boolean-control,.dark .nath-boolean-theme{--nath-switch-bg-off: var(--color-zinc-700, oklch(37% .013 285.805));--nath-switch-bg-null: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-switch-focus-ring: 1px solid var(--color-zinc-50, oklch(98.4% .001 286.375));--nath-toggle-bg-on: var(--color-zinc-50, oklch(98.4% .001 286.375));--nath-toggle-text-on: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-button-bg: var(--color-slate-800, oklch(27.4% .006 286.033));--nath-toggle-button-text: var(--color-slate-200, oklch(92% .004 286.32));--nath-toggle-button-hover-bg: var(--color-slate-700, oklch(37% .013 285.805))}.nath-boolean-checkbox-container{display:flex;align-items:center;gap:var(--nath-boolean-gap);-webkit-user-select:none;user-select:none}.nath-boolean-checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;white-space:nowrap}.nath-boolean-disabled{opacity:var(--nath-boolean-disabled-opacity);cursor:not-allowed;pointer-events:none}.nath-boolean-switch-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.nath-boolean-switch-wrapper{position:relative;display:inline-flex;align-items:center}.nath-boolean-switch-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.nath-boolean-switch-track{width:var(--nath-switch-width);height:var(--nath-switch-height);background-color:var(--nath-switch-bg-off);border-radius:9999px;transition:var(--nath-boolean-transition);position:relative;display:flex;align-items:center}.nath-boolean-switch-input:focus-visible+.nath-boolean-switch-track{outline:var(--nath-switch-focus-ring)}.nath-boolean-switch-track:after{content:\"\";position:absolute;top:var(--nath-switch-handle-offset);left:var(--nath-switch-handle-offset);height:var(--nath-switch-handle-size);width:var(--nath-switch-handle-size);background-color:var(--nath-switch-handle-bg);border-radius:50%;transition:var(--nath-boolean-transition)}.nath-boolean-switch-input:checked+.nath-boolean-switch-track{background-color:var(--nath-switch-bg-on)}.nath-boolean-switch-input:checked+.nath-boolean-switch-track:after{transform:translate(calc(var(--nath-switch-width) - var(--nath-switch-handle-size) - (var(--nath-switch-handle-offset) * 2)));background-color:var(--nath-switch-handle-bg-on)}.nath-boolean-switch-track.is-null{background-color:var(--nath-switch-bg-null)}.nath-boolean-switch-track.is-null:after{transform:translate(calc((var(--nath-switch-width) - var(--nath-switch-handle-size) - (var(--nath-switch-handle-offset) * 2)) / 2))}.nath-boolean-switch-handle-content{position:absolute;top:var(--nath-switch-handle-offset);z-index:10;display:flex;height:var(--nath-switch-handle-size);width:var(--nath-switch-handle-size);align-items:center;justify-content:center;transition:var(--nath-boolean-transition);pointer-events:none;border-radius:50%;overflow:hidden}.nath-boolean-switch-handle-content.is-off{left:var(--nath-switch-handle-offset)}.nath-boolean-switch-handle-content.is-null{left:calc(50% - (var(--nath-switch-handle-size) / 2))}.nath-boolean-switch-handle-content.is-on{right:var(--nath-switch-handle-offset)}.nath-boolean-toggle-button{padding:.25rem;width:100%;cursor:pointer;border:1px solid transparent;border-radius:.375rem;box-sizing:border-box;display:inline-flex;gap:.5rem;align-items:center;justify-content:center;line-height:1.25rem;text-decoration:none;transition:all .2s;box-shadow:0 1px 2px #0000000d;background-color:var(--nath-toggle-button-bg);color:var(--nath-toggle-button-text)}.nath-boolean-toggle-button:hover:not(:disabled){background-color:var(--nath-toggle-button-hover-bg)}.nath-boolean-toggle-button:focus{outline:none}.nath-boolean-toggle-button:disabled{opacity:.5;cursor:not-allowed}.dark .nath-boolean-toggle-button:disabled{opacity:.3}.nath-boolean-toggle-content{padding:var(--nath-toggle-inner-padding);display:inline-flex;gap:.5rem;align-items:center;justify-content:center;line-height:1.25rem;border-radius:var(--nath-toggle-border-radius);width:100%;transition:var(--nath-boolean-transition)}.nath-boolean-toggle-null{background-color:var(--nath-toggle-bg-null);color:var(--nath-toggle-text-null)}.nath-boolean-toggle-on{background-color:var(--nath-toggle-bg-on);color:var(--nath-toggle-text-on)}.nath-boolean-toggle-off{background-color:var(--nath-toggle-bg-off);color:var(--nath-toggle-text-off)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathBooleanControl, isStandalone: true, selector: "nath-boolean-control", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, allowIndeterminate: { classPropertyName: "allowIndeterminate", publicName: "allowIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, yesLabel: { classPropertyName: "yesLabel", publicName: "yesLabel", isSignal: true, isRequired: false, transformFunction: null }, noLabel: { classPropertyName: "noLabel", publicName: "noLabel", isSignal: true, isRequired: false, transformFunction: null }, indeterminateLabel: { classPropertyName: "indeterminateLabel", publicName: "indeterminateLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled", value: "valueChange", disabled: "disabledChange" }, viewQueries: [{ propertyName: "checkboxRef", first: true, predicate: ["checkboxElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (mode() === 'checkbox') {\r\n  <div class=\"nath-boolean-checkbox-container\">\r\n    <label\r\n      class=\"nath-boolean-checkbox-label\"\r\n      [class.nath-boolean-disabled]=\"disabled()\"\r\n      [class]=\"styleClass()\"\r\n    >\r\n      <input\r\n        #checkboxElement\r\n        type=\"checkbox\"\r\n        [checked]=\"value() === true\"\r\n        (change)=\"toggle()\"\r\n        [id]=\"inputId()\"\r\n        [disabled]=\"disabled()\"\r\n      />\r\n      @if (label()) {\r\n        <span>\r\n          {{ label() }}\r\n        </span>\r\n      }\r\n    </label>\r\n  </div>\r\n}\r\n\r\n@if (mode() === 'switch') {\r\n  <label\r\n    class=\"nath-boolean-switch-label\"\r\n    [class.nath-boolean-disabled]=\"disabled()\"\r\n    [class]=\"styleClass()\"\r\n  >\r\n    <div class=\"nath-boolean-switch-wrapper\">\r\n      <input\r\n        type=\"checkbox\"\r\n        [checked]=\"value() === true\"\r\n        (change)=\"toggle()\"\r\n        class=\"nath-boolean-switch-input\"\r\n        [id]=\"inputId()\"\r\n        [disabled]=\"disabled()\"\r\n      />\r\n      <div\r\n        class=\"nath-boolean-switch-track\"\r\n        [class.is-null]=\"value() === null\"\r\n        [class.nath-boolean-disabled]=\"disabled()\"\r\n      >\r\n        @if (icon()) {\r\n          <div\r\n            class=\"nath-boolean-switch-handle-content\"\r\n            [class.is-off]=\"value() === false\"\r\n            [class.is-null]=\"value() === null\"\r\n            [class.is-on]=\"value() === true\"\r\n          >\r\n            @if (isLucideIconComponent(icon()!)) {\r\n              <svg [lucideIcon]=\"icon()!\" />\r\n            } @else {\r\n              <i [ngClass]=\"[icon()!]\"></i>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (label()) {\r\n      <span>\r\n        {{ label() }}\r\n      </span>\r\n    }\r\n  </label>\r\n}\r\n\r\n@if (mode() === 'toggle') {\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n    class=\"nath-boolean-toggle-button\"\r\n    [class]=\"styleClass()\"\r\n    [id]=\"inputId()\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"nath-boolean-toggle-content\" [ngClass]=\"toggleButtonClasses()\">\r\n      @if (icon()) {\r\n        @if (isLucideIconComponent(icon()!)) {\r\n          <svg [lucideIcon]=\"icon()!\" />\r\n        } @else {\r\n          <i [ngClass]=\"[icon()!]\"></i>\r\n        }\r\n      }\r\n      {{ label() || fallbackButtonLabel() }}\r\n    </span>\r\n  </button>\r\n}\r\n", styles: ["nath-boolean-control,.nath-boolean-theme{--nath-boolean-gap: .75rem;--nath-boolean-disabled-opacity: .5;--nath-boolean-transition: all .2s ease-in-out;--nath-switch-width: 3.5rem;--nath-switch-height: 2rem;--nath-switch-bg-off: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-switch-icon-color-off: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-switch-bg-on: var(--color-primary-500, #8e9ba5);--nath-switch-icon-color-on: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-switch-bg-null: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-switch-handle-bg: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-switch-handle-bg-on: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-switch-handle-size: 1.75rem;--nath-switch-handle-offset: 2px;--nath-switch-focus-ring: 1px solid var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-bg-null: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-toggle-text-null: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-bg-on: var(--color-zinc-50, oklch(98.4% .001 286.375));--nath-toggle-text-on: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-bg-off: transparent;--nath-toggle-text-off: inherit;--nath-toggle-padding: .25rem;--nath-toggle-inner-padding: .25rem .375rem;--nath-toggle-border-radius: .375rem;--nath-toggle-button-bg: var(--color-slate-300, oklch(92% .004 286.32));--nath-toggle-button-text: var(--color-slate-800, oklch(27.8% .033 256.848));--nath-toggle-button-hover-bg: var(--color-slate-300, oklch(92% .004 286.32));display:block}.dark nath-boolean-control,.dark .nath-boolean-theme{--nath-switch-bg-off: var(--color-zinc-700, oklch(37% .013 285.805));--nath-switch-bg-null: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-switch-focus-ring: 1px solid var(--color-zinc-50, oklch(98.4% .001 286.375));--nath-toggle-bg-on: var(--color-zinc-50, oklch(98.4% .001 286.375));--nath-toggle-text-on: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-button-bg: var(--color-slate-800, oklch(27.4% .006 286.033));--nath-toggle-button-text: var(--color-slate-200, oklch(92% .004 286.32));--nath-toggle-button-hover-bg: var(--color-slate-700, oklch(37% .013 285.805))}.nath-boolean-checkbox-container{display:flex;align-items:center;gap:var(--nath-boolean-gap);-webkit-user-select:none;user-select:none}.nath-boolean-checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;white-space:nowrap}.nath-boolean-disabled{opacity:var(--nath-boolean-disabled-opacity);cursor:not-allowed;pointer-events:none}.nath-boolean-switch-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.nath-boolean-switch-wrapper{position:relative;display:inline-flex;align-items:center}.nath-boolean-switch-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.nath-boolean-switch-track{width:var(--nath-switch-width);height:var(--nath-switch-height);background-color:var(--nath-switch-bg-off);color:var(--nath-switch-icon-color-off);border-radius:9999px;transition:var(--nath-boolean-transition);position:relative;display:flex;align-items:center}.nath-boolean-switch-input:focus-visible+.nath-boolean-switch-track{outline:var(--nath-switch-focus-ring)}.nath-boolean-switch-track:after{content:\"\";position:absolute;top:var(--nath-switch-handle-offset);left:var(--nath-switch-handle-offset);height:var(--nath-switch-handle-size);width:var(--nath-switch-handle-size);background-color:var(--nath-switch-handle-bg);border-radius:50%;transition:var(--nath-boolean-transition)}.nath-boolean-switch-input:checked+.nath-boolean-switch-track{background-color:var(--nath-switch-bg-on);color:var(--nath-switch-icon-color-on)}.nath-boolean-switch-input:checked+.nath-boolean-switch-track:after{transform:translate(calc(var(--nath-switch-width) - var(--nath-switch-handle-size) - (var(--nath-switch-handle-offset) * 2)));background-color:var(--nath-switch-handle-bg-on)}.nath-boolean-switch-track.is-null{background-color:var(--nath-switch-bg-null)}.nath-boolean-switch-track.is-null:after{transform:translate(calc((var(--nath-switch-width) - var(--nath-switch-handle-size) - (var(--nath-switch-handle-offset) * 2)) / 2))}.nath-boolean-switch-handle-content{position:absolute;top:var(--nath-switch-handle-offset);z-index:10;display:flex;height:var(--nath-switch-handle-size);width:var(--nath-switch-handle-size);align-items:center;justify-content:center;transition:var(--nath-boolean-transition);pointer-events:none;border-radius:50%;overflow:hidden}.nath-boolean-switch-handle-content.is-off{left:var(--nath-switch-handle-offset)}.nath-boolean-switch-handle-content.is-null{left:calc(50% - (var(--nath-switch-handle-size) / 2))}.nath-boolean-switch-handle-content.is-on{right:var(--nath-switch-handle-offset)}.nath-boolean-toggle-button{padding:.25rem;width:100%;cursor:pointer;border:1px solid transparent;border-radius:.375rem;box-sizing:border-box;display:inline-flex;gap:.5rem;align-items:center;justify-content:center;line-height:1.25rem;text-decoration:none;transition:all .2s;box-shadow:0 1px 2px #0000000d;background-color:var(--nath-toggle-button-bg);color:var(--nath-toggle-button-text)}.nath-boolean-toggle-button:hover:not(:disabled){background-color:var(--nath-toggle-button-hover-bg)}.nath-boolean-toggle-button:focus{outline:none}.nath-boolean-toggle-button:disabled{opacity:.5;cursor:not-allowed}.dark .nath-boolean-toggle-button:disabled{opacity:.3}.nath-boolean-toggle-content{padding:var(--nath-toggle-inner-padding);display:inline-flex;gap:.5rem;align-items:center;justify-content:center;line-height:1.25rem;border-radius:var(--nath-toggle-border-radius);width:100%;transition:var(--nath-boolean-transition)}.nath-boolean-toggle-null{background-color:var(--nath-toggle-bg-null);color:var(--nath-toggle-text-null)}.nath-boolean-toggle-on{background-color:var(--nath-toggle-bg-on);color:var(--nath-toggle-text-on)}.nath-boolean-toggle-off{background-color:var(--nath-toggle-bg-off);color:var(--nath-toggle-text-off)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathBooleanControl, decorators: [{
             type: Component,
-            args: [{ selector: 'nath-boolean-control', imports: [CommonModule, LucideDynamicIcon], encapsulation: ViewEncapsulation.None, template: "@if (mode() === 'checkbox') {\r\n  <div class=\"nath-boolean-checkbox-container\">\r\n    <label\r\n      class=\"nath-boolean-checkbox-label\"\r\n      [class.nath-boolean-disabled]=\"disabled()\"\r\n      [class]=\"styleClass()\"\r\n    >\r\n      <input\r\n        #checkboxElement\r\n        type=\"checkbox\"\r\n        [checked]=\"value() === true\"\r\n        (change)=\"toggle()\"\r\n        [id]=\"inputId()\"\r\n        [disabled]=\"disabled()\"\r\n      />\r\n      @if (label()) {\r\n        <span>\r\n          {{ label() }}\r\n        </span>\r\n      }\r\n    </label>\r\n  </div>\r\n}\r\n\r\n@if (mode() === 'switch') {\r\n  <label\r\n    class=\"nath-boolean-switch-label\"\r\n    [class.nath-boolean-disabled]=\"disabled()\"\r\n    [class]=\"styleClass()\"\r\n  >\r\n    <div class=\"nath-boolean-switch-wrapper\">\r\n      <input\r\n        type=\"checkbox\"\r\n        [checked]=\"value() === true\"\r\n        (change)=\"toggle()\"\r\n        class=\"nath-boolean-switch-input\"\r\n        [id]=\"inputId()\"\r\n        [disabled]=\"disabled()\"\r\n      />\r\n      <div\r\n        class=\"nath-boolean-switch-track\"\r\n        [class.is-null]=\"value() === null\"\r\n        [class.nath-boolean-disabled]=\"disabled()\"\r\n      >\r\n        @if (icon()) {\r\n          <div\r\n            class=\"nath-boolean-switch-handle-content\"\r\n            [class.is-off]=\"value() === false\"\r\n            [class.is-null]=\"value() === null\"\r\n            [class.is-on]=\"value() === true\"\r\n          >\r\n            @if (isLucideIconComponent(icon()!)) {\r\n              <svg [lucideIcon]=\"icon()!\" />\r\n            } @else {\r\n              <i [ngClass]=\"[icon()!]\"></i>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (label()) {\r\n      <span>\r\n        {{ label() }}\r\n      </span>\r\n    }\r\n  </label>\r\n}\r\n\r\n@if (mode() === 'toggle') {\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n    class=\"nath-boolean-toggle-button\"\r\n    [class]=\"styleClass()\"\r\n    [id]=\"inputId()\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"nath-boolean-toggle-content\" [ngClass]=\"toggleButtonClasses()\">\r\n      @if (icon()) {\r\n        @if (isLucideIconComponent(icon()!)) {\r\n          <svg [lucideIcon]=\"icon()!\" />\r\n        } @else {\r\n          <i [ngClass]=\"[icon()!]\"></i>\r\n        }\r\n      }\r\n      {{ label() || fallbackButtonLabel() }}\r\n    </span>\r\n  </button>\r\n}\r\n", styles: ["nath-boolean-control,.nath-boolean-theme{--nath-boolean-gap: .75rem;--nath-boolean-disabled-opacity: .5;--nath-boolean-transition: all .2s ease-in-out;--nath-switch-width: 3.5rem;--nath-switch-height: 2rem;--nath-switch-bg-off: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-switch-bg-on: var(--color-primary-500, #8e9ba5);--nath-switch-bg-null: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-switch-handle-bg: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-switch-handle-bg-on: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-switch-handle-size: 1.75rem;--nath-switch-handle-offset: 2px;--nath-switch-focus-ring: 1px solid var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-bg-null: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-toggle-text-null: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-bg-on: var(--color-zinc-50, oklch(98.4% .001 286.375));--nath-toggle-text-on: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-bg-off: transparent;--nath-toggle-text-off: inherit;--nath-toggle-padding: .25rem;--nath-toggle-inner-padding: .25rem .375rem;--nath-toggle-border-radius: .375rem;--nath-toggle-button-bg: var(--color-slate-300, oklch(92% .004 286.32));--nath-toggle-button-text: var(--color-slate-800, oklch(27.8% .033 256.848));--nath-toggle-button-hover-bg: var(--color-slate-300, oklch(92% .004 286.32));display:block}.dark nath-boolean-control,.dark .nath-boolean-theme{--nath-switch-bg-off: var(--color-zinc-700, oklch(37% .013 285.805));--nath-switch-bg-null: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-switch-focus-ring: 1px solid var(--color-zinc-50, oklch(98.4% .001 286.375));--nath-toggle-bg-on: var(--color-zinc-50, oklch(98.4% .001 286.375));--nath-toggle-text-on: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-button-bg: var(--color-slate-800, oklch(27.4% .006 286.033));--nath-toggle-button-text: var(--color-slate-200, oklch(92% .004 286.32));--nath-toggle-button-hover-bg: var(--color-slate-700, oklch(37% .013 285.805))}.nath-boolean-checkbox-container{display:flex;align-items:center;gap:var(--nath-boolean-gap);-webkit-user-select:none;user-select:none}.nath-boolean-checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;white-space:nowrap}.nath-boolean-disabled{opacity:var(--nath-boolean-disabled-opacity);cursor:not-allowed;pointer-events:none}.nath-boolean-switch-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.nath-boolean-switch-wrapper{position:relative;display:inline-flex;align-items:center}.nath-boolean-switch-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.nath-boolean-switch-track{width:var(--nath-switch-width);height:var(--nath-switch-height);background-color:var(--nath-switch-bg-off);border-radius:9999px;transition:var(--nath-boolean-transition);position:relative;display:flex;align-items:center}.nath-boolean-switch-input:focus-visible+.nath-boolean-switch-track{outline:var(--nath-switch-focus-ring)}.nath-boolean-switch-track:after{content:\"\";position:absolute;top:var(--nath-switch-handle-offset);left:var(--nath-switch-handle-offset);height:var(--nath-switch-handle-size);width:var(--nath-switch-handle-size);background-color:var(--nath-switch-handle-bg);border-radius:50%;transition:var(--nath-boolean-transition)}.nath-boolean-switch-input:checked+.nath-boolean-switch-track{background-color:var(--nath-switch-bg-on)}.nath-boolean-switch-input:checked+.nath-boolean-switch-track:after{transform:translate(calc(var(--nath-switch-width) - var(--nath-switch-handle-size) - (var(--nath-switch-handle-offset) * 2)));background-color:var(--nath-switch-handle-bg-on)}.nath-boolean-switch-track.is-null{background-color:var(--nath-switch-bg-null)}.nath-boolean-switch-track.is-null:after{transform:translate(calc((var(--nath-switch-width) - var(--nath-switch-handle-size) - (var(--nath-switch-handle-offset) * 2)) / 2))}.nath-boolean-switch-handle-content{position:absolute;top:var(--nath-switch-handle-offset);z-index:10;display:flex;height:var(--nath-switch-handle-size);width:var(--nath-switch-handle-size);align-items:center;justify-content:center;transition:var(--nath-boolean-transition);pointer-events:none;border-radius:50%;overflow:hidden}.nath-boolean-switch-handle-content.is-off{left:var(--nath-switch-handle-offset)}.nath-boolean-switch-handle-content.is-null{left:calc(50% - (var(--nath-switch-handle-size) / 2))}.nath-boolean-switch-handle-content.is-on{right:var(--nath-switch-handle-offset)}.nath-boolean-toggle-button{padding:.25rem;width:100%;cursor:pointer;border:1px solid transparent;border-radius:.375rem;box-sizing:border-box;display:inline-flex;gap:.5rem;align-items:center;justify-content:center;line-height:1.25rem;text-decoration:none;transition:all .2s;box-shadow:0 1px 2px #0000000d;background-color:var(--nath-toggle-button-bg);color:var(--nath-toggle-button-text)}.nath-boolean-toggle-button:hover:not(:disabled){background-color:var(--nath-toggle-button-hover-bg)}.nath-boolean-toggle-button:focus{outline:none}.nath-boolean-toggle-button:disabled{opacity:.5;cursor:not-allowed}.dark .nath-boolean-toggle-button:disabled{opacity:.3}.nath-boolean-toggle-content{padding:var(--nath-toggle-inner-padding);display:inline-flex;gap:.5rem;align-items:center;justify-content:center;line-height:1.25rem;border-radius:var(--nath-toggle-border-radius);width:100%;transition:var(--nath-boolean-transition)}.nath-boolean-toggle-null{background-color:var(--nath-toggle-bg-null);color:var(--nath-toggle-text-null)}.nath-boolean-toggle-on{background-color:var(--nath-toggle-bg-on);color:var(--nath-toggle-text-on)}.nath-boolean-toggle-off{background-color:var(--nath-toggle-bg-off);color:var(--nath-toggle-text-off)}\n"] }]
+            args: [{ selector: 'nath-boolean-control', imports: [CommonModule, LucideDynamicIcon], encapsulation: ViewEncapsulation.None, template: "@if (mode() === 'checkbox') {\r\n  <div class=\"nath-boolean-checkbox-container\">\r\n    <label\r\n      class=\"nath-boolean-checkbox-label\"\r\n      [class.nath-boolean-disabled]=\"disabled()\"\r\n      [class]=\"styleClass()\"\r\n    >\r\n      <input\r\n        #checkboxElement\r\n        type=\"checkbox\"\r\n        [checked]=\"value() === true\"\r\n        (change)=\"toggle()\"\r\n        [id]=\"inputId()\"\r\n        [disabled]=\"disabled()\"\r\n      />\r\n      @if (label()) {\r\n        <span>\r\n          {{ label() }}\r\n        </span>\r\n      }\r\n    </label>\r\n  </div>\r\n}\r\n\r\n@if (mode() === 'switch') {\r\n  <label\r\n    class=\"nath-boolean-switch-label\"\r\n    [class.nath-boolean-disabled]=\"disabled()\"\r\n    [class]=\"styleClass()\"\r\n  >\r\n    <div class=\"nath-boolean-switch-wrapper\">\r\n      <input\r\n        type=\"checkbox\"\r\n        [checked]=\"value() === true\"\r\n        (change)=\"toggle()\"\r\n        class=\"nath-boolean-switch-input\"\r\n        [id]=\"inputId()\"\r\n        [disabled]=\"disabled()\"\r\n      />\r\n      <div\r\n        class=\"nath-boolean-switch-track\"\r\n        [class.is-null]=\"value() === null\"\r\n        [class.nath-boolean-disabled]=\"disabled()\"\r\n      >\r\n        @if (icon()) {\r\n          <div\r\n            class=\"nath-boolean-switch-handle-content\"\r\n            [class.is-off]=\"value() === false\"\r\n            [class.is-null]=\"value() === null\"\r\n            [class.is-on]=\"value() === true\"\r\n          >\r\n            @if (isLucideIconComponent(icon()!)) {\r\n              <svg [lucideIcon]=\"icon()!\" />\r\n            } @else {\r\n              <i [ngClass]=\"[icon()!]\"></i>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (label()) {\r\n      <span>\r\n        {{ label() }}\r\n      </span>\r\n    }\r\n  </label>\r\n}\r\n\r\n@if (mode() === 'toggle') {\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n    class=\"nath-boolean-toggle-button\"\r\n    [class]=\"styleClass()\"\r\n    [id]=\"inputId()\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"nath-boolean-toggle-content\" [ngClass]=\"toggleButtonClasses()\">\r\n      @if (icon()) {\r\n        @if (isLucideIconComponent(icon()!)) {\r\n          <svg [lucideIcon]=\"icon()!\" />\r\n        } @else {\r\n          <i [ngClass]=\"[icon()!]\"></i>\r\n        }\r\n      }\r\n      {{ label() || fallbackButtonLabel() }}\r\n    </span>\r\n  </button>\r\n}\r\n", styles: ["nath-boolean-control,.nath-boolean-theme{--nath-boolean-gap: .75rem;--nath-boolean-disabled-opacity: .5;--nath-boolean-transition: all .2s ease-in-out;--nath-switch-width: 3.5rem;--nath-switch-height: 2rem;--nath-switch-bg-off: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-switch-icon-color-off: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-switch-bg-on: var(--color-primary-500, #8e9ba5);--nath-switch-icon-color-on: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-switch-bg-null: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-switch-handle-bg: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-switch-handle-bg-on: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-switch-handle-size: 1.75rem;--nath-switch-handle-offset: 2px;--nath-switch-focus-ring: 1px solid var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-bg-null: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-toggle-text-null: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-bg-on: var(--color-zinc-50, oklch(98.4% .001 286.375));--nath-toggle-text-on: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-bg-off: transparent;--nath-toggle-text-off: inherit;--nath-toggle-padding: .25rem;--nath-toggle-inner-padding: .25rem .375rem;--nath-toggle-border-radius: .375rem;--nath-toggle-button-bg: var(--color-slate-300, oklch(92% .004 286.32));--nath-toggle-button-text: var(--color-slate-800, oklch(27.8% .033 256.848));--nath-toggle-button-hover-bg: var(--color-slate-300, oklch(92% .004 286.32));display:block}.dark nath-boolean-control,.dark .nath-boolean-theme{--nath-switch-bg-off: var(--color-zinc-700, oklch(37% .013 285.805));--nath-switch-bg-null: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-switch-focus-ring: 1px solid var(--color-zinc-50, oklch(98.4% .001 286.375));--nath-toggle-bg-on: var(--color-zinc-50, oklch(98.4% .001 286.375));--nath-toggle-text-on: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-toggle-button-bg: var(--color-slate-800, oklch(27.4% .006 286.033));--nath-toggle-button-text: var(--color-slate-200, oklch(92% .004 286.32));--nath-toggle-button-hover-bg: var(--color-slate-700, oklch(37% .013 285.805))}.nath-boolean-checkbox-container{display:flex;align-items:center;gap:var(--nath-boolean-gap);-webkit-user-select:none;user-select:none}.nath-boolean-checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;white-space:nowrap}.nath-boolean-disabled{opacity:var(--nath-boolean-disabled-opacity);cursor:not-allowed;pointer-events:none}.nath-boolean-switch-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.nath-boolean-switch-wrapper{position:relative;display:inline-flex;align-items:center}.nath-boolean-switch-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.nath-boolean-switch-track{width:var(--nath-switch-width);height:var(--nath-switch-height);background-color:var(--nath-switch-bg-off);color:var(--nath-switch-icon-color-off);border-radius:9999px;transition:var(--nath-boolean-transition);position:relative;display:flex;align-items:center}.nath-boolean-switch-input:focus-visible+.nath-boolean-switch-track{outline:var(--nath-switch-focus-ring)}.nath-boolean-switch-track:after{content:\"\";position:absolute;top:var(--nath-switch-handle-offset);left:var(--nath-switch-handle-offset);height:var(--nath-switch-handle-size);width:var(--nath-switch-handle-size);background-color:var(--nath-switch-handle-bg);border-radius:50%;transition:var(--nath-boolean-transition)}.nath-boolean-switch-input:checked+.nath-boolean-switch-track{background-color:var(--nath-switch-bg-on);color:var(--nath-switch-icon-color-on)}.nath-boolean-switch-input:checked+.nath-boolean-switch-track:after{transform:translate(calc(var(--nath-switch-width) - var(--nath-switch-handle-size) - (var(--nath-switch-handle-offset) * 2)));background-color:var(--nath-switch-handle-bg-on)}.nath-boolean-switch-track.is-null{background-color:var(--nath-switch-bg-null)}.nath-boolean-switch-track.is-null:after{transform:translate(calc((var(--nath-switch-width) - var(--nath-switch-handle-size) - (var(--nath-switch-handle-offset) * 2)) / 2))}.nath-boolean-switch-handle-content{position:absolute;top:var(--nath-switch-handle-offset);z-index:10;display:flex;height:var(--nath-switch-handle-size);width:var(--nath-switch-handle-size);align-items:center;justify-content:center;transition:var(--nath-boolean-transition);pointer-events:none;border-radius:50%;overflow:hidden}.nath-boolean-switch-handle-content.is-off{left:var(--nath-switch-handle-offset)}.nath-boolean-switch-handle-content.is-null{left:calc(50% - (var(--nath-switch-handle-size) / 2))}.nath-boolean-switch-handle-content.is-on{right:var(--nath-switch-handle-offset)}.nath-boolean-toggle-button{padding:.25rem;width:100%;cursor:pointer;border:1px solid transparent;border-radius:.375rem;box-sizing:border-box;display:inline-flex;gap:.5rem;align-items:center;justify-content:center;line-height:1.25rem;text-decoration:none;transition:all .2s;box-shadow:0 1px 2px #0000000d;background-color:var(--nath-toggle-button-bg);color:var(--nath-toggle-button-text)}.nath-boolean-toggle-button:hover:not(:disabled){background-color:var(--nath-toggle-button-hover-bg)}.nath-boolean-toggle-button:focus{outline:none}.nath-boolean-toggle-button:disabled{opacity:.5;cursor:not-allowed}.dark .nath-boolean-toggle-button:disabled{opacity:.3}.nath-boolean-toggle-content{padding:var(--nath-toggle-inner-padding);display:inline-flex;gap:.5rem;align-items:center;justify-content:center;line-height:1.25rem;border-radius:var(--nath-toggle-border-radius);width:100%;transition:var(--nath-boolean-transition)}.nath-boolean-toggle-null{background-color:var(--nath-toggle-bg-null);color:var(--nath-toggle-text-null)}.nath-boolean-toggle-on{background-color:var(--nath-toggle-bg-on);color:var(--nath-toggle-text-on)}.nath-boolean-toggle-off{background-color:var(--nath-toggle-bg-off);color:var(--nath-toggle-text-off)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], allowIndeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowIndeterminate", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], yesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yesLabel", required: false }] }], noLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noLabel", required: false }] }], indeterminateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminateLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], checkboxRef: [{ type: i0.ViewChild, args: ['checkboxElement', { isSignal: true }] }] } });
 
 class NathBreadcrumbService {
@@ -3963,39 +3963,37 @@ class NathProgressBar {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "barWidthPercent" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathProgressBar, isStandalone: true, selector: "nath-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, barClass: { classPropertyName: "barClass", publicName: "barClass", isSignal: true, isRequired: false, transformFunction: null }, valueClass: { classPropertyName: "valueClass", publicName: "valueClass", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div
-      class="nath-progress-bar-fill"
-      [class.nath-progress-bar-fill--indeterminate]="mode() === 'indeterminate'"
-      [class]="barClass()"
-      [style.width.%]="barWidthPercent()"
-    >
-      @if (showValue()) {
-        <span class="nath-progress-bar-value" [class]="valueClass()">
-          {{ value() }}
-        </span>
-      }
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, styles: ["nath-progress-bar,.nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-100, oklch(96.7% .003 286.375));--nath-progress-bar-fill: var(--color-blue-500, oklch(62.3% .214 259.815));--nath-progress-bar-text: #ffffff;--nath-progress-bar-height: 1rem;--nath-progress-bar-radius: 9999px}.dark nath-progress-bar,.dark .nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-800, oklch(27.8% .006 285.923));--nath-progress-bar-fill: var(--color-blue-600, oklch(51.9% .21 259.429))}nath-progress-bar{display:flex;width:100%;height:var(--nath-progress-bar-height);background-color:var(--nath-progress-bar-bg);border-radius:var(--nath-progress-bar-radius);overflow:hidden}.nath-progress-bar-fill{height:100%;background-color:var(--nath-progress-bar-fill);display:flex;align-items:center;justify-content:center;transition:width .3s ease-in-out}.nath-progress-bar-value{color:var(--nath-progress-bar-text);font-size:.75rem;font-weight:500;padding:0 .5rem;white-space:nowrap}@keyframes nath-progress-pulse{0%,to{opacity:1}50%{opacity:.5}}.nath-progress-bar-fill--indeterminate{animation:nath-progress-pulse 2s cubic-bezier(.4,0,.6,1) infinite}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathProgressBar, isStandalone: true, selector: "nath-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, barClass: { classPropertyName: "barClass", publicName: "barClass", isSignal: true, isRequired: false, transformFunction: null }, valueClass: { classPropertyName: "valueClass", publicName: "valueClass", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="nath-progress-bar-fill {{ barClass() }}"
+      [class.nath-progress-bar-fill--indeterminate]="mode() === 'indeterminate'"
+      [style.width.%]="barWidthPercent()"
+    >
+      @if (showValue()) {
+        <span class="nath-progress-bar-value" [class]="valueClass()">
+          {{ value() }}
+        </span>
+      }
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: ["@layer base{nath-progress-bar,.nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-100, oklch(96.7% .003 286.375));--nath-progress-bar-fill: var(--color-blue-500, oklch(62.3% .214 259.815));--nath-progress-bar-text: #ffffff;--nath-progress-bar-height: 1rem;--nath-progress-bar-radius: 9999px}.dark nath-progress-bar,.dark .nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-800, oklch(27.8% .006 285.923));--nath-progress-bar-fill: var(--color-blue-600, oklch(51.9% .21 259.429))}nath-progress-bar{display:flex;width:100%;height:var(--nath-progress-bar-height);background-color:var(--nath-progress-bar-bg);border-radius:var(--nath-progress-bar-radius);overflow:hidden}.nath-progress-bar-fill{height:100%;background-color:var(--nath-progress-bar-fill);display:flex;align-items:center;justify-content:center;transition:width .3s ease-in-out}.nath-progress-bar-value{color:var(--nath-progress-bar-text);font-size:.75rem;font-weight:500;padding:0 .5rem;white-space:nowrap}@keyframes nath-progress-pulse{0%,to{opacity:1}50%{opacity:.5}}.nath-progress-bar-fill--indeterminate{animation:nath-progress-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathProgressBar, decorators: [{
             type: Component,
-            args: [{ selector: 'nath-progress-bar', imports: [], template: `
-    <div
-      class="nath-progress-bar-fill"
-      [class.nath-progress-bar-fill--indeterminate]="mode() === 'indeterminate'"
-      [class]="barClass()"
-      [style.width.%]="barWidthPercent()"
-    >
-      @if (showValue()) {
-        <span class="nath-progress-bar-value" [class]="valueClass()">
-          {{ value() }}
-        </span>
-      }
-      <ng-content></ng-content>
-    </div>
-  `, encapsulation: ViewEncapsulation.None, styles: ["nath-progress-bar,.nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-100, oklch(96.7% .003 286.375));--nath-progress-bar-fill: var(--color-blue-500, oklch(62.3% .214 259.815));--nath-progress-bar-text: #ffffff;--nath-progress-bar-height: 1rem;--nath-progress-bar-radius: 9999px}.dark nath-progress-bar,.dark .nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-800, oklch(27.8% .006 285.923));--nath-progress-bar-fill: var(--color-blue-600, oklch(51.9% .21 259.429))}nath-progress-bar{display:flex;width:100%;height:var(--nath-progress-bar-height);background-color:var(--nath-progress-bar-bg);border-radius:var(--nath-progress-bar-radius);overflow:hidden}.nath-progress-bar-fill{height:100%;background-color:var(--nath-progress-bar-fill);display:flex;align-items:center;justify-content:center;transition:width .3s ease-in-out}.nath-progress-bar-value{color:var(--nath-progress-bar-text);font-size:.75rem;font-weight:500;padding:0 .5rem;white-space:nowrap}@keyframes nath-progress-pulse{0%,to{opacity:1}50%{opacity:.5}}.nath-progress-bar-fill--indeterminate{animation:nath-progress-pulse 2s cubic-bezier(.4,0,.6,1) infinite}\n"] }]
+            args: [{ selector: 'nath-progress-bar', imports: [], template: `
+    <div
+      class="nath-progress-bar-fill {{ barClass() }}"
+      [class.nath-progress-bar-fill--indeterminate]="mode() === 'indeterminate'"
+      [style.width.%]="barWidthPercent()"
+    >
+      @if (showValue()) {
+        <span class="nath-progress-bar-value" [class]="valueClass()">
+          {{ value() }}
+        </span>
+      }
+      <ng-content></ng-content>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: ["@layer base{nath-progress-bar,.nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-100, oklch(96.7% .003 286.375));--nath-progress-bar-fill: var(--color-blue-500, oklch(62.3% .214 259.815));--nath-progress-bar-text: #ffffff;--nath-progress-bar-height: 1rem;--nath-progress-bar-radius: 9999px}.dark nath-progress-bar,.dark .nath-progress-bar-theme{--nath-progress-bar-bg: var(--color-zinc-800, oklch(27.8% .006 285.923));--nath-progress-bar-fill: var(--color-blue-600, oklch(51.9% .21 259.429))}nath-progress-bar{display:flex;width:100%;height:var(--nath-progress-bar-height);background-color:var(--nath-progress-bar-bg);border-radius:var(--nath-progress-bar-radius);overflow:hidden}.nath-progress-bar-fill{height:100%;background-color:var(--nath-progress-bar-fill);display:flex;align-items:center;justify-content:center;transition:width .3s ease-in-out}.nath-progress-bar-value{color:var(--nath-progress-bar-text);font-size:.75rem;font-weight:500;padding:0 .5rem;white-space:nowrap}@keyframes nath-progress-pulse{0%,to{opacity:1}50%{opacity:.5}}.nath-progress-bar-fill--indeterminate{animation:nath-progress-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], barClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "barClass", required: false }] }], valueClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueClass", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
 class NathProgressCircle {