@i-cell/ids-angular 0.1.7 → 0.1.8

package/fesm2022/i-cell-ids-angular-datepicker.mjs

@@ -0,0 +1,860 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, inject, input, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Injector, ChangeDetectorRef, model, output, afterNextRender, Directive, computed, viewChild, linkedSignal, signal, ViewContainerRef, effect, booleanAttribute, forwardRef } from '@angular/core';
+import { formatDate, parseDate, isValidDate, startOfMonth, addMonths, startOfWeek, endOfWeek, endOfMonth, getDatesBetween, addDays, compareDates, equalDates, addYears, clampDate, createNormalizedDate, positiveModulus, ComponentBaseWithDefaults, IdsSize, startOfYear, DirectiveBaseWithDefaults, getValidDateOrNull, deserializeDate } from '@i-cell/ids-angular/core';
+import { Subject, startWith, map, Subscription, merge, filter } from 'rxjs';
+import { IdsFormFieldComponent } from '@i-cell/ids-angular/forms';
+import { IdsIconComponent } from '@i-cell/ids-angular/icon';
+import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button';
+import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/cdk/a11y';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { hasModifierKey } from '@angular/cdk/keycodes';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const IdsDatepickerView = {
+    DAY: 'day',
+    MONTH: 'month',
+    YEAR: 'year',
+};
+
+const IDS_DATE_FORMATTER = new InjectionToken('idsDateFormatter', {
+    providedIn: 'root',
+    factory: () => formatDate,
+});
+
+const IDS_DATE_PARSER = new InjectionToken('idsDateParser', {
+    providedIn: 'root',
+    factory: () => parseDate,
+});
+
+const dayAriaLabelFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long', day: 'numeric' });
+const monthLabelFormat = new Intl.DateTimeFormat('en-GB', { month: 'short' });
+const monthAriaLabelFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long' });
+const daySelectorHeaderLabelFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long' });
+const weekdayLabelFormat = new Intl.DateTimeFormat('en-GB', { weekday: 'narrow' });
+class IdsDatepickerIntl {
+    constructor() {
+        this.changes = new Subject();
+        this.triggerButtonLabel = 'Open calendar';
+        this.prevMonthLabel = 'Previous month';
+        this.nextMonthLabel = 'Next month';
+        this.prevYearLabel = 'Previous year';
+        this.nextYearLabel = 'Next year';
+        this.prevYearsPageLabel = 'Previous 24 years';
+        this.nextYearsPageLabel = 'Next 24 years';
+        this.switchToDaySelectorLabel = 'Choose date';
+        this.switchToYearSelectorLabel = 'Choose year and month';
+    }
+    getDayAriaLabel(date) {
+        return this._formatDate(date, dayAriaLabelFormat);
+    }
+    getMonthLabel(date) {
+        return this._formatDate(date, monthLabelFormat);
+    }
+    getMonthAriaLabel(date) {
+        return this._formatDate(date, monthAriaLabelFormat);
+    }
+    getDaySelectorHeaderLabel(date) {
+        return this._formatDate(date, daySelectorHeaderLabelFormat);
+    }
+    getWeekdayHeaderLabel(date) {
+        return this._formatDate(date, weekdayLabelFormat);
+    }
+    _formatDate(date, dateFormat) {
+        return isValidDate(date) ? dateFormat.format(date) : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsDatepickerIntl, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsDatepickerIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class IdsDatepickerTriggerComponent {
+    constructor() {
+        this._parent = inject(IdsFormFieldComponent);
+        this._intl = inject(IdsDatepickerIntl);
+        this.datepicker = input.required({ alias: 'for' });
+        this.ariaLabel = input(null, { alias: 'aria-label' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsDatepickerTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.2", type: IdsDatepickerTriggerComponent, isStandalone: true, selector: "ids-datepicker-trigger", inputs: { datepicker: { classPropertyName: "datepicker", publicName: "for", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  type=\"button\"\n  idsIconButton\n  aria-haspopup=\"true\"\n  [size]=\"'dense'\"\n  [variant]=\"'surface'\"\n  [disabled]=\"_parent.disabled()\"\n  [attr.aria-label]=\"ariaLabel() || _intl.triggerButtonLabel\"\n  [attr.aria-expanded]=\"datepicker() ? datepicker().opened() : null\"\n  (click)=\"datepicker().open()\"\n>\n  <ids-icon aria-hidden=\"true\" fontIcon=\"calendar-days\" [attr.alt]=\"ariaLabel() || _intl.triggerButtonLabel\" />\n</button>\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsDatepickerTriggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-datepicker-trigger', imports: [
+                        IdsIconComponent,
+                        IdsIconButtonComponent,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  idsIconButton\n  aria-haspopup=\"true\"\n  [size]=\"'dense'\"\n  [variant]=\"'surface'\"\n  [disabled]=\"_parent.disabled()\"\n  [attr.aria-label]=\"ariaLabel() || _intl.triggerButtonLabel\"\n  [attr.aria-expanded]=\"datepicker() ? datepicker().opened() : null\"\n  (click)=\"datepicker().open()\"\n>\n  <ids-icon aria-hidden=\"true\" fontIcon=\"calendar-days\" [attr.alt]=\"ariaLabel() || _intl.triggerButtonLabel\" />\n</button>\n" }]
+        }] });
+
+const IDS_DATEPICKER_DEFAULT_CONFIG = new InjectionToken('IDS_DATEPICKER_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_DATEPICKER_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_DATEPICKER_DEFAULT_CONFIG_FACTORY() {
+    return {
+        view: IdsDatepickerView.DAY,
+    };
+}
+
+class IdsCalendarPage {
+    constructor() {
+        this._calendarButtonSelector = '.ids-calendar-button-focused';
+        this._element = inject(ElementRef);
+        this._injector = inject(Injector);
+        this._cdRef = inject(ChangeDetectorRef);
+        this._intl = inject(IdsDatepickerIntl);
+        this.value = input(null);
+        this.focusedDate = model.required();
+        this.min = input(null);
+        this.max = input(null);
+        this.selected = output();
+        this._today = new Date();
+        toObservable(this.focusedDate).pipe(takeUntilDestroyed()).subscribe(() => this._moveFocusToCurrent());
+        this._intl.changes.pipe(takeUntilDestroyed()).subscribe(() => this._cdRef.markForCheck());
+    }
+    ngAfterViewInit() {
+        this._moveFocusToCurrent();
+    }
+    _moveFocusToCurrent() {
+        afterNextRender(() => {
+            const focusedDayButton = this._element.nativeElement.querySelector(this._calendarButtonSelector);
+            if (focusedDayButton) {
+                focusedDayButton.focus();
+            }
+        }, { injector: this._injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCalendarPage, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", type: IdsCalendarPage, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", selected: "selected" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCalendarPage, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+const firstDayOfWeekOffset = 1;
+const daysPerWeek = 7;
+class IdsDaySelectorComponent extends IdsCalendarPage {
+    constructor() {
+        super(...arguments);
+        this.headerLabel = computed(() => (this._intl.getDaySelectorHeaderLabel(this._currentMonth()) ?? ''));
+        this._currentMonth = computed(() => startOfMonth(this.focusedDate()));
+        this._previousMonth = computed(() => addMonths(this._currentMonth(), -1));
+        this._nextMonth = computed(() => addMonths(this._currentMonth(), 1));
+        this._gridStartDate = computed(() => startOfWeek(this._currentMonth(), firstDayOfWeekOffset));
+        this._gridEndDate = computed(() => endOfWeek(endOfMonth(this._currentMonth()), firstDayOfWeekOffset));
+        this._days = computed(() => getDatesBetween(this._gridStartDate(), this._gridEndDate()));
+        this._weekdayLabels = computed(() => this._days().slice(0, daysPerWeek).map((date) => this._intl.getWeekdayHeaderLabel(date) ?? ''));
+    }
+    hasPreviousPage() {
+        const dayOnPrevPage = addDays(this._gridStartDate(), -1);
+        const min = this.min() ?? dayOnPrevPage;
+        return compareDates(dayOnPrevPage, min) > -1;
+    }
+    gotoPreviousPage() {
+        const current = this._currentMonth();
+        this.focusedDate.set(new Date(current.getFullYear(), current.getMonth(), 0));
+    }
+    hasNextPage() {
+        const dayOnNextPage = addDays(this._gridEndDate(), 1);
+        const max = this.max() ?? dayOnNextPage;
+        return compareDates(dayOnNextPage, max) < 1;
+    }
+    gotoNextPage() {
+        const current = this._currentMonth();
+        this.focusedDate.set(new Date(current.getFullYear(), current.getMonth() + 1, 1));
+    }
+    _selectDate(event, date) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.selected.emit(date);
+    }
+    _isDateInCurrentMonth(date) {
+        return date.getMonth() === this._currentMonth().getMonth();
+    }
+    _isDateFocused(date) {
+        return equalDates(date, this.focusedDate());
+    }
+    _isDateSelected(date) {
+        return equalDates(date, this.value());
+    }
+    _isDateDisabled(date) {
+        const min = this.min();
+        const max = this.max();
+        return (isValidDate(min) && compareDates(date, min) === -1) || (isValidDate(max) && compareDates(date, max) === 1);
+    }
+    _isDateToday(date) {
+        return equalDates(date, this._today);
+    }
+    _handleKeydown(event) {
+        let focusedDate = this.focusedDate();
+        switch (event.code) {
+            case 'ArrowUp':
+                focusedDate = addDays(focusedDate, -daysPerWeek);
+                break;
+            case 'ArrowDown':
+                focusedDate = addDays(focusedDate, daysPerWeek);
+                break;
+            case 'ArrowLeft':
+                focusedDate = addDays(focusedDate, -1);
+                break;
+            case 'ArrowRight':
+                focusedDate = addDays(focusedDate, 1);
+                break;
+            case 'Home':
+                focusedDate = startOfWeek(focusedDate, firstDayOfWeekOffset);
+                break;
+            case 'End':
+                focusedDate = endOfWeek(focusedDate, firstDayOfWeekOffset);
+                break;
+            case 'PageUp':
+                focusedDate = this._hasShiftModifierKey(event) ? addYears(focusedDate, -1) : addMonths(focusedDate, -1);
+                break;
+            case 'PageDown':
+                focusedDate = this._hasShiftModifierKey(event) ? addYears(focusedDate, 1) : addMonths(focusedDate, 1);
+                break;
+        }
+        this.focusedDate.set(clampDate(focusedDate, this.min(), this.max()));
+    }
+    _hasShiftModifierKey(event) {
+        return event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsDaySelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsDaySelectorComponent, isStandalone: true, selector: "ids-day-selector", host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ids-day-selector" }, providers: [
+            {
+                provide: IdsCalendarPage,
+                useExisting: IdsDaySelectorComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ids-day-selector__days-grid ids-calendar-grid\">\n  @for (label of _weekdayLabels(); track $index) {\n    <div class=\"ids-calendar-cell\">\n      <span class=\"ids-day-selector__header--label ids-calendar-weekday-label\">{{ label }}</span>\n    </div>\n  }\n  @for (day of _days(); track $index) {\n    @let dayLabel = day.getDate();\n    @let isSelected = _isDateSelected(day);\n    @let isFocused = _isDateFocused(day);\n    @let isToday = _isDateToday(day);\n    @let isDisabled = _isDateDisabled(day) || !_isDateInCurrentMonth(day);\n    @let tabIndex = isFocused ? 0 : -1;\n    @let ariaLabel = _intl.getDayAriaLabel(day);\n    <div class=\"ids-calendar-cell\" [class.ids-calendar-cell-selected]=\"isSelected\">\n      <button\n        type=\"button\"\n        class=\"ids-day-selector__day-button ids-calendar-button\"\n        [attr.disabled]=\"isDisabled || null\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-pressed]=\"isSelected\"\n        [attr.aria-current]=\"isToday\"\n        [tabIndex]=\"tabIndex\"\n        [class.ids-calendar-button-today]=\"isToday\"\n        [class.ids-calendar-button-selected]=\"isSelected\"\n        [class.ids-calendar-button-focused]=\"isFocused\"\n        (click)=\"_selectDate($event, day)\"\n      >{{ dayLabel }}</button>\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsDaySelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-day-selector', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: IdsCalendarPage,
+                            useExisting: IdsDaySelectorComponent,
+                        },
+                    ], host: {
+                        'class': 'ids-day-selector',
+                        '(keydown)': '_handleKeydown($event)',
+                    }, template: "<div class=\"ids-day-selector__days-grid ids-calendar-grid\">\n  @for (label of _weekdayLabels(); track $index) {\n    <div class=\"ids-calendar-cell\">\n      <span class=\"ids-day-selector__header--label ids-calendar-weekday-label\">{{ label }}</span>\n    </div>\n  }\n  @for (day of _days(); track $index) {\n    @let dayLabel = day.getDate();\n    @let isSelected = _isDateSelected(day);\n    @let isFocused = _isDateFocused(day);\n    @let isToday = _isDateToday(day);\n    @let isDisabled = _isDateDisabled(day) || !_isDateInCurrentMonth(day);\n    @let tabIndex = isFocused ? 0 : -1;\n    @let ariaLabel = _intl.getDayAriaLabel(day);\n    <div class=\"ids-calendar-cell\" [class.ids-calendar-cell-selected]=\"isSelected\">\n      <button\n        type=\"button\"\n        class=\"ids-day-selector__day-button ids-calendar-button\"\n        [attr.disabled]=\"isDisabled || null\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-pressed]=\"isSelected\"\n        [attr.aria-current]=\"isToday\"\n        [tabIndex]=\"tabIndex\"\n        [class.ids-calendar-button-today]=\"isToday\"\n        [class.ids-calendar-button-selected]=\"isSelected\"\n        [class.ids-calendar-button-focused]=\"isFocused\"\n        (click)=\"_selectDate($event, day)\"\n      >{{ dayLabel }}</button>\n    </div>\n  }\n</div>\n" }]
+        }] });
+
+const monthsPerRow = 4;
+const lastMonth = 11;
+class IdsMonthSelectorComponent extends IdsCalendarPage {
+    constructor() {
+        super(...arguments);
+        this._focusedYear = computed(() => this.focusedDate().getFullYear());
+        this._monthLabels = toSignal(this._intl.changes.pipe(startWith(null), map(() => {
+            const currentYear = new Date().getFullYear();
+            const monthLabels = Array.from({ length: 12 })
+                .map((nil, month) => this._intl.getMonthLabel(createNormalizedDate(currentYear, month, 1)) ?? '');
+            return monthLabels;
+        })));
+        this.headerLabel = computed(() => String(this._focusedYear()));
+    }
+    hasPreviousPage() {
+        const min = this.min();
+        if (!isValidDate(min)) {
+            return true;
+        }
+        const startOfYear = createNormalizedDate(this._focusedYear(), 0, 1);
+        return compareDates(min, startOfYear) === -1;
+    }
+    gotoPreviousPage() {
+        this.focusedDate.set(createNormalizedDate(this._focusedYear() - 1, lastMonth, 1));
+    }
+    hasNextPage() {
+        const max = this.max();
+        if (!isValidDate(max)) {
+            return true;
+        }
+        // eslint-disable-next-line no-magic-numbers
+        const endOfYear = createNormalizedDate(this._focusedYear(), 11, 31);
+        return compareDates(max, endOfYear) === 1;
+    }
+    gotoNextPage() {
+        this.focusedDate.set(createNormalizedDate(this._focusedYear() + 1, 0, 1));
+    }
+    _selectMonth(event, month) {
+        event.stopPropagation();
+        event.preventDefault();
+        const currentFocusedDate = this.focusedDate();
+        const nextFocusedDate = createNormalizedDate(currentFocusedDate.getFullYear(), month, currentFocusedDate.getDate());
+        this.selected.emit(clampDate(nextFocusedDate, this.min(), this.max()));
+    }
+    _isMonthFocused(month) {
+        return month === this.focusedDate().getMonth();
+    }
+    _isMonthSelected(month) {
+        const selectedYear = this.value()?.getFullYear();
+        const selectedMonth = this.value()?.getMonth();
+        return this._focusedYear() === selectedYear && month === selectedMonth;
+    }
+    _isCurrentMonth(month) {
+        return this._focusedYear() === this._today.getFullYear() && month === this._today.getMonth();
+    }
+    _isMonthDisabled(month) {
+        const min = this.min();
+        const max = this.max();
+        const monthAsDate = new Date(this._focusedYear(), month, 1);
+        return (isValidDate(min) && compareDates(endOfMonth(monthAsDate), startOfMonth(min)) === -1) ||
+            (isValidDate(max) && compareDates(monthAsDate, endOfMonth(max)) === 1);
+    }
+    _getMonthAsDate(month) {
+        return createNormalizedDate(this._focusedYear(), month, 1);
+    }
+    _handleKeydown(event) {
+        let focusedDate = this.focusedDate();
+        switch (event.code) {
+            case 'ArrowUp':
+                focusedDate = addMonths(focusedDate, -monthsPerRow);
+                break;
+            case 'ArrowDown':
+                focusedDate = addMonths(focusedDate, monthsPerRow);
+                break;
+            case 'ArrowLeft':
+                focusedDate = addMonths(focusedDate, -1);
+                break;
+            case 'ArrowRight':
+                focusedDate = addMonths(focusedDate, 1);
+                break;
+            case 'Home':
+                focusedDate = new Date(focusedDate.getFullYear(), 0, focusedDate.getDate());
+                break;
+            case 'End':
+                // eslint-disable-next-line no-magic-numbers
+                focusedDate = new Date(focusedDate.getFullYear(), 11, focusedDate.getDate());
+                break;
+            case 'PageUp':
+                focusedDate = addYears(focusedDate, -1);
+                break;
+            case 'PageDown':
+                focusedDate = addYears(focusedDate, 1);
+                break;
+        }
+        this.focusedDate.set(clampDate(focusedDate, this.min(), this.max()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMonthSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsMonthSelectorComponent, isStandalone: true, selector: "ids-month-selector", host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ids-month-selector" }, providers: [
+            {
+                provide: IdsCalendarPage,
+                useExisting: IdsMonthSelectorComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ids-month-selector__months-grid  ids-calendar-grid\">\n  @for (monthLabel of _monthLabels(); track $index; let month = $index) {\n    @let isSelected = _isMonthSelected(month);\n    @let isFocused = _isMonthFocused(month);\n    @let isCurrentMonth = _isCurrentMonth(month);\n    @let tabIndex = isFocused ? 0 : -1;\n    @let isDisabled = _isMonthDisabled(month);\n    @let ariaLabel = _intl.getMonthAriaLabel(_getMonthAsDate(month));\n    <div class=\"ids-calendar-cell\">\n      <button\n        type=\"button\"\n        class=\"ids-month-selector__month-button ids-calendar-button\"\n        [attr.disabled]=\"isDisabled || null\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-pressed]=\"isSelected\"\n        [attr.aria-current]=\"isCurrentMonth\"\n        [tabIndex]=\"tabIndex\"\n        [class.ids-month-selector__month-button--current-month]=\"isCurrentMonth\"\n        [class.ids-calendar-button-selected]=\"isSelected\"\n        [class.ids-calendar-button-focused]=\"isFocused\"\n        (click)=\"_selectMonth($event, month)\"\n        >{{ monthLabel }}</button>\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMonthSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-month-selector', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: IdsCalendarPage,
+                            useExisting: IdsMonthSelectorComponent,
+                        },
+                    ], host: {
+                        'class': 'ids-month-selector',
+                        '(keydown)': '_handleKeydown($event)',
+                    }, template: "<div class=\"ids-month-selector__months-grid  ids-calendar-grid\">\n  @for (monthLabel of _monthLabels(); track $index; let month = $index) {\n    @let isSelected = _isMonthSelected(month);\n    @let isFocused = _isMonthFocused(month);\n    @let isCurrentMonth = _isCurrentMonth(month);\n    @let tabIndex = isFocused ? 0 : -1;\n    @let isDisabled = _isMonthDisabled(month);\n    @let ariaLabel = _intl.getMonthAriaLabel(_getMonthAsDate(month));\n    <div class=\"ids-calendar-cell\">\n      <button\n        type=\"button\"\n        class=\"ids-month-selector__month-button ids-calendar-button\"\n        [attr.disabled]=\"isDisabled || null\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-pressed]=\"isSelected\"\n        [attr.aria-current]=\"isCurrentMonth\"\n        [tabIndex]=\"tabIndex\"\n        [class.ids-month-selector__month-button--current-month]=\"isCurrentMonth\"\n        [class.ids-calendar-button-selected]=\"isSelected\"\n        [class.ids-calendar-button-focused]=\"isFocused\"\n        (click)=\"_selectMonth($event, month)\"\n        >{{ monthLabel }}</button>\n    </div>\n  }\n</div>\n" }]
+        }] });
+
+const yearsPerRow = 4;
+const yearsPerPage = 24;
+class IdsYearSelectorComponent extends IdsCalendarPage {
+    constructor() {
+        super(...arguments);
+        this._firstYearOnPage = computed(() => {
+            const focusedYear = this.focusedDate().getFullYear();
+            const firstYearOffset = this._getFirstYearOffset(focusedYear, this.min()?.getFullYear(), this.max()?.getFullYear());
+            const firstYearOnPage = focusedYear - firstYearOffset;
+            return firstYearOnPage;
+        });
+        this._years = computed(() => {
+            const firstYearOnPage = this._firstYearOnPage();
+            const years = Array.from({ length: yearsPerPage }).map((_nil, index) => firstYearOnPage + index);
+            return years;
+        });
+        this.headerLabel = computed(() => `${this._years()[0]} - ${this._years().at(-1)}`);
+    }
+    hasPreviousPage() {
+        const min = Number.isFinite(this.min()?.getFullYear()) ? this.min().getFullYear() : Number.POSITIVE_INFINITY;
+        const firstYearOnPage = Number.isFinite(this._firstYearOnPage()) ? this._firstYearOnPage() : Number.NEGATIVE_INFINITY;
+        return firstYearOnPage > min;
+    }
+    gotoPreviousPage() {
+        const firstYearOnPage = this._firstYearOnPage();
+        const currentFocusedDate = this.focusedDate();
+        this.focusedDate.set(createNormalizedDate(firstYearOnPage - 1, currentFocusedDate.getMonth(), currentFocusedDate.getDate()));
+    }
+    hasNextPage() {
+        const max = Number.isFinite(this.max()?.getFullYear()) ? this.max().getFullYear() : Number.NEGATIVE_INFINITY;
+        const lastYearOnPage = Number.isFinite(this._firstYearOnPage()) ? this._firstYearOnPage() + yearsPerPage - 1 : Number.POSITIVE_INFINITY;
+        return lastYearOnPage < max;
+    }
+    gotoNextPage() {
+        const firstYearOnPage = this._firstYearOnPage();
+        const currentFocusedDate = this.focusedDate();
+        this.focusedDate.set(createNormalizedDate(firstYearOnPage + yearsPerPage, currentFocusedDate.getMonth(), currentFocusedDate.getDate()));
+    }
+    _selectYear(event, year) {
+        event.stopPropagation();
+        event.preventDefault();
+        const currentFocusedDate = this.focusedDate();
+        const nextFocusedDate = createNormalizedDate(year, currentFocusedDate.getMonth(), currentFocusedDate.getDate());
+        this.selected.emit(clampDate(nextFocusedDate, this.min(), this.max()));
+    }
+    _isYearFocused(year) {
+        return year === this.focusedDate().getFullYear();
+    }
+    _isYearSelected(year) {
+        return year === this.value()?.getFullYear();
+    }
+    _isCurrentYear(year) {
+        return year === new Date().getFullYear();
+    }
+    _isYearDisabled(year) {
+        const min = this.min();
+        const max = this.max();
+        return (isValidDate(min) && year < min.getFullYear()) || (isValidDate(max) && year > max.getFullYear());
+    }
+    _handleKeydown(event) {
+        let focusedDate = this.focusedDate();
+        switch (event.code) {
+            case 'ArrowUp':
+                focusedDate = addYears(focusedDate, -yearsPerRow);
+                break;
+            case 'ArrowDown':
+                focusedDate = addYears(focusedDate, yearsPerRow);
+                break;
+            case 'ArrowLeft':
+                focusedDate = addYears(focusedDate, -1);
+                break;
+            case 'ArrowRight':
+                focusedDate = addYears(focusedDate, 1);
+                break;
+            case 'Home':
+                focusedDate = new Date(this._years()[0], focusedDate.getMonth(), focusedDate.getDate());
+                break;
+            case 'End':
+                focusedDate = new Date(this._years().at(-1), focusedDate.getMonth(), focusedDate.getDate());
+                break;
+            case 'PageUp':
+                focusedDate = addYears(focusedDate, -yearsPerPage);
+                break;
+            case 'PageDown':
+                focusedDate = addYears(focusedDate, yearsPerPage);
+                break;
+        }
+        this.focusedDate.set(clampDate(focusedDate, this.min(), this.max()));
+    }
+    _getFirstYearOffset(focusedYear, minYear, maxYear = (yearsPerPage - 1)) {
+        // If we have a max year we calculate an offset so that the max year will be the last in the years list
+        // Otherwise if we have a min year we calculate an offset so that the min year will be the first in the years list
+        const minMaxOffset = maxYear - yearsPerPage + 1 || minYear || 0;
+        return positiveModulus(focusedYear - minMaxOffset, yearsPerPage);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsYearSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsYearSelectorComponent, isStandalone: true, selector: "ids-year-selector", host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ids-year-selector" }, providers: [
+            {
+                provide: IdsCalendarPage,
+                useExisting: IdsYearSelectorComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ids-year-selector__years-grid  ids-calendar-grid\">\n  @for (year of _years(); track $index) {\n    @let isSelected = _isYearSelected(year);\n    @let isFocused = _isYearFocused(year);\n    @let isCurrentYear = _isCurrentYear(year);\n    @let tabIndex = isFocused ? 0 : -1;\n    @let isDisabled = _isYearDisabled(year);\n    <div class=\"ids-calendar-cell\">\n      <button\n        type=\"button\"\n        class=\"ids-year-selector__year-button ids-calendar-button\"\n        [attr.disabled]=\"isDisabled || null\"\n        [attr.aria-pressed]=\"isSelected\"\n        [attr.aria-current]=\"isCurrentYear\"\n        [tabIndex]=\"tabIndex\"\n        [class.ids-year-selector__year-button--current-year]=\"isCurrentYear\"\n        [class.ids-calendar-button-selected]=\"isSelected\"\n        [class.ids-calendar-button-focused]=\"isFocused\"\n        (click)=\"_selectYear($event, year)\"\n        >{{ year }}</button>\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsYearSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-year-selector', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: IdsCalendarPage,
+                            useExisting: IdsYearSelectorComponent,
+                        },
+                    ], host: {
+                        'class': 'ids-year-selector',
+                        '(keydown)': '_handleKeydown($event)',
+                    }, template: "<div class=\"ids-year-selector__years-grid  ids-calendar-grid\">\n  @for (year of _years(); track $index) {\n    @let isSelected = _isYearSelected(year);\n    @let isFocused = _isYearFocused(year);\n    @let isCurrentYear = _isCurrentYear(year);\n    @let tabIndex = isFocused ? 0 : -1;\n    @let isDisabled = _isYearDisabled(year);\n    <div class=\"ids-calendar-cell\">\n      <button\n        type=\"button\"\n        class=\"ids-year-selector__year-button ids-calendar-button\"\n        [attr.disabled]=\"isDisabled || null\"\n        [attr.aria-pressed]=\"isSelected\"\n        [attr.aria-current]=\"isCurrentYear\"\n        [tabIndex]=\"tabIndex\"\n        [class.ids-year-selector__year-button--current-year]=\"isCurrentYear\"\n        [class.ids-calendar-button-selected]=\"isSelected\"\n        [class.ids-calendar-button-focused]=\"isFocused\"\n        (click)=\"_selectYear($event, year)\"\n        >{{ year }}</button>\n    </div>\n  }\n</div>\n" }]
+        }] });
+
+class IdsCalendarComponent extends ComponentBaseWithDefaults {
+    constructor() {
+        super(...arguments);
+        this._defaultConfig = {};
+        this._cdRef = inject(ChangeDetectorRef);
+        this._intl = inject(IdsDatepickerIntl);
+        this.value = input(null);
+        this.size = input.required();
+        this.view = input.required();
+        this.min = input(null);
+        this.max = input(null);
+        this.selected = output();
+        this.monthSelected = output();
+        this.yearSelected = output();
+        this._calendarPage = viewChild(IdsCalendarPage);
+        this._view = linkedSignal(() => this.view());
+        this._hostClasses = computed(() => this._getHostClasses([this.size()]));
+        this._headerButtonSize = computed(() => (this.size() === IdsSize.DENSE ? IdsSize.COMPACT : this.size()));
+        this._headerLabel = computed(() => this._calendarPage()?.headerLabel() ?? '');
+        this._prevPageLabel = computed(() => {
+            switch (this._view()) {
+                case IdsDatepickerView.DAY:
+                    return this._intl.prevMonthLabel;
+                case IdsDatepickerView.MONTH:
+                    return this._intl.prevYearLabel;
+                case IdsDatepickerView.YEAR:
+                    return this._intl.prevYearsPageLabel;
+            }
+        });
+        this._nextPageLabel = computed(() => {
+            switch (this._view()) {
+                case IdsDatepickerView.DAY:
+                    return this._intl.nextMonthLabel;
+                case IdsDatepickerView.MONTH:
+                    return this._intl.nextYearLabel;
+                case IdsDatepickerView.YEAR:
+                    return this._intl.nextYearsPageLabel;
+            }
+        });
+        this._switchViewLabel = computed(() => (this._view() === IdsDatepickerView.DAY ? this._intl.switchToYearSelectorLabel : this._intl.switchToDaySelectorLabel));
+        this._focusedDate = new Date();
+    }
+    get _hostName() {
+        return 'calendar';
+    }
+    ngOnInit() {
+        this._intl.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this._cdRef.markForCheck());
+        this._setFocusedDate(this.value());
+    }
+    _selectYear(selectedYear) {
+        this._setFocusedDate(selectedYear);
+        this.yearSelected.emit(startOfYear(selectedYear));
+        this._view.set(IdsDatepickerView.MONTH);
+    }
+    _selectMonth(selectedMonth) {
+        this._setFocusedDate(selectedMonth);
+        this.monthSelected.emit(startOfMonth(selectedMonth));
+        this._view.set(IdsDatepickerView.DAY);
+    }
+    _selectDate(date) {
+        this.selected.emit(date);
+    }
+    _hasPrevPage() {
+        return this._calendarPage()?.hasPreviousPage() ?? true;
+    }
+    _gotoPrevPage() {
+        this._calendarPage().gotoPreviousPage();
+    }
+    _hasNextPage() {
+        return this._calendarPage()?.hasNextPage() ?? true;
+    }
+    _gotoNextPage() {
+        this._calendarPage().gotoNextPage();
+    }
+    _switchView() {
+        switch (this._view()) {
+            case IdsDatepickerView.DAY:
+                this._view.set(IdsDatepickerView.YEAR);
+                break;
+            case IdsDatepickerView.YEAR:
+            case IdsDatepickerView.MONTH:
+                this._view.set(IdsDatepickerView.DAY);
+                break;
+        }
+    }
+    _setFocusedDate(date) {
+        const safeValue = isValidDate(date) ? date : new Date();
+        this._focusedDate = clampDate(safeValue, this.min(), this.max());
+        this._cdRef.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsCalendarComponent, isStandalone: true, selector: "ids-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "ids-calendar-surface" }, viewQueries: [{ propertyName: "_calendarPage", first: true, predicate: IdsCalendarPage, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "<div class=\"ids-calendar__header\">\n  <button\n    type=\"button\"\n    idsIconButton\n    [size]=\"_headerButtonSize()\"\n    [variant]=\"'surface'\"\n    [appearance]=\"'standard'\"\n    [disabled]=\"!_hasPrevPage()\"\n    [attr.aria-label]=\"_prevPageLabel()\"\n    (click)=\"_gotoPrevPage()\"\n  >\n    <ids-icon aria-hidden=\"true\" alt=\"\" fontIcon=\"chevron-left\" [sizeCollection]=\"'big'\" />\n  </button>\n  <button\n    type=\"button\"\n    idsButton\n    [size]=\"_headerButtonSize()\"\n    [variant]=\"'surface'\"\n    [appearance]=\"'text'\"\n    [attr.aria-label]=\"_switchViewLabel()\"\n    [attr.aria-description]=\"_headerLabel()\"\n    (click)=\"_switchView()\"\n  >\n    {{ _headerLabel() }}\n    <ids-icon icon-trailing aria-hidden=\"true\" alt=\"\" fontIcon=\"chevron-down\" />\n  </button>\n  <button\n    type=\"button\"\n    idsIconButton\n    [size]=\"_headerButtonSize()\"\n    [variant]=\"'surface'\"\n    [appearance]=\"'standard'\"\n    [disabled]=\"!_hasNextPage()\"\n    [attr.aria-label]=\"_nextPageLabel()\"\n    (click)=\"_gotoNextPage()\"\n  >\n    <ids-icon aria-hidden=\"true\" alt=\"\" fontIcon=\"chevron-right\" />\n  </button>\n</div>\n@switch (_view()) {\n  @case ('day') {\n    <ids-day-selector [value]=\"value()\" [min]=\"min()\" [max]=\"max()\" [(focusedDate)]=\"_focusedDate\" (selected)=\"_selectDate($event)\" />\n  }\n  @case ('month') {\n    <ids-month-selector [value]=\"value()\" [min]=\"min()\" [max]=\"max()\" [(focusedDate)]=\"_focusedDate\" (selected)=\"_selectMonth($event)\" />\n  }\n  @case ('year') {\n    <ids-year-selector [value]=\"value()\" [min]=\"min()\" [max]=\"max()\" [(focusedDate)]=\"_focusedDate\" (selected)=\"_selectYear($event)\" />\n  }\n}\n", dependencies: [{ kind: "component", type: IdsButtonComponent, selector: "button[idsButton]", inputs: ["appearance", "size", "variant", "disabled"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled"] }, { kind: "component", type: IdsDaySelectorComponent, selector: "ids-day-selector" }, { kind: "component", type: IdsMonthSelectorComponent, selector: "ids-month-selector" }, { kind: "component", type: IdsYearSelectorComponent, selector: "ids-year-selector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-calendar', imports: [
+                        IdsButtonComponent,
+                        IdsIconComponent,
+                        IdsIconButtonComponent,
+                        IdsDaySelectorComponent,
+                        IdsMonthSelectorComponent,
+                        IdsYearSelectorComponent,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkTrapFocus], host: {
+                        'class': 'ids-calendar-surface',
+                    }, template: "<div class=\"ids-calendar__header\">\n  <button\n    type=\"button\"\n    idsIconButton\n    [size]=\"_headerButtonSize()\"\n    [variant]=\"'surface'\"\n    [appearance]=\"'standard'\"\n    [disabled]=\"!_hasPrevPage()\"\n    [attr.aria-label]=\"_prevPageLabel()\"\n    (click)=\"_gotoPrevPage()\"\n  >\n    <ids-icon aria-hidden=\"true\" alt=\"\" fontIcon=\"chevron-left\" [sizeCollection]=\"'big'\" />\n  </button>\n  <button\n    type=\"button\"\n    idsButton\n    [size]=\"_headerButtonSize()\"\n    [variant]=\"'surface'\"\n    [appearance]=\"'text'\"\n    [attr.aria-label]=\"_switchViewLabel()\"\n    [attr.aria-description]=\"_headerLabel()\"\n    (click)=\"_switchView()\"\n  >\n    {{ _headerLabel() }}\n    <ids-icon icon-trailing aria-hidden=\"true\" alt=\"\" fontIcon=\"chevron-down\" />\n  </button>\n  <button\n    type=\"button\"\n    idsIconButton\n    [size]=\"_headerButtonSize()\"\n    [variant]=\"'surface'\"\n    [appearance]=\"'standard'\"\n    [disabled]=\"!_hasNextPage()\"\n    [attr.aria-label]=\"_nextPageLabel()\"\n    (click)=\"_gotoNextPage()\"\n  >\n    <ids-icon aria-hidden=\"true\" alt=\"\" fontIcon=\"chevron-right\" />\n  </button>\n</div>\n@switch (_view()) {\n  @case ('day') {\n    <ids-day-selector [value]=\"value()\" [min]=\"min()\" [max]=\"max()\" [(focusedDate)]=\"_focusedDate\" (selected)=\"_selectDate($event)\" />\n  }\n  @case ('month') {\n    <ids-month-selector [value]=\"value()\" [min]=\"min()\" [max]=\"max()\" [(focusedDate)]=\"_focusedDate\" (selected)=\"_selectMonth($event)\" />\n  }\n  @case ('year') {\n    <ids-year-selector [value]=\"value()\" [min]=\"min()\" [max]=\"max()\" [(focusedDate)]=\"_focusedDate\" (selected)=\"_selectYear($event)\" />\n  }\n}\n" }]
+        }] });
+
+const datepickerConnectedPositions = [
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+    },
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        panelClass: 'ids-datepicker-calendar-above',
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        panelClass: 'ids-datepicker-calendar-above',
+    },
+];
+
+const defaultConfig = IDS_DATEPICKER_DEFAULT_CONFIG_FACTORY();
+class IdsDatepickerDirective extends DirectiveBaseWithDefaults {
+    constructor() {
+        super(...arguments);
+        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_DATEPICKER_DEFAULT_CONFIG);
+        this._hostClasses = signal('');
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._elementRef = inject(ElementRef);
+        this._parent = inject(IdsFormFieldComponent);
+        this._overlay = inject(Overlay);
+        this._injector = inject(Injector);
+        this.formatter = input(inject(IDS_DATE_FORMATTER));
+        this.parser = input(inject(IDS_DATE_PARSER));
+        this.view = input(this._defaultConfig.view);
+        this.minDate = input(null, { transform: (value) => getValidDateOrNull(deserializeDate(value)) });
+        this.maxDate = input(null, { transform: (value) => getValidDateOrNull(deserializeDate(value)) });
+        this._inputChanges = effect(() => {
+            const min = this.minDate();
+            const max = this.maxDate();
+            const view = this.view();
+            const size = this._parent.size();
+            const calendar = this._componentRef?.instance;
+            if (!calendar) {
+                return;
+            }
+            if (!equalDates(min, calendar.min())) {
+                this._componentRef?.setInput('min', min);
+            }
+            if (!equalDates(max, calendar.max())) {
+                this._componentRef?.setInput('max', max);
+            }
+            if (view !== calendar.view()) {
+                this._componentRef?.setInput('view', view);
+            }
+            if (size !== calendar.size()) {
+                this._componentRef?.setInput('size', size);
+            }
+        });
+        this.openedInput = input(false, { transform: booleanAttribute, alias: 'opened' });
+        this._opened = signal(this.openedInput() ?? false);
+        this.opened = this._opened.asReadonly();
+        this.monthSelected = output();
+        this.yearSelected = output();
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        this._onValidatorChange = () => { };
+        this._overlayRef = null;
+        this._componentRef = null;
+        this._scrollStrategy = this._overlay.scrollStrategies.reposition();
+        this._overlayCloseSub = Subscription.EMPTY;
+        this._isValid = signal(false);
+        this._dateFormatValidator = () => (this._isValid() ? null : { idsDateFormat: true });
+        this._minValidator = () => {
+            const current = getValidDateOrNull(deserializeDate(this.value));
+            const min = this.minDate();
+            return !min || !current || compareDates(min, current) <= 0 ? null : { 'idsDateMin': { min, current } };
+        };
+        this._maxValidator = () => {
+            const current = getValidDateOrNull(deserializeDate(this.value));
+            const max = this.maxDate();
+            return !max || !current || compareDates(max, current) >= 0 ? null : { 'idsDateMax': { max, current } };
+        };
+        // eslint-disable-next-line @stylistic/js/array-bracket-newline, @stylistic/js/array-element-newline
+        this._validator = Validators.compose([this._dateFormatValidator, this._minValidator, this._maxValidator]);
+    }
+    get value() {
+        return deserializeDate(this._parent.controlDir()?.value);
+    }
+    ngOnChanges(changes) {
+        if ('opened' in changes) {
+            if (this.openedInput()) {
+                this.open();
+            }
+            else {
+                this.close();
+            }
+        }
+        if (('minDate' in changes && !changes['minDate'].firstChange) || ('maxDate' in changes && !changes['maxDate'].firstChange)) {
+            this._onValidatorChange();
+        }
+    }
+    // #region Value accessor implementation
+    writeValue(obj) {
+        this._isValid.set(this._isValidValue(deserializeDate(obj)));
+        this._setInputValue(obj);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    // #endregion
+    // #region Validator implementation
+    validate(control) {
+        return this._validator(control);
+    }
+    registerOnValidatorChange(fn) {
+        this._onValidatorChange = fn;
+    }
+    // #endregion
+    open() {
+        if (this.opened() || this._parent.disabled()) {
+            return;
+        }
+        this._overlayRef = this._overlay.create(this._getOverlayConfig());
+        this._overlayCloseSub = this._onOverlayClose(this._overlayRef).subscribe((event) => {
+            event?.preventDefault();
+            this.close();
+        });
+        this._onPageNavigationKeydown(this._overlayRef).subscribe((event) => event?.preventDefault());
+        this._componentRef = this._overlayRef.attach(new ComponentPortal(IdsCalendarComponent, this._viewContainerRef));
+        this._componentRef.setInput('value', this.value);
+        this._componentRef.setInput('min', this.minDate());
+        this._componentRef.setInput('max', this.maxDate());
+        this._componentRef.setInput('view', this.view());
+        this._componentRef.setInput('size', this._parent.size());
+        this._componentRef.instance.selected.subscribe((selectedDate) => {
+            this._onChange(selectedDate);
+            this._setInputValue(this.value);
+            this.close();
+        });
+        this._componentRef.instance.monthSelected.subscribe((selectedMonth) => this.monthSelected.emit(selectedMonth));
+        this._componentRef.instance.yearSelected.subscribe((selectedYear) => this.yearSelected.emit(selectedYear));
+        this._opened.set(true);
+    }
+    close() {
+        if (!this._opened()) {
+            return;
+        }
+        this._overlayCloseSub.unsubscribe();
+        this._overlayCloseSub = Subscription.EMPTY;
+        this._disposeOverlay();
+        this._opened.set(false);
+        afterNextRender(() => this._elementRef.nativeElement.focus(), { injector: this._injector });
+    }
+    _handleInput(value) {
+        const parsed = this.parser()(value);
+        this._isValid.set(this._isValidValue(parsed));
+        const date = getValidDateOrNull(parsed);
+        const valueChanged = !equalDates(date, this.value);
+        if (!date || valueChanged) {
+            this._onChange(date);
+        }
+    }
+    _handleBlur() {
+        this._onTouched();
+    }
+    _handleKeydown(event) {
+        if (event.code === 'ArrowDown' && event.altKey && !event.ctrlKey && !event.shiftKey && !event.metaKey) {
+            this.open();
+        }
+    }
+    _isValidValue(value) {
+        return !value || isValidDate(value);
+    }
+    _setInputValue(value) {
+        this._elementRef.nativeElement.value = isValidDate(value) ? this.formatter()(value) : '';
+    }
+    _getOverlayConfig() {
+        const overlayViewportMargin = 8;
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this._parent.getConnectedOverlayOrigin())
+            .withTransformOriginOn('.mat-datepicker-content')
+            .withFlexibleDimensions(false)
+            .withViewportMargin(overlayViewportMargin)
+            .withLockedPosition()
+            .withPositions(datepickerConnectedPositions);
+        return {
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: [],
+            direction: 'ltr',
+            scrollStrategy: this._scrollStrategy,
+            panelClass: 'ids-datepicker-panel',
+        };
+    }
+    _disposeOverlay() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+            this._componentRef = null;
+        }
+    }
+    _onOverlayClose(overlayRef) {
+        return merge(overlayRef.backdropClick(), overlayRef.detachments(), overlayRef.keydownEvents().pipe(filter((event) => event.code === 'Escape' && !hasModifierKey(event))));
+    }
+    _onPageNavigationKeydown(overlayRef) {
+        return overlayRef.keydownEvents().pipe(filter((event) => [
+            'ArrowUp',
+            'ArrowDown',
+            'ArrowLeft',
+            'ArrowRight',
+            'PageUp',
+            'PageDown',
+        ].includes(event.code)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsDatepickerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", type: IdsDatepickerDirective, isStandalone: true, selector: "input[idsDatepicker]", inputs: { formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", 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 }, openedInput: { classPropertyName: "openedInput", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { listeners: { "input": "_handleInput($event.target.value)", "blur": "_handleBlur()", "keydown": "_handleKeydown($event)" }, properties: { "disabled": "disabled" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => IdsDatepickerDirective),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => IdsDatepickerDirective),
+                multi: true,
+            },
+        ], exportAs: ["idsDatepicker"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsDatepickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[idsDatepicker]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => IdsDatepickerDirective),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => IdsDatepickerDirective),
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        '[disabled]': 'disabled',
+                        '(input)': '_handleInput($event.target.value)',
+                        '(blur)': '_handleBlur()',
+                        '(keydown)': '_handleKeydown($event)',
+                    },
+                    exportAs: 'idsDatepicker',
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IDS_DATEPICKER_DEFAULT_CONFIG, IDS_DATEPICKER_DEFAULT_CONFIG_FACTORY, IDS_DATE_FORMATTER, IDS_DATE_PARSER, IdsDatepickerDirective, IdsDatepickerIntl, IdsDatepickerTriggerComponent, IdsDatepickerView };
+//# sourceMappingURL=i-cell-ids-angular-datepicker.mjs.map