@yuuvis/client-framework 2.20.1 → 3.0.0-beta.20.1

package/fesm2022/yuuvis-client-framework-datepicker.mjs

@@ -1,19 +1,18 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, EventEmitter, forwardRef, Output, Input, HostListener, Component, ViewChild, viewChild, model, effect, untracked, signal, ElementRef, HostBinding, ViewChildren, NgModule } from '@angular/core';
+import { Injectable, inject, input, output, forwardRef, Input, Component, viewChild, model, effect, untracked, viewChildren, ElementRef, signal, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
-import * as i4 from '@angular/material/select';
+import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import { TranslatePipe } from '@yuuvis/client-core';
 import { ReplaySubject } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@yuuvis/client-core';
-import { TranslateModule } from '@yuuvis/client-core';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import * as i1$2 from '@yuuvis/client-framework/common';
@@ -254,22 +253,22 @@ class DatepickerService {
     _validateValue() {
         this._validationErrors = DatepickerUtils.validateValue(this._value, this._options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerService, decorators: [{
             type: Injectable
         }] });
 
 class DateInputElementComponent {
     constructor() {
         this.datepickerService = inject(DatepickerService);
-        this.maxLength = 2;
+        this.maxLength = input(2, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
         this.minValue = 1;
         this.disabled = false;
-        this.placeholder = input('');
-        this.next = new EventEmitter();
-        this.prev = new EventEmitter();
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.next = output();
+        this.prev = output();
         this.fc = new FormControl();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
@@ -278,7 +277,7 @@ class DateInputElementComponent {
     }
     pasteHandler(event) {
         const paste = (event.clipboardData || window.clipboardData).getData('text');
-        if (paste.length > this.maxLength && this.datepickerService.onPaste(paste))
+        if (paste.length > this.maxLength() && this.datepickerService.onPaste(paste))
             event.preventDefault();
     }
     keyDownHandler(event) {
@@ -304,12 +303,12 @@ class DateInputElementComponent {
     }
     onInputChange(iv) {
         this._propagate();
-        if (iv?.length === this.maxLength) {
+        if (iv?.length === this.maxLength()) {
             this.next.emit();
         }
     }
     onBlur() {
-        if (this._value && this._value.length < this.maxLength) {
+        if (this._value && this._value.length < this.maxLength()) {
             this._setValue(this._value);
         }
     }
@@ -323,7 +322,7 @@ class DateInputElementComponent {
     keydownHandler(event) {
         if (event.key === 'ArrowRight') {
             const caretPos = event.target.selectionStart;
-            if (caretPos === this.maxLength) {
+            if (caretPos === this.maxLength()) {
                 this.next.emit();
             }
         }
@@ -338,7 +337,9 @@ class DateInputElementComponent {
         const i = event.target;
     }
     _setValue(n, silent = false) {
-        const v = this._isValidInput(n) ? `${[...Array(this.maxLength - n.toString().length).keys()].map((_) => '0').join('')}${n.toString()}` : undefined;
+        const v = this._isValidInput(n)
+            ? `${[...Array(this.maxLength() - n.toString().length).keys()].map((_) => '0').join('')}${n.toString()}`
+            : undefined;
         if (v !== this._value) {
             this._value = v;
             if (!silent)
@@ -355,7 +356,7 @@ class DateInputElementComponent {
         this._setValue(this.maxValue ? (v < this.minValue ? this.maxValue : v) : v);
     }
     _applyOffset() {
-        return this.maxLength === 4 && !!this.datepickerService.yearOffset;
+        return this.maxLength() === 4 && !!this.datepickerService.yearOffset;
     }
     _propagate() {
         // being the year input (4 digits) also take yearOffset into accout
@@ -400,8 +401,8 @@ class DateInputElementComponent {
     validate(c) {
         return !this._value || this._isValidInput(this._value) ? null : { dateInputElement: { valid: false } };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: DateInputElementComponent, isStandalone: true, selector: "yuv-date-input-element", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { next: "next", prev: "prev" }, host: { listeners: { "paste": "pasteHandler($event)", "keydown": "keyDownHandler($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", type: DateInputElementComponent, isStandalone: true, selector: "yuv-date-input-element", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { next: "next", prev: "prev" }, host: { listeners: { "paste": "pasteHandler($event)", "keydown": "keyDownHandler($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateInputElementComponent),
@@ -412,11 +413,11 @@ class DateInputElementComponent {
                 useExisting: forwardRef(() => DateInputElementComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<input\n[placeholder]=\"placeholder()\"\n  type=\"text\"\n  (focus)=\"focusHandler($event)\"\n  (keydown)=\"keydownHandler($event)\"\n  (wheel)=\"wheelHandler($event)\"\n  (blur)=\"onBlur()\"\n  [readonly]=\"disabled\"\n  pattern=\"[0-9]*\"\n  [disabled]=\"disabled\"\n  [maxlength]=\"maxLength\"\n  [(ngModel)]=\"_value\"\n  (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+        ], ngImport: i0, template: "<input\n[placeholder]=\"placeholder()\"\n  type=\"text\"\n  (focus)=\"focusHandler($event)\"\n  (keydown)=\"keydownHandler($event)\"\n  (wheel)=\"wheelHandler($event)\"\n  (blur)=\"onBlur()\"\n  [readonly]=\"disabled\"\n  pattern=\"[0-9]*\"\n  [disabled]=\"disabled\"\n  [maxlength]=\"maxLength()\"\n  [(ngModel)]=\"_value\"\n  (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateInputElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateInputElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-date-input-element', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], providers: [
+            args: [{ selector: 'yuv-date-input-element', imports: [FormsModule, ReactiveFormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DateInputElementComponent),
@@ -427,26 +428,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             useExisting: forwardRef(() => DateInputElementComponent),
                             multi: true
                         }
-                    ], template: "<input\n[placeholder]=\"placeholder()\"\n  type=\"text\"\n  (focus)=\"focusHandler($event)\"\n  (keydown)=\"keydownHandler($event)\"\n  (wheel)=\"wheelHandler($event)\"\n  (blur)=\"onBlur()\"\n  [readonly]=\"disabled\"\n  pattern=\"[0-9]*\"\n  [disabled]=\"disabled\"\n  [maxlength]=\"maxLength\"\n  [(ngModel)]=\"_value\"\n  (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"] }]
-        }], propDecorators: { pasteHandler: [{
-                type: HostListener,
-                args: ['paste', ['$event']]
-            }], keyDownHandler: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], maxLength: [{
-                type: Input
-            }], maxValue: [{
+                    ], host: {
+                        '(paste)': 'pasteHandler($event)',
+                        '(keydown)': 'keyDownHandler($event)'
+                    }, template: "<input\n[placeholder]=\"placeholder()\"\n  type=\"text\"\n  (focus)=\"focusHandler($event)\"\n  (keydown)=\"keydownHandler($event)\"\n  (wheel)=\"wheelHandler($event)\"\n  (blur)=\"onBlur()\"\n  [readonly]=\"disabled\"\n  pattern=\"[0-9]*\"\n  [disabled]=\"disabled\"\n  [maxlength]=\"maxLength()\"\n  [(ngModel)]=\"_value\"\n  (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"] }]
+        }], propDecorators: { maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], maxValue: [{
                 type: Input
             }], minValue: [{
                 type: Input
             }], disabled: [{
                 type: Input
-            }], next: [{
-                type: Output
-            }], prev: [{
-                type: Output
-            }] } });
+            }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], next: [{ type: i0.Output, args: ["next"] }], prev: [{ type: i0.Output, args: ["prev"] }] } });
 
 class DateInputHourElementComponent extends DateInputElementComponent {
     set dayPeriod(p) {
@@ -461,15 +453,15 @@ class DateInputHourElementComponent extends DateInputElementComponent {
     }
     constructor() {
         super();
-        this.dayPeriodChange = new EventEmitter();
+        this.dayPeriodChange = output();
     }
     writeValue(value) {
         if (parseInt(value) === 0)
             this._value = '12';
         this._setValue(value, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateInputHourElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DateInputHourElementComponent, isStandalone: true, selector: "yuv-date-input-hour-element", inputs: { dayPeriod: "dayPeriod" }, outputs: { dayPeriodChange: "dayPeriodChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateInputHourElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: DateInputHourElementComponent, isStandalone: true, selector: "yuv-date-input-hour-element", inputs: { dayPeriod: "dayPeriod" }, outputs: { dayPeriodChange: "dayPeriodChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateInputHourElementComponent),
@@ -480,9 +472,9 @@ class DateInputHourElementComponent extends DateInputElementComponent {
                 useExisting: forwardRef(() => DateInputHourElementComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<input\n[placeholder]=\"placeholder()\"\n  type=\"text\"\n  (focus)=\"focusHandler($event)\"\n  (keydown)=\"keydownHandler($event)\"\n  (wheel)=\"wheelHandler($event)\"\n  (blur)=\"onBlur()\"\n  [readonly]=\"disabled\"\n  pattern=\"[0-9]*\"\n  [disabled]=\"disabled\"\n  [maxlength]=\"maxLength\"\n  [(ngModel)]=\"_value\"\n  (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<input\n[placeholder]=\"placeholder()\"\n  type=\"text\"\n  (focus)=\"focusHandler($event)\"\n  (keydown)=\"keydownHandler($event)\"\n  (wheel)=\"wheelHandler($event)\"\n  (blur)=\"onBlur()\"\n  [readonly]=\"disabled\"\n  pattern=\"[0-9]*\"\n  [disabled]=\"disabled\"\n  [maxlength]=\"maxLength()\"\n  [(ngModel)]=\"_value\"\n  (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateInputHourElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateInputHourElementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-date-input-hour-element', standalone: true, imports: [CommonModule, FormsModule], providers: [
                         {
@@ -495,12 +487,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             useExisting: forwardRef(() => DateInputHourElementComponent),
                             multi: true
                         }
-                    ], template: "<input\n[placeholder]=\"placeholder()\"\n  type=\"text\"\n  (focus)=\"focusHandler($event)\"\n  (keydown)=\"keydownHandler($event)\"\n  (wheel)=\"wheelHandler($event)\"\n  (blur)=\"onBlur()\"\n  [readonly]=\"disabled\"\n  pattern=\"[0-9]*\"\n  [disabled]=\"disabled\"\n  [maxlength]=\"maxLength\"\n  [(ngModel)]=\"_value\"\n  (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"] }]
+                    ], template: "<input\n[placeholder]=\"placeholder()\"\n  type=\"text\"\n  (focus)=\"focusHandler($event)\"\n  (keydown)=\"keydownHandler($event)\"\n  (wheel)=\"wheelHandler($event)\"\n  (blur)=\"onBlur()\"\n  [readonly]=\"disabled\"\n  pattern=\"[0-9]*\"\n  [disabled]=\"disabled\"\n  [maxlength]=\"maxLength()\"\n  [(ngModel)]=\"_value\"\n  (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dayPeriod: [{
                 type: Input
-            }], dayPeriodChange: [{
-                type: Output
-            }] } });
+            }], dayPeriodChange: [{ type: i0.Output, args: ["dayPeriodChange"] }] } });
 
 class TimeInputComponent {
     get hour12() {
@@ -522,8 +512,10 @@ class TimeInputComponent {
     }
     constructor(fb) {
         this.fb = fb;
+        this.hourInput = viewChild.required('dipHour');
+        this.minuteInput = viewChild.required('dipMinute');
         this._hour12 = false;
-        this.dayPeriodLabels = DEFAULT_DAY_PERIOD_LABELS;
+        this.dayPeriodLabels = input(DEFAULT_DAY_PERIOD_LABELS, ...(ngDevMode ? [{ debugName: "dayPeriodLabels" }] : []));
         this.form = this.fb.group({
             hour: ['', [Validators.required]],
             minute: ['', [Validators.required, Validators.max(59)]]
@@ -595,8 +587,8 @@ class TimeInputComponent {
     validate(ac) {
         return this.form.valid ? null : { invalidTime: true };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TimeInputComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TimeInputComponent, isStandalone: true, selector: "yuv-time-input", inputs: { hour12: "hour12", dayPeriodLabels: "dayPeriodLabels" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TimeInputComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: TimeInputComponent, isStandalone: true, selector: "yuv-time-input", inputs: { hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: false, isRequired: false, transformFunction: null }, dayPeriodLabels: { classPropertyName: "dayPeriodLabels", publicName: "dayPeriodLabels", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TimeInputComponent),
@@ -607,9 +599,9 @@ class TimeInputComponent {
                 useExisting: forwardRef(() => TimeInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "hourInput", first: true, predicate: ["dipHour"], descendants: true }, { propertyName: "minuteInput", first: true, predicate: ["dipMinute"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n  <yuv-date-input-hour-element\n    #dipHour\n    class=\"time hour focusable\"\n    [(dayPeriod)]=\"currentDayPeriod\"\n    formControlName=\"hour\"\n    [maxLength]=\"2\"\n  ></yuv-date-input-hour-element>\n\n  <div class=\"literal\">:</div>\n\n  <yuv-date-input-element\n    #dipMinute\n    class=\"time minute focusable\"\n    [maxValue]=\"59\"\n    [minValue]=\"0\"\n    formControlName=\"minute\"\n    [maxLength]=\"2\"\n  ></yuv-date-input-element>\n\n  @if (hour12) {\n    <div class=\"dayPeriod\">\n      <button type=\"button\" class=\"dp pm\" [ngClass]=\"{ active: currentDayPeriod === 'pm' }\" (click)=\"currentDayPeriod = 'pm'\">\n        {{ dayPeriodLabels.pm }}\n      </button>\n      <button type=\"button\" class=\"dp am\" [ngClass]=\"{ active: currentDayPeriod === 'am' }\" (click)=\"currentDayPeriod = 'am'\">\n        {{ dayPeriodLabels.am }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [":host{--time-input-border-color: var(--ymt-outline-variant)}:host.ng-invalid form{outline:2px solid var(--ymt-danger);outline-offset:2px;color:var(--ymt-danger)}:host form{display:grid;grid-template-rows:auto;grid-template-columns:max-content max-content max-content max-content;grid-template-areas:\"hin div min period\";border-radius:var(--ymt-corner-xs)}:host form .literal{grid-area:div;display:flex;padding:0 var(--ymt-spacing-2xs);align-items:center}:host form yuv-date-input-hour-element,:host form yuv-date-input-element{border:1px solid var(--time-input-border-color);border-radius:var(--ymt-corner-xs);padding:var(--ymt-spacing-2xs);justify-content:center}:host form yuv-date-input-hour-element.hour,:host form yuv-date-input-element.hour{grid-area:hin}:host form yuv-date-input-hour-element.minute,:host form yuv-date-input-element.minute{grid-area:min}:host form .dayPeriod{grid-area:period;display:flex;flex-flow:column;justify-content:center;margin-inline-start:var(--ymt-spacing-xs)}:host form .dayPeriod>button.dp{padding:.2em;line-height:1em;margin:1px 0;border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);background-color:transparent}:host form .dayPeriod>button.dp.active{background-color:var(--ymt-primary);border-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host form .dayPeriod>button.dp:not(.active):hover{background-color:var(--ymt-hover-background);color:var(--ymt-on-hover-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DateInputHourElementComponent, selector: "yuv-date-input-hour-element", inputs: ["dayPeriod"], outputs: ["dayPeriodChange"] }, { kind: "component", type: DateInputElementComponent, selector: "yuv-date-input-element", inputs: ["maxLength", "maxValue", "minValue", "disabled", "placeholder"], outputs: ["next", "prev"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+        ], viewQueries: [{ propertyName: "hourInput", first: true, predicate: ["dipHour"], descendants: true, isSignal: true }, { propertyName: "minuteInput", first: true, predicate: ["dipMinute"], descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n  <yuv-date-input-hour-element\n    #dipHour\n    class=\"time hour focusable\"\n    [(dayPeriod)]=\"currentDayPeriod\"\n    formControlName=\"hour\"\n    [maxLength]=\"2\"\n  ></yuv-date-input-hour-element>\n\n  <div class=\"literal\">:</div>\n\n  <yuv-date-input-element\n    #dipMinute\n    class=\"time minute focusable\"\n    [maxValue]=\"59\"\n    [minValue]=\"0\"\n    formControlName=\"minute\"\n    [maxLength]=\"2\"\n  ></yuv-date-input-element>\n\n  @if (hour12) {\n    <div class=\"dayPeriod\">\n      <button type=\"button\" class=\"dp pm\" [ngClass]=\"{ active: currentDayPeriod === 'pm' }\" (click)=\"currentDayPeriod = 'pm'\">\n        {{ dayPeriodLabels().pm }}\n      </button>\n      <button type=\"button\" class=\"dp am\" [ngClass]=\"{ active: currentDayPeriod === 'am' }\" (click)=\"currentDayPeriod = 'am'\">\n        {{ dayPeriodLabels().am }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [":host{--time-input-border-color: var(--ymt-outline-variant)}:host.ng-invalid form{outline:2px solid var(--ymt-danger);outline-offset:2px;color:var(--ymt-danger)}:host form{display:grid;grid-template-rows:auto;grid-template-columns:max-content max-content max-content max-content;grid-template-areas:\"hin div min period\";border-radius:var(--ymt-corner-xs)}:host form .literal{grid-area:div;display:flex;padding:0 var(--ymt-spacing-2xs);align-items:center}:host form yuv-date-input-hour-element,:host form yuv-date-input-element{border:1px solid var(--time-input-border-color);border-radius:var(--ymt-corner-xs);padding:var(--ymt-spacing-2xs);justify-content:center}:host form yuv-date-input-hour-element.hour,:host form yuv-date-input-element.hour{grid-area:hin}:host form yuv-date-input-hour-element.minute,:host form yuv-date-input-element.minute{grid-area:min}:host form .dayPeriod{grid-area:period;display:flex;flex-flow:column;justify-content:center;margin-inline-start:var(--ymt-spacing-xs)}:host form .dayPeriod>button.dp{padding:.2em;line-height:1em;margin:1px 0;border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);background-color:transparent}:host form .dayPeriod>button.dp.active{background-color:var(--ymt-primary);border-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host form .dayPeriod>button.dp:not(.active):hover{background-color:var(--ymt-hover-background);color:var(--ymt-on-hover-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DateInputHourElementComponent, selector: "yuv-date-input-hour-element", inputs: ["dayPeriod"], outputs: ["dayPeriodChange"] }, { kind: "component", type: DateInputElementComponent, selector: "yuv-date-input-element", inputs: ["maxLength", "maxValue", "minValue", "disabled", "placeholder"], outputs: ["next", "prev"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TimeInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TimeInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-time-input', standalone: true, imports: [CommonModule, MatIconModule, DateInputHourElementComponent, DateInputElementComponent, MatButtonModule, ReactiveFormsModule], providers: [
                         {
@@ -622,18 +614,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             useExisting: forwardRef(() => TimeInputComponent),
                             multi: true
                         }
-                    ], template: "<form [formGroup]=\"form\">\n  <yuv-date-input-hour-element\n    #dipHour\n    class=\"time hour focusable\"\n    [(dayPeriod)]=\"currentDayPeriod\"\n    formControlName=\"hour\"\n    [maxLength]=\"2\"\n  ></yuv-date-input-hour-element>\n\n  <div class=\"literal\">:</div>\n\n  <yuv-date-input-element\n    #dipMinute\n    class=\"time minute focusable\"\n    [maxValue]=\"59\"\n    [minValue]=\"0\"\n    formControlName=\"minute\"\n    [maxLength]=\"2\"\n  ></yuv-date-input-element>\n\n  @if (hour12) {\n    <div class=\"dayPeriod\">\n      <button type=\"button\" class=\"dp pm\" [ngClass]=\"{ active: currentDayPeriod === 'pm' }\" (click)=\"currentDayPeriod = 'pm'\">\n        {{ dayPeriodLabels.pm }}\n      </button>\n      <button type=\"button\" class=\"dp am\" [ngClass]=\"{ active: currentDayPeriod === 'am' }\" (click)=\"currentDayPeriod = 'am'\">\n        {{ dayPeriodLabels.am }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [":host{--time-input-border-color: var(--ymt-outline-variant)}:host.ng-invalid form{outline:2px solid var(--ymt-danger);outline-offset:2px;color:var(--ymt-danger)}:host form{display:grid;grid-template-rows:auto;grid-template-columns:max-content max-content max-content max-content;grid-template-areas:\"hin div min period\";border-radius:var(--ymt-corner-xs)}:host form .literal{grid-area:div;display:flex;padding:0 var(--ymt-spacing-2xs);align-items:center}:host form yuv-date-input-hour-element,:host form yuv-date-input-element{border:1px solid var(--time-input-border-color);border-radius:var(--ymt-corner-xs);padding:var(--ymt-spacing-2xs);justify-content:center}:host form yuv-date-input-hour-element.hour,:host form yuv-date-input-element.hour{grid-area:hin}:host form yuv-date-input-hour-element.minute,:host form yuv-date-input-element.minute{grid-area:min}:host form .dayPeriod{grid-area:period;display:flex;flex-flow:column;justify-content:center;margin-inline-start:var(--ymt-spacing-xs)}:host form .dayPeriod>button.dp{padding:.2em;line-height:1em;margin:1px 0;border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);background-color:transparent}:host form .dayPeriod>button.dp.active{background-color:var(--ymt-primary);border-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host form .dayPeriod>button.dp:not(.active):hover{background-color:var(--ymt-hover-background);color:var(--ymt-on-hover-background)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { hourInput: [{
-                type: ViewChild,
-                args: ['dipHour']
-            }], minuteInput: [{
-                type: ViewChild,
-                args: ['dipMinute']
-            }], hour12: [{
-                type: Input
-            }], dayPeriodLabels: [{
+                    ], template: "<form [formGroup]=\"form\">\n  <yuv-date-input-hour-element\n    #dipHour\n    class=\"time hour focusable\"\n    [(dayPeriod)]=\"currentDayPeriod\"\n    formControlName=\"hour\"\n    [maxLength]=\"2\"\n  ></yuv-date-input-hour-element>\n\n  <div class=\"literal\">:</div>\n\n  <yuv-date-input-element\n    #dipMinute\n    class=\"time minute focusable\"\n    [maxValue]=\"59\"\n    [minValue]=\"0\"\n    formControlName=\"minute\"\n    [maxLength]=\"2\"\n  ></yuv-date-input-element>\n\n  @if (hour12) {\n    <div class=\"dayPeriod\">\n      <button type=\"button\" class=\"dp pm\" [ngClass]=\"{ active: currentDayPeriod === 'pm' }\" (click)=\"currentDayPeriod = 'pm'\">\n        {{ dayPeriodLabels().pm }}\n      </button>\n      <button type=\"button\" class=\"dp am\" [ngClass]=\"{ active: currentDayPeriod === 'am' }\" (click)=\"currentDayPeriod = 'am'\">\n        {{ dayPeriodLabels().am }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [":host{--time-input-border-color: var(--ymt-outline-variant)}:host.ng-invalid form{outline:2px solid var(--ymt-danger);outline-offset:2px;color:var(--ymt-danger)}:host form{display:grid;grid-template-rows:auto;grid-template-columns:max-content max-content max-content max-content;grid-template-areas:\"hin div min period\";border-radius:var(--ymt-corner-xs)}:host form .literal{grid-area:div;display:flex;padding:0 var(--ymt-spacing-2xs);align-items:center}:host form yuv-date-input-hour-element,:host form yuv-date-input-element{border:1px solid var(--time-input-border-color);border-radius:var(--ymt-corner-xs);padding:var(--ymt-spacing-2xs);justify-content:center}:host form yuv-date-input-hour-element.hour,:host form yuv-date-input-element.hour{grid-area:hin}:host form yuv-date-input-hour-element.minute,:host form yuv-date-input-element.minute{grid-area:min}:host form .dayPeriod{grid-area:period;display:flex;flex-flow:column;justify-content:center;margin-inline-start:var(--ymt-spacing-xs)}:host form .dayPeriod>button.dp{padding:.2em;line-height:1em;margin:1px 0;border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);background-color:transparent}:host form .dayPeriod>button.dp.active{background-color:var(--ymt-primary);border-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host form .dayPeriod>button.dp:not(.active):hover{background-color:var(--ymt-hover-background);color:var(--ymt-on-hover-background)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { hourInput: [{ type: i0.ViewChild, args: ['dipHour', { isSignal: true }] }], minuteInput: [{ type: i0.ViewChild, args: ['dipMinute', { isSignal: true }] }], hour12: [{
                 type: Input
-            }] } });
+            }], dayPeriodLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayPeriodLabels", required: false }] }] } });
 
 class CalendarComponent {
     constructor() {
@@ -648,16 +632,16 @@ class CalendarComponent {
         /**
          * Allow only date inputs after this date
          */
-        this.minDate = input();
+        this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
         /**
          * Allow only date inputs before this date
          */
-        this.maxDate = input();
+        this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
         /**
          * Allow only date inputs that are after today
          */
-        this.onlyFutureDates = input(false);
-        this.date = model(new Date());
+        this.onlyFutureDates = input(false, ...(ngDevMode ? [{ debugName: "onlyFutureDates" }] : []));
+        this.date = model(new Date(), ...(ngDevMode ? [{ debugName: "date" }] : []));
         this.#dateEffect = effect(() => {
             const d = this.date();
             untracked(() => {
@@ -668,17 +652,17 @@ class CalendarComponent {
                         this.#buildDate();
                 }
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "#dateEffect" }] : []));
         this.months = [];
         this.DEFAULT_FIRST_DAY_OF_WEEK = 7;
         this._firstDayOfWeek = this.DEFAULT_FIRST_DAY_OF_WEEK;
         this.daysOfWeek = [];
         this.dayPeriodLabels = DEFAULT_DAY_PERIOD_LABELS;
-        this.locale = input();
+        this.locale = input(...(ngDevMode ? [undefined, { debugName: "locale" }] : []));
         this.#localeEffect = effect(() => {
             this._setLocale(this.locale() || 'en');
-        });
-        this.withTime = input(false);
+        }, ...(ngDevMode ? [{ debugName: "#localeEffect" }] : []));
+        this.withTime = input(false, ...(ngDevMode ? [{ debugName: "withTime" }] : []));
         this.#withTimeEffect = effect(() => {
             // keep to trigger effect
             const wt = this.withTime();
@@ -688,8 +672,8 @@ class CalendarComponent {
                     this.time = this._dateToTime(d);
                 }
             });
