nath-angular-ui 0.1.0 → 0.2.1

package/fesm2022/nath-angular-ui.mjs

@@ -4,17 +4,16 @@ import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, DOCUMENT, NgStyle, NgClass, KeyValuePipe } from '@angular/common';
 import * as i2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { LucideX, LucideChevronDown, isLucideIconComponent, LucideDynamicIcon, LucideCalendar, LucideChevronLeft, LucideChevronRight, LucideMinimize2, LucideMaximize2, LucideEye, LucideLoaderCircle, LucideSquare, LucideSquareCheck, LucideInbox, LucideChevronsRight, LucideChevronsLeft, LucideCircle, LucideArrowUp, LucideArrowDown, LucideArrowUp01, LucideArrowDown01, LucideArrowUpAZ, LucideArrowDownAZ, LucideMoon, LucideSun, LucideCircleCheck, LucideCircleAlert, LucideInfo, LucideTriangleAlert } from '@lucide/angular';
+import { LucideX, LucideChevronDown, isLucideIconComponent, LucideDynamicIcon, LucideMinimize2, LucideMaximize2, LucideEye, LucideLoaderCircle, LucideSquare, LucideSquareCheck, LucideInbox, LucideChevronRight, LucideChevronsRight, LucideChevronLeft, LucideChevronsLeft, LucideCircle, LucideArrowUp, LucideArrowDown, LucideArrowUp01, LucideArrowDown01, LucideArrowUpAZ, LucideArrowDownAZ, LucideMoon, LucideSun, LucideCircleCheck, LucideCircleAlert, LucideInfo, LucideTriangleAlert } from '@lucide/angular';
 import * as i1$1 from '@angular/router';
 import { RouterModule, Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
-import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
+import * as i1$2 from '@angular/forms';
+import { FormsModule, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1$2 from '@angular/cdk/drag-drop';
+import * as i1$3 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { filter } from 'rxjs/operators';
-import * as i1$3 from '@angular/forms';
-import { FormControl, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import { fromEvent } from 'rxjs';
@@ -211,11 +210,11 @@ class NathAutocomplete {
         this.isOpen.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathAutocomplete, isStandalone: true, selector: "nath-autocomplete", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, valueWith: { classPropertyName: "valueWith", publicName: "valueWith", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minQueryLength: { classPropertyName: "minQueryLength", publicName: "minQueryLength", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, forceDisabled: { classPropertyName: "forceDisabled", publicName: "forceDisabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", debouncedQueryChange: "debouncedQueryChange", cleared: "cleared", unselected: "unselected", query: "queryChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  (click)=\"inputField?.focus()\"\r\n  (keydown.enter)=\"inputField?.focus()\"\r\n  class=\"input nath-autocomplete-theme ac-input-container\"\r\n  [ngClass]=\"{\r\n    'ac-has-clear-btn': showClearButton(),\r\n    'ac-borderless-container': borderless(),\r\n    'ac-no-right-radius': dropdown()\r\n  }\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n>\r\n  @if (multiple()) {\r\n    @for (item of selectedItems(); track $index) {\r\n      <div class=\"ac-selected-tag\">\r\n        <span [ngClass]=\"{'ac-tag-disabled': isDisabled()}\">\r\n          {{ displayFn()(item) }}\r\n        </span>\r\n\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"removeItem(item, $event)\"\r\n          class=\"ac-remove-tag-btn\"\r\n          [disabled]=\"isDisabled()\"\r\n        >\r\n          <svg\r\n            class=\"ac-svg-icon\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n            stroke=\"currentColor\"\r\n          >\r\n            <path\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              stroke-width=\"2.5\"\r\n              d=\"M6 18L18 6M6 6l12 12\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <input\r\n    #inputField\r\n    type=\"text\"\r\n    [id]=\"inputId()\"\r\n    [placeholder]=\"selectedItems().length === 0 || !multiple() ? placeholder() : ''\"\r\n    [value]=\"inputValue()\"\r\n    [disabled]=\"isDisabled()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    class=\"ac-native-input inner-input\"\r\n    [ngClass]=\"{ 'ac-borderless-input': borderless() }\"\r\n  />\r\n\r\n  @if (showClearButton()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ac-clear-button\"\r\n      [disabled]=\"isDisabled()\"\r\n      (click)=\"clear()\"\r\n    >\r\n      <svg lucideX [size]=\"16\" />\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOrigin]=\"origin\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen() && items().length > 0\"\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n  [cdkConnectedOverlayPanelClass]=\"'nath-autocomplete-theme'\"\r\n  (backdropClick)=\"isOpen.set(false)\"\r\n>\r\n  <div\r\n    class=\"ac-dropdown-overlay\"\r\n    [style.width.px]=\"elementRef.nativeElement?.getBoundingClientRect()?.width\"\r\n  >\r\n    @for (item of items(); track $index) {\r\n      <div\r\n        (click)=\"selectItem(item)\"\r\n        (keydown.enter)=\"selectItem(item)\"\r\n        class=\"ac-dropdown-item\"\r\n        [class.is-active]=\"activeTrackedIndex() === $index\"\r\n      >\r\n        @if (!itemTemplate()) {\r\n          {{ displayFn()(item) }}\r\n        } @else {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTemplate()!; context: { $implicit: item }\"\r\n          ></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n    @if (items().length === 0) {\r\n      <div class=\"ac-dropdown-item\">\r\n        {{ emptyMessage() }}\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n@if (dropdown()) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"button-secondary ac-dropdown-trigger-btn\"\r\n    [disabled]=\"isDisabled()\"\r\n    (click)=\"openDropdown()\"\r\n  >\r\n    <svg lucideChevronDown [size]=\"16\" />\r\n  </button>\r\n}\r\n", styles: ["nath-autocomplete{display:flex;width:100%}nath-autocomplete,.nath-autocomplete-theme{--nath-autocomplete-bg: #ffffff;--nath-autocomplete-border: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-autocomplete-radius: .375rem;--nath-autocomplete-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-autocomplete-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-autocomplete-input-padding: .25rem;--nath-autocomplete-placeholder: var(--color-gray-400, oklch(70.5% .015 286.067));--nath-autocomplete-tag-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-tag-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-button-hover-bg: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-bg: #ffffff;--nath-autocomplete-overlay-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-autocomplete-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-autocomplete-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-autocomplete-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-autocomplete-hover-text: var(--color-gray-900, oklch(21% .006 285.885));--nath-autocomplete-selected-bg: var(--color-indigo-50, oklch(96.2% .018 272.846));--nath-autocomplete-selected-text: var(--color-indigo-900, oklch(25.7% .09 270.891))}.dark nath-autocomplete,.dark .nath-autocomplete-theme{--nath-autocomplete-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-autocomplete-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-overlay-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-overlay-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-autocomplete-placeholder: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-autocomplete-tag-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-tag-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-button-hover-bg: var(--color-zinc-700, oklch(37% .013 285.805));--nath-autocomplete-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-hover-text: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-selected-bg: var(--color-indigo-950, oklch(15.2% .06 273.111));--nath-autocomplete-selected-text: var(--color-indigo-100, oklch(92% .04 273.111))}.ac-input-container{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;position:relative;flex-grow:1;padding:var(--nath-autocomplete-input-padding);background-color:var(--nath-autocomplete-bg);border:1px solid var(--nath-autocomplete-border);border-radius:var(--nath-autocomplete-radius);box-shadow:var(--nath-autocomplete-shadow);transition:border-color .2s,box-shadow .2s}.ac-input-container:focus-within{outline:none;border-color:var(--nath-autocomplete-ring-color);box-shadow:0 0 0 2px var(--nath-autocomplete-ring-color)}.ac-has-clear-btn{padding-right:2.5rem!important}.ac-borderless-container{border:0!important;box-shadow:none!important}.ac-borderless-container:focus-within{outline:none!important}.ac-no-right-radius{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.ac-selected-tag{display:inline-flex;align-items:center;gap:.25rem;background-color:var(--nath-autocomplete-tag-bg);color:var(--nath-autocomplete-tag-text);font-weight:500;padding:.25rem .375rem .25rem .625rem;border-radius:.375rem}.ac-tag-disabled{opacity:.5;cursor:not-allowed}.ac-remove-tag-btn{width:1rem;height:1rem;padding:0!important;border:none;box-shadow:none!important;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--nath-autocomplete-text-muted);transition:background-color .15s,color .15s;cursor:pointer}.ac-remove-tag-btn:disabled{cursor:not-allowed}.ac-remove-tag-btn:not(:disabled):hover{background-color:var(--nath-autocomplete-button-hover-bg);color:var(--nath-autocomplete-text-main)}.ac-clear-button{position:absolute;right:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-autocomplete-text-muted)}.ac-svg-icon{width:.75rem;height:.75rem;display:block}.ac-native-input{flex:1 1 0%;min-width:120px;border:none;background:transparent;color:var(--nath-autocomplete-text-main)}.ac-native-input::placeholder{color:var(--nath-autocomplete-placeholder)}.ac-native-input:focus{outline:none}.ac-borderless-input{padding-left:0!important;padding-right:0!important}.ac-dropdown-overlay{max-height:15rem;overflow-y:auto;background-color:var(--nath-autocomplete-overlay-bg);border:1px solid var(--nath-autocomplete-overlay-border);border-radius:.375rem;box-shadow:var(--nath-autocomplete-overlay-shadow);padding:.25rem 0;z-index:50;display:flex;flex-direction:column;box-sizing:border-box}.ac-dropdown-item{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:center;transition:background-color .15s,color .15s;color:var(--nath-autocomplete-text-main)}.ac-dropdown-item:hover{background-color:var(--nath-autocomplete-hover-bg);color:var(--nath-autocomplete-hover-text)}.ac-dropdown-item.is-active{background-color:var(--nath-autocomplete-selected-bg)!important;color:var(--nath-autocomplete-selected-text)!important}.ac-dropdown-trigger-btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathAutocomplete, isStandalone: true, selector: "nath-autocomplete", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, valueWith: { classPropertyName: "valueWith", publicName: "valueWith", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minQueryLength: { classPropertyName: "minQueryLength", publicName: "minQueryLength", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, forceDisabled: { classPropertyName: "forceDisabled", publicName: "forceDisabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", debouncedQueryChange: "debouncedQueryChange", cleared: "cleared", unselected: "unselected", query: "queryChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  (click)=\"inputField?.focus()\"\r\n  (keydown.enter)=\"inputField?.focus()\"\r\n  class=\"input nath-autocomplete-theme ac-input-container\"\r\n  [ngClass]=\"{\r\n    'ac-has-clear-btn': showClearButton(),\r\n    'ac-borderless-container': borderless(),\r\n    'ac-no-right-radius': dropdown()\r\n  }\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n>\r\n  @if (multiple()) {\r\n    @for (item of selectedItems(); track $index) {\r\n      <div class=\"ac-selected-tag\">\r\n        <span [ngClass]=\"{'ac-tag-disabled': isDisabled()}\">\r\n          {{ displayFn()(item) }}\r\n        </span>\r\n\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"removeItem(item, $event)\"\r\n          class=\"ac-remove-tag-btn\"\r\n          [disabled]=\"isDisabled()\"\r\n        >\r\n          <svg\r\n            class=\"ac-svg-icon\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n            stroke=\"currentColor\"\r\n          >\r\n            <path\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              stroke-width=\"2.5\"\r\n              d=\"M6 18L18 6M6 6l12 12\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <input\r\n    #inputField\r\n    type=\"text\"\r\n    [id]=\"inputId()\"\r\n    [placeholder]=\"selectedItems().length === 0 || !multiple() ? placeholder() : ''\"\r\n    [value]=\"inputValue()\"\r\n    [disabled]=\"isDisabled()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    class=\"ac-native-input inner-input\"\r\n    [ngClass]=\"{ 'ac-borderless-input': borderless() }\"\r\n  />\r\n\r\n  @if (showClearButton()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ac-clear-button\"\r\n      [disabled]=\"isDisabled()\"\r\n      (click)=\"clear()\"\r\n    >\r\n      <svg lucideX [size]=\"16\" />\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOrigin]=\"origin\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen() && items().length > 0\"\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n  [cdkConnectedOverlayPanelClass]=\"'nath-autocomplete-theme'\"\r\n  (backdropClick)=\"isOpen.set(false)\"\r\n>\r\n  <div\r\n    class=\"ac-dropdown-overlay\"\r\n    [style.width.px]=\"elementRef.nativeElement?.getBoundingClientRect()?.width\"\r\n  >\r\n    @for (item of items(); track $index) {\r\n      <div\r\n        (click)=\"selectItem(item)\"\r\n        (keydown.enter)=\"selectItem(item)\"\r\n        class=\"ac-dropdown-item\"\r\n        [class.is-active]=\"activeTrackedIndex() === $index\"\r\n      >\r\n        @if (!itemTemplate()) {\r\n          {{ displayFn()(item) }}\r\n        } @else {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTemplate()!; context: { $implicit: item }\"\r\n          ></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n    @if (items().length === 0) {\r\n      <div class=\"ac-dropdown-item\">\r\n        {{ emptyMessage() }}\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n@if (dropdown()) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"button-secondary ac-dropdown-trigger-btn\"\r\n    [disabled]=\"isDisabled()\"\r\n    (click)=\"openDropdown()\"\r\n  >\r\n    <svg lucideChevronDown [size]=\"16\" />\r\n  </button>\r\n}\r\n", styles: ["nath-autocomplete{display:flex;width:100%}nath-autocomplete,.nath-autocomplete-theme{--nath-autocomplete-bg: #ffffff;--nath-autocomplete-border: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-autocomplete-radius: .375rem;--nath-autocomplete-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-autocomplete-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-autocomplete-input-padding: .25rem;--nath-autocomplete-placeholder: var(--color-gray-400, oklch(70.5% .015 286.067));--nath-autocomplete-tag-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-tag-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-button-hover-bg: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-bg: #ffffff;--nath-autocomplete-overlay-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-autocomplete-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-autocomplete-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-autocomplete-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-autocomplete-hover-text: var(--color-gray-900, oklch(21% .006 285.885));--nath-autocomplete-selected-bg: var(--color-indigo-50, oklch(96.2% .018 272.846));--nath-autocomplete-selected-text: var(--color-indigo-900, oklch(25.7% .09 270.891))}.dark nath-autocomplete,.dark .nath-autocomplete-theme{--nath-autocomplete-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-overlay-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-overlay-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-autocomplete-placeholder: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-autocomplete-tag-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-tag-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-button-hover-bg: var(--color-zinc-700, oklch(37% .013 285.805));--nath-autocomplete-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-hover-text: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-selected-bg: var(--color-indigo-950, oklch(15.2% .06 273.111));--nath-autocomplete-selected-text: var(--color-indigo-100, oklch(92% .04 273.111))}.ac-input-container{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;position:relative;flex-grow:1;padding:var(--nath-autocomplete-input-padding);background-color:var(--nath-autocomplete-bg);border:1px solid var(--nath-autocomplete-border);border-radius:var(--nath-autocomplete-radius);box-shadow:var(--nath-autocomplete-shadow);transition:border-color .2s,box-shadow .2s}.ac-input-container:focus-within{outline:none;border-color:var(--nath-autocomplete-ring-color);box-shadow:0 0 0 2px var(--nath-autocomplete-ring-color)}.ac-has-clear-btn{padding-right:2.5rem!important}.ac-borderless-container{border:0!important;box-shadow:none!important}.ac-borderless-container:focus-within{outline:none!important}.ac-no-right-radius{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.ac-selected-tag{display:inline-flex;align-items:center;gap:.25rem;background-color:var(--nath-autocomplete-tag-bg);color:var(--nath-autocomplete-tag-text);font-weight:500;padding:.25rem .375rem .25rem .625rem;border-radius:.375rem}.ac-tag-disabled{opacity:.5;cursor:not-allowed}.ac-remove-tag-btn{width:1rem;height:1rem;padding:0!important;border:none;box-shadow:none!important;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--nath-autocomplete-text-muted);transition:background-color .15s,color .15s;cursor:pointer}.ac-remove-tag-btn:disabled{cursor:not-allowed}.ac-remove-tag-btn:not(:disabled):hover{background-color:var(--nath-autocomplete-button-hover-bg);color:var(--nath-autocomplete-text-main)}.ac-clear-button{position:absolute;right:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-autocomplete-text-muted)}.ac-svg-icon{width:.75rem;height:.75rem;display:block}.ac-native-input{flex:1 1 0%;min-width:120px;border:none;background:transparent;color:var(--nath-autocomplete-text-main)}.ac-native-input::placeholder{color:var(--nath-autocomplete-placeholder)}.ac-native-input:focus{outline:none}.ac-borderless-input{padding-left:0!important;padding-right:0!important}.ac-dropdown-overlay{max-height:15rem;overflow-y:auto;background-color:var(--nath-autocomplete-overlay-bg);border:1px solid var(--nath-autocomplete-overlay-border);border-radius:.375rem;box-shadow:var(--nath-autocomplete-overlay-shadow);padding:.25rem 0;z-index:50;display:flex;flex-direction:column;box-sizing:border-box}.ac-dropdown-item{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:center;transition:background-color .15s,color .15s;color:var(--nath-autocomplete-text-main)}.ac-dropdown-item:hover{background-color:var(--nath-autocomplete-hover-bg);color:var(--nath-autocomplete-hover-text)}.ac-dropdown-item.is-active{background-color:var(--nath-autocomplete-selected-bg)!important;color:var(--nath-autocomplete-selected-text)!important}.ac-dropdown-trigger-btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathAutocomplete, decorators: [{
             type: Component,
-            args: [{ selector: 'nath-autocomplete', imports: [CommonModule, OverlayModule, LucideX, LucideChevronDown], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n  (click)=\"inputField?.focus()\"\r\n  (keydown.enter)=\"inputField?.focus()\"\r\n  class=\"input nath-autocomplete-theme ac-input-container\"\r\n  [ngClass]=\"{\r\n    'ac-has-clear-btn': showClearButton(),\r\n    'ac-borderless-container': borderless(),\r\n    'ac-no-right-radius': dropdown()\r\n  }\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n>\r\n  @if (multiple()) {\r\n    @for (item of selectedItems(); track $index) {\r\n      <div class=\"ac-selected-tag\">\r\n        <span [ngClass]=\"{'ac-tag-disabled': isDisabled()}\">\r\n          {{ displayFn()(item) }}\r\n        </span>\r\n\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"removeItem(item, $event)\"\r\n          class=\"ac-remove-tag-btn\"\r\n          [disabled]=\"isDisabled()\"\r\n        >\r\n          <svg\r\n            class=\"ac-svg-icon\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n            stroke=\"currentColor\"\r\n          >\r\n            <path\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              stroke-width=\"2.5\"\r\n              d=\"M6 18L18 6M6 6l12 12\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <input\r\n    #inputField\r\n    type=\"text\"\r\n    [id]=\"inputId()\"\r\n    [placeholder]=\"selectedItems().length === 0 || !multiple() ? placeholder() : ''\"\r\n    [value]=\"inputValue()\"\r\n    [disabled]=\"isDisabled()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    class=\"ac-native-input inner-input\"\r\n    [ngClass]=\"{ 'ac-borderless-input': borderless() }\"\r\n  />\r\n\r\n  @if (showClearButton()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ac-clear-button\"\r\n      [disabled]=\"isDisabled()\"\r\n      (click)=\"clear()\"\r\n    >\r\n      <svg lucideX [size]=\"16\" />\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOrigin]=\"origin\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen() && items().length > 0\"\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n  [cdkConnectedOverlayPanelClass]=\"'nath-autocomplete-theme'\"\r\n  (backdropClick)=\"isOpen.set(false)\"\r\n>\r\n  <div\r\n    class=\"ac-dropdown-overlay\"\r\n    [style.width.px]=\"elementRef.nativeElement?.getBoundingClientRect()?.width\"\r\n  >\r\n    @for (item of items(); track $index) {\r\n      <div\r\n        (click)=\"selectItem(item)\"\r\n        (keydown.enter)=\"selectItem(item)\"\r\n        class=\"ac-dropdown-item\"\r\n        [class.is-active]=\"activeTrackedIndex() === $index\"\r\n      >\r\n        @if (!itemTemplate()) {\r\n          {{ displayFn()(item) }}\r\n        } @else {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTemplate()!; context: { $implicit: item }\"\r\n          ></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n    @if (items().length === 0) {\r\n      <div class=\"ac-dropdown-item\">\r\n        {{ emptyMessage() }}\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n@if (dropdown()) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"button-secondary ac-dropdown-trigger-btn\"\r\n    [disabled]=\"isDisabled()\"\r\n    (click)=\"openDropdown()\"\r\n  >\r\n    <svg lucideChevronDown [size]=\"16\" />\r\n  </button>\r\n}\r\n", styles: ["nath-autocomplete{display:flex;width:100%}nath-autocomplete,.nath-autocomplete-theme{--nath-autocomplete-bg: #ffffff;--nath-autocomplete-border: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-autocomplete-radius: .375rem;--nath-autocomplete-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-autocomplete-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-autocomplete-input-padding: .25rem;--nath-autocomplete-placeholder: var(--color-gray-400, oklch(70.5% .015 286.067));--nath-autocomplete-tag-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-tag-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-button-hover-bg: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-bg: #ffffff;--nath-autocomplete-overlay-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-autocomplete-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-autocomplete-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-autocomplete-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-autocomplete-hover-text: var(--color-gray-900, oklch(21% .006 285.885));--nath-autocomplete-selected-bg: var(--color-indigo-50, oklch(96.2% .018 272.846));--nath-autocomplete-selected-text: var(--color-indigo-900, oklch(25.7% .09 270.891))}.dark nath-autocomplete,.dark .nath-autocomplete-theme{--nath-autocomplete-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-autocomplete-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-overlay-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-overlay-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-autocomplete-placeholder: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-autocomplete-tag-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-tag-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-button-hover-bg: var(--color-zinc-700, oklch(37% .013 285.805));--nath-autocomplete-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-hover-text: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-selected-bg: var(--color-indigo-950, oklch(15.2% .06 273.111));--nath-autocomplete-selected-text: var(--color-indigo-100, oklch(92% .04 273.111))}.ac-input-container{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;position:relative;flex-grow:1;padding:var(--nath-autocomplete-input-padding);background-color:var(--nath-autocomplete-bg);border:1px solid var(--nath-autocomplete-border);border-radius:var(--nath-autocomplete-radius);box-shadow:var(--nath-autocomplete-shadow);transition:border-color .2s,box-shadow .2s}.ac-input-container:focus-within{outline:none;border-color:var(--nath-autocomplete-ring-color);box-shadow:0 0 0 2px var(--nath-autocomplete-ring-color)}.ac-has-clear-btn{padding-right:2.5rem!important}.ac-borderless-container{border:0!important;box-shadow:none!important}.ac-borderless-container:focus-within{outline:none!important}.ac-no-right-radius{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.ac-selected-tag{display:inline-flex;align-items:center;gap:.25rem;background-color:var(--nath-autocomplete-tag-bg);color:var(--nath-autocomplete-tag-text);font-weight:500;padding:.25rem .375rem .25rem .625rem;border-radius:.375rem}.ac-tag-disabled{opacity:.5;cursor:not-allowed}.ac-remove-tag-btn{width:1rem;height:1rem;padding:0!important;border:none;box-shadow:none!important;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--nath-autocomplete-text-muted);transition:background-color .15s,color .15s;cursor:pointer}.ac-remove-tag-btn:disabled{cursor:not-allowed}.ac-remove-tag-btn:not(:disabled):hover{background-color:var(--nath-autocomplete-button-hover-bg);color:var(--nath-autocomplete-text-main)}.ac-clear-button{position:absolute;right:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-autocomplete-text-muted)}.ac-svg-icon{width:.75rem;height:.75rem;display:block}.ac-native-input{flex:1 1 0%;min-width:120px;border:none;background:transparent;color:var(--nath-autocomplete-text-main)}.ac-native-input::placeholder{color:var(--nath-autocomplete-placeholder)}.ac-native-input:focus{outline:none}.ac-borderless-input{padding-left:0!important;padding-right:0!important}.ac-dropdown-overlay{max-height:15rem;overflow-y:auto;background-color:var(--nath-autocomplete-overlay-bg);border:1px solid var(--nath-autocomplete-overlay-border);border-radius:.375rem;box-shadow:var(--nath-autocomplete-overlay-shadow);padding:.25rem 0;z-index:50;display:flex;flex-direction:column;box-sizing:border-box}.ac-dropdown-item{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:center;transition:background-color .15s,color .15s;color:var(--nath-autocomplete-text-main)}.ac-dropdown-item:hover{background-color:var(--nath-autocomplete-hover-bg);color:var(--nath-autocomplete-hover-text)}.ac-dropdown-item.is-active{background-color:var(--nath-autocomplete-selected-bg)!important;color:var(--nath-autocomplete-selected-text)!important}.ac-dropdown-trigger-btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"] }]
+            args: [{ selector: 'nath-autocomplete', imports: [CommonModule, OverlayModule, LucideX, LucideChevronDown], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n  (click)=\"inputField?.focus()\"\r\n  (keydown.enter)=\"inputField?.focus()\"\r\n  class=\"input nath-autocomplete-theme ac-input-container\"\r\n  [ngClass]=\"{\r\n    'ac-has-clear-btn': showClearButton(),\r\n    'ac-borderless-container': borderless(),\r\n    'ac-no-right-radius': dropdown()\r\n  }\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n>\r\n  @if (multiple()) {\r\n    @for (item of selectedItems(); track $index) {\r\n      <div class=\"ac-selected-tag\">\r\n        <span [ngClass]=\"{'ac-tag-disabled': isDisabled()}\">\r\n          {{ displayFn()(item) }}\r\n        </span>\r\n\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"removeItem(item, $event)\"\r\n          class=\"ac-remove-tag-btn\"\r\n          [disabled]=\"isDisabled()\"\r\n        >\r\n          <svg\r\n            class=\"ac-svg-icon\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n            stroke=\"currentColor\"\r\n          >\r\n            <path\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              stroke-width=\"2.5\"\r\n              d=\"M6 18L18 6M6 6l12 12\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <input\r\n    #inputField\r\n    type=\"text\"\r\n    [id]=\"inputId()\"\r\n    [placeholder]=\"selectedItems().length === 0 || !multiple() ? placeholder() : ''\"\r\n    [value]=\"inputValue()\"\r\n    [disabled]=\"isDisabled()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    class=\"ac-native-input inner-input\"\r\n    [ngClass]=\"{ 'ac-borderless-input': borderless() }\"\r\n  />\r\n\r\n  @if (showClearButton()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ac-clear-button\"\r\n      [disabled]=\"isDisabled()\"\r\n      (click)=\"clear()\"\r\n    >\r\n      <svg lucideX [size]=\"16\" />\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOrigin]=\"origin\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen() && items().length > 0\"\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n  [cdkConnectedOverlayPanelClass]=\"'nath-autocomplete-theme'\"\r\n  (backdropClick)=\"isOpen.set(false)\"\r\n>\r\n  <div\r\n    class=\"ac-dropdown-overlay\"\r\n    [style.width.px]=\"elementRef.nativeElement?.getBoundingClientRect()?.width\"\r\n  >\r\n    @for (item of items(); track $index) {\r\n      <div\r\n        (click)=\"selectItem(item)\"\r\n        (keydown.enter)=\"selectItem(item)\"\r\n        class=\"ac-dropdown-item\"\r\n        [class.is-active]=\"activeTrackedIndex() === $index\"\r\n      >\r\n        @if (!itemTemplate()) {\r\n          {{ displayFn()(item) }}\r\n        } @else {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTemplate()!; context: { $implicit: item }\"\r\n          ></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n    @if (items().length === 0) {\r\n      <div class=\"ac-dropdown-item\">\r\n        {{ emptyMessage() }}\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n@if (dropdown()) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"button-secondary ac-dropdown-trigger-btn\"\r\n    [disabled]=\"isDisabled()\"\r\n    (click)=\"openDropdown()\"\r\n  >\r\n    <svg lucideChevronDown [size]=\"16\" />\r\n  </button>\r\n}\r\n", styles: ["nath-autocomplete{display:flex;width:100%}nath-autocomplete,.nath-autocomplete-theme{--nath-autocomplete-bg: #ffffff;--nath-autocomplete-border: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-autocomplete-radius: .375rem;--nath-autocomplete-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-autocomplete-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-autocomplete-input-padding: .25rem;--nath-autocomplete-placeholder: var(--color-gray-400, oklch(70.5% .015 286.067));--nath-autocomplete-tag-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-tag-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-button-hover-bg: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-bg: #ffffff;--nath-autocomplete-overlay-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-autocomplete-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-autocomplete-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-autocomplete-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-autocomplete-hover-text: var(--color-gray-900, oklch(21% .006 285.885));--nath-autocomplete-selected-bg: var(--color-indigo-50, oklch(96.2% .018 272.846));--nath-autocomplete-selected-text: var(--color-indigo-900, oklch(25.7% .09 270.891))}.dark nath-autocomplete,.dark .nath-autocomplete-theme{--nath-autocomplete-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-overlay-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-overlay-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-autocomplete-placeholder: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-autocomplete-tag-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-tag-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-button-hover-bg: var(--color-zinc-700, oklch(37% .013 285.805));--nath-autocomplete-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-hover-text: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-selected-bg: var(--color-indigo-950, oklch(15.2% .06 273.111));--nath-autocomplete-selected-text: var(--color-indigo-100, oklch(92% .04 273.111))}.ac-input-container{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;position:relative;flex-grow:1;padding:var(--nath-autocomplete-input-padding);background-color:var(--nath-autocomplete-bg);border:1px solid var(--nath-autocomplete-border);border-radius:var(--nath-autocomplete-radius);box-shadow:var(--nath-autocomplete-shadow);transition:border-color .2s,box-shadow .2s}.ac-input-container:focus-within{outline:none;border-color:var(--nath-autocomplete-ring-color);box-shadow:0 0 0 2px var(--nath-autocomplete-ring-color)}.ac-has-clear-btn{padding-right:2.5rem!important}.ac-borderless-container{border:0!important;box-shadow:none!important}.ac-borderless-container:focus-within{outline:none!important}.ac-no-right-radius{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.ac-selected-tag{display:inline-flex;align-items:center;gap:.25rem;background-color:var(--nath-autocomplete-tag-bg);color:var(--nath-autocomplete-tag-text);font-weight:500;padding:.25rem .375rem .25rem .625rem;border-radius:.375rem}.ac-tag-disabled{opacity:.5;cursor:not-allowed}.ac-remove-tag-btn{width:1rem;height:1rem;padding:0!important;border:none;box-shadow:none!important;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--nath-autocomplete-text-muted);transition:background-color .15s,color .15s;cursor:pointer}.ac-remove-tag-btn:disabled{cursor:not-allowed}.ac-remove-tag-btn:not(:disabled):hover{background-color:var(--nath-autocomplete-button-hover-bg);color:var(--nath-autocomplete-text-main)}.ac-clear-button{position:absolute;right:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-autocomplete-text-muted)}.ac-svg-icon{width:.75rem;height:.75rem;display:block}.ac-native-input{flex:1 1 0%;min-width:120px;border:none;background:transparent;color:var(--nath-autocomplete-text-main)}.ac-native-input::placeholder{color:var(--nath-autocomplete-placeholder)}.ac-native-input:focus{outline:none}.ac-borderless-input{padding-left:0!important;padding-right:0!important}.ac-dropdown-overlay{max-height:15rem;overflow-y:auto;background-color:var(--nath-autocomplete-overlay-bg);border:1px solid var(--nath-autocomplete-overlay-border);border-radius:.375rem;box-shadow:var(--nath-autocomplete-overlay-shadow);padding:.25rem 0;z-index:50;display:flex;flex-direction:column;box-sizing:border-box}.ac-dropdown-item{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:center;transition:background-color .15s,color .15s;color:var(--nath-autocomplete-text-main)}.ac-dropdown-item:hover{background-color:var(--nath-autocomplete-hover-bg);color:var(--nath-autocomplete-hover-text)}.ac-dropdown-item.is-active{background-color:var(--nath-autocomplete-selected-bg)!important;color:var(--nath-autocomplete-selected-text)!important}.ac-dropdown-trigger-btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], valueWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueWith", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdown", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minQueryLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minQueryLength", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], forceDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceDisabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], debouncedQueryChange: [{ type: i0.Output, args: ["debouncedQueryChange"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], unselected: [{ type: i0.Output, args: ["unselected"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], inputField: [{ type: i0.ViewChild, args: ['inputField', { isSignal: true }] }] } });
 
 class NathBooleanControl {
@@ -351,10 +350,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }] });
 
 class NathDatepicker {
-    // --- Signals Inputs ---
+    // --- I/O ---
+    withTime = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "withTime" }] : /* istanbul ignore next */ []));
     placeholder = input('dd/mm/yyyy', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    inputId = input('', /* @ts-ignore */
+    inputId = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     language = input('en', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
@@ -364,155 +365,69 @@ class NathDatepicker {
     ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     dirty = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
-    // --- View Children (Signals-based) ---
-    inputElement = viewChild('dateInput', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
     // --- Internal State Signals ---
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    isOpen = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    currentViewDate = signal(new Date(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentViewDate" }] : /* istanbul ignore next */ []));
-    daysInMonth = computed(() => this.generateCalendarDays(this.currentViewDate()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "daysInMonth" }] : /* istanbul ignore next */ []));
-    currentMonthLabel = computed(() => {
-        return this.currentViewDate().toLocaleString(this.language() || 'en', {
-            month: 'long',
-            year: 'numeric',
-        });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentMonthLabel" }] : /* istanbul ignore next */ []));
-    // --- CDK Overlay Configuration ---
-    overlayPositions = [
-        {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top',
-            offsetY: 4,
-        },
-        {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'bottom',
-            offsetY: -4,
-        },
-    ];
+    dateInputValue = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateInputValue" }] : /* istanbul ignore next */ []));
+    dateTimeInputValue = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateTimeInputValue" }] : /* istanbul ignore next */ []));
     constructor() {
-        // Automatically track value changes to sync the input element layout
         effect(() => {
-            const date = this.value();
-            const inputEl = this.inputElement()?.nativeElement;
-            if (inputEl) {
-                const currentInputValue = inputEl.value;
-                let targetValue = '';
-                if (date) {
-                    const day = String(date.getDate()).padStart(2, '0');
-                    const month = String(date.getMonth() + 1).padStart(2, '0');
-                    const year = date.getFullYear();
-                    targetValue = `${day}/${month}/${year}`;
+            const value = this.value();
+            const dateInputValue = this.dateInputValue();
+            const dateTimeInputValue = this.dateTimeInputValue();
+            if (this.withTime()) {
+                const dateToCompare = dateTimeInputValue ? new Date(dateTimeInputValue) : null;
+                if (dateToCompare?.getTime() !== value?.getTime()) {
+                    this.dateTimeInputValue.set(this.toLocaleISOString(value) ?? null);
                 }
-                // Only update the DOM if the value is truly different to save cursor context
-                if (currentInputValue !== targetValue) {
-                    inputEl.value = targetValue;
-                    inputEl.dispatchEvent(new Event('input'));
+            }
+            else {
+                const dateToCompare = dateInputValue ? new Date(dateInputValue) : null;
+                if (dateToCompare?.getTime() !== value?.getTime()) {
+                    this.dateInputValue.set(this.toLocaleDateISOString(value) ?? null);
                 }
             }
         });
     }
-    get formattedInputValue() {
-        const date = this.value();
-        if (!date)
-            return '';
-        const day = String(date.getDate()).padStart(2, '0');
-        const month = String(date.getMonth() + 1).padStart(2, '0');
-        const year = date.getFullYear();
-        return `${day}${month}${year}`;
+    toLocaleISOString(date) {
+        return (date?.toLocaleString('sv', {
+            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        }) ?? null);
     }
-    toggleCalendar() {
-        if (!this.isOpen()) {
-            this.currentViewDate.set(this.value() || new Date());
-        }
-        this.touched.set(true);
-        this.isOpen.update((v) => !v);
+    toLocaleDateISOString(date) {
+        return (date?.toLocaleDateString('sv', {
+            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        }) ?? null);
     }
-    onInputChange(event) {
-        const inputEl = event.target;
-        const rawValue = inputEl.value;
-        if (rawValue.length === 10) {
-            const day = Number.parseInt(rawValue.substring(0, 2), 10);
-            const month = Number.parseInt(rawValue.substring(3, 5), 10) - 1;
-            const year = Number.parseInt(rawValue.substring(6, 10), 10); // Ensured string captures index 9
-            const parsedDate = new Date(year, month, day);
-            if (!Number.isNaN(parsedDate.getTime()) &&
-                parsedDate.getDate() === day &&
-                parsedDate.getMonth() === month) {
-                this.value.set(parsedDate);
-                this.currentViewDate.set(parsedDate);
-                return;
-            }
+    onDateTimeInputChange(event) {
+        const target = event.target;
+        if (target.value) {
+            this.value.set(new Date(target.value));
         }
-        if (rawValue.length === 0) {
+        else {
             this.value.set(null);
         }
     }
-    selectDate(date) {
-        this.value.set(date);
-        this.isOpen.set(false);
-        const inputEl = this.inputElement()?.nativeElement;
-        if (inputEl) {
-            const day = String(date.getDate()).padStart(2, '0');
-            const month = String(date.getMonth() + 1).padStart(2, '0');
-            const year = date.getFullYear();
-            // Mask expects slashes when inserted explicitly into the native input string
-            inputEl.value = `${day}/${month}/${year}`;
-            inputEl.dispatchEvent(new Event('input'));
-        }
-    }
-    changeMonth(direction) {
-        const current = this.currentViewDate();
-        const nextTarget = new Date(current.getFullYear(), current.getMonth() + direction, 1);
-        this.currentViewDate.set(nextTarget);
-    }
-    isSameDay(dateA, dateB) {
-        if (!dateA || !dateB)
-            return false;
-        return (dateA.getDate() === dateB.getDate() &&
-            dateA.getMonth() === dateB.getMonth() &&
-            dateA.getFullYear() === dateB.getFullYear());
-    }
-    generateCalendarDays(viewDate) {
-        const year = viewDate.getFullYear();
-        const month = viewDate.getMonth();
-        const firstDayOfMonth = new Date(year, month, 1);
-        const startDayOfWeek = firstDayOfMonth.getDay();
-        const startDate = new Date(firstDayOfMonth);
-        startDate.setDate(startDate.getDate() - startDayOfWeek);
-        const days = [];
-        for (let i = 0; i < 42; i++) {
-            days.push(new Date(startDate));
-            startDate.setDate(startDate.getDate() + 1);
-        }
-        return days;
+    onDateInputChange(event) {
+        const target = event.target;
+        if (target.value) {
+            this.value.set(new Date(target.value + ' 00:00:00'));
+        }
+        else {
+            this.value.set(null);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathDatepicker, isStandalone: true, selector: "nath-datepicker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", dirty: "dirtyChange", value: "valueChange" }, host: { classAttribute: "nath-datepicker-host" }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"nath-datepicker-container input\">\r\n  <input\r\n    #dateInput\r\n    [attr.id]=\"inputId() || null\"\r\n    type=\"text\"\r\n    mask=\"d0/M0/0000\"\r\n    [leadZeroDateTime]=\"true\"\r\n    [value]=\"formattedInputValue\"\r\n    (input)=\"onInputChange($event)\"\r\n    [placeholder]=\"placeholder()\"\r\n    class=\"nath-datepicker-input\"\r\n  />\r\n\r\n  <button\r\n    type=\"button\"\r\n    cdkOverlayOrigin\r\n    #trigger=\"cdkOverlayOrigin\"\r\n    (click)=\"toggleCalendar()\"\r\n    aria-label=\"Open calendar\"\r\n    class=\"nath-datepicker-trigger\"\r\n  >\r\n    <svg lucideCalendar [size]=\"16\" />\r\n  </button>\r\n</div>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n  (overlayOutsideClick)=\"isOpen.set(false)\"\r\n>\r\n  <div class=\"nath-datepicker-panel nath-datepicker-theme\">\r\n    <div class=\"nath-datepicker-header\">\r\n      <button (click)=\"changeMonth(-1)\" class=\"nath-datepicker-nav-btn\">\r\n        <svg lucideChevronLeft [size]=\"16\" />\r\n      </button>\r\n\r\n      <span class=\"nath-datepicker-month-label\">{{ currentMonthLabel() }}</span>\r\n\r\n      <button (click)=\"changeMonth(1)\" class=\"nath-datepicker-nav-btn\">\r\n        <svg lucideChevronRight [size]=\"16\" />\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"nath-datepicker-weekdays\">\r\n      <div>Su</div>\r\n      <div>Mo</div>\r\n      <div>Tu</div>\r\n      <div>We</div>\r\n      <div>Th</div>\r\n      <div>Fr</div>\r\n      <div>Sa</div>\r\n    </div>\r\n\r\n    <div class=\"nath-datepicker-days-grid\">\r\n      @for (date of daysInMonth(); track date.getTime()) {\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"selectDate(date)\"\r\n          [disabled]=\"date.getMonth() !== currentViewDate().getMonth()\"\r\n          class=\"nath-datepicker-day\"\r\n          [class.is-outside]=\"date.getMonth() !== currentViewDate().getMonth()\"\r\n          [class.is-selected]=\"isSameDay(date, value())\"\r\n        >\r\n          {{ date.getDate() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["nath-datepicker,.nath-datepicker-theme{--nath-datepicker-width: 100%;--nath-datepicker-max-width: 24rem;--nath-datepicker-bg: #ffffff;--nath-datepicker-border: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-datepicker-radius: .375rem;--nath-datepicker-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-datepicker-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-datepicker-input-padding: .5rem .75rem;--nath-datepicker-panel-bg: #ffffff;--nath-datepicker-panel-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-datepicker-panel-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-datepicker-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-datepicker-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-datepicker-text-disabled: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-datepicker-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-datepicker-selected-bg: var(--color-indigo-600, oklch(51.1% .262 276.966));--nath-datepicker-selected-text: #ffffff;--nath-datepicker-selected-hover-bg: var(--color-indigo-700, oklch(45.7% .24 277.023))}.dark nath-datepicker,.dark .nath-datepicker-theme{--nath-datepicker-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-datepicker-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-datepicker-panel-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-datepicker-panel-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-datepicker-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-datepicker-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-datepicker-text-disabled: var(--color-zinc-700, oklch(37% .013 285.805));--nath-datepicker-hover-bg: var(--color-zinc-900, oklch(21% .006 285.885));--nath-datepicker-selected-text: #000000}.nath-datepicker-host{display:block;width:100%}.nath-datepicker-container{display:flex;position:relative;align-items:center;width:var(--nath-datepicker-width);max-width:var(--nath-datepicker-max-width);background-color:var(--nath-datepicker-bg);border:1px solid var(--nath-datepicker-border);border-radius:var(--nath-datepicker-radius);box-shadow:var(--nath-datepicker-shadow);transition:border-color .2s,box-shadow .2s}.nath-datepicker-container:focus-within{outline:none;border-color:var(--nath-datepicker-ring-color);box-shadow:0 0 0 2px var(--nath-datepicker-ring-color)}.nath-datepicker-input{flex:1;background:transparent;border:none;outline:none;padding:var(--nath-datepicker-input-padding);color:var(--nath-datepicker-text-main);font-size:.875rem}.nath-datepicker-trigger{display:flex;align-items:center;justify-content:center;padding:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-datepicker-text-muted)}.nath-datepicker-panel{background-color:var(--nath-datepicker-panel-bg);border:1px solid var(--nath-datepicker-panel-border);border-radius:.5rem;box-shadow:var(--nath-datepicker-panel-shadow);padding:1rem;width:18rem;margin-top:.25rem;z-index:50;-webkit-user-select:none;user-select:none}.nath-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.nath-datepicker-nav-btn{display:flex;align-items:center;justify-content:center;padding:.25rem;border-radius:9999px;border:none;background:transparent;color:var(--nath-datepicker-text-muted);cursor:pointer;transition:background-color .2s}.nath-datepicker-nav-btn:hover{background-color:var(--nath-datepicker-hover-bg)}.nath-datepicker-month-label{font-size:.875rem;font-weight:600;color:var(--nath-datepicker-text-main)}.nath-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;text-align:center;font-size:.75rem;font-weight:500;color:var(--nath-datepicker-text-muted);margin-bottom:.25rem}.nath-datepicker-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}.nath-datepicker-day{width:2rem;height:2rem;border-radius:9999px;border:none;background:transparent;font-size:.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s,color .2s;color:var(--nath-datepicker-text-main)}.nath-datepicker-day:focus{outline:none;box-shadow:0 0 0 2px var(--nath-datepicker-ring-color)}.nath-datepicker-day:hover:not(.is-selected):not(.is-outside){background-color:var(--nath-datepicker-hover-bg)}.nath-datepicker-day.is-outside{color:var(--nath-datepicker-text-disabled);cursor:default;pointer-events:none}.nath-datepicker-day.is-selected{background-color:var(--nath-datepicker-selected-bg);color:var(--nath-datepicker-selected-text);font-weight:600}.nath-datepicker-day.is-selected:hover{background-color:var(--nath-datepicker-selected-hover-bg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "typeFromDecimals", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "defaultValueOnBlur", "value", "disabled", "touched"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathDatepicker, isStandalone: true, selector: "nath-datepicker", inputs: { withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, dateInputValue: { classPropertyName: "dateInputValue", publicName: "dateInputValue", isSignal: true, isRequired: false, transformFunction: null }, dateTimeInputValue: { classPropertyName: "dateTimeInputValue", publicName: "dateTimeInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", dirty: "dirtyChange", value: "valueChange", dateInputValue: "dateInputValueChange", dateTimeInputValue: "dateTimeInputValueChange" }, host: { classAttribute: "nath-datepicker-host" }, ngImport: i0, template: "@if (withTime()) {\n  <input\n    type=\"datetime-local\"\n    [(ngModel)]=\"dateTimeInputValue\"\n    [attr.id]=\"inputId() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    class=\"nath-datepicker-datetime-input\"\n    (input)=\"onDateTimeInputChange($event)\"\n  />\n} @else {\n  <input\n    type=\"date\"\n    [(ngModel)]=\"dateInputValue\"\n    [attr.id]=\"inputId() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    class=\"nath-datepicker-date-input\"\n    (input)=\"onDateInputChange($event)\"\n  />\n}\n", styles: ["nath-datepicker,.nath-datepicker-theme{--nath-datepicker-date-width: 100%;--nath-datepicker-date-max-width: 9.5rem;--nath-datepicker-datetime-width: 100%;--nath-datepicker-datetime-max-width: 12.5rem}.nath-datepicker-host{display:flex;gap:.5rem}.nath-datepicker-date-input{display:block;width:var(--nath-datepicker-date-width);max-width:var(--nath-datepicker-date-max-width)}.nath-datepicker-host ::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-calendar-icon lucide-calendar\"><path d=\"M8 2v4\"/><path d=\"M16 2v4\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"/><path d=\"M3 10h18\"/></svg>')}.nath-datepicker-datetime-input{display:block;width:var(--nath-datepicker-datetime-width);max-width:var(--nath-datepicker-datetime-max-width)}.dark .nath-datepicker-host ::-webkit-calendar-picker-indicator{filter:invert(100%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathDatepicker, decorators: [{
             type: Component,
-            args: [{ selector: 'nath-datepicker', imports: [
-                        CommonModule,
-                        OverlayModule,
-                        NgxMaskDirective,
-                        LucideCalendar,
-                        LucideChevronLeft,
-                        LucideChevronRight,
-                    ], providers: [provideNgxMask()], encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'nath-datepicker', imports: [CommonModule, OverlayModule, FormsModule], encapsulation: ViewEncapsulation.None, host: {
                         class: 'nath-datepicker-host',
-                    }, template: "<div class=\"nath-datepicker-container input\">\r\n  <input\r\n    #dateInput\r\n    [attr.id]=\"inputId() || null\"\r\n    type=\"text\"\r\n    mask=\"d0/M0/0000\"\r\n    [leadZeroDateTime]=\"true\"\r\n    [value]=\"formattedInputValue\"\r\n    (input)=\"onInputChange($event)\"\r\n    [placeholder]=\"placeholder()\"\r\n    class=\"nath-datepicker-input\"\r\n  />\r\n\r\n  <button\r\n    type=\"button\"\r\n    cdkOverlayOrigin\r\n    #trigger=\"cdkOverlayOrigin\"\r\n    (click)=\"toggleCalendar()\"\r\n    aria-label=\"Open calendar\"\r\n    class=\"nath-datepicker-trigger\"\r\n  >\r\n    <svg lucideCalendar [size]=\"16\" />\r\n  </button>\r\n</div>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n  (overlayOutsideClick)=\"isOpen.set(false)\"\r\n>\r\n  <div class=\"nath-datepicker-panel nath-datepicker-theme\">\r\n    <div class=\"nath-datepicker-header\">\r\n      <button (click)=\"changeMonth(-1)\" class=\"nath-datepicker-nav-btn\">\r\n        <svg lucideChevronLeft [size]=\"16\" />\r\n      </button>\r\n\r\n      <span class=\"nath-datepicker-month-label\">{{ currentMonthLabel() }}</span>\r\n\r\n      <button (click)=\"changeMonth(1)\" class=\"nath-datepicker-nav-btn\">\r\n        <svg lucideChevronRight [size]=\"16\" />\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"nath-datepicker-weekdays\">\r\n      <div>Su</div>\r\n      <div>Mo</div>\r\n      <div>Tu</div>\r\n      <div>We</div>\r\n      <div>Th</div>\r\n      <div>Fr</div>\r\n      <div>Sa</div>\r\n    </div>\r\n\r\n    <div class=\"nath-datepicker-days-grid\">\r\n      @for (date of daysInMonth(); track date.getTime()) {\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"selectDate(date)\"\r\n          [disabled]=\"date.getMonth() !== currentViewDate().getMonth()\"\r\n          class=\"nath-datepicker-day\"\r\n          [class.is-outside]=\"date.getMonth() !== currentViewDate().getMonth()\"\r\n          [class.is-selected]=\"isSameDay(date, value())\"\r\n        >\r\n          {{ date.getDate() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["nath-datepicker,.nath-datepicker-theme{--nath-datepicker-width: 100%;--nath-datepicker-max-width: 24rem;--nath-datepicker-bg: #ffffff;--nath-datepicker-border: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-datepicker-radius: .375rem;--nath-datepicker-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-datepicker-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-datepicker-input-padding: .5rem .75rem;--nath-datepicker-panel-bg: #ffffff;--nath-datepicker-panel-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-datepicker-panel-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-datepicker-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-datepicker-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-datepicker-text-disabled: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-datepicker-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-datepicker-selected-bg: var(--color-indigo-600, oklch(51.1% .262 276.966));--nath-datepicker-selected-text: #ffffff;--nath-datepicker-selected-hover-bg: var(--color-indigo-700, oklch(45.7% .24 277.023))}.dark nath-datepicker,.dark .nath-datepicker-theme{--nath-datepicker-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-datepicker-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-datepicker-panel-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-datepicker-panel-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-datepicker-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-datepicker-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-datepicker-text-disabled: var(--color-zinc-700, oklch(37% .013 285.805));--nath-datepicker-hover-bg: var(--color-zinc-900, oklch(21% .006 285.885));--nath-datepicker-selected-text: #000000}.nath-datepicker-host{display:block;width:100%}.nath-datepicker-container{display:flex;position:relative;align-items:center;width:var(--nath-datepicker-width);max-width:var(--nath-datepicker-max-width);background-color:var(--nath-datepicker-bg);border:1px solid var(--nath-datepicker-border);border-radius:var(--nath-datepicker-radius);box-shadow:var(--nath-datepicker-shadow);transition:border-color .2s,box-shadow .2s}.nath-datepicker-container:focus-within{outline:none;border-color:var(--nath-datepicker-ring-color);box-shadow:0 0 0 2px var(--nath-datepicker-ring-color)}.nath-datepicker-input{flex:1;background:transparent;border:none;outline:none;padding:var(--nath-datepicker-input-padding);color:var(--nath-datepicker-text-main);font-size:.875rem}.nath-datepicker-trigger{display:flex;align-items:center;justify-content:center;padding:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-datepicker-text-muted)}.nath-datepicker-panel{background-color:var(--nath-datepicker-panel-bg);border:1px solid var(--nath-datepicker-panel-border);border-radius:.5rem;box-shadow:var(--nath-datepicker-panel-shadow);padding:1rem;width:18rem;margin-top:.25rem;z-index:50;-webkit-user-select:none;user-select:none}.nath-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.nath-datepicker-nav-btn{display:flex;align-items:center;justify-content:center;padding:.25rem;border-radius:9999px;border:none;background:transparent;color:var(--nath-datepicker-text-muted);cursor:pointer;transition:background-color .2s}.nath-datepicker-nav-btn:hover{background-color:var(--nath-datepicker-hover-bg)}.nath-datepicker-month-label{font-size:.875rem;font-weight:600;color:var(--nath-datepicker-text-main)}.nath-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;text-align:center;font-size:.75rem;font-weight:500;color:var(--nath-datepicker-text-muted);margin-bottom:.25rem}.nath-datepicker-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}.nath-datepicker-day{width:2rem;height:2rem;border-radius:9999px;border:none;background:transparent;font-size:.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s,color .2s;color:var(--nath-datepicker-text-main)}.nath-datepicker-day:focus{outline:none;box-shadow:0 0 0 2px var(--nath-datepicker-ring-color)}.nath-datepicker-day:hover:not(.is-selected):not(.is-outside){background-color:var(--nath-datepicker-hover-bg)}.nath-datepicker-day.is-outside{color:var(--nath-datepicker-text-disabled);cursor:default;pointer-events:none}.nath-datepicker-day.is-selected{background-color:var(--nath-datepicker-selected-bg);color:var(--nath-datepicker-selected-text);font-weight:600}.nath-datepicker-day.is-selected:hover{background-color:var(--nath-datepicker-selected-hover-bg)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }, { type: i0.Output, args: ["dirtyChange"] }], inputElement: [{ type: i0.ViewChild, args: ['dateInput', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                    }, template: "@if (withTime()) {\n  <input\n    type=\"datetime-local\"\n    [(ngModel)]=\"dateTimeInputValue\"\n    [attr.id]=\"inputId() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    class=\"nath-datepicker-datetime-input\"\n    (input)=\"onDateTimeInputChange($event)\"\n  />\n} @else {\n  <input\n    type=\"date\"\n    [(ngModel)]=\"dateInputValue\"\n    [attr.id]=\"inputId() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    class=\"nath-datepicker-date-input\"\n    (input)=\"onDateInputChange($event)\"\n  />\n}\n", styles: ["nath-datepicker,.nath-datepicker-theme{--nath-datepicker-date-width: 100%;--nath-datepicker-date-max-width: 9.5rem;--nath-datepicker-datetime-width: 100%;--nath-datepicker-datetime-max-width: 12.5rem}.nath-datepicker-host{display:flex;gap:.5rem}.nath-datepicker-date-input{display:block;width:var(--nath-datepicker-date-width);max-width:var(--nath-datepicker-date-max-width)}.nath-datepicker-host ::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-calendar-icon lucide-calendar\"><path d=\"M8 2v4\"/><path d=\"M16 2v4\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"/><path d=\"M3 10h18\"/></svg>')}.nath-datepicker-datetime-input{display:block;width:var(--nath-datepicker-datetime-width);max-width:var(--nath-datepicker-datetime-max-width)}.dark .nath-datepicker-host ::-webkit-calendar-picker-indicator{filter:invert(100%)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { withTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }, { type: i0.Output, args: ["dirtyChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], dateInputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateInputValue", required: false }] }, { type: i0.Output, args: ["dateInputValueChange"] }], dateTimeInputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTimeInputValue", required: false }] }, { type: i0.Output, args: ["dateTimeInputValueChange"] }] } });
 
 const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
 class DialogRef {
@@ -608,7 +523,7 @@ class NathDialogContainer extends BasePortalOutlet {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: ["nath-dialog-container,.nath-dialog-theme{--nath-dialog-bg: #ffffff;--nath-dialog-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-radius: .75rem;--nath-dialog-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-dialog-mask-bg: rgba(0, 0, 0, .4);--nath-dialog-mask-blur: 4px;--nath-dialog-header-border: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-text-main: var(--color-zinc-900, oklch(21% .006 285.885));--nath-dialog-text-muted: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-dialog-text-title: var(--color-zinc-900, oklch(21% .006 285.885));--nath-dialog-btn-hover-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-btn-icon-color: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-dialog-btn-icon-hover: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-dialog-btn-default-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-btn-default-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-default-hover: var(--color-zinc-200, oklch(92% .004 286.32))}.dark nath-dialog-container,.dark .nath-dialog-theme{--nath-dialog-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-dialog-border: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-header-border: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-text-main: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-dialog-text-title: #ffffff;--nath-dialog-btn-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-icon-hover: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-btn-default-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-default-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-btn-default-hover: var(--color-zinc-700, oklch(37% .013 285.805))}nath-dialog-container{display:contents}.nath-dialog-mask{position:fixed;inset:0;z-index:50;background-color:var(--nath-dialog-mask-bg);-webkit-backdrop-filter:blur(var(--nath-dialog-mask-blur));backdrop-filter:blur(var(--nath-dialog-mask-blur));display:flex;align-items:center;justify-content:center;padding:1rem}.nath-dialog-window{background-color:var(--nath-dialog-bg);color:var(--nath-dialog-text-main);border:1px solid var(--nath-dialog-border);border-radius:var(--nath-dialog-radius);box-shadow:var(--nath-dialog-shadow);max-width:90vw;max-height:90vh;display:flex;flex-direction:column;pointer-events:auto;cursor:default;overflow:hidden}.nath-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--nath-dialog-header-border);cursor:move;-webkit-user-select:none;user-select:none;flex-shrink:0}.nath-dialog-title{font-size:1.125rem;font-weight:600;line-height:1.75rem;letter-spacing:-.025em;color:var(--nath-dialog-text-title);margin:0}.nath-dialog-header-actions{display:flex;gap:.5rem}.nath-dialog-action-btn{color:var(--nath-dialog-btn-icon-color);border-radius:.5rem;padding:.25rem;transition:colors .2s;cursor:pointer;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.nath-dialog-action-btn:hover{color:var(--nath-dialog-btn-icon-hover);background-color:var(--nath-dialog-btn-hover-bg)}.nath-dialog-body{padding:1rem;overflow-y:auto;flex-grow:1}.nath-dialog-footer{padding:1rem;display:flex;justify-content:end;gap:1rem;position:sticky;bottom:-1px;background-color:var(--nath-dialog-bg)}.nath-dialog-btn{padding:.5rem 1rem;font-size:.875rem;font-weight:500;border-radius:.5rem;transition:colors .2s;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center}.nath-dialog-btn--default{background-color:var(--nath-dialog-btn-default-bg);color:var(--nath-dialog-btn-default-text)}.nath-dialog-btn--default:hover{background-color:var(--nath-dialog-btn-default-hover)}.nath-dialog-window.dialog-maximized{max-width:100vw!important;max-height:100vh!important;width:100vw!important;height:100vh!important;border-radius:0!important;transform:none!important}.nath-dialog-content-text{font-size:.875rem;color:var(--nath-dialog-text-muted)}.nath-confirmation-dialog{display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["nath-dialog-container,.nath-dialog-theme{--nath-dialog-bg: #ffffff;--nath-dialog-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-radius: .75rem;--nath-dialog-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-dialog-mask-bg: rgba(0, 0, 0, .4);--nath-dialog-mask-blur: 4px;--nath-dialog-header-border: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-text-main: var(--color-zinc-900, oklch(21% .006 285.885));--nath-dialog-text-muted: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-dialog-text-title: var(--color-zinc-900, oklch(21% .006 285.885));--nath-dialog-btn-hover-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-btn-icon-color: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-dialog-btn-icon-hover: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-dialog-btn-default-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-btn-default-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-default-hover: var(--color-zinc-200, oklch(92% .004 286.32))}.dark nath-dialog-container,.dark .nath-dialog-theme{--nath-dialog-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-dialog-border: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-header-border: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-text-main: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-dialog-text-title: #ffffff;--nath-dialog-btn-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-icon-hover: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-btn-default-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-default-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-btn-default-hover: var(--color-zinc-700, oklch(37% .013 285.805))}nath-dialog-container{display:contents}.nath-dialog-mask{position:fixed;inset:0;z-index:50;background-color:var(--nath-dialog-mask-bg);-webkit-backdrop-filter:blur(var(--nath-dialog-mask-blur));backdrop-filter:blur(var(--nath-dialog-mask-blur));display:flex;align-items:center;justify-content:center;padding:1rem}.nath-dialog-window{background-color:var(--nath-dialog-bg);color:var(--nath-dialog-text-main);border:1px solid var(--nath-dialog-border);border-radius:var(--nath-dialog-radius);box-shadow:var(--nath-dialog-shadow);max-width:90vw;max-height:90vh;display:flex;flex-direction:column;pointer-events:auto;cursor:default;overflow:hidden}.nath-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--nath-dialog-header-border);cursor:move;-webkit-user-select:none;user-select:none;flex-shrink:0}.nath-dialog-title{font-size:1.125rem;font-weight:600;line-height:1.75rem;letter-spacing:-.025em;color:var(--nath-dialog-text-title);margin:0}.nath-dialog-header-actions{display:flex;gap:.5rem}.nath-dialog-action-btn{color:var(--nath-dialog-btn-icon-color);border-radius:.5rem;padding:.25rem;transition:colors .2s;cursor:pointer;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.nath-dialog-action-btn:hover{color:var(--nath-dialog-btn-icon-hover);background-color:var(--nath-dialog-btn-hover-bg)}.nath-dialog-body{padding:1rem;overflow-y:auto;flex-grow:1}.nath-dialog-footer{padding:1rem;display:flex;justify-content:end;gap:1rem;position:sticky;bottom:-1px;background-color:var(--nath-dialog-bg)}.nath-dialog-btn{padding:.5rem 1rem;font-size:.875rem;font-weight:500;border-radius:.5rem;transition:colors .2s;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center}.nath-dialog-btn--default{background-color:var(--nath-dialog-btn-default-bg);color:var(--nath-dialog-btn-default-text)}.nath-dialog-btn--default:hover{background-color:var(--nath-dialog-btn-default-hover)}.nath-dialog-window.dialog-maximized{max-width:100vw!important;max-height:100vh!important;width:100vw!important;height:100vh!important;border-radius:0!important;transform:none!important}.nath-dialog-content-text{font-size:.875rem;color:var(--nath-dialog-text-muted)}.nath-confirmation-dialog{display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { 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: NathDialogContainer, decorators: [{
             type: Component,
@@ -2423,7 +2338,7 @@ class NathPaginator {
         }
       </select>
     </div>
-  `, isInline: true, styles: ["nath-paginator,.nath-paginator-theme{--nath-paginator-select-bg: #ffffff;--nath-paginator-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-paginator-text-muted: var(--color-slate-500, oklch(55.1% .027 264.364));--nath-paginator-text-disabled: var(--color-slate-300, oklch(87.1% .006 286.286));--nath-paginator-hover-bg: var(--color-slate-100, oklch(96.7% .003 264.542));--nath-paginator-active-bg: var(--color-primary-100, oklch(92.5% .004 286.32));--nath-paginator-active-text: var(--color-primary-800, oklch(35% .01 286.3));--nath-paginator-ellipsis-color: var(--color-slate-400, oklch(70.5% .015 286.067));--nath-paginator-border: var(--color-surface-300, oklch(87.1% .006 286.286))}.dark nath-paginator,.dark .nath-paginator-theme{--nath-paginator-select-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-paginator-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-paginator-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-paginator-text-disabled: var(--color-zinc-700, oklch(37% .013 285.805));--nath-paginator-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-paginator-active-bg: var(--color-primary-400, oklch(68% .01 286.3));--nath-paginator-active-text: var(--color-primary-950, oklch(20% .01 286.3));--nath-paginator-ellipsis-color: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-paginator-border: var(--color-surface-600, oklch(44.2% .017 285.786))}.nath-paginator-host{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1rem}@media(min-width:640px){.nath-paginator-host{flex-direction:row}}.nath-paginator-container{display:flex;align-items:center;gap:.25rem}.nath-paginator-info{color:var(--nath-paginator-text-main);font-size:.875rem;margin-right:.25rem}.nath-paginator-btn{display:flex;align-items:center;justify-content:center;padding:.5rem;border-radius:.5rem;border:none;background:transparent;color:var(--nath-paginator-text-muted);cursor:pointer;transition:background-color .2s,opacity .2s}.nath-paginator-btn:hover:not(:disabled){background-color:var(--nath-paginator-hover-bg)}.nath-paginator-btn:disabled{opacity:.4;cursor:default}.nath-paginator-page-btn{padding:.375rem .875rem;border-radius:.5rem;border:none;background:transparent;color:var(--nath-paginator-text-main);font-weight:500;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}.nath-paginator-page-btn:hover:not(:disabled):not(.is-active){background-color:var(--nath-paginator-hover-bg)}.nath-paginator-page-btn.is-active{background-color:var(--nath-paginator-active-bg);color:var(--nath-paginator-active-text);box-shadow:0 1px 2px #0000000d}.nath-paginator-ellipsis{padding:.375rem .75rem;color:var(--nath-paginator-ellipsis-color);font-weight:500;-webkit-user-select:none;user-select:none}.nath-paginator-page-size-container{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--nath-paginator-text-muted)}.nath-paginator-select{background-color:var(--nath-paginator-select-bg);border:1px solid var(--nath-paginator-border);border-radius:.375rem;padding:.25rem .5rem;color:var(--nath-paginator-text-main);outline:none;cursor:pointer;background-image:url(\"data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>\");background-repeat:no-repeat;background-position:calc(100% - .75rem) center!important;-moz-appearance:none!important;-webkit-appearance:none!important;appearance:none!important;padding-right:2rem!important}.dark .nath-paginator-select{background-image:url(\"data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>\")}.nath-paginator-select option{background-color:var(--nath-paginator-select-bg);color:var(--nath-paginator-text-main)}.nath-paginator-select-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["nath-paginator,.nath-paginator-theme{--nath-paginator-select-bg: #ffffff;--nath-paginator-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-paginator-text-muted: var(--color-slate-500, oklch(55.1% .027 264.364));--nath-paginator-text-disabled: var(--color-slate-300, oklch(87.1% .006 286.286));--nath-paginator-hover-bg: var(--color-slate-100, oklch(96.7% .003 264.542));--nath-paginator-active-bg: var(--color-primary-100, oklch(92.5% .004 286.32));--nath-paginator-active-text: var(--color-primary-800, oklch(35% .01 286.3));--nath-paginator-ellipsis-color: var(--color-slate-400, oklch(70.5% .015 286.067));--nath-paginator-border: var(--color-surface-300, oklch(87.1% .006 286.286))}.dark nath-paginator,.dark .nath-paginator-theme{--nath-paginator-select-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-paginator-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-paginator-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-paginator-text-disabled: var(--color-zinc-700, oklch(37% .013 285.805));--nath-paginator-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-paginator-active-bg: var(--color-primary-400, oklch(68% .01 286.3));--nath-paginator-active-text: var(--color-primary-950, oklch(20% .01 286.3));--nath-paginator-ellipsis-color: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-paginator-border: var(--color-surface-600, oklch(44.2% .017 285.786))}.nath-paginator-host{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1rem}@media(min-width:640px){.nath-paginator-host{flex-direction:row}}.nath-paginator-container{display:flex;align-items:center;gap:.25rem}.nath-paginator-info{color:var(--nath-paginator-text-main);font-size:.875rem;margin-right:.25rem}.nath-paginator-btn{display:flex;align-items:center;justify-content:center;padding:.5rem;border-radius:.5rem;border:none;background:transparent;color:var(--nath-paginator-text-muted);cursor:pointer;transition:background-color .2s,opacity .2s}.nath-paginator-btn:hover:not(:disabled){background-color:var(--nath-paginator-hover-bg)}.nath-paginator-btn:disabled{opacity:.4;cursor:default}.nath-paginator-page-btn{padding:.375rem .875rem;border-radius:.5rem;border:none;background:transparent;color:var(--nath-paginator-text-main);font-weight:500;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}.nath-paginator-page-btn:hover:not(:disabled):not(.is-active){background-color:var(--nath-paginator-hover-bg)}.nath-paginator-page-btn.is-active{background-color:var(--nath-paginator-active-bg);color:var(--nath-paginator-active-text);box-shadow:0 1px 2px #0000000d}.nath-paginator-ellipsis{padding:.375rem .75rem;color:var(--nath-paginator-ellipsis-color);font-weight:500;-webkit-user-select:none;user-select:none}.nath-paginator-page-size-container{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--nath-paginator-text-muted)}.nath-paginator-select{background-color:var(--nath-paginator-select-bg);border:1px solid var(--nath-paginator-border);border-radius:.375rem;padding:.25rem .5rem;color:var(--nath-paginator-text-main);outline:none;cursor:pointer;background-image:url(\"data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>\");background-repeat:no-repeat;background-position:calc(100% - .75rem) center!important;-moz-appearance:none!important;-webkit-appearance:none!important;appearance:none!important;padding-right:2rem!important}.dark .nath-paginator-select{background-image:url(\"data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>\")}.nath-paginator-select option{background-color:var(--nath-paginator-select-bg);color:var(--nath-paginator-text-main)}.nath-paginator-select-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathPaginator, decorators: [{
             type: Component,
@@ -4261,7 +4176,7 @@ class NathSelect {
       (click)="toggle()"
     >
       <svg lucideChevronDown [size]="16" />
-    </button>`, isInline: true, styles: ["nath-select,.nath-select-theme{--nath-select-bg: #ffffff;--nath-select-border-color: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-select-border-width: 1px;--nath-select-radius: .375rem;--nath-select-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-select-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-select-input-padding: .25rem;--nath-select-placeholder: var(--color-gray-400, oklch(70.5% .015 286.067));--nath-select-overlay-bg: #ffffff;--nath-select-overlay-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-select-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-select-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-select-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-select-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-select-hover-text: var(--color-gray-900, oklch(21% .006 285.885));--nath-select-selected-bg: var(--color-indigo-50, oklch(96.2% .018 272.846));--nath-select-selected-text: var(--color-indigo-900, oklch(25.7% .09 270.891))}.dark nath-select,.dark .nath-select-theme{--nath-select-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-select-border-color: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-select-overlay-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-select-overlay-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-select-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-select-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-select-placeholder: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-select-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-select-hover-text: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-select-selected-bg: var(--color-indigo-950, oklch(15.2% .06 273.111));--nath-select-selected-text: var(--color-indigo-100, oklch(92% .04 273.111))}nath-select{display:flex;width:100%}.select-combobox{display:flex;position:relative;flex-grow:1;min-width:3.5rem;padding:var(--nath-select-input-padding)!important;cursor:pointer;background-color:var(--nath-select-bg);border-width:var(--nath-select-border-width);border-style:solid;border-color:var(--nath-select-border-color);border-radius:var(--nath-select-radius);box-shadow:var(--nath-select-shadow);transition:border-color .2s,box-shadow .2s;border-top-right-radius:0;border-bottom-right-radius:0}.select-combobox:focus-within{outline:none;border-color:var(--nath-select-ring-color);box-shadow:0 0 0 2px var(--nath-select-ring-color)}.select-combobox__display-wrapper{min-width:0;flex-grow:1;padding-left:.5rem;padding-right:.5rem}.select-combobox__text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nath-select-text-main)}.select-combobox__placeholder{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nath-select-placeholder);min-height:1.5rem}.select-combobox--has-clear-btn{padding-right:2.5rem!important}.select-combobox--borderless{border:0!important;box-shadow:none!important}.nath-select-input{flex:1;background:transparent;border:none;outline:none;padding:var(--nath-select-input-padding);color:var(--nath-select-text-main);font-size:.875rem;width:100%}.select-clear-btn{position:absolute;right:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-select-text-muted)}.select-dropdown-overlay{display:flex;flex-direction:column;min-width:10rem;padding:.25rem 0;z-index:50;background-color:var(--nath-select-overlay-bg);border:1px solid var(--nath-select-overlay-border);border-radius:.375rem;box-shadow:var(--nath-select-overlay-shadow);box-sizing:border-box}.select-listbox{display:flex;flex-direction:column}.select-listbox--scrollable{max-height:15rem;overflow-y:auto}.select-listbox__viewport{max-height:15rem;height:240px;overflow-y:auto;min-width:0;display:flex;flex-direction:column}.select-item{display:flex;align-items:center;padding:.625rem 1rem;cursor:pointer;transition:background-color .15s,color .15s;color:var(--nath-select-text-main);background:transparent;border:none;width:100%;text-align:left}.select-item:focus{outline:none;background-color:var(--nath-select-hover-bg)}.select-item--virtual{padding-left:1rem;padding-right:1rem}.select-item:hover{background-color:var(--nath-select-hover-bg);color:var(--nath-select-hover-text)}.select-item--active{background-color:var(--nath-select-selected-bg)!important;color:var(--nath-select-selected-text)!important}.select-item--status{color:var(--nath-select-text-muted);font-style:italic}.select-trigger-btn-addon{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i2.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }], encapsulation: i0.ViewEncapsulation.None });
+    </button>`, isInline: true, styles: ["nath-select,.nath-select-theme{--nath-select-bg: #ffffff;--nath-select-border-color: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-select-border-width: 1px;--nath-select-radius: .375rem;--nath-select-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-select-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-select-input-padding: .25rem;--nath-select-placeholder: var(--color-gray-400, oklch(70.5% .015 286.067));--nath-select-overlay-bg: #ffffff;--nath-select-overlay-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-select-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-select-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-select-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-select-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-select-hover-text: var(--color-gray-900, oklch(21% .006 285.885));--nath-select-selected-bg: var(--color-indigo-50, oklch(96.2% .018 272.846));--nath-select-selected-text: var(--color-indigo-900, oklch(25.7% .09 270.891))}.dark nath-select,.dark .nath-select-theme{--nath-select-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-select-border-color: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-select-overlay-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-select-overlay-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-select-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-select-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-select-placeholder: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-select-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-select-hover-text: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-select-selected-bg: var(--color-indigo-950, oklch(15.2% .06 273.111));--nath-select-selected-text: var(--color-indigo-100, oklch(92% .04 273.111))}nath-select{display:flex;width:100%}.select-combobox{display:flex;position:relative;flex-grow:1;min-width:3.5rem;padding:var(--nath-select-input-padding)!important;cursor:pointer;background-color:var(--nath-select-bg);border-width:var(--nath-select-border-width);border-style:solid;border-color:var(--nath-select-border-color);border-radius:var(--nath-select-radius);box-shadow:var(--nath-select-shadow);transition:border-color .2s,box-shadow .2s;border-top-right-radius:0;border-bottom-right-radius:0}.select-combobox:focus-within{outline:none;border-color:var(--nath-select-ring-color);box-shadow:0 0 0 2px var(--nath-select-ring-color)}.select-combobox__display-wrapper{min-width:0;flex-grow:1;padding-left:.5rem;padding-right:.5rem}.select-combobox__text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nath-select-text-main)}.select-combobox__placeholder{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nath-select-placeholder);min-height:1.5rem}.select-combobox--has-clear-btn{padding-right:2.5rem!important}.select-combobox--borderless{border:0!important;box-shadow:none!important}.nath-select-input{flex:1;background:transparent;border:none;outline:none;padding:var(--nath-select-input-padding);color:var(--nath-select-text-main);font-size:.875rem;width:100%}.select-clear-btn{position:absolute;right:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-select-text-muted)}.select-dropdown-overlay{display:flex;flex-direction:column;min-width:10rem;padding:.25rem 0;z-index:50;background-color:var(--nath-select-overlay-bg);border:1px solid var(--nath-select-overlay-border);border-radius:.375rem;box-shadow:var(--nath-select-overlay-shadow);box-sizing:border-box}.select-listbox{display:flex;flex-direction:column}.select-listbox--scrollable{max-height:15rem;overflow-y:auto}.select-listbox__viewport{max-height:15rem;height:240px;overflow-y:auto;min-width:0;display:flex;flex-direction:column}.select-item{display:flex;align-items:center;padding:.625rem 1rem;cursor:pointer;transition:background-color .15s,color .15s;color:var(--nath-select-text-main);background:transparent;border:none;width:100%;text-align:left}.select-item:focus{outline:none;background-color:var(--nath-select-hover-bg)}.select-item--virtual{padding-left:1rem;padding-right:1rem}.select-item:hover{background-color:var(--nath-select-hover-bg);color:var(--nath-select-hover-text)}.select-item--active{background-color:var(--nath-select-selected-bg)!important;color:var(--nath-select-selected-text)!important}.select-item--status{color:var(--nath-select-text-muted);font-style:italic}.select-trigger-btn-addon{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i2.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathSelect, decorators: [{
             type: Component,
@@ -4413,7 +4328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       (click)="toggle()"
     >
       <svg lucideChevronDown [size]="16" />
-    </button>`, encapsulation: ViewEncapsulation.None, styles: ["nath-select,.nath-select-theme{--nath-select-bg: #ffffff;--nath-select-border-color: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-select-border-width: 1px;--nath-select-radius: .375rem;--nath-select-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-select-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-select-input-padding: .25rem;--nath-select-placeholder: var(--color-gray-400, oklch(70.5% .015 286.067));--nath-select-overlay-bg: #ffffff;--nath-select-overlay-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-select-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-select-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-select-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-select-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-select-hover-text: var(--color-gray-900, oklch(21% .006 285.885));--nath-select-selected-bg: var(--color-indigo-50, oklch(96.2% .018 272.846));--nath-select-selected-text: var(--color-indigo-900, oklch(25.7% .09 270.891))}.dark nath-select,.dark .nath-select-theme{--nath-select-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-select-border-color: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-select-overlay-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-select-overlay-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-select-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-select-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-select-placeholder: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-select-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-select-hover-text: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-select-selected-bg: var(--color-indigo-950, oklch(15.2% .06 273.111));--nath-select-selected-text: var(--color-indigo-100, oklch(92% .04 273.111))}nath-select{display:flex;width:100%}.select-combobox{display:flex;position:relative;flex-grow:1;min-width:3.5rem;padding:var(--nath-select-input-padding)!important;cursor:pointer;background-color:var(--nath-select-bg);border-width:var(--nath-select-border-width);border-style:solid;border-color:var(--nath-select-border-color);border-radius:var(--nath-select-radius);box-shadow:var(--nath-select-shadow);transition:border-color .2s,box-shadow .2s;border-top-right-radius:0;border-bottom-right-radius:0}.select-combobox:focus-within{outline:none;border-color:var(--nath-select-ring-color);box-shadow:0 0 0 2px var(--nath-select-ring-color)}.select-combobox__display-wrapper{min-width:0;flex-grow:1;padding-left:.5rem;padding-right:.5rem}.select-combobox__text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nath-select-text-main)}.select-combobox__placeholder{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nath-select-placeholder);min-height:1.5rem}.select-combobox--has-clear-btn{padding-right:2.5rem!important}.select-combobox--borderless{border:0!important;box-shadow:none!important}.nath-select-input{flex:1;background:transparent;border:none;outline:none;padding:var(--nath-select-input-padding);color:var(--nath-select-text-main);font-size:.875rem;width:100%}.select-clear-btn{position:absolute;right:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-select-text-muted)}.select-dropdown-overlay{display:flex;flex-direction:column;min-width:10rem;padding:.25rem 0;z-index:50;background-color:var(--nath-select-overlay-bg);border:1px solid var(--nath-select-overlay-border);border-radius:.375rem;box-shadow:var(--nath-select-overlay-shadow);box-sizing:border-box}.select-listbox{display:flex;flex-direction:column}.select-listbox--scrollable{max-height:15rem;overflow-y:auto}.select-listbox__viewport{max-height:15rem;height:240px;overflow-y:auto;min-width:0;display:flex;flex-direction:column}.select-item{display:flex;align-items:center;padding:.625rem 1rem;cursor:pointer;transition:background-color .15s,color .15s;color:var(--nath-select-text-main);background:transparent;border:none;width:100%;text-align:left}.select-item:focus{outline:none;background-color:var(--nath-select-hover-bg)}.select-item--virtual{padding-left:1rem;padding-right:1rem}.select-item:hover{background-color:var(--nath-select-hover-bg);color:var(--nath-select-hover-text)}.select-item--active{background-color:var(--nath-select-selected-bg)!important;color:var(--nath-select-selected-text)!important}.select-item--status{color:var(--nath-select-text-muted);font-style:italic}.select-trigger-btn-addon{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"] }]
+    </button>`, encapsulation: ViewEncapsulation.None, styles: ["nath-select,.nath-select-theme{--nath-select-bg: #ffffff;--nath-select-border-color: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-select-border-width: 1px;--nath-select-radius: .375rem;--nath-select-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-select-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-select-input-padding: .25rem;--nath-select-placeholder: var(--color-gray-400, oklch(70.5% .015 286.067));--nath-select-overlay-bg: #ffffff;--nath-select-overlay-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-select-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-select-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-select-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-select-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-select-hover-text: var(--color-gray-900, oklch(21% .006 285.885));--nath-select-selected-bg: var(--color-indigo-50, oklch(96.2% .018 272.846));--nath-select-selected-text: var(--color-indigo-900, oklch(25.7% .09 270.891))}.dark nath-select,.dark .nath-select-theme{--nath-select-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-select-border-color: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-select-overlay-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-select-overlay-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-select-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-select-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-select-placeholder: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-select-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-select-hover-text: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-select-selected-bg: var(--color-indigo-950, oklch(15.2% .06 273.111));--nath-select-selected-text: var(--color-indigo-100, oklch(92% .04 273.111))}nath-select{display:flex;width:100%}.select-combobox{display:flex;position:relative;flex-grow:1;min-width:3.5rem;padding:var(--nath-select-input-padding)!important;cursor:pointer;background-color:var(--nath-select-bg);border-width:var(--nath-select-border-width);border-style:solid;border-color:var(--nath-select-border-color);border-radius:var(--nath-select-radius);box-shadow:var(--nath-select-shadow);transition:border-color .2s,box-shadow .2s;border-top-right-radius:0;border-bottom-right-radius:0}.select-combobox:focus-within{outline:none;border-color:var(--nath-select-ring-color);box-shadow:0 0 0 2px var(--nath-select-ring-color)}.select-combobox__display-wrapper{min-width:0;flex-grow:1;padding-left:.5rem;padding-right:.5rem}.select-combobox__text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nath-select-text-main)}.select-combobox__placeholder{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nath-select-placeholder);min-height:1.5rem}.select-combobox--has-clear-btn{padding-right:2.5rem!important}.select-combobox--borderless{border:0!important;box-shadow:none!important}.nath-select-input{flex:1;background:transparent;border:none;outline:none;padding:var(--nath-select-input-padding);color:var(--nath-select-text-main);font-size:.875rem;width:100%}.select-clear-btn{position:absolute;right:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-select-text-muted)}.select-dropdown-overlay{display:flex;flex-direction:column;min-width:10rem;padding:.25rem 0;z-index:50;background-color:var(--nath-select-overlay-bg);border:1px solid var(--nath-select-overlay-border);border-radius:.375rem;box-shadow:var(--nath-select-overlay-shadow);box-sizing:border-box}.select-listbox{display:flex;flex-direction:column}.select-listbox--scrollable{max-height:15rem;overflow-y:auto}.select-listbox__viewport{max-height:15rem;height:240px;overflow-y:auto;min-width:0;display:flex;flex-direction:column}.select-item{display:flex;align-items:center;padding:.625rem 1rem;cursor:pointer;transition:background-color .15s,color .15s;color:var(--nath-select-text-main);background:transparent;border:none;width:100%;text-align:left}.select-item:focus{outline:none;background-color:var(--nath-select-hover-bg)}.select-item--virtual{padding-left:1rem;padding-right:1rem}.select-item:hover{background-color:var(--nath-select-hover-bg);color:var(--nath-select-hover-text)}.select-item--active{background-color:var(--nath-select-selected-bg)!important;color:var(--nath-select-selected-text)!important}.select-item--status{color:var(--nath-select-text-muted);font-style:italic}.select-trigger-btn-addon{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], valueWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueWith", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minQueryLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minQueryLength", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], comboboxClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "comboboxClass", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], debouncedQueryChange: [{ type: i0.Output, args: ["debouncedQueryChange"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], unselected: [{ type: i0.Output, args: ["unselected"] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], selectedItemTemplate: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], inputField: [{ type: i0.ViewChild, args: ['inputField', { isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }] } });
 
 class NathSkeleton {