@ngstarter-ui/components 1.0.28 → 1.0.31

package/fesm2022/ngstarter-ui-components-datepicker.mjs

@@ -175,14 +175,14 @@ class MonthView {
         this.hoveredDate.set(date);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonthView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonthView, isStandalone: true, selector: "ngs-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "mouseleave": "handleHover(null)" }, classAttribute: "ngs-month-view" }, ngImport: i0, template: "<table class=\"ngs-calendar-table\">\n  <thead class=\"ngs-calendar-table-header\">\n    <tr>\n      @for (day of weekdays(); track $index) {\n        <th scope=\"col\">{{ day }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody class=\"ngs-calendar-table-body\">\n    @for (week of weeks(); track $index) {\n      @if (week[0].date || week[6].date) {\n        <tr>\n          @for (day of week; track $index) {\n            <td\n              class=\"ngs-calendar-cell\"\n              [class.ngs-calendar-cell-selected]=\"day.selected\"\n              [class.ngs-calendar-cell-today]=\"day.current\"\n              [class.ngs-calendar-cell-empty]=\"!day.date\"\n              [class.ngs-calendar-cell-in-range]=\"day.inRange\"\n              [class.ngs-calendar-cell-range-start]=\"day.rangeStart\"\n              [class.ngs-calendar-cell-range-end]=\"day.rangeEnd\"\n              (click)=\"selectDate(day.date)\"\n              (mouseenter)=\"handleHover(day.date)\"\n            >\n              <div class=\"ngs-calendar-cell-content\">\n                {{ day.label }}\n              </div>\n            </td>\n          }\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;height:100%;min-height:calc(var(--ngs-calendar-cell-size) * 6 + calc(var(--spacing, .25rem) * 2))}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-table th{padding:8px 0;font-size:.75rem;color:var(--color-on-surface-variant);text-align:center}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);border-radius:var(--ngs-calendar-cell-radius);text-align:center;cursor:pointer;position:relative;box-sizing:border-box}:host .ngs-calendar-cell.ngs-calendar-cell-selected{background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-in-range{background:var(--ngs-calendar-cell-in-range-bg);border-radius:0}:host .ngs-calendar-cell.ngs-calendar-cell-range-start{border-top-left-radius:var(--ngs-calendar-cell-radius);border-bottom-left-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-end{border-top-right-radius:var(--ngs-calendar-cell-radius);border-bottom-right-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-start.ngs-calendar-cell-range-end{border-radius:var(--ngs-calendar-cell-radius)}:host .ngs-calendar-cell:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):not(.ngs-calendar-cell-range-start):not(.ngs-calendar-cell-range-end):hover{background:var(--ngs-calendar-cell-hover-bg)}:host .ngs-calendar-cell-empty{cursor:default}:host .ngs-calendar-cell-today{z-index:1}:host .ngs-calendar-cell-today .ngs-calendar-cell-content{outline:var(--ngs-calendar-cell-today-border);border-radius:inherit}:host .ngs-calendar-cell-content{display:flex;align-items:center;justify-content:center;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonthView, isStandalone: true, selector: "ngs-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "mouseleave": "handleHover(null)" }, classAttribute: "ngs-month-view" }, ngImport: i0, template: "<table class=\"ngs-calendar-table\">\n  <thead class=\"ngs-calendar-table-header\">\n    <tr>\n      @for (day of weekdays(); track $index) {\n        <th scope=\"col\">{{ day }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody class=\"ngs-calendar-table-body\">\n    @for (week of weeks(); track $index) {\n      @if (week[0].date || week[6].date) {\n        <tr>\n          @for (day of week; track $index) {\n            <td\n              class=\"ngs-calendar-cell\"\n              [class.ngs-calendar-cell-selected]=\"day.selected\"\n              [class.ngs-calendar-cell-today]=\"day.current\"\n              [class.ngs-calendar-cell-empty]=\"!day.date\"\n              [class.ngs-calendar-cell-in-range]=\"day.inRange\"\n              [class.ngs-calendar-cell-range-start]=\"day.rangeStart\"\n              [class.ngs-calendar-cell-range-end]=\"day.rangeEnd\"\n              (click)=\"selectDate(day.date)\"\n              (mouseenter)=\"handleHover(day.date)\"\n            >\n              <div class=\"ngs-calendar-cell-content\">\n                {{ day.label }}\n              </div>\n            </td>\n          }\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;height:100%;min-height:calc(var(--ngs-calendar-cell-size) * 6 + calc(var(--spacing, .25rem) * 2))}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-table th{padding:8px 0;font-size:var(--ngs-font-size-xs);color:var(--ngs-color-on-surface-variant);text-align:center}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);border-radius:var(--ngs-calendar-cell-radius);text-align:center;cursor:pointer;position:relative;box-sizing:border-box}:host .ngs-calendar-cell.ngs-calendar-cell-selected{background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-in-range{background:var(--ngs-calendar-cell-in-range-bg);border-radius:0}:host .ngs-calendar-cell.ngs-calendar-cell-range-start{border-top-left-radius:var(--ngs-calendar-cell-radius);border-bottom-left-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-end{border-top-right-radius:var(--ngs-calendar-cell-radius);border-bottom-right-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-start.ngs-calendar-cell-range-end{border-radius:var(--ngs-calendar-cell-radius)}:host .ngs-calendar-cell:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):not(.ngs-calendar-cell-range-start):not(.ngs-calendar-cell-range-end):hover{background:var(--ngs-calendar-cell-hover-bg)}:host .ngs-calendar-cell-empty{cursor:default}:host .ngs-calendar-cell-today{z-index:1}:host .ngs-calendar-cell-today .ngs-calendar-cell-content{outline:var(--ngs-calendar-cell-today-border);border-radius:inherit}:host .ngs-calendar-cell-content{display:flex;align-items:center;justify-content:center;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonthView, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-month-view', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-month-view',
                         '(mouseleave)': 'handleHover(null)'
