@ardium-ui/ui 3.4.4 → 3.5.0

package/fesm2022/ardium-ui-ui.mjs

@@ -4,17 +4,17 @@ import * as i0 from '@angular/core';
 import { input, signal, Directive, Input, HostBinding, computed, output, ViewChildren, inject, Injector, runInInjectionContext, InjectionToken, effect, viewChildren, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, NgModule, viewChild, contentChild, ViewContainerRef, TemplateRef, HostListener, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, ViewChild, ContentChild, contentChildren, Renderer2, Injectable } from '@angular/core';
 import { NgControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i4 from '@ardium-ui/devkit';
-import { coerceBooleanProperty, coerceNumberProperty, coerceArrayProperty, ArdiumClickOutsideEventModule, ArdiumInnerHTMLModule, ArdiumFilesizePipeModule, ArdiumFilenamePipeModule, ArdiumFileextPipeModule, ArdiumHoldEventModule } from '@ardium-ui/devkit';
+import { coerceBooleanProperty, coerceNumberProperty, coerceArrayProperty, ArdiumClickOutsideEventModule, ArdiumInnerHTMLModule, ArdiumFilesizePipeModule, ArdiumFilenamePipeModule, ArdiumFileextPipeModule, coerceDateProperty, ArdiumHoldEventModule } from '@ardium-ui/devkit';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { map, Subject, merge, takeUntil, startWith, BehaviorSubject } from 'rxjs';
 import { TakeChance } from 'take-chance';
 import { isAnyString, isNull, isArray, isNumber, isFunction, isRegExp, isDefined, any, isPrimitive, isString, evaluate, isObject, isPromise } from 'simple-bool';
 import * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT, DecimalPipe, AsyncPipe } from '@angular/common';
