@ngstarter-ui/components 1.0.21

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

@@ -0,0 +1,1159 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, LOCALE_ID, Injectable, input, output, signal, computed, ChangeDetectionStrategy, Component, effect, ViewContainerRef, viewChild, contentChild, ViewEncapsulation, forwardRef, Directive, ElementRef, untracked } from '@angular/core';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Subject } from 'rxjs';
+import { Button } from '@ngstarter-ui/components/button';
+import { Icon } from '@ngstarter-ui/components/icon';
+import { NgComponentOutlet } from '@angular/common';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { FormField, FormFieldControl, FORM_FIELD } from '@ngstarter-ui/components/form-field';
+
+/** Injection token for the DateAdapter's locale. */
+const MAT_DATE_LOCALE = new InjectionToken('MAT_DATE_LOCALE');
+/** Injection token for the DateAdapter's formats. */
+const MAT_DATE_FORMATS = new InjectionToken('MAT_DATE_FORMATS');
+class DateAdapter {
+    _localeChanges = new Subject();
+    localeChanges = this._localeChanges;
+    setLocale(locale) {
+        this.locale = locale;
+        this._localeChanges.next();
+    }
+    locale = inject(LOCALE_ID);
+    compareDate(first, second) {
+        return (this.getYear(first) - this.getYear(second) ||
+            this.getMonth(first) - this.getMonth(second) ||
+            this.getDate(first) - this.getDate(second));
+    }
+    sameDate(first, second) {
+        if (first && second) {
+            let firstValid = this.isValid(first);
+            let secondValid = this.isValid(second);
+            if (firstValid && secondValid) {
+                return !this.compareDate(first, second);
+            }
+            return firstValid === secondValid;
+        }
+        return first === second;
+    }
+    clampDate(date, min, max) {
+        if (min && this.compareDate(date, min) < 0) {
+            return min;
+        }
+        if (max && this.compareDate(date, max) > 0) {
+            return max;
+        }
+        return date;
+    }
+}
+
+class DatepickerIntl {
+    changes = new Subject();
+    calendarLabel = 'Calendar';
+    openCalendarLabel = 'Open calendar';
+    prevMonthLabel = 'Previous month';
+    nextMonthLabel = 'Next month';
+    prevYearLabel = 'Previous year';
+    nextYearLabel = 'Next year';
+    prevMultiYearLabel = 'Previous 24 years';
+    nextMultiYearLabel = 'Next 24 years';
+    switchToMonthViewLabel = 'Choose date';
+    switchToMultiYearViewLabel = 'Choose month and year';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DateRange {
+    start;
+    end;
+    constructor(
+    /** The start date of the range. */
+    start, 
+    /** The end date of the range. */
+    end) {
+        this.start = start;
+        this.end = end;
+    }
+}
+
+class MonthView {
+    _dateAdapter = inject(DateAdapter);
+    activeDate = input.required(...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+    selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    selectedChange = output();
+    hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "hoveredDate" }] : /* istanbul ignore next */ []));
+    weekdays = computed(() => {
+        return this._dateAdapter.getDayOfWeekNames('short');
+    }, ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+    weeks = computed(() => {
+        const activeDate = this.activeDate();
+        const hoveredDate = this.hoveredDate();
+        const firstDayOfMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(activeDate), this._dateAdapter.getMonth(activeDate), 1);
+        const daysInMonth = this._dateAdapter.getNumDaysInMonth(activeDate);
+        const firstDayOfWeek = this._dateAdapter.getDayOfWeek(firstDayOfMonth);
+        const weeks = [];
+        let currentWeek = [];
+        // Offset for the first week
+        for (let i = 0; i < firstDayOfWeek; i++) {
+            currentWeek.push({ date: null, label: '', selected: false, current: false, inRange: false, rangeStart: false, rangeEnd: false });
+        }
+        const today = this._dateAdapter.today();
+        const selected = this.selected();
+        for (let i = 1; i <= daysInMonth; i++) {
+            const date = this._dateAdapter.createDate(this._dateAdapter.getYear(activeDate), this._dateAdapter.getMonth(activeDate), i);
+            let isSelected = false;
+            let inRange = false;
+            let rangeStart = false;
+            let rangeEnd = false;
+            if (selected instanceof DateRange) {
+                if (selected.start && selected.end) {
+                    inRange = this._dateAdapter.compareDate(date, selected.start) >= 0 &&
+                        this._dateAdapter.compareDate(date, selected.end) <= 0;
+                    rangeStart = this._dateAdapter.sameDate(date, selected.start);
+                    rangeEnd = this._dateAdapter.sameDate(date, selected.end);
+                }
+                else if (selected.start) {
+                    isSelected = this._dateAdapter.sameDate(date, selected.start);
+                    rangeStart = isSelected;
+                    if (hoveredDate) {
+                        const comparison = this._dateAdapter.compareDate(date, selected.start);
+                        const hoverComparison = this._dateAdapter.compareDate(date, hoveredDate);
+                        if (this._dateAdapter.compareDate(hoveredDate, selected.start) >= 0) {
+                            inRange = comparison >= 0 && hoverComparison <= 0;
+                            rangeEnd = this._dateAdapter.sameDate(date, hoveredDate);
+                        }
+                        else {
+                            inRange = comparison <= 0 && hoverComparison >= 0;
+                            rangeStart = this._dateAdapter.sameDate(date, hoveredDate);
+                            rangeEnd = isSelected;
+                        }
+                    }
+                }
+                else if (selected.end) {
+                    isSelected = this._dateAdapter.sameDate(date, selected.end);
+                    rangeEnd = isSelected;
+                }
+            }
+            else {
+                isSelected = this._dateAdapter.sameDate(date, selected);
+            }
+            currentWeek.push({
+                date,
+                label: i.toString(),
+                selected: isSelected,
+                current: this._dateAdapter.sameDate(date, today),
+                inRange,
+                rangeStart,
+                rangeEnd
+            });
+            if (currentWeek.length === 7) {
+                weeks.push(currentWeek);
+                currentWeek = [];
+            }
+        }
+        if (currentWeek.length > 0) {
+            while (currentWeek.length < 7) {
+                currentWeek.push({ date: null, label: '', selected: false, current: false, inRange: false, rangeStart: false, rangeEnd: false });
+            }
+            weeks.push(currentWeek);
+        }
+        return weeks;
+    }, ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    selectDate(date) {
+        if (date) {
+            this.selectedChange.emit(date);
+        }
+    }
+    handleHover(date) {
+        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 });
+}
+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"] }]
+        }], 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 {
+    _dateAdapter = inject(DateAdapter);
+    activeDate = input.required(...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+    selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    monthSelected = output();
+    months = computed(() => {
+        const activeDate = this.activeDate();
+        const monthNames = this._dateAdapter.getMonthNames('short');
+        const today = this._dateAdapter.today();
+        const currentYear = this._dateAdapter.getYear(activeDate);
+        const selectedYear = this.selected() ? this._dateAdapter.getYear(this.selected()) : null;
+        const selectedMonth = this.selected() ? this._dateAdapter.getMonth(this.selected()) : null;
+        const todayYear = this._dateAdapter.getYear(today);
+        const todayMonth = this._dateAdapter.getMonth(today);
+        const months = [];
+        let currentRow = [];
+        for (let i = 0; i < 12; i++) {
+            currentRow.push({
+                index: i,
+                label: monthNames[i],
+                selected: currentYear === selectedYear && i === selectedMonth,
+                current: currentYear === todayYear && i === todayMonth,
+            });
+            if (currentRow.length === 4) {
+                months.push(currentRow);
+                currentRow = [];
+            }
+        }
+        return months;
+    }, ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+    selectMonth(month) {
+        const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate()), month, 1);
+        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 });
+}
+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: {
+                        '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"] }] } });
+
+const YEARS_PER_ROW = 4;
+const YEARS_PER_PAGE = 24;
+class MultiYearView {
+    _dateAdapter = inject(DateAdapter);
+    activeDate = input.required(...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+    selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    yearSelected = output();
+    years = computed(() => {
+        const activeDate = this.activeDate();
+        const today = this._dateAdapter.today();
+        const currentYear = this._dateAdapter.getYear(activeDate);
+        const selectedYear = this.selected() ? this._dateAdapter.getYear(this.selected()) : null;
+        const todayYear = this._dateAdapter.getYear(today);
+        const startYear = Math.floor(currentYear / YEARS_PER_PAGE) * YEARS_PER_PAGE;
+        const years = [];
+        let currentRow = [];
+        for (let i = 0; i < YEARS_PER_PAGE; i++) {
+            const yearValue = startYear + i;
+            const date = this._dateAdapter.createDate(yearValue, 0, 1);
+            currentRow.push({
+                value: yearValue,
+                label: this._dateAdapter.getYearName(date),
+                selected: yearValue === selectedYear,
+                current: yearValue === todayYear,
+            });
+            if (currentRow.length === YEARS_PER_ROW) {
+                years.push(currentRow);
+                currentRow = [];
+            }
+        }
+        return years;
+    }, ...(ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []));
+    selectYear(year) {
+        const date = this._dateAdapter.createDate(year, 0, 1);
+        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 });
+}
+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: {
+                        '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"] }] } });
+
+class Calendar {
+    _dateAdapter = inject(DateAdapter);
+    _intl = inject(DatepickerIntl);
+    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    headerComponent = input(null, ...(ngDevMode ? [{ debugName: "headerComponent" }] : /* istanbul ignore next */ []));
+    selectedChange = output();
+    yearSelected = output();
+    monthSelected = output();
+    activeDate = signal(this.startAt() || this._dateAdapter.today(), ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const selected = this.selected();
+            if (selected instanceof DateRange) {
+                if (selected.start) {
+                    this.activeDate.set(selected.start);
+                }
+            }
+            else if (selected) {
+                this.activeDate.set(selected);
+            }
+        });
+        effect(() => {
+            const startAt = this.startAt();
+            if (startAt) {
+                this.activeDate.set(startAt);
+            }
+        });
+    }
+    currentView = signal('month', ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+    _selectedDate = computed(() => {
+        const selected = this.selected();
+        if (selected instanceof DateRange) {
+            return selected.start;
+        }
+        return selected;
+    }, ...(ngDevMode ? [{ debugName: "_selectedDate" }] : /* istanbul ignore next */ []));
+    periodButtonText = computed(() => {
+        const activeDate = this.activeDate();
+        if (!activeDate || !this._dateAdapter.isValid(activeDate)) {
+            return '';
+        }
+        if (this.currentView() === 'month') {
+            return this._dateAdapter.format(activeDate, { month: 'long', year: 'numeric' });
+        }
+        if (this.currentView() === 'year') {
+            return this._dateAdapter.getYearName(activeDate);
+        }
+        if (this.currentView() === 'multi-year') {
+            const currentYear = this._dateAdapter.getYear(activeDate);
+            const startYear = Math.floor(currentYear / 24) * 24;
+            const endYear = startYear + 23;
+            const startDate = this._dateAdapter.createDate(startYear, 0, 1);
+            const endDate = this._dateAdapter.createDate(endYear, 0, 1);
+            return `${this._dateAdapter.getYearName(startDate)} - ${this._dateAdapter.getYearName(endDate)}`;
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "periodButtonText" }] : /* istanbul ignore next */ []));
+    prevPage() {
+        this.activeDate.update(date => {
+            if (this.currentView() === 'month') {
+                return this._dateAdapter.addCalendarMonths(date, -1);
+            }
+            if (this.currentView() === 'year') {
+                return this._dateAdapter.addCalendarYears(date, -1);
+            }
+            if (this.currentView() === 'multi-year') {
+                return this._dateAdapter.addCalendarYears(date, -24);
+            }
+            return date;
+        });
+    }
+    nextPage() {
+        this.activeDate.update(date => {
+            if (this.currentView() === 'month') {
+                return this._dateAdapter.addCalendarMonths(date, 1);
+            }
+            if (this.currentView() === 'year') {
+                return this._dateAdapter.addCalendarYears(date, 1);
+            }
+            if (this.currentView() === 'multi-year') {
+                return this._dateAdapter.addCalendarYears(date, 24);
+            }
+            return date;
+        });
+    }
+    toggleView() {
+        this.currentView.update(view => {
+            if (view === 'month') {
+                return 'multi-year';
+            }
+            if (view === 'year') {
+                return 'multi-year';
+            }
+            return 'month';
+        });
+    }
+    _monthSelectedInYearView(date) {
+        this.activeDate.set(date);
+        this.currentView.set('month');
+        this.monthSelected.emit(date);
+    }
+    _yearSelectedInMultiYearView(date) {
+        this.activeDate.set(date);
+        this.currentView.set('year');
+        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 });
+}
+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"] }]
+        }], 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 {
+    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: `
+    <div class="ngs-datepicker-actions">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [".ngs-datepicker-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px;border-top:1px solid var(--ngs-datepicker-divider-color, rgba(0, 0, 0, .12))}\n"] });
+}
+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: `
+    <div class="ngs-datepicker-actions">
+      <ng-content />
+    </div>
+  `, styles: [".ngs-datepicker-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px;border-top:1px solid var(--ngs-datepicker-divider-color, rgba(0, 0, 0, .12))}\n"] }]
+        }] });
+
+class Datepicker {
+    _overlay = inject(Overlay);
+    _viewContainerRef = inject(ViewContainerRef);
+    _portalTemplate = viewChild.required('portal');
+    actions = contentChild(DatepickerActions, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    calendarHeaderComponent = input(null, ...(ngDevMode ? [{ debugName: "calendarHeaderComponent" }] : /* istanbul ignore next */ []));
+    quickPresets = input([], ...(ngDevMode ? [{ debugName: "quickPresets" }] : /* istanbul ignore next */ []));
+    showQuickPresets = input(false, ...(ngDevMode ? [{ debugName: "showQuickPresets" }] : /* istanbul ignore next */ []));
+    _datepickerInput;
+    _selected = signal(null, ...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
+    _isAbove = signal(false, ...(ngDevMode ? [{ debugName: "_isAbove" }] : /* istanbul ignore next */ []));
+    _overlayRef = null;
+    ngOnDestroy() {
+        this.close();
+    }
+    _registerInput(input) {
+        this._datepickerInput = input;
+        input._valueChange.subscribe((value) => this._selected.set(value));
+    }
+    open() {
+        if (this._overlayRef || !this._datepickerInput)
+            return;
+        const strategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this._datepickerInput.getConnectedOverlayOrigin())
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+        ]);
+        strategy.positionChanges.subscribe(change => {
+            this._isAbove.set(change.connectionPair.overlayY === 'bottom');
+        });
+        this._overlayRef = this._overlay.create({
+            positionStrategy: strategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
+        this._overlayRef.backdropClick().subscribe(() => this.close());
+        const portal = new TemplatePortal(this._portalTemplate(), this._viewContainerRef);
+        this._overlayRef.attach(portal);
+    }
+    close() {
+        if (this._overlayRef) {
+            this._overlayRef.detach();
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+    }
+    _select(date) {
+        this._selected.set(date);
+        if (!this.actions()) {
+            this.apply();
+        }
+    }
+    _selectPreset(preset) {
+        const value = preset.value;
+        if (value instanceof DateRange) {
+            // For single datepicker we don't expect DateRange, but if it happens, we take start
+            this._selected.set(value.start);
+        }
+        else {
+            this._selected.set(value);
+        }
+        if (!this.actions()) {
+            this.apply();
+        }
+    }
+    apply() {
+        const date = this._selected();
+        if (this._datepickerInput && date) {
+            this._datepickerInput.writeValue(date);
+            this._datepickerInput._onChange(date);
+        }
+        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 });
+}
+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"] }]
+        }], 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 {
+    _datepicker = inject(forwardRef(() => Datepicker));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerApply, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DatepickerApply, isStandalone: true, selector: "[ngsDatepickerApply]", host: { listeners: { "click": "_datepicker.apply()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerApply, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsDatepickerApply]',
+                    standalone: true,
+                    host: {
+                        '(click)': '_datepicker.apply()'
+                    }
+                }]
+        }] });
+class DatepickerCancel {
+    _datepicker = inject(forwardRef(() => Datepicker));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerCancel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DatepickerCancel, isStandalone: true, selector: "[ngsDatepickerCancel]", host: { listeners: { "click": "_datepicker.close()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerCancel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsDatepickerCancel]',
+                    standalone: true,
+                    host: {
+                        '(click)': '_datepicker.close()'
+                    }
+                }]
+        }] });
+
+class DateRangePicker {
+    _overlay = inject(Overlay);
+    _viewContainerRef = inject(ViewContainerRef);
+    _dateAdapter = inject(DateAdapter);
+    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    calendarHeaderComponent = input(null, ...(ngDevMode ? [{ debugName: "calendarHeaderComponent" }] : /* istanbul ignore next */ []));
+    quickPresets = input(null, ...(ngDevMode ? [{ debugName: "quickPresets" }] : /* istanbul ignore next */ []));
+    showQuickPresets = input(false, ...(ngDevMode ? [{ debugName: "showQuickPresets" }] : /* istanbul ignore next */ []));
+    _portalTemplate = viewChild.required('portal');
+    actions = contentChild(DatepickerActions, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    _datepickerInput; // Will be DateRangeInput
+    _selectedRange = signal(new DateRange(null, null), ...(ngDevMode ? [{ debugName: "_selectedRange" }] : /* istanbul ignore next */ []));
+    _isAbove = signal(false, ...(ngDevMode ? [{ debugName: "_isAbove" }] : /* istanbul ignore next */ []));
+    _effectivePresets = computed(() => {
+        const userPresets = this.quickPresets();
+        if (userPresets) {
+            return userPresets;
+        }
+        const today = this._dateAdapter.today();
+        return [
+            {
+                label: 'Today',
+                value: new DateRange(today, today)
+            },
+            {
+                label: 'Last 7 Days',
+                value: new DateRange(this._dateAdapter.addCalendarDays(today, -6), today)
+            },
+            {
+                label: 'Last 30 Days',
+                value: new DateRange(this._dateAdapter.addCalendarDays(today, -29), today)
+            },
+            {
+                label: 'This Month',
+                value: () => {
+                    const year = this._dateAdapter.getYear(today);
+                    const month = this._dateAdapter.getMonth(today);
+                    const start = this._dateAdapter.createDate(year, month, 1);
+                    const daysInMonth = this._dateAdapter.getNumDaysInMonth(start);
+                    const end = this._dateAdapter.createDate(year, month, daysInMonth);
+                    return new DateRange(start, end);
+                }
+            }
+        ].map(p => ({
+            ...p,
+            value: typeof p.value === 'function' ? p.value() : p.value
+        }));
+    }, ...(ngDevMode ? [{ debugName: "_effectivePresets" }] : /* istanbul ignore next */ []));
+    _overlayRef = null;
+    ngOnDestroy() {
+        this.close();
+    }
+    _registerInput(input) {
+        this._datepickerInput = input;
+        // Assuming input will provide the range
+    }
+    open() {
+        if (this._overlayRef || !this._datepickerInput)
+            return;
+        const strategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this._datepickerInput.getConnectedOverlayOrigin())
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+        ]);
+        strategy.positionChanges.subscribe(change => {
+            this._isAbove.set(change.connectionPair.overlayY === 'bottom');
+        });
+        this._overlayRef = this._overlay.create({
+            positionStrategy: strategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
+        this._overlayRef.backdropClick().subscribe(() => this.close());
+        const portal = new TemplatePortal(this._portalTemplate(), this._viewContainerRef);
+        this._overlayRef.attach(portal);
+    }
+    close() {
+        if (this._overlayRef) {
+            this._overlayRef.detach();
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+    }
+    _select(date) {
+        const currentRange = this._selectedRange();
+        let newRange;
+        if (!currentRange.start || (currentRange.start && currentRange.end)) {
+            newRange = new DateRange(date, null);
+        }
+        else {
+            if (this._dateAdapter.compareDate(date, currentRange.start) < 0) {
+                newRange = new DateRange(date, currentRange.start);
+            }
+            else {
+                newRange = new DateRange(currentRange.start, date);
+            }
+        }
+        this._updateSelectedRange(newRange);
+    }
+    _selectPreset(preset) {
+        const value = preset.value;
+        if (value instanceof DateRange) {
+            this._updateSelectedRange(value);
+        }
+        else if (value) {
+            this._updateSelectedRange(new DateRange(value, null));
+        }
+        else {
+            this._updateSelectedRange(new DateRange(null, null));
+        }
+    }
+    _updateSelectedRange(newRange) {
+        this._selectedRange.set(newRange);
+        if (this._datepickerInput) {
+            this._datepickerInput._rangeUpdated(newRange);
+        }
+        if (!this.actions()) {
+            if (newRange.start && newRange.end) {
+                this.close();
+            }
+        }
+    }
+    apply() {
+        const range = this._selectedRange();
+        if (this._datepickerInput && range.start && range.end) {
+            this._datepickerInput._rangeUpdated(range);
+        }
+        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 });
+}
+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"] }]
+        }], 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 {
+    _elementRef = inject(ElementRef);
+    _formField = inject(FormField, { optional: true });
+    _dateAdapter = inject(DateAdapter);
+    ngsDatepicker = input.required(...(ngDevMode ? [{ debugName: "ngsDatepicker" }] : /* istanbul ignore next */ []));
+    _value = null;
+    _onChange = () => { };
+    _onTouched = () => { };
+    _valueChange = new Subject();
+    constructor() {
+        effect(() => {
+            const picker = this.ngsDatepicker();
+            untracked(() => {
+                if (picker) {
+                    picker._registerInput(this);
+                }
+            });
+        });
+    }
+    ngOnInit() {
+    }
+    ngOnDestroy() {
+        this._valueChange.complete();
+    }
+    writeValue(value) {
+        this._value = value;
+        this._formatValue(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._elementRef.nativeElement.disabled = isDisabled;
+    }
+    _onInput(value) {
+        const date = this._dateAdapter.parse(value, null);
+        this._value = date;
+        this._onChange(date);
+        this._valueChange.next(date);
+    }
+    _formatValue(value) {
+        this._elementRef.nativeElement.value = (value && this._dateAdapter.isDateInstance(value) && this._dateAdapter.isValid(value))
+            ? this._dateAdapter.format(value, { year: 'numeric', month: '2-digit', day: '2-digit' })
+            : '';
+    }
+    getConnectedOverlayOrigin() {
+        if (this._formField) {
+            return this._formField.container();
+        }
+        return this._elementRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: DatepickerInput, isStandalone: true, selector: "input[ngsDatepicker]", inputs: { ngsDatepicker: { classPropertyName: "ngsDatepicker", publicName: "ngsDatepicker", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "input": "_onInput($any($event).target.value)", "blur": "_onTouched()" }, classAttribute: "ngs-datepicker-input" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DatepickerInput),
+                multi: true,
+            },
+        ], 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,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatepickerInput),
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        'class': 'ngs-datepicker-input',
+                        '(input)': '_onInput($any($event).target.value)',
+                        '(blur)': '_onTouched()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngsDatepicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsDatepicker", required: true }] }] } });
+
+class StartDate {
+    _elementRef = inject(ElementRef);
+    _dateAdapter = inject(DateAdapter);
+    _rangeInput;
+    _onInput(value) {
+        const date = this._dateAdapter.parse(value, null);
+        this._rangeInput._startUpdated(date);
+        this._rangeInput._inputUpdated();
+    }
+    _formatValue(value) {
+        this._elementRef.nativeElement.value = value ? this._dateAdapter.format(value, { year: 'numeric', month: '2-digit', day: '2-digit' }) : '';
+        this._rangeInput._inputUpdated();
+    }
+    _onFocus() {
+        this._rangeInput._handleFocus();
+    }
+    _onBlur() {
+        this._rangeInput._handleBlur();
+    }
+    isEmpty() {
+        return !this._elementRef.nativeElement.value;
+    }
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StartDate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: StartDate, isStandalone: true, selector: "input[ngsStartDate]", host: { listeners: { "input": "_onInput($any($event).target.value)", "focus": "_onFocus()", "blur": "_onBlur()" }, classAttribute: "ngs-date-range-input-start" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StartDate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ngsStartDate]',
+                    standalone: true,
+                    host: {
+                        'class': 'ngs-date-range-input-start',
+                        '(input)': '_onInput($any($event).target.value)',
+                        '(focus)': '_onFocus()',
+                        '(blur)': '_onBlur()',
+                    },
+                }]
+        }] });
+class EndDate {
+    _elementRef = inject(ElementRef);
+    _dateAdapter = inject(DateAdapter);
+    _rangeInput;
+    _onInput(value) {
+        const date = this._dateAdapter.parse(value, null);
+        this._rangeInput._endUpdated(date);
+        this._rangeInput._inputUpdated();
+    }
+    _formatValue(value) {
+        this._elementRef.nativeElement.value = value ? this._dateAdapter.format(value, { year: 'numeric', month: '2-digit', day: '2-digit' }) : '';
+        this._rangeInput._inputUpdated();
+    }
+    _onFocus() {
+        this._rangeInput._handleFocus();
+    }
+    _onBlur() {
+        this._rangeInput._handleBlur();
+    }
+    isEmpty() {
+        return !this._elementRef.nativeElement.value;
+    }
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EndDate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: EndDate, isStandalone: true, selector: "input[ngsEndDate]", host: { listeners: { "input": "_onInput($any($event).target.value)", "focus": "_onFocus()", "blur": "_onBlur()" }, classAttribute: "ngs-date-range-input-end" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EndDate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ngsEndDate]',
+                    standalone: true,
+                    host: {
+                        'class': 'ngs-date-range-input-end',
+                        '(input)': '_onInput($any($event).target.value)',
+                        '(focus)': '_onFocus()',
+                        '(blur)': '_onBlur()',
+                    },
+                }]
+        }] });
+class DateRangeInput {
+    _elementRef = inject(ElementRef);
+    _formField = inject(FormField, { optional: true });
+    rangePicker = input.required(...(ngDevMode ? [{ debugName: "rangePicker" }] : /* istanbul ignore next */ []));
+    separator = input('–', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    ngControl = inject(NgControl, { optional: true, self: true });
+    _startInput = contentChild(StartDate, ...(ngDevMode ? [{ debugName: "_startInput" }] : /* istanbul ignore next */ []));
+    _endInput = contentChild(EndDate, ...(ngDevMode ? [{ debugName: "_endInput" }] : /* istanbul ignore next */ []));
+    _value = null;
+    get value() {
+        return this._value;
+    }
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    get focused() {
+        return this._focused();
+    }
+    _empty = computed(() => {
+        this._inputStateChanges();
+        const startInput = this._startInput();
+        const endInput = this._endInput();
+        return (!this._value || (!this._value.start && !this._value.end)) &&
+            (!startInput || startInput.isEmpty()) &&
+            (!endInput || endInput.isEmpty());
+    }, ...(ngDevMode ? [{ debugName: "_empty" }] : /* istanbul ignore next */ []));
+    get empty() {
+        return this._empty();
+    }
+    _shouldLabelFloat = computed(() => {
+        return this.focused || !this.empty;
+    }, ...(ngDevMode ? [{ debugName: "_shouldLabelFloat" }] : /* istanbul ignore next */ []));
+    get shouldLabelFloat() {
+        return this._shouldLabelFloat();
+    }
+    stateChanges = new Subject();
+    _inputStateChanges = signal(0, ...(ngDevMode ? [{ debugName: "_inputStateChanges" }] : /* istanbul ignore next */ []));
+    id = `ngs-date-range-input-${nextUniqueId++}`;
+    placeholder = '';
+    required = false;
+    disabled = false;
+    errorState = false;
+    constructor() {
+        effect(() => {
+            const picker = this.rangePicker();
+            untracked(() => {
+                if (picker) {
+                    picker._registerInput(this);
+                }
+            });
+        });
+        effect(() => {
+            const start = this._startInput();
+            if (start) {
+                start._rangeInput = this;
+            }
+        });
+        effect(() => {
+            const end = this._endInput();
+            if (end) {
+                end._rangeInput = this;
+            }
+        });
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    _startUpdated(date) {
+        this._value = new DateRange(date, this._value?.end || null);
+        this.rangePicker()._selectedRange.set(this._value);
+        this.stateChanges.next();
+    }
+    _endUpdated(date) {
+        this._value = new DateRange(this._value?.start || null, date);
+        this.rangePicker()._selectedRange.set(this._value);
+        this.stateChanges.next();
+    }
+    _rangeUpdated(range) {
+        const prevStart = this._value?.start;
+        this._value = range;
+        this._startInput()?._formatValue(range.start);
+        this._endInput()?._formatValue(range.end);
+        this.stateChanges.next();
+        if (range.start && !range.end && range.start !== prevStart) {
+            this._endInput()?.focus();
+        }
+    }
+    _handleFocus() {
+        if (!this._focused()) {
+            this._focused.set(true);
+            this.stateChanges.next();
+        }
+    }
+    _handleBlur() {
+        // Use setTimeout to check if focus moved to another input within the same component
+        setTimeout(() => {
+            if (!this._elementRef.nativeElement.contains(document.activeElement)) {
+                this._focused.set(false);
+                this.stateChanges.next();
+            }
+        });
+    }
+    _inputUpdated() {
+        this._inputStateChanges.update(v => v + 1);
+        this.stateChanges.next();
+    }
+    getConnectedOverlayOrigin() {
+        if (this._formField) {
+            return this._formField.container();
+        }
+        return this._elementRef;
+    }
+    focus() {
+        const startInput = this._startInput();
+        if (startInput && !this.focused) {
+            startInput.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateRangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: DateRangeInput, isStandalone: true, selector: "ngs-date-range-input", inputs: { rangePicker: { classPropertyName: "rangePicker", publicName: "rangePicker", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "focus()" }, properties: { "attr.id": "id", "class.ngs-date-range-input-floating": "shouldLabelFloat" }, classAttribute: "ngs-date-range-input" }, providers: [
+            {
+                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 });
+}
+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: {
+                        'class': 'ngs-date-range-input',
+                        '[attr.id]': 'id',
+                        '[class.ngs-date-range-input-floating]': 'shouldLabelFloat',
+                        '(click)': 'focus()',
+                    }, providers: [
+                        {
+                            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"] }]
+        }], 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;
+
+class DatepickerToggleIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DatepickerToggleIcon, isStandalone: true, selector: "[ngsDatepickerToggleIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerToggleIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsDatepickerToggleIcon]',
+                    standalone: true
+                }]
+        }] });
+
+class DatepickerToggle {
+    _intl = inject(DatepickerIntl);
+    _formField = inject(FORM_FIELD, { optional: true });
+    for = input.required(...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ [])); // Reference to the datepicker
+    customIcon = contentChild(DatepickerToggleIcon, ...(ngDevMode ? [{ debugName: "customIcon" }] : /* istanbul ignore next */ []));
+    _open(event) {
+        if (this.for()) {
+            this.for().open();
+            event.stopPropagation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DatepickerToggle, isStandalone: true, selector: "ngs-datepicker-toggle", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ngs-datepicker-toggle" }, queries: [{ propertyName: "customIcon", first: true, predicate: DatepickerToggleIcon, descendants: true, isSignal: true }], exportAs: ["ngsDatepickerToggle"], ngImport: i0, template: "<button ngsIconButton type=\"button\" (click)=\"_open($event)\" class=\"ngs-datepicker-toggle-button\">\n  @if (customIcon()) {\n    <ng-content select=\"[ngsDatepickerToggleIcon]\"/>\n  } @else {\n    <svg viewBox=\"0 0 24 24\" class=\"size-6\">\n      <path fill=\"currentColor\"\n            d=\"M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3zm1.75 5.5h-15v9.25c0 .966.784 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75zm-11.75 6a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m4.25 0a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m-4.25-4a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m4.25 0a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m4.25 0a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m1.5-6H6.25A1.75 1.75 0 0 0 4.5 6.25V7h15v-.75a1.75 1.75 0 0 0-1.75-1.75\"></path>\n    </svg>\n  }\n</button>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-datepicker-toggle', exportAs: 'ngsDatepickerToggle', imports: [
+                        Button
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-datepicker-toggle',
+                    }, template: "<button ngsIconButton type=\"button\" (click)=\"_open($event)\" class=\"ngs-datepicker-toggle-button\">\n  @if (customIcon()) {\n    <ng-content select=\"[ngsDatepickerToggleIcon]\"/>\n  } @else {\n    <svg viewBox=\"0 0 24 24\" class=\"size-6\">\n      <path fill=\"currentColor\"\n            d=\"M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3zm1.75 5.5h-15v9.25c0 .966.784 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75zm-11.75 6a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m4.25 0a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m-4.25-4a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m4.25 0a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m4.25 0a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m1.5-6H6.25A1.75 1.75 0 0 0 4.5 6.25V7h15v-.75a1.75 1.75 0 0 0-1.75-1.75\"></path>\n    </svg>\n  }\n</button>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: true }] }], customIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DatepickerToggleIcon), { isSignal: true }] }] } });
+
+class NativeDateAdapter extends DateAdapter {
+    getYear(date) {
+        return date.getFullYear();
+    }
+    getMonth(date) {
+        return date.getMonth();
+    }
+    getDate(date) {
+        return date.getDate();
+    }
+    getDayOfWeek(date) {
+        return date.getDay();
+    }
+    getMonthNames(style) {
+        const dtf = new Intl.DateTimeFormat(this.locale, { month: style, timeZone: 'UTC' });
+        return Array.from({ length: 12 }, (_, i) => this._stripDirectionMarkers(dtf.format(new Date(Date.UTC(2017, i, 1)))));
+    }
+    getDateNames() {
+        const dtf = new Intl.DateTimeFormat(this.locale, { day: 'numeric', timeZone: 'UTC' });
+        return Array.from({ length: 31 }, (_, i) => this._stripDirectionMarkers(dtf.format(new Date(Date.UTC(2017, 0, i + 1)))));
+    }
+    getDayOfWeekNames(style) {
+        const dtf = new Intl.DateTimeFormat(this.locale, { weekday: style, timeZone: 'UTC' });
+        return Array.from({ length: 7 }, (_, i) => this._stripDirectionMarkers(dtf.format(new Date(Date.UTC(2017, 0, i + 8)))));
+    }
+    getYearName(date) {
+        const dtf = new Intl.DateTimeFormat(this.locale, { year: 'numeric', timeZone: 'UTC' });
+        return this._stripDirectionMarkers(dtf.format(new Date(Date.UTC(date.getFullYear(), 0, 1))));
+    }
+    getFirstDayOfWeek() {
+        return 0; // Sunday
+    }
+    getNumDaysInMonth(date) {
+        return this._createDateWithOverflow(this.getYear(date), this.getMonth(date) + 1, 0).getDate();
+    }
+    clone(date) {
+        return new Date(date.getTime());
+    }
+    createDate(year, month, date) {
+        if (month < 0 || month > 11) {
+            throw Error(`Invalid month index "${month}". Month index must be between 0 and 11.`);
+        }
+        if (date < 1) {
+            throw Error(`Invalid date "${date}". Date must be greater than 0.`);
+        }
+        const result = this._createDateWithOverflow(year, month, date);
+        if (result.getMonth() !== month) {
+            throw Error(`Invalid date "${date}" for month with index "${month}".`);
+        }
+        return result;
+    }
+    today() {
+        return new Date();
+    }
+    parse(value) {
+        if (typeof value === 'number') {
+            return new Date(value);
+        }
+        if (value && typeof value === 'string') {
+            const parts = value.split('/');
+            if (parts.length === 3) {
+                const month = parseInt(parts[0], 10) - 1;
+                const day = parseInt(parts[1], 10);
+                const year = parseInt(parts[2], 10);
+                if (!isNaN(month) && !isNaN(day) && !isNaN(year)) {
+                    return this.createDate(year, month, day);
+                }
+            }
+            return new Date(Date.parse(value));
+        }
+        return value ? new Date(Date.parse(value)) : null;
+    }
+    format(date, displayFormat) {
+        if (!this.isValid(date)) {
+            throw Error('NativeDateAdapter: Cannot format invalid date.');
+        }
+        const dtf = new Intl.DateTimeFormat(this.locale, { ...displayFormat, timeZone: 'UTC' });
+        return this._stripDirectionMarkers(dtf.format(new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))));
+    }
+    addCalendarYears(date, years) {
+        return this.addCalendarMonths(date, years * 12);
+    }
+    addCalendarMonths(date, months) {
+        let newDate = this._createDateWithOverflow(this.getYear(date), this.getMonth(date) + months, this.getDate(date));
+        if (this.getMonth(newDate) !== (this.getMonth(date) + months) % 12) {
+            newDate = this._createDateWithOverflow(this.getYear(newDate), this.getMonth(newDate), 0);
+        }
+        return newDate;
+    }
+    addCalendarDays(date, days) {
+        return this._createDateWithOverflow(this.getYear(date), this.getMonth(date), this.getDate(date) + days);
+    }
+    toIso8601(date) {
+        return [date.getUTCFullYear(), this._2digit(date.getUTCMonth() + 1), this._2digit(date.getUTCDate())].join('-');
+    }
+    isDateInstance(obj) {
+        return obj instanceof Date;
+    }
+    isValid(date) {
+        return this.isDateInstance(date) && !isNaN(date.getTime());
+    }
+    invalid() {
+        return new Date(NaN);
+    }
+    _2digit(n) {
+        return ('00' + n).slice(-2);
+    }
+    _stripDirectionMarkers(str) {
+        return str.replace(/[\u200e\u200f]/g, '');
+    }
+    _createDateWithOverflow(year, month, date) {
+        const result = new Date(year, month, date);
+        if (year >= 0 && year < 100) {
+            result.setFullYear(year);
+        }
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NativeDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NativeDateAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NativeDateAdapter, decorators: [{
+            type: Injectable
+        }] });
+
+const MAT_NATIVE_DATE_FORMATS = {
+    parse: {
+        dateInput: null,
+    },
+    display: {
+        dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
+        monthYearLabel: { month: 'short', year: 'numeric' },
+        dateA11yLabel: { month: 'long', year: 'numeric', day: 'numeric' },
+        monthYearA11yLabel: { month: 'long', year: 'numeric' },
+    }
+};
+function provideNativeDateAdapter() {
+    return [
+        { provide: DateAdapter, useClass: NativeDateAdapter },
+        { provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS }
+    ];
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Calendar, DateAdapter, DateRange, DateRangeInput, DateRangePicker, Datepicker, DatepickerActions, DatepickerApply, DatepickerCancel, DatepickerInput, DatepickerIntl, DatepickerToggle, DatepickerToggleIcon, EndDate, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MAT_NATIVE_DATE_FORMATS, MonthView, MultiYearView, NativeDateAdapter, StartDate, YearView, provideNativeDateAdapter };
+//# sourceMappingURL=ngstarter-ui-components-datepicker.mjs.map