@ardium-ui/ui 4.2.2-alpha.0 → 4.2.2

package/fesm2022/ardium-ui-ui.mjs

@@ -150,7 +150,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 const _ngModelComponentDefaults = {
     ..._focusableComponentDefaults,
-    required: undefined,
 };
 /**
  * Common code for components which implement the ControlValueAccessor.
@@ -654,12 +653,6 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
         this.configArrayData = this.model.configArrayData;
         this.transform = input(this._DEFAULTS.transform);
         this._oldConfigArrayDataLength = -1;
-        this.configArrayDataEffect = effect(() => {
-            if (this.configArrayData().length === this._oldConfigArrayDataLength)
-                return;
-            this._oldConfigArrayDataLength = this.configArrayData().length;
-            this._emitChange();
-        });
         this._wasViewInit = false;
         //! value two-way binding
         this.outputAsString = input(this._DEFAULTS.outputAsString, { transform: v => coerceBooleanProperty(v) });
@@ -675,6 +668,12 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
         this.finishedValue = output();
         this.focusIndexEvent = output({ alias: 'focusIndex' });
         this.blurIndexEvent = output({ alias: 'blurIndex' });
+        effect(() => {
+            if (this.configArrayData().length === this._oldConfigArrayDataLength)
+                return;
+            this._oldConfigArrayDataLength = this.configArrayData().length;
+            this._emitChange();
+        });
     }
     _setInputAttributes() {
         const inputs = this.inputs();
@@ -4948,7 +4947,7 @@ function isMimeTypeMatching(file, mimeType) {
 }
 
 const _fileInputBaseDefaults = {
-    ..._ngModelComponentDefaults,
+    ..._formFieldComponentDefaults,
     compact: false,
     multiple: false,
     blockAfterUpload: false,
@@ -5653,11 +5652,11 @@ class ArdDateInputCalendarIconTemplateDirective {
         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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputCalendarIconTemplateDirective, selector: "ard-date-input > ng-template[ard-date-input-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]' }]
+            args: [{ selector: 'ard-date-input > ng-template[ard-date-input-icon-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 class ArdDateInputAcceptButtonsTemplateDirective {
     constructor(template) {
@@ -5670,6 +5669,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Directive,
             args: [{ selector: 'ard-date-input > ng-template[ard-accept-buttons-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDateInputDaysViewHeaderTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputDaysViewHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputDaysViewHeaderTemplateDirective, selector: "ard-date-input > ng-template[ard-header-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputDaysViewHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-date-input > ng-template[ard-header-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDateInputYearsViewHeaderTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputYearsViewHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputYearsViewHeaderTemplateDirective, selector: "ard-date-input > ng-template[ard-year-picker-header-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputYearsViewHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-date-input > ng-template[ard-year-picker-header-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDateInputMonthsViewHeaderTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputMonthsViewHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputMonthsViewHeaderTemplateDirective, selector: "ard-date-input > ng-template[ard-month-picker-header-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputMonthsViewHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-date-input > ng-template[ard-month-picker-header-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDateInputWeekdayTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputWeekdayTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputWeekdayTemplateDirective, selector: "ard-date-input > ng-template[ard-weekday-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputWeekdayTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-date-input > ng-template[ard-weekday-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDateInputFloatingMonthTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputFloatingMonthTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputFloatingMonthTemplateDirective, selector: "ard-date-input > ng-template[ard-floating-month-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputFloatingMonthTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-date-input > ng-template[ard-floating-month-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDateInputYearTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputYearTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputYearTemplateDirective, selector: "ard-date-input > ng-template[ard-year-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputYearTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-date-input > ng-template[ard-year-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDateInputMonthTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputMonthTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputMonthTemplateDirective, selector: "ard-date-input > ng-template[ard-month-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputMonthTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-date-input > ng-template[ard-month-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdDateInputDayTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputDayTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdDateInputDayTemplateDirective, selector: "ard-date-input > ng-template[ard-day-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdDateInputDayTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-date-input > ng-template[ard-day-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 const _calendarDefaults = {
     ..._ngModelComponentDefaults,
@@ -5693,6 +5796,131 @@ function provideCalendarDefaults(config) {
     return { provide: ARD_CALENDAR_DEFAULTS, useValue: { ..._calendarDefaults, ...config } };
 }
 
+class ArdCalendarDaysViewHeaderTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarDaysViewHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdCalendarDaysViewHeaderTemplateDirective, selector: "ard-calendar > ng-template[ard-header-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarDaysViewHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-calendar > ng-template[ard-header-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdCalendarYearsViewHeaderTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarYearsViewHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdCalendarYearsViewHeaderTemplateDirective, selector: "ard-calendar > ng-template[ard-year-picker-header-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarYearsViewHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-calendar > ng-template[ard-year-picker-header-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdCalendarMonthsViewHeaderTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarMonthsViewHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdCalendarMonthsViewHeaderTemplateDirective, selector: "ard-calendar > ng-template[ard-month-picker-header-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarMonthsViewHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-calendar > ng-template[ard-month-picker-header-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdCalendarWeekdayTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarWeekdayTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdCalendarWeekdayTemplateDirective, selector: "ard-calendar > ng-template[ard-weekday-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarWeekdayTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-calendar > ng-template[ard-weekday-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdCalendarFloatingMonthTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarFloatingMonthTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdCalendarFloatingMonthTemplateDirective, selector: "ard-calendar > ng-template[ard-floating-month-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarFloatingMonthTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-calendar > ng-template[ard-floating-month-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdCalendarYearTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarYearTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdCalendarYearTemplateDirective, selector: "ard-calendar > ng-template[ard-year-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarYearTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-calendar > ng-template[ard-year-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdCalendarMonthTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarMonthTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdCalendarMonthTemplateDirective, selector: "ard-calendar > ng-template[ard-month-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarMonthTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-calendar > ng-template[ard-month-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class ArdCalendarDayTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarDayTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdCalendarDayTemplateDirective, selector: "ard-calendar > ng-template[ard-day-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCalendarDayTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-calendar > ng-template[ard-day-tmp]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class _CalendarTemplateRepositoryDirective {
+    constructor(template) {
+        this.template = template;
+        this.daysViewHeaderTmp = input(undefined);
+        this.yearsViewHeaderTmp = input(undefined);
+        this.monthsViewHeaderTmp = input(undefined);
+        this.weekdayTmp = input(undefined);
+        this.floatingMonthTmp = input(undefined);
+        this.yearTmp = input(undefined);
+        this.monthTmp = input(undefined);
+        this.dayTmp = input(undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _CalendarTemplateRepositoryDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: _CalendarTemplateRepositoryDirective, isStandalone: true, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: { daysViewHeaderTmp: { classPropertyName: "daysViewHeaderTmp", publicName: "daysViewHeaderTmp", isSignal: true, isRequired: false, transformFunction: null }, yearsViewHeaderTmp: { classPropertyName: "yearsViewHeaderTmp", publicName: "yearsViewHeaderTmp", isSignal: true, isRequired: false, transformFunction: null }, monthsViewHeaderTmp: { classPropertyName: "monthsViewHeaderTmp", publicName: "monthsViewHeaderTmp", isSignal: true, isRequired: false, transformFunction: null }, weekdayTmp: { classPropertyName: "weekdayTmp", publicName: "weekdayTmp", isSignal: true, isRequired: false, transformFunction: null }, floatingMonthTmp: { classPropertyName: "floatingMonthTmp", publicName: "floatingMonthTmp", isSignal: true, isRequired: false, transformFunction: null }, yearTmp: { classPropertyName: "yearTmp", publicName: "yearTmp", isSignal: true, isRequired: false, transformFunction: null }, monthTmp: { classPropertyName: "monthTmp", publicName: "monthTmp", isSignal: true, isRequired: false, transformFunction: null }, dayTmp: { classPropertyName: "dayTmp", publicName: "dayTmp", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _CalendarTemplateRepositoryDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-calendar > ng-template[_ard-tmp-repository]', standalone: true }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 /**
  * Generates a layout array to be used to create a calendar page for the given year and month.
  *
@@ -6094,11 +6322,11 @@ class DaysViewComponent {
         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) {\r\n      @for (day of week; track day ? day : activeCalendarData().leadingSpaces - $index) {\r\n        @if (day === null) {\r\n          <div class=\"ard-calendar__entry ard-calendar__entry-empty\"></div>\r\n        } @else {\r\n          <div\r\n            class=\"ard-calendar__entry\"\r\n            [class.ard-calendar__entry-highlighted]=\"highlightedDay() === day.value\"\r\n            [class.ard-calendar__entry-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      }\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", "pointerEventsWhenDisabled"] }, { 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 }); }
+    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\r\n        class=\"ard-calendar__weekday\"\r\n        [title]=\"date | date : 'EEEE' | titlecase\"\r\n      >\r\n        {{ date | date : 'EEEEE' | uppercase }}\r\n      </div>\r\n    </ng-template>\r\n    @for (weekdayIndex of weekdayArray(); track weekdayIndex) {\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"weekdayTemplate() || defaultWeekdayTemplate\"\r\n      [ngTemplateOutletContext]=\"weekdayContext()(weekdayIndex)\"\r\n    ></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        <div [title]=\"date | date : 'LLLL' | titlecase\">\r\n          {{ date | date : 'LLL' | uppercase }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      ></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", "pointerEventsWhenDisabled"] }, { 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.TitleCasePipe, name: "titlecase" }, { 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) {\r\n      @for (day of week; track day ? day : activeCalendarData().leadingSpaces - $index) {\r\n        @if (day === null) {\r\n          <div class=\"ard-calendar__entry ard-calendar__entry-empty\"></div>\r\n        } @else {\r\n          <div\r\n            class=\"ard-calendar__entry\"\r\n            [class.ard-calendar__entry-highlighted]=\"highlightedDay() === day.value\"\r\n            [class.ard-calendar__entry-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      }\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+            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\r\n        class=\"ard-calendar__weekday\"\r\n        [title]=\"date | date : 'EEEE' | titlecase\"\r\n      >\r\n        {{ date | date : 'EEEEE' | uppercase }}\r\n      </div>\r\n    </ng-template>\r\n    @for (weekdayIndex of weekdayArray(); track weekdayIndex) {\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"weekdayTemplate() || defaultWeekdayTemplate\"\r\n      [ngTemplateOutletContext]=\"weekdayContext()(weekdayIndex)\"\r\n    ></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        <div [title]=\"date | date : 'LLLL' | titlecase\">\r\n          {{ date | date : 'LLL' | uppercase }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      ></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']
@@ -6615,8 +6843,8 @@ class ArdiumCalendarComponent extends _NgModelComponentBase {
         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.min = input(this._DEFAULTS.min, { transform: v => v === null ? null : coerceDateProperty(v, this._DEFAULTS.min) });
+        this.max = input(this._DEFAULTS.max, { transform: v => v === null ? null : coerceDateProperty(v, this._DEFAULTS.max) });
         this.filter = input(this._DEFAULTS.filter);
         this.isDayFilteredOut = computed(() => {
             return (day, month = this.activeMonth(), year = this.activeYear()) => {
@@ -6637,14 +6865,15 @@ class ArdiumCalendarComponent extends _NgModelComponentBase {
         //! 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);
+        this.templateRepository = contentChild(_CalendarTemplateRepositoryDirective);
+        this.yearsViewHeaderTemplate = contentChild(ArdCalendarYearsViewHeaderTemplateDirective);
+        this.monthsViewHeaderTemplate = contentChild(ArdCalendarMonthsViewHeaderTemplateDirective);
+        this.daysViewHeaderTemplate = contentChild(ArdCalendarDaysViewHeaderTemplateDirective);
+        this.floatingMonthTemplate = contentChild(ArdCalendarFloatingMonthTemplateDirective);
+        this.yearTemplate = contentChild(ArdCalendarYearTemplateDirective);
+        this.monthTemplate = contentChild(ArdCalendarMonthTemplateDirective);
+        this.dayTemplate = contentChild(ArdCalendarDayTemplateDirective);
+        this.weekdayTemplate = contentChild(ArdCalendarWeekdayTemplateDirective);
         effect(() => {
             this.selectedDate(); // trigger effect
             this._emitChange();
@@ -6988,7 +7217,7 @@ class ArdiumCalendarComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumCalendarComponent),
                 multi: true,
             },
-        ], 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()) {\r\n    @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    }\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    }\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  }\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 }); }
+        ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CalendarTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "yearsViewHeaderTemplate", first: true, predicate: ArdCalendarYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthsViewHeaderTemplate", first: true, predicate: ArdCalendarMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "daysViewHeaderTemplate", first: true, predicate: ArdCalendarDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "floatingMonthTemplate", first: true, predicate: ArdCalendarFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearTemplate", first: true, predicate: ArdCalendarYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthTemplate", first: true, predicate: ArdCalendarMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dayTemplate", first: true, predicate: ArdCalendarDayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "weekdayTemplate", first: true, predicate: ArdCalendarWeekdayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) {\r\n    @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()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n        [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n        [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n        [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n        (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    }\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()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n        [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\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    }\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()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n        [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\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  }\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,
@@ -6998,7 +7227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumCalendarComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) {\r\n    @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    }\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    }\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  }\r\n</div>\r\n" }]
+                    ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) {\r\n    @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()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n        [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n        [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n        [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n        (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    }\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()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n        [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\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    }\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()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n        [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\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  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CALENDAR_DEFAULTS]
@@ -7028,6 +7257,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
         //! control value accessor
         this.value = model(null);
         this.dateInputValue = model('');
+        this._wasDateInputChanged = signal(false);
         //! output events
         this.isOpen = model(false);
         this.openEvent = output({ alias: 'open' });
@@ -7091,7 +7321,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
                     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.`));
+                    console.error(new Error(`ARD-WA0081B: [firstWeekday] must be between 0 and 6, got "${value}". Using modulo operator to adjust the value.`));
                 }
                 return value % 7;
             },
@@ -7125,6 +7355,14 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
         this.acceptButtonsTemplate = contentChild(ArdDateInputAcceptButtonsTemplateDirective);
         this.prefixTemplate = contentChild(ArdDateInputPrefixTemplateDirective);
         this.suffixTemplate = contentChild(ArdDateInputSuffixTemplateDirective);
+        this.calendarDaysViewHeaderTemplate = contentChild(ArdDateInputDaysViewHeaderTemplateDirective);
+        this.calendarYearsViewHeaderTemplate = contentChild(ArdDateInputYearsViewHeaderTemplateDirective);
+        this.calendarMonthsViewHeaderTemplate = contentChild(ArdDateInputMonthsViewHeaderTemplateDirective);
+        this.calendarWeekdayTemplate = contentChild(ArdDateInputWeekdayTemplateDirective);
+        this.calendarFloatingMonthTemplate = contentChild(ArdDateInputFloatingMonthTemplateDirective);
+        this.calendarYearTemplate = contentChild(ArdDateInputYearTemplateDirective);
+        this.calendarMonthTemplate = contentChild(ArdDateInputMonthTemplateDirective);
+        this.calendarDayTemplate = contentChild(ArdDateInputDayTemplateDirective);
         //! context providers
         this.valueContext = computed(() => ({
             $implicit: this.value(),
@@ -7165,6 +7403,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
     onDateInputFocus(event) {
         this.onFocus(event);
         this._isDateInputFocused.set(true);
+        this._wasDateInputChanged.set(false);
     }
     onDateInputBlur(event) {
         this.onBlur(event);
@@ -7331,7 +7570,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
                 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: i5.ArdiumClickOutsideDirective, 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", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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 }, { propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { 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      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-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: i5.ArdiumClickOutsideDirective, 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", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDateInputComponent, decorators: [{
             type: Component,
@@ -7345,7 +7584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             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"] }]
+                    ], 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      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-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]
@@ -7367,27 +7606,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 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.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCalendarModule, declarations: [ArdiumCalendarComponent,
+            DaysViewComponent,
+            MonthsViewComponent,
+            YearsViewComponent,
+            // template directives
+            ArdCalendarDaysViewHeaderTemplateDirective,
+            ArdCalendarYearsViewHeaderTemplateDirective,
+            ArdCalendarMonthsViewHeaderTemplateDirective,
+            ArdCalendarWeekdayTemplateDirective,
+            ArdCalendarFloatingMonthTemplateDirective,
+            ArdCalendarYearTemplateDirective,
+            ArdCalendarMonthTemplateDirective,
+            ArdCalendarDayTemplateDirective], imports: [CommonModule, DatePipe, UpperCasePipe, ArdiumIconButtonModule, ArdiumIconModule, ArdiumButtonModule], exports: [ArdiumCalendarComponent,
+            // template directives
+            ArdCalendarDaysViewHeaderTemplateDirective,
+            ArdCalendarYearsViewHeaderTemplateDirective,
+            ArdCalendarMonthsViewHeaderTemplateDirective,
+            ArdCalendarWeekdayTemplateDirective,
+            ArdCalendarFloatingMonthTemplateDirective,
+            ArdCalendarYearTemplateDirective,
+            ArdCalendarMonthTemplateDirective,
+            ArdCalendarDayTemplateDirective] }); }
     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],
+                    declarations: [
+                        ArdiumCalendarComponent,
+                        DaysViewComponent,
+                        MonthsViewComponent,
+                        YearsViewComponent,
+                        // template directives
+                        ArdCalendarDaysViewHeaderTemplateDirective,
+                        ArdCalendarYearsViewHeaderTemplateDirective,
+                        ArdCalendarMonthsViewHeaderTemplateDirective,
+                        ArdCalendarWeekdayTemplateDirective,
+                        ArdCalendarFloatingMonthTemplateDirective,
+                        ArdCalendarYearTemplateDirective,
+                        ArdCalendarMonthTemplateDirective,
+                        ArdCalendarDayTemplateDirective,
+                    ],
                     imports: [CommonModule, DatePipe, UpperCasePipe, ArdiumIconButtonModule, ArdiumIconModule, ArdiumButtonModule],
-                    exports: [ArdiumCalendarComponent],
+                    exports: [
+                        ArdiumCalendarComponent,
+                        // template directives
+                        ArdCalendarDaysViewHeaderTemplateDirective,
+                        ArdCalendarYearsViewHeaderTemplateDirective,
+                        ArdCalendarMonthsViewHeaderTemplateDirective,
+                        ArdCalendarWeekdayTemplateDirective,
+                        ArdCalendarFloatingMonthTemplateDirective,
+                        ArdCalendarYearTemplateDirective,
+                        ArdCalendarMonthTemplateDirective,
+                        ArdCalendarDayTemplateDirective,
+                    ],
                 }]
         }] });
 
 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,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDateInputModule, declarations: [ArdiumDateInputComponent,
+            //template directives
+            ArdDateInputPrefixTemplateDirective,
+            ArdDateInputSuffixTemplateDirective,
+            ArdDateInputValueTemplateDirective,
+            ArdDateInputCalendarIconTemplateDirective,
+            ArdDateInputAcceptButtonsTemplateDirective,
+            ArdDateInputDaysViewHeaderTemplateDirective,
+            ArdDateInputDayTemplateDirective,
+            ArdDateInputFloatingMonthTemplateDirective,
+            ArdDateInputMonthsViewHeaderTemplateDirective,
+            ArdDateInputMonthTemplateDirective,
+            ArdDateInputWeekdayTemplateDirective,
+            ArdDateInputYearsViewHeaderTemplateDirective,
+            ArdDateInputYearTemplateDirective], imports: [CommonModule,
             ArdiumFormFieldFrameModule,
             ArdiumDropdownPanelModule,
             ArdiumClickOutsideModule,
             ArdiumCalendarModule,
             ArdiumIconButtonModule,
-            ArdiumIconModule], exports: [ArdiumDateInputComponent] }); }
+            ArdiumIconModule,
+            _CalendarTemplateRepositoryDirective], exports: [ArdiumDateInputComponent,
+            //tempalate directives
+            ArdDateInputPrefixTemplateDirective,
+            ArdDateInputSuffixTemplateDirective,
+            ArdDateInputValueTemplateDirective,
+            ArdDateInputCalendarIconTemplateDirective,
+            ArdDateInputAcceptButtonsTemplateDirective,
+            ArdDateInputDaysViewHeaderTemplateDirective,
+            ArdDateInputDayTemplateDirective,
+            ArdDateInputFloatingMonthTemplateDirective,
+            ArdDateInputMonthsViewHeaderTemplateDirective,
+            ArdDateInputMonthTemplateDirective,
+            ArdDateInputWeekdayTemplateDirective,
+            ArdDateInputYearsViewHeaderTemplateDirective,
+            ArdDateInputYearTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDateInputModule, imports: [CommonModule,
             ArdiumFormFieldFrameModule,
             ArdiumDropdownPanelModule,
@@ -7402,6 +7716,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     declarations: [
                         ArdiumDateInputComponent,
                         //template directives
+                        ArdDateInputPrefixTemplateDirective,
+                        ArdDateInputSuffixTemplateDirective,
+                        ArdDateInputValueTemplateDirective,
+                        ArdDateInputCalendarIconTemplateDirective,
+                        ArdDateInputAcceptButtonsTemplateDirective,
+                        ArdDateInputDaysViewHeaderTemplateDirective,
+                        ArdDateInputDayTemplateDirective,
+                        ArdDateInputFloatingMonthTemplateDirective,
+                        ArdDateInputMonthsViewHeaderTemplateDirective,
+                        ArdDateInputMonthTemplateDirective,
+                        ArdDateInputWeekdayTemplateDirective,
+                        ArdDateInputYearsViewHeaderTemplateDirective,
+                        ArdDateInputYearTemplateDirective,
                     ],
                     imports: [
                         CommonModule,
@@ -7411,10 +7738,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ArdiumCalendarModule,
                         ArdiumIconButtonModule,
                         ArdiumIconModule,
+                        _CalendarTemplateRepositoryDirective,
                     ],
                     exports: [
                         ArdiumDateInputComponent,
                         //tempalate directives
+                        ArdDateInputPrefixTemplateDirective,
+                        ArdDateInputSuffixTemplateDirective,
+                        ArdDateInputValueTemplateDirective,
+                        ArdDateInputCalendarIconTemplateDirective,
+                        ArdDateInputAcceptButtonsTemplateDirective,
+                        ArdDateInputDaysViewHeaderTemplateDirective,
+                        ArdDateInputDayTemplateDirective,
+                        ArdDateInputFloatingMonthTemplateDirective,
+                        ArdDateInputMonthsViewHeaderTemplateDirective,
+                        ArdDateInputMonthTemplateDirective,
+                        ArdDateInputWeekdayTemplateDirective,
+                        ArdDateInputYearsViewHeaderTemplateDirective,
+                        ArdDateInputYearTemplateDirective,
                     ],
                 }]
         }] });
@@ -8119,6 +8460,31 @@ function provideCheckboxDefaults(config) {
     return { provide: ARD_CHECKBOX_DEFAULTS, useValue: { ..._checkboxDefaults, ...config } };
 }
 
+class ArdCheckboxTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCheckboxTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdCheckboxTemplateDirective, selector: "ard-checkbox > ng-template[ard-checkbox-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCheckboxTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-checkbox > ng-template[ard-checkbox-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class _CheckboxTemplateRepositoryDirective {
+    constructor(template) {
+        this.template = template;
+        this.checkboxTmp = input(undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _CheckboxTemplateRepositoryDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: _CheckboxTemplateRepositoryDirective, isStandalone: true, selector: "ard-checkbox > ng-template[_ard-tmp-repository]", inputs: { checkboxTmp: { classPropertyName: "checkboxTmp", publicName: "checkboxTmp", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _CheckboxTemplateRepositoryDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-checkbox > ng-template[_ard-tmp-repository]', standalone: true }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 const CheckboxState = {
     Unselected: 'unselected',
     Indeterminate: 'indeterminate',
@@ -8133,6 +8499,15 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
         this.unselectedColor = input(this._DEFAULTS.unselectedColor);
         this.ngClasses = computed(() => [`ard-color-${this.color()}`, `ard-unselected-color-${this.unselectedColor()}`, `ard-checkbox-${this.state()}`].join(' '));
         this.state = model(CheckboxState.Unselected);
+        this.State = CheckboxState;
+        //! templates
+        this.templateRepository = contentChild(_CheckboxTemplateRepositoryDirective);
+        this.checkboxTemplate = contentChild(ArdCheckboxTemplateDirective);
+        this.checkboxTemplateContext = computed(() => ({
+            $implicit: this.selected(),
+            selected: this.selected(),
+            state: this.state(),
+        }));
     }
     //override the "selected" setter, so it changes the state too.
     set _selected(v) {
@@ -8151,13 +8526,13 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
         this._emitChange();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxComponent, deps: [{ token: ARD_CHECKBOX_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, unselectedColor: { classPropertyName: "unselectedColor", publicName: "unselectedColor", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { state: "stateChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, unselectedColor: { classPropertyName: "unselectedColor", publicName: "unselectedColor", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { state: "stateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumCheckboxComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selected()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selected()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n          ? 'check_box_outline_blank'\r\n          : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"selected\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\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: 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: ArdiumCheckboxComponent, decorators: [{
             type: Component,
@@ -8167,7 +8542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumCheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selected()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-selected\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-indeterminate\"></div>\r\n  <div class=\"ard-checkbox-icon ard-icon-for-unselected\"></div>\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"] }]
+                    ], template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selected()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n          ? 'check_box_outline_blank'\r\n          : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"selected\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CHECKBOX_DEFAULTS]
@@ -8175,15 +8550,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class ArdiumCheckboxModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxModule, declarations: [ArdiumCheckboxComponent], imports: [CommonModule], exports: [ArdiumCheckboxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxModule, imports: [CommonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxModule, declarations: [ArdiumCheckboxComponent, ArdCheckboxTemplateDirective], imports: [CommonModule, ArdiumIconModule], exports: [ArdiumCheckboxComponent, ArdCheckboxTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxModule, imports: [CommonModule, ArdiumIconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumCheckboxComponent],
-                    imports: [CommonModule],
-                    exports: [ArdiumCheckboxComponent],
+                    declarations: [ArdiumCheckboxComponent, ArdCheckboxTemplateDirective],
+                    imports: [CommonModule, ArdiumIconModule],
+                    exports: [ArdiumCheckboxComponent, ArdCheckboxTemplateDirective],
                 }]
         }] });
 
@@ -8312,12 +8687,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['class.ard-selected']
             }] } });
 
-class ArdiumRadioGroupComponent extends _NgModelComponentBase {
+class ArdiumRadioGroupComponent extends _FormFieldComponentBase {
     get _htmlIdHostAttribute() {
         return this.htmlId();
     }
     constructor() {
-        super(_ngModelComponentDefaults); // no need for injecting a token with default values
+        super(_formFieldComponentDefaults); // no need for injecting a token with default values
         this._radios = contentChildren(ArdiumRadioComponent, { descendants: true });
         this.valueChange = output();
         this.changeEvent = output({ alias: 'change' });
@@ -10497,6 +10872,18 @@ function provideCheckboxListDefaults(config) {
     return { provide: ARD_CHECKBOX_LIST_DEFAULTS, useValue: { ..._checkboxListDefaults, ...config } };
 }
 
+class ArdCheckboxListCheckboxTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCheckboxListCheckboxTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdCheckboxListCheckboxTemplateDirective, selector: "ard-checkbox-list > ng-template[ard-checkbox-tmp]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdCheckboxListCheckboxTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ard-checkbox-list > ng-template[ard-checkbox-tmp]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 class ArdiumCheckboxListComponent extends _NgModelComponentBase {
     constructor(defaults) {
         super(defaults);
@@ -10523,6 +10910,8 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
         this.valueChange = output();
         this.changeEvent = output({ alias: 'change' });
         this._isViewInit = false;
+        //! templates
+        this.checkboxTemplate = contentChild(ArdCheckboxListCheckboxTemplateDirective);
     }
     get _htmlIdHostAttribute() {
         return this.htmlId();
@@ -10584,11 +10973,11 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
         this.selectItem(v);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListComponent, deps: [{ token: ARD_CHECKBOX_LIST_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumCheckboxListComponent, selector: "ard-checkbox-list", inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { properties: { "attr.id": "this._htmlIdHostAttribute" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-checkbox-list\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (item of items; track item.index) {\r\n    <div\r\n      class=\"ard-checkbox-list__item\"\r\n      [class.ard-item-highlighted]=\"item.highlighted()\"\r\n      [class.ard-item-disabled]=\"item.disabled()\"\r\n      (mouseover)=\"onItemHighlight(item)\"\r\n      (mouseleave)=\"onItemBlur()\"\r\n      (click)=\"toggleItem(item)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-checkbox\r\n        [selected]=\"item.selected()\"\r\n        [disabled]=\"item.disabled()\"\r\n        [color]=\"color()\"\r\n        [htmlId]=\"htmlId() + item.index\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (focus)=\"onItemFocus(item)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (blur)=\"onItemBlur()\"\r\n        (select)=\"selectItem(item)\"\r\n        (unselect)=\"unselectItem(item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      />\r\n      <label [for]=\"htmlId() + item.index\">\r\n        {{ item.label() }}\r\n      </label>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["color", "unselectedColor", "state"], outputs: ["stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumCheckboxListComponent, selector: "ard-checkbox-list", inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { properties: { "attr.id": "this._htmlIdHostAttribute" } }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxListCheckboxTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-checkbox-list\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (item of items; track item.index) {\r\n    <div\r\n      class=\"ard-checkbox-list__item\"\r\n      [class.ard-item-highlighted]=\"item.highlighted()\"\r\n      [class.ard-item-disabled]=\"item.disabled()\"\r\n      (mouseover)=\"onItemHighlight(item)\"\r\n      (mouseleave)=\"onItemBlur()\"\r\n      (click)=\"toggleItem(item)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-checkbox\r\n        [selected]=\"item.selected()\"\r\n        [disabled]=\"item.disabled()\"\r\n        [color]=\"color()\"\r\n        [htmlId]=\"htmlId() + item.index\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (focus)=\"onItemFocus(item)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (blur)=\"onItemBlur()\"\r\n        (select)=\"selectItem(item)\"\r\n        (unselect)=\"unselectItem(item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <ng-template _ard-tmp-repository [checkboxTmp]=\"checkboxTemplate()\" />\r\n      </ard-checkbox>\r\n      <label [for]=\"htmlId() + item.index\">\r\n        {{ item.label() }}\r\n      </label>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "directive", type: _CheckboxTemplateRepositoryDirective, selector: "ard-checkbox > ng-template[_ard-tmp-repository]", inputs: ["checkboxTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-checkbox-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-checkbox-list\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (item of items; track item.index) {\r\n    <div\r\n      class=\"ard-checkbox-list__item\"\r\n      [class.ard-item-highlighted]=\"item.highlighted()\"\r\n      [class.ard-item-disabled]=\"item.disabled()\"\r\n      (mouseover)=\"onItemHighlight(item)\"\r\n      (mouseleave)=\"onItemBlur()\"\r\n      (click)=\"toggleItem(item)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-checkbox\r\n        [selected]=\"item.selected()\"\r\n        [disabled]=\"item.disabled()\"\r\n        [color]=\"color()\"\r\n        [htmlId]=\"htmlId() + item.index\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (focus)=\"onItemFocus(item)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (blur)=\"onItemBlur()\"\r\n        (select)=\"selectItem(item)\"\r\n        (unselect)=\"unselectItem(item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      />\r\n      <label [for]=\"htmlId() + item.index\">\r\n        {{ item.label() }}\r\n      </label>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'ard-checkbox-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-checkbox-list\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @for (item of items; track item.index) {\r\n    <div\r\n      class=\"ard-checkbox-list__item\"\r\n      [class.ard-item-highlighted]=\"item.highlighted()\"\r\n      [class.ard-item-disabled]=\"item.disabled()\"\r\n      (mouseover)=\"onItemHighlight(item)\"\r\n      (mouseleave)=\"onItemBlur()\"\r\n      (click)=\"toggleItem(item)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-checkbox\r\n        [selected]=\"item.selected()\"\r\n        [disabled]=\"item.disabled()\"\r\n        [color]=\"color()\"\r\n        [htmlId]=\"htmlId() + item.index\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        (focus)=\"onFocus($event)\"\r\n        (focus)=\"onItemFocus(item)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (blur)=\"onItemBlur()\"\r\n        (select)=\"selectItem(item)\"\r\n        (unselect)=\"unselectItem(item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <ng-template _ard-tmp-repository [checkboxTmp]=\"checkboxTemplate()\" />\r\n      </ard-checkbox>\r\n      <label [for]=\"htmlId() + item.index\">\r\n        {{ item.label() }}\r\n      </label>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CHECKBOX_LIST_DEFAULTS]
@@ -10603,15 +10992,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class ArdiumCheckboxListModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListModule, declarations: [ArdiumCheckboxListComponent], imports: [CommonModule, ArdiumCheckboxModule], exports: [ArdiumCheckboxListComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListModule, declarations: [ArdiumCheckboxListComponent, ArdCheckboxListCheckboxTemplateDirective], imports: [CommonModule, ArdiumCheckboxModule, _CheckboxTemplateRepositoryDirective], exports: [ArdiumCheckboxListComponent, ArdCheckboxListCheckboxTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListModule, imports: [CommonModule, ArdiumCheckboxModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumCheckboxListComponent],
-                    imports: [CommonModule, ArdiumCheckboxModule],
-                    exports: [ArdiumCheckboxListComponent],
+                    declarations: [ArdiumCheckboxListComponent, ArdCheckboxListCheckboxTemplateDirective],
+                    imports: [CommonModule, ArdiumCheckboxModule, _CheckboxTemplateRepositoryDirective],
+                    exports: [ArdiumCheckboxListComponent, ArdCheckboxListCheckboxTemplateDirective],
                 }]
         }] });
 
@@ -14071,5 +14460,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_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_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_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_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_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, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, 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, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, 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, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, 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, ComponentColor, DecorationElementAppearance, 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, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, 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_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_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_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_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdCalendarDayTemplateDirective, ArdCalendarDaysViewHeaderTemplateDirective, ArdCalendarFloatingMonthTemplateDirective, ArdCalendarMonthTemplateDirective, ArdCalendarMonthsViewHeaderTemplateDirective, ArdCalendarView, ArdCalendarWeekdayTemplateDirective, ArdCalendarYearTemplateDirective, ArdCalendarYearsViewHeaderTemplateDirective, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxTemplateDirective, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputDayTemplateDirective, ArdDateInputDaysViewHeaderTemplateDirective, ArdDateInputFloatingMonthTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputMonthTemplateDirective, ArdDateInputMonthsViewHeaderTemplateDirective, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDateInputWeekdayTemplateDirective, ArdDateInputYearTemplateDirective, ArdDateInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, 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, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, 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, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, 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, ComponentColor, DecorationElementAppearance, 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, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
 //# sourceMappingURL=ardium-ui-ui.mjs.map