-        });
-        this.hour12 = input(false);
+        }, ...(ngDevMode ? [{ debugName: "#withTimeEffect" }] : []));
+        this.hour12 = input(false, ...(ngDevMode ? [{ debugName: "hour12" }] : []));
         this.selectedIndex = -1;
         this.focusedIndex = 0;
         this._focusPos = {
@@ -835,7 +819,9 @@ class CalendarComponent {
     _setLocale(locale) {
         this.dayPeriodLabels = this.datepickerService.getDayPeriodLabels(locale);
         const mFormat = new Intl.DateTimeFormat(locale, { month: 'long' }).format;
-        this.months = [...Array(12).keys()].map((m) => mFormat(new Date(Date.UTC(2021, m % 12)))).map((label, index) => ({ label, value: index }));
+        this.months = [...Array(12).keys()]
+            .map((m) => mFormat(new Date(Date.UTC(2021, m % 12))))
+            .map((label, index) => ({ label, value: index }));
         const dFormat = new Intl.DateTimeFormat(locale, { weekday: 'short' }).format;
         this._firstDayOfWeek = DatepickerUtils.getWeekInfo(this.locale() || 'en').firstDay - 1;
         const daysOfWeekIdx = [];
@@ -1025,13 +1011,13 @@ class CalendarComponent {
             row: Math.round(this.focusedIndex / this._numberOfWeeks)
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: CalendarComponent, isStandalone: true, selector: "yuv-calendar", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, onlyFutureDates: { classPropertyName: "onlyFutureDates", publicName: "onlyFutureDates", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, providers: [DatepickerService], viewQueries: [{ propertyName: "calEl", first: true, predicate: ["cal"], descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"date\">\n  <header>\n    <div class=\"month-picker\">\n      <mat-select [panelWidth]=\"null\" [(ngModel)]=\"month\" (ngModelChange)=\"selectMonthOfYear($event)\">\n        <mat-select-trigger> {{ month !== undefined ? months[month].label : '' }} &nbsp; </mat-select-trigger>\n        @for (m of months; track $index) {\n          <mat-option [value]=\"m.value\">{{ m.label }}</mat-option>\n        }\n      </mat-select>\n    </div>\n\n    <input\n      class=\"year-picker\"\n      name=\"year\"\n      type=\"number\"\n      [min]=\"minYear\"\n      [max]=\"maxYear\"\n      [(ngModel)]=\"_offsetYear\"\n      (keydown)=\"onYearInputKeydown($event)\"\n      (ngModelChange)=\"selectYear($event)\"\n    />\n  </header>\n  <main>\n    <ul class=\"daysOfWeek\">\n      @for (d of daysOfWeek; track d) {\n        <li>{{ d }}</li>\n      }\n    </ul>\n    <ul class=\"days\" tabindex=\"0\" (keydown)=\"handleKeyboardEvent($event)\">\n      @for (d of calendarDays; track d; let i = $index) {\n        <li\n          [attr.data-day]=\"d.id\"\n          (click)=\"selectByIndex(i, true)\"\n          [ngClass]=\"{\n            disabled: d.disabled,\n            inactive: d.inactive,\n            focused: i === focusedIndex,\n            selected: i === selectedIndex\n          }\"\n        >\n          {{ d.day }}\n        </li>\n      }\n    </ul>\n  </main>\n</section>\n@if (withTime()) {\n  <section class=\"time\">\n    <label>\n      {{ 'yuv.calendar.time.label' | translate }}\n      <yuv-time-input [(ngModel)]=\"time\" [hour12]=\"hour12()\" [dayPeriodLabels]=\"dayPeriodLabels\" (ngModelChange)=\"onTimeChange($event)\"> </yuv-time-input>\n    </label>\n  </section>\n}\n", styles: [":host{--_calendar-item-size: var(--calendar-item-size, 3em);--_calendar-item-border-size: var(--calendar-item-border-size, 2px);display:inline-flex;flex-flow:column}:host section.date{max-width:calc(var(--_calendar-item-size) * 11)}:host section.date header{border-block-end:1px solid var(--ymt-outline-variant)}:host section.time{display:flex;align-items:center;border-block-start:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host section.time label{display:flex;width:100%;flex-flow:column;align-items:center}:host section.time yuv-time-input{margin-block-start:var(--ymt-spacing-m)}:host *:focus:not(:focus-visible){outline:none}:host header{display:flex;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s)}:host header mat-select,:host header input.year-picker{border:1px solid transparent;border-radius:var(--ymt-corner-xs)}:host header mat-select:focus,:host header input.year-picker:focus{border-color:var(--ymt-primary)}:host header mat-select{padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs)}:host header input.year-picker{background-color:transparent;text-align:end;font-size:2.5em;width:5ch;color:var(--ymt-text-color-subtle);-moz-appearance:textfield}:host header input.year-picker::-webkit-outer-spin-button,:host header input.year-picker::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host main{padding:0}:host main ul li.focused:before{outline:var(--_calendar-item-border-size) solid var(--ymt-text-color-subtle);outline-offset:2px}:host ul{list-style:none;display:flex;flex-wrap:wrap;text-align:center;padding:0;min-width:calc(var(--_calendar-item-size) * 7 + .5em)}:host ul.daysOfWeek li{font-weight:700;color:var(--ymt-text-color-subtle)}:host ul.days li:before{display:block;position:absolute;content:\"\";width:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);height:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);border-radius:var(--ymt-corner-full);top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}:host ul.days li{position:relative;min-width:var(--_calendar-item-size);z-index:1;line-height:1em;cursor:pointer;color:var(--ymt-text-color);height:var(--_calendar-item-size);display:flex;flex-flow:column;align-items:center;justify-content:center}:host ul.days li.focused{color:var(--ymt-on-focus-background)}:host ul.days li.focused:before{background-color:var(--ymt-focus-background)}:host ul.days li.inactive:not(.disabled){opacity:.5}:host ul.days li.disabled{opacity:.5;cursor:default}:host ul.days li.selected{color:var(--ymt-on-selection-background)}:host ul.days li.selected:before{background-color:var(--ymt-selection-background);outline-color:var(--ymt-selection-background);opacity:1}:host ul.days li:not(.selected,.disabled).focused:before,:host ul.days li:not(.selected,.disabled):hover:before{opacity:1}:host ul li{position:relative;width:14.2857142857%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TimeInputComponent, selector: "yuv-time-input", inputs: ["hour12", "dayPeriodLabels"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: CalendarComponent, isStandalone: true, selector: "yuv-calendar", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, onlyFutureDates: { classPropertyName: "onlyFutureDates", publicName: "onlyFutureDates", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, providers: [DatepickerService], viewQueries: [{ propertyName: "calEl", first: true, predicate: ["cal"], descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"date\">\n  <header>\n    <div class=\"month-picker\">\n      <mat-select [panelWidth]=\"null\" [(ngModel)]=\"month\" (ngModelChange)=\"selectMonthOfYear($event)\">\n        <mat-select-trigger> {{ month !== undefined ? months[month].label : '' }} &nbsp; </mat-select-trigger>\n        @for (m of months; track $index) {\n          <mat-option [value]=\"m.value\">{{ m.label }}</mat-option>\n        }\n      </mat-select>\n    </div>\n\n    <input\n      class=\"year-picker\"\n      name=\"year\"\n      type=\"number\"\n      [min]=\"minYear\"\n      [max]=\"maxYear\"\n      [(ngModel)]=\"_offsetYear\"\n      (keydown)=\"onYearInputKeydown($event)\"\n      (ngModelChange)=\"selectYear($event)\"\n    />\n  </header>\n  <main>\n    <ul class=\"daysOfWeek\">\n      @for (d of daysOfWeek; track d) {\n        <li>{{ d }}</li>\n      }\n    </ul>\n    <ul class=\"days\" tabindex=\"0\" (keydown)=\"handleKeyboardEvent($event)\">\n      @for (d of calendarDays; track d; let i = $index) {\n        <li\n          [attr.data-day]=\"d.id\"\n          (click)=\"selectByIndex(i, true)\"\n          [ngClass]=\"{\n            disabled: d.disabled,\n            inactive: d.inactive,\n            focused: i === focusedIndex,\n            selected: i === selectedIndex\n          }\"\n        >\n          {{ d.day }}\n        </li>\n      }\n    </ul>\n  </main>\n</section>\n@if (withTime()) {\n  <section class=\"time\">\n    <label>\n      {{ 'yuv.calendar.time.label' | translate }}\n      <yuv-time-input [(ngModel)]=\"time\" [hour12]=\"hour12()\" [dayPeriodLabels]=\"dayPeriodLabels\" (ngModelChange)=\"onTimeChange($event)\"> </yuv-time-input>\n    </label>\n  </section>\n}\n", styles: [":host{--_calendar-item-size: var(--calendar-item-size, 3em);--_calendar-item-border-size: var(--calendar-item-border-size, 2px);display:inline-flex;flex-flow:column}:host section.date{max-width:calc(var(--_calendar-item-size) * 11)}:host section.date header{border-block-end:1px solid var(--ymt-outline-variant)}:host section.time{display:flex;align-items:center;border-block-start:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host section.time label{display:flex;width:100%;flex-flow:column;align-items:center}:host section.time yuv-time-input{margin-block-start:var(--ymt-spacing-m)}:host *:focus:not(:focus-visible){outline:none}:host header{display:flex;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s)}:host header mat-select,:host header input.year-picker{border:1px solid transparent;border-radius:var(--ymt-corner-xs)}:host header mat-select:focus,:host header input.year-picker:focus{border-color:var(--ymt-primary)}:host header mat-select{padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs)}:host header input.year-picker{background-color:transparent;text-align:end;font-size:2.5em;width:5ch;color:var(--ymt-text-color-subtle);-moz-appearance:textfield}:host header input.year-picker::-webkit-outer-spin-button,:host header input.year-picker::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host main{padding:0}:host main ul li.focused:before{outline:var(--_calendar-item-border-size) solid var(--ymt-text-color-subtle);outline-offset:2px}:host ul{list-style:none;display:flex;flex-wrap:wrap;text-align:center;padding:0;min-width:calc(var(--_calendar-item-size) * 7 + .5em)}:host ul.daysOfWeek li{font-weight:700;color:var(--ymt-text-color-subtle)}:host ul.days li:before{display:block;position:absolute;content:\"\";width:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);height:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);border-radius:var(--ymt-corner-full);top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}:host ul.days li{position:relative;min-width:var(--_calendar-item-size);z-index:1;line-height:1em;cursor:pointer;color:var(--ymt-text-color);height:var(--_calendar-item-size);display:flex;flex-flow:column;align-items:center;justify-content:center}:host ul.days li.focused{color:var(--ymt-on-focus-background)}:host ul.days li.focused:before{background-color:var(--ymt-focus-background)}:host ul.days li.inactive:not(.disabled){opacity:.5}:host ul.days li.disabled{opacity:.5;cursor:default}:host ul.days li.selected{color:var(--ymt-on-selection-background)}:host ul.days li.selected:before{background-color:var(--ymt-selection-background);outline-color:var(--ymt-selection-background);opacity:1}:host ul.days li:not(.selected,.disabled).focused:before,:host ul.days li:not(.selected,.disabled):hover:before{opacity:1}:host ul li{position:relative;width:14.2857142857%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TimeInputComponent, selector: "yuv-time-input", inputs: ["hour12", "dayPeriodLabels"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-calendar', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, MatSelectModule, TimeInputComponent], providers: [DatepickerService], template: "<section class=\"date\">\n  <header>\n    <div class=\"month-picker\">\n      <mat-select [panelWidth]=\"null\" [(ngModel)]=\"month\" (ngModelChange)=\"selectMonthOfYear($event)\">\n        <mat-select-trigger> {{ month !== undefined ? months[month].label : '' }} &nbsp; </mat-select-trigger>\n        @for (m of months; track $index) {\n          <mat-option [value]=\"m.value\">{{ m.label }}</mat-option>\n        }\n      </mat-select>\n    </div>\n\n    <input\n      class=\"year-picker\"\n      name=\"year\"\n      type=\"number\"\n      [min]=\"minYear\"\n      [max]=\"maxYear\"\n      [(ngModel)]=\"_offsetYear\"\n      (keydown)=\"onYearInputKeydown($event)\"\n      (ngModelChange)=\"selectYear($event)\"\n    />\n  </header>\n  <main>\n    <ul class=\"daysOfWeek\">\n      @for (d of daysOfWeek; track d) {\n        <li>{{ d }}</li>\n      }\n    </ul>\n    <ul class=\"days\" tabindex=\"0\" (keydown)=\"handleKeyboardEvent($event)\">\n      @for (d of calendarDays; track d; let i = $index) {\n        <li\n          [attr.data-day]=\"d.id\"\n          (click)=\"selectByIndex(i, true)\"\n          [ngClass]=\"{\n            disabled: d.disabled,\n            inactive: d.inactive,\n            focused: i === focusedIndex,\n            selected: i === selectedIndex\n          }\"\n        >\n          {{ d.day }}\n        </li>\n      }\n    </ul>\n  </main>\n</section>\n@if (withTime()) {\n  <section class=\"time\">\n    <label>\n      {{ 'yuv.calendar.time.label' | translate }}\n      <yuv-time-input [(ngModel)]=\"time\" [hour12]=\"hour12()\" [dayPeriodLabels]=\"dayPeriodLabels\" (ngModelChange)=\"onTimeChange($event)\"> </yuv-time-input>\n    </label>\n  </section>\n}\n", styles: [":host{--_calendar-item-size: var(--calendar-item-size, 3em);--_calendar-item-border-size: var(--calendar-item-border-size, 2px);display:inline-flex;flex-flow:column}:host section.date{max-width:calc(var(--_calendar-item-size) * 11)}:host section.date header{border-block-end:1px solid var(--ymt-outline-variant)}:host section.time{display:flex;align-items:center;border-block-start:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host section.time label{display:flex;width:100%;flex-flow:column;align-items:center}:host section.time yuv-time-input{margin-block-start:var(--ymt-spacing-m)}:host *:focus:not(:focus-visible){outline:none}:host header{display:flex;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s)}:host header mat-select,:host header input.year-picker{border:1px solid transparent;border-radius:var(--ymt-corner-xs)}:host header mat-select:focus,:host header input.year-picker:focus{border-color:var(--ymt-primary)}:host header mat-select{padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs)}:host header input.year-picker{background-color:transparent;text-align:end;font-size:2.5em;width:5ch;color:var(--ymt-text-color-subtle);-moz-appearance:textfield}:host header input.year-picker::-webkit-outer-spin-button,:host header input.year-picker::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host main{padding:0}:host main ul li.focused:before{outline:var(--_calendar-item-border-size) solid var(--ymt-text-color-subtle);outline-offset:2px}:host ul{list-style:none;display:flex;flex-wrap:wrap;text-align:center;padding:0;min-width:calc(var(--_calendar-item-size) * 7 + .5em)}:host ul.daysOfWeek li{font-weight:700;color:var(--ymt-text-color-subtle)}:host ul.days li:before{display:block;position:absolute;content:\"\";width:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);height:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);border-radius:var(--ymt-corner-full);top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}:host ul.days li{position:relative;min-width:var(--_calendar-item-size);z-index:1;line-height:1em;cursor:pointer;color:var(--ymt-text-color);height:var(--_calendar-item-size);display:flex;flex-flow:column;align-items:center;justify-content:center}:host ul.days li.focused{color:var(--ymt-on-focus-background)}:host ul.days li.focused:before{background-color:var(--ymt-focus-background)}:host ul.days li.inactive:not(.disabled){opacity:.5}:host ul.days li.disabled{opacity:.5;cursor:default}:host ul.days li.selected{color:var(--ymt-on-selection-background)}:host ul.days li.selected:before{background-color:var(--ymt-selection-background);outline-color:var(--ymt-selection-background);opacity:1}:host ul.days li:not(.selected,.disabled).focused:before,:host ul.days li:not(.selected,.disabled):hover:before{opacity:1}:host ul li{position:relative;width:14.2857142857%}\n"] }]
-        }] });
+            args: [{ selector: 'yuv-calendar', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe, MatSelectModule, TimeInputComponent], providers: [DatepickerService], template: "<section class=\"date\">\n  <header>\n    <div class=\"month-picker\">\n      <mat-select [panelWidth]=\"null\" [(ngModel)]=\"month\" (ngModelChange)=\"selectMonthOfYear($event)\">\n        <mat-select-trigger> {{ month !== undefined ? months[month].label : '' }} &nbsp; </mat-select-trigger>\n        @for (m of months; track $index) {\n          <mat-option [value]=\"m.value\">{{ m.label }}</mat-option>\n        }\n      </mat-select>\n    </div>\n\n    <input\n      class=\"year-picker\"\n      name=\"year\"\n      type=\"number\"\n      [min]=\"minYear\"\n      [max]=\"maxYear\"\n      [(ngModel)]=\"_offsetYear\"\n      (keydown)=\"onYearInputKeydown($event)\"\n      (ngModelChange)=\"selectYear($event)\"\n    />\n  </header>\n  <main>\n    <ul class=\"daysOfWeek\">\n      @for (d of daysOfWeek; track d) {\n        <li>{{ d }}</li>\n      }\n    </ul>\n    <ul class=\"days\" tabindex=\"0\" (keydown)=\"handleKeyboardEvent($event)\">\n      @for (d of calendarDays; track d; let i = $index) {\n        <li\n          [attr.data-day]=\"d.id\"\n          (click)=\"selectByIndex(i, true)\"\n          [ngClass]=\"{\n            disabled: d.disabled,\n            inactive: d.inactive,\n            focused: i === focusedIndex,\n            selected: i === selectedIndex\n          }\"\n        >\n          {{ d.day }}\n        </li>\n      }\n    </ul>\n  </main>\n</section>\n@if (withTime()) {\n  <section class=\"time\">\n    <label>\n      {{ 'yuv.calendar.time.label' | translate }}\n      <yuv-time-input [(ngModel)]=\"time\" [hour12]=\"hour12()\" [dayPeriodLabels]=\"dayPeriodLabels\" (ngModelChange)=\"onTimeChange($event)\"> </yuv-time-input>\n    </label>\n  </section>\n}\n", styles: [":host{--_calendar-item-size: var(--calendar-item-size, 3em);--_calendar-item-border-size: var(--calendar-item-border-size, 2px);display:inline-flex;flex-flow:column}:host section.date{max-width:calc(var(--_calendar-item-size) * 11)}:host section.date header{border-block-end:1px solid var(--ymt-outline-variant)}:host section.time{display:flex;align-items:center;border-block-start:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host section.time label{display:flex;width:100%;flex-flow:column;align-items:center}:host section.time yuv-time-input{margin-block-start:var(--ymt-spacing-m)}:host *:focus:not(:focus-visible){outline:none}:host header{display:flex;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s)}:host header mat-select,:host header input.year-picker{border:1px solid transparent;border-radius:var(--ymt-corner-xs)}:host header mat-select:focus,:host header input.year-picker:focus{border-color:var(--ymt-primary)}:host header mat-select{padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs)}:host header input.year-picker{background-color:transparent;text-align:end;font-size:2.5em;width:5ch;color:var(--ymt-text-color-subtle);-moz-appearance:textfield}:host header input.year-picker::-webkit-outer-spin-button,:host header input.year-picker::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host main{padding:0}:host main ul li.focused:before{outline:var(--_calendar-item-border-size) solid var(--ymt-text-color-subtle);outline-offset:2px}:host ul{list-style:none;display:flex;flex-wrap:wrap;text-align:center;padding:0;min-width:calc(var(--_calendar-item-size) * 7 + .5em)}:host ul.daysOfWeek li{font-weight:700;color:var(--ymt-text-color-subtle)}:host ul.days li:before{display:block;position:absolute;content:\"\";width:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);height:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);border-radius:var(--ymt-corner-full);top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}:host ul.days li{position:relative;min-width:var(--_calendar-item-size);z-index:1;line-height:1em;cursor:pointer;color:var(--ymt-text-color);height:var(--_calendar-item-size);display:flex;flex-flow:column;align-items:center;justify-content:center}:host ul.days li.focused{color:var(--ymt-on-focus-background)}:host ul.days li.focused:before{background-color:var(--ymt-focus-background)}:host ul.days li.inactive:not(.disabled){opacity:.5}:host ul.days li.disabled{opacity:.5;cursor:default}:host ul.days li.selected{color:var(--ymt-on-selection-background)}:host ul.days li.selected:before{background-color:var(--ymt-selection-background);outline-color:var(--ymt-selection-background);opacity:1}:host ul.days li:not(.selected,.disabled).focused:before,:host ul.days li:not(.selected,.disabled):hover:before{opacity:1}:host ul li{position:relative;width:14.2857142857%}\n"] }]
+        }], propDecorators: { calEl: [{ type: i0.ViewChild, args: ['cal', { isSignal: true }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], onlyFutureDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyFutureDates", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], withTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTime", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }] } });
 
 /**
  *
@@ -1076,10 +1062,11 @@ class DateInputComponent {
         this.datepickerService = datepickerService;
         this.fb = fb;
         this.elRef = elRef;
+        this.dateInputEls = viewChildren(DateInputElementComponent, ...(ngDevMode ? [{ debugName: "dateInputEls", read: ElementRef }] : [{ read: ElementRef }]));
         this._subs = [];
         this.date = null;
         this._disabled = false;
-        this.invalid = signal(false);
+        this.invalid = signal(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
         this._refreshPlaceholder = true;
         this._locale = this.datepickerService.DEFAULT_LANGUAGE;
         this._withTime = false;
@@ -1316,24 +1303,17 @@ class DateInputComponent {
             this._formStateSub.unsubscribe();
         this._subs.forEach((s) => s.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateInputComponent, deps: [{ token: DatepickerService }, { token: i1.FormBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DateInputComponent, isStandalone: true, selector: "yuv-date-input", inputs: { disabled: "disabled", placeholder: "placeholder", withTime: "withTime", hour12: "hour12" }, host: { properties: { "class.invalid": "invalid()", "class.has-value": "this.date", "attr.data-datevalue": "this.dateAttribute" } }, viewQueries: [{ propertyName: "dateInputEls", predicate: DateInputElementComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "@if (dateInputForm) {\n  <form [formGroup]=\"dateInputForm!\" \n  (click)=\"onFormClick($event)\" (yuvFocusWithinBlur)=\"onDateInputBlur()\">\n    @for (t of dateTokens; track t) {\n      @switch (t.type) {\n        <!-- day -->\n        @case ('day') {\n          <yuv-date-input-element\n            placeholder=\"31\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"day\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            [minValue]=\"1\"\n            [maxValue]=\"31\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- month -->\n        @case ('month') {\n          <yuv-date-input-element\n            placeholder=\"12\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"month\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            [minValue]=\"1\"\n            [maxValue]=\"12\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- year -->\n        @case ('year') {\n          <yuv-date-input-element\n            placeholder=\"2000\"\n            class=\"year\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"year\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"4\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- hours -->\n        @case ('hour') {\n          <yuv-date-input-hour-element\n            placeholder=\"10\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            [(dayPeriod)]=\"currentDayPeriod\"\n            formControlName=\"hour\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-hour-element>\n        }\n        <!-- minutes -->\n        @case ('minute') {\n          <yuv-date-input-element\n            placeholder=\"00\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            [minValue]=\"0\"\n            [maxValue]=\"59\"\n            formControlName=\"minute\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        @case ('literal') {\n          <input type=\"text\" class=\"literal\" [value]=\"t.value\" readonly inert />\n        }\n        @case ('dayPeriod') {\n          <button type=\"button\" class=\"dayPeriod\" [disabled]=\"dateInputForm.disabled\" (click)=\"toggleDayPeriod()\">\n            {{ dayPeriodLabels[currentDayPeriod!] }}\n          </button>\n        }\n      }\n    }\n  </form>\n}\n", styles: [":host{--placeholder-color: rgb(from var(--ymt-text-color) r g b / .2);--period-button-color: var(--ymt-text-color);--period-button-border-color: var(--ymt-outline);--period-button-background-color: transparent;display:flex;position:relative;outline:0;align-items:center;overflow-x:auto;scrollbar-width:none;transition:opacity .2s ease-in-out}:host yuv-date-input-hour-element,:host yuv-date-input-element{border:0;border-block-end:1px solid transparent;box-sizing:border-box}:host input.literal{width:1ch;text-align:center;padding:0;border:0;background-color:transparent;border-block-end:1px solid transparent}:host:not(:focus-within):not(.has-value):not(.invalid){--period-button-color: var(--placeholder-color);--period-button-border-color: var(--placeholder-color);--period-button-background-color: transparent}:host:not(:focus-within):not(.has-value):not(.invalid) input.literal{color:var(--placeholder-color)}:host:not(:focus-within):not(:hover):not(.has-value):not(.invalid){opacity:0}:host form{flex:1 1 auto;cursor:text;transition:opacity .2s ease-in-out;display:flex;opacity:1;align-items:flex-end;gap:.1em}:host form button.dayPeriod{color:var(--period-button-color);background-color:var(--period-button-background-color);border:1px solid var(--period-button-border-color);font-family:monospace;padding:0 .25em;border-radius:var(--ymt-corner-xs)}:host form button.dayPeriod:hover{background-color:var(--ymt-hover-background);color:var(--ymt-on-hover-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DateInputHourElementComponent, selector: "yuv-date-input-hour-element", inputs: ["dayPeriod"], outputs: ["dayPeriodChange"] }, { kind: "component", type: DateInputElementComponent, selector: "yuv-date-input-element", inputs: ["maxLength", "maxValue", "minValue", "disabled", "placeholder"], outputs: ["next", "prev"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateInputComponent, deps: [{ token: DatepickerService }, { token: i1.FormBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: DateInputComponent, isStandalone: true, selector: "yuv-date-input", inputs: { disabled: "disabled", placeholder: "placeholder", withTime: "withTime", hour12: "hour12" }, host: { properties: { "class.invalid": "invalid()", "class.has-value": "date", "attr.data-datevalue": "dateAttribute" } }, viewQueries: [{ propertyName: "dateInputEls", predicate: DateInputElementComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (dateInputForm) {\n  <form [formGroup]=\"dateInputForm!\" \n  (click)=\"onFormClick($event)\" (yuvFocusWithinBlur)=\"onDateInputBlur()\">\n    @for (t of dateTokens; track t) {\n      @switch (t.type) {\n        <!-- day -->\n        @case ('day') {\n          <yuv-date-input-element\n            placeholder=\"31\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"day\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            [minValue]=\"1\"\n            [maxValue]=\"31\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- month -->\n        @case ('month') {\n          <yuv-date-input-element\n            placeholder=\"12\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"month\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            [minValue]=\"1\"\n            [maxValue]=\"12\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- year -->\n        @case ('year') {\n          <yuv-date-input-element\n            placeholder=\"2000\"\n            class=\"year\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"year\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"4\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- hours -->\n        @case ('hour') {\n          <yuv-date-input-hour-element\n            placeholder=\"10\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            [(dayPeriod)]=\"currentDayPeriod\"\n            formControlName=\"hour\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-hour-element>\n        }\n        <!-- minutes -->\n        @case ('minute') {\n          <yuv-date-input-element\n            placeholder=\"00\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            [minValue]=\"0\"\n            [maxValue]=\"59\"\n            formControlName=\"minute\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        @case ('literal') {\n          <input type=\"text\" class=\"literal\" [value]=\"t.value\" readonly inert />\n        }\n        @case ('dayPeriod') {\n          <button type=\"button\" class=\"dayPeriod\" [disabled]=\"dateInputForm.disabled\" (click)=\"toggleDayPeriod()\">\n            {{ dayPeriodLabels[currentDayPeriod!] }}\n          </button>\n        }\n      }\n    }\n  </form>\n}\n", styles: [":host{--placeholder-color: rgb(from var(--ymt-text-color) r g b / .2);--period-button-color: var(--ymt-text-color);--period-button-border-color: var(--ymt-outline);--period-button-background-color: transparent;display:flex;position:relative;outline:0;align-items:center;overflow-x:auto;scrollbar-width:none;transition:opacity .2s ease-in-out}:host yuv-date-input-hour-element,:host yuv-date-input-element{border:0;border-block-end:1px solid transparent;box-sizing:border-box}:host input.literal{width:1ch;text-align:center;padding:0;border:0;background-color:transparent;border-block-end:1px solid transparent}:host:not(:focus-within):not(.has-value):not(.invalid){--period-button-color: var(--placeholder-color);--period-button-border-color: var(--placeholder-color);--period-button-background-color: transparent}:host:not(:focus-within):not(.has-value):not(.invalid) input.literal{color:var(--placeholder-color)}:host:not(:focus-within):not(:hover):not(.has-value):not(.invalid){opacity:0}:host form{flex:1 1 auto;cursor:text;transition:opacity .2s ease-in-out;display:flex;opacity:1;align-items:flex-end;gap:.1em}:host form button.dayPeriod{color:var(--period-button-color);background-color:var(--period-button-background-color);border:1px solid var(--period-button-border-color);font-family:monospace;padding:0 .25em;border-radius:var(--ymt-corner-xs)}:host form button.dayPeriod:hover{background-color:var(--ymt-hover-background);color:var(--ymt-on-hover-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DateInputHourElementComponent, selector: "yuv-date-input-hour-element", inputs: ["dayPeriod"], outputs: ["dayPeriodChange"] }, { kind: "component", type: DateInputElementComponent, selector: "yuv-date-input-element", inputs: ["maxLength", "maxValue", "minValue", "disabled", "placeholder"], outputs: ["next", "prev"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-date-input', standalone: true, imports: [CommonModule, DateInputHourElementComponent, DateInputElementComponent, ReactiveFormsModule], host: {
-                        '[class.invalid]': 'invalid()'
+            args: [{ selector: 'yuv-date-input', imports: [CommonModule, DateInputHourElementComponent, DateInputElementComponent, ReactiveFormsModule], host: {
+                        '[class.invalid]': 'invalid()',
+                        '[class.has-value]': 'date',
+                        '[attr.data-datevalue]': 'dateAttribute'
                     }, template: "@if (dateInputForm) {\n  <form [formGroup]=\"dateInputForm!\" \n  (click)=\"onFormClick($event)\" (yuvFocusWithinBlur)=\"onDateInputBlur()\">\n    @for (t of dateTokens; track t) {\n      @switch (t.type) {\n        <!-- day -->\n        @case ('day') {\n          <yuv-date-input-element\n            placeholder=\"31\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"day\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            [minValue]=\"1\"\n            [maxValue]=\"31\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- month -->\n        @case ('month') {\n          <yuv-date-input-element\n            placeholder=\"12\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"month\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            [minValue]=\"1\"\n            [maxValue]=\"12\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- year -->\n        @case ('year') {\n          <yuv-date-input-element\n            placeholder=\"2000\"\n            class=\"year\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"year\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"4\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- hours -->\n        @case ('hour') {\n          <yuv-date-input-hour-element\n            placeholder=\"10\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            [(dayPeriod)]=\"currentDayPeriod\"\n            formControlName=\"hour\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-hour-element>\n        }\n        <!-- minutes -->\n        @case ('minute') {\n          <yuv-date-input-element\n            placeholder=\"00\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            [minValue]=\"0\"\n            [maxValue]=\"59\"\n            formControlName=\"minute\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        @case ('literal') {\n          <input type=\"text\" class=\"literal\" [value]=\"t.value\" readonly inert />\n        }\n        @case ('dayPeriod') {\n          <button type=\"button\" class=\"dayPeriod\" [disabled]=\"dateInputForm.disabled\" (click)=\"toggleDayPeriod()\">\n            {{ dayPeriodLabels[currentDayPeriod!] }}\n          </button>\n        }\n      }\n    }\n  </form>\n}\n", styles: [":host{--placeholder-color: rgb(from var(--ymt-text-color) r g b / .2);--period-button-color: var(--ymt-text-color);--period-button-border-color: var(--ymt-outline);--period-button-background-color: transparent;display:flex;position:relative;outline:0;align-items:center;overflow-x:auto;scrollbar-width:none;transition:opacity .2s ease-in-out}:host yuv-date-input-hour-element,:host yuv-date-input-element{border:0;border-block-end:1px solid transparent;box-sizing:border-box}:host input.literal{width:1ch;text-align:center;padding:0;border:0;background-color:transparent;border-block-end:1px solid transparent}:host:not(:focus-within):not(.has-value):not(.invalid){--period-button-color: var(--placeholder-color);--period-button-border-color: var(--placeholder-color);--period-button-background-color: transparent}:host:not(:focus-within):not(.has-value):not(.invalid) input.literal{color:var(--placeholder-color)}:host:not(:focus-within):not(:hover):not(.has-value):not(.invalid){opacity:0}:host form{flex:1 1 auto;cursor:text;transition:opacity .2s ease-in-out;display:flex;opacity:1;align-items:flex-end;gap:.1em}:host form button.dayPeriod{color:var(--period-button-color);background-color:var(--period-button-background-color);border:1px solid var(--period-button-border-color);font-family:monospace;padding:0 .25em;border-radius:var(--ymt-corner-xs)}:host form button.dayPeriod:hover{background-color:var(--ymt-hover-background);color:var(--ymt-on-hover-background)}\n"] }]
-        }], ctorParameters: () => [{ type: DatepickerService }, { type: i1.FormBuilder }, { type: i0.ElementRef }], propDecorators: { dateInputEls: [{
-                type: ViewChildren,
-                args: [DateInputElementComponent, { read: ElementRef }]
-            }], date: [{
-                type: HostBinding,
-                args: ['class.has-value']
-            }], dateAttribute: [{
-                type: HostBinding,
-                args: ['attr.data-datevalue']
-            }], disabled: [{
+        }], ctorParameters: () => [{ type: DatepickerService }, { type: i1.FormBuilder }, { type: i0.ElementRef }], propDecorators: { dateInputEls: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DateInputElementComponent), { ...{ read: ElementRef }, isSignal: true }] }], disabled: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -1374,31 +1354,31 @@ class DatepickerCalendarComponent {
     applyDate() {
         this.#dialogRef.close(this.date);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DatepickerCalendarComponent, isStandalone: true, selector: "yuv-datepicker-calendar", host: { listeners: { "keydown.enter": "enterKeyHandler($event)" } }, ngImport: i0, template: "<mat-dialog-content>\n  <yuv-calendar tabindex=\"0\"\n    [locale]=\"options.locale\"\n    [onlyFutureDates]=\"options.onlyFutureDates || false\"\n    [(date)]=\"date\"\n    [withTime]=\"options.withTime || false\"\n    [minDate]=\"options.minDate\"\n    [maxDate]=\"options.maxDate\"\n    [hour12]=\"options.hour12 || false\"\n  ></yuv-calendar>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button type=\"button\" ymtButton=\"secondary\" mat-dialog-close>{{ options.labels!.calendarCancel }}</button>\n  <!-- <button type=\"button\" mat-button (click)=\"shortcut('today')\">{{ options.labels!.shortcut.today }}</button> -->\n  <button type=\"button\" ymtButton=\"primary\" [mat-dialog-close]=\"true\" (click)=\"applyDate()\">{{ options.labels!.calendarApply }}</button>\n</mat-dialog-actions>\n", styles: [":host{display:block;background-color:var(--ymt-surface)}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "yuv-calendar", inputs: ["minDate", "maxDate", "onlyFutureDates", "date", "locale", "withTime", "hour12"], outputs: ["dateChange"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: DatepickerCalendarComponent, isStandalone: true, selector: "yuv-datepicker-calendar", host: { listeners: { "keydown.enter": "enterKeyHandler($event)" } }, ngImport: i0, template: "<mat-dialog-content>\n  <yuv-calendar tabindex=\"0\"\n    [locale]=\"options.locale\"\n    [onlyFutureDates]=\"options.onlyFutureDates || false\"\n    [(date)]=\"date\"\n    [withTime]=\"options.withTime || false\"\n    [minDate]=\"options.minDate\"\n    [maxDate]=\"options.maxDate\"\n    [hour12]=\"options.hour12 || false\"\n  ></yuv-calendar>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button type=\"button\" ymtButton=\"secondary\" mat-dialog-close>{{ options.labels!.calendarCancel }}</button>\n  <!-- <button type=\"button\" mat-button (click)=\"shortcut('today')\">{{ options.labels!.shortcut.today }}</button> -->\n  <button type=\"button\" ymtButton=\"primary\" [mat-dialog-close]=\"true\" (click)=\"applyDate()\">{{ options.labels!.calendarApply }}</button>\n</mat-dialog-actions>\n", styles: [":host{display:block;background-color:var(--ymt-surface)}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "yuv-calendar", inputs: ["minDate", "maxDate", "onlyFutureDates", "date", "locale", "withTime", "hour12"], outputs: ["dateChange"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-datepicker-calendar', standalone: true, imports: [CalendarComponent, MatDialogModule, MatButtonModule, YmtButtonDirective], template: "<mat-dialog-content>\n  <yuv-calendar tabindex=\"0\"\n    [locale]=\"options.locale\"\n    [onlyFutureDates]=\"options.onlyFutureDates || false\"\n    [(date)]=\"date\"\n    [withTime]=\"options.withTime || false\"\n    [minDate]=\"options.minDate\"\n    [maxDate]=\"options.maxDate\"\n    [hour12]=\"options.hour12 || false\"\n  ></yuv-calendar>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button type=\"button\" ymtButton=\"secondary\" mat-dialog-close>{{ options.labels!.calendarCancel }}</button>\n  <!-- <button type=\"button\" mat-button (click)=\"shortcut('today')\">{{ options.labels!.shortcut.today }}</button> -->\n  <button type=\"button\" ymtButton=\"primary\" [mat-dialog-close]=\"true\" (click)=\"applyDate()\">{{ options.labels!.calendarApply }}</button>\n</mat-dialog-actions>\n", styles: [":host{display:block;background-color:var(--ymt-surface)}\n"] }]
-        }], propDecorators: { enterKeyHandler: [{
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }] } });
+            args: [{ selector: 'yuv-datepicker-calendar', imports: [CalendarComponent, MatDialogModule, MatButtonModule, YmtButtonDirective], host: {
+                        '(keydown.enter)': 'enterKeyHandler($event)'
+                    }, template: "<mat-dialog-content>\n  <yuv-calendar tabindex=\"0\"\n    [locale]=\"options.locale\"\n    [onlyFutureDates]=\"options.onlyFutureDates || false\"\n    [(date)]=\"date\"\n    [withTime]=\"options.withTime || false\"\n    [minDate]=\"options.minDate\"\n    [maxDate]=\"options.maxDate\"\n    [hour12]=\"options.hour12 || false\"\n  ></yuv-calendar>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button type=\"button\" ymtButton=\"secondary\" mat-dialog-close>{{ options.labels!.calendarCancel }}</button>\n  <!-- <button type=\"button\" mat-button (click)=\"shortcut('today')\">{{ options.labels!.shortcut.today }}</button> -->\n  <button type=\"button\" ymtButton=\"primary\" [mat-dialog-close]=\"true\" (click)=\"applyDate()\">{{ options.labels!.calendarApply }}</button>\n</mat-dialog-actions>\n", styles: [":host{display:block;background-color:var(--ymt-surface)}\n"] }]
+        }] });
 
 class DatepickerComponent {
     constructor() {
         this.#dialog = inject(MatDialog);
         this.#datepickerService = inject(DatepickerService);
         this._subs = [];
-        this.allSelected = signal(false);
+        this.dateInputCmp = viewChild.required(DateInputComponent);
+        this.allSelected = signal(false, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
         /**
          * Whether or not to show a calendar picker
          */
