@yuuvis/client-framework 2.3.10 → 2.3.12

package/datepicker/lib/date-input/date-input-element/date-input-element.component.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '@angular/core';
-import { ControlValueAccessor, UntypedFormControl, Validator } from '@angular/forms';
+import { ControlValueAccessor, FormControl, UntypedFormControl, Validator } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class DateInputElementComponent implements ControlValueAccessor, Validator {
     private datepickerService;
@@ -13,6 +13,7 @@ export declare class DateInputElementComponent implements ControlValueAccessor,
     placeholder: import("@angular/core").InputSignal<string>;
     next: EventEmitter<any>;
     prev: EventEmitter<any>;
+    fc: FormControl<any>;
     protected _isNumber(v: any): boolean;
     private _stopEvent;
     onInputChange(iv: string): void;

package/datepicker/lib/date-input/date-input.component.d.ts

@@ -19,6 +19,7 @@ export declare class DateInputComponent implements OnInit, OnDestroy {
     dateAttribute?: string;
     set disabled(d: boolean);
     private _disabled;
+    invalid: import("@angular/core").WritableSignal<boolean>;
     private _refreshPlaceholder;
     _placeholder?: string;
     set placeholder(p: string);

package/datepicker/lib/time-input/time-input.component.d.ts

@@ -1,15 +1,13 @@
-import { OnDestroy } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup } from '@angular/forms';
+import { AbstractControl, ControlValueAccessor, FormBuilder, FormGroup, ValidationErrors, Validator } from '@angular/forms';
 import { DateInputElementComponent } from '../date-input/date-input-element/date-input-element.component';
 import { DateInputHourElementComponent } from '../date-input/date-input-hour-element/date-input-hour-element.component';
 import { DayPeriod, DayPeriodLabels } from '../datepicker.interface';
 import { TimeValue } from './time-input.interface';
 import * as i0 from "@angular/core";
-export declare class TimeInputComponent implements OnDestroy, ControlValueAccessor {
+export declare class TimeInputComponent implements ControlValueAccessor, Validator {
     private fb;
     hourInput: DateInputHourElementComponent;
     minuteInput: DateInputElementComponent;
-    private _subs;
     private _time?;
     protected _hour12: boolean;
     get hour12(): boolean;
@@ -23,10 +21,12 @@ export declare class TimeInputComponent implements OnDestroy, ControlValueAccess
     private _propagate;
     private _patch;
     propagateChange: (_: any) => void;
+    validationChange: () => void;
     writeValue(value: TimeValue): void;
     registerOnChange(fn: any): void;
+    registerOnValidatorChange?(fn: () => void): void;
     registerOnTouched(fn: any): void;
-    ngOnDestroy(): void;
+    validate(ac: AbstractControl): ValidationErrors | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<TimeInputComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TimeInputComponent, "yuv-time-input", never, { "hour12": { "alias": "hour12"; "required": false; }; "dayPeriodLabels": { "alias": "dayPeriodLabels"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, EventEmitter, forwardRef, Output, Input, HostListener, Component, ViewChild, viewChild, model, effect, untracked, ElementRef, HostBinding, ViewChildren, signal, NgModule } 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 * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
 import * as i4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 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';
@@ -220,7 +221,8 @@ class DatepickerService {
         }
     }
     _emitValidationChange() {
-        this._validationChangeSource.next(!!this._validationErrors && Object.keys(this._validationErrors).length > 0);
+        const valid = !this._validationErrors || Object.keys(this._validationErrors).length === 0;
+        this._validationChangeSource.next(valid);
     }
     getIntlOptions(withTime = false, hour12 = false) {
         const baseIntlOptions = {
@@ -268,6 +270,7 @@ class DateInputElementComponent {
         this.placeholder = input('');
         this.next = new EventEmitter();
         this.prev = new EventEmitter();
+        this.fc = new FormControl();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -409,11 +412,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  [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::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"] }] }); }
+        ], 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  [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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateInputElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-date-input-element', standalone: true, imports: [CommonModule, FormsModule], providers: [
+            args: [{ selector: 'yuv-date-input-element', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DateInputElementComponent),
@@ -424,7 +427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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  [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::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  [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']]
@@ -477,7 +480,7 @@ 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  [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::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  [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.14", ngImport: i0, type: DateInputHourElementComponent, decorators: [{
             type: Component,
@@ -492,7 +495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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  [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::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  [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: [{
@@ -519,7 +522,6 @@ class TimeInputComponent {
     }
     constructor(fb) {
         this.fb = fb;
-        this._subs = [];
         this._hour12 = false;
         this.dayPeriodLabels = DEFAULT_DAY_PERIOD_LABELS;
         this.form = this.fb.group({
@@ -528,9 +530,14 @@ class TimeInputComponent {
         });
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
-        this._subs.push(this.form.valueChanges.subscribe({
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.validationChange = () => { };
+        this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe({
             next: (v) => this._propagate()
-        }));
+        });
+        this.form.statusChanges.pipe(takeUntilDestroyed()).subscribe({
+            next: (v) => this.validationChange()
+        });
     }
     _propagate() {
         if (this.form.valid) {
@@ -580,10 +587,13 @@ class TimeInputComponent {
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
+    registerOnValidatorChange(fn) {
+        this.validationChange = fn;
+    }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     registerOnTouched(fn) { }
-    ngOnDestroy() {
-        this._subs.forEach((s) => s.unsubscribe());
+    validate(ac) {
+        return this.form.valid ? null : { invalidTime: true };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TimeInputComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TimeInputComponent, isStandalone: true, selector: "yuv-time-input", inputs: { hour12: "hour12", dayPeriodLabels: "dayPeriodLabels" }, providers: [
@@ -591,8 +601,13 @@ class TimeInputComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TimeInputComponent),
                 multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                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 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\"}: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 }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TimeInputComponent, decorators: [{
             type: Component,
@@ -601,8 +616,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TimeInputComponent),
                             multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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 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\"}: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"] }]
+                    ], 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']
@@ -623,7 +643,8 @@ class CalendarComponent {
     #localeEffect;
     #withTimeEffect;
     keyDownHandler(event) {
-        this._handleKeyboardEvent(event);
+        if (event.target.nodeName === "YUV-CALENDAR")
+            this._handleKeyboardEvent(event);
     }
     constructor() {
         this.datepickerService = inject(DatepickerService);
@@ -646,7 +667,7 @@ class CalendarComponent {
          * Allow only date inputs that are after today
          */
         this.onlyFutureDates = input(false);
-        this.date = model();
+        this.date = model(new Date());
         this.#dateEffect = effect(() => {
             const d = this.date();
             untracked(() => {
@@ -729,6 +750,10 @@ class CalendarComponent {
     }
     select(d, setFocusPosition, silent) {
         const date = d instanceof Date ? d : new Date(d);
+        // check if the selected date is in a different month/year
+        if (date.getFullYear() !== this.year || date.getMonth() !== this.month) {
+            this.selectMonthOfYear(date.getMonth(), date.getFullYear(), true);
+        }
         // also be aware of time
         if (this.withTime()) {
             const time = this._dateToTime(date);
@@ -999,20 +1024,16 @@ class CalendarComponent {
         };
     }
     ngOnInit() {
-        // this.locale = !this.locale ? 'en' : this.locale;
         this._initialized = true;
-        this.#buildDate();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "keyDownHandler($event)" } }, 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>\n          {{ month !== undefined ? months[month].label : '' }} &nbsp;\n        </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\">\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>{{'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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "keyDownHandler($event)" } }, 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>\n          {{ month !== undefined ? months[month].label : '' }} &nbsp;\n        </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\">\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>{{'yuv.calendar.time.label' | translate}}\n      <yuv-time-input [(ngModel)]=\"time\" [hour12]=\"hour12()\" \n      [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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-calendar', standalone: true, imports: [CommonModule, FormsModule,
-                        TranslateModule,
-                        MatSelectModule, TimeInputComponent], providers: [DatepickerService], host: {
+            args: [{ selector: 'yuv-calendar', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, MatSelectModule, TimeInputComponent], providers: [DatepickerService], host: {
                         tabindex: '0'
-                    }, 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>\n          {{ month !== undefined ? months[month].label : '' }} &nbsp;\n        </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\">\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>{{'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"] }]
+                    }, 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>\n          {{ month !== undefined ? months[month].label : '' }} &nbsp;\n        </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\">\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>{{'yuv.calendar.time.label' | translate}}\n      <yuv-time-input [(ngModel)]=\"time\" [hour12]=\"hour12()\" \n      [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"] }]
         }], ctorParameters: () => [], propDecorators: { keyDownHandler: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -1064,6 +1085,7 @@ class DateInputComponent {
         this._subs = [];
         this._date = null;
         this._disabled = false;
+        this.invalid = signal(false);
         this._refreshPlaceholder = true;
         this._locale = this.datepickerService.DEFAULT_LANGUAGE;
         this._withTime = false;
@@ -1120,6 +1142,7 @@ class DateInputComponent {
         });
     }
     _setInvalidInputError(isInvalid) {
+        this.invalid.set(isInvalid);
         if (isInvalid) {
             this.datepickerService.setErrors({
                 invalidInput: true
@@ -1300,11 +1323,13 @@ class DateInputComponent {
         this._subs.forEach((s) => s.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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.14", type: DateInputComponent, isStandalone: true, selector: "yuv-date-input", inputs: { disabled: "disabled", placeholder: "placeholder", withTime: "withTime", hour12: "hour12" }, host: { properties: { "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            [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            [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            [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            [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            [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){--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) input.literal{color:var(--placeholder-color)}:host:not(:focus-within):not(:hover):not(.has-value){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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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            [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            [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            [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            [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            [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.14", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-date-input', standalone: true, imports: [CommonModule, DateInputHourElementComponent, DateInputElementComponent, ReactiveFormsModule], 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            [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            [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            [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            [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            [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){--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) input.literal{color:var(--placeholder-color)}:host:not(:focus-within):not(:hover):not(.has-value){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"] }]
+            args: [{ selector: 'yuv-date-input', standalone: true, imports: [CommonModule, DateInputHourElementComponent, DateInputElementComponent, ReactiveFormsModule], host: {
+                        '[class.invalid]': 'invalid()'
+                    }, 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            [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            [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            [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            [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            [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 }]