+import { CommonModule, DatePipe, UpperCasePipe, DOCUMENT, DecimalPipe, AsyncPipe } from '@angular/common';
 import { Overlay, ScrollStrategyOptions, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import { resolvePath } from 'resolve-object-path';
-import { roundToPrecision, roundToMultiple } from 'more-rounding';
+import { roundFromZero, roundToPrecision, roundToMultiple } from 'more-rounding';
 import * as Color from 'color';
 import { keyToString } from 'key-display-names';
 import * as i4$1 from '@angular/cdk/a11y';
@@ -5292,6 +5292,1880 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+const ArdCalendarView = {
+    Days: 'days',
+    Months: 'months',
+    Years: 'years',
+};
+
+const DEFAULT_DATE_INPUT_SERIALIZE_FN = (value) => {
+    if (value instanceof Date) {
+        return `${value.getDate().toString().padStart(2, '0')}/${(value.getMonth() + 1)
+            .toString()
+            .padStart(2, '0')}/${value.getFullYear()}`;
+    }
+    return '';
+};
+const DEFAULT_DATE_INPUT_DESERIALIZE_FN = (value, prevValue) => {
+    const trimmed = value.trim();
+    // case: ISO string
+    if (!trimmed.includes('/') && !isNaN(Date.parse(trimmed))) {
+        const isoDate = new Date(trimmed);
+        isoDate.setHours(0, 0, 0, 0);
+        return isoDate;
+    }
+    const parts = trimmed.split('/');
+    const currentYear = new Date().getFullYear();
+    if (parts.length === 1) {
+        // case: only year provided
+        const year = parseInt(parts[0], 10);
+        if (isNaN(year))
+            return null;
+        const date = new Date(year, 0, 1); // Jan 1st
+        return date;
+    }
+    if (parts.length === 2) {
+        // case: day/month, use current year
+        const day = parseInt(parts[0], 10);
+        const month = parseInt(parts[1], 10) - 1;
+        if (isNaN(day) || isNaN(month))
+            return null;
+        const date = new Date(currentYear, month, day);
+        return isNaN(date.getTime()) ? null : date;
+    }
+    if (parts.length === 3) {
+        // case: full date
+        const day = parseInt(parts[0], 10);
+        const month = parseInt(parts[1], 10) - 1;
+        const year = parseInt(parts[2], 10);
+        if (isNaN(day) || isNaN(month) || isNaN(year))
+            return null;
+        const date = new Date(year, month, day);
+        return isNaN(date.getTime()) ? null : date;
+    }
+    // invalid format
+    return prevValue;
+};
+
+const ArdDateInputMinMaxStrategy = {
+    Allow: 'allow',
+    Adjust: 'adjust',
+};
+
+const _dateInputDefaults = {
+    ..._formFieldComponentDefaults,
+    inputAttrs: {},
+    placeholder: 'Choose a date',
+    serializeFn: DEFAULT_DATE_INPUT_SERIALIZE_FN,
+    deserializeFn: DEFAULT_DATE_INPUT_DESERIALIZE_FN,
+    appearance: FormElementAppearance.Outlined,
+    variant: FormElementVariant.Rounded,
+    color: ComponentColor.Primary,
+    compact: false,
+    dropdownAppearance: DropdownPanelAppearance.Outlined,
+    dropdownVariant: DropdownPanelVariant.Rounded,
+    minMaxStrategy: ArdDateInputMinMaxStrategy.Adjust,
+    // calendar defaults
+    activeView: ArdCalendarView.Days,
+    activeYear: new Date().getFullYear(),
+    activeMonth: new Date().getMonth(),
+    firstWeekday: 1,
+    multipleYearPageChangeModifier: 5,
+    min: null,
+    max: null,
+    filter: null,
+};
+const ARD_DATE_INPUT_DEFAULTS = new InjectionToken('ard-date-input-defaults', {
+    factory: () => ({ ..._dateInputDefaults }),
+});
+function provideDateInputDefaults(config) {
+    return { provide: ARD_DATE_INPUT_DEFAULTS, useValue: { ..._dateInputDefaults, ...config } };
+}
+
+//public (exported)
+class ArdDateInputPrefixTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputPrefixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputPrefixTemplateDirective, selector: "ard-date-input > ng-template[ard-prefix-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputPrefixTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-date-input > ng-template[ard-prefix-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDateInputSuffixTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputSuffixTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputSuffixTemplateDirective, selector: "ard-date-input > ng-template[ard-suffix-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputSuffixTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-date-input > ng-template[ard-suffix-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDateInputValueTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputValueTemplateDirective, selector: "ard-date-input > ng-template[ard-value-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputValueTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-date-input > ng-template[ard-value-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDateInputCalendarIconTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputCalendarIconTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputCalendarIconTemplateDirective, selector: "ard-date-input > ng-template[ard-calendar-icon-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputCalendarIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-date-input > ng-template[ard-calendar-icon-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDateInputAcceptButtonsTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputAcceptButtonsTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputAcceptButtonsTemplateDirective, selector: "ard-date-input > ng-template[ard-accept-buttons-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputAcceptButtonsTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-date-input > ng-template[ard-accept-buttons-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+const _calendarDefaults = {
+    ..._ngModelComponentDefaults,
+    color: ComponentColor.Primary,
+    activeView: ArdCalendarView.Days,
+    activeYear: new Date().getFullYear(),
+    activeMonth: new Date().getMonth(),
+    firstWeekday: 1,
+    multipleYearPageChangeModifier: 5,
+    autoFocus: false,
+    min: null,
+    max: null,
+    filter: null,
+};
+const ARD_CALENDAR_DEFAULTS = new InjectionToken('ard-calendar-defaults', {
+    factory: () => ({
+        ..._calendarDefaults,
+    }),
+});
+function provideCalendarDefaults(config) {
+    return { provide: ARD_CALENDAR_DEFAULTS, useValue: { ..._calendarDefaults, ...config } };
+}
+
+/**
+ * Generates a layout array to be used to create a calendar page for the given year and month.
+ *
+ * The returned object contains an array to create the layout from, the number of leading and trailing spaces in the layout, and the number of weeks (full or not) in the month.
+ * @param year The year of the current active view
+ * @param monthIndex The month index of the current active view
+ * @param firstWeekday The index of the first weekday in the calendar layout. Starts at Sunday (index 0), ends with Saturday (index 6). Defaults to 1.
+ * @returns A {@link CalendarData} object.
+ */
+function getCalendarDayData(year, monthIndex, firstWeekday = 1, min, max) {
+    firstWeekday %= 7;
+    const firstDayDate = new Date(year, monthIndex, 1);
+    const firstDayWeekday = (firstDayDate.getDay() - firstWeekday + 7) % 7;
+    const lastDayDate = new Date(firstDayDate);
+    lastDayDate.setMonth(firstDayDate.getMonth() + 1); // advance the month by 1
+    lastDayDate.setDate(0); // set the date to 0, which essentially means "the last day of the previous month"
+    const lastDay = lastDayDate.getDate();
+    const calendarArray = [];
+    let currentDay = firstDayWeekday * -1; // how many empty spaces to add
+    let trailingSpaces = 0;
+    let totalWeeks = NaN;
+    for (let week = 0; week < 6; week++) {
+        const currentWeek = [];
+        // add days for the whole week
+        for (let weekday = 0; weekday < 7; weekday++) {
+            currentDay++;
+            // add empty space before the first day of the month
+            if (currentDay < 1 || currentDay > lastDay) {
+                currentWeek.push(null);
+                trailingSpaces++;
+                continue;
+            }
+            // add the day number
+            currentWeek.push({
+                value: currentDay,
+                disabled: !!isDayOutOfRange(currentDay, monthIndex, year, min, max),
+            });
+        }
+        calendarArray.push(currentWeek);
+        if (currentDay > lastDay) {
+            totalWeeks = week + 1;
+            break;
+        }
+    }
+    trailingSpaces -= firstDayWeekday;
+    return {
+        array: calendarArray,
+        leadingSpaces: firstDayWeekday,
+        trailingSpaces,
+        weeks: totalWeeks,
+    };
+}
+function getCalendarWeekdayArray(firstWeekday = 1) {
+    return [0, 1, 2, 3, 4, 5, 6].map(v => (v + firstWeekday) % 7);
+}
+function isDayOutOfRange(day, month, year, min, max) {
+    const date = new Date(year, month, day);
+    if (isDefined(min) && date < min)
+        return -1;
+    if (isDefined(max) && date > max)
+        return 1;
+    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,
+            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, 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,
+});
+function provideIconButtonDefaults(config) {
+    return { provide: ARD_ICON_BUTTON_DEFAULTS, useValue: { ..._simpleButtonDefaults, ...config } };
+}
+
+class ArdiumIconButtonComponent extends _FocusableComponentBase {
+    constructor(defaults) {
+        super(defaults);
+        this.wrapperClasses = input('');
+        this.type = input(this._DEFAULTS.type);
+        //! 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.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: "18.2.13", ngImport: i0, type: ArdiumIconButtonComponent, deps: [{ token: ARD_ICON_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumIconButtonComponent, 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 }, 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 } }, usesInheritance: true, ngImport: i0, template: "<button\n  class=\"ard-icon-button\"\n  [type]=\"type()\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (focus)=\"focusEvent.emit($event)\"\n  (blur)=\"blurEvent.emit($event)\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-button-content\">\n    <ng-content></ng-content>\n  </div>\n</button>\n", styles: [".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: "18.2.13", ngImport: i0, type: ArdiumIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-icon-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"ard-icon-button\"\n  [type]=\"type()\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (focus)=\"focusEvent.emit($event)\"\n  (blur)=\"blurEvent.emit($event)\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-button-content\">\n    <ng-content></ng-content>\n  </div>\n</button>\n", styles: [".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$3 = new Date();
+function isLeapYear(year) {
+    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+}
+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.min = input.required();
+        this.max = input.required();
+        this.isDayFilteredOut = input.required();
+        this.highlightedDay = input.required();
+        //! focusing
+        this.focusableElement = viewChild.required('focusableElement');
+        //! calendar data
+        this.firstWeekday = input.required();
+        this.activeCalendarData = computed(() => getCalendarDayData(this.activeYear(), this.activeMonth(), this.firstWeekday(), this.min(), this.max()));
+        this.reserveTopRow = computed(() => 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',
+            });
+        });
+        //! 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.daysViewHeaderTemplate = input.required();
+        this.floatingMonthTemplate = input.required();
+        this.weekdayTemplate = input.required();
+        this.dayTemplate = input.required();
+        //! 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();
+            },
+            canGoToNextPage: !this.isMonthOutOfRange(this.activeMonth() + 1),
+            canGoToPreviousPage: !this.isMonthOutOfRange(this.activeMonth() - 1),
+            year: this.activeYear(),
+            month: this.activeMonth(),
+            $implicit: new Date(this.activeYear(), this.activeMonth(), 1, 0, 0, 0, 0),
+        }));
+        this.weekdayContext = computed(() => (dayIndex) => {
+            const date = new Date(1970, 0, 4 + dayIndex);
+            return {
+                dayIndex,
+                date,
+                $implicit: date,
+            };
+        });
+        this.floatingMonthContext = computed(() => {
+            const date = new Date(this.activeYear(), this.activeMonth(), 1, 0, 0, 0, 0);
+            return {
+                month: this.activeMonth(),
+                date,
+                $implicit: date,
+            };
+        });
+        this.dayContext = computed(() => (day) => {
+            const date = new Date(this.activeYear(), this.activeMonth(), day);
+            return {
+                value: day,
+                date,
+                $implicit: day,
+                select: (dayOrDate) => {
+                    this.triggerSelectDay.emit(dayOrDate instanceof Date ? dayOrDate.getDate() : dayOrDate);
+                },
+            };
+        });
+    }
+    onMouseMove() {
+        if (this._isUsingKeyboard())
+            return;
+        if (this.highlightedDay())
+            this.triggerHighlightDay.emit(null);
+    }
+    ngAfterViewInit() {
+        if (!this.autoFocus())
+            return;
+        this.focus();
+        this.triggerHighlightDay.emit(1);
+    }
+    focus() {
+        this.focusableElement().nativeElement.focus();
+    }
+    isDaySelected(day) {
+        if (day instanceof Date)
+            day = day.getDate();
+        return (this.selectedDate() !== null &&
+            this.activeYear() === this.selectedDate()?.getFullYear() &&
+            this.activeMonth() === this.selectedDate()?.getMonth() &&
+            day === this.selectedDate()?.getDate());
+    }
+    onCalendarDayMouseover(day) {
+        if (this._isUsingKeyboard())
+            return;
+        if (this.disabled() || this.readOnly())
+            return;
+        if (day && this.isDayFilteredOut()(day))
+            return;
+        this.triggerHighlightDay.emit(day);
+    }
+    onCalendarDayClick(day) {
+        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);
+    }
+    onDayGridFocus() {
+        if (this.disabled() || this.readOnly())
+            return;
+        this.triggerHighlightFirstDay.emit();
+    }
+    onDayGridBlur() {
+        if (this.disabled() || this.readOnly())
+            return;
+        this.triggerHighlightDay.emit(null);
+    }
+    onDayGridClick() {
+        if (this.disabled() || this.readOnly())
+            return;
+        if (this.highlightedDay() !== null)
+            return;
+        this.triggerHighlightFirstDay.emit();
+    }
+    //! helpers
+    isDayToday(day) {
+        return this.activeYear() === TODAY$3.getFullYear() && this.activeMonth() === TODAY$3.getMonth() && day === TODAY$3.getDate();
+    }
+    isMonthOutOfRange(month) {
+        return isMonthOutOfRange(month, this.activeYear(), this.min(), this.max());
+    }
+    //! 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();
+        this.triggerSelectDay.emit(this.highlightedDay());
+    }
+    //highlight the entry one line below
+    _onArrowDownPress(event) {
+        event.preventDefault();
+        this.triggerHighlightNextDay.emit(7);
+    }
+    //highlight the entry one line above
+    _onArrowUpPress(event) {
+        event.preventDefault();
+        this.triggerHighlightPreviousDay.emit(7);
+    }
+    //highlight next entry
+    _onArrowRightPress(event) {
+        event.preventDefault();
+        this.triggerHighlightNextDay.emit(1);
+    }
+    //highlight previous entry
+    _onArrowLeftPress(event) {
+        event.preventDefault();
+        this.triggerHighlightPreviousDay.emit(1);
+    }
+    //highlight first entry on the page
+    _onHomePress(event) {
+        event.preventDefault();
+        this.triggerHighlightFirstDay.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);
+    }
+    //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: "18.2.13", ngImport: i0, type: DaysViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DaysViewComponent, 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 }, 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 } }, 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-openYearsView=\"openYearsView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\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 : 'MMM YYYY' | uppercase }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar__arrows\">\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          <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        </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 class=\"ard-calendar__weekday\">{{ date | date : 'EEEEE' }}</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    ></ng-template>\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    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        {{ date | date : 'LLL' | uppercase }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      ></ng-template>\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-disabled]=\"day.disabled || isDayFilteredOut()(day.value)\"\r\n      [class.ard-calendar__entry-selected]=\"isDaySelected(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-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultDayTemplate\r\n            let-day\r\n          >\r\n            {{ day }}\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: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { 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: "18.2.13", ngImport: i0, type: DaysViewComponent, decorators: [{
+            type: Component,
+            args: [{ 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-openYearsView=\"openYearsView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\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 : 'MMM YYYY' | uppercase }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar__arrows\">\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          <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        </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 class=\"ard-calendar__weekday\">{{ date | date : 'EEEEE' }}</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    ></ng-template>\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    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        {{ date | date : 'LLL' | uppercase }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      ></ng-template>\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-disabled]=\"day.disabled || isDayFilteredOut()(day.value)\"\r\n      [class.ard-calendar__entry-selected]=\"isDaySelected(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-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultDayTemplate\r\n            let-day\r\n          >\r\n            {{ day }}\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" }]
+        }], propDecorators: { onMouseMove: [{
+                type: HostListener,
+                args: ['mousemove']
+            }] } });
+
+const TODAY$2 = 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.min = input.required();
+        this.max = 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();
+        //! focusing
+        this.focusableElement = viewChild.required('focusableElement');
+        //! templates
+        this.monthsViewHeaderTemplate = input.required();
+        this.monthTemplate = input.required();
+        //! template contexts
+        this.monthsViewHeaderContext = computed(() => ({
+            nextPage: () => {
+                this.triggeChangeYear.emit(this.activeYear() + 1);
+            },
+            prevPage: () => {
+                this.triggeChangeYear.emit(this.activeYear() - 1);
+            },
+            openYearsView: () => {
+                this.triggerOpenYearsView.emit();
+            },
+            openDaysView: () => {
+                this.triggerOpenDaysView.emit();
+            },
+            canGoToNextPage: !this.isYearOutOfRange(this.activeYear() + 1),
+            canGoToPreviousPage: !this.isYearOutOfRange(this.activeYear() - 1),
+            year: this.activeYear(),
+            date: new Date(this.activeYear(), 0, 1),
+            $implicit: this.activeYear(),
+        }));
+        this.monthContext = computed(() => (month) => {
+            const date = new Date(this.activeYear(), month, 1);
+            return {
+                month,
+                date,
+                $implicit: date,
+                select: (month) => {
+                    if (month instanceof Date)
+                        month = month.getMonth();
+                    this.triggerSelectMonth.emit(month);
+                },
+            };
+        });
+    }
+    onMouseMove() {
+        if (this._isUsingKeyboard())
+            return;
+        if (this.highlightedMonth())
+            this.triggerHighlightMonth.emit(null);
+    }
+    ngAfterViewInit() {
+        if (!this.autoFocus())
+            return;
+        this.focus();
+        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();
+    }
+    //! 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$2.getFullYear() && month === TODAY$2.getMonth();
+    }
+    isMonthSelected(month) {
+        if (month instanceof Date)
+            month = month.getMonth();
+        return (this.selectedDate() !== null &&
+            this.activeYear() === this.selectedDate()?.getFullYear() &&
+            month === this.selectedDate()?.getMonth());
+    }
+    isYearOutOfRange(year) {
+        return isYearOutOfRange(year, this.min(), this.max());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonthsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonthsViewComponent, 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 } }, 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-year\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          [color]=\"color()\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ year }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar-arrows\">\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          <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        </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-disabled]=\"month.disabled\"\r\n      [class.ard-calendar__entry-selected]=\"isMonthSelected(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-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 : 'MMM' | 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: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { 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: "18.2.13", ngImport: i0, type: MonthsViewComponent, decorators: [{
+            type: Component,
+            args: [{ 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-year\r\n      let-nextPage=\"nextPage\"\r\n      let-prevPage=\"prevPage\"\r\n      let-canGoToNextPage=\"canGoToNextPage\"\r\n      let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          [color]=\"color()\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ year }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar-arrows\">\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          <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        </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-disabled]=\"month.disabled\"\r\n      [class.ard-calendar__entry-selected]=\"isMonthSelected(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-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 : 'MMM' | 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" }]
+        }], propDecorators: { onMouseMove: [{
+                type: HostListener,
+                args: ['mousemove']
+            }] } });
+
+const TODAY$1 = 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.activeYear = input.required();
+        this.selectedDate = input.required();
+        this.min = input.required();
+        this.max = input.required();
+        this.currentYearRangeStart = input.required();
+        this.yearsArray = computed(() => getCalendarYearsArray(this.currentYearRangeStart(), 24, 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();
+        //! focusing
+        this.focusableElement = viewChild.required('focusableElement');
+        //! templates
+        this.yearsViewHeaderTemplate = input.required();
+        this.yearTemplate = input.required();
+        //! template contexts
+        this.yearsViewHeaderContext = computed(() => {
+            const yearRangeStart = this.currentYearRangeStart();
+            const yearRangeEnd = yearRangeStart + 23;
+            const dateRange = {
+                low: new Date(yearRangeStart, 0, 1),
+                high: new Date(yearRangeEnd, 0, 1),
+            };
+            const yearRange = {
+                low: yearRangeStart,
+                high: 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),
+                yearRange: yearRange,
+                dateRange,
+                $implicit: dateRange,
+            };
+        });
+        this.yearContext = computed(() => {
+            return (year) => {
+                const date = new Date(year, 1, 1);
+                return {
+                    value: year,
+                    date,
+                    $implicit: date,
+                    select: (year) => {
+                        this.triggerSelectYear.emit(year);
+                    },
+                };
+            };
+        });
+    }
+    onMouseMove() {
+        if (this._isUsingKeyboard())
+            return;
+        if (this.highlightedYear())
+            this.triggerHighlightYear.emit(null);
+    }
+    ngAfterViewInit() {
+        if (!this.autoFocus())
+            return;
+        this.focus();
+        this.triggerHighlightYear.emit(this.currentYearRangeStart());
+    }
+    onCalendarYearMouseover(year) {
+        if (this._isUsingKeyboard() || this.disabled() || this.readOnly())
+            return;
+        this.triggerHighlightYear.emit(year);
+    }
+    onCalendarYearClick(year) {
+        if (this.disabled() || this.readOnly())
+            return;
+        this.triggerSelectYear.emit(year);
+    }
+    onYearGridFocus() {
+        if (this.disabled() || this.readOnly())
+            return;
+        this.triggerHighlightFirstYear.emit();
+    }
+    onYearGridBlur() {
+        if (this.disabled() || this.readOnly())
+            return;
+        this.triggerHighlightYear.emit(null);
+    }
+    onYearGridClick() {
+        if (this.disabled() || this.readOnly())
+            return;
+        if (this.highlightedYear() !== null)
+            return;
+        this.triggerHighlightFirstYear.emit();
+    }
+    //! helpers
+    isYearToday(year) {
+        return year === TODAY$1.getFullYear();
+    }
+    isYearSelected(year) {
+        if (year instanceof Date)
+            year = year.getFullYear();
+        return this.selectedDate() !== null && year === this.selectedDate()?.getFullYear();
+    }
+    isYearOutOfRange(year) {
+        return isYearOutOfRange(year, this.min(), this.max());
+    }
+    focus() {
+        this.focusableElement().nativeElement.focus();
+    }
+    //! 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 year = this.highlightedYear();
+        if (isNull(year))
+            return;
+        this.triggerSelectYear.emit(year);
+    }
+    //highlight the entry one line below
+    _onArrowDownPress(event) {
+        event.preventDefault();
+        this.triggerHighlightNextYear.emit(4); //4 years per line
+    }
+    //highlight the entry one line above
+    _onArrowUpPress(event) {
+        event.preventDefault();
+        this.triggerHighlightPreviousYear.emit(4); //4 years per line
+    }
+    //highlight next entry
+    _onArrowRightPress(event) {
+        event.preventDefault();
+        this.triggerHighlightNextYear.emit(1);
+    }
+    //highlight previous entry
+    _onArrowLeftPress(event) {
+        event.preventDefault();
+        this.triggerHighlightPreviousYear.emit(1);
+    }
+    //highlight first entry on the page
+    _onHomePress(event) {
+        event.preventDefault();
+        this.triggerHighlightFirstYear.emit();
+    }
+    //highlight last entry on the page
+    _onEndPress(event) {
+        event.preventDefault();
+        this.triggerHighlightLastYear.emit();
+    }
+    //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);
+    }
+    //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: "18.2.13", ngImport: i0, type: YearsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: YearsViewComponent, 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 }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", 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 }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", 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 } }, 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-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n          variant=\"pill\"\r\n        >\r\n          {{ dateRange.low | date : 'YYYY' }}\r\n          &mdash;\r\n          {{ dateRange.high | date : 'YYYY' }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar-arrows\">\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          <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        </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-disabled]=\"year.disabled\"\r\n      [class.ard-calendar__entry-selected]=\"isYearSelected(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-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 : 'YYYY' }}\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: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YearsViewComponent, decorators: [{
+            type: Component,
+            args: [{ 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-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n          variant=\"pill\"\r\n        >\r\n          {{ dateRange.low | date : 'YYYY' }}\r\n          &mdash;\r\n          {{ dateRange.high | date : 'YYYY' }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar-arrows\">\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          <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        </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-disabled]=\"year.disabled\"\r\n      [class.ard-calendar__entry-selected]=\"isYearSelected(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-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 : 'YYYY' }}\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" }]
+        }], propDecorators: { onMouseMove: [{
+                type: HostListener,
+                args: ['mousemove']
+            }] } });
+
+const TODAY = new Date();
+class ArdiumCalendarComponent extends _NgModelComponentBase {
+    constructor(defaults) {
+        super(defaults);
+        //! 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.firstWeekday = input(this._DEFAULTS.firstWeekday, {
+            transform: v => {
+                const value = coerceNumberProperty(v, this._DEFAULTS.firstWeekday);
+                if (!Number.isInteger(value)) {
+                    console.error(new Error(`ARD-NF2001A: [firstWeekday] must be a positive integer, got "${value}". Using default value instead.`));
+                    return 1;
+                }
+                if (value < 0 || value > 6) {
+                    console.error(new Error(`ARD-NF2001B: [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-NF2002: [multipleYearPageChangeModifier] must be a positive integer, got "${value}". Using default value instead.`));
+                    return 5;
+                }
+                return value;
+            },
+        });
+        this.autoFocus = input(this._DEFAULTS.autoFocus, { transform: v => coerceBooleanProperty(v) });
+        //! value
+        this.selectedDate = model(null, { alias: 'selected' });
+        this.yearSelect = output();
+        this.monthSelect = output();
+        this.min = input(this._DEFAULTS.min, { transform: v => coerceDateProperty(v, this._DEFAULTS.min) });
+        this.max = input(this._DEFAULTS.max, { transform: v => coerceDateProperty(v, this._DEFAULTS.max) });
+        this.filter = input(this._DEFAULTS.filter);
+        this.isDayFilteredOut = computed(() => {
+            return (day, month = this.activeMonth(), year = this.activeYear()) => {
+                const filter = this.filter();
+                return filter?.(new Date(year, month, day)) ?? false;
+            };
+        });
+        //! highlighting days
+        this.__highlightedDay = signal(null);
+        this.highlightedDay = this.__highlightedDay.asReadonly();
+        //! highlighting months
+        this.__highlightedMonth = signal(null);
+        this.highlightedMonth = this.__highlightedMonth.asReadonly();
+        //! highlighting years
+        this.__highlightedYear = signal(null);
+        this.highlightedYear = this.__highlightedYear.asReadonly();
+        this.currentYearRangeStart = signal(TODAY.getFullYear() - (TODAY.getFullYear() % 4) - 8); // current year always in 3rd row
+        //! internals
+        this._isUsingKeyboard = signal(false);
+        //! templates
+        this.yearsViewHeaderTemplate = contentChild(TemplateRef);
+        this.monthsViewHeaderTemplate = contentChild(TemplateRef);
+        this.daysViewHeaderTemplate = contentChild(TemplateRef);
+        this.floatingMonthTemplate = contentChild(TemplateRef);
+        this.yearTemplate = contentChild(TemplateRef);
+        this.monthTemplate = contentChild(TemplateRef);
+        this.dayTemplate = contentChild(TemplateRef);
+        this.weekdayTemplate = contentChild(TemplateRef);
+        effect(() => {
+            this.selectedDate(); // trigger effect
+            this._emitChange();
+        });
+    }
+    onTriggerOpenDaysView() {
+        this.activeView.set(ArdCalendarView.Days);
+    }
+    onTriggerOpenMonthsView() {
+        this.activeView.set(ArdCalendarView.Months);
+    }
+    onTriggerOpenYearsView() {
+        this.activeView.set(ArdCalendarView.Years);
+    }
+    writeValue(v) {
+        if (v instanceof Date) {
+            this.selectedDate.set(v);
+        }
+        else if (!isDefined(v)) {
+            this.selectedDate.set(null);
+        }
+        else {
+            console.error(new Error(`ARD-NF2003: <ard-calendar> [writeValue] expected a Date or null, got "${v}".`));
+        }
+    }
+    _emitChange() {
+        this._onChangeRegistered?.(this.selectedDate());
+    }
+    //! selecting days
+    isDaySelected(day) {
+        if (day instanceof Date)
+            day = day.getDate();
+        return (this.selectedDate() !== null &&
+            this.activeYear() === this.selectedDate()?.getFullYear() &&
+            this.activeMonth() === this.selectedDate()?.getMonth() &&
+            day === this.selectedDate()?.getDate());
+    }
+    isDayOutOfRange(day, month = this.activeMonth(), year = this.activeYear()) {
+        return isDayOutOfRange(day, month, year, this.min(), this.max());
+    }
+    selectDay(day) {
+        if (this.isDaySelected(day))
+            return;
+        if (isNull(day)) {
+            if (!isDefined(this.selectedDate()))
+                return;
+            this.selectedDate.set(null);
+            return;
+        }
+        if (day instanceof Date)
+            day = day.getDate();
+        if (day && this.isDayOutOfRange(day) || this.isDayFilteredOut()(day))
+            return;
+        this.selectedDate.set(new Date(this.activeYear(), this.activeMonth(), day, 0, 0, 0, 0));
+    }
+    selectCurrentlyHighlightedDay() {
+        if (!isDefined(this.highlightedDay()))
+            return;
+        this.selectDay(this.highlightedDay());
+    }
+    setHighlightedDay(day, month = this.activeMonth(), year = this.activeYear()) {
+        if (isNull(day)) {
+            this.__highlightedDay.update(() => day);
+            return;
+        }
+        const date = new Date(year, month, day);
+        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());
+        }
+    }
+    _highlightMinDay() {
+        const min = this.min();
+        if (!isDefined(min))
+            return;
+        this.activeYear.set(min.getFullYear());
+        this.activeMonth.set(min.getMonth());
+        this.__highlightedDay.set(min.getDate());
+    }
+    _highlightMaxDay() {
+        const max = this.max();
+        if (!isDefined(max))
+            return;
+        this.activeYear.set(max.getFullYear());
+        this.activeMonth.set(max.getMonth());
+        this.__highlightedDay.set(max.getDate());
+    }
+    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 = new Date(this.activeYear(), this.activeMonth() + 1, 0).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.selectedDate() !== null &&
+            this.activeYear() === this.selectedDate()?.getFullYear() &&
+            month === this.selectedDate()?.getMonth());
+    }
+    isMonthOutOfRange(month, year = this.activeYear()) {
+        return isMonthOutOfRange(month, year, this.min(), this.max());
+    }
+    changeMonth(newMonth) {
+        if (isNull(newMonth)) {
+            this.activeMonth.set(TODAY.getMonth());
+            return true;
+        }
+        if (this.isMonthOutOfRange(newMonth))
+            return false;
+        if (newMonth > 11) {
+            this.activeMonth.set(0);
+            this.activeYear.update(v => v + 1);
+        }
+        else if (newMonth < 0) {
+            this.activeMonth.set(11);
+            this.activeYear.update(v => v - 1);
+        }
+        else {
+            this.activeMonth.set(newMonth);
+        }
+        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 = new Date(year, month, 15);
+        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());
+        }
+    }
+    _highlightMinMonth() {
+        const min = this.min();
+        if (!isDefined(min))
+            return;
+        this.activeYear.set(min.getFullYear());
+        this.__highlightedMonth.set(min.getMonth());
+    }
+    _highlightMaxMonth() {
+        const max = this.max();
+        if (!isDefined(max))
+            return;
+        this.activeYear.set(max.getFullYear());
+        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.selectedDate() !== null && year === this.selectedDate()?.getFullYear();
+    }
+    isYearOutOfRange(year) {
+        return isYearOutOfRange(year, this.min(), this.max());
+    }
+    changeYear(year) {
+        if (isNull(year)) {
+            this.activeYear.set(TODAY.getFullYear());
+            return true;
+        }
+        if (this.isYearOutOfRange(year))
+            return false;
+        this.activeYear.set(year);
+        return true;
+    }
+    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);
+    }
+    selectCurrentlyHighlightedYear() {
+        if (!isDefined(this.highlightedYear()))
+            return;
+        this.selectYear(this.highlightedYear());
+    }
+    setHighlightedYear(year) {
+        if (isNull(year)) {
+            this.__highlightedYear.update(() => year);
+            return;
+        }
+        const date = new Date(year, 0);
+        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() + 24) {
+            // round the offset away from zero: 0.1 -> 1, -0.1 -> -1
+            // this is to ensure the range start is always shifted by 24 years
+            const offset = roundFromZero((newYear - this.currentYearRangeStart()) / 24);
+            this.currentYearRangeStart.update(v => v + offset * 24);
+        }
+    }
+    changeYearsViewPage(offset) {
+        const newYearRangeStart = this.currentYearRangeStart() + offset * 24;
+        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());
+    }
+    highlightNextYear(offset = 1) {
+        const currentYear = this.highlightedYear();
+        const newYear = isDefined(currentYear) ? currentYear + offset : null;
+        this.setHighlightedYear(newYear);
+    }
+    highlightPreviousYear(offset = 1) {
+        this.highlightNextYear(offset * -1);
+    }
+    highlightFirstYear() {
+        this.setHighlightedYear(this.currentYearRangeStart());
+    }
+    highlightLastYear() {
+        this.setHighlightedYear(this.currentYearRangeStart() + 23); // 24 years per page
+    }
+    highlightSameYearNextPage(multiple) {
+        const year = this.highlightedYear() ?? this.currentYearRangeStart();
+        this.setHighlightedYear(year + (multiple ? 60 : 24));
+    }
+    highlightSameYearPreviousPage(multiple) {
+        const year = this.highlightedYear() ?? this.currentYearRangeStart();
+        this.setHighlightedYear(year - (multiple ? 60 : 24));
+    }
+    onDocumentMousemove() {
+        this._isUsingKeyboard.set(false);
+    }
+    onDocumentKeydown() {
+        this._isUsingKeyboard.set(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCalendarComponent, deps: [{ token: ARD_CALENDAR_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumCalendarComponent, selector: "ard-calendar", 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 }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selected", 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 }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeView: "activeViewChange", activeYear: "activeYearChange", activeMonth: "activeMonthChange", selectedDate: "selectedChange", yearSelect: "yearSelect", monthSelect: "monthSelect" }, host: { listeners: { "document:mousemove": "onDocumentMousemove()", "document:keydown": "onDocumentKeydown()" } }, queries: [{ propertyName: "yearsViewHeaderTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "monthsViewHeaderTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "daysViewHeaderTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "floatingMonthTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "yearTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "monthTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "dayTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "weekdayTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], 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]=\"selectedDate()\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()\"\r\n    [weekdayTemplate]=\"weekdayTemplate()\"\r\n    [dayTemplate]=\"dayTemplate()\"\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]=\"selectedDate()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()\"\r\n    [monthTemplate]=\"monthTemplate()\"\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    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectedDate()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()\"\r\n    [yearTemplate]=\"yearTemplate()\"\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: [""], 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", "min", "max", "isDayFilteredOut", "highlightedDay", "firstWeekday", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate"], 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", "min", "max", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate"], 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", "activeYear", "selectedDate", "min", "max", "currentYearRangeStart", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate"], 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: "18.2.13", ngImport: i0, type: ArdiumCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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]=\"selectedDate()\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n    [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()\"\r\n    [floatingMonthTemplate]=\"floatingMonthTemplate()\"\r\n    [weekdayTemplate]=\"weekdayTemplate()\"\r\n    [dayTemplate]=\"dayTemplate()\"\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]=\"selectedDate()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()\"\r\n    [monthTemplate]=\"monthTemplate()\"\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    [activeYear]=\"activeYear()\"\r\n    [selectedDate]=\"selectedDate()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()\"\r\n    [yearTemplate]=\"yearTemplate()\"\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" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ARD_CALENDAR_DEFAULTS]
+                }] }], propDecorators: { onDocumentMousemove: [{
+                type: HostListener,
+                args: ['document:mousemove']
+            }], onDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown']
+            }] } });
+
+class ArdiumDateInputComponent extends _FormFieldComponentBase {
+    constructor(defaults) {
+        super(defaults);
+        this.elementRef = inject((ElementRef));
+        this.overlay = inject(Overlay);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.scrollStrategyOpts = inject(ScrollStrategyOptions);
+        this.inputAttrs = input(this._DEFAULTS.inputAttrs);
+        this.placeholder = input(this._DEFAULTS.placeholder);
+        this.inputReadOnly = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.calendarDisabled = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.calendarHidden = input(false, { transform: v => coerceBooleanProperty(v) });
+        //! serialization/deserialization
+        this.serializeFn = input(this._DEFAULTS.serializeFn);
+        this.deserializeFn = input(this._DEFAULTS.deserializeFn);
+        //! control value accessor
+        this.value = model(null);
+        this.dateInputValue = model('');
+        //! output events
+        this.isOpen = model(false);
+        this.openEvent = output({ alias: 'open' });
+        this.closeEvent = output({ alias: 'close' });
+        //! date input event handlers
+        this.dateInput = viewChild.required('dateInput');
+        this.minMaxStrategy = input(this._DEFAULTS.minMaxStrategy);
+        this._isDateInputFocused = signal(false);
+        //! computed properties
+        this.shouldDisplayPlaceholder = computed(() => {
+            if (this._isDateInputFocused() && this.dateInputValue())
+                return false;
+            return isNull(this.value());
+        });
+        this.shouldDisplayValue = computed(() => {
+            if (this._isDateInputFocused() && this.dateInputValue())
+                return false;
+            return this.value() instanceof Date;
+        });
+        this.shouldDisplayDateInput = computed(() => {
+            return !this.inputReadOnly() && !this.shouldDisplayValue() && this._isDateInputFocused();
+        });
+        //! appearance
+        this.appearance = input(this._DEFAULTS.appearance);
+        this.variant = input(this._DEFAULTS.variant);
+        this.color = input(this._DEFAULTS.color);
+        this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
+        this.ngClasses = computed(() => [
+            //appearance and variant handled in ard-form-field-frame component
+            //color handled in ard-calendar component
+            this.compact() ? 'ard-compact' : '',
+            this.isOpen() ? 'ard-dropdown-open' : '',
+            this._isDateInputFocused() ? 'ard-date-input__date-input-focused' : '',
+        ].join(' '));
+        this.dropdownAppearance = input(this._DEFAULTS.dropdownAppearance);
+        this.dropdownAppearanceOrDefault = computed(() => {
+            if (this.dropdownAppearance())
+                return this.dropdownAppearance();
+            if (this.appearance() === FormElementAppearance.Outlined)
+                return DropdownPanelAppearance.Outlined;
+            return DropdownPanelAppearance.Raised;
+        });
+        this.dropdownVariant = input(this._DEFAULTS.dropdownVariant);
+        this.dropdownVariantOrDefault = computed(() => {
+            if (this.dropdownVariant())
+                return this.dropdownVariant();
+            const variant = this.variant();
+            if (variant === FormElementVariant.Pill)
+                return DropdownPanelVariant.Rounded;
+            return variant;
+        });
+        //! calendar attributes
+        this.activeView = model(this._DEFAULTS.activeView);
+        this.activeYear = model(this._DEFAULTS.activeYear);
+        this.activeMonth = model(this._DEFAULTS.activeMonth);
+        this.firstWeekday = input(this._DEFAULTS.firstWeekday, {
+            transform: v => {
+                const value = coerceNumberProperty(v, this._DEFAULTS.firstWeekday);
+                if (!Number.isInteger(value)) {
+                    console.error(new Error(`ARD-NF0081A: [firstWeekday] must be a positive integer, got "${value}". Using default value instead.`));
+                    return 1;
+                }
+                if (value < 0 || value > 6) {
+                    console.error(new Error(`ARD-NF0081B: [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-NF0082: [multipleYearPageChangeModifier] must be a positive integer, got "${value}". Using default value instead.`));
+                    return 5;
+                }
+                return value;
+            },
+        });
+        this.min = input(this._DEFAULTS.min, { transform: v => coerceDateProperty(v, this._DEFAULTS.min) });
+        this.max = input(this._DEFAULTS.max, { transform: v => coerceDateProperty(v, this._DEFAULTS.max) });
+        this.filter = input(this._DEFAULTS.filter);
+        //! calendar outputs
+        this.yearSelect = output();
+        this.monthSelect = output();
+        //! calendar controls
+        this.useAcceptButtonToSelect = input(false, { transform: v => coerceBooleanProperty(v) });
+        this._valueToAccept = null;
+        //! dropdown overlay
+        this.dropdownHost = viewChild.required('dropdownHost');
+        this.dropdownTemplate = viewChild.required('dropdownTemplate');
+        this.dropdownPanel = viewChild.required(ArdiumDropdownPanelComponent);
+        //! templates
+        this.valueTemplate = contentChild(ArdDateInputValueTemplateDirective);
+        this.calendarIconTemplate = contentChild(ArdDateInputCalendarIconTemplateDirective);
+        this.acceptButtonsTemplate = contentChild(ArdDateInputAcceptButtonsTemplateDirective);
+        this.prefixTemplate = contentChild(ArdDateInputPrefixTemplateDirective);
+        this.suffixTemplate = contentChild(ArdDateInputSuffixTemplateDirective);
+        //! context providers
+        this.valueContext = computed(() => ({
+            $implicit: this.value(),
+        }));
+        this.acceptButtonsContext = computed(() => ({
+            $implicit: () => this.onAcceptButtonClick(),
+            accept: () => this.onAcceptButtonClick(),
+            cancel: () => this.onCancelButtonClick(),
+            disabled: this.disabled() || this.calendarDisabled(),
+        }));
+    }
+    writeValue(v) {
+        if (v instanceof Date) {
+            this.value.set(v);
+        }
+        else if (!isDefined(v)) {
+            this.value.set(null);
+        }
+        else {
+            console.error(new Error(`ARD-NF0083: <ard-date-input> writeValue expected a Date or null, got "${v}".`));
+        }
+    }
+    //! change & touch event emitters
+    _emitChange() {
+        this._onChangeRegistered?.(this.value());
+    }
+    _onTouched() {
+        this._onTouchedRegistered?.();
+    }
+    onDateInputInput(event) {
+        const v = event.target.value;
+        this.dateInputValue.set(v);
+    }
+    onDateInputFocus(event) {
+        this.onFocus(event);
+        this._isDateInputFocused.set(true);
+    }
+    onDateInputBlur(event) {
+        this.onBlur(event);
+        this._processDateInputText(this.dateInputValue());
+        if (!this._isDateInputFocused())
+            return;
+        this._onTouched();
+        this._isDateInputFocused.set(false);
+    }
+    onDateInputEnter(event) {
+        if (event.key !== 'Enter')
+            return;
+        event.preventDefault();
+        this.close();
+        this.blur();
+        this.focus();
+    }
+    _processDateInputText(value) {
+        let date = this.deserializeFn()(value, this.value());
+        if (this.minMaxStrategy() === ArdDateInputMinMaxStrategy.Adjust && date) {
+            const min = this.min();
+            const max = this.max();
+            if (min && date < min) {
+                date = new Date(min);
+            }
+            else if (max && date > max) {
+                date = new Date(max);
+            }
+        }
+        this.value.set(date);
+        this.dateInputValue.set(this.serializeFn()(date));
+    }
+    _setDateInputAttributes() {
+        const input = this.dateInput().nativeElement;
+        const attributes = {
+            type: 'text',
+            autocorrect: 'off',
+            autocapitalize: 'off',
+            autocomplete: 'off',
+            ...this.inputAttrs(),
+        };
+        for (const key of Object.keys(attributes)) {
+            input.setAttribute(key, attributes[key]);
+        }
+    }
+    onCalendarSelectedChange(event) {
+        if (this.useAcceptButtonToSelect()) {
+            this._valueToAccept = event;
+            return;
+        }
+        this._acceptSelectedDate(event);
+    }
+    _acceptSelectedDate(date) {
+        this.value.set(date);
+        this.dateInputValue.set(this.serializeFn()(date));
+        this.close();
+    }
+    _cancelCalendarSelection() {
+        this.close();
+    }
+    onAcceptButtonClick() {
+        this._acceptSelectedDate(this._valueToAccept);
+        this._valueToAccept = null;
+    }
+    onCancelButtonClick() {
+        this._cancelCalendarSelection();
+    }
+    _createOverlay() {
+        const strategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.dropdownHost())
+            .withPositions([
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+            },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            },
+        ]);
+        const config = new OverlayConfig({
+            positionStrategy: strategy,
+            scrollStrategy: this.scrollStrategyOpts.block(),
+            hasBackdrop: false,
+        });
+        this.dropdownOverlay = this.overlay.create(config);
+        const portal = new TemplatePortal(this.dropdownTemplate(), this.viewContainerRef);
+        this.dropdownOverlay.attach(portal);
+    }
+    _destroyOverlay() {
+        if (!this.dropdownOverlay)
+            return;
+        this.dropdownOverlay.dispose();
+        delete this.dropdownOverlay;
+    }
+    //! hooks
+    ngAfterViewInit() {
+        this._setDateInputAttributes();
+    }
+    //! dropdown state handlers
+    onGeneralClick(event) {
+        const target = event.target;
+        if (target.tagName !== 'INPUT') {
+            event.preventDefault();
+        }
+        if (this.isOpen()) {
+            this.close();
+        }
+        this.dateInput().nativeElement.focus();
+    }
+    onOutsideClick(event) {
+        if (!this.isOpen())
+            return;
+        const target = event.target;
+        if (this.elementRef.nativeElement.contains(target))
+            return;
+        this.close();
+    }
+    onCalendarButtonClick(event) {
+        if (this.calendarDisabled())
+            return;
+        if (this.calendarHidden())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggle();
+    }
+    toggle() {
+        if (this.isOpen()) {
+            this.close();
+            return;
+        }
+        this.open();
+    }
+    open() {
+        if (this.disabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this._createOverlay();
+        this.focus();
+        this.openEvent.emit();
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this._destroyOverlay();
+        this._onTouched();
+        this.closeEvent.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDateInputComponent, deps: [{ token: ARD_DATE_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumDateInputComponent, selector: "ard-date-input", inputs: { inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputReadOnly: { classPropertyName: "inputReadOnly", publicName: "inputReadOnly", 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 }, serializeFn: { classPropertyName: "serializeFn", publicName: "serializeFn", isSignal: true, isRequired: false, transformFunction: null }, deserializeFn: { classPropertyName: "deserializeFn", publicName: "deserializeFn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, dateInputValue: { classPropertyName: "dateInputValue", publicName: "dateInputValue", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, minMaxStrategy: { classPropertyName: "minMaxStrategy", publicName: "minMaxStrategy", 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 }, 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 }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, useAcceptButtonToSelect: { classPropertyName: "useAcceptButtonToSelect", publicName: "useAcceptButtonToSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", dateInputValue: "dateInputValueChange", isOpen: "isOpenChange", openEvent: "open", closeEvent: "close", activeView: "activeViewChange", activeYear: "activeYearChange", activeMonth: "activeMonthChange", yearSelect: "yearSelect", monthSelect: "monthSelect" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ArdiumDateInputComponent),
+                multi: true,
+            },
+            {
+                provide: _FormFieldComponentBase,
+                useExisting: ArdiumDateInputComponent,
+            },
+        ], 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: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { 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, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\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  >\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          {{ serializeFn()(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.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      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    />\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-date\r\n      >\r\n        {{ serializeFn()(date) }}\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: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .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.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["color", "activeView", "activeYear", "activeMonth", "firstWeekday", "multipleYearPageChangeModifier", "autoFocus", "selected", "min", "max", "filter"], outputs: ["activeViewChange", "activeYearChange", "activeMonthChange", "selectedChange", "yearSelect", "monthSelect"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-date-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ArdiumDateInputComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: _FormFieldComponentBase,
+                            useExisting: ArdiumDateInputComponent,
+                        },
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\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  >\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          {{ serializeFn()(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.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      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    />\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-date\r\n      >\r\n        {{ serializeFn()(date) }}\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: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ARD_DATE_INPUT_DEFAULTS]
+                }] }] });
+
+class ArdiumIconButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumIconButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumIconButtonModule, declarations: [ArdiumIconButtonComponent], imports: [CommonModule], exports: [ArdiumIconButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumIconButtonModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumIconButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ArdiumIconButtonComponent],
+                    imports: [CommonModule],
+                    exports: [ArdiumIconButtonComponent],
+                }]
+        }] });
+
+class ArdiumCalendarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCalendarModule, declarations: [ArdiumCalendarComponent, DaysViewComponent, MonthsViewComponent, YearsViewComponent], imports: [CommonModule, DatePipe, UpperCasePipe, ArdiumIconButtonModule, ArdiumIconModule, ArdiumButtonModule], exports: [ArdiumCalendarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCalendarModule, imports: [CommonModule, ArdiumIconButtonModule, ArdiumIconModule, ArdiumButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCalendarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ArdiumCalendarComponent, DaysViewComponent, MonthsViewComponent, YearsViewComponent],
+                    imports: [CommonModule, DatePipe, UpperCasePipe, ArdiumIconButtonModule, ArdiumIconModule, ArdiumButtonModule],
+                    exports: [ArdiumCalendarComponent],
+                }]
+        }] });
+
+class ArdiumDateInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDateInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDateInputModule, declarations: [ArdiumDateInputComponent], imports: [CommonModule,
+            ArdiumFormFieldFrameModule,
+            ArdiumDropdownPanelModule,
+            ArdiumClickOutsideEventModule,
+            ArdiumCalendarModule,
+            ArdiumIconButtonModule,
+            ArdiumIconModule], exports: [ArdiumDateInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDateInputModule, imports: [CommonModule,
+            ArdiumFormFieldFrameModule,
+            ArdiumDropdownPanelModule,
+            ArdiumClickOutsideEventModule,
+            ArdiumCalendarModule,
+            ArdiumIconButtonModule,
+            ArdiumIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDateInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ArdiumDateInputComponent,
+                        //template directives
+                    ],
+                    imports: [
+                        CommonModule,
+                        ArdiumFormFieldFrameModule,
+                        ArdiumDropdownPanelModule,
+                        ArdiumClickOutsideEventModule,
+                        ArdiumCalendarModule,
+                        ArdiumIconButtonModule,
+                        ArdiumIconModule,
+                    ],
+                    exports: [
+                        ArdiumDateInputComponent,
+                        //tempalate directives
+                    ],
+                }]
+        }] });
+
 const CaseTransformerType = {
     NoChange: 'nochange',
     Uppercase: 'uppercase',
@@ -5967,54 +7841,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const ARD_ICON_BUTTON_DEFAULTS = new InjectionToken('ard-icon-button-defaults', {
-    factory: () => _simpleButtonDefaults,
-});
-function provideIconButtonDefaults(config) {
-    return { provide: ARD_ICON_BUTTON_DEFAULTS, useValue: { ..._simpleButtonDefaults, ...config } };
-}
-
-class ArdiumIconButtonComponent extends _FocusableComponentBase {
-    constructor(defaults) {
-        super(defaults);
-        this.wrapperClasses = input('');
-        this.type = input(this._DEFAULTS.type);
-        //! 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.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: "18.2.13", ngImport: i0, type: ArdiumIconButtonComponent, deps: [{ token: ARD_ICON_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumIconButtonComponent, 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 }, 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 } }, usesInheritance: true, ngImport: i0, template: "<button\n  class=\"ard-icon-button\"\n  [type]=\"type()\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (focus)=\"focusEvent.emit($event)\"\n  (blur)=\"blurEvent.emit($event)\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-button-content\">\n    <ng-content></ng-content>\n  </div>\n</button>\n", styles: [".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: "18.2.13", ngImport: i0, type: ArdiumIconButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ard-icon-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"ard-icon-button\"\n  [type]=\"type()\"\n  [ngClass]=\"ngClasses()\"\n  [tabindex]=\"tabIndex()\"\n  (focus)=\"focusEvent.emit($event)\"\n  (blur)=\"blurEvent.emit($event)\"\n>\n  <div class=\"ard-focus-overlay\"></div>\n  <div class=\"ard-button-content\">\n    <ng-content></ng-content>\n  </div>\n</button>\n", styles: [".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]
-                }] }] });
-
-class ArdiumIconButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumIconButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumIconButtonModule, declarations: [ArdiumIconButtonComponent], imports: [CommonModule], exports: [ArdiumIconButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumIconButtonModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumIconButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ArdiumIconButtonComponent],
-                    imports: [CommonModule],
-                    exports: [ArdiumIconButtonComponent],
-                }]
-        }] });
-
 const _checkboxDefaults = {
     ..._booleanComponentDefaults,
     color: SimpleComponentColor.Primary,
@@ -11904,5 +13730,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_COLOR_DISPLAY_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STAR_DISPLAY_DEFAULTS, ARD_STAR_INPUT_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdDialogButtonsTemplateDirective, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumColorDisplayComponent, ArdiumColorDisplayModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarDisplayComponent, ArdiumStarDisplayModule, ArdiumStarInputComponent, ArdiumStarInputModule, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ColorDisplayAppearance, ComponentColor, DecorationElementAppearance, DialogResult, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, provideBadgeDefaults, provideButtonDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideColorDisplayDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStarDisplayDefaults, provideStarInputDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
+export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_COLOR_DISPLAY_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STAR_DISPLAY_DEFAULTS, ARD_STAR_INPUT_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdCalendarView, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDialogButtonsTemplateDirective, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumColorDisplayComponent, ArdiumColorDisplayModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarDisplayComponent, ArdiumStarDisplayModule, ArdiumStarInputComponent, ArdiumStarInputModule, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ColorDisplayAppearance, ComponentColor, DecorationElementAppearance, DialogResult, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, provideBadgeDefaults, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideColorDisplayDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStarDisplayDefaults, provideStarInputDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
 //# sourceMappingURL=ardium-ui-ui.mjs.map