-        this.calendar = false;
+        this.calendar = input(false, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
         /**
          * Whether or not the component is readonly
          */
-        this.readonly = false;
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this._hour12 = false;
         this._detectHourCycle = true;
         this._locale = this.#datepickerService.DEFAULT_LANGUAGE;
@@ -1426,7 +1406,7 @@ class DatepickerComponent {
         }
         else if (e.key === 'Delete' && this.allSelected) {
             // delete the whole date
-            if (this.readonly || this.disabled)
+            if (this.readonly() || this.disabled)
                 return;
             this.allSelected.set(false);
             this.clear();
@@ -1505,13 +1485,13 @@ class DatepickerComponent {
     }
     #dialogRef;
     copyToClipboard() {
-        const fd = this.dateInputCmp.getFormattedValue();
+        const fd = this.dateInputCmp().getFormattedValue();
         if (fd)
             navigator.clipboard.writeText(fd);
     }
     clear() {
         this.#datepickerService.setValue(null);
-        this.dateInputCmp.focusFirstInput();
+        this.dateInputCmp().focusFirstInput();
     }
     openCalendar() {
         if (!this.calendarValue)
@@ -1586,8 +1566,8 @@ class DatepickerComponent {
     ngOnDestroy() {
         this._subs.forEach((s) => s.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DatepickerComponent, isStandalone: true, selector: "yuv-datepicker", inputs: { calendar: "calendar", readonly: "readonly", hour12: "hour12", locale: "locale", labels: "labels", withTime: "withTime", onlyFutureDates: "onlyFutureDates", minDate: "minDate", maxDate: "maxDate", disabled: "disabled" }, host: { attributes: { "class.all-selected": "allSelected()" }, listeners: { "keydown": "keydownHandler($event)", "click": "clickHandler()", "focusout": "focusOutHandler()" }, properties: { "attr.aria-disabled": "this.disabled" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: DatepickerComponent, isStandalone: true, selector: "yuv-datepicker", inputs: { calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: false, isRequired: false, transformFunction: null }, withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: false, isRequired: false, transformFunction: null }, onlyFutureDates: { classPropertyName: "onlyFutureDates", publicName: "onlyFutureDates", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "class.all-selected": "allSelected()" }, listeners: { "keydown": "keydownHandler($event)", "click": "clickHandler()", "focusout": "focusOutHandler()" }, properties: { "attr.aria-disabled": "disabled" } }, providers: [
             DatepickerService,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1599,11 +1579,11 @@ class DatepickerComponent {
                 useExisting: forwardRef(() => DatepickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dateInputCmp", first: true, predicate: DateInputComponent, descendants: true }], hostDirectives: [{ directive: i1$2.FocusWithinDirective }], ngImport: i0, template: "<yuv-date-input [disabled]=\"disabled\" [withTime]=\"withTime\" [hour12]=\"_hour12\"></yuv-date-input>\n\n@if (calendar) {\n  <button ymtIconButton icon-button-size=\"small\" type=\"button\" class=\"calender\" [disabled]=\"disabled\" (click)=\"openCalendar()\">\n    <mat-icon>calendar_month</mat-icon>\n  </button>\n}\n", styles: [":host{display:flex;font-size:var(--_datepicker-font-size);overflow:hidden}:host.all-selected yuv-date-input,:host.all-selected yuv-date-input-text{background-color:var(--ymt-text-selection-container);color:var(--ymt-on-text-selection-container)}:host>button[disabled]{display:none}:host yuv-date-input-text,:host yuv-date-input{width:100%;margin:0 .25em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DateInputComponent, selector: "yuv-date-input", inputs: ["disabled", "placeholder", "withTime", "hour12"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+        ], viewQueries: [{ propertyName: "dateInputCmp", first: true, predicate: DateInputComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$2.FocusWithinDirective }], ngImport: i0, template: "<yuv-date-input [disabled]=\"disabled\" [withTime]=\"withTime\" [hour12]=\"_hour12\"></yuv-date-input>\n\n@if (calendar()) {\n  <button ymtIconButton icon-button-size=\"small\" type=\"button\" class=\"calender\" [disabled]=\"disabled\" (click)=\"openCalendar()\">\n    <mat-icon>calendar_month</mat-icon>\n  </button>\n}\n", styles: [":host{display:flex;font-size:var(--_datepicker-font-size);overflow:hidden}:host.all-selected yuv-date-input,:host.all-selected yuv-date-input-text{background-color:var(--ymt-text-selection-container);color:var(--ymt-on-text-selection-container)}:host>button[disabled]{display:none}:host yuv-date-input-text,:host yuv-date-input{width:100%;margin:0 .25em}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DateInputComponent, selector: "yuv-date-input", inputs: ["disabled", "placeholder", "withTime", "hour12"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-datepicker', standalone: true, imports: [CommonModule, MatIconModule, DateInputComponent, YmtIconButtonDirective, MatButtonModule, ReactiveFormsModule], providers: [
+            args: [{ selector: 'yuv-datepicker', standalone: true, imports: [MatIconModule, DateInputComponent, YmtIconButtonDirective, MatButtonModule, ReactiveFormsModule], providers: [
                         DatepickerService,
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -1616,25 +1596,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             multi: true
                         }
                     ], host: {
-                        'class.all-selected': 'allSelected()'
-                    }, hostDirectives: [FocusWithinDirective], template: "<yuv-date-input [disabled]=\"disabled\" [withTime]=\"withTime\" [hour12]=\"_hour12\"></yuv-date-input>\n\n@if (calendar) {\n  <button ymtIconButton icon-button-size=\"small\" type=\"button\" class=\"calender\" [disabled]=\"disabled\" (click)=\"openCalendar()\">\n    <mat-icon>calendar_month</mat-icon>\n  </button>\n}\n", styles: [":host{display:flex;font-size:var(--_datepicker-font-size);overflow:hidden}:host.all-selected yuv-date-input,:host.all-selected yuv-date-input-text{background-color:var(--ymt-text-selection-container);color:var(--ymt-on-text-selection-container)}:host>button[disabled]{display:none}:host yuv-date-input-text,:host yuv-date-input{width:100%;margin:0 .25em}\n"] }]
-        }], propDecorators: { dateInputCmp: [{
-                type: ViewChild,
-                args: [DateInputComponent]
-            }], keydownHandler: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], clickHandler: [{
-                type: HostListener,
-                args: ['click']
-            }], focusOutHandler: [{
-                type: HostListener,
-                args: ['focusout']
-            }], calendar: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], hour12: [{
+                        'class.all-selected': 'allSelected()',
+                        '[attr.aria-disabled]': 'disabled',
+                        '(keydown)': 'keydownHandler($event)',
+                        '(click)': 'clickHandler()',
+                        '(focusout)': 'focusOutHandler()'
+                    }, hostDirectives: [FocusWithinDirective], template: "<yuv-date-input [disabled]=\"disabled\" [withTime]=\"withTime\" [hour12]=\"_hour12\"></yuv-date-input>\n\n@if (calendar()) {\n  <button ymtIconButton icon-button-size=\"small\" type=\"button\" class=\"calender\" [disabled]=\"disabled\" (click)=\"openCalendar()\">\n    <mat-icon>calendar_month</mat-icon>\n  </button>\n}\n", styles: [":host{display:flex;font-size:var(--_datepicker-font-size);overflow:hidden}:host.all-selected yuv-date-input,:host.all-selected yuv-date-input-text{background-color:var(--ymt-text-selection-container);color:var(--ymt-on-text-selection-container)}:host>button[disabled]{display:none}:host yuv-date-input-text,:host yuv-date-input{width:100%;margin:0 .25em}\n"] }]
+        }], propDecorators: { dateInputCmp: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DateInputComponent), { isSignal: true }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hour12: [{
                 type: Input
             }], locale: [{
                 type: Input
@@ -1649,35 +1617,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], maxDate: [{
                 type: Input
             }], disabled: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }, {
                 type: Input
             }] } });
 
 class DatepickerCalendarTriggerComponent {
     constructor() {
-        this.for = input.required();
+        this.for = input.required(...(ngDevMode ? [{ debugName: "for" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerCalendarTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: DatepickerCalendarTriggerComponent, isStandalone: true, selector: "yuv-datepicker-calendar-trigger", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<button mat-icon-button>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerCalendarTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", type: DatepickerCalendarTriggerComponent, isStandalone: true, selector: "yuv-datepicker-calendar-trigger", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<button mat-icon-button>
     <mat-icon (click)="for().openCalendar()">calendar_month</mat-icon>
-  </button>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+  </button>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DatepickerCalendarTriggerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatepickerCalendarTriggerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-datepicker-calendar-trigger', template: `<button mat-icon-button>
     <mat-icon (click)="for().openCalendar()">calendar_month</mat-icon>
   </button>`, standalone: true, imports: [MatButtonModule, MatIconModule] }]
-        }] });
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: true }] }] } });
 
 const cmp = [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent];
 class YuvDatepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: YuvDatepickerModule, imports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent], exports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvDatepickerModule, imports: [cmp] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: YuvDatepickerModule, imports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent], exports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvDatepickerModule, imports: [cmp] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YuvDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...cmp],