-                    }, template: "<table class=\"ngs-calendar-table\">\n  <thead class=\"ngs-calendar-table-header\">\n    <tr>\n      @for (day of weekdays(); track $index) {\n        <th scope=\"col\">{{ day }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody class=\"ngs-calendar-table-body\">\n    @for (week of weeks(); track $index) {\n      @if (week[0].date || week[6].date) {\n        <tr>\n          @for (day of week; track $index) {\n            <td\n              class=\"ngs-calendar-cell\"\n              [class.ngs-calendar-cell-selected]=\"day.selected\"\n              [class.ngs-calendar-cell-today]=\"day.current\"\n              [class.ngs-calendar-cell-empty]=\"!day.date\"\n              [class.ngs-calendar-cell-in-range]=\"day.inRange\"\n              [class.ngs-calendar-cell-range-start]=\"day.rangeStart\"\n              [class.ngs-calendar-cell-range-end]=\"day.rangeEnd\"\n              (click)=\"selectDate(day.date)\"\n              (mouseenter)=\"handleHover(day.date)\"\n            >\n              <div class=\"ngs-calendar-cell-content\">\n                {{ day.label }}\n              </div>\n            </td>\n          }\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;height:100%;min-height:calc(var(--ngs-calendar-cell-size) * 6 + calc(var(--spacing, .25rem) * 2))}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-table th{padding:8px 0;font-size:.75rem;color:var(--color-on-surface-variant);text-align:center}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);border-radius:var(--ngs-calendar-cell-radius);text-align:center;cursor:pointer;position:relative;box-sizing:border-box}:host .ngs-calendar-cell.ngs-calendar-cell-selected{background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-in-range{background:var(--ngs-calendar-cell-in-range-bg);border-radius:0}:host .ngs-calendar-cell.ngs-calendar-cell-range-start{border-top-left-radius:var(--ngs-calendar-cell-radius);border-bottom-left-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-end{border-top-right-radius:var(--ngs-calendar-cell-radius);border-bottom-right-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-start.ngs-calendar-cell-range-end{border-radius:var(--ngs-calendar-cell-radius)}:host .ngs-calendar-cell:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):not(.ngs-calendar-cell-range-start):not(.ngs-calendar-cell-range-end):hover{background:var(--ngs-calendar-cell-hover-bg)}:host .ngs-calendar-cell-empty{cursor:default}:host .ngs-calendar-cell-today{z-index:1}:host .ngs-calendar-cell-today .ngs-calendar-cell-content{outline:var(--ngs-calendar-cell-today-border);border-radius:inherit}:host .ngs-calendar-cell-content{display:flex;align-items:center;justify-content:center;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<table class=\"ngs-calendar-table\">\n  <thead class=\"ngs-calendar-table-header\">\n    <tr>\n      @for (day of weekdays(); track $index) {\n        <th scope=\"col\">{{ day }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody class=\"ngs-calendar-table-body\">\n    @for (week of weeks(); track $index) {\n      @if (week[0].date || week[6].date) {\n        <tr>\n          @for (day of week; track $index) {\n            <td\n              class=\"ngs-calendar-cell\"\n              [class.ngs-calendar-cell-selected]=\"day.selected\"\n              [class.ngs-calendar-cell-today]=\"day.current\"\n              [class.ngs-calendar-cell-empty]=\"!day.date\"\n              [class.ngs-calendar-cell-in-range]=\"day.inRange\"\n              [class.ngs-calendar-cell-range-start]=\"day.rangeStart\"\n              [class.ngs-calendar-cell-range-end]=\"day.rangeEnd\"\n              (click)=\"selectDate(day.date)\"\n              (mouseenter)=\"handleHover(day.date)\"\n            >\n              <div class=\"ngs-calendar-cell-content\">\n                {{ day.label }}\n              </div>\n            </td>\n          }\n        </tr>\n      }\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;height:100%;min-height:calc(var(--ngs-calendar-cell-size) * 6 + calc(var(--spacing, .25rem) * 2))}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-table th{padding:8px 0;font-size:var(--ngs-font-size-xs);color:var(--ngs-color-on-surface-variant);text-align:center}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);border-radius:var(--ngs-calendar-cell-radius);text-align:center;cursor:pointer;position:relative;box-sizing:border-box}:host .ngs-calendar-cell.ngs-calendar-cell-selected{background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-in-range{background:var(--ngs-calendar-cell-in-range-bg);border-radius:0}:host .ngs-calendar-cell.ngs-calendar-cell-range-start{border-top-left-radius:var(--ngs-calendar-cell-radius);border-bottom-left-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-end{border-top-right-radius:var(--ngs-calendar-cell-radius);border-bottom-right-radius:var(--ngs-calendar-cell-radius);background:var(--ngs-calendar-cell-selected-bg);color:var(--ngs-calendar-cell-selected-color);z-index:1}:host .ngs-calendar-cell.ngs-calendar-cell-range-start.ngs-calendar-cell-range-end{border-radius:var(--ngs-calendar-cell-radius)}:host .ngs-calendar-cell:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):not(.ngs-calendar-cell-range-start):not(.ngs-calendar-cell-range-end):hover{background:var(--ngs-calendar-cell-hover-bg)}:host .ngs-calendar-cell-empty{cursor:default}:host .ngs-calendar-cell-today{z-index:1}:host .ngs-calendar-cell-today .ngs-calendar-cell-content{outline:var(--ngs-calendar-cell-today-border);border-radius:inherit}:host .ngs-calendar-cell-content{display:flex;align-items:center;justify-content:center;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
 
 class YearView {
@@ -385,13 +385,13 @@ class Calendar {
         this.yearSelected.emit(date);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Calendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Calendar, isStandalone: true, selector: "ngs-calendar", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, headerComponent: { classPropertyName: "headerComponent", publicName: "headerComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { classAttribute: "ngs-calendar" }, exportAs: ["ngsCalendar"], ngImport: i0, template: "@if (headerComponent()) {\n  <ng-container *ngComponentOutlet=\"headerComponent()\" />\n} @else {\n  <div class=\"ngs-calendar-header\">\n    <button type=\"button\" (click)=\"toggleView()\" class=\"ngs-calendar-period-button\">\n      {{ periodButtonText() }}\n    </button>\n    <div class=\"ngs-calendar-header-actions\">\n      <button type=\"button\" ngsIconButton (click)=\"prevPage()\" class=\"ngs-calendar-previous-button\">\n        <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n      </button>\n      <button type=\"button\" ngsIconButton (click)=\"nextPage()\" class=\"ngs-calendar-next-button\">\n        <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n      </button>\n    </div>\n  </div>\n}\n\n<div class=\"ngs-calendar-content\">\n  @if (currentView() === 'month') {\n    <ngs-month-view [activeDate]=\"activeDate()\"\n      [selected]=\"selected()\"\n      (selectedChange)=\"selectedChange.emit($event)\"\n     />\n  } @else if (currentView() === 'year') {\n    <ngs-year-view [activeDate]=\"activeDate()\"\n      [selected]=\"_selectedDate()\"\n      (monthSelected)=\"_monthSelectedInYearView($event)\"\n     />\n  } @else if (currentView() === 'multi-year') {\n    <ngs-multi-year-view [activeDate]=\"activeDate()\"\n      [selected]=\"_selectedDate()\"\n      (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n     />\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:calc(var(--ngs-calendar-cell-size) * 7 + var(--ngs-calendar-padding) * 2 + calc(var(--spacing, .25rem) * 2));min-height:calc(var(--ngs-calendar-cell-size) * 5 + calc(var(--spacing, .25rem) * 2));padding:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--ngs-calendar-header-padding);flex-shrink:0;margin-inline-start:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-period-button{background:transparent;border:none;cursor:pointer;font-weight:700}:host .ngs-calendar-period-button:hover{color:var(--color-primary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: MonthView, selector: "ngs-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange"] }, { kind: "component", type: YearView, selector: "ngs-year-view", inputs: ["activeDate", "selected"], outputs: ["monthSelected"] }, { kind: "component", type: MultiYearView, selector: "ngs-multi-year-view", inputs: ["activeDate", "selected"], outputs: ["yearSelected"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Calendar, isStandalone: true, selector: "ngs-calendar", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, headerComponent: { classPropertyName: "headerComponent", publicName: "headerComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { classAttribute: "ngs-calendar" }, exportAs: ["ngsCalendar"], ngImport: i0, template: "@if (headerComponent()) {\n  <ng-container *ngComponentOutlet=\"headerComponent()\" />\n} @else {\n  <div class=\"ngs-calendar-header\">\n    <button type=\"button\" (click)=\"toggleView()\" class=\"ngs-calendar-period-button\">\n      {{ periodButtonText() }}\n    </button>\n    <div class=\"ngs-calendar-header-actions\">\n      <button type=\"button\" ngsIconButton (click)=\"prevPage()\" class=\"ngs-calendar-previous-button\">\n        <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n      </button>\n      <button type=\"button\" ngsIconButton (click)=\"nextPage()\" class=\"ngs-calendar-next-button\">\n        <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n      </button>\n    </div>\n  </div>\n}\n\n<div class=\"ngs-calendar-content\">\n  @if (currentView() === 'month') {\n    <ngs-month-view [activeDate]=\"activeDate()\"\n      [selected]=\"selected()\"\n      (selectedChange)=\"selectedChange.emit($event)\"\n     />\n  } @else if (currentView() === 'year') {\n    <ngs-year-view [activeDate]=\"activeDate()\"\n      [selected]=\"_selectedDate()\"\n      (monthSelected)=\"_monthSelectedInYearView($event)\"\n     />\n  } @else if (currentView() === 'multi-year') {\n    <ngs-multi-year-view [activeDate]=\"activeDate()\"\n      [selected]=\"_selectedDate()\"\n      (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n     />\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:calc(var(--ngs-calendar-cell-size) * 7 + var(--ngs-calendar-padding) * 2 + calc(var(--spacing, .25rem) * 2));min-height:calc(var(--ngs-calendar-cell-size) * 5 + calc(var(--spacing, .25rem) * 2));padding:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--ngs-calendar-header-padding);flex-shrink:0;margin-inline-start:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-period-button{background:transparent;border:none;cursor:pointer;font-weight:700}:host .ngs-calendar-period-button:hover{color:var(--ngs-color-primary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: MonthView, selector: "ngs-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange"] }, { kind: "component", type: YearView, selector: "ngs-year-view", inputs: ["activeDate", "selected"], outputs: ["monthSelected"] }, { kind: "component", type: MultiYearView, selector: "ngs-multi-year-view", inputs: ["activeDate", "selected"], outputs: ["yearSelected"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Calendar, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-calendar', standalone: true, imports: [MonthView, YearView, MultiYearView, Button, Icon, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'ngsCalendar', host: {
                         'class': 'ngs-calendar',
-                    }, template: "@if (headerComponent()) {\n  <ng-container *ngComponentOutlet=\"headerComponent()\" />\n} @else {\n  <div class=\"ngs-calendar-header\">\n    <button type=\"button\" (click)=\"toggleView()\" class=\"ngs-calendar-period-button\">\n      {{ periodButtonText() }}\n    </button>\n    <div class=\"ngs-calendar-header-actions\">\n      <button type=\"button\" ngsIconButton (click)=\"prevPage()\" class=\"ngs-calendar-previous-button\">\n        <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n      </button>\n      <button type=\"button\" ngsIconButton (click)=\"nextPage()\" class=\"ngs-calendar-next-button\">\n        <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n      </button>\n    </div>\n  </div>\n}\n\n<div class=\"ngs-calendar-content\">\n  @if (currentView() === 'month') {\n    <ngs-month-view [activeDate]=\"activeDate()\"\n      [selected]=\"selected()\"\n      (selectedChange)=\"selectedChange.emit($event)\"\n     />\n  } @else if (currentView() === 'year') {\n    <ngs-year-view [activeDate]=\"activeDate()\"\n      [selected]=\"_selectedDate()\"\n      (monthSelected)=\"_monthSelectedInYearView($event)\"\n     />\n  } @else if (currentView() === 'multi-year') {\n    <ngs-multi-year-view [activeDate]=\"activeDate()\"\n      [selected]=\"_selectedDate()\"\n      (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n     />\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:calc(var(--ngs-calendar-cell-size) * 7 + var(--ngs-calendar-padding) * 2 + calc(var(--spacing, .25rem) * 2));min-height:calc(var(--ngs-calendar-cell-size) * 5 + calc(var(--spacing, .25rem) * 2));padding:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--ngs-calendar-header-padding);flex-shrink:0;margin-inline-start:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-period-button{background:transparent;border:none;cursor:pointer;font-weight:700}:host .ngs-calendar-period-button:hover{color:var(--color-primary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "@if (headerComponent()) {\n  <ng-container *ngComponentOutlet=\"headerComponent()\" />\n} @else {\n  <div class=\"ngs-calendar-header\">\n    <button type=\"button\" (click)=\"toggleView()\" class=\"ngs-calendar-period-button\">\n      {{ periodButtonText() }}\n    </button>\n    <div class=\"ngs-calendar-header-actions\">\n      <button type=\"button\" ngsIconButton (click)=\"prevPage()\" class=\"ngs-calendar-previous-button\">\n        <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n      </button>\n      <button type=\"button\" ngsIconButton (click)=\"nextPage()\" class=\"ngs-calendar-next-button\">\n        <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n      </button>\n    </div>\n  </div>\n}\n\n<div class=\"ngs-calendar-content\">\n  @if (currentView() === 'month') {\n    <ngs-month-view [activeDate]=\"activeDate()\"\n      [selected]=\"selected()\"\n      (selectedChange)=\"selectedChange.emit($event)\"\n     />\n  } @else if (currentView() === 'year') {\n    <ngs-year-view [activeDate]=\"activeDate()\"\n      [selected]=\"_selectedDate()\"\n      (monthSelected)=\"_monthSelectedInYearView($event)\"\n     />\n  } @else if (currentView() === 'multi-year') {\n    <ngs-multi-year-view [activeDate]=\"activeDate()\"\n      [selected]=\"_selectedDate()\"\n      (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n     />\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:calc(var(--ngs-calendar-cell-size) * 7 + var(--ngs-calendar-padding) * 2 + calc(var(--spacing, .25rem) * 2));min-height:calc(var(--ngs-calendar-cell-size) * 5 + calc(var(--spacing, .25rem) * 2));padding:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--ngs-calendar-header-padding);flex-shrink:0;margin-inline-start:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-period-button{background:transparent;border:none;cursor:pointer;font-weight:700}:host .ngs-calendar-period-button:hover{color:var(--ngs-color-primary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], headerComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerComponent", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }] } });
 
 class DatepickerActions {
@@ -488,14 +488,14 @@ class Datepicker {
         this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Datepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Datepicker, isStandalone: true, selector: "ngs-datepicker", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, calendarHeaderComponent: { classPropertyName: "calendarHeaderComponent", publicName: "calendarHeaderComponent", isSignal: true, isRequired: false, transformFunction: null }, quickPresets: { classPropertyName: "quickPresets", publicName: "quickPresets", isSignal: true, isRequired: false, transformFunction: null }, showQuickPresets: { classPropertyName: "showQuickPresets", publicName: "showQuickPresets", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "actions", first: true, predicate: DatepickerActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_portalTemplate", first: true, predicate: ["portal"], descendants: true, isSignal: true }], exportAs: ["ngsDatepicker"], ngImport: i0, template: "<ng-template #portal>\n  <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n    <div class=\"ngs-datepicker-inner-container\">\n      @if (showQuickPresets() && quickPresets().length > 0) {\n        <div class=\"ngs-datepicker-presets\">\n          @for (preset of quickPresets(); track preset.label) {\n            <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n              {{ preset.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <ngs-calendar\n        [startAt]=\"startAt()\"\n        [selected]=\"_selected()\"\n        [headerComponent]=\"calendarHeaderComponent()\"\n        (selectedChange)=\"_select($event)\"\n      />\n    </div>\n\n    @if (actions()) {\n      <ng-content select=\"ngs-datepicker-actions\"/>\n    }\n  </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--dropdown-bg);--ngs-datepicker-color: var(--color-on-surface);--ngs-datepicker-shadow: var(--dropdown-shadow);--ngs-datepicker-radius: var(--dropdown-radius);--ngs-datepicker-border: var(--dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: .5rem;--ngs-calendar-cell-hover-bg: var(--color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--color-primary);--ngs-calendar-cell-selected-color: var(--color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--color-primary-container);--ngs-datepicker-preset-hover-bg: var(--color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:.875rem;white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:80px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--input-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "component", type: Calendar, selector: "ngs-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "headerComponent"], outputs: ["selectedChange", "yearSelected", "monthSelected"], exportAs: ["ngsCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Datepicker, isStandalone: true, selector: "ngs-datepicker", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, calendarHeaderComponent: { classPropertyName: "calendarHeaderComponent", publicName: "calendarHeaderComponent", isSignal: true, isRequired: false, transformFunction: null }, quickPresets: { classPropertyName: "quickPresets", publicName: "quickPresets", isSignal: true, isRequired: false, transformFunction: null }, showQuickPresets: { classPropertyName: "showQuickPresets", publicName: "showQuickPresets", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "actions", first: true, predicate: DatepickerActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_portalTemplate", first: true, predicate: ["portal"], descendants: true, isSignal: true }], exportAs: ["ngsDatepicker"], ngImport: i0, template: "<ng-template #portal>\n  <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n    <div class=\"ngs-datepicker-inner-container\">\n      @if (showQuickPresets() && quickPresets().length > 0) {\n        <div class=\"ngs-datepicker-presets\">\n          @for (preset of quickPresets(); track preset.label) {\n            <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n              {{ preset.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <ngs-calendar\n        [startAt]=\"startAt()\"\n        [selected]=\"_selected()\"\n        [headerComponent]=\"calendarHeaderComponent()\"\n        (selectedChange)=\"_select($event)\"\n      />\n    </div>\n\n    @if (actions()) {\n      <ng-content select=\"ngs-datepicker-actions\"/>\n    }\n  </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:80px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--ngs-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "component", type: Calendar, selector: "ngs-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "headerComponent"], outputs: ["selectedChange", "yearSelected", "monthSelected"], exportAs: ["ngsCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Datepicker, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-datepicker', exportAs: 'ngsDatepicker', standalone: true, imports: [
                         OverlayModule,
                         Calendar
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #portal>\n  <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n    <div class=\"ngs-datepicker-inner-container\">\n      @if (showQuickPresets() && quickPresets().length > 0) {\n        <div class=\"ngs-datepicker-presets\">\n          @for (preset of quickPresets(); track preset.label) {\n            <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n              {{ preset.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <ngs-calendar\n        [startAt]=\"startAt()\"\n        [selected]=\"_selected()\"\n        [headerComponent]=\"calendarHeaderComponent()\"\n        (selectedChange)=\"_select($event)\"\n      />\n    </div>\n\n    @if (actions()) {\n      <ng-content select=\"ngs-datepicker-actions\"/>\n    }\n  </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--dropdown-bg);--ngs-datepicker-color: var(--color-on-surface);--ngs-datepicker-shadow: var(--dropdown-shadow);--ngs-datepicker-radius: var(--dropdown-radius);--ngs-datepicker-border: var(--dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: .5rem;--ngs-calendar-cell-hover-bg: var(--color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--color-primary);--ngs-calendar-cell-selected-color: var(--color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--color-primary-container);--ngs-datepicker-preset-hover-bg: var(--color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:.875rem;white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:80px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--input-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #portal>\n  <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n    <div class=\"ngs-datepicker-inner-container\">\n      @if (showQuickPresets() && quickPresets().length > 0) {\n        <div class=\"ngs-datepicker-presets\">\n          @for (preset of quickPresets(); track preset.label) {\n            <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n              {{ preset.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <ngs-calendar\n        [startAt]=\"startAt()\"\n        [selected]=\"_selected()\"\n        [headerComponent]=\"calendarHeaderComponent()\"\n        (selectedChange)=\"_select($event)\"\n      />\n    </div>\n\n    @if (actions()) {\n      <ng-content select=\"ngs-datepicker-actions\"/>\n    }\n  </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:80px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--ngs-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { _portalTemplate: [{ type: i0.ViewChild, args: ['portal', { isSignal: true }] }], actions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DatepickerActions), { isSignal: true }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], calendarHeaderComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarHeaderComponent", required: false }] }], quickPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickPresets", required: false }] }], showQuickPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuickPresets", required: false }] }] } });
 
 class DatepickerApply {
@@ -661,11 +661,11 @@ class DateRangePicker {
         this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DateRangePicker, isStandalone: true, selector: "ngs-date-range-picker", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, calendarHeaderComponent: { classPropertyName: "calendarHeaderComponent", publicName: "calendarHeaderComponent", isSignal: true, isRequired: false, transformFunction: null }, quickPresets: { classPropertyName: "quickPresets", publicName: "quickPresets", isSignal: true, isRequired: false, transformFunction: null }, showQuickPresets: { classPropertyName: "showQuickPresets", publicName: "showQuickPresets", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "actions", first: true, predicate: DatepickerActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_portalTemplate", first: true, predicate: ["portal"], descendants: true, isSignal: true }], exportAs: ["ngsDateRangePicker"], ngImport: i0, template: "<ng-template #portal>\n  <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n    <div class=\"ngs-datepicker-inner-container\">\n      @if (showQuickPresets() && _effectivePresets().length > 0) {\n        <div class=\"ngs-datepicker-presets\">\n          @for (preset of _effectivePresets(); track preset.label) {\n            <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n              {{ preset.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <ngs-calendar [startAt]=\"startAt()\"\n        [selected]=\"_selectedRange()\"\n        [headerComponent]=\"calendarHeaderComponent()\"\n        (selectedChange)=\"_select($event)\"\n       />\n    </div>\n\n    @if (actions()) {\n      <ng-content select=\"ngs-datepicker-actions\" />\n    }\n  </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--dropdown-bg);--ngs-datepicker-color: var(--color-on-surface);--ngs-datepicker-shadow: var(--dropdown-shadow);--ngs-datepicker-radius: var(--dropdown-radius);--ngs-datepicker-border: var(--dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: .5rem;--ngs-calendar-cell-hover-bg: var(--color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--color-primary);--ngs-calendar-cell-selected-color: var(--color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--color-primary-container);--ngs-datepicker-preset-hover-bg: var(--color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:.875rem;white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:80px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--input-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "component", type: Calendar, selector: "ngs-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "headerComponent"], outputs: ["selectedChange", "yearSelected", "monthSelected"], exportAs: ["ngsCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DateRangePicker, isStandalone: true, selector: "ngs-date-range-picker", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, calendarHeaderComponent: { classPropertyName: "calendarHeaderComponent", publicName: "calendarHeaderComponent", isSignal: true, isRequired: false, transformFunction: null }, quickPresets: { classPropertyName: "quickPresets", publicName: "quickPresets", isSignal: true, isRequired: false, transformFunction: null }, showQuickPresets: { classPropertyName: "showQuickPresets", publicName: "showQuickPresets", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "actions", first: true, predicate: DatepickerActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_portalTemplate", first: true, predicate: ["portal"], descendants: true, isSignal: true }], exportAs: ["ngsDateRangePicker"], ngImport: i0, template: "<ng-template #portal>\n  <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n    <div class=\"ngs-datepicker-inner-container\">\n      @if (showQuickPresets() && _effectivePresets().length > 0) {\n        <div class=\"ngs-datepicker-presets\">\n          @for (preset of _effectivePresets(); track preset.label) {\n            <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n              {{ preset.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <ngs-calendar [startAt]=\"startAt()\"\n        [selected]=\"_selectedRange()\"\n        [headerComponent]=\"calendarHeaderComponent()\"\n        (selectedChange)=\"_select($event)\"\n       />\n    </div>\n\n    @if (actions()) {\n      <ng-content select=\"ngs-datepicker-actions\" />\n    }\n  </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:80px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--ngs-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "component", type: Calendar, selector: "ngs-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "headerComponent"], outputs: ["selectedChange", "yearSelected", "monthSelected"], exportAs: ["ngsCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateRangePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-date-range-picker', standalone: true, imports: [OverlayModule, Calendar], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'ngsDateRangePicker', template: "<ng-template #portal>\n  <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n    <div class=\"ngs-datepicker-inner-container\">\n      @if (showQuickPresets() && _effectivePresets().length > 0) {\n        <div class=\"ngs-datepicker-presets\">\n          @for (preset of _effectivePresets(); track preset.label) {\n            <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n              {{ preset.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <ngs-calendar [startAt]=\"startAt()\"\n        [selected]=\"_selectedRange()\"\n        [headerComponent]=\"calendarHeaderComponent()\"\n        (selectedChange)=\"_select($event)\"\n       />\n    </div>\n\n    @if (actions()) {\n      <ng-content select=\"ngs-datepicker-actions\" />\n    }\n  </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--dropdown-bg);--ngs-datepicker-color: var(--color-on-surface);--ngs-datepicker-shadow: var(--dropdown-shadow);--ngs-datepicker-radius: var(--dropdown-radius);--ngs-datepicker-border: var(--dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: .5rem;--ngs-calendar-cell-hover-bg: var(--color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--color-primary);--ngs-calendar-cell-selected-color: var(--color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--color-primary-container);--ngs-datepicker-preset-hover-bg: var(--color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:.875rem;white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:80px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--input-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ngs-date-range-picker', standalone: true, imports: [OverlayModule, Calendar], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'ngsDateRangePicker', template: "<ng-template #portal>\n  <div class=\"ngs-datepicker-content\" [class.ngs-datepicker-above]=\"_isAbove()\" [class.ngs-datepicker-below]=\"!_isAbove()\">\n    <div class=\"ngs-datepicker-inner-container\">\n      @if (showQuickPresets() && _effectivePresets().length > 0) {\n        <div class=\"ngs-datepicker-presets\">\n          @for (preset of _effectivePresets(); track preset.label) {\n            <button type=\"button\" class=\"ngs-datepicker-preset\" (click)=\"_selectPreset(preset)\">\n              {{ preset.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <ngs-calendar [startAt]=\"startAt()\"\n        [selected]=\"_selectedRange()\"\n        [headerComponent]=\"calendarHeaderComponent()\"\n        (selectedChange)=\"_select($event)\"\n       />\n    </div>\n\n    @if (actions()) {\n      <ng-content select=\"ngs-datepicker-actions\" />\n    }\n  </div>\n</ng-template>\n", styles: [".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:80px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--ngs-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], calendarHeaderComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarHeaderComponent", required: false }] }], quickPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickPresets", required: false }] }], showQuickPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuickPresets", required: false }] }], _portalTemplate: [{ type: i0.ViewChild, args: ['portal', { isSignal: true }] }], actions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DatepickerActions), { isSignal: true }] }] } });
 
 class DatepickerInput {
@@ -956,7 +956,7 @@ class DateRangeInput {
                 provide: FormFieldControl,
                 useExisting: forwardRef(() => DateRangeInput)
             }
-        ], queries: [{ propertyName: "_startInput", first: true, predicate: StartDate, descendants: true, isSignal: true }, { propertyName: "_endInput", first: true, predicate: EndDate, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ngs-date-range-input-container\">\n  <div class=\"ngs-date-range-input-start-wrapper\">\n    <ng-content select=\"input[ngsStartDate]\"/>\n  </div>\n  <span class=\"ngs-date-range-input-separator\">{{ separator() }}</span>\n  <div class=\"ngs-date-range-input-end-wrapper\">\n    <ng-content select=\"input[ngsEndDate]\"/>\n  </div>\n</div>\n", styles: [":host{display:block}\n", ".ngs-datepicker-content{--ngs-datepicker-bg: var(--dropdown-bg);--ngs-datepicker-color: var(--color-on-surface);--ngs-datepicker-shadow: var(--dropdown-shadow);--ngs-datepicker-radius: var(--dropdown-radius);--ngs-datepicker-border: var(--dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: .5rem;--ngs-calendar-cell-hover-bg: var(--color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--color-primary);--ngs-calendar-cell-selected-color: var(--color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--color-primary-container);--ngs-datepicker-preset-hover-bg: var(--color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:.875rem;white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:80px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--input-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "_startInput", first: true, predicate: StartDate, descendants: true, isSignal: true }, { propertyName: "_endInput", first: true, predicate: EndDate, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ngs-date-range-input-container\">\n  <div class=\"ngs-date-range-input-start-wrapper\">\n    <ng-content select=\"input[ngsStartDate]\"/>\n  </div>\n  <span class=\"ngs-date-range-input-separator\">{{ separator() }}</span>\n  <div class=\"ngs-date-range-input-end-wrapper\">\n    <ng-content select=\"input[ngsEndDate]\"/>\n  </div>\n</div>\n", styles: [":host{display:block}\n", ".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:80px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--ngs-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateRangeInput, decorators: [{
             type: Component,
@@ -970,7 +970,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                             provide: FormFieldControl,
                             useExisting: forwardRef(() => DateRangeInput)
                         }
-                    ], template: "<div class=\"ngs-date-range-input-container\">\n  <div class=\"ngs-date-range-input-start-wrapper\">\n    <ng-content select=\"input[ngsStartDate]\"/>\n  </div>\n  <span class=\"ngs-date-range-input-separator\">{{ separator() }}</span>\n  <div class=\"ngs-date-range-input-end-wrapper\">\n    <ng-content select=\"input[ngsEndDate]\"/>\n  </div>\n</div>\n", styles: [":host{display:block}\n", ".ngs-datepicker-content{--ngs-datepicker-bg: var(--dropdown-bg);--ngs-datepicker-color: var(--color-on-surface);--ngs-datepicker-shadow: var(--dropdown-shadow);--ngs-datepicker-radius: var(--dropdown-radius);--ngs-datepicker-border: var(--dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: .5rem;--ngs-calendar-cell-hover-bg: var(--color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--color-primary);--ngs-calendar-cell-selected-color: var(--color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--color-primary-container);--ngs-datepicker-preset-hover-bg: var(--color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:.875rem;white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:80px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--input-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div class=\"ngs-date-range-input-container\">\n  <div class=\"ngs-date-range-input-start-wrapper\">\n    <ng-content select=\"input[ngsStartDate]\"/>\n  </div>\n  <span class=\"ngs-date-range-input-separator\">{{ separator() }}</span>\n  <div class=\"ngs-date-range-input-end-wrapper\">\n    <ng-content select=\"input[ngsEndDate]\"/>\n  </div>\n</div>\n", styles: [":host{display:block}\n", ".ngs-datepicker-content{--ngs-datepicker-bg: var(--ngs-dropdown-bg);--ngs-datepicker-color: var(--ngs-color-on-surface);--ngs-datepicker-shadow: var(--ngs-dropdown-shadow);--ngs-datepicker-radius: var(--ngs-dropdown-radius);--ngs-datepicker-border: var(--ngs-dropdown-border);--ngs-calendar-padding: calc(var(--spacing, .25rem) * 2);--ngs-calendar-cell-size: calc(var(--spacing, .25rem) * 9);--ngs-calendar-cell-radius: var(--ngs-radius-lg);--ngs-calendar-cell-hover-bg: var(--ngs-color-surface-container-high);--ngs-calendar-cell-selected-bg: var(--ngs-color-primary);--ngs-calendar-cell-selected-color: var(--ngs-color-on-primary);--ngs-calendar-cell-today-border: 1px solid var(--ngs-color-outline);--ngs-calendar-header-padding: 8px;--ngs-calendar-cell-in-range-bg: var(--ngs-color-primary-container);--ngs-datepicker-preset-hover-bg: var(--ngs-color-surface-container-high);--ngs-datepicker-preset-padding: 8px 16px;--ngs-datepicker-presets-border: 1px solid var(--ngs-color-border);background:var(--ngs-datepicker-bg);color:var(--ngs-datepicker-color);box-shadow:var(--ngs-datepicker-shadow);border-radius:var(--ngs-datepicker-radius);border:var(--ngs-datepicker-border);animation:ngs-datepicker-panel-showing .15s cubic-bezier(0,0,.2,1)}.ngs-datepicker-content.ngs-datepicker-below{transform-origin:top}.ngs-datepicker-content.ngs-datepicker-above{transform-origin:bottom}@keyframes ngs-datepicker-panel-showing{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.ngs-datepicker-content .ngs-datepicker-inner-container{display:flex}.ngs-datepicker-content .ngs-datepicker-presets{display:flex;flex-direction:column;padding:8px 0;border-inline-end:var(--ngs-datepicker-presets-border);min-width:120px}.ngs-datepicker-content .ngs-datepicker-preset{background:transparent;border:none;cursor:pointer;padding:var(--ngs-datepicker-preset-padding);text-align:start;font-size:var(--ngs-font-size-sm);white-space:nowrap}.ngs-datepicker-content .ngs-datepicker-preset:hover{background:var(--ngs-datepicker-preset-hover-bg)}.ngs-date-range-input{display:flex;width:100%}.ngs-date-range-input.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}.ngs-date-range-input:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}.ngs-date-range-input-container{display:flex;align-items:center;gap:8px;width:100%;transition:opacity .2s,visibility .2s}.ngs-date-range-input-separator{flex-shrink:0}.ngs-date-range-input-start,.ngs-date-range-input-end{background:transparent;border:none;outline:none;width:80px}.ngs-date-range-input-start input::placeholder,.ngs-date-range-input-end input::placeholder{color:var(--ngs-field-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { rangePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePicker", required: true }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], _startInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StartDate), { isSignal: true }] }], _endInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EndDate), { isSignal: true }] }] } });
 let nextUniqueId = 0;