nath-angular-ui 0.8.12 → 0.8.14

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 {
@@ -1761,11 +1761,11 @@ class NathMenuList {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathMenuList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathMenuList, isStandalone: true, selector: "nath-menu-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { whenCommand: "whenCommand" }, viewQueries: [{ propertyName: "submenuContainers", predicate: ["submenuContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div (mouseleave)=\"onMouseLeave($event)\">\n  <ul class=\"nath-menu-list-theme nath-menu-list nath-menu-custom-scrollbar\">\n    @for (item of items(); track $index) {\n      <li\n        class=\"nath-menu-item\"\n        [class.nath-menu-item--enabled]=\"!item.disabled\"\n        [class.nath-menu-item--disabled]=\"item.disabled\"\n        [class.nath-menu-item--padded]=\"!item.separator\"\n        [class.nath-menu-item--separator]=\"item.separator\"\n        [class.nath-menu-item--clickable]=\"item.routerLink || item.command || item.url\"\n        [class.nath-menu-item--header]=\"!item.routerLink && !item.command && !item.url\"\n        [class.nath-menu-item--interactive]=\"\n          !item.disabled &&\n          (item.routerLink || item.command || item.url || (item.items?.length && !flat()))\n        \"\n        [routerLink]=\"item.routerLink\"\n        [queryParams]=\"item.queryParams\"\n        routerLinkActive=\"nath-menu-item--active\"\n        [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n        [attr.tabindex]=\"-1\"\n        [attr.title]=\"item.title\"\n        (mouseenter)=\"!item.disabled && onItemHover(item, $event)\"\n        (click)=\"onItemClick(item, $index, $event)\"\n        (keydown)=\"$event.preventDefault(); handleKeyDown($event)\"\n        (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\n      >\n        @if (!item.separator) {\n          <span class=\"nath-menu-item-content\">\n            @if (item.icon) {\n              @if (isLucideIconComponent(item.icon)) {\n                <svg [lucideIcon]=\"item.icon\" />\n              } @else {\n                <i [class]=\"item.icon\"></i>\n              }\n            }\n            @if (item.escape === false) {\n              <span [innerHTML]=\"getMenuLabel(item)\"></span>\n            } @else {\n              <span class=\"nath-menu-item-text-truncate\">{{ item.label }}</span>\n            }\n          </span>\n\n          @if (item.items && item.items.length > 0 && !flat()) {\n            <span class=\"nath-menu-item-arrow\">\u203A</span>\n          }\n        }\n      </li>\n\n      @if (flat() && item.items) {\n        <nath-menu-list [items]=\"item.items\" (whenCommand)=\"whenCommand.emit($event)\" />\n      }\n    } @empty {\n      <li class=\"nath-menu-item nath-menu-item--padded nath-menu-item--disabled\">\n        No actions available\n      </li>\n    }\n  </ul>\n\n  @if (!flat()) {\n    @if (activeItem()?.items?.length) {\n      <div\n        #submenuContainer\n        class=\"nath-menu-list-theme nath-menu-submenu-panel\"\n        [style.left.px]=\"submenuLeft()\"\n        [style.top.px]=\"submenuTop()\"\n      >\n        <nath-menu-list\n          [items]=\"activeItem()!.items!\"\n          [direction]=\"nextSubmenuDirection()\"\n          (whenCommand)=\"whenCommand.emit($event)\"\n        />\n      </div>\n    }\n  }\n</div>\n", styles: ["nath-menu-list,.nath-menu-list-theme{--nath-menu-list-text: var(--color-zinc-700, oklch(37.1% .021 264.444));--nath-menu-list-text-muted: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-menu-list-text-disabled: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-menu-list-hover-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-list-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-list-bg: #ffffff;--nath-menu-list-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--nath-menu-list-z-index: 10000}.dark nath-menu-list,.dark .nath-menu-list-theme{--nath-menu-list-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-list-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-menu-list-text-disabled: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-menu-list-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-menu-list-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-list-bg: var(--color-zinc-900, oklch(21% .006 285.885))}.nath-menu-list{max-height:90vh;overflow-y:auto;overflow-x:hidden;list-style-type:none;margin:0;padding:0;width:100%}.nath-menu-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:background-color .15s,color .15s}.nath-menu-item--enabled{color:var(--nath-menu-list-text)}.nath-menu-item--interactive:hover,.nath-menu-item--interactive:focus,.nath-menu-item--interactive:focus-within{background-color:var(--nath-menu-list-hover-bg)}.nath-menu-item--padded{padding:.5rem 1rem}.nath-menu-item--separator{border-top:1px solid var(--nath-menu-list-border)}.nath-menu-item--clickable{cursor:pointer}.nath-menu-item--header{font-weight:700}.nath-menu-item--disabled{color:var(--nath-menu-list-text-disabled);cursor:default;opacity:.6;pointer-events:none}.nath-menu-item-content{display:flex;align-items:center;gap:.5rem;min-width:0;pointer-events:none}.nath-menu-item-text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nath-menu-item-arrow{font-size:1.5rem;color:var(--nath-menu-list-text-muted);flex-shrink:0;pointer-events:none}.nath-menu-submenu-panel{position:fixed;background-color:var(--nath-menu-list-bg);border:1px solid var(--nath-menu-list-border);border-radius:.5rem;box-shadow:var(--nath-menu-list-shadow);padding:.5rem 0;color:var(--nath-menu-list-text);z-index:var(--nath-menu-list-z-index);overflow:visible;visibility:hidden}.nath-menu-custom-scrollbar::-webkit-scrollbar{width:6px}.nath-menu-custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-zinc-300, oklch(87.1% .006 286.286));border-radius:3px}\n"], dependencies: [{ kind: "component", type: NathMenuList, selector: "nath-menu-list", inputs: ["items", "direction", "flat"], outputs: ["whenCommand"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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: NathMenuList, isStandalone: true, selector: "nath-menu-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { whenCommand: "whenCommand" }, viewQueries: [{ propertyName: "submenuContainers", predicate: ["submenuContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div (mouseleave)=\"onMouseLeave($event)\">\n  <ul class=\"nath-menu-list-theme nath-menu-list nath-menu-custom-scrollbar\">\n    @for (item of items(); track $index) {\n      <li\n        class=\"nath-menu-item\"\n        [class.nath-menu-item--enabled]=\"!item.disabled\"\n        [class.nath-menu-item--disabled]=\"item.disabled\"\n        [class.nath-menu-item--padded]=\"!item.separator\"\n        [class.nath-menu-item--separator]=\"item.separator\"\n        [class.nath-menu-item--clickable]=\"item.routerLink || item.command || item.url\"\n        [class.nath-menu-item--header]=\"!item.routerLink && !item.command && !item.url\"\n        [class.nath-menu-item--interactive]=\"\n          !item.disabled &&\n          (item.routerLink || item.command || item.url || (item.items?.length && !flat()))\n        \"\n        [routerLink]=\"item.routerLink\"\n        [queryParams]=\"item.queryParams\"\n        routerLinkActive=\"nath-menu-item--active\"\n        [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n        [attr.tabindex]=\"-1\"\n        [attr.title]=\"item.title\"\n        (mouseenter)=\"!item.disabled && onItemHover(item, $event)\"\n        (click)=\"onItemClick(item, $index, $event)\"\n        (keydown)=\"$event.preventDefault(); handleKeyDown($event)\"\n        (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\n      >\n        @if (!item.separator) {\n          <span class=\"nath-menu-item-content\">\n            @if (item.icon) {\n              @if (isLucideIconComponent(item.icon)) {\n                <svg [lucideIcon]=\"item.icon\" />\n              } @else {\n                <i [class]=\"item.icon\"></i>\n              }\n            }\n            @if (item.escape === false) {\n              <span [innerHTML]=\"getMenuLabel(item)\"></span>\n            } @else {\n              <span class=\"nath-menu-item-text-truncate\">{{ item.label }}</span>\n            }\n          </span>\n\n          @if (item.badge) {\n            <span class=\"nath-menu-item-badge\" [class]=\"item.badgeStyleClass\">{{ item.badge }}</span>\n          }\n\n          @if (item.items && item.items.length > 0 && !flat()) {\n            <span class=\"nath-menu-item-arrow\">\u203A</span>\n          }\n        }\n      </li>\n\n      @if (flat() && item.items) {\n        <nath-menu-list [items]=\"item.items\" (whenCommand)=\"whenCommand.emit($event)\" />\n      }\n    } @empty {\n      <li class=\"nath-menu-item nath-menu-item--padded nath-menu-item--disabled\">\n        No actions available\n      </li>\n    }\n  </ul>\n\n  @if (!flat()) {\n    @if (activeItem()?.items?.length) {\n      <div\n        #submenuContainer\n        class=\"nath-menu-list-theme nath-menu-submenu-panel\"\n        [style.left.px]=\"submenuLeft()\"\n        [style.top.px]=\"submenuTop()\"\n      >\n        <nath-menu-list\n          [items]=\"activeItem()!.items!\"\n          [direction]=\"nextSubmenuDirection()\"\n          (whenCommand)=\"whenCommand.emit($event)\"\n        />\n      </div>\n    }\n  }\n</div>\n", styles: ["nath-menu-list,.nath-menu-list-theme{--nath-menu-list-text: var(--color-zinc-700, oklch(37.1% .021 264.444));--nath-menu-list-text-muted: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-menu-list-text-disabled: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-menu-list-hover-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-list-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-list-bg: #ffffff;--nath-menu-list-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--nath-menu-list-z-index: 10000;--nath-menu-list-badge-bg: var(--color-blue-600, oklch(45% .15 250));--nath-menu-list-badge-text: #ffffff}.dark nath-menu-list,.dark .nath-menu-list-theme{--nath-menu-list-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-list-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-menu-list-text-disabled: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-menu-list-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-menu-list-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-list-bg: var(--color-zinc-900, oklch(21% .006 285.885));--nath-menu-list-badge-bg: var(--color-blue-500, oklch(50% .15 250));--nath-menu-list-badge-text: #ffffff}.nath-menu-list{max-height:90vh;overflow-y:auto;overflow-x:hidden;list-style-type:none;margin:0;padding:0;width:100%}.nath-menu-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:background-color .15s,color .15s}.nath-menu-item--enabled{color:var(--nath-menu-list-text)}.nath-menu-item--interactive:hover,.nath-menu-item--interactive:focus,.nath-menu-item--interactive:focus-within{background-color:var(--nath-menu-list-hover-bg)}.nath-menu-item--padded{padding:.5rem 1rem}.nath-menu-item--separator{border-top:1px solid var(--nath-menu-list-border)}.nath-menu-item--clickable{cursor:pointer}.nath-menu-item--header{font-weight:700}.nath-menu-item--disabled{color:var(--nath-menu-list-text-disabled);cursor:default;opacity:.6;pointer-events:none}.nath-menu-item-content{display:flex;align-items:center;gap:.5rem;min-width:0;pointer-events:none}.nath-menu-item-text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nath-menu-item-arrow{font-size:1.5rem;color:var(--nath-menu-list-text-muted);flex-shrink:0;pointer-events:none}.nath-menu-item-badge{display:inline-flex;align-items:center;justify-content:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:9999px;background-color:var(--nath-menu-list-badge-bg);color:var(--nath-menu-list-badge-text);flex-shrink:0;pointer-events:none}.nath-menu-submenu-panel{position:fixed;background-color:var(--nath-menu-list-bg);border:1px solid var(--nath-menu-list-border);border-radius:.5rem;box-shadow:var(--nath-menu-list-shadow);padding:.5rem 0;color:var(--nath-menu-list-text);z-index:var(--nath-menu-list-z-index);overflow:visible;visibility:hidden}.nath-menu-custom-scrollbar::-webkit-scrollbar{width:6px}.nath-menu-custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-zinc-300, oklch(87.1% .006 286.286));border-radius:3px}\n"], dependencies: [{ kind: "component", type: NathMenuList, selector: "nath-menu-list", inputs: ["items", "direction", "flat"], outputs: ["whenCommand"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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: NathMenuList, decorators: [{
             type: Component,
-            args: [{ selector: 'nath-menu-list', imports: [RouterLink, RouterLinkActive, LucideDynamicIcon], host: {}, encapsulation: ViewEncapsulation.None, template: "<div (mouseleave)=\"onMouseLeave($event)\">\n  <ul class=\"nath-menu-list-theme nath-menu-list nath-menu-custom-scrollbar\">\n    @for (item of items(); track $index) {\n      <li\n        class=\"nath-menu-item\"\n        [class.nath-menu-item--enabled]=\"!item.disabled\"\n        [class.nath-menu-item--disabled]=\"item.disabled\"\n        [class.nath-menu-item--padded]=\"!item.separator\"\n        [class.nath-menu-item--separator]=\"item.separator\"\n        [class.nath-menu-item--clickable]=\"item.routerLink || item.command || item.url\"\n        [class.nath-menu-item--header]=\"!item.routerLink && !item.command && !item.url\"\n        [class.nath-menu-item--interactive]=\"\n          !item.disabled &&\n          (item.routerLink || item.command || item.url || (item.items?.length && !flat()))\n        \"\n        [routerLink]=\"item.routerLink\"\n        [queryParams]=\"item.queryParams\"\n        routerLinkActive=\"nath-menu-item--active\"\n        [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n        [attr.tabindex]=\"-1\"\n        [attr.title]=\"item.title\"\n        (mouseenter)=\"!item.disabled && onItemHover(item, $event)\"\n        (click)=\"onItemClick(item, $index, $event)\"\n        (keydown)=\"$event.preventDefault(); handleKeyDown($event)\"\n        (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\n      >\n        @if (!item.separator) {\n          <span class=\"nath-menu-item-content\">\n            @if (item.icon) {\n              @if (isLucideIconComponent(item.icon)) {\n                <svg [lucideIcon]=\"item.icon\" />\n              } @else {\n                <i [class]=\"item.icon\"></i>\n              }\n            }\n            @if (item.escape === false) {\n              <span [innerHTML]=\"getMenuLabel(item)\"></span>\n            } @else {\n              <span class=\"nath-menu-item-text-truncate\">{{ item.label }}</span>\n            }\n          </span>\n\n          @if (item.items && item.items.length > 0 && !flat()) {\n            <span class=\"nath-menu-item-arrow\">\u203A</span>\n          }\n        }\n      </li>\n\n      @if (flat() && item.items) {\n        <nath-menu-list [items]=\"item.items\" (whenCommand)=\"whenCommand.emit($event)\" />\n      }\n    } @empty {\n      <li class=\"nath-menu-item nath-menu-item--padded nath-menu-item--disabled\">\n        No actions available\n      </li>\n    }\n  </ul>\n\n  @if (!flat()) {\n    @if (activeItem()?.items?.length) {\n      <div\n        #submenuContainer\n        class=\"nath-menu-list-theme nath-menu-submenu-panel\"\n        [style.left.px]=\"submenuLeft()\"\n        [style.top.px]=\"submenuTop()\"\n      >\n        <nath-menu-list\n          [items]=\"activeItem()!.items!\"\n          [direction]=\"nextSubmenuDirection()\"\n          (whenCommand)=\"whenCommand.emit($event)\"\n        />\n      </div>\n    }\n  }\n</div>\n", styles: ["nath-menu-list,.nath-menu-list-theme{--nath-menu-list-text: var(--color-zinc-700, oklch(37.1% .021 264.444));--nath-menu-list-text-muted: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-menu-list-text-disabled: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-menu-list-hover-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-list-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-list-bg: #ffffff;--nath-menu-list-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--nath-menu-list-z-index: 10000}.dark nath-menu-list,.dark .nath-menu-list-theme{--nath-menu-list-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-list-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-menu-list-text-disabled: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-menu-list-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-menu-list-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-list-bg: var(--color-zinc-900, oklch(21% .006 285.885))}.nath-menu-list{max-height:90vh;overflow-y:auto;overflow-x:hidden;list-style-type:none;margin:0;padding:0;width:100%}.nath-menu-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:background-color .15s,color .15s}.nath-menu-item--enabled{color:var(--nath-menu-list-text)}.nath-menu-item--interactive:hover,.nath-menu-item--interactive:focus,.nath-menu-item--interactive:focus-within{background-color:var(--nath-menu-list-hover-bg)}.nath-menu-item--padded{padding:.5rem 1rem}.nath-menu-item--separator{border-top:1px solid var(--nath-menu-list-border)}.nath-menu-item--clickable{cursor:pointer}.nath-menu-item--header{font-weight:700}.nath-menu-item--disabled{color:var(--nath-menu-list-text-disabled);cursor:default;opacity:.6;pointer-events:none}.nath-menu-item-content{display:flex;align-items:center;gap:.5rem;min-width:0;pointer-events:none}.nath-menu-item-text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nath-menu-item-arrow{font-size:1.5rem;color:var(--nath-menu-list-text-muted);flex-shrink:0;pointer-events:none}.nath-menu-submenu-panel{position:fixed;background-color:var(--nath-menu-list-bg);border:1px solid var(--nath-menu-list-border);border-radius:.5rem;box-shadow:var(--nath-menu-list-shadow);padding:.5rem 0;color:var(--nath-menu-list-text);z-index:var(--nath-menu-list-z-index);overflow:visible;visibility:hidden}.nath-menu-custom-scrollbar::-webkit-scrollbar{width:6px}.nath-menu-custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-zinc-300, oklch(87.1% .006 286.286));border-radius:3px}\n"] }]
+            args: [{ selector: 'nath-menu-list', imports: [RouterLink, RouterLinkActive, LucideDynamicIcon], host: {}, encapsulation: ViewEncapsulation.None, template: "<div (mouseleave)=\"onMouseLeave($event)\">\n  <ul class=\"nath-menu-list-theme nath-menu-list nath-menu-custom-scrollbar\">\n    @for (item of items(); track $index) {\n      <li\n        class=\"nath-menu-item\"\n        [class.nath-menu-item--enabled]=\"!item.disabled\"\n        [class.nath-menu-item--disabled]=\"item.disabled\"\n        [class.nath-menu-item--padded]=\"!item.separator\"\n        [class.nath-menu-item--separator]=\"item.separator\"\n        [class.nath-menu-item--clickable]=\"item.routerLink || item.command || item.url\"\n        [class.nath-menu-item--header]=\"!item.routerLink && !item.command && !item.url\"\n        [class.nath-menu-item--interactive]=\"\n          !item.disabled &&\n          (item.routerLink || item.command || item.url || (item.items?.length && !flat()))\n        \"\n        [routerLink]=\"item.routerLink\"\n        [queryParams]=\"item.queryParams\"\n        routerLinkActive=\"nath-menu-item--active\"\n        [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n        [attr.tabindex]=\"-1\"\n        [attr.title]=\"item.title\"\n        (mouseenter)=\"!item.disabled && onItemHover(item, $event)\"\n        (click)=\"onItemClick(item, $index, $event)\"\n        (keydown)=\"$event.preventDefault(); handleKeyDown($event)\"\n        (focus)=\"focusedIndex() < 0 && focusedIndex.set($index)\"\n      >\n        @if (!item.separator) {\n          <span class=\"nath-menu-item-content\">\n            @if (item.icon) {\n              @if (isLucideIconComponent(item.icon)) {\n                <svg [lucideIcon]=\"item.icon\" />\n              } @else {\n                <i [class]=\"item.icon\"></i>\n              }\n            }\n            @if (item.escape === false) {\n              <span [innerHTML]=\"getMenuLabel(item)\"></span>\n            } @else {\n              <span class=\"nath-menu-item-text-truncate\">{{ item.label }}</span>\n            }\n          </span>\n\n          @if (item.badge) {\n            <span class=\"nath-menu-item-badge\" [class]=\"item.badgeStyleClass\">{{ item.badge }}</span>\n          }\n\n          @if (item.items && item.items.length > 0 && !flat()) {\n            <span class=\"nath-menu-item-arrow\">\u203A</span>\n          }\n        }\n      </li>\n\n      @if (flat() && item.items) {\n        <nath-menu-list [items]=\"item.items\" (whenCommand)=\"whenCommand.emit($event)\" />\n      }\n    } @empty {\n      <li class=\"nath-menu-item nath-menu-item--padded nath-menu-item--disabled\">\n        No actions available\n      </li>\n    }\n  </ul>\n\n  @if (!flat()) {\n    @if (activeItem()?.items?.length) {\n      <div\n        #submenuContainer\n        class=\"nath-menu-list-theme nath-menu-submenu-panel\"\n        [style.left.px]=\"submenuLeft()\"\n        [style.top.px]=\"submenuTop()\"\n      >\n        <nath-menu-list\n          [items]=\"activeItem()!.items!\"\n          [direction]=\"nextSubmenuDirection()\"\n          (whenCommand)=\"whenCommand.emit($event)\"\n        />\n      </div>\n    }\n  }\n</div>\n", styles: ["nath-menu-list,.nath-menu-list-theme{--nath-menu-list-text: var(--color-zinc-700, oklch(37.1% .021 264.444));--nath-menu-list-text-muted: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-menu-list-text-disabled: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-menu-list-hover-bg: var(--color-zinc-100, oklch(96.7% .003 264.542));--nath-menu-list-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-list-bg: #ffffff;--nath-menu-list-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--nath-menu-list-z-index: 10000;--nath-menu-list-badge-bg: var(--color-blue-600, oklch(45% .15 250));--nath-menu-list-badge-text: #ffffff}.dark nath-menu-list,.dark .nath-menu-list-theme{--nath-menu-list-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-menu-list-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-menu-list-text-disabled: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-menu-list-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-menu-list-border: var(--color-zinc-700, oklch(37% .013 285.805));--nath-menu-list-bg: var(--color-zinc-900, oklch(21% .006 285.885));--nath-menu-list-badge-bg: var(--color-blue-500, oklch(50% .15 250));--nath-menu-list-badge-text: #ffffff}.nath-menu-list{max-height:90vh;overflow-y:auto;overflow-x:hidden;list-style-type:none;margin:0;padding:0;width:100%}.nath-menu-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:background-color .15s,color .15s}.nath-menu-item--enabled{color:var(--nath-menu-list-text)}.nath-menu-item--interactive:hover,.nath-menu-item--interactive:focus,.nath-menu-item--interactive:focus-within{background-color:var(--nath-menu-list-hover-bg)}.nath-menu-item--padded{padding:.5rem 1rem}.nath-menu-item--separator{border-top:1px solid var(--nath-menu-list-border)}.nath-menu-item--clickable{cursor:pointer}.nath-menu-item--header{font-weight:700}.nath-menu-item--disabled{color:var(--nath-menu-list-text-disabled);cursor:default;opacity:.6;pointer-events:none}.nath-menu-item-content{display:flex;align-items:center;gap:.5rem;min-width:0;pointer-events:none}.nath-menu-item-text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nath-menu-item-arrow{font-size:1.5rem;color:var(--nath-menu-list-text-muted);flex-shrink:0;pointer-events:none}.nath-menu-item-badge{display:inline-flex;align-items:center;justify-content:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:9999px;background-color:var(--nath-menu-list-badge-bg);color:var(--nath-menu-list-badge-text);flex-shrink:0;pointer-events:none}.nath-menu-submenu-panel{position:fixed;background-color:var(--nath-menu-list-bg);border:1px solid var(--nath-menu-list-border);border-radius:.5rem;box-shadow:var(--nath-menu-list-shadow);padding:.5rem 0;color:var(--nath-menu-list-text);z-index:var(--nath-menu-list-z-index);overflow:visible;visibility:hidden}.nath-menu-custom-scrollbar::-webkit-scrollbar{width:6px}.nath-menu-custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-zinc-300, oklch(87.1% .006 286.286));border-radius:3px}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }], whenCommand: [{ type: i0.Output, args: ["whenCommand"] }], submenuContainers: [{ type: i0.ViewChildren, args: ['submenuContainer', { isSignal: true }] }] } });
 
 const TIERED_MENU_LAYOUT_CONFIG = {