npm - @ngstarter-ui/components - Versions diffs - 21.0.23 → 21.0.25 - Mend

@ngstarter-ui/components 21.0.23 → 21.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

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

@@ -182,11 +182,11 @@ class MonthView {
         this.rangePreviewDateChange.emit(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 }, rangePreviewDate: { classPropertyName: "rangePreviewDate", publicName: "rangePreviewDate", isSignal: true, isRequired: false, transformFunction: null }, sharedRangePreview: { classPropertyName: "sharedRangePreview", publicName: "sharedRangePreview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", rangePreviewDateChange: "rangePreviewDateChange" }, 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-weight:600;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 });
+    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 }, rangePreviewDate: { classPropertyName: "rangePreviewDate", publicName: "rangePreviewDate", isSignal: true, isRequired: false, transformFunction: null }, sharedRangePreview: { classPropertyName: "sharedRangePreview", publicName: "sharedRangePreview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", rangePreviewDateChange: "rangePreviewDateChange" }, host: { listeners: { "mouseleave": "handleHover(null)" }, classAttribute: "ngs-month-view" }, exportAs: ["ngsMonthView"], 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-weight:600;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: {
+            args: [{ selector: 'ngs-month-view', exportAs: 'ngsMonthView', 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-weight:600;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"] }]
@@ -227,11 +227,11 @@ class YearView {
         this.monthSelected.emit(date);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: YearView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: YearView, isStandalone: true, selector: "ngs-year-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { monthSelected: "monthSelected" }, host: { classAttribute: "ngs-year-view" }, ngImport: i0, template: "<table class=\"ngs-calendar-table\">\n  <tbody class=\"ngs-calendar-table-body\">\n    @for (row of months(); track row) {\n      <tr>\n        @for (month of row; track month.index) {\n          <td\n            class=\"ngs-calendar-cell\"\n            [class.ngs-calendar-cell-selected]=\"month.selected\"\n            [class.ngs-calendar-cell-today]=\"month.current\"\n            (click)=\"selectMonth(month.index)\"\n          >\n            <div class=\"ngs-calendar-cell-content\">\n              {{ month.label }}\n            </div>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;height:100%}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);text-align:center;cursor:pointer;border-radius:var(--ngs-calendar-cell-radius);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:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):hover{background:var(--ngs-calendar-cell-hover-bg)}: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: YearView, isStandalone: true, selector: "ngs-year-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { monthSelected: "monthSelected" }, host: { classAttribute: "ngs-year-view" }, exportAs: ["ngsYearView"], ngImport: i0, template: "<table class=\"ngs-calendar-table\">\n  <tbody class=\"ngs-calendar-table-body\">\n    @for (row of months(); track row) {\n      <tr>\n        @for (month of row; track month.index) {\n          <td\n            class=\"ngs-calendar-cell\"\n            [class.ngs-calendar-cell-selected]=\"month.selected\"\n            [class.ngs-calendar-cell-today]=\"month.current\"\n            (click)=\"selectMonth(month.index)\"\n          >\n            <div class=\"ngs-calendar-cell-content\">\n              {{ month.label }}\n            </div>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;height:100%}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);text-align:center;cursor:pointer;border-radius:var(--ngs-calendar-cell-radius);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:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):hover{background:var(--ngs-calendar-cell-hover-bg)}: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: YearView, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-year-view', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ngs-year-view', exportAs: 'ngsYearView', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-year-view',
                     }, template: "<table class=\"ngs-calendar-table\">\n  <tbody class=\"ngs-calendar-table-body\">\n    @for (row of months(); track row) {\n      <tr>\n        @for (month of row; track month.index) {\n          <td\n            class=\"ngs-calendar-cell\"\n            [class.ngs-calendar-cell-selected]=\"month.selected\"\n            [class.ngs-calendar-cell-today]=\"month.current\"\n            (click)=\"selectMonth(month.index)\"\n          >\n            <div class=\"ngs-calendar-cell-content\">\n              {{ month.label }}\n            </div>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;height:100%}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);text-align:center;cursor:pointer;border-radius:var(--ngs-calendar-cell-radius);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:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):hover{background:var(--ngs-calendar-cell-hover-bg)}: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 }] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }] } });
@@ -273,11 +273,11 @@ class MultiYearView {
         this.yearSelected.emit(date);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MultiYearView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MultiYearView, isStandalone: true, selector: "ngs-multi-year-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { yearSelected: "yearSelected" }, host: { classAttribute: "ngs-multi-year-view" }, ngImport: i0, template: "<table class=\"ngs-calendar-table\">\n  <tbody class=\"ngs-calendar-table-body\">\n    @for (row of years(); track row) {\n      <tr>\n        @for (year of row; track year.label) {\n          <td\n            class=\"ngs-calendar-cell\"\n            [class.ngs-calendar-cell-selected]=\"year.selected\"\n            [class.ngs-calendar-cell-today]=\"year.current\"\n            (click)=\"selectYear(year.value)\"\n          >\n            <div class=\"ngs-calendar-cell-content\">\n              {{ year.label }}\n            </div>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;height:100%}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);text-align:center;cursor:pointer;border-radius:var(--ngs-calendar-cell-radius);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:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):hover{background:var(--ngs-calendar-cell-hover-bg)}: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: MultiYearView, isStandalone: true, selector: "ngs-multi-year-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { yearSelected: "yearSelected" }, host: { classAttribute: "ngs-multi-year-view" }, exportAs: ["ngsMultiYearView"], ngImport: i0, template: "<table class=\"ngs-calendar-table\">\n  <tbody class=\"ngs-calendar-table-body\">\n    @for (row of years(); track row) {\n      <tr>\n        @for (year of row; track year.label) {\n          <td\n            class=\"ngs-calendar-cell\"\n            [class.ngs-calendar-cell-selected]=\"year.selected\"\n            [class.ngs-calendar-cell-today]=\"year.current\"\n            (click)=\"selectYear(year.value)\"\n          >\n            <div class=\"ngs-calendar-cell-content\">\n              {{ year.label }}\n            </div>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;height:100%}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);text-align:center;cursor:pointer;border-radius:var(--ngs-calendar-cell-radius);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:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):hover{background:var(--ngs-calendar-cell-hover-bg)}: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: MultiYearView, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-multi-year-view', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ngs-multi-year-view', exportAs: 'ngsMultiYearView', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-multi-year-view',
                     }, template: "<table class=\"ngs-calendar-table\">\n  <tbody class=\"ngs-calendar-table-body\">\n    @for (row of years(); track row) {\n      <tr>\n        @for (year of row; track year.label) {\n          <td\n            class=\"ngs-calendar-cell\"\n            [class.ngs-calendar-cell-selected]=\"year.selected\"\n            [class.ngs-calendar-cell-today]=\"year.current\"\n            (click)=\"selectYear(year.value)\"\n          >\n            <div class=\"ngs-calendar-cell-content\">\n              {{ year.label }}\n            </div>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;height:100%}:host .ngs-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}:host .ngs-calendar-cell{width:var(--ngs-calendar-cell-size);height:var(--ngs-calendar-cell-size);text-align:center;cursor:pointer;border-radius:var(--ngs-calendar-cell-radius);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:not(.ngs-calendar-cell-empty):not(.ngs-calendar-cell-selected):hover{background:var(--ngs-calendar-cell-hover-bg)}: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 }] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }] } });
@@ -409,11 +409,18 @@ class Calendar {
         return `${this._dateAdapter.getYear(date)}-${this._dateAdapter.getMonth(date)}-${index}`;
     }
     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 }, visibleCalendars: { classPropertyName: "visibleCalendars", publicName: "visibleCalendars", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.ngs-calendar-multiple-months": "currentView() === \"month\" && visibleCalendars() === 2" }, 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\" [class.ngs-calendar-content-multiple]=\"currentView() === 'month' && visibleCalendars() === 2\">\n  @if (currentView() === 'month') {\n    @for (monthActiveDate of _monthViewActiveDates(); track _trackMonth($index, monthActiveDate)) {\n      <ngs-month-view [activeDate]=\"monthActiveDate\"\n        [selected]=\"selected()\"\n        [rangePreviewDate]=\"_rangePreviewDate()\"\n        [sharedRangePreview]=\"true\"\n        (rangePreviewDateChange)=\"_rangePreviewDate.set($event)\"\n        (selectedChange)=\"selectedChange.emit($event)\"\n       />\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-multiple-months{width:auto}: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)}:host .ngs-calendar-content-multiple{display:flex;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-content-multiple ngs-month-view{flex:0 0 calc(var(--ngs-calendar-cell-size) * 7)}\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", "rangePreviewDate", "sharedRangePreview"], outputs: ["selectedChange", "rangePreviewDateChange"] }, { 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 }, visibleCalendars: { classPropertyName: "visibleCalendars", publicName: "visibleCalendars", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.ngs-calendar-multiple-months": "currentView() === \"month\" && visibleCalendars() === 2" }, 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\" [class.ngs-calendar-content-multiple]=\"currentView() === 'month' && visibleCalendars() === 2\">\n  @if (currentView() === 'month') {\n    @for (monthActiveDate of _monthViewActiveDates(); track _trackMonth($index, monthActiveDate)) {\n      <ngs-month-view [activeDate]=\"monthActiveDate\"\n        [selected]=\"selected()\"\n        [rangePreviewDate]=\"_rangePreviewDate()\"\n        [sharedRangePreview]=\"true\"\n        (rangePreviewDateChange)=\"_rangePreviewDate.set($event)\"\n        (selectedChange)=\"selectedChange.emit($event)\"\n       />\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-multiple-months{width:auto}: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)}:host .ngs-calendar-content-multiple{display:flex;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-content-multiple ngs-month-view{flex:0 0 calc(var(--ngs-calendar-cell-size) * 7)}\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", "rangePreviewDate", "sharedRangePreview"], outputs: ["selectedChange", "rangePreviewDateChange"], exportAs: ["ngsMonthView"] }, { kind: "component", type: YearView, selector: "ngs-year-view", inputs: ["activeDate", "selected"], outputs: ["monthSelected"], exportAs: ["ngsYearView"] }, { kind: "component", type: MultiYearView, selector: "ngs-multi-year-view", inputs: ["activeDate", "selected"], outputs: ["yearSelected"], exportAs: ["ngsMultiYearView"] }, { 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: {
+            args: [{ selector: 'ngs-calendar', exportAs: 'ngsCalendar', imports: [
+                        MonthView,
+                        YearView,
+                        MultiYearView,
+                        Button,
+                        Icon,
+                        NgComponentOutlet
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-calendar',
                         '[class.ngs-calendar-multiple-months]': 'currentView() === "month" && visibleCalendars() === 2',
                     }, 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\" [class.ngs-calendar-content-multiple]=\"currentView() === 'month' && visibleCalendars() === 2\">\n  @if (currentView() === 'month') {\n    @for (monthActiveDate of _monthViewActiveDates(); track _trackMonth($index, monthActiveDate)) {\n      <ngs-month-view [activeDate]=\"monthActiveDate\"\n        [selected]=\"selected()\"\n        [rangePreviewDate]=\"_rangePreviewDate()\"\n        [sharedRangePreview]=\"true\"\n        (rangePreviewDateChange)=\"_rangePreviewDate.set($event)\"\n        (selectedChange)=\"selectedChange.emit($event)\"\n       />\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-multiple-months{width:auto}: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)}:host .ngs-calendar-content-multiple{display:flex;gap:calc(var(--spacing, .25rem) * 2)}:host .ngs-calendar-content-multiple ngs-month-view{flex:0 0 calc(var(--ngs-calendar-cell-size) * 7)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
@@ -421,7 +428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 class DatepickerActions {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DatepickerActions, isStandalone: true, selector: "ngs-datepicker-actions", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DatepickerActions, isStandalone: true, selector: "ngs-datepicker-actions", exportAs: ["ngsDatepickerActions"], ngImport: i0, template: `
     <div class="ngs-datepicker-actions">
       <ng-content />
     </div>
@@ -429,7 +436,7 @@ class DatepickerActions {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerActions, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-datepicker-actions', standalone: true, template: `
+            args: [{ selector: 'ngs-datepicker-actions', exportAs: 'ngsDatepickerActions', template: `
     <div class="ngs-datepicker-actions">
       <ng-content />
     </div>
@@ -513,14 +520,16 @@ 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(--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:86px}.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", "visibleCalendars"], 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 } }, host: { classAttribute: "ngs-datepicker" }, 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)}\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", "visibleCalendars"], 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: [
+            args: [{ selector: 'ngs-datepicker', exportAs: 'ngsDatepicker', 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(--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:86px}.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: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'ngs-datepicker'
+                    }, 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)}\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 {
@@ -532,7 +541,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             type: Directive,
             args: [{
                     selector: '[ngsDatepickerApply]',
-                    standalone: true,
                     host: {
                         '(click)': '_datepicker.apply()'
                     }
@@ -547,7 +555,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             type: Directive,
             args: [{
                     selector: '[ngsDatepickerCancel]',
-                    standalone: true,
                     host: {
                         '(click)': '_datepicker.close()'
                     }
@@ -762,13 +769,13 @@ class DatepickerInput {
                 useExisting: forwardRef(() => DatepickerInput),
                 multi: true,
             },
-        ], ngImport: i0 });
+        ], exportAs: ["ngsDatepickerInput"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[ngsDatepicker]',
-                    standalone: true,
+                    exportAs: 'ngsDatepickerInput',
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -816,7 +823,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             type: Directive,
             args: [{
                     selector: 'input[ngsStartDate]',
-                    standalone: true,
                     host: {
                         'class': 'ngs-date-range-input-start',
                         '(input)': '_onInput($any($event).target.value)',
@@ -857,7 +863,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             type: Directive,
             args: [{
                     selector: 'input[ngsEndDate]',
-                    standalone: true,
                     host: {
                         'class': 'ngs-date-range-input-end',
                         '(input)': '_onInput($any($event).target.value)',
@@ -989,11 +994,11 @@ 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(--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:86px}.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 });
+        ], queries: [{ propertyName: "_startInput", first: true, predicate: StartDate, descendants: true, isSignal: true }, { propertyName: "_endInput", first: true, predicate: EndDate, descendants: true, isSignal: true }], exportAs: ["ngsDateRangeInput"], 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:flex;width:100%}:host.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}:host:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}:host .ngs-date-range-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);width:100%;transition:opacity .2s,visibility .2s}:host .ngs-date-range-input-separator{flex-shrink:0}:host ::ng-deep .ngs-date-range-input-start,:host ::ng-deep .ngs-date-range-input-end{background:transparent;border:none;outline:none;width:86px}:host ::ng-deep .ngs-date-range-input-start::placeholder,:host ::ng-deep .ngs-date-range-input-end::placeholder{color:var(--ngs-field-label-color)}\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: DateRangeInput, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-date-range-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'ngs-date-range-input', exportAs: 'ngsDateRangeInput', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-date-range-input',
                         '[attr.id]': 'id',
                         '[class.ngs-date-range-input-floating]': 'shouldLabelFloat',
@@ -1003,7 +1008,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(--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:86px}.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"] }]
+                    ], 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:flex;width:100%}:host.ngs-date-range-input-floating .ngs-date-range-input-container{opacity:1}:host:not(.ngs-date-range-input-floating) .ngs-date-range-input-container{opacity:0}:host .ngs-date-range-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);width:100%;transition:opacity .2s,visibility .2s}:host .ngs-date-range-input-separator{flex-shrink:0}:host ::ng-deep .ngs-date-range-input-start,:host ::ng-deep .ngs-date-range-input-end{background:transparent;border:none;outline:none;width:86px}:host ::ng-deep .ngs-date-range-input-start::placeholder,:host ::ng-deep .ngs-date-range-input-end::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;
@@ -1015,7 +1020,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             type: Directive,
             args: [{
                     selector: '[ngsDatepickerToggleIcon]',
-                    standalone: true
                 }]
         }] });