@ardium-ui/ui 5.0.0-alpha.90 → 5.0.0-alpha.92

package/fesm2022/ardium-ui-ui.mjs

@@ -418,8 +418,8 @@ class _NgModelComponentBase extends _FocusableComponentBase {
     }
     //! event handlers
     onFocus(event) {
-        super.onFocus(event);
         this._shouldEmitTouched = false;
+        super.onFocus(event);
     }
     onBlur(event) {
         this._shouldEmitTouched = true;
@@ -6018,8 +6018,7 @@ class _AbstractDateInput extends _FormFieldComponentBase {
         //! control value accessor
         this.value = model(null);
         //! output events
-        this.isOpen = signal(false);
-        this.isOpenChange = output();
+        this.isOpen = model(false);
         this.openEvent = output({ alias: 'open' });
         this.closeEvent = output({ alias: 'close' });
         //! appearance
@@ -6136,9 +6135,6 @@ class _AbstractDateInput extends _FormFieldComponentBase {
     _emitChange() {
         this._onChangeRegistered?.(this.value());
     }
-    _onTouched() {
-        this._onTouchedRegistered?.();
-    }
     //! lifecycle hooks
     ngOnChanges(changes) {
         if (changes['UTC']) {
@@ -6259,7 +6255,6 @@ class _AbstractDateInput extends _FormFieldComponentBase {
             this.activeView.set(startView);
         }
         this.isOpen.set(true);
-        this.isOpenChange.emit(true);
         this._createOverlay();
         this.openEvent.emit();
     }
@@ -6267,13 +6262,11 @@ class _AbstractDateInput extends _FormFieldComponentBase {
         if (!this.isOpen())
             return;
         this.isOpen.set(false);
-        this.isOpenChange.emit(false);
         this._destroyOverlay();
-        this._onTouched();
         this.closeEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractDateInput, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _AbstractDateInput, isStandalone: true, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, calendarDisabled: { classPropertyName: "calendarDisabled", publicName: "calendarDisabled", isSignal: true, isRequired: false, transformFunction: null }, calendarHidden: { classPropertyName: "calendarHidden", publicName: "calendarHidden", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, dropdownAppearance: { classPropertyName: "dropdownAppearance", publicName: "dropdownAppearance", isSignal: true, isRequired: false, transformFunction: null }, dropdownVariant: { classPropertyName: "dropdownVariant", publicName: "dropdownVariant", isSignal: true, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: false, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: false, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: false, transformFunction: null }, multipleYearPageChangeModifier: { classPropertyName: "multipleYearPageChangeModifier", publicName: "multipleYearPageChangeModifier", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, hideFloatingMonth: { classPropertyName: "hideFloatingMonth", publicName: "hideFloatingMonth", isSignal: true, isRequired: false, transformFunction: null }, useAcceptButtonToSelect: { classPropertyName: "useAcceptButtonToSelect", publicName: "useAcceptButtonToSelect", isSignal: true, isRequired: false, transformFunction: null }, calendarDaysViewHeaderDateFormat: { classPropertyName: "calendarDaysViewHeaderDateFormat", publicName: "calendarDaysViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarYearsViewHeaderDateFormat: { classPropertyName: "calendarYearsViewHeaderDateFormat", publicName: "calendarYearsViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarMonthsViewHeaderDateFormat: { classPropertyName: "calendarMonthsViewHeaderDateFormat", publicName: "calendarMonthsViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekdayDateFormat: { classPropertyName: "calendarWeekdayDateFormat", publicName: "calendarWeekdayDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekdayTitleDateFormat: { classPropertyName: "calendarWeekdayTitleDateFormat", publicName: "calendarWeekdayTitleDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarFloatingMonthDateFormat: { classPropertyName: "calendarFloatingMonthDateFormat", publicName: "calendarFloatingMonthDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarFloatingMonthTitleDateFormat: { classPropertyName: "calendarFloatingMonthTitleDateFormat", publicName: "calendarFloatingMonthTitleDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarYearDateFormat: { classPropertyName: "calendarYearDateFormat", publicName: "calendarYearDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarMonthDateFormat: { classPropertyName: "calendarMonthDateFormat", publicName: "calendarMonthDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarDayDateFormat: { classPropertyName: "calendarDayDateFormat", publicName: "calendarDayDateFormat", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", isOpenChange: "isOpenChange", openEvent: "open", closeEvent: "close", activeView: "activeViewChange", activeYear: "activeYearChange", activeMonth: "activeMonthChange", yearSelect: "yearSelect", monthSelect: "monthSelect" }, queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdDateInputValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarIconTemplate", first: true, predicate: ArdDateInputCalendarIconTemplateDirective, descendants: true, isSignal: true }, { propertyName: "acceptButtonsTemplate", first: true, predicate: ArdDateInputAcceptButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdDateInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdDateInputSuffixTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _AbstractDateInput, isStandalone: true, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, calendarDisabled: { classPropertyName: "calendarDisabled", publicName: "calendarDisabled", isSignal: true, isRequired: false, transformFunction: null }, calendarHidden: { classPropertyName: "calendarHidden", publicName: "calendarHidden", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, dropdownAppearance: { classPropertyName: "dropdownAppearance", publicName: "dropdownAppearance", isSignal: true, isRequired: false, transformFunction: null }, dropdownVariant: { classPropertyName: "dropdownVariant", publicName: "dropdownVariant", isSignal: true, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: false, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: false, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: false, transformFunction: null }, multipleYearPageChangeModifier: { classPropertyName: "multipleYearPageChangeModifier", publicName: "multipleYearPageChangeModifier", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, hideFloatingMonth: { classPropertyName: "hideFloatingMonth", publicName: "hideFloatingMonth", isSignal: true, isRequired: false, transformFunction: null }, useAcceptButtonToSelect: { classPropertyName: "useAcceptButtonToSelect", publicName: "useAcceptButtonToSelect", isSignal: true, isRequired: false, transformFunction: null }, calendarDaysViewHeaderDateFormat: { classPropertyName: "calendarDaysViewHeaderDateFormat", publicName: "calendarDaysViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarYearsViewHeaderDateFormat: { classPropertyName: "calendarYearsViewHeaderDateFormat", publicName: "calendarYearsViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarMonthsViewHeaderDateFormat: { classPropertyName: "calendarMonthsViewHeaderDateFormat", publicName: "calendarMonthsViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekdayDateFormat: { classPropertyName: "calendarWeekdayDateFormat", publicName: "calendarWeekdayDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekdayTitleDateFormat: { classPropertyName: "calendarWeekdayTitleDateFormat", publicName: "calendarWeekdayTitleDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarFloatingMonthDateFormat: { classPropertyName: "calendarFloatingMonthDateFormat", publicName: "calendarFloatingMonthDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarFloatingMonthTitleDateFormat: { classPropertyName: "calendarFloatingMonthTitleDateFormat", publicName: "calendarFloatingMonthTitleDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarYearDateFormat: { classPropertyName: "calendarYearDateFormat", publicName: "calendarYearDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarMonthDateFormat: { classPropertyName: "calendarMonthDateFormat", publicName: "calendarMonthDateFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarDayDateFormat: { classPropertyName: "calendarDayDateFormat", publicName: "calendarDayDateFormat", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", isOpen: "isOpenChange", openEvent: "open", closeEvent: "close", activeView: "activeViewChange", activeYear: "activeYearChange", activeMonth: "activeMonthChange", yearSelect: "yearSelect", monthSelect: "monthSelect" }, queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdDateInputValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarIconTemplate", first: true, predicate: ArdDateInputCalendarIconTemplateDirective, descendants: true, isSignal: true }, { propertyName: "acceptButtonsTemplate", first: true, predicate: ArdDateInputAcceptButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdDateInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdDateInputSuffixTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractDateInput, decorators: [{
             type: Directive
@@ -6436,6 +6429,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ standalone: true, selector: 'ard-calendar > ng-template[_ard-tmp-repository]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+function isMonthOutOfRange(month, year, min, max) {
+    const dateForMinComparison = new Date(year, month + 1, 0); // last day of month
+    if (isDefined(min) && dateForMinComparison < min)
+        return -1;
+    const dateForMaxComparison = new Date(year, month, 1); // first day of month
+    if (isDefined(max) && dateForMaxComparison > max)
+        return 1;
+    return 0;
+}
+function getCalendarMonthsArray(year, min, max) {
+    const months = [];
+    for (let month = 0; month < 12; month++) {
+        const monthData = {
+            value: month,
+            valueDate: new Date(year, month, 2),
+            disabled: !!isMonthOutOfRange(month, year, min, max),
+        };
+        months.push(monthData);
+    }
+    return months;
+}
+
 /**
  * Generates a layout array to be used to create a calendar page for the given year and month.
  *
@@ -6520,757 +6535,506 @@ function isDayOutOfRange(date, min, max) {
     return 0;
 }
 
-function isMonthOutOfRange(month, year, min, max) {
-    const dateForMinComparison = new Date(year, month + 1, 0); // last day of month
-    if (isDefined(min) && dateForMinComparison < min)
-        return -1;
-    const dateForMaxComparison = new Date(year, month, 1); // first day of month
-    if (isDefined(max) && dateForMaxComparison > max)
-        return 1;
-    return 0;
-}
-function getCalendarMonthsArray(year, min, max) {
-    const months = [];
-    for (let month = 0; month < 12; month++) {
-        const monthData = {
-            value: month,
-            valueDate: new Date(year, month, 2),
-            disabled: !!isMonthOutOfRange(month, year, min, max),
-        };
-        months.push(monthData);
-    }
-    return months;
-}
-
-function getCalendarYearsArray(startYear, yearCount, min, max) {
-    return new Array(yearCount).fill(startYear).map((v, i) => ({ value: v + i, valueDate: new Date(v + i, 1, 1), disabled: !!isYearOutOfRange(v + i, min, max) }));
-}
-function isYearOutOfRange(year, min, max) {
-    const dateForMinComparison = new Date(year, 11, 31);
-    if (isDefined(min) && dateForMinComparison < min)
-        return -1;
-    const dateForMaxComparison = new Date(year, 0, 1);
-    if (isDefined(max) && dateForMaxComparison > max)
-        return 1;
-    return 0;
+const ARD_ICON_BUTTON_DEFAULTS = new InjectionToken('ard-icon-button-defaults', {
+    factory: () => ({ ..._simpleButtonDefaults, ..._focusableComponentDefaults }),
+});
+function provideIconButtonDefaults(config) {
+    return { provide: ARD_ICON_BUTTON_DEFAULTS, useValue: { ..._simpleButtonDefaults, ..._focusableComponentDefaults, ...config } };
 }
 
-class _AbstractCalendar extends _FormFieldComponentBase {
+class ArdiumIconButtonComponent extends _FocusableComponentBase {
     constructor(defaults) {
         super(defaults);
-        this.TODAY = computed(() => createDate(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), this.UTC()));
-        //! appearance
+        this.wrapperClasses = input('');
+        this.type = input(this._DEFAULTS.type);
+        this.ariaLabel = input('');
+        //! button settings
         this.color = input(this._DEFAULTS.color);
-        this.ngClasses = computed(() => [`ard-color-${this.color()}`].join(' '));
-        //! active view
-        this.activeView = model(this._DEFAULTS.activeView);
-        this.activeYear = model(this._DEFAULTS.activeYear);
-        this.activeMonth = model(this._DEFAULTS.activeMonth);
-        this.activePageChange = output();
-        this.firstWeekday = input(this._DEFAULTS.firstWeekday, {
-            transform: v => {
-                const value = coerceNumberProperty(v, this._DEFAULTS.firstWeekday);
-                if (!Number.isInteger(value)) {
-                    console.error(new Error(`ARD-NF${this.componentId}1A: [firstWeekday] must be a positive integer, got "${value}". Using default value instead.`));
-                    return this._DEFAULTS.firstWeekday;
-                }
-                if (value < 0 || value > 6) {
-                    console.error(new Error(`ARD-NF${this.componentId}1B: [firstWeekday] must be between 0 and 6, got "${value}". Using modulo operator to adjust the value.`));
-                }
-                return value % 7;
-            },
-        });
-        this.multipleYearPageChangeModifier = input(this._DEFAULTS.multipleYearPageChangeModifier, {
-            transform: v => {
-                const value = coerceNumberProperty(v, this._DEFAULTS.multipleYearPageChangeModifier);
-                if (!Number.isInteger(value) || value < 1) {
-                    console.error(new Error(`ARD-NF${this.componentId}2: [multipleYearPageChangeModifier] must be a positive integer, got "${value}". Using default value instead.`));
-                    return this._DEFAULTS.multipleYearPageChangeModifier;
-                }
-                return value;
-            },
-        });
-        this.multipleYearOffset = input(this._DEFAULTS.multipleYearOffset, {
-            transform: v => {
-                const value = coerceNumberProperty(v, this._DEFAULTS.multipleYearOffset);
-                if (!Number.isInteger(value) || value < 0) {
-                    console.error(new Error(`ARD-NF${this.componentId}3: [multipleYearOffset] must be a non-negative integer, got "${value}". Using default value instead.`));
-                    return this._DEFAULTS.multipleYearOffset;
-                }
-                return value;
-            },
-        });
-        this.multipleYearPageSize = input(this._DEFAULTS.multipleYearPageSize, {
-            transform: v => {
-                const value = coerceNumberProperty(v, this._DEFAULTS.multipleYearPageSize);
-                if (!Number.isInteger(value) || value < 1) {
-                    console.error(new Error(`ARD-NF${this.componentId}5: [multipleYearPageSize] must be a positive integer, got "${value}". Using default value instead.`));
-                    return this._DEFAULTS.multipleYearPageSize;
-                }
-                return value;
-            },
-        });
-        this.multiCalendarLocation = input(this._DEFAULTS.multiCalendarLocation);
-        this.autoFocus = input(this._DEFAULTS.autoFocus, { transform: v => coerceBooleanProperty(v) });
-        this.staticHeight = input(this._DEFAULTS.staticHeight, { transform: v => coerceBooleanProperty(v) });
-        this.hideFloatingMonth = input(this._DEFAULTS.hideFloatingMonth, {
+        this.lightColoring = input(this._DEFAULTS.lightColoring, {
             transform: v => coerceBooleanProperty(v),
         });
-        //! value
-        this.selectionStart = signal(null);
-        this.selectionEnd = signal(null);
-        this.yearSelect = output();
-        this.monthSelect = output();
-        this.min = input(this._DEFAULTS.min, {
-            transform: v => (v === null ? null : coerceDateProperty(v, this._DEFAULTS.min)),
-        });
-        this.max = input(this._DEFAULTS.max, {
-            transform: v => (v === null ? null : coerceDateProperty(v, this._DEFAULTS.max)),
+        this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
+        this.pointerEventsWhenDisabled = input(this._DEFAULTS.pointerEventsWhenDisabled, {
+            transform: v => coerceBooleanProperty(v),
         });
-        this.UTC = input(this._DEFAULTS.UTC, { transform: v => coerceBooleanProperty(v) });
-        this._UTCAfterInit = signal(this._DEFAULTS.UTC);
-        this.filter = input(this._DEFAULTS.filter);
-        this.isDayFilteredOut = computed(() => {
-            return (day, month = this.activeMonth(), year = this.activeYear()) => {
-                return this.filter()?.(createDate(year, month, day, this.UTC())) ?? false;
-            };
+        this.ngClasses = computed(() => [
+            'ard-appearance-transparent',
+            `ard-color-${this.disabled() ? ComponentColor.None : this.color()}`,
+            this.lightColoring() ? `ard-light-coloring` : '',
+            this.compact() ? 'ard-compact' : '',
+        ].join(' '));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumIconButtonComponent, deps: [{ token: ARD_ICON_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumIconButtonComponent, isStandalone: false, selector: "ard-icon-button", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lightColoring: { classPropertyName: "lightColoring", publicName: "lightColoring", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, pointerEventsWhenDisabled: { classPropertyName: "pointerEventsWhenDisabled", publicName: "pointerEventsWhenDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-icon-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["@layer ard-ui{ard-icon-button{display:block}.ard-icon-button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-icon-button .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'ard-icon-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.ard-button-with-pointer-events-when-disabled]': 'pointerEventsWhenDisabled()',
+                    }, template: "<button\r\n  class=\"ard-icon-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["@layer ard-ui{ard-icon-button{display:block}.ard-icon-button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-icon-button .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ARD_ICON_BUTTON_DEFAULTS]
+                }] }] });
+
+const TODAY$2 = new Date();
+class DaysViewComponent {
+    constructor() {
+        this.tabIndex = input.required();
+        this.readOnly = input.required();
+        this.disabled = input.required();
+        this.autoFocus = input.required();
+        this._isUsingKeyboard = input.required();
+        //! active year/month
+        this.activeYear = input.required();
+        this.activeMonth = input.required();
+        this.selectedDate = input.required();
+        this.selectedDateEnd = input.required();
+        this.rangeSelectionMode = input.required();
+        this.UTC = input.required();
+        this.min = input.required();
+        this.max = input.required();
+        this.multiCalendarLocation = input.required();
+        this.isDayFilteredOut = input.required();
+        this.highlightedDay = input.required();
+        this.highlightedDayDate = computed(() => {
+            const day = this.highlightedDay();
+            if (day === null)
+                return null;
+            return createDate(this.activeYear(), this.activeMonth(), day, this.UTC());
         });
-        //! highlighting days
-        this.highlightedDay = model(null);
-        this.highlightDayEvent = output({ alias: 'highlightDay' });
-        //! highlighting months
-        this._highlightedMonth = signal(null);
-        this.highlightedMonth = this._highlightedMonth.asReadonly();
-        //! highlighting years
-        this.__highlightedYear = signal(null);
-        this.highlightedYear = this.__highlightedYear.asReadonly();
-        this.currentYearRangeStart = linkedSignal(() => {
-            // align to a multiple of 4 and subtract offset
-            const rangeStartForCurrentYear = this.TODAY().getFullYear() - (this.TODAY().getFullYear() % 4) - this.multipleYearOffset() * 4;
-            const activeYear = this.activeYear();
-            const offset = roundToMultiple(activeYear - rangeStartForCurrentYear + 1, this.multipleYearPageSize(), 'up') - this.multipleYearPageSize(); // check how many n-year pages need to be turned
-            return rangeStartForCurrentYear + offset;
+        //! focusing
+        this.focusableElement = viewChild.required('focusableElement');
+        //! calendar data
+        this.firstWeekday = input.required();
+        this.staticHeight = input.required();
+        this.hideFloatingMonth = input.required();
+        this.activeCalendarData = computed(() => getCalendarDayData(this.activeYear(), this.activeMonth(), this.firstWeekday(), this.min(), this.max(), this.staticHeight(), !this.hideFloatingMonth()));
+        this.reserveTopRow = computed(() => !this.hideFloatingMonth() && this.activeCalendarData().leadingSpaces < 3);
+        this.weekdayArray = computed(() => getCalendarWeekdayArray(this.firstWeekday()));
+        this.currentAriaLabel = computed(() => {
+            const day = this.highlightedDay();
+            if (day === null) {
+                return '';
+            }
+            return new Date(this.activeYear(), this.activeMonth(), day).toLocaleDateString(undefined, {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+            });
         });
-        //! internals
-        this._isUsingKeyboard = signal(false);
+        //! outputs
+        this.triggerOpenYearsView = output();
+        this.triggerOpenMonthsView = output();
+        this.triggerSelectDay = output();
+        this.triggerChangeMonth = output();
+        this.triggerChangeYear = output();
+        this.triggerHighlightDay = output();
+        this.triggerHighlightNextDay = output();
+        this.triggerHighlightPreviousDay = output();
+        this.triggerHighlightFirstDay = output();
+        this.triggerHighlightLastDay = output();
+        this.triggerHighlightSameDayPreviousPage = output();
+        this.triggerHighlightSameDayNextPage = output();
+        this.focusEvent = output({ alias: 'focus' });
+        this.blurEvent = output({ alias: 'blur' });
         //! templates
-        this.templateRepository = contentChild(_CalendarTemplateRepositoryDirective);
-        this.yearsViewHeaderTemplate = contentChild(ArdCalendarYearsViewHeaderTemplateDirective);
-        this.monthsViewHeaderTemplate = contentChild(ArdCalendarMonthsViewHeaderTemplateDirective);
-        this.daysViewHeaderTemplate = contentChild(ArdCalendarDaysViewHeaderTemplateDirective);
-        this.floatingMonthTemplate = contentChild(ArdCalendarFloatingMonthTemplateDirective);
-        this.yearTemplate = contentChild(ArdCalendarYearTemplateDirective);
-        this.monthTemplate = contentChild(ArdCalendarMonthTemplateDirective);
-        this.dayTemplate = contentChild(ArdCalendarDayTemplateDirective);
-        this.weekdayTemplate = contentChild(ArdCalendarWeekdayTemplateDirective);
-        //! template customizations
-        this.daysViewHeaderDateFormat = input(this._DEFAULTS.daysViewHeaderDateFormat); // 'MMM YYYY'
-        this.yearsViewHeaderDateFormat = input(this._DEFAULTS.yearsViewHeaderDateFormat); // 'YYYY'
-        this.monthsViewHeaderDateFormat = input(this._DEFAULTS.monthsViewHeaderDateFormat); // 'YYYY'
-        this.weekdayDateFormat = input(this._DEFAULTS.weekdayDateFormat); // 'EEEEE'
-        this.weekdayTitleDateFormat = input(this._DEFAULTS.weekdayTitleDateFormat); // 'EEEE'
-        this.floatingMonthDateFormat = input(this._DEFAULTS.floatingMonthDateFormat); // 'LLL'
-        this.floatingMonthTitleDateFormat = input(this._DEFAULTS.floatingMonthTitleDateFormat); // 'LLLL'
-        this.yearDateFormat = input(this._DEFAULTS.yearDateFormat); // 'YYYY'
-        this.monthDateFormat = input(this._DEFAULTS.monthDateFormat); // 'MMM'
-        this.dayDateFormat = input(this._DEFAULTS.dayDateFormat); // 'D'
-    }
-    onTriggerOpenDaysView() {
-        this.activeView.set(ArdCalendarView.Days);
+        this.daysViewHeaderTemplate = input.required();
+        this.floatingMonthTemplate = input.required();
+        this.weekdayTemplate = input.required();
+        this.dayTemplate = input.required();
+        //! template customizations
+        this.daysViewHeaderDateFormat = input.required(); // 'MMM YYYY'
+        this.weekdayDateFormat = input.required(); // 'EEEEE'
+        this.weekdayTitleDateFormat = input.required(); // 'EEEE'
+        this.floatingMonthDateFormat = input.required(); // 'LLL'
+        this.floatingMonthTitleDateFormat = input.required(); // 'LLLL'
+        this.dayDateFormat = input.required(); // 'D'
+        //! template contexts
+        this.daysViewHeaderContext = computed(() => ({
+            nextMonth: () => {
+                this.triggerChangeMonth.emit(this.activeMonth() + 1);
+            },
+            prevMonth: () => {
+                this.triggerChangeMonth.emit(this.activeMonth() - 1);
+            },
+            nextYear: () => {
+                this.triggerChangeYear.emit(this.activeYear() + 1);
+            },
+            prevYear: () => {
+                this.triggerChangeYear.emit(this.activeYear() - 1);
+            },
+            openYearsView: () => {
+                this.triggerOpenYearsView.emit();
+            },
+            openMonthsView: () => {
+                this.triggerOpenMonthsView.emit();
+            },
+            onFocus: (event) => {
+                this.focusEvent.emit(event);
+            },
+            onBlur: (event) => {
+                this.blurEvent.emit(event);
+            },
+            canGoToNextPage: !this.isMonthOutOfRange(this.activeMonth() + 1),
+            canGoToPreviousPage: !this.isMonthOutOfRange(this.activeMonth() - 1),
+            hideNextPageButton: this.multiCalendarLocation() === ArdMultiCalendarLocation.Left ||
+                this.multiCalendarLocation() === ArdMultiCalendarLocation.Inner,
+            hidePreviousPageButton: this.multiCalendarLocation() === ArdMultiCalendarLocation.Right ||
+                this.multiCalendarLocation() === ArdMultiCalendarLocation.Inner,
+            year: this.activeYear(),
+            month: this.activeMonth(),
+            $implicit: getUTCDate(this.activeYear(), this.activeMonth(), 2), // second day of month to prevent timezone issues
+        }));
+        this.weekdayContext = computed(() => (dayIndex) => {
+            // create a date object for the given day index (0 = Sunday, 1 = Monday, etc.)
+            // add 4 because January 4, 1970 is a Sunday
+            const date = getUTCDate(1970, 0, 4 + dayIndex);
+            return {
+                dayIndex,
+                date,
+                $implicit: date,
+            };
+        });
+        this.floatingMonthContext = computed(() => {
+            const date = getUTCDate(this.activeYear(), this.activeMonth(), 2); // second day of month to prevent timezone issues
+            return {
+                month: this.activeMonth(),
+                date,
+                $implicit: date,
+            };
+        });
+        this.dayContext = computed(() => (day) => {
+            const date = getUTCDate(this.activeYear(), this.activeMonth(), day);
+            return {
+                value: day,
+                date,
+                $implicit: day,
+                select: (dayOrDate) => {
+                    this.triggerSelectDay.emit(dayOrDate instanceof Date ? dayOrDate.getDate() : dayOrDate);
+                },
+            };
+        });
     }
-    onTriggerOpenMonthsView() {
-        this.activeView.set(ArdCalendarView.Months);
+    onMouseMove() {
+        if (this._isUsingKeyboard())
+            return;
+        if (this.highlightedDay())
+            this.triggerHighlightDay.emit(null);
     }
-    onTriggerOpenYearsView() {
-        this.activeView.set(ArdCalendarView.Years);
+    ngAfterViewInit() {
+        if (!this.autoFocus())
+            return;
+        this.focus();
+        this.triggerHighlightDay.emit(1);
     }
-    _emitChange() {
-        this._onChangeRegistered?.(this.value());
+    focus() {
+        this.focusableElement().nativeElement.focus();
     }
-    ngOnChanges(changes) {
-        if (changes['UTC']) {
-            if (changes['UTC'].firstChange) {
-                this._UTCAfterInit.set(changes['UTC'].currentValue);
-            }
-            else {
-                console.error(`ARD-NF${this.componentId}4: <ard-${this.componentName}>'s [UTC] attribute should not be changed dynamically. This change will be ignored.`);
-            }
-        }
-        if (changes['value']) {
-            this.writeValue(changes['value'].currentValue);
+    isDaySelected(day) {
+        if (day instanceof Date)
+            day = day.getDate();
+        const isStartDateSelected = this.isDaySelectedStart(day);
+        if (this.rangeSelectionMode()) {
+            const isEndDateSelected = this.isDaySelectedEnd(day);
+            return isStartDateSelected || isEndDateSelected;
         }
+        return isStartDateSelected;
     }
-    _emitActivePageChange() {
-        this.activePageChange.emit({ year: this.activeYear(), month: this.activeMonth() });
+    isDaySelectedStart(day) {
+        if (day instanceof Date)
+            day = day.getDate();
+        const selected = this.selectedDate();
+        const { year, month, date } = getDateComponents(selected, this.UTC());
+        const isStartDateSelected = selected !== null && this.activeYear() === year && this.activeMonth() === month && day === date;
+        return isStartDateSelected;
     }
-    _emitHighlightedDate() {
-        const day = this.highlightedDay();
-        if (!day)
-            return;
-        const date = createDate(this.activeYear(), this.activeMonth(), day, this.UTC());
-        this.highlightDayEvent.emit(date);
+    isDaySelectedEnd(day) {
+        if (day instanceof Date)
+            day = day.getDate();
+        const selected = this.selectedDateEnd();
+        const { year, month, date } = getDateComponents(selected, this.UTC());
+        const isEndDateSelected = selected !== null && this.activeYear() === year && this.activeMonth() === month && day === date;
+        return isEndDateSelected;
     }
-    //! selecting days
-    isDayOutOfRange(day, month = this.activeMonth(), year = this.activeYear()) {
-        const dayDate = new Date(year, month, day);
-        return isDayOutOfRange(dayDate, this.min(), this.max());
+    isDayBetweenSelectedRange(day) {
+        if (!this.rangeSelectionMode())
+            return false;
+        if (day instanceof Date)
+            day = day.getDate();
+        const selected = this.selectedDate();
+        const selectedEnd = this.selectedDateEnd();
+        if (selected === null || selectedEnd === null || selected >= selectedEnd)
+            return false;
+        return this._isDayBetweenDates(day, selected, selectedEnd);
     }
-    selectDay(day) {
-        const startValue = this.selectionStart();
-        // reset selection
-        if (isNull(day)) {
-            if (!isDefined(startValue))
-                return;
-            this.selectionStart.set(null);
-            this.selectionEnd.set(null);
-            return;
-        }
+    isDayBetweenSelectedHighlighted(day) {
+        if (!this.rangeSelectionMode() || this.selectedDateEnd())
+            return false;
         if (day instanceof Date)
             day = day.getDate();
-        // check if day is out of range or filtered out
-        if ((day && this.isDayOutOfRange(day)) || this.isDayFilteredOut()(day))
+        const selected = this.selectedDate();
+        const highlightedEnd = this.highlightedDayDate();
+        if (selected === null || highlightedEnd === null || selected >= highlightedEnd)
+            return false;
+        return this._isDayBetweenDates(day, selected, highlightedEnd);
+    }
+    _isDayBetweenDates(day, startDate, endDate) {
+        const date = createDate(this.activeYear(), this.activeMonth(), day, this.UTC());
+        return date >= startDate && date <= endDate;
+    }
+    onCalendarDayMouseover(day) {
+        if (this._isUsingKeyboard())
             return;
-        // range selection logic
-        const endValue = this.selectionEnd();
-        const newDate = createDate(this.activeYear(), this.activeMonth(), day, this.UTC());
-        if (this.isRangeSelector) {
-            // select end date
-            if (isDefined(startValue) && !isDefined(endValue) && newDate > startValue) {
-                this.selectionEnd.set(newDate);
-                return;
-            }
-            // reset end date and start a new selection
-            this.selectionEnd.set(null);
-        }
-        // avoid setting the same date again
-        if (startValue &&
-            startValue.getFullYear() === this.activeYear() &&
-            startValue.getMonth() === this.activeMonth() &&
-            startValue.getDate() === day) {
+        if (this.disabled() || this.readOnly())
             return;
-        }
-        this.selectionStart.set(newDate);
-    }
-    selectCurrentlyHighlightedDay() {
-        if (!isDefined(this.highlightedDay()))
+        if (day && this.isDayFilteredOut()(day))
             return;
-        this.selectDay(this.highlightedDay());
+        this.triggerHighlightDay.emit(day);
     }
-    setHighlightedDay(day, month = this.activeMonth(), year = this.activeYear()) {
-        if (isNull(day)) {
-            this.highlightedDay.update(() => day);
-            this._emitHighlightedDate();
+    onCalendarDayClick(day) {
+        if (this.disabled() || this.readOnly())
             return;
-        }
-        const date = createDate(year, month, day, this.UTC());
-        const outOfRange = this.isDayOutOfRange(day, month, year);
-        if (outOfRange === -1) {
-            this._highlightMinDay();
+        if (day === null)
             return;
-        }
-        if (outOfRange === 1) {
-            this._highlightMaxDay();
+        if (this.isDayFilteredOut()(day))
             return;
-        }
-        this.highlightedDay.update(() => date.getDate());
-        if (date.getFullYear() !== this.activeYear()) {
-            this.activeYear.set(date.getFullYear());
-        }
-        if (date.getMonth() !== this.activeMonth()) {
-            this.activeMonth.set(date.getMonth());
-        }
-        this._emitHighlightedDate();
-        this._emitActivePageChange();
+        this.triggerHighlightDay.emit(day);
+        this.focus();
+        this.triggerSelectDay.emit(day);
     }
-    _highlightMinDay() {
-        const min = this.min();
-        if (!isDefined(min))
+    onDayGridFocus() {
+        if (this.disabled() || this.readOnly())
             return;
-        this.activeYear.set(min.getFullYear());
-        this.activeMonth.set(min.getMonth());
-        this.highlightedDay.set(min.getDate());
-        this._emitHighlightedDate();
-        this._emitActivePageChange();
+        this.triggerHighlightFirstDay.emit();
     }
-    _highlightMaxDay() {
-        const max = this.max();
-        if (!isDefined(max))
+    onDayGridBlur() {
+        if (this.disabled() || this.readOnly())
             return;
-        this.activeYear.set(max.getFullYear());
-        this.activeMonth.set(max.getMonth());
-        this.highlightedDay.set(max.getDate());
-        this._emitHighlightedDate();
-        this._emitActivePageChange();
-    }
-    highlightNextDay(offset = 1) {
-        const currentDay = this.highlightedDay();
-        const newDay = isDefined(currentDay) ? currentDay + offset : 1;
-        this.setHighlightedDay(newDay);
-    }
-    highlightPreviousDay(offset = 1) {
-        this.highlightNextDay(offset * -1);
-    }
-    highlightFirstDay() {
-        this.setHighlightedDay(1);
-    }
-    highlightLastDay() {
-        const daysInMonth = createDate(this.activeYear(), this.activeMonth() + 1, 0, this.UTC()).getDate();
-        this.setHighlightedDay(daysInMonth);
-    }
-    highlightSameDayNextMonth() {
-        const month = this.activeMonth();
-        const year = this.activeYear();
-        const newMonth = month + 1;
-        const newYear = year + Math.floor(newMonth / 12);
-        this.setHighlightedDay(this.highlightedDay(), newMonth % 12, newYear);
-    }
-    highlightSameDayPreviousMonth() {
-        const month = this.activeMonth();
-        const year = this.activeYear();
-        const newMonth = month - 1;
-        const newYear = year + Math.floor(newMonth / 12);
-        this.setHighlightedDay(this.highlightedDay(), newMonth % 12, newYear);
-    }
-    highlightSameDayNextYear() {
-        this.setHighlightedDay(this.highlightedDay(), this.activeMonth(), this.activeYear() + 1);
-    }
-    highlightSameDayPreviousYear() {
-        this.setHighlightedDay(this.highlightedDay(), this.activeMonth(), this.activeYear() - 1);
-    }
-    //! selecting months
-    isMonthSelected(month) {
-        if (month instanceof Date)
-            month = month.getMonth();
-        return (this.selectionStart() !== null &&
-            this.activeYear() === this.selectionStart()?.getFullYear() &&
-            month === this.selectionStart()?.getMonth());
-    }
-    isMonthOutOfRange(month, year = this.activeYear()) {
-        return isMonthOutOfRange(month, year, this.min(), this.max());
-    }
-    changeMonth(newMonth) {
-        if (isNull(newMonth)) {
-            this.activeMonth.set(this.TODAY().getMonth());
-            this._emitActivePageChange();
-            return true;
-        }
-        if (this.isMonthOutOfRange(newMonth))
-            return false;
-        if (newMonth > 11) {
-            this.activeYear.update(v => v + 1);
-            this.activeMonth.set(0);
-        }
-        else if (newMonth < 0) {
-            this.activeYear.update(v => v - 1);
-            this.activeMonth.set(11);
-        }
-        else {
-            this.activeMonth.set(newMonth);
-        }
-        this._emitActivePageChange();
-        return true;
-    }
-    selectMonth(newMonth) {
-        if (isNull(newMonth) || this.isMonthOutOfRange(newMonth))
-            return;
-        const wasSuccessful = this.changeMonth(newMonth);
-        if (!wasSuccessful)
-            return;
-        this.activeView.set(ArdCalendarView.Days);
-        this.monthSelect.emit(newMonth);
-    }
-    selectCurrentlyHighlightedMonth() {
-        if (!isDefined(this.highlightedMonth()))
-            return;
-        this.selectMonth(this.highlightedMonth());
-    }
-    setHighlightedMonth(month, year = this.activeYear()) {
-        if (isNull(month)) {
-            this._highlightedMonth.update(() => month);
-            return;
-        }
-        const date = createDate(year, month, 15, this.UTC());
-        const outOfRange = this.isMonthOutOfRange(month, year);
-        if (outOfRange === -1) {
-            this._highlightMinMonth();
-            return;
-        }
-        if (outOfRange === 1) {
-            this._highlightMaxMonth();
-            return;
-        }
-        this._highlightedMonth.update(() => date.getMonth());
-        if (date.getFullYear() !== this.activeYear()) {
-            this.activeYear.set(date.getFullYear());
-            this._emitActivePageChange();
-        }
+        this.triggerHighlightDay.emit(null);
     }
-    _highlightMinMonth() {
-        const min = this.min();
-        if (!isDefined(min))
+    onDayGridClick() {
+        if (this.disabled() || this.readOnly())
             return;
-        this.activeYear.set(min.getFullYear());
-        this._emitActivePageChange();
-        this._highlightedMonth.set(min.getMonth());
-    }
-    _highlightMaxMonth() {
-        const max = this.max();
-        if (!isDefined(max))
+        if (this.highlightedDay() !== null)
             return;
-        this.activeYear.set(max.getFullYear());
-        this._emitActivePageChange();
-        this._highlightedMonth.set(max.getMonth());
-    }
-    highlightNextMonth(offset = 1) {
-        const currentMonth = this.highlightedMonth();
-        const newMonth = isDefined(currentMonth) ? currentMonth + offset : 0;
-        this.setHighlightedMonth(newMonth);
-    }
-    highlightPreviousMonth(offset = 1) {
-        this.highlightNextMonth(offset * -1);
-    }
-    highlightFirstMonth() {
-        this.setHighlightedMonth(0);
-    }
-    highlightLastMonth() {
-        this.setHighlightedMonth(11);
-    }
-    highlightSameMonthNextYear(multiple) {
-        this.setHighlightedMonth(this.highlightedMonth(), this.activeYear() + (multiple ? 10 : 1));
-    }
-    highlightSameMonthPreviousYear(multiple) {
-        this.setHighlightedMonth(this.highlightedMonth(), this.activeYear() - (multiple ? 10 : 1));
-    }
-    //! selecting years
-    isYearSelected(year) {
-        if (year instanceof Date)
-            year = year.getFullYear();
-        return this.selectionStart() !== null && year === this.selectionStart()?.getFullYear();
-    }
-    isYearOutOfRange(year) {
-        return isYearOutOfRange(year, this.min(), this.max());
-    }
-    changeYear(year) {
-        if (isNull(year)) {
-            this.activeYear.set(this.TODAY().getFullYear());
-            this._emitActivePageChange();
-            return true;
-        }
-        if (this.isYearOutOfRange(year))
-            return false;
-        this.activeYear.set(year);
-        this._emitActivePageChange();
-        return true;
+        this.triggerHighlightFirstDay.emit();
     }
-    selectYear(year) {
-        if (isNull(year))
-            return;
-        if (year instanceof Date)
-            year = year.getFullYear();
-        const wasSuccessful = this.changeYear(year);
-        if (!wasSuccessful)
-            return;
-        this.activeView.set(ArdCalendarView.Months);
-        this.yearSelect.emit(year);
+    //! helpers
+    isDayToday(day) {
+        return this.activeYear() === TODAY$2.getFullYear() && this.activeMonth() === TODAY$2.getMonth() && day === TODAY$2.getDate();
     }
-    selectCurrentlyHighlightedYear() {
-        if (!isDefined(this.highlightedYear()))
-            return;
-        this.selectYear(this.highlightedYear());
+    isMonthOutOfRange(month) {
+        return isMonthOutOfRange(month, this.activeYear(), this.min(), this.max());
     }
-    setHighlightedYear(year) {
-        if (isNull(year)) {
-            this.__highlightedYear.update(() => year);
-            return;
-        }
-        const date = createDate(year, 0, 1, this.UTC());
-        const outOfRange = this.isYearOutOfRange(year);
-        if (outOfRange === -1) {
-            this._highlightMinYear();
-            return;
-        }
-        if (outOfRange === 1) {
-            this._highlightMaxYear();
+    //! keyboard controls
+    onMainGridKeydown(event) {
+        if (this.disabled() || this.readOnly())
             return;
+        switch (event.code) {
+            case 'Space':
+            case 'Enter':
+                this._onEnterPress(event);
+                break;
+            case 'ArrowUp':
+                this._onArrowUpPress(event);
+                break;
+            case 'ArrowDown':
+                this._onArrowDownPress(event);
+                break;
+            case 'ArrowLeft':
+                this._onArrowLeftPress(event);
+                break;
+            case 'ArrowRight':
+                this._onArrowRightPress(event);
+                break;
+            case 'Home':
+                this._onHomePress(event);
+                break;
+            case 'End':
+                this._onEndPress(event);
+                break;
+            case 'PageUp':
+                this._onPageUpPress(event);
+                break;
+            case 'PageDown':
+                this._onPageDownPress(event);
+                break;
+            default:
+                return;
         }
-        const newYear = date.getFullYear();
-        this.__highlightedYear.update(() => newYear);
-        if (newYear < this.currentYearRangeStart() || newYear >= this.currentYearRangeStart() + this.multipleYearPageSize()) {
-            // round the offset away from zero: 0.1 -> 1, -0.1 -> -1
-            // this is to ensure the range start is always shifted by n years
-            const offset = roundFromZero((newYear - this.currentYearRangeStart()) / this.multipleYearPageSize());
-            this.currentYearRangeStart.update(v => v + offset * this.multipleYearPageSize());
-        }
-    }
-    changeYearsViewPage(offset) {
-        const newYearRangeStart = this.currentYearRangeStart() + offset * this.multipleYearPageSize();
-        this.currentYearRangeStart.set(newYearRangeStart);
-    }
-    _highlightMinYear() {
-        const min = this.min();
-        if (!isDefined(min))
-            return;
-        this.__highlightedYear.set(min.getFullYear());
     }
-    _highlightMaxYear() {
-        const max = this.max();
-        if (!isDefined(max))
-            return;
-        this.__highlightedYear.set(max.getFullYear());
+    //select currently selected entry
+    _onEnterPress(event) {
+        event.preventDefault();
+        this.triggerSelectDay.emit(this.highlightedDay());
     }
-    highlightNextYear(offset = 1) {
-        const currentYear = this.highlightedYear();
-        const newYear = isDefined(currentYear) ? currentYear + offset : null;
-        this.setHighlightedYear(newYear);
+    //highlight the entry one line below
+    _onArrowDownPress(event) {
+        event.preventDefault();
+        this.triggerHighlightNextDay.emit(7);
     }
-    highlightPreviousYear(offset = 1) {
-        this.highlightNextYear(offset * -1);
+    //highlight the entry one line above
+    _onArrowUpPress(event) {
+        event.preventDefault();
+        this.triggerHighlightPreviousDay.emit(7);
     }
-    highlightFirstYear() {
-        this.setHighlightedYear(this.currentYearRangeStart());
+    //highlight next entry
+    _onArrowRightPress(event) {
+        event.preventDefault();
+        this.triggerHighlightNextDay.emit(1);
     }
-    highlightLastYear() {
-        this.setHighlightedYear(this.currentYearRangeStart() + this.multipleYearPageSize() - 1);
+    //highlight previous entry
+    _onArrowLeftPress(event) {
+        event.preventDefault();
+        this.triggerHighlightPreviousDay.emit(1);
     }
-    highlightSameYearNextPage(multiple) {
-        const year = this.highlightedYear() ?? this.currentYearRangeStart();
-        this.setHighlightedYear(year + (multiple ? this.multipleYearPageChangeModifier() : 1) * this.multipleYearPageSize());
+    //highlight first entry on the page
+    _onHomePress(event) {
+        event.preventDefault();
+        this.triggerHighlightFirstDay.emit();
     }
-    highlightSameYearPreviousPage(multiple) {
-        const year = this.highlightedYear() ?? this.currentYearRangeStart();
-        this.setHighlightedYear(year - (multiple ? this.multipleYearPageChangeModifier() : 1) * this.multipleYearPageSize());
+    //highlight last entry on the page
+    _onEndPress(event) {
+        event.preventDefault();
+        this.triggerHighlightLastDay.emit();
     }
-    onDocumentMousemove() {
-        this._isUsingKeyboard.set(false);
+    //alone: highlight same entry on the next page
+    //with alt: highlight same entry multiple pages after (12 pages)
+    _onPageDownPress(event) {
+        event.preventDefault();
+        this.triggerHighlightSameDayNextPage.emit(event.altKey);
     }
-    onDocumentKeydown() {
-        this._isUsingKeyboard.set(true);
+    //alone: highlight same entry on the previous page
+    //with alt: highlight same entry multiple pages before (12 pages)
+    _onPageUpPress(event) {
+        event.preventDefault();
+        this.triggerHighlightSameDayPreviousPage.emit(event.altKey);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractCalendar, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _AbstractCalendar, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: true, isRequired: false, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: false, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: false, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: false, transformFunction: null }, multipleYearPageChangeModifier: { classPropertyName: "multipleYearPageChangeModifier", publicName: "multipleYearPageChangeModifier", isSignal: true, isRequired: false, transformFunction: null }, multipleYearOffset: { classPropertyName: "multipleYearOffset", publicName: "multipleYearOffset", isSignal: true, isRequired: false, transformFunction: null }, multipleYearPageSize: { classPropertyName: "multipleYearPageSize", publicName: "multipleYearPageSize", isSignal: true, isRequired: false, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, staticHeight: { classPropertyName: "staticHeight", publicName: "staticHeight", isSignal: true, isRequired: false, transformFunction: null }, hideFloatingMonth: { classPropertyName: "hideFloatingMonth", publicName: "hideFloatingMonth", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, highlightedDay: { classPropertyName: "highlightedDay", publicName: "highlightedDay", isSignal: true, isRequired: false, transformFunction: null }, daysViewHeaderDateFormat: { classPropertyName: "daysViewHeaderDateFormat", publicName: "daysViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, weekdayDateFormat: { classPropertyName: "weekdayDateFormat", publicName: "weekdayDateFormat", isSignal: true, isRequired: false, transformFunction: null }, weekdayTitleDateFormat: { classPropertyName: "weekdayTitleDateFormat", publicName: "weekdayTitleDateFormat", isSignal: true, isRequired: false, transformFunction: null }, floatingMonthDateFormat: { classPropertyName: "floatingMonthDateFormat", publicName: "floatingMonthDateFormat", isSignal: true, isRequired: false, transformFunction: null }, floatingMonthTitleDateFormat: { classPropertyName: "floatingMonthTitleDateFormat", publicName: "floatingMonthTitleDateFormat", isSignal: true, isRequired: false, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", isSignal: true, isRequired: false, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", isSignal: true, isRequired: false, transformFunction: null }, dayDateFormat: { classPropertyName: "dayDateFormat", publicName: "dayDateFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeView: "activeViewChange", activeYear: "activeYearChange", activeMonth: "activeMonthChange", activePageChange: "activePageChange", yearSelect: "yearSelect", monthSelect: "monthSelect", highlightedDay: "highlightedDayChange", highlightDayEvent: "highlightDay" }, host: { listeners: { "document:mousemove": "onDocumentMousemove()", "document:keydown": "onDocumentKeydown()" } }, queries: [{ propertyName: "templateRepository", first: true, predicate: _CalendarTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "yearsViewHeaderTemplate", first: true, predicate: ArdCalendarYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthsViewHeaderTemplate", first: true, predicate: ArdCalendarMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "daysViewHeaderTemplate", first: true, predicate: ArdCalendarDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "floatingMonthTemplate", first: true, predicate: ArdCalendarFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearTemplate", first: true, predicate: ArdCalendarYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthTemplate", first: true, predicate: ArdCalendarMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dayTemplate", first: true, predicate: ArdCalendarDayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "weekdayTemplate", first: true, predicate: ArdCalendarWeekdayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DaysViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DaysViewComponent, isStandalone: false, selector: "ard-days-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, isDayFilteredOut: { classPropertyName: "isDayFilteredOut", publicName: "isDayFilteredOut", isSignal: true, isRequired: true, transformFunction: null }, highlightedDay: { classPropertyName: "highlightedDay", publicName: "highlightedDay", isSignal: true, isRequired: true, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: true, transformFunction: null }, staticHeight: { classPropertyName: "staticHeight", publicName: "staticHeight", isSignal: true, isRequired: true, transformFunction: null }, hideFloatingMonth: { classPropertyName: "hideFloatingMonth", publicName: "hideFloatingMonth", isSignal: true, isRequired: true, transformFunction: null }, daysViewHeaderTemplate: { classPropertyName: "daysViewHeaderTemplate", publicName: "daysViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthTemplate: { classPropertyName: "floatingMonthTemplate", publicName: "floatingMonthTemplate", isSignal: true, isRequired: true, transformFunction: null }, weekdayTemplate: { classPropertyName: "weekdayTemplate", publicName: "weekdayTemplate", isSignal: true, isRequired: true, transformFunction: null }, dayTemplate: { classPropertyName: "dayTemplate", publicName: "dayTemplate", isSignal: true, isRequired: true, transformFunction: null }, daysViewHeaderDateFormat: { classPropertyName: "daysViewHeaderDateFormat", publicName: "daysViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, weekdayDateFormat: { classPropertyName: "weekdayDateFormat", publicName: "weekdayDateFormat", isSignal: true, isRequired: true, transformFunction: null }, weekdayTitleDateFormat: { classPropertyName: "weekdayTitleDateFormat", publicName: "weekdayTitleDateFormat", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthDateFormat: { classPropertyName: "floatingMonthDateFormat", publicName: "floatingMonthDateFormat", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthTitleDateFormat: { classPropertyName: "floatingMonthTitleDateFormat", publicName: "floatingMonthTitleDateFormat", isSignal: true, isRequired: true, transformFunction: null }, dayDateFormat: { classPropertyName: "dayDateFormat", publicName: "dayDateFormat", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenMonthsView: "triggerOpenMonthsView", triggerSelectDay: "triggerSelectDay", triggerChangeMonth: "triggerChangeMonth", triggerChangeYear: "triggerChangeYear", triggerHighlightDay: "triggerHighlightDay", triggerHighlightNextDay: "triggerHighlightNextDay", triggerHighlightPreviousDay: "triggerHighlightPreviousDay", triggerHighlightFirstDay: "triggerHighlightFirstDay", triggerHighlightLastDay: "triggerHighlightLastDay", triggerHighlightSameDayPreviousPage: "triggerHighlightSameDayPreviousPage", triggerHighlightSameDayNextPage: "triggerHighlightSameDayNextPage", focusEvent: "focus", blurEvent: "blur" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-days-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultDaysViewHeaderTemplate\r\n        let-currDate\r\n        let-nextMonth=\"nextMonth\"\r\n        let-prevMonth=\"prevMonth\"\r\n        let-canGoToNextMonth=\"canGoToNextPage\"\r\n        let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n        let-hideNextPageButton=\"hideNextPageButton\"\r\n        let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n        let-openYearsView=\"openYearsView\"\r\n        let-onFocus=\"onFocus\"\r\n        let-onBlur=\"onBlur\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <div>\r\n            @if (!hidePreviousPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"prevMonth()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToPreviousMonth\"\r\n              >\r\n                <ard-icon>chevron_left</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            variant=\"pill\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openYearsView()\"\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n          >\r\n            {{ currDate | date: this.daysViewHeaderDateFormat() | uppercase }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div>\r\n            @if (!hideNextPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"nextMonth()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToNextMonth\"\r\n              >\r\n                <ard-icon>chevron_right</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"daysViewHeaderTemplate() || defaultDaysViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"daysViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div class=\"ard-calendar__weekdays\">\r\n    <ng-template\r\n      #defaultWeekdayTemplate\r\n      let-date\r\n    >\r\n      <div\r\n        class=\"ard-calendar__weekday\"\r\n        [title]=\"date | date: weekdayTitleDateFormat() | titlecase\"\r\n      >\r\n        {{ date | date: weekdayDateFormat() | uppercase }}\r\n      </div>\r\n    </ng-template>\r\n    @for (weekdayIndex of weekdayArray(); track weekdayIndex) {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"weekdayTemplate() || defaultWeekdayTemplate\"\r\n        [ngTemplateOutletContext]=\"weekdayContext()(weekdayIndex)\"\r\n      />\r\n    }\r\n  </div>\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__days-grid\"\r\n    [class.ard-reserve-top-row]=\"reserveTopRow()\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onDayGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onDayGridBlur()\"\r\n    (click)=\"onDayGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @if (!hideFloatingMonth()) {\r\n      <div class=\"ard-calendar__floating-month\">\r\n        <ng-template\r\n          #defaultFloatingMonthTemplate\r\n          let-date\r\n        >\r\n          <div [title]=\"date | date: floatingMonthTitleDateFormat() | titlecase\">\r\n            {{ date | date: floatingMonthDateFormat() | uppercase }}\r\n          </div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n          [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n        />\r\n      </div>\r\n    }\r\n    @for (week of activeCalendarData().array; track $index) {\r\n      @for (day of week; track day ? day : activeCalendarData().leadingSpaces - $index) {\r\n        @if (day === null) {\r\n          <div class=\"ard-calendar__entry ard-calendar__entry-empty\"></div>\r\n        } @else {\r\n          <div\r\n            class=\"ard-calendar__entry\"\r\n            [class.ard-calendar__entry-highlighted]=\"highlightedDay() === day.value\"\r\n            [class.ard-calendar__entry-highlighted-in-range]=\"isDayBetweenSelectedHighlighted(day.value)\"\r\n            [class.ard-calendar__entry-disabled]=\"day.disabled || isDayFilteredOut()(day.value)\"\r\n            [class.ard-calendar__entry-selected]=\"isDaySelected(day.value)\"\r\n            [class.ard-calendar__entry-selected-start]=\"isDaySelectedStart(day.value)\"\r\n            [class.ard-calendar__entry-selected-end]=\"isDaySelectedEnd(day.value)\"\r\n            [class.ard-calendar__entry-selected-in-range]=\"isDayBetweenSelectedRange(day.value)\"\r\n            [class.ard-calendar-today]=\"isDayToday(day.value)\"\r\n            (click)=\"onCalendarDayClick(day.value)\"\r\n            (mousemove)=\"$event.stopPropagation()\"\r\n            (mouseover)=\"onCalendarDayMouseover(day.value)\"\r\n            role=\"gridcell\"\r\n          >\r\n            <div class=\"ard-calendar__entry-button\">\r\n              <div class=\"ard-range-overlay\"></div>\r\n              <div class=\"ard-focus-overlay\"></div>\r\n              <div class=\"ard-button-content\">\r\n                <ng-template\r\n                  #defaultDayTemplate\r\n                  let-date=\"date\"\r\n                >\r\n                  {{ date | date: dayDateFormat() }}\r\n                </ng-template>\r\n                <ng-template\r\n                  [ngTemplateOutlet]=\"dayTemplate() || defaultDayTemplate\"\r\n                  [ngTemplateOutletContext]=\"dayContext()(day.value)\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-days-view{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractCalendar, decorators: [{
-            type: Directive,
-            args: [{}]
-        }], ctorParameters: () => [{ type: undefined }], propDecorators: { onDocumentMousemove: [{
-                type: HostListener,
-                args: ['document:mousemove']
-            }], onDocumentKeydown: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DaysViewComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'ard-days-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-days-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultDaysViewHeaderTemplate\r\n        let-currDate\r\n        let-nextMonth=\"nextMonth\"\r\n        let-prevMonth=\"prevMonth\"\r\n        let-canGoToNextMonth=\"canGoToNextPage\"\r\n        let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n        let-hideNextPageButton=\"hideNextPageButton\"\r\n        let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n        let-openYearsView=\"openYearsView\"\r\n        let-onFocus=\"onFocus\"\r\n        let-onBlur=\"onBlur\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <div>\r\n            @if (!hidePreviousPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"prevMonth()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToPreviousMonth\"\r\n              >\r\n                <ard-icon>chevron_left</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            variant=\"pill\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openYearsView()\"\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n          >\r\n            {{ currDate | date: this.daysViewHeaderDateFormat() | uppercase }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div>\r\n            @if (!hideNextPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"nextMonth()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToNextMonth\"\r\n              >\r\n                <ard-icon>chevron_right</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"daysViewHeaderTemplate() || defaultDaysViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"daysViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div class=\"ard-calendar__weekdays\">\r\n    <ng-template\r\n      #defaultWeekdayTemplate\r\n      let-date\r\n    >\r\n      <div\r\n        class=\"ard-calendar__weekday\"\r\n        [title]=\"date | date: weekdayTitleDateFormat() | titlecase\"\r\n      >\r\n        {{ date | date: weekdayDateFormat() | uppercase }}\r\n      </div>\r\n    </ng-template>\r\n    @for (weekdayIndex of weekdayArray(); track weekdayIndex) {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"weekdayTemplate() || defaultWeekdayTemplate\"\r\n        [ngTemplateOutletContext]=\"weekdayContext()(weekdayIndex)\"\r\n      />\r\n    }\r\n  </div>\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__days-grid\"\r\n    [class.ard-reserve-top-row]=\"reserveTopRow()\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onDayGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onDayGridBlur()\"\r\n    (click)=\"onDayGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @if (!hideFloatingMonth()) {\r\n      <div class=\"ard-calendar__floating-month\">\r\n        <ng-template\r\n          #defaultFloatingMonthTemplate\r\n          let-date\r\n        >\r\n          <div [title]=\"date | date: floatingMonthTitleDateFormat() | titlecase\">\r\n            {{ date | date: floatingMonthDateFormat() | uppercase }}\r\n          </div>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n          [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n        />\r\n      </div>\r\n    }\r\n    @for (week of activeCalendarData().array; track $index) {\r\n      @for (day of week; track day ? day : activeCalendarData().leadingSpaces - $index) {\r\n        @if (day === null) {\r\n          <div class=\"ard-calendar__entry ard-calendar__entry-empty\"></div>\r\n        } @else {\r\n          <div\r\n            class=\"ard-calendar__entry\"\r\n            [class.ard-calendar__entry-highlighted]=\"highlightedDay() === day.value\"\r\n            [class.ard-calendar__entry-highlighted-in-range]=\"isDayBetweenSelectedHighlighted(day.value)\"\r\n            [class.ard-calendar__entry-disabled]=\"day.disabled || isDayFilteredOut()(day.value)\"\r\n            [class.ard-calendar__entry-selected]=\"isDaySelected(day.value)\"\r\n            [class.ard-calendar__entry-selected-start]=\"isDaySelectedStart(day.value)\"\r\n            [class.ard-calendar__entry-selected-end]=\"isDaySelectedEnd(day.value)\"\r\n            [class.ard-calendar__entry-selected-in-range]=\"isDayBetweenSelectedRange(day.value)\"\r\n            [class.ard-calendar-today]=\"isDayToday(day.value)\"\r\n            (click)=\"onCalendarDayClick(day.value)\"\r\n            (mousemove)=\"$event.stopPropagation()\"\r\n            (mouseover)=\"onCalendarDayMouseover(day.value)\"\r\n            role=\"gridcell\"\r\n          >\r\n            <div class=\"ard-calendar__entry-button\">\r\n              <div class=\"ard-range-overlay\"></div>\r\n              <div class=\"ard-focus-overlay\"></div>\r\n              <div class=\"ard-button-content\">\r\n                <ng-template\r\n                  #defaultDayTemplate\r\n                  let-date=\"date\"\r\n                >\r\n                  {{ date | date: dayDateFormat() }}\r\n                </ng-template>\r\n                <ng-template\r\n                  [ngTemplateOutlet]=\"dayTemplate() || defaultDayTemplate\"\r\n                  [ngTemplateOutletContext]=\"dayContext()(day.value)\"\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-days-view{display:block}}\n"] }]
+        }], propDecorators: { onMouseMove: [{
                 type: HostListener,
-                args: ['document:keydown']
+                args: ['mousemove']
             }] } });
 
-const _calendarDefaults = {
-    ..._formFieldComponentDefaults,
-    color: ComponentColor.Primary,
-    activeView: ArdCalendarView.Days,
-    activeYear: new Date().getFullYear(),
-    activeMonth: new Date().getMonth(),
-    firstWeekday: 1,
-    multipleYearPageChangeModifier: 5,
-    multipleYearOffset: 2,
-    multipleYearPageSize: 24,
-    staticHeight: false,
-    hideFloatingMonth: false,
-    autoFocus: false,
-    multiCalendarLocation: ArdMultiCalendarLocation.Only,
-    min: null,
-    max: null,
-    filter: null,
-    UTC: false,
-    // template customizations
-    daysViewHeaderDateFormat: 'MMM yyyy',
-    yearsViewHeaderDateFormat: 'yyyy',
-    monthsViewHeaderDateFormat: 'yyyy',
-    weekdayDateFormat: 'EEEEE',
-    weekdayTitleDateFormat: 'EEEE',
-    floatingMonthDateFormat: 'LLL',
-    floatingMonthTitleDateFormat: 'LLLL',
-    yearDateFormat: 'yyyy',
-    monthDateFormat: 'MMM',
-    dayDateFormat: 'd',
-};
-const ARD_CALENDAR_DEFAULTS = new InjectionToken('ard-calendar-defaults', {
-    factory: () => ({
-        ..._calendarDefaults,
-    }),
-});
-function provideCalendarDefaults(config) {
-    return { provide: ARD_CALENDAR_DEFAULTS, useValue: { ..._calendarDefaults, ...config } };
-}
-
-const ARD_ICON_BUTTON_DEFAULTS = new InjectionToken('ard-icon-button-defaults', {
-    factory: () => ({ ..._simpleButtonDefaults, ..._focusableComponentDefaults }),
-});
-function provideIconButtonDefaults(config) {
-    return { provide: ARD_ICON_BUTTON_DEFAULTS, useValue: { ..._simpleButtonDefaults, ..._focusableComponentDefaults, ...config } };
+function getCalendarYearsArray(startYear, yearCount, min, max) {
+    return new Array(yearCount).fill(startYear).map((v, i) => ({ value: v + i, valueDate: new Date(v + i, 1, 1), disabled: !!isYearOutOfRange(v + i, min, max) }));
 }
-
-class ArdiumIconButtonComponent extends _FocusableComponentBase {
-    constructor(defaults) {
-        super(defaults);
-        this.wrapperClasses = input('');
-        this.type = input(this._DEFAULTS.type);
-        this.ariaLabel = input('');
-        //! button settings
-        this.color = input(this._DEFAULTS.color);
-        this.lightColoring = input(this._DEFAULTS.lightColoring, {
-            transform: v => coerceBooleanProperty(v),
-        });
-        this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
-        this.pointerEventsWhenDisabled = input(this._DEFAULTS.pointerEventsWhenDisabled, {
-            transform: v => coerceBooleanProperty(v),
-        });
-        this.ngClasses = computed(() => [
-            'ard-appearance-transparent',
-            `ard-color-${this.disabled() ? ComponentColor.None : this.color()}`,
-            this.lightColoring() ? `ard-light-coloring` : '',
-            this.compact() ? 'ard-compact' : '',
-        ].join(' '));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumIconButtonComponent, deps: [{ token: ARD_ICON_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumIconButtonComponent, isStandalone: false, selector: "ard-icon-button", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lightColoring: { classPropertyName: "lightColoring", publicName: "lightColoring", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, pointerEventsWhenDisabled: { classPropertyName: "pointerEventsWhenDisabled", publicName: "pointerEventsWhenDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-icon-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["@layer ard-ui{ard-icon-button{display:block}.ard-icon-button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-icon-button .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+function isYearOutOfRange(year, min, max) {
+    const dateForMinComparison = new Date(year, 11, 31);
+    if (isDefined(min) && dateForMinComparison < min)
+        return -1;
+    const dateForMaxComparison = new Date(year, 0, 1);
+    if (isDefined(max) && dateForMaxComparison > max)
+        return 1;
+    return 0;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumIconButtonComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'ard-icon-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.ard-button-with-pointer-events-when-disabled]': 'pointerEventsWhenDisabled()',
-                    }, template: "<button\r\n  class=\"ard-icon-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["@layer ard-ui{ard-icon-button{display:block}.ard-icon-button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-icon-button .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ARD_ICON_BUTTON_DEFAULTS]
-                }] }] });
 
-const TODAY$2 = new Date();
-class DaysViewComponent {
+const TODAY$1 = new Date();
+class MonthsViewComponent {
     constructor() {
         this.tabIndex = input.required();
         this.readOnly = input.required();
         this.disabled = input.required();
         this.autoFocus = input.required();
         this._isUsingKeyboard = input.required();
-        //! active year/month
+        this.color = input.required();
         this.activeYear = input.required();
         this.activeMonth = input.required();
         this.selectedDate = input.required();
-        this.selectedDateEnd = input.required();
-        this.rangeSelectionMode = input.required();
-        this.UTC = input.required();
-        this.min = input.required();
-        this.max = input.required();
-        this.multiCalendarLocation = input.required();
-        this.isDayFilteredOut = input.required();
-        this.highlightedDay = input.required();
-        this.highlightedDayDate = computed(() => {
-            const day = this.highlightedDay();
-            if (day === null)
-                return null;
-            return createDate(this.activeYear(), this.activeMonth(), day, this.UTC());
-        });
-        //! focusing
-        this.focusableElement = viewChild.required('focusableElement');
-        //! calendar data
-        this.firstWeekday = input.required();
-        this.staticHeight = input.required();
-        this.hideFloatingMonth = input.required();
-        this.activeCalendarData = computed(() => getCalendarDayData(this.activeYear(), this.activeMonth(), this.firstWeekday(), this.min(), this.max(), this.staticHeight(), !this.hideFloatingMonth()));
-        this.reserveTopRow = computed(() => !this.hideFloatingMonth() && this.activeCalendarData().leadingSpaces < 3);
-        this.weekdayArray = computed(() => getCalendarWeekdayArray(this.firstWeekday()));
+        this.selectedDateEnd = input.required();
+        this.rangeSelectionMode = input.required();
+        this.UTC = input.required();
+        this.min = input.required();
+        this.max = input.required();
+        this.multiCalendarLocation = input.required();
+        this.monthsArray = computed(() => getCalendarMonthsArray(this.activeYear(), this.min(), this.max()));
         this.currentAriaLabel = computed(() => {
-            const day = this.highlightedDay();
-            if (day === null) {
+            const month = this.highlightedMonth();
+            if (month === null) {
                 return '';
             }
-            return new Date(this.activeYear(), this.activeMonth(), day).toLocaleDateString(undefined, {
-                weekday: 'long',
+            return new Date(this.activeYear(), month, 1).toLocaleDateString(undefined, {
                 year: 'numeric',
                 month: 'long',
-                day: 'numeric',
             });
         });
         //! outputs
         this.triggerOpenYearsView = output();
-        this.triggerOpenMonthsView = output();
-        this.triggerSelectDay = output();
-        this.triggerChangeMonth = output();
-        this.triggerChangeYear = output();
-        this.triggerHighlightDay = output();
-        this.triggerHighlightNextDay = output();
-        this.triggerHighlightPreviousDay = output();
-        this.triggerHighlightFirstDay = output();
-        this.triggerHighlightLastDay = output();
-        this.triggerHighlightSameDayPreviousPage = output();
-        this.triggerHighlightSameDayNextPage = output();
+        this.triggerOpenDaysView = output();
         this.focusEvent = output({ alias: 'focus' });
         this.blurEvent = output({ alias: 'blur' });
+        this.triggerSelectMonth = output();
+        this.triggeChangeYear = output();
+        this.triggerHighlightMonth = output();
+        this.triggerHighlightNextMonth = output();
+        this.triggerHighlightPreviousMonth = output();
+        this.triggerHighlightFirstMonth = output();
+        this.triggerHighlightLastMonth = output();
+        this.triggerHighlightSameMonthPreviousPage = output();
+        this.triggerHighlightSameMonthNextPage = output();
+        //! calendar entry hover & click
+        this.highlightedMonth = input.required();
+        this.highlightedMonthDate = computed(() => {
+            const month = this.highlightedMonth();
+            if (isNull(month))
+                return null;
+            return new Date(this.activeYear(), month, 2);
+        });
+        //! focusing
+        this.focusableElement = viewChild.required('focusableElement');
         //! templates
-        this.daysViewHeaderTemplate = input.required();
-        this.floatingMonthTemplate = input.required();
-        this.weekdayTemplate = input.required();
-        this.dayTemplate = input.required();
+        this.monthsViewHeaderTemplate = input.required();
+        this.monthTemplate = input.required();
         //! template customizations
-        this.daysViewHeaderDateFormat = input.required(); // 'MMM YYYY'
-        this.weekdayDateFormat = input.required(); // 'EEEEE'
-        this.weekdayTitleDateFormat = input.required(); // 'EEEE'
-        this.floatingMonthDateFormat = input.required(); // 'LLL'
-        this.floatingMonthTitleDateFormat = input.required(); // 'LLLL'
-        this.dayDateFormat = input.required(); // 'D'
+        this.monthsViewHeaderDateFormat = input.required(); // 'YYYY'
+        this.monthDateFormat = input.required(); // 'MMM'
         //! template contexts
-        this.daysViewHeaderContext = computed(() => ({
-            nextMonth: () => {
-                this.triggerChangeMonth.emit(this.activeMonth() + 1);
-            },
-            prevMonth: () => {
-                this.triggerChangeMonth.emit(this.activeMonth() - 1);
-            },
-            nextYear: () => {
-                this.triggerChangeYear.emit(this.activeYear() + 1);
+        this.monthsViewHeaderContext = computed(() => ({
+            nextPage: () => {
+                this.triggeChangeYear.emit(this.activeYear() + 1);
             },
-            prevYear: () => {
-                this.triggerChangeYear.emit(this.activeYear() - 1);
+            prevPage: () => {
+                this.triggeChangeYear.emit(this.activeYear() - 1);
             },
             openYearsView: () => {
                 this.triggerOpenYearsView.emit();
             },
-            openMonthsView: () => {
-                this.triggerOpenMonthsView.emit();
+            openDaysView: () => {
+                this.triggerOpenDaysView.emit();
             },
-            canGoToNextPage: !this.isMonthOutOfRange(this.activeMonth() + 1),
-            canGoToPreviousPage: !this.isMonthOutOfRange(this.activeMonth() - 1),
+            onFocus: (event) => {
+                this.focusEvent.emit(event);
+            },
+            onBlur: (event) => {
+                this.blurEvent.emit(event);
+            },
+            canGoToNextPage: !this.isYearOutOfRange(this.activeYear() + 1),
+            canGoToPreviousPage: !this.isYearOutOfRange(this.activeYear() - 1),
             hideNextPageButton: this.multiCalendarLocation() === ArdMultiCalendarLocation.Left ||
                 this.multiCalendarLocation() === ArdMultiCalendarLocation.Inner,
             hidePreviousPageButton: this.multiCalendarLocation() === ArdMultiCalendarLocation.Right ||
                 this.multiCalendarLocation() === ArdMultiCalendarLocation.Inner,
             year: this.activeYear(),
-            month: this.activeMonth(),
-            $implicit: getUTCDate(this.activeYear(), this.activeMonth(), 2), // second day of month to prevent timezone issues
+            date: getUTCDate(this.activeYear(), 0, 2), // second day of month to prevent timezone issues
+            $implicit: this.activeYear(),
         }));
-        this.weekdayContext = computed(() => (dayIndex) => {
-            // create a date object for the given day index (0 = Sunday, 1 = Monday, etc.)
-            // add 4 because January 4, 1970 is a Sunday
-            const date = getUTCDate(1970, 0, 4 + dayIndex);
-            return {
-                dayIndex,
-                date,
-                $implicit: date,
-            };
-        });
-        this.floatingMonthContext = computed(() => {
-            const date = getUTCDate(this.activeYear(), this.activeMonth(), 2); // second day of month to prevent timezone issues
+        this.monthContext = computed(() => (month) => {
+            const date = getUTCDate(this.activeYear(), month, 2); // second day of month to prevent timezone issues
             return {
-                month: this.activeMonth(),
+                month,
                 date,
                 $implicit: date,
-            };
-        });
-        this.dayContext = computed(() => (day) => {
-            const date = getUTCDate(this.activeYear(), this.activeMonth(), day);
-            return {
-                value: day,
-                date,
-                $implicit: day,
-                select: (dayOrDate) => {
-                    this.triggerSelectDay.emit(dayOrDate instanceof Date ? dayOrDate.getDate() : dayOrDate);
+                select: (month) => {
+                    if (month instanceof Date)
+                        month = month.getMonth();
+                    this.triggerSelectMonth.emit(month);
                 },
             };
         });
@@ -7278,113 +7042,411 @@ class DaysViewComponent {
     onMouseMove() {
         if (this._isUsingKeyboard())
             return;
-        if (this.highlightedDay())
-            this.triggerHighlightDay.emit(null);
+        if (this.highlightedMonth())
+            this.triggerHighlightMonth.emit(null);
     }
     ngAfterViewInit() {
         if (!this.autoFocus())
             return;
         this.focus();
-        this.triggerHighlightDay.emit(1);
+        this.triggerHighlightMonth.emit(0);
+    }
+    onCalendarMonthMouseover(month) {
+        if (this._isUsingKeyboard())
+            return;
+        if (this.disabled() || this.readOnly())
+            return;
+        this.triggerHighlightMonth.emit(month);
+    }
+    onCalendarMonthClick(month) {
+        if (this.disabled() || this.readOnly())
+            return;
+        this.triggerSelectMonth.emit(month);
+    }
+    onMonthGridFocus() {
+        if (this.disabled() || this.readOnly())
+            return;
+        this.triggerHighlightMonth.emit(0);
+    }
+    onMonthGridBlur() {
+        if (this.disabled() || this.readOnly())
+            return;
+        this.triggerHighlightMonth.emit(null);
+    }
+    onMonthGridClick() {
+        if (this.disabled() || this.readOnly())
+            return;
+        if (this.highlightedMonth() !== null)
+            return;
+        this.triggerHighlightMonth.emit(0);
     }
     focus() {
         this.focusableElement().nativeElement.focus();
     }
-    isDaySelected(day) {
-        if (day instanceof Date)
-            day = day.getDate();
-        const isStartDateSelected = this.isDaySelectedStart(day);
+    //! keyboard controls
+    onMainGridKeydown(event) {
+        if (this.disabled() || this.readOnly())
+            return;
+        switch (event.code) {
+            case 'Space':
+            case 'Enter':
+                this._onEnterPress(event);
+                break;
+            case 'ArrowUp':
+                this._onArrowUpPress(event);
+                break;
+            case 'ArrowDown':
+                this._onArrowDownPress(event);
+                break;
+            case 'ArrowLeft':
+                this._onArrowLeftPress(event);
+                break;
+            case 'ArrowRight':
+                this._onArrowRightPress(event);
+                break;
+            case 'Home':
+                this._onHomePress(event);
+                break;
+            case 'End':
+                this._onEndPress(event);
+                break;
+            case 'PageUp':
+                this._onPageUpPress(event);
+                break;
+            case 'PageDown':
+                this._onPageDownPress(event);
+                break;
+            default:
+                return;
+        }
+    }
+    //select currently selected entry
+    _onEnterPress(event) {
+        event.preventDefault();
+        const month = this.highlightedMonth();
+        if (isNull(month))
+            return;
+        this.triggerSelectMonth.emit(month);
+    }
+    //highlight the entry one line below
+    _onArrowDownPress(event) {
+        event.preventDefault();
+        this.triggerHighlightNextMonth.emit(4); //4 months per line
+    }
+    //highlight the entry one line above
+    _onArrowUpPress(event) {
+        event.preventDefault();
+        this.triggerHighlightPreviousMonth.emit(4); //4 months per line
+    }
+    //highlight next entry
+    _onArrowRightPress(event) {
+        event.preventDefault();
+        this.triggerHighlightNextMonth.emit(1);
+    }
+    //highlight previous entry
+    _onArrowLeftPress(event) {
+        event.preventDefault();
+        this.triggerHighlightPreviousMonth.emit(1);
+    }
+    //highlight first entry on the page
+    _onHomePress(event) {
+        event.preventDefault();
+        this.triggerHighlightFirstMonth.emit();
+    }
+    //highlight last entry on the page
+    _onEndPress(event) {
+        event.preventDefault();
+        this.triggerHighlightLastMonth.emit();
+    }
+    //alone: highlight same entry on the next page
+    //with alt: highlight same entry multiple pages after (10 pages)
+    _onPageDownPress(event) {
+        event.preventDefault();
+        this.triggerHighlightSameMonthNextPage.emit(event.altKey);
+    }
+    //alone: highlight same entry on the previous page
+    //with alt: highlight same entry multiple pages before (10 pages)
+    _onPageUpPress(event) {
+        event.preventDefault();
+        this.triggerHighlightSameMonthPreviousPage.emit(event.altKey);
+    }
+    //! helpers
+    isMonthToday(month) {
+        return this.activeYear() === TODAY$1.getFullYear() && month === TODAY$1.getMonth();
+    }
+    isMonthSelected(month) {
+        if (month instanceof Date)
+            month = month.getMonth();
+        const isStartDateSelected = this.isMonthSelectedStart(month);
         if (this.rangeSelectionMode()) {
-            const isEndDateSelected = this.isDaySelectedEnd(day);
+            const isEndDateSelected = this.isMonthSelectedEnd(month);
             return isStartDateSelected || isEndDateSelected;
         }
         return isStartDateSelected;
     }
-    isDaySelectedStart(day) {
-        if (day instanceof Date)
-            day = day.getDate();
+    isMonthSelectedStart(month) {
+        if (month instanceof Date)
+            month = month.getMonth();
         const selected = this.selectedDate();
-        const { year, month, date } = getDateComponents(selected, this.UTC());
-        const isStartDateSelected = selected !== null && this.activeYear() === year && this.activeMonth() === month && day === date;
+        const { year, month: selectedMonth } = getDateComponents(selected, this.UTC());
+        const isStartDateSelected = selected !== null && this.activeYear() === year && month === selectedMonth;
         return isStartDateSelected;
     }
-    isDaySelectedEnd(day) {
-        if (day instanceof Date)
-            day = day.getDate();
+    isMonthSelectedEnd(month) {
+        if (month instanceof Date)
+            month = month.getMonth();
         const selected = this.selectedDateEnd();
-        const { year, month, date } = getDateComponents(selected, this.UTC());
-        const isEndDateSelected = selected !== null && this.activeYear() === year && this.activeMonth() === month && day === date;
+        const { year, month: selectedMonth } = getDateComponents(selected, this.UTC());
+        const isEndDateSelected = selected !== null && this.activeYear() === year && month === selectedMonth;
         return isEndDateSelected;
     }
-    isDayBetweenSelectedRange(day) {
+    isMonthBetweenSelectedRange(month) {
         if (!this.rangeSelectionMode())
             return false;
-        if (day instanceof Date)
-            day = day.getDate();
+        if (month instanceof Date)
+            month = month.getMonth();
         const selected = this.selectedDate();
         const selectedEnd = this.selectedDateEnd();
         if (selected === null || selectedEnd === null || selected >= selectedEnd)
             return false;
-        return this._isDayBetweenDates(day, selected, selectedEnd);
+        return this._isMonthBetweenDates(month, selected, selectedEnd);
     }
-    isDayBetweenSelectedHighlighted(day) {
+    isMonthBetweenSelectedHighlighted(month) {
         if (!this.rangeSelectionMode() || this.selectedDateEnd())
             return false;
-        if (day instanceof Date)
-            day = day.getDate();
+        if (month instanceof Date)
+            month = month.getMonth();
         const selected = this.selectedDate();
-        const highlightedEnd = this.highlightedDayDate();
+        const highlightedEnd = this.highlightedMonthDate();
         if (selected === null || highlightedEnd === null || selected >= highlightedEnd)
             return false;
-        return this._isDayBetweenDates(day, selected, highlightedEnd);
+        return this._isMonthBetweenDates(month, selected, highlightedEnd);
     }
-    _isDayBetweenDates(day, startDate, endDate) {
-        const date = createDate(this.activeYear(), this.activeMonth(), day, this.UTC());
-        return date >= startDate && date <= endDate;
+    _isMonthBetweenDates(month, startDate, endDate) {
+        const { year: startYear, month: startMonth } = getDateComponents(startDate, this.UTC());
+        const { year: endYear, month: endMonth } = getDateComponents(endDate, this.UTC());
+        return startYear <= this.activeYear() && startMonth <= month && endYear >= this.activeYear() && endMonth >= month;
     }
-    onCalendarDayMouseover(day) {
+    isYearOutOfRange(year) {
+        return isYearOutOfRange(year, this.min(), this.max());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MonthsViewComponent, isStandalone: false, selector: "ard-months-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, highlightedMonth: { classPropertyName: "highlightedMonth", publicName: "highlightedMonth", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderTemplate: { classPropertyName: "monthsViewHeaderTemplate", publicName: "monthsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectMonth: "triggerSelectMonth", triggeChangeYear: "triggeChangeYear", triggerHighlightMonth: "triggerHighlightMonth", triggerHighlightNextMonth: "triggerHighlightNextMonth", triggerHighlightPreviousMonth: "triggerHighlightPreviousMonth", triggerHighlightFirstMonth: "triggerHighlightFirstMonth", triggerHighlightLastMonth: "triggerHighlightLastMonth", triggerHighlightSameMonthPreviousPage: "triggerHighlightSameMonthPreviousPage", triggerHighlightSameMonthNextPage: "triggerHighlightSameMonthNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultMonthsViewHeaderTemplate\r\n        let-date=\"date\"\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-hideNextPageButton=\"hideNextPageButton\"\r\n        let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n        let-openDaysView=\"openDaysView\"\r\n        let-onFocus=\"onFocus\"\r\n        let-onBlur=\"onBlur\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <div>\r\n            @if (!hidePreviousPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"prevPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToPreviousPage\"\r\n              >\r\n                <ard-icon>chevron_left</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            variant=\"pill\"\r\n            [color]=\"color()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n          >\r\n            {{ date | date: monthsViewHeaderDateFormat() }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div>\r\n            @if (!hideNextPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"nextPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToNextPage\"\r\n              >\r\n                <ard-icon>chevron_right</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n        [class.ard-calendar__entry-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(month.value)\"\r\n        [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n        [class.ard-calendar__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n        [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n        [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(month.value)\"\r\n        [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n        (click)=\"onCalendarMonthClick(month.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <div class=\"ard-calendar__entry-button\">\r\n          <div class=\"ard-range-overlay\"></div>\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultMonthTemplate\r\n              let-month\r\n            >\r\n              {{ month | date: monthDateFormat() : '+0000' | uppercase }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n              [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-months-view{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'ard-months-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultMonthsViewHeaderTemplate\r\n        let-date=\"date\"\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-hideNextPageButton=\"hideNextPageButton\"\r\n        let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n        let-openDaysView=\"openDaysView\"\r\n        let-onFocus=\"onFocus\"\r\n        let-onBlur=\"onBlur\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <div>\r\n            @if (!hidePreviousPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"prevPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToPreviousPage\"\r\n              >\r\n                <ard-icon>chevron_left</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            variant=\"pill\"\r\n            [color]=\"color()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n          >\r\n            {{ date | date: monthsViewHeaderDateFormat() }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div>\r\n            @if (!hideNextPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"nextPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToNextPage\"\r\n              >\r\n                <ard-icon>chevron_right</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n        [class.ard-calendar__entry-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(month.value)\"\r\n        [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n        [class.ard-calendar__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n        [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n        [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(month.value)\"\r\n        [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n        (click)=\"onCalendarMonthClick(month.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <div class=\"ard-calendar__entry-button\">\r\n          <div class=\"ard-range-overlay\"></div>\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultMonthTemplate\r\n              let-month\r\n            >\r\n              {{ month | date: monthDateFormat() : '+0000' | uppercase }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n              [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-months-view{display:block}}\n"] }]
+        }], propDecorators: { onMouseMove: [{
+                type: HostListener,
+                args: ['mousemove']
+            }] } });
+
+const TODAY = new Date();
+class YearsViewComponent {
+    constructor() {
+        this.tabIndex = input.required();
+        this.readOnly = input.required();
+        this.disabled = input.required();
+        this.autoFocus = input.required();
+        this._isUsingKeyboard = input.required();
+        this.selectedDate = input.required();
+        this.selectedDateEnd = input.required();
+        this.rangeSelectionMode = input.required();
+        this.UTC = input.required();
+        this.min = input.required();
+        this.max = input.required();
+        this.multiCalendarLocation = input.required();
+        this.currentYearRangeStart = input.required();
+        this.multipleYearPageSize = input.required();
+        this.yearsArray = computed(() => getCalendarYearsArray(this.currentYearRangeStart(), this.multipleYearPageSize(), this.min(), this.max()));
+        this.currentAriaLabel = computed(() => {
+            return this.highlightedYear()?.toString() ?? '';
+        });
+        //! outputs
+        this.triggerOpenMonthsView = output();
+        this.triggerOpenDaysView = output();
+        this.focusEvent = output({ alias: 'focus' });
+        this.blurEvent = output({ alias: 'blur' });
+        this.triggerSelectYear = output();
+        this.triggerChangeYearsViewPage = output();
+        this.triggerHighlightYear = output();
+        this.triggerHighlightNextYear = output();
+        this.triggerHighlightPreviousYear = output();
+        this.triggerHighlightFirstYear = output();
+        this.triggerHighlightLastYear = output();
+        this.triggerHighlightSameYearPreviousPage = output();
+        this.triggerHighlightSameYearNextPage = output();
+        //! calendar entry hover & click
+        this.highlightedYear = input.required();
+        this.highlightedYearDate = computed(() => {
+            const year = this.highlightedYear();
+            if (isNull(year))
+                return null;
+            return new Date(year, 0, 1);
+        });
+        //! focusing
+        this.focusableElement = viewChild.required('focusableElement');
+        //! templates
+        this.yearsViewHeaderTemplate = input.required();
+        this.yearTemplate = input.required();
+        //! template customizations
+        this.yearsViewHeaderDateFormat = input.required(); // 'YYYY'
+        this.yearDateFormat = input.required(); // 'YYYY'
+        //! template contexts
+        this.yearsViewHeaderContext = computed(() => {
+            const yearRangeStart = this.currentYearRangeStart();
+            const yearRangeEnd = yearRangeStart + 23;
+            const dateRange = new DateRange(getUTCDate(yearRangeStart, 0, 2), // second day of month to prevent timezone issues
+            getUTCDate(yearRangeEnd, 0, 2));
+            const yearRange = {
+                from: yearRangeStart,
+                to: yearRangeEnd,
+            };
+            return {
+                nextPage: () => {
+                    this.triggerChangeYearsViewPage.emit(1);
+                },
+                prevPage: () => {
+                    this.triggerChangeYearsViewPage.emit(-1);
+                },
+                openMonthsView: () => {
+                    this.triggerOpenMonthsView.emit();
+                },
+                openDaysView: () => {
+                    this.triggerOpenDaysView.emit();
+                },
+                onFocus: (event) => {
+                    this.focusEvent.emit(event);
+                },
+                onBlur: (event) => {
+                    this.blurEvent.emit(event);
+                },
+                canGoToNextPage: !this.isYearOutOfRange(yearRangeEnd + 1),
+                canGoToPreviousPage: !this.isYearOutOfRange(yearRangeStart - 1),
+                hideNextPageButton: this.multiCalendarLocation() === ArdMultiCalendarLocation.Left ||
+                    this.multiCalendarLocation() === ArdMultiCalendarLocation.Inner,
+                hidePreviousPageButton: this.multiCalendarLocation() === ArdMultiCalendarLocation.Right ||
+                    this.multiCalendarLocation() === ArdMultiCalendarLocation.Inner,
+                yearRange: yearRange,
+                dateRange,
+                $implicit: dateRange,
+            };
+        });
+        this.yearContext = computed(() => {
+            return (year) => {
+                const date = getUTCDate(year, 1, 2); // second day of month to prevent timezone issues
+                return {
+                    value: year,
+                    date,
+                    $implicit: date,
+                    select: (year) => {
+                        this.triggerSelectYear.emit(year);
+                    },
+                };
+            };
+        });
+    }
+    onMouseMove() {
         if (this._isUsingKeyboard())
             return;
-        if (this.disabled() || this.readOnly())
+        if (this.highlightedYear())
+            this.triggerHighlightYear.emit(null);
+    }
+    ngAfterViewInit() {
+        if (!this.autoFocus())
             return;
-        if (day && this.isDayFilteredOut()(day))
+        this.focus();
+        this.triggerHighlightYear.emit(this.currentYearRangeStart());
+    }
+    onCalendarYearMouseover(year) {
+        if (this._isUsingKeyboard() || this.disabled() || this.readOnly())
             return;
-        this.triggerHighlightDay.emit(day);
+        this.triggerHighlightYear.emit(year);
     }
-    onCalendarDayClick(day) {
+    onCalendarYearClick(year) {
         if (this.disabled() || this.readOnly())
             return;
-        if (day === null)
-            return;
-        if (this.isDayFilteredOut()(day))
-            return;
-        this.triggerHighlightDay.emit(day);
-        this.focus();
-        this.triggerSelectDay.emit(day);
+        this.triggerSelectYear.emit(year);
     }
-    onDayGridFocus() {
+    onYearGridFocus() {
         if (this.disabled() || this.readOnly())
             return;
-        this.triggerHighlightFirstDay.emit();
+        this.triggerHighlightFirstYear.emit();
     }
-    onDayGridBlur() {
+    onYearGridBlur() {
         if (this.disabled() || this.readOnly())
             return;
-        this.triggerHighlightDay.emit(null);
+        this.triggerHighlightYear.emit(null);
     }
-    onDayGridClick() {
+    onYearGridClick() {
         if (this.disabled() || this.readOnly())
             return;
-        if (this.highlightedDay() !== null)
+        if (this.highlightedYear() !== null)
             return;
-        this.triggerHighlightFirstDay.emit();
+        this.triggerHighlightFirstYear.emit();
     }
     //! helpers
-    isDayToday(day) {
-        return this.activeYear() === TODAY$2.getFullYear() && this.activeMonth() === TODAY$2.getMonth() && day === TODAY$2.getDate();
+    isYearToday(year) {
+        return year === TODAY.getFullYear();
+    }
+    isYearSelected(year) {
+        if (year instanceof Date)
+            year = year.getFullYear();
+        const isStartDateSelected = this.isYearSelectedStart(year);
+        if (this.rangeSelectionMode()) {
+            const isEndDateSelected = this.isYearSelectedEnd(year);
+            return isStartDateSelected || isEndDateSelected;
+        }
+        return isStartDateSelected;
+    }
+    isYearSelectedStart(year) {
+        if (year instanceof Date)
+            year = year.getFullYear();
+        const selected = this.selectedDate();
+        const { year: selectedYear } = getDateComponents(selected, this.UTC());
+        const isStartDateSelected = selected !== null && year === selectedYear;
+        return isStartDateSelected;
+    }
+    isYearSelectedEnd(year) {
+        if (year instanceof Date)
+            year = year.getFullYear();
+        const selected = this.selectedDateEnd();
+        const { year: selectedYear } = getDateComponents(selected, this.UTC());
+        const isEndDateSelected = selected !== null && year === selectedYear;
+        return isEndDateSelected;
+    }
+    isYearBetweenSelectedRange(year) {
+        if (!this.rangeSelectionMode())
+            return false;
+        if (year instanceof Date)
+            year = year.getFullYear();
+        const selected = this.selectedDate();
+        const selectedEnd = this.selectedDateEnd();
+        if (selected === null || selectedEnd === null || selected >= selectedEnd)
+            return false;
+        return this._isYearBetweenDates(year, selected, selectedEnd);
+    }
+    isYearBetweenSelectedHighlighted(year) {
+        if (!this.rangeSelectionMode() || this.selectedDateEnd())
+            return false;
+        if (year instanceof Date)
+            year = year.getFullYear();
+        const selected = this.selectedDate();
+        const highlightedEnd = this.highlightedYearDate();
+        if (selected === null || highlightedEnd === null || selected >= highlightedEnd)
+            return false;
+        return this._isYearBetweenDates(year, selected, highlightedEnd);
+    }
+    _isYearBetweenDates(year, startDate, endDate) {
+        const { year: startYear } = getDateComponents(startDate, this.UTC());
+        const { year: endYear } = getDateComponents(endDate, this.UTC());
+        return startYear <= year && endYear >= year;
     }
-    isMonthOutOfRange(month) {
-        return isMonthOutOfRange(month, this.activeYear(), this.min(), this.max());
+    isYearOutOfRange(year) {
+        return isYearOutOfRange(year, this.min(), this.max());
+    }
+    focus() {
+        this.focusableElement().nativeElement.focus();
     }
     //! keyboard controls
     onMainGridKeydown(event) {
@@ -7426,659 +7488,620 @@ class DaysViewComponent {
     //select currently selected entry
     _onEnterPress(event) {
         event.preventDefault();
-        this.triggerSelectDay.emit(this.highlightedDay());
+        const year = this.highlightedYear();
+        if (isNull(year))
+            return;
+        this.triggerSelectYear.emit(year);
     }
     //highlight the entry one line below
     _onArrowDownPress(event) {
         event.preventDefault();
-        this.triggerHighlightNextDay.emit(7);
+        this.triggerHighlightNextYear.emit(4); //4 years per line
     }
     //highlight the entry one line above
     _onArrowUpPress(event) {
         event.preventDefault();
-        this.triggerHighlightPreviousDay.emit(7);
+        this.triggerHighlightPreviousYear.emit(4); //4 years per line
     }
     //highlight next entry
     _onArrowRightPress(event) {
         event.preventDefault();
-        this.triggerHighlightNextDay.emit(1);
+        this.triggerHighlightNextYear.emit(1);
     }
     //highlight previous entry
     _onArrowLeftPress(event) {
         event.preventDefault();
-        this.triggerHighlightPreviousDay.emit(1);
+        this.triggerHighlightPreviousYear.emit(1);
     }
     //highlight first entry on the page
     _onHomePress(event) {
         event.preventDefault();
-        this.triggerHighlightFirstDay.emit();
+        this.triggerHighlightFirstYear.emit();
     }
     //highlight last entry on the page
     _onEndPress(event) {
         event.preventDefault();
-        this.triggerHighlightLastDay.emit();
-    }
-    //alone: highlight same entry on the next page
-    //with alt: highlight same entry multiple pages after (12 pages)
-    _onPageDownPress(event) {
-        event.preventDefault();
-        this.triggerHighlightSameDayNextPage.emit(event.altKey);
+        this.triggerHighlightLastYear.emit();
     }
     //alone: highlight same entry on the previous page
-    //with alt: highlight same entry multiple pages before (12 pages)
+    //with alt: highlight same entry multiple pages before
     _onPageUpPress(event) {
         event.preventDefault();
-        this.triggerHighlightSameDayPreviousPage.emit(event.altKey);
+        this.triggerHighlightSameYearPreviousPage.emit(event.altKey);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DaysViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DaysViewComponent, isStandalone: false, selector: "ard-days-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, isDayFilteredOut: { classPropertyName: "isDayFilteredOut", publicName: "isDayFilteredOut", isSignal: true, isRequired: true, transformFunction: null }, highlightedDay: { classPropertyName: "highlightedDay", publicName: "highlightedDay", isSignal: true, isRequired: true, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: true, transformFunction: null }, staticHeight: { classPropertyName: "staticHeight", publicName: "staticHeight", isSignal: true, isRequired: true, transformFunction: null }, hideFloatingMonth: { classPropertyName: "hideFloatingMonth", publicName: "hideFloatingMonth", isSignal: true, isRequired: true, transformFunction: null }, daysViewHeaderTemplate: { classPropertyName: "daysViewHeaderTemplate", publicName: "daysViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthTemplate: { classPropertyName: "floatingMonthTemplate", publicName: "floatingMonthTemplate", isSignal: true, isRequired: true, transformFunction: null }, weekdayTemplate: { classPropertyName: "weekdayTemplate", publicName: "weekdayTemplate", isSignal: true, isRequired: true, transformFunction: null }, dayTemplate: { classPropertyName: "dayTemplate", publicName: "dayTemplate", isSignal: true, isRequired: true, transformFunction: null }, daysViewHeaderDateFormat: { classPropertyName: "daysViewHeaderDateFormat", publicName: "daysViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, weekdayDateFormat: { classPropertyName: "weekdayDateFormat", publicName: "weekdayDateFormat", isSignal: true, isRequired: true, transformFunction: null }, weekdayTitleDateFormat: { classPropertyName: "weekdayTitleDateFormat", publicName: "weekdayTitleDateFormat", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthDateFormat: { classPropertyName: "floatingMonthDateFormat", publicName: "floatingMonthDateFormat", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthTitleDateFormat: { classPropertyName: "floatingMonthTitleDateFormat", publicName: "floatingMonthTitleDateFormat", isSignal: true, isRequired: true, transformFunction: null }, dayDateFormat: { classPropertyName: "dayDateFormat", publicName: "dayDateFormat", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenMonthsView: "triggerOpenMonthsView", triggerSelectDay: "triggerSelectDay", triggerChangeMonth: "triggerChangeMonth", triggerChangeYear: "triggerChangeYear", triggerHighlightDay: "triggerHighlightDay", triggerHighlightNextDay: "triggerHighlightNextDay", triggerHighlightPreviousDay: "triggerHighlightPreviousDay", triggerHighlightFirstDay: "triggerHighlightFirstDay", triggerHighlightLastDay: "triggerHighlightLastDay", triggerHighlightSameDayPreviousPage: "triggerHighlightSameDayPreviousPage", triggerHighlightSameDayNextPage: "triggerHighlightSameDayNextPage", focusEvent: "focus", blurEvent: "blur" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-days-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\r\n    <ng-template\r\n      #defaultDaysViewHeaderTemplate\r\n      let-currDate\r\n      let-nextMonth=\"nextMonth\"\r\n      let-prevMonth=\"prevMonth\"\r\n      let-canGoToNextMonth=\"canGoToNextPage\"\r\n      let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n      let-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openYearsView=\"openYearsView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"prevMonth()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToPreviousMonth\"\r\n          >\r\n            <ard-icon>chevron_left</ard-icon>\r\n          </ard-icon-button>\r\n          }\r\n        </div>\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          variant=\"pill\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openYearsView()\"\r\n        >\r\n          {{ currDate | date : this.daysViewHeaderDateFormat() | uppercase }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"nextMonth()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToNextMonth\"\r\n          >\r\n            <ard-icon>chevron_right</ard-icon>\r\n          </ard-icon-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"daysViewHeaderTemplate() || defaultDaysViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"daysViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div class=\"ard-calendar__weekdays\">\r\n    <ng-template\r\n      #defaultWeekdayTemplate\r\n      let-date\r\n    >\r\n      <div\r\n        class=\"ard-calendar__weekday\"\r\n        [title]=\"date | date : weekdayTitleDateFormat() | titlecase\"\r\n      >\r\n        {{ date | date : weekdayDateFormat() | uppercase }}\r\n      </div>\r\n    </ng-template>\r\n    @for (weekdayIndex of weekdayArray(); track weekdayIndex) {\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"weekdayTemplate() || defaultWeekdayTemplate\"\r\n      [ngTemplateOutletContext]=\"weekdayContext()(weekdayIndex)\"\r\n    />\r\n    }\r\n  </div>\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__days-grid\"\r\n    [class.ard-reserve-top-row]=\"reserveTopRow()\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onDayGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onDayGridBlur()\"\r\n    (click)=\"onDayGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @if (!hideFloatingMonth()) {\r\n    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        <div [title]=\"date | date : floatingMonthTitleDateFormat() | titlecase\">\r\n          {{ date | date : floatingMonthDateFormat() | uppercase }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      />\r\n    </div>\r\n    } @for (week of activeCalendarData().array; track $index) { @for (day of week; track day ? day :\r\n    activeCalendarData().leadingSpaces - $index) { @if (day === null) {\r\n    <div class=\"ard-calendar__entry ard-calendar__entry-empty\"></div>\r\n    } @else {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedDay() === day.value\"\r\n      [class.ard-calendar__entry-highlighted-in-range]=\"isDayBetweenSelectedHighlighted(day.value)\"\r\n      [class.ard-calendar__entry-disabled]=\"day.disabled || isDayFilteredOut()(day.value)\"\r\n      [class.ard-calendar__entry-selected]=\"isDaySelected(day.value)\"\r\n      [class.ard-calendar__entry-selected-start]=\"isDaySelectedStart(day.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isDaySelectedEnd(day.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isDayBetweenSelectedRange(day.value)\"\r\n      [class.ard-calendar-today]=\"isDayToday(day.value)\"\r\n      (click)=\"onCalendarDayClick(day.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarDayMouseover(day.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <div class=\"ard-calendar__entry-button\">\r\n        <div class=\"ard-range-overlay\"></div>\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultDayTemplate\r\n            let-date=\"date\"\r\n          >\r\n            {{ date | date : dayDateFormat() }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"dayTemplate() || defaultDayTemplate\"\r\n            [ngTemplateOutletContext]=\"dayContext()(day.value)\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    } } }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-days-view{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    //alone: highlight same entry on the next page
+    //with alt: highlight same entry multiple pages after
+    _onPageDownPress(event) {
+        event.preventDefault();
+        this.triggerHighlightSameYearNextPage.emit(event.altKey);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: YearsViewComponent, isStandalone: false, selector: "ard-years-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, multipleYearPageSize: { classPropertyName: "multipleYearPageSize", publicName: "multipleYearPageSize", isSignal: true, isRequired: true, transformFunction: null }, highlightedYear: { classPropertyName: "highlightedYear", publicName: "highlightedYear", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderTemplate: { classPropertyName: "yearsViewHeaderTemplate", publicName: "yearsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenMonthsView: "triggerOpenMonthsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectYear: "triggerSelectYear", triggerChangeYearsViewPage: "triggerChangeYearsViewPage", triggerHighlightYear: "triggerHighlightYear", triggerHighlightNextYear: "triggerHighlightNextYear", triggerHighlightPreviousYear: "triggerHighlightPreviousYear", triggerHighlightFirstYear: "triggerHighlightFirstYear", triggerHighlightLastYear: "triggerHighlightLastYear", triggerHighlightSameYearPreviousPage: "triggerHighlightSameYearPreviousPage", triggerHighlightSameYearNextPage: "triggerHighlightSameYearNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-years-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultYearsViewHeaderTemplate\r\n        let-dateRange=\"dateRange\"\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-hideNextPageButton=\"hideNextPageButton\"\r\n        let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n        let-openDaysView=\"openDaysView\"\r\n        let-onFocus=\"onFocus\"\r\n        let-onBlur=\"onBlur\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <div>\r\n            @if (!hidePreviousPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"prevPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToPreviousPage\"\r\n              >\r\n                <ard-icon>chevron_left</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            variant=\"pill\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n          >\r\n            {{ dateRange.from | date: yearsViewHeaderDateFormat() }}\r\n            &mdash;\r\n            {{ dateRange.to | date: yearsViewHeaderDateFormat() }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div>\r\n            @if (!hideNextPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"nextPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToNextPage\"\r\n              >\r\n                <ard-icon>chevron_right</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onYearGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onYearGridBlur()\"\r\n    (click)=\"onYearGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (year of yearsArray(); track year) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n        [class.ard-calendar__entry-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(year.value)\"\r\n        [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n        [class.ard-calendar__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n        [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n        [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(year.value)\"\r\n        [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n        (click)=\"onCalendarYearClick(year.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <div class=\"ard-calendar__entry-button\">\r\n          <div class=\"ard-range-overlay\"></div>\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultYearTemplate\r\n              let-year\r\n            >\r\n              {{ year | date: yearDateFormat() }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n              [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-years-view{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DaysViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-days-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-days-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\r\n    <ng-template\r\n      #defaultDaysViewHeaderTemplate\r\n      let-currDate\r\n      let-nextMonth=\"nextMonth\"\r\n      let-prevMonth=\"prevMonth\"\r\n      let-canGoToNextMonth=\"canGoToNextPage\"\r\n      let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n      let-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openYearsView=\"openYearsView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"prevMonth()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToPreviousMonth\"\r\n          >\r\n            <ard-icon>chevron_left</ard-icon>\r\n          </ard-icon-button>\r\n          }\r\n        </div>\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          variant=\"pill\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openYearsView()\"\r\n        >\r\n          {{ currDate | date : this.daysViewHeaderDateFormat() | uppercase }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"nextMonth()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToNextMonth\"\r\n          >\r\n            <ard-icon>chevron_right</ard-icon>\r\n          </ard-icon-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"daysViewHeaderTemplate() || defaultDaysViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"daysViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div class=\"ard-calendar__weekdays\">\r\n    <ng-template\r\n      #defaultWeekdayTemplate\r\n      let-date\r\n    >\r\n      <div\r\n        class=\"ard-calendar__weekday\"\r\n        [title]=\"date | date : weekdayTitleDateFormat() | titlecase\"\r\n      >\r\n        {{ date | date : weekdayDateFormat() | uppercase }}\r\n      </div>\r\n    </ng-template>\r\n    @for (weekdayIndex of weekdayArray(); track weekdayIndex) {\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"weekdayTemplate() || defaultWeekdayTemplate\"\r\n      [ngTemplateOutletContext]=\"weekdayContext()(weekdayIndex)\"\r\n    />\r\n    }\r\n  </div>\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__days-grid\"\r\n    [class.ard-reserve-top-row]=\"reserveTopRow()\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onDayGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onDayGridBlur()\"\r\n    (click)=\"onDayGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @if (!hideFloatingMonth()) {\r\n    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        <div [title]=\"date | date : floatingMonthTitleDateFormat() | titlecase\">\r\n          {{ date | date : floatingMonthDateFormat() | uppercase }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      />\r\n    </div>\r\n    } @for (week of activeCalendarData().array; track $index) { @for (day of week; track day ? day :\r\n    activeCalendarData().leadingSpaces - $index) { @if (day === null) {\r\n    <div class=\"ard-calendar__entry ard-calendar__entry-empty\"></div>\r\n    } @else {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedDay() === day.value\"\r\n      [class.ard-calendar__entry-highlighted-in-range]=\"isDayBetweenSelectedHighlighted(day.value)\"\r\n      [class.ard-calendar__entry-disabled]=\"day.disabled || isDayFilteredOut()(day.value)\"\r\n      [class.ard-calendar__entry-selected]=\"isDaySelected(day.value)\"\r\n      [class.ard-calendar__entry-selected-start]=\"isDaySelectedStart(day.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isDaySelectedEnd(day.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isDayBetweenSelectedRange(day.value)\"\r\n      [class.ard-calendar-today]=\"isDayToday(day.value)\"\r\n      (click)=\"onCalendarDayClick(day.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarDayMouseover(day.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <div class=\"ard-calendar__entry-button\">\r\n        <div class=\"ard-range-overlay\"></div>\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultDayTemplate\r\n            let-date=\"date\"\r\n          >\r\n            {{ date | date : dayDateFormat() }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"dayTemplate() || defaultDayTemplate\"\r\n            [ngTemplateOutletContext]=\"dayContext()(day.value)\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    } } }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-days-view{display:block}}\n"] }]
+            args: [{ standalone: false, selector: 'ard-years-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-years-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultYearsViewHeaderTemplate\r\n        let-dateRange=\"dateRange\"\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-hideNextPageButton=\"hideNextPageButton\"\r\n        let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n        let-openDaysView=\"openDaysView\"\r\n        let-onFocus=\"onFocus\"\r\n        let-onBlur=\"onBlur\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <div>\r\n            @if (!hidePreviousPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"prevPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToPreviousPage\"\r\n              >\r\n                <ard-icon>chevron_left</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            variant=\"pill\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n          >\r\n            {{ dateRange.from | date: yearsViewHeaderDateFormat() }}\r\n            &mdash;\r\n            {{ dateRange.to | date: yearsViewHeaderDateFormat() }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div>\r\n            @if (!hideNextPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"nextPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToNextPage\"\r\n              >\r\n                <ard-icon>chevron_right</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onYearGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onYearGridBlur()\"\r\n    (click)=\"onYearGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (year of yearsArray(); track year) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n        [class.ard-calendar__entry-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(year.value)\"\r\n        [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n        [class.ard-calendar__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n        [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n        [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(year.value)\"\r\n        [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n        (click)=\"onCalendarYearClick(year.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <div class=\"ard-calendar__entry-button\">\r\n          <div class=\"ard-range-overlay\"></div>\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultYearTemplate\r\n              let-year\r\n            >\r\n              {{ year | date: yearDateFormat() }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n              [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-years-view{display:block}}\n"] }]
         }], propDecorators: { onMouseMove: [{
                 type: HostListener,
                 args: ['mousemove']
             }] } });
 
-const TODAY$1 = new Date();
-class MonthsViewComponent {
-    constructor() {
-        this.tabIndex = input.required();
-        this.readOnly = input.required();
-        this.disabled = input.required();
-        this.autoFocus = input.required();
-        this._isUsingKeyboard = input.required();
-        this.color = input.required();
-        this.activeYear = input.required();
-        this.activeMonth = input.required();
-        this.selectedDate = input.required();
-        this.selectedDateEnd = input.required();
-        this.rangeSelectionMode = input.required();
-        this.UTC = input.required();
-        this.min = input.required();
-        this.max = input.required();
-        this.multiCalendarLocation = input.required();
-        this.monthsArray = computed(() => getCalendarMonthsArray(this.activeYear(), this.min(), this.max()));
-        this.currentAriaLabel = computed(() => {
-            const month = this.highlightedMonth();
-            if (month === null) {
-                return '';
-            }
-            return new Date(this.activeYear(), month, 1).toLocaleDateString(undefined, {
-                year: 'numeric',
-                month: 'long',
-            });
-        });
-        //! outputs
-        this.triggerOpenYearsView = output();
-        this.triggerOpenDaysView = output();
-        this.focusEvent = output({ alias: 'focus' });
-        this.blurEvent = output({ alias: 'blur' });
-        this.triggerSelectMonth = output();
-        this.triggeChangeYear = output();
-        this.triggerHighlightMonth = output();
-        this.triggerHighlightNextMonth = output();
-        this.triggerHighlightPreviousMonth = output();
-        this.triggerHighlightFirstMonth = output();
-        this.triggerHighlightLastMonth = output();
-        this.triggerHighlightSameMonthPreviousPage = output();
-        this.triggerHighlightSameMonthNextPage = output();
-        //! calendar entry hover & click
-        this.highlightedMonth = input.required();
-        this.highlightedMonthDate = computed(() => {
-            const month = this.highlightedMonth();
-            if (isNull(month))
-                return null;
-            return new Date(this.activeYear(), month, 2);
-        });
-        //! focusing
-        this.focusableElement = viewChild.required('focusableElement');
-        //! templates
-        this.monthsViewHeaderTemplate = input.required();
-        this.monthTemplate = input.required();
-        //! template customizations
-        this.monthsViewHeaderDateFormat = input.required(); // 'YYYY'
-        this.monthDateFormat = input.required(); // 'MMM'
-        //! template contexts
-        this.monthsViewHeaderContext = computed(() => ({
-            nextPage: () => {
-                this.triggeChangeYear.emit(this.activeYear() + 1);
+class _AbstractCalendar extends _FormFieldComponentBase {
+    constructor(defaults) {
+        super(defaults);
+        this.TODAY = computed(() => createDate(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), this.UTC()));
+        //! appearance
+        this.color = input(this._DEFAULTS.color);
+        this.ngClasses = computed(() => [`ard-color-${this.color()}`].join(' '));
+        //! active view
+        this.activeView = model(this._DEFAULTS.activeView);
+        this.activeYear = model(this._DEFAULTS.activeYear);
+        this.activeMonth = model(this._DEFAULTS.activeMonth);
+        this.activePageChange = output();
+        this.firstWeekday = input(this._DEFAULTS.firstWeekday, {
+            transform: v => {
+                const value = coerceNumberProperty(v, this._DEFAULTS.firstWeekday);
+                if (!Number.isInteger(value)) {
+                    console.error(new Error(`ARD-NF${this.componentId}1A: [firstWeekday] must be a positive integer, got "${value}". Using default value instead.`));
+                    return this._DEFAULTS.firstWeekday;
+                }
+                if (value < 0 || value > 6) {
+                    console.error(new Error(`ARD-NF${this.componentId}1B: [firstWeekday] must be between 0 and 6, got "${value}". Using modulo operator to adjust the value.`));
+                }
+                return value % 7;
             },
-            prevPage: () => {
-                this.triggeChangeYear.emit(this.activeYear() - 1);
+        });
+        this.multipleYearPageChangeModifier = input(this._DEFAULTS.multipleYearPageChangeModifier, {
+            transform: v => {
+                const value = coerceNumberProperty(v, this._DEFAULTS.multipleYearPageChangeModifier);
+                if (!Number.isInteger(value) || value < 1) {
+                    console.error(new Error(`ARD-NF${this.componentId}2: [multipleYearPageChangeModifier] must be a positive integer, got "${value}". Using default value instead.`));
+                    return this._DEFAULTS.multipleYearPageChangeModifier;
+                }
+                return value;
             },
-            openYearsView: () => {
-                this.triggerOpenYearsView.emit();
+        });
+        this.multipleYearOffset = input(this._DEFAULTS.multipleYearOffset, {
+            transform: v => {
+                const value = coerceNumberProperty(v, this._DEFAULTS.multipleYearOffset);
+                if (!Number.isInteger(value) || value < 0) {
+                    console.error(new Error(`ARD-NF${this.componentId}3: [multipleYearOffset] must be a non-negative integer, got "${value}". Using default value instead.`));
+                    return this._DEFAULTS.multipleYearOffset;
+                }
+                return value;
             },
-            openDaysView: () => {
-                this.triggerOpenDaysView.emit();
+        });
+        this.multipleYearPageSize = input(this._DEFAULTS.multipleYearPageSize, {
+            transform: v => {
+                const value = coerceNumberProperty(v, this._DEFAULTS.multipleYearPageSize);
+                if (!Number.isInteger(value) || value < 1) {
+                    console.error(new Error(`ARD-NF${this.componentId}5: [multipleYearPageSize] must be a positive integer, got "${value}". Using default value instead.`));
+                    return this._DEFAULTS.multipleYearPageSize;
+                }
+                return value;
             },
-            canGoToNextPage: !this.isYearOutOfRange(this.activeYear() + 1),
-            canGoToPreviousPage: !this.isYearOutOfRange(this.activeYear() - 1),
-            hideNextPageButton: this.multiCalendarLocation() === ArdMultiCalendarLocation.Left ||
-                this.multiCalendarLocation() === ArdMultiCalendarLocation.Inner,
-            hidePreviousPageButton: this.multiCalendarLocation() === ArdMultiCalendarLocation.Right ||
-                this.multiCalendarLocation() === ArdMultiCalendarLocation.Inner,
-            year: this.activeYear(),
-            date: getUTCDate(this.activeYear(), 0, 2), // second day of month to prevent timezone issues
-            $implicit: this.activeYear(),
-        }));
-        this.monthContext = computed(() => (month) => {
-            const date = getUTCDate(this.activeYear(), month, 2); // second day of month to prevent timezone issues
-            return {
-                month,
-                date,
-                $implicit: date,
-                select: (month) => {
-                    if (month instanceof Date)
-                        month = month.getMonth();
-                    this.triggerSelectMonth.emit(month);
-                },
+        });
+        this.multiCalendarLocation = input(this._DEFAULTS.multiCalendarLocation);
+        this.autoFocus = input(this._DEFAULTS.autoFocus, { transform: v => coerceBooleanProperty(v) });
+        this.staticHeight = input(this._DEFAULTS.staticHeight, { transform: v => coerceBooleanProperty(v) });
+        this.hideFloatingMonth = input(this._DEFAULTS.hideFloatingMonth, {
+            transform: v => coerceBooleanProperty(v),
+        });
+        this.daysViewComponent = viewChild.required(DaysViewComponent);
+        this.monthsViewComponent = viewChild.required(MonthsViewComponent);
+        this.yearsViewComponent = viewChild.required(YearsViewComponent);
+        //! value
+        this.selectionStart = signal(null);
+        this.selectionEnd = signal(null);
+        this.yearSelect = output();
+        this.monthSelect = output();
+        this.min = input(this._DEFAULTS.min, {
+            transform: v => (v === null ? null : coerceDateProperty(v, this._DEFAULTS.min)),
+        });
+        this.max = input(this._DEFAULTS.max, {
+            transform: v => (v === null ? null : coerceDateProperty(v, this._DEFAULTS.max)),
+        });
+        this.UTC = input(this._DEFAULTS.UTC, { transform: v => coerceBooleanProperty(v) });
+        this._UTCAfterInit = signal(this._DEFAULTS.UTC);
+        this.filter = input(this._DEFAULTS.filter);
+        this.isDayFilteredOut = computed(() => {
+            return (day, month = this.activeMonth(), year = this.activeYear()) => {
+                return this.filter()?.(createDate(year, month, day, this.UTC())) ?? false;
             };
         });
+        //! highlighting days
+        this.highlightedDay = model(null);
+        this.highlightDayEvent = output({ alias: 'highlightDay' });
+        //! highlighting months
+        this._highlightedMonth = signal(null);
+        this.highlightedMonth = this._highlightedMonth.asReadonly();
+        //! highlighting years
+        this.__highlightedYear = signal(null);
+        this.highlightedYear = this.__highlightedYear.asReadonly();
+        this.currentYearRangeStart = linkedSignal(() => {
+            // align to a multiple of 4 and subtract offset
+            const rangeStartForCurrentYear = this.TODAY().getFullYear() - (this.TODAY().getFullYear() % 4) - this.multipleYearOffset() * 4;
+            const activeYear = this.activeYear();
+            const offset = roundToMultiple(activeYear - rangeStartForCurrentYear + 1, this.multipleYearPageSize(), 'up') - this.multipleYearPageSize(); // check how many n-year pages need to be turned
+            return rangeStartForCurrentYear + offset;
+        });
+        //! internals
+        this._isUsingKeyboard = signal(false);
+        //! templates
+        this.templateRepository = contentChild(_CalendarTemplateRepositoryDirective);
+        this.yearsViewHeaderTemplate = contentChild(ArdCalendarYearsViewHeaderTemplateDirective);
+        this.monthsViewHeaderTemplate = contentChild(ArdCalendarMonthsViewHeaderTemplateDirective);
+        this.daysViewHeaderTemplate = contentChild(ArdCalendarDaysViewHeaderTemplateDirective);
+        this.floatingMonthTemplate = contentChild(ArdCalendarFloatingMonthTemplateDirective);
+        this.yearTemplate = contentChild(ArdCalendarYearTemplateDirective);
+        this.monthTemplate = contentChild(ArdCalendarMonthTemplateDirective);
+        this.dayTemplate = contentChild(ArdCalendarDayTemplateDirective);
+        this.weekdayTemplate = contentChild(ArdCalendarWeekdayTemplateDirective);
+        //! template customizations
+        this.daysViewHeaderDateFormat = input(this._DEFAULTS.daysViewHeaderDateFormat); // 'MMM YYYY'
+        this.yearsViewHeaderDateFormat = input(this._DEFAULTS.yearsViewHeaderDateFormat); // 'YYYY'
+        this.monthsViewHeaderDateFormat = input(this._DEFAULTS.monthsViewHeaderDateFormat); // 'YYYY'
+        this.weekdayDateFormat = input(this._DEFAULTS.weekdayDateFormat); // 'EEEEE'
+        this.weekdayTitleDateFormat = input(this._DEFAULTS.weekdayTitleDateFormat); // 'EEEE'
+        this.floatingMonthDateFormat = input(this._DEFAULTS.floatingMonthDateFormat); // 'LLL'
+        this.floatingMonthTitleDateFormat = input(this._DEFAULTS.floatingMonthTitleDateFormat); // 'LLLL'
+        this.yearDateFormat = input(this._DEFAULTS.yearDateFormat); // 'YYYY'
+        this.monthDateFormat = input(this._DEFAULTS.monthDateFormat); // 'MMM'
+        this.dayDateFormat = input(this._DEFAULTS.dayDateFormat); // 'D'
     }
-    onMouseMove() {
-        if (this._isUsingKeyboard())
-            return;
-        if (this.highlightedMonth())
-            this.triggerHighlightMonth.emit(null);
+    openDaysView() {
+        this.activeView.set(ArdCalendarView.Days);
+        setTimeout(() => {
+            this.daysViewComponent().focus();
+        }, 0);
     }
-    ngAfterViewInit() {
-        if (!this.autoFocus())
-            return;
-        this.focus();
-        this.triggerHighlightMonth.emit(0);
+    openMonthsView() {
+        this.activeView.set(ArdCalendarView.Months);
+        setTimeout(() => {
+            this.monthsViewComponent().focus();
+        }, 0);
     }
-    onCalendarMonthMouseover(month) {
-        if (this._isUsingKeyboard())
-            return;
-        if (this.disabled() || this.readOnly())
-            return;
-        this.triggerHighlightMonth.emit(month);
+    openYearsView() {
+        this.activeView.set(ArdCalendarView.Years);
+        setTimeout(() => {
+            this.yearsViewComponent().focus();
+        }, 0);
     }
-    onCalendarMonthClick(month) {
-        if (this.disabled() || this.readOnly())
-            return;
-        this.triggerSelectMonth.emit(month);
+    _emitChange() {
+        this._onChangeRegistered?.(this.value());
     }
-    onMonthGridFocus() {
-        if (this.disabled() || this.readOnly())
-            return;
-        this.triggerHighlightMonth.emit(0);
+    ngOnChanges(changes) {
+        if (changes['UTC']) {
+            if (changes['UTC'].firstChange) {
+                this._UTCAfterInit.set(changes['UTC'].currentValue);
+            }
+            else {
+                console.error(`ARD-NF${this.componentId}4: <ard-${this.componentName}>'s [UTC] attribute should not be changed dynamically. This change will be ignored.`);
+            }
+        }
+        if (changes['value']) {
+            this.writeValue(changes['value'].currentValue);
+        }
     }
-    onMonthGridBlur() {
-        if (this.disabled() || this.readOnly())
-            return;
-        this.triggerHighlightMonth.emit(null);
+    _emitActivePageChange() {
+        this.activePageChange.emit({ year: this.activeYear(), month: this.activeMonth() });
     }
-    onMonthGridClick() {
-        if (this.disabled() || this.readOnly())
-            return;
-        if (this.highlightedMonth() !== null)
+    _emitHighlightedDate() {
+        const day = this.highlightedDay();
+        if (!day)
             return;
-        this.triggerHighlightMonth.emit(0);
+        const date = createDate(this.activeYear(), this.activeMonth(), day, this.UTC());
+        this.highlightDayEvent.emit(date);
     }
-    focus() {
-        this.focusableElement().nativeElement.focus();
+    //! selecting days
+    isDayOutOfRange(day, month = this.activeMonth(), year = this.activeYear()) {
+        const dayDate = new Date(year, month, day);
+        return isDayOutOfRange(dayDate, this.min(), this.max());
     }
-    //! keyboard controls
-    onMainGridKeydown(event) {
-        if (this.disabled() || this.readOnly())
+    selectDay(day) {
+        const startValue = this.selectionStart();
+        // reset selection
+        if (isNull(day)) {
+            if (!isDefined(startValue))
+                return;
+            this.selectionStart.set(null);
+            this.selectionEnd.set(null);
             return;
-        switch (event.code) {
-            case 'Space':
-            case 'Enter':
-                this._onEnterPress(event);
-                break;
-            case 'ArrowUp':
-                this._onArrowUpPress(event);
-                break;
-            case 'ArrowDown':
-                this._onArrowDownPress(event);
-                break;
-            case 'ArrowLeft':
-                this._onArrowLeftPress(event);
-                break;
-            case 'ArrowRight':
-                this._onArrowRightPress(event);
-                break;
-            case 'Home':
-                this._onHomePress(event);
-                break;
-            case 'End':
-                this._onEndPress(event);
-                break;
-            case 'PageUp':
-                this._onPageUpPress(event);
-                break;
-            case 'PageDown':
-                this._onPageDownPress(event);
-                break;
-            default:
+        }
+        if (day instanceof Date)
+            day = day.getDate();
+        // check if day is out of range or filtered out
+        if ((day && this.isDayOutOfRange(day)) || this.isDayFilteredOut()(day))
+            return;
+        // range selection logic
+        const endValue = this.selectionEnd();
+        const newDate = createDate(this.activeYear(), this.activeMonth(), day, this.UTC());
+        if (this.isRangeSelector) {
+            // select end date
+            if (isDefined(startValue) && !isDefined(endValue) && newDate > startValue) {
+                this.selectionEnd.set(newDate);
                 return;
+            }
+            // reset end date and start a new selection
+            this.selectionEnd.set(null);
         }
-    }
-    //select currently selected entry
-    _onEnterPress(event) {
-        event.preventDefault();
-        const month = this.highlightedMonth();
-        if (isNull(month))
+        // avoid setting the same date again
+        if (startValue &&
+            startValue.getFullYear() === this.activeYear() &&
+            startValue.getMonth() === this.activeMonth() &&
+            startValue.getDate() === day) {
             return;
-        this.triggerSelectMonth.emit(month);
-    }
-    //highlight the entry one line below
-    _onArrowDownPress(event) {
-        event.preventDefault();
-        this.triggerHighlightNextMonth.emit(4); //4 months per line
+        }
+        this.selectionStart.set(newDate);
     }
-    //highlight the entry one line above
-    _onArrowUpPress(event) {
-        event.preventDefault();
-        this.triggerHighlightPreviousMonth.emit(4); //4 months per line
+    selectCurrentlyHighlightedDay() {
+        if (!isDefined(this.highlightedDay()))
+            return;
+        this.selectDay(this.highlightedDay());
     }
-    //highlight next entry
-    _onArrowRightPress(event) {
-        event.preventDefault();
-        this.triggerHighlightNextMonth.emit(1);
+    setHighlightedDay(day, month = this.activeMonth(), year = this.activeYear()) {
+        if (isNull(day)) {
+            this.highlightedDay.update(() => day);
+            this._emitHighlightedDate();
+            return;
+        }
+        const date = createDate(year, month, day, this.UTC());
+        const outOfRange = this.isDayOutOfRange(day, month, year);
+        if (outOfRange === -1) {
+            this._highlightMinDay();
+            return;
+        }
+        if (outOfRange === 1) {
+            this._highlightMaxDay();
+            return;
+        }
+        this.highlightedDay.update(() => date.getDate());
+        if (date.getFullYear() !== this.activeYear()) {
+            this.activeYear.set(date.getFullYear());
+        }
+        if (date.getMonth() !== this.activeMonth()) {
+            this.activeMonth.set(date.getMonth());
+        }
+        this._emitHighlightedDate();
+        this._emitActivePageChange();
     }
-    //highlight previous entry
-    _onArrowLeftPress(event) {
-        event.preventDefault();
-        this.triggerHighlightPreviousMonth.emit(1);
+    _highlightMinDay() {
+        const min = this.min();
+        if (!isDefined(min))
+            return;
+        this.activeYear.set(min.getFullYear());
+        this.activeMonth.set(min.getMonth());
+        this.highlightedDay.set(min.getDate());
+        this._emitHighlightedDate();
+        this._emitActivePageChange();
     }
-    //highlight first entry on the page
-    _onHomePress(event) {
-        event.preventDefault();
-        this.triggerHighlightFirstMonth.emit();
+    _highlightMaxDay() {
+        const max = this.max();
+        if (!isDefined(max))
+            return;
+        this.activeYear.set(max.getFullYear());
+        this.activeMonth.set(max.getMonth());
+        this.highlightedDay.set(max.getDate());
+        this._emitHighlightedDate();
+        this._emitActivePageChange();
     }
-    //highlight last entry on the page
-    _onEndPress(event) {
-        event.preventDefault();
-        this.triggerHighlightLastMonth.emit();
+    highlightNextDay(offset = 1) {
+        const currentDay = this.highlightedDay();
+        const newDay = isDefined(currentDay) ? currentDay + offset : 1;
+        this.setHighlightedDay(newDay);
     }
-    //alone: highlight same entry on the next page
-    //with alt: highlight same entry multiple pages after (10 pages)
-    _onPageDownPress(event) {
-        event.preventDefault();
-        this.triggerHighlightSameMonthNextPage.emit(event.altKey);
+    highlightPreviousDay(offset = 1) {
+        this.highlightNextDay(offset * -1);
     }
-    //alone: highlight same entry on the previous page
-    //with alt: highlight same entry multiple pages before (10 pages)
-    _onPageUpPress(event) {
-        event.preventDefault();
-        this.triggerHighlightSameMonthPreviousPage.emit(event.altKey);
+    highlightFirstDay() {
+        this.setHighlightedDay(1);
     }
-    //! helpers
-    isMonthToday(month) {
-        return this.activeYear() === TODAY$1.getFullYear() && month === TODAY$1.getMonth();
+    highlightLastDay() {
+        const daysInMonth = createDate(this.activeYear(), this.activeMonth() + 1, 0, this.UTC()).getDate();
+        this.setHighlightedDay(daysInMonth);
     }
-    isMonthSelected(month) {
-        if (month instanceof Date)
-            month = month.getMonth();
-        const isStartDateSelected = this.isMonthSelectedStart(month);
-        if (this.rangeSelectionMode()) {
-            const isEndDateSelected = this.isMonthSelectedEnd(month);
-            return isStartDateSelected || isEndDateSelected;
-        }
-        return isStartDateSelected;
+    highlightSameDayNextMonth() {
+        const month = this.activeMonth();
+        const year = this.activeYear();
+        const newMonth = month + 1;
+        const newYear = year + Math.floor(newMonth / 12);
+        this.setHighlightedDay(this.highlightedDay(), newMonth % 12, newYear);
     }
-    isMonthSelectedStart(month) {
-        if (month instanceof Date)
-            month = month.getMonth();
-        const selected = this.selectedDate();
-        const { year, month: selectedMonth } = getDateComponents(selected, this.UTC());
-        const isStartDateSelected = selected !== null && this.activeYear() === year && month === selectedMonth;
-        return isStartDateSelected;
+    highlightSameDayPreviousMonth() {
+        const month = this.activeMonth();
+        const year = this.activeYear();
+        const newMonth = month - 1;
+        const newYear = year + Math.floor(newMonth / 12);
+        this.setHighlightedDay(this.highlightedDay(), newMonth % 12, newYear);
     }
-    isMonthSelectedEnd(month) {
-        if (month instanceof Date)
-            month = month.getMonth();
-        const selected = this.selectedDateEnd();
-        const { year, month: selectedMonth } = getDateComponents(selected, this.UTC());
-        const isEndDateSelected = selected !== null && this.activeYear() === year && month === selectedMonth;
-        return isEndDateSelected;
+    highlightSameDayNextYear() {
+        this.setHighlightedDay(this.highlightedDay(), this.activeMonth(), this.activeYear() + 1);
     }
-    isMonthBetweenSelectedRange(month) {
-        if (!this.rangeSelectionMode())
-            return false;
-        if (month instanceof Date)
-            month = month.getMonth();
-        const selected = this.selectedDate();
-        const selectedEnd = this.selectedDateEnd();
-        if (selected === null || selectedEnd === null || selected >= selectedEnd)
-            return false;
-        return this._isMonthBetweenDates(month, selected, selectedEnd);
+    highlightSameDayPreviousYear() {
+        this.setHighlightedDay(this.highlightedDay(), this.activeMonth(), this.activeYear() - 1);
     }
-    isMonthBetweenSelectedHighlighted(month) {
-        if (!this.rangeSelectionMode() || this.selectedDateEnd())
-            return false;
+    //! selecting months
+    isMonthSelected(month) {
         if (month instanceof Date)
             month = month.getMonth();
-        const selected = this.selectedDate();
-        const highlightedEnd = this.highlightedMonthDate();
-        if (selected === null || highlightedEnd === null || selected >= highlightedEnd)
-            return false;
-        return this._isMonthBetweenDates(month, selected, highlightedEnd);
-    }
-    _isMonthBetweenDates(month, startDate, endDate) {
-        const { year: startYear, month: startMonth } = getDateComponents(startDate, this.UTC());
-        const { year: endYear, month: endMonth } = getDateComponents(endDate, this.UTC());
-        return startYear <= this.activeYear() && startMonth <= month && endYear >= this.activeYear() && endMonth >= month;
+        return (this.selectionStart() !== null &&
+            this.activeYear() === this.selectionStart()?.getFullYear() &&
+            month === this.selectionStart()?.getMonth());
     }
-    isYearOutOfRange(year) {
-        return isYearOutOfRange(year, this.min(), this.max());
+    isMonthOutOfRange(month, year = this.activeYear()) {
+        return isMonthOutOfRange(month, year, this.min(), this.max());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MonthsViewComponent, isStandalone: false, selector: "ard-months-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, highlightedMonth: { classPropertyName: "highlightedMonth", publicName: "highlightedMonth", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderTemplate: { classPropertyName: "monthsViewHeaderTemplate", publicName: "monthsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectMonth: "triggerSelectMonth", triggeChangeYear: "triggeChangeYear", triggerHighlightMonth: "triggerHighlightMonth", triggerHighlightNextMonth: "triggerHighlightNextMonth", triggerHighlightPreviousMonth: "triggerHighlightPreviousMonth", triggerHighlightFirstMonth: "triggerHighlightFirstMonth", triggerHighlightLastMonth: "triggerHighlightLastMonth", triggerHighlightSameMonthPreviousPage: "triggerHighlightSameMonthPreviousPage", triggerHighlightSameMonthNextPage: "triggerHighlightSameMonthNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\r\n    <ng-template\r\n      #defaultMonthsViewHeaderTemplate\r\n      let-date=\"date\"\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"prevPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToPreviousPage\"\r\n          >\r\n            <ard-icon>chevron_left</ard-icon>\r\n          </ard-icon-button>\r\n          }\r\n        </div>\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          variant=\"pill\"\r\n          [color]=\"color()\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ date | date : monthsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"nextPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToNextPage\"\r\n          >\r\n            <ard-icon>chevron_right</ard-icon>\r\n          </ard-icon-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n      [class.ard-calendar__entry-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(month.value)\"\r\n      [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n      [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n      [class.ard-calendar__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(month.value)\"\r\n      [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n      (click)=\"onCalendarMonthClick(month.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-calendar__entry-button\"\r\n        tabindex=\"-1\"\r\n      >\r\n        <div class=\"ard-range-overlay\"></div>\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultMonthTemplate\r\n            let-month\r\n          >\r\n            {{ month | date : monthDateFormat() : '+0000' | uppercase }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n            [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n          />\r\n        </div>\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-months-view{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'ard-months-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\r\n    <ng-template\r\n      #defaultMonthsViewHeaderTemplate\r\n      let-date=\"date\"\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"prevPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToPreviousPage\"\r\n          >\r\n            <ard-icon>chevron_left</ard-icon>\r\n          </ard-icon-button>\r\n          }\r\n        </div>\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          variant=\"pill\"\r\n          [color]=\"color()\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ date | date : monthsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"nextPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToNextPage\"\r\n          >\r\n            <ard-icon>chevron_right</ard-icon>\r\n          </ard-icon-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n      [class.ard-calendar__entry-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(month.value)\"\r\n      [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n      [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n      [class.ard-calendar__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(month.value)\"\r\n      [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n      (click)=\"onCalendarMonthClick(month.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-calendar__entry-button\"\r\n        tabindex=\"-1\"\r\n      >\r\n        <div class=\"ard-range-overlay\"></div>\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultMonthTemplate\r\n            let-month\r\n          >\r\n            {{ month | date : monthDateFormat() : '+0000' | uppercase }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n            [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n          />\r\n        </div>\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-months-view{display:block}}\n"] }]
-        }], propDecorators: { onMouseMove: [{
-                type: HostListener,
-                args: ['mousemove']
-            }] } });
-
-const TODAY = new Date();
-class YearsViewComponent {
-    constructor() {
-        this.tabIndex = input.required();
-        this.readOnly = input.required();
-        this.disabled = input.required();
-        this.autoFocus = input.required();
-        this._isUsingKeyboard = input.required();
-        this.selectedDate = input.required();
-        this.selectedDateEnd = input.required();
-        this.rangeSelectionMode = input.required();
-        this.UTC = input.required();
-        this.min = input.required();
-        this.max = input.required();
-        this.multiCalendarLocation = input.required();
-        this.currentYearRangeStart = input.required();
-        this.multipleYearPageSize = input.required();
-        this.yearsArray = computed(() => getCalendarYearsArray(this.currentYearRangeStart(), this.multipleYearPageSize(), this.min(), this.max()));
-        this.currentAriaLabel = computed(() => {
-            return this.highlightedYear()?.toString() ?? '';
-        });
-        //! outputs
-        this.triggerOpenMonthsView = output();
-        this.triggerOpenDaysView = output();
-        this.focusEvent = output({ alias: 'focus' });
-        this.blurEvent = output({ alias: 'blur' });
-        this.triggerSelectYear = output();
-        this.triggerChangeYearsViewPage = output();
-        this.triggerHighlightYear = output();
-        this.triggerHighlightNextYear = output();
-        this.triggerHighlightPreviousYear = output();
-        this.triggerHighlightFirstYear = output();
-        this.triggerHighlightLastYear = output();
-        this.triggerHighlightSameYearPreviousPage = output();
-        this.triggerHighlightSameYearNextPage = output();
-        //! calendar entry hover & click
-        this.highlightedYear = input.required();
-        this.highlightedYearDate = computed(() => {
-            const year = this.highlightedYear();
-            if (isNull(year))
-                return null;
-            return new Date(year, 0, 1);
-        });
-        //! focusing
-        this.focusableElement = viewChild.required('focusableElement');
-        //! templates
-        this.yearsViewHeaderTemplate = input.required();
-        this.yearTemplate = input.required();
-        //! template customizations
-        this.yearsViewHeaderDateFormat = input.required(); // 'YYYY'
-        this.yearDateFormat = input.required(); // 'YYYY'
-        //! template contexts
-        this.yearsViewHeaderContext = computed(() => {
-            const yearRangeStart = this.currentYearRangeStart();
-            const yearRangeEnd = yearRangeStart + 23;
-            const dateRange = new DateRange(getUTCDate(yearRangeStart, 0, 2), // second day of month to prevent timezone issues
-            getUTCDate(yearRangeEnd, 0, 2));
-            const yearRange = {
-                from: yearRangeStart,
-                to: yearRangeEnd,
-            };
-            return {
-                nextPage: () => {
-                    this.triggerChangeYearsViewPage.emit(1);
-                },
-                prevPage: () => {
-                    this.triggerChangeYearsViewPage.emit(-1);
-                },
-                openMonthsView: () => {
-                    this.triggerOpenMonthsView.emit();
-                },
-                openDaysView: () => {
-                    this.triggerOpenDaysView.emit();
-                },
-                canGoToNextPage: !this.isYearOutOfRange(yearRangeEnd + 1),
-                canGoToPreviousPage: !this.isYearOutOfRange(yearRangeStart - 1),
-                hideNextPageButton: this.multiCalendarLocation() === ArdMultiCalendarLocation.Left ||
-                    this.multiCalendarLocation() === ArdMultiCalendarLocation.Inner,
-                hidePreviousPageButton: this.multiCalendarLocation() === ArdMultiCalendarLocation.Right ||
-                    this.multiCalendarLocation() === ArdMultiCalendarLocation.Inner,
-                yearRange: yearRange,
-                dateRange,
-                $implicit: dateRange,
-            };
-        });
-        this.yearContext = computed(() => {
-            return (year) => {
-                const date = getUTCDate(year, 1, 2); // second day of month to prevent timezone issues
-                return {
-                    value: year,
-                    date,
-                    $implicit: date,
-                    select: (year) => {
-                        this.triggerSelectYear.emit(year);
-                    },
-                };
-            };
-        });
+    changeMonth(newMonth) {
+        if (isNull(newMonth)) {
+            this.activeMonth.set(this.TODAY().getMonth());
+            this._emitActivePageChange();
+            return true;
+        }
+        if (this.isMonthOutOfRange(newMonth))
+            return false;
+        if (newMonth > 11) {
+            this.activeYear.update(v => v + 1);
+            this.activeMonth.set(0);
+        }
+        else if (newMonth < 0) {
+            this.activeYear.update(v => v - 1);
+            this.activeMonth.set(11);
+        }
+        else {
+            this.activeMonth.set(newMonth);
+        }
+        this._emitActivePageChange();
+        return true;
     }
-    onMouseMove() {
-        if (this._isUsingKeyboard())
+    selectMonth(newMonth) {
+        if (isNull(newMonth) || this.isMonthOutOfRange(newMonth))
             return;
-        if (this.highlightedYear())
-            this.triggerHighlightYear.emit(null);
-    }
-    ngAfterViewInit() {
-        if (!this.autoFocus())
+        const wasSuccessful = this.changeMonth(newMonth);
+        if (!wasSuccessful)
             return;
-        this.focus();
-        this.triggerHighlightYear.emit(this.currentYearRangeStart());
+        this.openDaysView();
+        this.monthSelect.emit(newMonth);
     }
-    onCalendarYearMouseover(year) {
-        if (this._isUsingKeyboard() || this.disabled() || this.readOnly())
+    selectCurrentlyHighlightedMonth() {
+        if (!isDefined(this.highlightedMonth()))
             return;
-        this.triggerHighlightYear.emit(year);
+        this.selectMonth(this.highlightedMonth());
     }
-    onCalendarYearClick(year) {
-        if (this.disabled() || this.readOnly())
+    setHighlightedMonth(month, year = this.activeYear()) {
+        if (isNull(month)) {
+            this._highlightedMonth.update(() => month);
             return;
-        this.triggerSelectYear.emit(year);
-    }
-    onYearGridFocus() {
-        if (this.disabled() || this.readOnly())
+        }
+        const date = createDate(year, month, 15, this.UTC());
+        const outOfRange = this.isMonthOutOfRange(month, year);
+        if (outOfRange === -1) {
+            this._highlightMinMonth();
             return;
-        this.triggerHighlightFirstYear.emit();
-    }
-    onYearGridBlur() {
-        if (this.disabled() || this.readOnly())
+        }
+        if (outOfRange === 1) {
+            this._highlightMaxMonth();
             return;
-        this.triggerHighlightYear.emit(null);
+        }
+        this._highlightedMonth.update(() => date.getMonth());
+        if (date.getFullYear() !== this.activeYear()) {
+            this.activeYear.set(date.getFullYear());
+            this._emitActivePageChange();
+        }
     }
-    onYearGridClick() {
-        if (this.disabled() || this.readOnly())
+    _highlightMinMonth() {
+        const min = this.min();
+        if (!isDefined(min))
             return;
-        if (this.highlightedYear() !== null)
+        this.activeYear.set(min.getFullYear());
+        this._emitActivePageChange();
+        this._highlightedMonth.set(min.getMonth());
+    }
+    _highlightMaxMonth() {
+        const max = this.max();
+        if (!isDefined(max))
             return;
-        this.triggerHighlightFirstYear.emit();
+        this.activeYear.set(max.getFullYear());
+        this._emitActivePageChange();
+        this._highlightedMonth.set(max.getMonth());
     }
-    //! helpers
-    isYearToday(year) {
-        return year === TODAY.getFullYear();
+    highlightNextMonth(offset = 1) {
+        const currentMonth = this.highlightedMonth();
+        const newMonth = isDefined(currentMonth) ? currentMonth + offset : 0;
+        this.setHighlightedMonth(newMonth);
+    }
+    highlightPreviousMonth(offset = 1) {
+        this.highlightNextMonth(offset * -1);
+    }
+    highlightFirstMonth() {
+        this.setHighlightedMonth(0);
+    }
+    highlightLastMonth() {
+        this.setHighlightedMonth(11);
+    }
+    highlightSameMonthNextYear(multiple) {
+        this.setHighlightedMonth(this.highlightedMonth(), this.activeYear() + (multiple ? 10 : 1));
+    }
+    highlightSameMonthPreviousYear(multiple) {
+        this.setHighlightedMonth(this.highlightedMonth(), this.activeYear() - (multiple ? 10 : 1));
     }
+    //! selecting years
     isYearSelected(year) {
         if (year instanceof Date)
             year = year.getFullYear();
-        const isStartDateSelected = this.isYearSelectedStart(year);
-        if (this.rangeSelectionMode()) {
-            const isEndDateSelected = this.isYearSelectedEnd(year);
-            return isStartDateSelected || isEndDateSelected;
-        }
-        return isStartDateSelected;
-    }
-    isYearSelectedStart(year) {
-        if (year instanceof Date)
-            year = year.getFullYear();
-        const selected = this.selectedDate();
-        const { year: selectedYear } = getDateComponents(selected, this.UTC());
-        const isStartDateSelected = selected !== null && year === selectedYear;
-        return isStartDateSelected;
+        return this.selectionStart() !== null && year === this.selectionStart()?.getFullYear();
     }
-    isYearSelectedEnd(year) {
-        if (year instanceof Date)
-            year = year.getFullYear();
-        const selected = this.selectedDateEnd();
-        const { year: selectedYear } = getDateComponents(selected, this.UTC());
-        const isEndDateSelected = selected !== null && year === selectedYear;
-        return isEndDateSelected;
+    isYearOutOfRange(year) {
+        return isYearOutOfRange(year, this.min(), this.max());
     }
-    isYearBetweenSelectedRange(year) {
-        if (!this.rangeSelectionMode())
-            return false;
-        if (year instanceof Date)
-            year = year.getFullYear();
-        const selected = this.selectedDate();
-        const selectedEnd = this.selectedDateEnd();
-        if (selected === null || selectedEnd === null || selected >= selectedEnd)
+    changeYear(year) {
+        if (isNull(year)) {
+            this.activeYear.set(this.TODAY().getFullYear());
+            this._emitActivePageChange();
+            return true;
+        }
+        if (this.isYearOutOfRange(year))
             return false;
-        return this._isYearBetweenDates(year, selected, selectedEnd);
+        this.activeYear.set(year);
+        this._emitActivePageChange();
+        return true;
     }
-    isYearBetweenSelectedHighlighted(year) {
-        if (!this.rangeSelectionMode() || this.selectedDateEnd())
-            return false;
+    selectYear(year) {
+        if (isNull(year))
+            return;
         if (year instanceof Date)
             year = year.getFullYear();
-        const selected = this.selectedDate();
-        const highlightedEnd = this.highlightedYearDate();
-        if (selected === null || highlightedEnd === null || selected >= highlightedEnd)
-            return false;
-        return this._isYearBetweenDates(year, selected, highlightedEnd);
+        const wasSuccessful = this.changeYear(year);
+        if (!wasSuccessful)
+            return;
+        this.openMonthsView();
+        this.yearSelect.emit(year);
     }
-    _isYearBetweenDates(year, startDate, endDate) {
-        const { year: startYear } = getDateComponents(startDate, this.UTC());
-        const { year: endYear } = getDateComponents(endDate, this.UTC());
-        return startYear <= year && endYear >= year;
+    selectCurrentlyHighlightedYear() {
+        if (!isDefined(this.highlightedYear()))
+            return;
+        this.selectYear(this.highlightedYear());
     }
-    isYearOutOfRange(year) {
-        return isYearOutOfRange(year, this.min(), this.max());
+    setHighlightedYear(year) {
+        if (isNull(year)) {
+            this.__highlightedYear.update(() => year);
+            return;
+        }
+        const date = createDate(year, 0, 1, this.UTC());
+        const outOfRange = this.isYearOutOfRange(year);
+        if (outOfRange === -1) {
+            this._highlightMinYear();
+            return;
+        }
+        if (outOfRange === 1) {
+            this._highlightMaxYear();
+            return;
+        }
+        const newYear = date.getFullYear();
+        this.__highlightedYear.update(() => newYear);
+        if (newYear < this.currentYearRangeStart() || newYear >= this.currentYearRangeStart() + this.multipleYearPageSize()) {
+            // round the offset away from zero: 0.1 -> 1, -0.1 -> -1
+            // this is to ensure the range start is always shifted by n years
+            const offset = roundFromZero((newYear - this.currentYearRangeStart()) / this.multipleYearPageSize());
+            this.currentYearRangeStart.update(v => v + offset * this.multipleYearPageSize());
+        }
     }
-    focus() {
-        this.focusableElement().nativeElement.focus();
+    changeYearsViewPage(offset) {
+        const newYearRangeStart = this.currentYearRangeStart() + offset * this.multipleYearPageSize();
+        this.currentYearRangeStart.set(newYearRangeStart);
     }
-    //! keyboard controls
-    onMainGridKeydown(event) {
-        if (this.disabled() || this.readOnly())
+    _highlightMinYear() {
+        const min = this.min();
+        if (!isDefined(min))
             return;
-        switch (event.code) {
-            case 'Space':
-            case 'Enter':
-                this._onEnterPress(event);
-                break;
-            case 'ArrowUp':
-                this._onArrowUpPress(event);
-                break;
-            case 'ArrowDown':
-                this._onArrowDownPress(event);
-                break;
-            case 'ArrowLeft':
-                this._onArrowLeftPress(event);
-                break;
-            case 'ArrowRight':
-                this._onArrowRightPress(event);
-                break;
-            case 'Home':
-                this._onHomePress(event);
-                break;
-            case 'End':
-                this._onEndPress(event);
-                break;
-            case 'PageUp':
-                this._onPageUpPress(event);
-                break;
-            case 'PageDown':
-                this._onPageDownPress(event);
-                break;
-            default:
-                return;
-        }
+        this.__highlightedYear.set(min.getFullYear());
     }
-    //select currently selected entry
-    _onEnterPress(event) {
-        event.preventDefault();
-        const year = this.highlightedYear();
-        if (isNull(year))
+    _highlightMaxYear() {
+        const max = this.max();
+        if (!isDefined(max))
             return;
-        this.triggerSelectYear.emit(year);
+        this.__highlightedYear.set(max.getFullYear());
     }
-    //highlight the entry one line below
-    _onArrowDownPress(event) {
-        event.preventDefault();
-        this.triggerHighlightNextYear.emit(4); //4 years per line
+    highlightNextYear(offset = 1) {
+        const currentYear = this.highlightedYear();
+        const newYear = isDefined(currentYear) ? currentYear + offset : null;
+        this.setHighlightedYear(newYear);
     }
-    //highlight the entry one line above
-    _onArrowUpPress(event) {
-        event.preventDefault();
-        this.triggerHighlightPreviousYear.emit(4); //4 years per line
+    highlightPreviousYear(offset = 1) {
+        this.highlightNextYear(offset * -1);
     }
-    //highlight next entry
-    _onArrowRightPress(event) {
-        event.preventDefault();
-        this.triggerHighlightNextYear.emit(1);
+    highlightFirstYear() {
+        this.setHighlightedYear(this.currentYearRangeStart());
     }
-    //highlight previous entry
-    _onArrowLeftPress(event) {
-        event.preventDefault();
-        this.triggerHighlightPreviousYear.emit(1);
+    highlightLastYear() {
+        this.setHighlightedYear(this.currentYearRangeStart() + this.multipleYearPageSize() - 1);
     }
-    //highlight first entry on the page
-    _onHomePress(event) {
-        event.preventDefault();
-        this.triggerHighlightFirstYear.emit();
+    highlightSameYearNextPage(multiple) {
+        const year = this.highlightedYear() ?? this.currentYearRangeStart();
+        this.setHighlightedYear(year + (multiple ? this.multipleYearPageChangeModifier() : 1) * this.multipleYearPageSize());
     }
-    //highlight last entry on the page
-    _onEndPress(event) {
-        event.preventDefault();
-        this.triggerHighlightLastYear.emit();
+    highlightSameYearPreviousPage(multiple) {
+        const year = this.highlightedYear() ?? this.currentYearRangeStart();
+        this.setHighlightedYear(year - (multiple ? this.multipleYearPageChangeModifier() : 1) * this.multipleYearPageSize());
     }
-    //alone: highlight same entry on the previous page
-    //with alt: highlight same entry multiple pages before
-    _onPageUpPress(event) {
-        event.preventDefault();
-        this.triggerHighlightSameYearPreviousPage.emit(event.altKey);
+    onDocumentMousemove() {
+        this._isUsingKeyboard.set(false);
     }
-    //alone: highlight same entry on the next page
-    //with alt: highlight same entry multiple pages after
-    _onPageDownPress(event) {
-        event.preventDefault();
-        this.triggerHighlightSameYearNextPage.emit(event.altKey);
+    onDocumentKeydown() {
+        this._isUsingKeyboard.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: YearsViewComponent, isStandalone: false, selector: "ard-years-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, multipleYearPageSize: { classPropertyName: "multipleYearPageSize", publicName: "multipleYearPageSize", isSignal: true, isRequired: true, transformFunction: null }, highlightedYear: { classPropertyName: "highlightedYear", publicName: "highlightedYear", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderTemplate: { classPropertyName: "yearsViewHeaderTemplate", publicName: "yearsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenMonthsView: "triggerOpenMonthsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectYear: "triggerSelectYear", triggerChangeYearsViewPage: "triggerChangeYearsViewPage", triggerHighlightYear: "triggerHighlightYear", triggerHighlightNextYear: "triggerHighlightNextYear", triggerHighlightPreviousYear: "triggerHighlightPreviousYear", triggerHighlightFirstYear: "triggerHighlightFirstYear", triggerHighlightLastYear: "triggerHighlightLastYear", triggerHighlightSameYearPreviousPage: "triggerHighlightSameYearPreviousPage", triggerHighlightSameYearNextPage: "triggerHighlightSameYearNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-years-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\r\n    <ng-template\r\n      #defaultYearsViewHeaderTemplate\r\n      let-dateRange=\"dateRange\"\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"prevPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToPreviousPage\"\r\n          >\r\n            <ard-icon>chevron_left</ard-icon>\r\n          </ard-icon-button>\r\n          }\r\n        </div>\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          variant=\"pill\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ dateRange.from | date : yearsViewHeaderDateFormat() }}\r\n          &mdash;\r\n          {{ dateRange.to | date : yearsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"nextPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToNextPage\"\r\n          >\r\n            <ard-icon>chevron_right</ard-icon>\r\n          </ard-icon-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onYearGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onYearGridBlur()\"\r\n    (click)=\"onYearGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (year of yearsArray(); track year) {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n      [class.ard-calendar__entry-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(year.value)\"\r\n      [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n      [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n      [class.ard-calendar__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(year.value)\"\r\n      [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n      (click)=\"onCalendarYearClick(year.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-calendar__entry-button\"\r\n        tabindex=\"-1\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <div class=\"ard-range-overlay\"></div>\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultYearTemplate\r\n            let-year\r\n          >\r\n            {{ year | date : yearDateFormat() }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n            [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n          />\r\n        </div>\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-years-view{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractCalendar, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _AbstractCalendar, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: true, isRequired: false, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: false, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: false, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: false, transformFunction: null }, multipleYearPageChangeModifier: { classPropertyName: "multipleYearPageChangeModifier", publicName: "multipleYearPageChangeModifier", isSignal: true, isRequired: false, transformFunction: null }, multipleYearOffset: { classPropertyName: "multipleYearOffset", publicName: "multipleYearOffset", isSignal: true, isRequired: false, transformFunction: null }, multipleYearPageSize: { classPropertyName: "multipleYearPageSize", publicName: "multipleYearPageSize", isSignal: true, isRequired: false, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, staticHeight: { classPropertyName: "staticHeight", publicName: "staticHeight", isSignal: true, isRequired: false, transformFunction: null }, hideFloatingMonth: { classPropertyName: "hideFloatingMonth", publicName: "hideFloatingMonth", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, highlightedDay: { classPropertyName: "highlightedDay", publicName: "highlightedDay", isSignal: true, isRequired: false, transformFunction: null }, daysViewHeaderDateFormat: { classPropertyName: "daysViewHeaderDateFormat", publicName: "daysViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, weekdayDateFormat: { classPropertyName: "weekdayDateFormat", publicName: "weekdayDateFormat", isSignal: true, isRequired: false, transformFunction: null }, weekdayTitleDateFormat: { classPropertyName: "weekdayTitleDateFormat", publicName: "weekdayTitleDateFormat", isSignal: true, isRequired: false, transformFunction: null }, floatingMonthDateFormat: { classPropertyName: "floatingMonthDateFormat", publicName: "floatingMonthDateFormat", isSignal: true, isRequired: false, transformFunction: null }, floatingMonthTitleDateFormat: { classPropertyName: "floatingMonthTitleDateFormat", publicName: "floatingMonthTitleDateFormat", isSignal: true, isRequired: false, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", isSignal: true, isRequired: false, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", isSignal: true, isRequired: false, transformFunction: null }, dayDateFormat: { classPropertyName: "dayDateFormat", publicName: "dayDateFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeView: "activeViewChange", activeYear: "activeYearChange", activeMonth: "activeMonthChange", activePageChange: "activePageChange", yearSelect: "yearSelect", monthSelect: "monthSelect", highlightedDay: "highlightedDayChange", highlightDayEvent: "highlightDay" }, host: { listeners: { "document:mousemove": "onDocumentMousemove()", "document:keydown": "onDocumentKeydown()" } }, queries: [{ propertyName: "templateRepository", first: true, predicate: _CalendarTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "yearsViewHeaderTemplate", first: true, predicate: ArdCalendarYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthsViewHeaderTemplate", first: true, predicate: ArdCalendarMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "daysViewHeaderTemplate", first: true, predicate: ArdCalendarDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "floatingMonthTemplate", first: true, predicate: ArdCalendarFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearTemplate", first: true, predicate: ArdCalendarYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthTemplate", first: true, predicate: ArdCalendarMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dayTemplate", first: true, predicate: ArdCalendarDayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "weekdayTemplate", first: true, predicate: ArdCalendarWeekdayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "daysViewComponent", first: true, predicate: DaysViewComponent, descendants: true, isSignal: true }, { propertyName: "monthsViewComponent", first: true, predicate: MonthsViewComponent, descendants: true, isSignal: true }, { propertyName: "yearsViewComponent", first: true, predicate: YearsViewComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'ard-years-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-years-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\r\n    <ng-template\r\n      #defaultYearsViewHeaderTemplate\r\n      let-dateRange=\"dateRange\"\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"prevPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToPreviousPage\"\r\n          >\r\n            <ard-icon>chevron_left</ard-icon>\r\n          </ard-icon-button>\r\n          }\r\n        </div>\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          variant=\"pill\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ dateRange.from | date : yearsViewHeaderDateFormat() }}\r\n          &mdash;\r\n          {{ dateRange.to | date : yearsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\r\n          <ard-icon-button\r\n            size=\"small\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            (click)=\"nextPage()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            [disabled]=\"!canGoToNextPage\"\r\n          >\r\n            <ard-icon>chevron_right</ard-icon>\r\n          </ard-icon-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onYearGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onYearGridBlur()\"\r\n    (click)=\"onYearGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (year of yearsArray(); track year) {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n      [class.ard-calendar__entry-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(year.value)\"\r\n      [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n      [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n      [class.ard-calendar__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(year.value)\"\r\n      [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n      (click)=\"onCalendarYearClick(year.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-calendar__entry-button\"\r\n        tabindex=\"-1\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <div class=\"ard-range-overlay\"></div>\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultYearTemplate\r\n            let-year\r\n          >\r\n            {{ year | date : yearDateFormat() }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n            [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n          />\r\n        </div>\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-years-view{display:block}}\n"] }]
-        }], propDecorators: { onMouseMove: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractCalendar, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: () => [{ type: undefined }], propDecorators: { onDocumentMousemove: [{
                 type: HostListener,
-                args: ['mousemove']
+                args: ['document:mousemove']
+            }], onDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown']
             }] } });
 
+const _calendarDefaults = {
+    ..._formFieldComponentDefaults,
+    color: ComponentColor.Primary,
+    activeView: ArdCalendarView.Days,
+    activeYear: new Date().getFullYear(),
+    activeMonth: new Date().getMonth(),
+    firstWeekday: 1,
+    multipleYearPageChangeModifier: 5,
+    multipleYearOffset: 2,
+    multipleYearPageSize: 24,
+    staticHeight: false,
+    hideFloatingMonth: false,
+    autoFocus: false,
+    multiCalendarLocation: ArdMultiCalendarLocation.Only,
+    min: null,
+    max: null,
+    filter: null,
+    UTC: false,
+    // template customizations
+    daysViewHeaderDateFormat: 'MMM yyyy',
+    yearsViewHeaderDateFormat: 'yyyy',
+    monthsViewHeaderDateFormat: 'yyyy',
+    weekdayDateFormat: 'EEEEE',
+    weekdayTitleDateFormat: 'EEEE',
+    floatingMonthDateFormat: 'LLL',
+    floatingMonthTitleDateFormat: 'LLLL',
+    yearDateFormat: 'yyyy',
+    monthDateFormat: 'MMM',
+    dayDateFormat: 'd',
+};
+const ARD_CALENDAR_DEFAULTS = new InjectionToken('ard-calendar-defaults', {
+    factory: () => ({
+        ..._calendarDefaults,
+    }),
+});
+function provideCalendarDefaults(config) {
+    return { provide: ARD_CALENDAR_DEFAULTS, useValue: { ..._calendarDefaults, ...config } };
+}
+
 class ArdiumCalendarComponent extends _AbstractCalendar {
     constructor(defaults) {
         super(defaults);
@@ -8118,7 +8141,7 @@ class ArdiumCalendarComponent extends _AbstractCalendar {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumCalendarComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @case ('days') {\r\n  <ard-days-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n    (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n    (triggerChangeMonth)=\"changeMonth($event)\"\r\n    (triggerChangeYear)=\"changeYear($event)\"\r\n    (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n    (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n    (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n    (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n    (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n    (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n    (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n    (triggerSelectDay)=\"selectDay($event)\"\r\n  />\r\n  } @case ('months') {\r\n  <ard-months-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [color]=\"color()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n    (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n    (triggeChangeYear)=\"changeYear($event)\"\r\n    (triggerSelectMonth)=\"selectMonth($event)\"\r\n    (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n    (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n    (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n    (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n    (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n    (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n    (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n  />\r\n  } @case ('years') {\r\n  <ard-years-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [highlightedYear]=\"highlightedYear()\"\r\n    [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n    (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n    (triggerSelectYear)=\"selectYear($event)\"\r\n    (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n    (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n    (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n    (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n    (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n    (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n    (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n    (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n  />\r\n  } }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-calendar,ard-range-calendar{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DaysViewComponent, selector: "ard-days-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "activeMonth", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "isDayFilteredOut", "highlightedDay", "firstWeekday", "staticHeight", "hideFloatingMonth", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate", "daysViewHeaderDateFormat", "weekdayDateFormat", "weekdayTitleDateFormat", "floatingMonthDateFormat", "floatingMonthTitleDateFormat", "dayDateFormat"], outputs: ["triggerOpenYearsView", "triggerOpenMonthsView", "triggerSelectDay", "triggerChangeMonth", "triggerChangeYear", "triggerHighlightDay", "triggerHighlightNextDay", "triggerHighlightPreviousDay", "triggerHighlightFirstDay", "triggerHighlightLastDay", "triggerHighlightSameDayPreviousPage", "triggerHighlightSameDayNextPage", "focus", "blur"] }, { kind: "component", type: MonthsViewComponent, selector: "ard-months-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "color", "activeYear", "activeMonth", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate", "monthsViewHeaderDateFormat", "monthDateFormat"], outputs: ["triggerOpenYearsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectMonth", "triggeChangeYear", "triggerHighlightMonth", "triggerHighlightNextMonth", "triggerHighlightPreviousMonth", "triggerHighlightFirstMonth", "triggerHighlightLastMonth", "triggerHighlightSameMonthPreviousPage", "triggerHighlightSameMonthNextPage"] }, { kind: "component", type: YearsViewComponent, selector: "ard-years-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "currentYearRangeStart", "multipleYearPageSize", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate", "yearsViewHeaderDateFormat", "yearDateFormat"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @case ('days') {\r\n  <ard-days-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenMonthsView)=\"openMonthsView()\"\r\n    (triggerOpenYearsView)=\"openYearsView()\"\r\n    (triggerChangeMonth)=\"changeMonth($event)\"\r\n    (triggerChangeYear)=\"changeYear($event)\"\r\n    (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n    (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n    (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n    (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n    (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n    (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n    (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n    (triggerSelectDay)=\"selectDay($event)\"\r\n  />\r\n  } @case ('months') {\r\n  <ard-months-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [color]=\"color()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"openDaysView()\"\r\n    (triggerOpenYearsView)=\"openYearsView()\"\r\n    (triggeChangeYear)=\"changeYear($event)\"\r\n    (triggerSelectMonth)=\"selectMonth($event)\"\r\n    (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n    (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n    (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n    (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n    (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n    (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n    (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n  />\r\n  } @case ('years') {\r\n  <ard-years-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [highlightedYear]=\"highlightedYear()\"\r\n    [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"openDaysView()\"\r\n    (triggerOpenMonthsView)=\"openMonthsView()\"\r\n    (triggerSelectYear)=\"selectYear($event)\"\r\n    (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n    (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n    (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n    (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n    (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n    (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n    (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n    (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n  />\r\n  } }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-calendar,ard-range-calendar{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DaysViewComponent, selector: "ard-days-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "activeMonth", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "isDayFilteredOut", "highlightedDay", "firstWeekday", "staticHeight", "hideFloatingMonth", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate", "daysViewHeaderDateFormat", "weekdayDateFormat", "weekdayTitleDateFormat", "floatingMonthDateFormat", "floatingMonthTitleDateFormat", "dayDateFormat"], outputs: ["triggerOpenYearsView", "triggerOpenMonthsView", "triggerSelectDay", "triggerChangeMonth", "triggerChangeYear", "triggerHighlightDay", "triggerHighlightNextDay", "triggerHighlightPreviousDay", "triggerHighlightFirstDay", "triggerHighlightLastDay", "triggerHighlightSameDayPreviousPage", "triggerHighlightSameDayNextPage", "focus", "blur"] }, { kind: "component", type: MonthsViewComponent, selector: "ard-months-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "color", "activeYear", "activeMonth", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate", "monthsViewHeaderDateFormat", "monthDateFormat"], outputs: ["triggerOpenYearsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectMonth", "triggeChangeYear", "triggerHighlightMonth", "triggerHighlightNextMonth", "triggerHighlightPreviousMonth", "triggerHighlightFirstMonth", "triggerHighlightLastMonth", "triggerHighlightSameMonthPreviousPage", "triggerHighlightSameMonthNextPage"] }, { kind: "component", type: YearsViewComponent, selector: "ard-years-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "currentYearRangeStart", "multipleYearPageSize", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate", "yearsViewHeaderDateFormat", "yearDateFormat"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCalendarComponent, decorators: [{
             type: Component,
@@ -8132,7 +8155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumCalendarComponent,
                         },
-                    ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @case ('days') {\r\n  <ard-days-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n    (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n    (triggerChangeMonth)=\"changeMonth($event)\"\r\n    (triggerChangeYear)=\"changeYear($event)\"\r\n    (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n    (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n    (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n    (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n    (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n    (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n    (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n    (triggerSelectDay)=\"selectDay($event)\"\r\n  />\r\n  } @case ('months') {\r\n  <ard-months-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [color]=\"color()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n    (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n    (triggeChangeYear)=\"changeYear($event)\"\r\n    (triggerSelectMonth)=\"selectMonth($event)\"\r\n    (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n    (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n    (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n    (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n    (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n    (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n    (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n  />\r\n  } @case ('years') {\r\n  <ard-years-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [highlightedYear]=\"highlightedYear()\"\r\n    [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n    (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n    (triggerSelectYear)=\"selectYear($event)\"\r\n    (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n    (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n    (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n    (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n    (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n    (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n    (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n    (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n  />\r\n  } }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-calendar,ard-range-calendar{display:block}}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @case ('days') {\r\n  <ard-days-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenMonthsView)=\"openMonthsView()\"\r\n    (triggerOpenYearsView)=\"openYearsView()\"\r\n    (triggerChangeMonth)=\"changeMonth($event)\"\r\n    (triggerChangeYear)=\"changeYear($event)\"\r\n    (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n    (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n    (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n    (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n    (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n    (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n    (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n    (triggerSelectDay)=\"selectDay($event)\"\r\n  />\r\n  } @case ('months') {\r\n  <ard-months-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [color]=\"color()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"openDaysView()\"\r\n    (triggerOpenYearsView)=\"openYearsView()\"\r\n    (triggeChangeYear)=\"changeYear($event)\"\r\n    (triggerSelectMonth)=\"selectMonth($event)\"\r\n    (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n    (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n    (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n    (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n    (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n    (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n    (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n  />\r\n  } @case ('years') {\r\n  <ard-years-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [highlightedYear]=\"highlightedYear()\"\r\n    [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"openDaysView()\"\r\n    (triggerOpenMonthsView)=\"openMonthsView()\"\r\n    (triggerSelectYear)=\"selectYear($event)\"\r\n    (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n    (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n    (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n    (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n    (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n    (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n    (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n    (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n  />\r\n  } }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-calendar,ard-range-calendar{display:block}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CALENDAR_DEFAULTS]
@@ -8277,7 +8300,7 @@ class ArdiumRangeCalendarComponent extends _AbstractCalendar {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumRangeCalendarComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @case ('days') {\r\n  <ard-days-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n    (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n    (triggerChangeMonth)=\"changeMonth($event)\"\r\n    (triggerChangeYear)=\"changeYear($event)\"\r\n    (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n    (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n    (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n    (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n    (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n    (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n    (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n    (triggerSelectDay)=\"selectDay($event)\"\r\n  />\r\n  } @case ('months') {\r\n  <ard-months-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [color]=\"color()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n    (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n    (triggeChangeYear)=\"changeYear($event)\"\r\n    (triggerSelectMonth)=\"selectMonth($event)\"\r\n    (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n    (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n    (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n    (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n    (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n    (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n    (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n  />\r\n  } @case ('years') {\r\n  <ard-years-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [highlightedYear]=\"highlightedYear()\"\r\n    [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n    (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n    (triggerSelectYear)=\"selectYear($event)\"\r\n    (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n    (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n    (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n    (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n    (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n    (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n    (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n    (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n  />\r\n  } }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-calendar,ard-range-calendar{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DaysViewComponent, selector: "ard-days-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "activeMonth", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "isDayFilteredOut", "highlightedDay", "firstWeekday", "staticHeight", "hideFloatingMonth", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate", "daysViewHeaderDateFormat", "weekdayDateFormat", "weekdayTitleDateFormat", "floatingMonthDateFormat", "floatingMonthTitleDateFormat", "dayDateFormat"], outputs: ["triggerOpenYearsView", "triggerOpenMonthsView", "triggerSelectDay", "triggerChangeMonth", "triggerChangeYear", "triggerHighlightDay", "triggerHighlightNextDay", "triggerHighlightPreviousDay", "triggerHighlightFirstDay", "triggerHighlightLastDay", "triggerHighlightSameDayPreviousPage", "triggerHighlightSameDayNextPage", "focus", "blur"] }, { kind: "component", type: MonthsViewComponent, selector: "ard-months-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "color", "activeYear", "activeMonth", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate", "monthsViewHeaderDateFormat", "monthDateFormat"], outputs: ["triggerOpenYearsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectMonth", "triggeChangeYear", "triggerHighlightMonth", "triggerHighlightNextMonth", "triggerHighlightPreviousMonth", "triggerHighlightFirstMonth", "triggerHighlightLastMonth", "triggerHighlightSameMonthPreviousPage", "triggerHighlightSameMonthNextPage"] }, { kind: "component", type: YearsViewComponent, selector: "ard-years-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "currentYearRangeStart", "multipleYearPageSize", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate", "yearsViewHeaderDateFormat", "yearDateFormat"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @case ('days') {\r\n  <ard-days-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenMonthsView)=\"openMonthsView()\"\r\n    (triggerOpenYearsView)=\"openYearsView()\"\r\n    (triggerChangeMonth)=\"changeMonth($event)\"\r\n    (triggerChangeYear)=\"changeYear($event)\"\r\n    (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n    (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n    (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n    (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n    (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n    (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n    (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n    (triggerSelectDay)=\"selectDay($event)\"\r\n  />\r\n  } @case ('months') {\r\n  <ard-months-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [color]=\"color()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"openDaysView()\"\r\n    (triggerOpenYearsView)=\"openYearsView()\"\r\n    (triggeChangeYear)=\"changeYear($event)\"\r\n    (triggerSelectMonth)=\"selectMonth($event)\"\r\n    (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n    (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n    (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n    (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n    (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n    (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n    (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n  />\r\n  } @case ('years') {\r\n  <ard-years-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [highlightedYear]=\"highlightedYear()\"\r\n    [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"openDaysView()\"\r\n    (triggerOpenMonthsView)=\"openMonthsView()\"\r\n    (triggerSelectYear)=\"selectYear($event)\"\r\n    (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n    (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n    (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n    (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n    (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n    (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n    (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n    (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n  />\r\n  } }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-calendar,ard-range-calendar{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DaysViewComponent, selector: "ard-days-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "activeMonth", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "isDayFilteredOut", "highlightedDay", "firstWeekday", "staticHeight", "hideFloatingMonth", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate", "daysViewHeaderDateFormat", "weekdayDateFormat", "weekdayTitleDateFormat", "floatingMonthDateFormat", "floatingMonthTitleDateFormat", "dayDateFormat"], outputs: ["triggerOpenYearsView", "triggerOpenMonthsView", "triggerSelectDay", "triggerChangeMonth", "triggerChangeYear", "triggerHighlightDay", "triggerHighlightNextDay", "triggerHighlightPreviousDay", "triggerHighlightFirstDay", "triggerHighlightLastDay", "triggerHighlightSameDayPreviousPage", "triggerHighlightSameDayNextPage", "focus", "blur"] }, { kind: "component", type: MonthsViewComponent, selector: "ard-months-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "color", "activeYear", "activeMonth", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate", "monthsViewHeaderDateFormat", "monthDateFormat"], outputs: ["triggerOpenYearsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectMonth", "triggeChangeYear", "triggerHighlightMonth", "triggerHighlightNextMonth", "triggerHighlightPreviousMonth", "triggerHighlightFirstMonth", "triggerHighlightLastMonth", "triggerHighlightSameMonthPreviousPage", "triggerHighlightSameMonthNextPage"] }, { kind: "component", type: YearsViewComponent, selector: "ard-years-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "selectedDate", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "currentYearRangeStart", "multipleYearPageSize", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate", "yearsViewHeaderDateFormat", "yearDateFormat"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRangeCalendarComponent, decorators: [{
             type: Component,
@@ -8291,7 +8314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumRangeCalendarComponent,
                         },
-                    ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @case ('days') {\r\n  <ard-days-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n    (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n    (triggerChangeMonth)=\"changeMonth($event)\"\r\n    (triggerChangeYear)=\"changeYear($event)\"\r\n    (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n    (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n    (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n    (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n    (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n    (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n    (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n    (triggerSelectDay)=\"selectDay($event)\"\r\n  />\r\n  } @case ('months') {\r\n  <ard-months-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [color]=\"color()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n    (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n    (triggeChangeYear)=\"changeYear($event)\"\r\n    (triggerSelectMonth)=\"selectMonth($event)\"\r\n    (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n    (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n    (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n    (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n    (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n    (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n    (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n  />\r\n  } @case ('years') {\r\n  <ard-years-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [highlightedYear]=\"highlightedYear()\"\r\n    [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n    (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n    (triggerSelectYear)=\"selectYear($event)\"\r\n    (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n    (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n    (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n    (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n    (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n    (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n    (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n    (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n  />\r\n  } }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-calendar,ard-range-calendar{display:block}}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @case ('days') {\r\n  <ard-days-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n    [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n    [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenMonthsView)=\"openMonthsView()\"\r\n    (triggerOpenYearsView)=\"openYearsView()\"\r\n    (triggerChangeMonth)=\"changeMonth($event)\"\r\n    (triggerChangeYear)=\"changeYear($event)\"\r\n    (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n    (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n    (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n    (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n    (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n    (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n    (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n    (triggerSelectDay)=\"selectDay($event)\"\r\n  />\r\n  } @case ('months') {\r\n  <ard-months-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [color]=\"color()\"\r\n    [activeMonth]=\"activeMonth()\"\r\n    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"openDaysView()\"\r\n    (triggerOpenYearsView)=\"openYearsView()\"\r\n    (triggeChangeYear)=\"changeYear($event)\"\r\n    (triggerSelectMonth)=\"selectMonth($event)\"\r\n    (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n    (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n    (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n    (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n    (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n    (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n    (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n  />\r\n  } @case ('years') {\r\n  <ard-years-view\r\n    [tabIndex]=\"tabIndex()\"\r\n    [readOnly]=\"readonly()\"\r\n    [disabled]=\"disabled()\"\r\n    [autoFocus]=\"autoFocus()\"\r\n    [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n    [highlightedYear]=\"highlightedYear()\"\r\n    [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (triggerOpenDaysView)=\"openDaysView()\"\r\n    (triggerOpenMonthsView)=\"openMonthsView()\"\r\n    (triggerSelectYear)=\"selectYear($event)\"\r\n    (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n    (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n    (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n    (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n    (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n    (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n    (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n    (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n  />\r\n  } }\r\n</div>\r\n", styles: ["@layer ard-ui{ard-calendar,ard-range-calendar{display:block}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CALENDAR_DEFAULTS]
@@ -8657,7 +8680,6 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
         this._processDateInputText(this.dateInputValue());
         if (!this.isDateInputFocused())
             return;
-        this._onTouched();
         this.isDateInputFocused.set(false);
     }
     onDateInputEnter(event) {
@@ -8727,7 +8749,7 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumDateInputComponent,
             },
-        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.id]=\"htmlId()\"\r\n          [attr.name]=\"htmlName()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n      <ard-icon-button\r\n        color=\"none\"\r\n        [disabled]=\"calendarDisabled()\"\r\n        (click)=\"onCalendarButtonClick($event)\"\r\n      >\r\n        <ng-template\r\n          #defaultCalendarIconTemplate\r\n          let-date\r\n        >\r\n          <ard-icon filled>today</ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n      </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n      <div class=\"ard-date-input__accept-buttons-container\">\r\n        <ng-template\r\n          #defaultAcceptButtonsTemplate\r\n          let-accept=\"accept\"\r\n          let-cancel=\"cancel\"\r\n          let-disabled=\"disabled\"\r\n        >\r\n          <ard-button\r\n            appearance=\"outlined\"\r\n            color=\"none\"\r\n            [disabled]=\"disabled\"\r\n            (click)=\"cancel()\"\r\n          >\r\n            {{ cancelButtonText() }}\r\n          </ard-button>\r\n          <ard-button\r\n            appearance=\"raised\"\r\n            [color]=\"color()\"\r\n            [disabled]=\"disabled\"\r\n            (click)=\"accept()\"\r\n          >\r\n            {{ acceptButtonText() }}\r\n          </ard-button>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n          [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n        />\r\n      </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-date-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.id]=\"htmlId()\"\r\n          [attr.name]=\"htmlName()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n      <ard-icon-button\r\n        color=\"none\"\r\n        [disabled]=\"calendarDisabled()\"\r\n        (click)=\"onCalendarButtonClick($event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n      >\r\n        <ng-template\r\n          #defaultCalendarIconTemplate\r\n          let-date\r\n        >\r\n          <ard-icon filled>today</ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n      </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n      <div class=\"ard-date-input__accept-buttons-container\">\r\n        <ng-template\r\n          #defaultAcceptButtonsTemplate\r\n          let-accept=\"accept\"\r\n          let-cancel=\"cancel\"\r\n          let-disabled=\"disabled\"\r\n        >\r\n          <ard-button\r\n            appearance=\"outlined\"\r\n            color=\"none\"\r\n            [disabled]=\"disabled\"\r\n            (click)=\"cancel()\"\r\n          >\r\n            {{ cancelButtonText() }}\r\n          </ard-button>\r\n          <ard-button\r\n            appearance=\"raised\"\r\n            [color]=\"color()\"\r\n            [disabled]=\"disabled\"\r\n            (click)=\"accept()\"\r\n          >\r\n            {{ acceptButtonText() }}\r\n          </ard-button>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n          [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n        />\r\n      </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-date-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputComponent, decorators: [{
             type: Component,
@@ -8741,7 +8763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumDateInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.id]=\"htmlId()\"\r\n          [attr.name]=\"htmlName()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n      <ard-icon-button\r\n        color=\"none\"\r\n        [disabled]=\"calendarDisabled()\"\r\n        (click)=\"onCalendarButtonClick($event)\"\r\n      >\r\n        <ng-template\r\n          #defaultCalendarIconTemplate\r\n          let-date\r\n        >\r\n          <ard-icon filled>today</ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n      </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n      <div class=\"ard-date-input__accept-buttons-container\">\r\n        <ng-template\r\n          #defaultAcceptButtonsTemplate\r\n          let-accept=\"accept\"\r\n          let-cancel=\"cancel\"\r\n          let-disabled=\"disabled\"\r\n        >\r\n          <ard-button\r\n            appearance=\"outlined\"\r\n            color=\"none\"\r\n            [disabled]=\"disabled\"\r\n            (click)=\"cancel()\"\r\n          >\r\n            {{ cancelButtonText() }}\r\n          </ard-button>\r\n          <ard-button\r\n            appearance=\"raised\"\r\n            [color]=\"color()\"\r\n            [disabled]=\"disabled\"\r\n            (click)=\"accept()\"\r\n          >\r\n            {{ acceptButtonText() }}\r\n          </ard-button>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n          [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n        />\r\n      </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-date-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.id]=\"htmlId()\"\r\n          [attr.name]=\"htmlName()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n      <ard-icon-button\r\n        color=\"none\"\r\n        [disabled]=\"calendarDisabled()\"\r\n        (click)=\"onCalendarButtonClick($event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n      >\r\n        <ng-template\r\n          #defaultCalendarIconTemplate\r\n          let-date\r\n        >\r\n          <ard-icon filled>today</ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n      </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n      <div class=\"ard-date-input__accept-buttons-container\">\r\n        <ng-template\r\n          #defaultAcceptButtonsTemplate\r\n          let-accept=\"accept\"\r\n          let-cancel=\"cancel\"\r\n          let-disabled=\"disabled\"\r\n        >\r\n          <ard-button\r\n            appearance=\"outlined\"\r\n            color=\"none\"\r\n            [disabled]=\"disabled\"\r\n            (click)=\"cancel()\"\r\n          >\r\n            {{ cancelButtonText() }}\r\n          </ard-button>\r\n          <ard-button\r\n            appearance=\"raised\"\r\n            [color]=\"color()\"\r\n            [disabled]=\"disabled\"\r\n            (click)=\"accept()\"\r\n          >\r\n            {{ acceptButtonText() }}\r\n          </ard-button>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n          [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n        />\r\n      </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-date-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DATE_INPUT_DEFAULTS]