@yuuvis/client-framework 2.0.0-beta.0 → 2.0.0-beta.3

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

@@ -0,0 +1,1688 @@
+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 * 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 * as i3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { ReplaySubject } from 'rxjs';
+import * as i4 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 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';
+import { FocusWithinDirective } from '@yuuvis/client-framework/common';
+
+const DEFAULT_DAY_PERIOD_LABELS = {
+    am: 'AM',
+    pm: 'PM'
+};
+
+class DatepickerUtils {
+    /**
+     * Get preferred hour cycle for a given locale
+     * @param locale the locale to get the hour cycle for
+     */
+    static getPreferredHourCycle(locale) {
+        const l = new Intl.Locale(locale);
+        const hc = l.hourCycles || l.getHourCycles
+            ? // Chrome and Edge
+                l.hourCycles ||
+                    // Safari
+                    l.getHourCycles()
+            : // Not supported by Firefox right now
+                [];
+        return hc.length ? hc[0] : 'h23';
+    }
+    /**
+     * Get week info for a given locale.
+     * Notice:
+     * @param locale the locale to get the weekinfo for
+     */
+    static getWeekInfo(locale) {
+        const l = new Intl.Locale(locale);
+        const weekInfo = l.weekInfo || l.getWeekInfo
+            ? // Chrome and Edge
+                l.weekInfo ||
+                    // Safari
+                    l.getWeekInfo()
+            : undefined;
+        // Not supported by Firefox right now so we'll return defaults
+        return {
+            firstDay: weekInfo?.firstDay || 7,
+            minimalDays: weekInfo?.minimalDays || 1,
+            weekend: weekInfo?.weekend || [6, 7]
+        };
+    }
+    static isFutureDate(d, withTime = false) {
+        const today = new Date();
+        if (!withTime) {
+            // future date without time also includes the whole current day
+            today.setDate(today.getDate() - 1);
+            today.setUTCHours(23, 59, 59);
+        }
+        return d.getTime() >= today.getTime();
+    }
+    static isValidDate(v) {
+        const date = new Date(v);
+        return !!date && Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime());
+    }
+    static isValidValue(date, o) {
+        const err = DatepickerUtils.validateValue(date, o);
+        return !!err && Object.keys(err).length > 0;
+    }
+    static validateValue(date, o) {
+        const err = {};
+        if (date) {
+            if (o.onlyFutureDates && !DatepickerUtils.isFutureDate(date, o.withTime)) {
+                err['onlyFutureDates'] = { onlyFutureDates: false };
+            }
+            if (o.minDate && !(date > o.minDate)) {
+                err['minDate'] = { minDate: false };
+            }
+            if (o.maxDate && !(date < o.maxDate)) {
+                err['maxDate'] = { maxDate: false };
+            }
+        }
+        return Object.keys(err).length ? err : null;
+    }
+}
+
+class DatepickerService {
+    constructor() {
+        this._value = null;
+        this._valueChangeSource = new ReplaySubject();
+        this.valueChange$ = this._valueChangeSource.asObservable();
+        this._validationChangeSource = new ReplaySubject();
+        this.validationChange$ = this._validationChangeSource.asObservable();
+        this.DEFAULT_LANGUAGE = 'en';
+        this.yearOffset = 0;
+        this._language = this.DEFAULT_LANGUAGE;
+        this._languageSource = new ReplaySubject();
+        this.language$ = this._languageSource.asObservable();
+        this._validationErrors = null;
+        this._options = {};
+    }
+    /**
+     * Handler for paste events from the components inputs. If the clipboard
+     * contains a whole date it will be covered by the service.
+     * @param event the ClipboardEvent
+     * @returns true if the paste event has been processed by the service, false otherwise
+     */
+    onPaste(e) {
+        const paste = typeof e === 'string' ? e : (e.clipboardData || window.clipboardData).getData('text');
+        if (DatepickerUtils.isValidDate(paste)) {
+            this.setValue(new Date(paste));
+            return true;
+        }
+        else
+            return false;
+    }
+    setLanguage(isoCode) {
+        if (isoCode === this._language)
+            return;
+        this._language = isoCode || this.DEFAULT_LANGUAGE;
+        // check for year offset
+        // e.g. Taiwan has a year offset of +543 years (Thai solar calendar)
+        const d = new Date();
+        const dtf = new Intl.DateTimeFormat(this._language, {
+            year: 'numeric'
+        }).formatToParts(d);
+        const dtfYear = dtf.find((t) => t.type === 'year');
+        this.yearOffset = parseInt(dtfYear.value) - d.getFullYear();
+        this._languageSource.next(this._language);
+        this.setValue(this._value);
+    }
+    getDatePattern(locale, withTime, hour12) {
+        let pattern = '';
+        Intl.DateTimeFormat(locale, this.getIntlOptions(withTime, hour12))
+            .formatToParts(new Date())
+            .forEach((t) => {
+            switch (t.type) {
+                case 'day': {
+                    pattern += 'dd';
+                    break;
+                }
+                case 'month': {
+                    pattern += 'MM';
+                    break;
+                }
+                case 'year': {
+                    pattern += 'yyyy';
+                    break;
+                }
+                case 'hour': {
+                    pattern += 'HH';
+                    break;
+                }
+                case 'minute': {
+                    pattern += 'mm';
+                    break;
+                }
+                case 'dayPeriod': {
+                    pattern += t.value;
+                    break;
+                }
+                default: {
+                    pattern += t.value;
+                }
+            }
+        });
+        return pattern;
+    }
+    isDifferent(d1, d2) {
+        const x1 = d1 instanceof Date ? d1.getTime() : -1;
+        const x2 = d2 instanceof Date ? d2.getTime() : -1;
+        return x1 !== x2;
+    }
+    setValue(date, silent) {
+        if (this.isDifferent(date, this._value)) {
+            this._value = date;
+            if (date === null) {
+                this._validationErrors = {};
+                this._emitValidationChange();
+            }
+            this._validateValue();
+            this._valueChangeSource.next({
+                value: this._value,
+                propagateChange: !silent
+            });
+        }
+    }
+    setOption(options) {
+        this._options = {
+            ...this._options,
+            ...options
+        };
+    }
+    hasErrors() {
+        return this._validationErrors !== null;
+    }
+    getErrors() {
+        return this._validationErrors;
+    }
+    setErrors(err) {
+        this._validationErrors = { ...(this._validationErrors || {}), ...err };
+        this._emitValidationChange();
+    }
+    removeErrors(err) {
+        if (this._validationErrors) {
+            err.forEach((k) => {
+                delete this._validationErrors[k];
+            });
+            this._emitValidationChange();
+        }
+    }
+    _emitValidationChange() {
+        this._validationChangeSource.next(!!this._validationErrors && Object.keys(this._validationErrors).length > 0);
+    }
+    getIntlOptions(withTime = false, hour12 = false) {
+        const baseIntlOptions = {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        };
+        const timeIntlOptions = {
+            hour: '2-digit',
+            minute: '2-digit',
+            hourCycle: hour12 ? 'h12' : 'h23'
+        };
+        return withTime ? { ...baseIntlOptions, ...timeIntlOptions } : baseIntlOptions;
+    }
+    /**
+     * Returns locale specific values for AM/PM
+     * @param locale locale string
+     * @returns
+     */
+    getDayPeriodLabels(locale) {
+        const dtf = new Intl.DateTimeFormat(locale, this.getIntlOptions(true, true));
+        const amPart = dtf.formatToParts(new Date('2000-01-01T03:00:00')).find((p) => p.type === 'dayPeriod');
+        const pmPart = dtf.formatToParts(new Date('2000-01-01T15:00:00')).find((p) => p.type === 'dayPeriod');
+        return {
+            am: amPart?.value || 'AM',
+            pm: pmPart?.value || 'PM'
+        };
+    }
+    _validateValue() {
+        this._validationErrors = DatepickerUtils.validateValue(this._value, this._options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatepickerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatepickerService, decorators: [{
+            type: Injectable
+        }] });
+
+class DateInputElementComponent {
+    constructor() {
+        this.datepickerService = inject(DatepickerService);
+        this.maxLength = 2;
+        this.minValue = 1;
+        this.disabled = false;
+        this.placeholder = input('');
+        this.next = new EventEmitter();
+        this.prev = new EventEmitter();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.validationChange = () => { };
+    }
+    pasteHandler(event) {
+        const paste = (event.clipboardData || window.clipboardData).getData('text');
+        if (paste.length > this.maxLength && this.datepickerService.onPaste(paste))
+            event.preventDefault();
+    }
+    keyDownHandler(event) {
+        if (this.disabled)
+            return;
+        // increase value
+        else if (event.key === 'ArrowUp') {
+            this._stopEvent(event);
+            this.increaseValue(event.shiftKey ? 10 : 1);
+        }
+        // decrease value
+        else if (event.key === 'ArrowDown') {
+            this._stopEvent(event);
+            this.decreaseValue(event.shiftKey ? 10 : 1);
+        }
+    }
+    _isNumber(v) {
+        return typeof v === 'number' && isFinite(v);
+    }
+    _stopEvent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onInputChange(iv) {
+        this._propagate();
+        if (iv?.length === this.maxLength) {
+            this.next.emit();
+        }
+    }
+    onBlur() {
+        if (this._value && this._value.length < this.maxLength) {
+            this._setValue(this._value);
+        }
+    }
+    wheelHandler(event) {
+        this._stopEvent(event);
+        if (event.deltaY < 0)
+            this.increaseValue();
+        else if (event.deltaY > 0)
+            this.decreaseValue();
+    }
+    keydownHandler(event) {
+        if (event.key === 'ArrowRight') {
+            const caretPos = event.target.selectionStart;
+            if (caretPos === this.maxLength) {
+                this.next.emit();
+            }
+        }
+        else if (event.key === 'ArrowLeft') {
+            const caretPos = event.target.selectionStart;
+            if (caretPos === 0) {
+                this.prev.emit();
+            }
+        }
+    }
+    focusHandler(event) {
+        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;
+        if (v !== this._value) {
+            this._value = v;
+            if (!silent)
+                this._propagate();
+            // if (n.toString().length !== v?.length) this.validationChange();
+        }
+    }
+    increaseValue(step = 1) {
+        const v = (parseInt(this._value) || 0) + step;
+        this._setValue(this.maxValue ? (v <= this.maxValue ? v : this.minValue) : v);
+    }
+    decreaseValue(step = 1) {
+        const v = (parseInt(this._value) || 0) - step;
+        this._setValue(this.maxValue ? (v < this.minValue ? this.maxValue : v) : v);
+    }
+    _applyOffset() {
+        return this.maxLength === 4 && !!this.datepickerService.yearOffset;
+    }
+    _propagate() {
+        // being the year input (4 digits) also take yearOffset into accout
+        if (this._applyOffset()) {
+            let parsedValue = parseInt(this._value || '');
+            if (!isNaN(parsedValue)) {
+                parsedValue -= this.datepickerService.yearOffset;
+                this.propagateChange(`${parsedValue}`);
+            }
+            else
+                this.propagateChange(undefined);
+        }
+        else
+            this.propagateChange(this._value);
+    }
+    writeValue(value) {
+        if (value !== undefined && this._applyOffset()) {
+            let parsedValue = parseInt(value || '');
+            if (!isNaN(parsedValue)) {
+                parsedValue += this.datepickerService.yearOffset;
+                this._setValue(parsedValue);
+            }
+        }
+        else
+            this._setValue(value, true);
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this.validationChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    _isValidInput(v) {
+        const n = parseInt(v);
+        return this._isNumber(n) && (!this.maxValue || n <= this.maxValue) && (!this.minValue || n >= this.minValue);
+    }
+    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.1", ngImport: i0, type: DateInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", 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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DateInputElementComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                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 input{font-size:var(--_datepicker-font-size);color:var(--_datepicker-text-color);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input::placeholder{font-size:.7em}\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.1", ngImport: i0, type: DateInputElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-date-input-element', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DateInputElementComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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 input{font-size:var(--_datepicker-font-size);color:var(--_datepicker-text-color);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input::placeholder{font-size:.7em}\n"] }]
+        }], propDecorators: { pasteHandler: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }], keyDownHandler: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], maxLength: [{
+                type: Input
+            }], maxValue: [{
+                type: Input
+            }], minValue: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], next: [{
+                type: Output
+            }], prev: [{
+                type: Output
+            }] } });
+
+class DateInputHourElementComponent extends DateInputElementComponent {
+    set dayPeriod(p) {
+        if (p === 'am' || p === 'pm') {
+            this.maxValue = 12;
+            this.minValue = 1;
+        }
+        else {
+            this.maxValue = 23;
+            this.minValue = 0;
+        }
+    }
+    constructor() {
+        super();
+        this.dayPeriodChange = new EventEmitter();
+    }
+    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.1", ngImport: i0, type: DateInputHourElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: DateInputHourElementComponent, isStandalone: true, selector: "yuv-date-input-hour-element", inputs: { dayPeriod: "dayPeriod" }, outputs: { dayPeriodChange: "dayPeriodChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DateInputHourElementComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                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 input{font-size:var(--_datepicker-font-size);color:var(--_datepicker-text-color);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input::placeholder{font-size:.7em}\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.1", ngImport: i0, type: DateInputHourElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-date-input-hour-element', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DateInputHourElementComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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 input{font-size:var(--_datepicker-font-size);color:var(--_datepicker-text-color);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input::placeholder{font-size:.7em}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dayPeriod: [{
+                type: Input
+            }], dayPeriodChange: [{
+                type: Output
+            }] } });
+
+class TimeInputComponent {
+    get hour12() {
+        return this._hour12;
+    }
+    set hour12(b) {
+        this._hour12 = b;
+        if (this._hour12 && this._time)
+            this._patch(this._time, true);
+    }
+    set currentDayPeriod(p) {
+        if (p !== this._currentDayPeriod) {
+            this._currentDayPeriod = p;
+            this._propagate();
+        }
+    }
+    get currentDayPeriod() {
+        return this._currentDayPeriod;
+    }
+    constructor(fb) {
+        this.fb = fb;
+        this._subs = [];
+        this._hour12 = false;
+        this.dayPeriodLabels = DEFAULT_DAY_PERIOD_LABELS;
+        this.form = this.fb.group({
+            hour: ['', [Validators.required]],
+            minute: ['', [Validators.required, Validators.max(59)]]
+        });
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+        this._subs.push(this.form.valueChanges.subscribe({
+            next: (v) => this._propagate()
+        }));
+    }
+    _propagate() {
+        if (this.form.valid) {
+            const strHour = this.form.value.hour;
+            let hour = parseInt(strHour);
+            if (isNaN(hour))
+                hour = 0;
+            if (this.hour12 && hour === 0) {
+                hour = 12;
+            }
+            this._time = {
+                hour,
+                minute: parseInt(this.form.value.minute),
+                dayPeriod: this.currentDayPeriod
+            };
+            this.propagateChange(this._time);
+        }
+    }
+    increaseHour() {
+        this.hourInput.increaseValue();
+    }
+    decreaseHour() {
+        this.hourInput.decreaseValue();
+    }
+    increaseMinute() {
+        this.minuteInput.increaseValue();
+    }
+    decreaseMinute() {
+        this.minuteInput.decreaseValue();
+    }
+    _patch(value, silent) {
+        if (!this._time) {
+            const now = new Date();
+            this._time = {
+                hour: now.getHours(),
+                minute: now.getMinutes()
+            };
+        }
+        const patch = {
+            hour: value.hour,
+            minute: value.minute
+        };
+        if (this._hour12 && value) {
+            this.currentDayPeriod = value.dayPeriod;
+            if (this.currentDayPeriod === 'pm' && patch.hour >= 12) {
+                patch.hour -= 12;
+            }
+            if (patch.hour === 0)
+                patch.hour = 12;
+        }
+        this.form.patchValue(patch, { onlySelf: true, emitEvent: !silent });
+    }
+    writeValue(value) {
+        if (value === null)
+            return;
+        this._time = value;
+        this._patch(value, true);
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    ngOnDestroy() {
+        this._subs.forEach((s) => s.unsubscribe());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TimeInputComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: TimeInputComponent, isStandalone: true, selector: "yuv-time-input", inputs: { hour12: "hour12", dayPeriodLabels: "dayPeriodLabels" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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  <button mat-icon-button type=\"button\" class=\"increase hour\" (click)=\"increaseHour()\">\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </button>\n\n  <yuv-date-input-hour-element\n    #dipHour\n    class=\"hour focusable\"\n    [(dayPeriod)]=\"currentDayPeriod\"\n    formControlName=\"hour\"\n    [maxLength]=\"2\"\n  ></yuv-date-input-hour-element>\n\n  <button mat-icon-button type=\"button\" class=\"decrease hour\" (click)=\"decreaseHour()\">\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </button>\n  <div class=\"literal\">:</div>\n  <button mat-icon-button type=\"button\" class=\"increase minute\" (click)=\"increaseMinute()\">\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </button>\n\n  <yuv-date-input-element\n    #dipMinute\n    class=\"minute focusable\"\n    [maxValue]=\"59\"\n    [minValue]=\"0\"\n    formControlName=\"minute\"\n    [maxLength]=\"2\"\n  ></yuv-date-input-element>\n\n  <button mat-icon-button type=\"button\" class=\"decrease minute\" (click)=\"decreaseMinute()\">\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </button>\n\n  @if (hour12) {\n  <div class=\"dayPeriod\">\n    <button\n      type=\"button\"\n      class=\"dp pm\"\n      [ngClass]=\"{ active: currentDayPeriod === 'pm' }\"\n      (click)=\"currentDayPeriod = 'pm'\"\n    >\n      {{ dayPeriodLabels.pm }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"dp am\"\n      [ngClass]=\"{ active: currentDayPeriod === 'am' }\"\n      (click)=\"currentDayPeriod = 'am'\"\n    >\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 auto auto;grid-template-columns:max-content max-content max-content max-content;grid-template-areas:\"hup div mup period\" \"hin div min period\" \"hdown div mdown 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-width:0 1px;min-height:2em;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 button{border:1px solid var(--time-input-border-color);border-radius:0;padding:0}:host form button.decrease.hour{grid-area:hdown}:host form button.decrease.minute{grid-area:mdown}:host form button.increase.hour{grid-area:hup}:host form button.increase.minute{grid-area:mup}:host form button.increase mat-icon{transform:rotate(180deg)}: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}:host form .dayPeriod>button.dp.active{background-color:var(--ymt-primary);border-color:var(--ymt-primary);color:var(--ymt-on-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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.1", ngImport: i0, type: TimeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-time-input', standalone: true, imports: [CommonModule, MatIconModule, DateInputHourElementComponent, DateInputElementComponent, MatButtonModule, ReactiveFormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TimeInputComponent),
+                            multi: true
+                        }
+                    ], template: "<form [formGroup]=\"form\">\n  <button mat-icon-button type=\"button\" class=\"increase hour\" (click)=\"increaseHour()\">\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </button>\n\n  <yuv-date-input-hour-element\n    #dipHour\n    class=\"hour focusable\"\n    [(dayPeriod)]=\"currentDayPeriod\"\n    formControlName=\"hour\"\n    [maxLength]=\"2\"\n  ></yuv-date-input-hour-element>\n\n  <button mat-icon-button type=\"button\" class=\"decrease hour\" (click)=\"decreaseHour()\">\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </button>\n  <div class=\"literal\">:</div>\n  <button mat-icon-button type=\"button\" class=\"increase minute\" (click)=\"increaseMinute()\">\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </button>\n\n  <yuv-date-input-element\n    #dipMinute\n    class=\"minute focusable\"\n    [maxValue]=\"59\"\n    [minValue]=\"0\"\n    formControlName=\"minute\"\n    [maxLength]=\"2\"\n  ></yuv-date-input-element>\n\n  <button mat-icon-button type=\"button\" class=\"decrease minute\" (click)=\"decreaseMinute()\">\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </button>\n\n  @if (hour12) {\n  <div class=\"dayPeriod\">\n    <button\n      type=\"button\"\n      class=\"dp pm\"\n      [ngClass]=\"{ active: currentDayPeriod === 'pm' }\"\n      (click)=\"currentDayPeriod = 'pm'\"\n    >\n      {{ dayPeriodLabels.pm }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"dp am\"\n      [ngClass]=\"{ active: currentDayPeriod === 'am' }\"\n      (click)=\"currentDayPeriod = 'am'\"\n    >\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 auto auto;grid-template-columns:max-content max-content max-content max-content;grid-template-areas:\"hup div mup period\" \"hin div min period\" \"hdown div mdown 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-width:0 1px;min-height:2em;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 button{border:1px solid var(--time-input-border-color);border-radius:0;padding:0}:host form button.decrease.hour{grid-area:hdown}:host form button.decrease.minute{grid-area:mdown}:host form button.increase.hour{grid-area:hup}:host form button.increase.minute{grid-area:mup}:host form button.increase mat-icon{transform:rotate(180deg)}: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}:host form .dayPeriod>button.dp.active{background-color:var(--ymt-primary);border-color:var(--ymt-primary);color:var(--ymt-on-primary)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { hourInput: [{
+                type: ViewChild,
+                args: ['dipHour']
+            }], minuteInput: [{
+                type: ViewChild,
+                args: ['dipMinute']
+            }], hour12: [{
+                type: Input
+            }], dayPeriodLabels: [{
+                type: Input
+            }] } });
+
+class CalendarComponent {
+    // feature flag for immediately selecting a new (close) Date when
+    // navigating between years/months
+    #immediatelySelect;
+    #dateEffect;
+    #localeEffect;
+    #withTimeEffect;
+    keyDownHandler(event) {
+        this._handleKeyboardEvent(event);
+    }
+    constructor() {
+        this.datepickerService = inject(DatepickerService);
+        this.calEl = viewChild.required('cal');
+        this._initialized = false;
+        this.maxYear = 9999;
+        this.minYear = -9999;
+        // feature flag for immediately selecting a new (close) Date when
+        // navigating between years/months
+        this.#immediatelySelect = true;
+        /**
+         * Allow only date inputs after this date
+         */
+        this.minDate = input();
+        /**
+         * Allow only date inputs before this date
+         */
+        this.maxDate = input();
+        /**
+         * Allow only date inputs that are after today
+         */
+        this.onlyFutureDates = input(false);
+        this.date = model();
+        this.#dateEffect = effect(() => {
+            const d = this.date();
+            untracked(() => {
+                // clone date
+                const dc = d ? new Date(d.toISOString()) : null;
+                if (this.datepickerService.isDifferent(d || null, dc)) {
+                    if (this._initialized)
+                        this.#buildDate();
+                }
+            });
+        });
+        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.#localeEffect = effect(() => {
+            this._setLocale(this.locale() || 'en');
+        });
+        this.withTime = input(false);
+        this.#withTimeEffect = effect(() => {
+            // keep to trigger effect
+            const wt = this.withTime();
+            untracked(() => {
+                const d = this.date();
+                if (d) {
+                    this.time = this._dateToTime(d);
+                }
+            });
+        });
+        this.hour12 = input(false);
+        this.selectedIndex = -1;
+        this.focusedIndex = 0;
+        this._focusPos = {
+            col: 1,
+            row: 1
+        };
+        this.calendarDays = [];
+        this._numberOfWeeks = 4;
+        const d = this.date() || new Date();
+        this.selectMonthOfYear(d.getMonth(), d.getFullYear());
+        this.time = {
+            hour: d.getHours(),
+            minute: d.getMinutes()
+        };
+    }
+    _dateToTime(date) {
+        const hour = date.getHours();
+        const dayPeriod = this.hour12() ? (date.getHours() >= 12 ? 'pm' : 'am') : undefined;
+        return structuredClone({
+            hour: dayPeriod === 'pm' && hour > 12 ? hour - 12 : hour,
+            minute: date.getMinutes(),
+            dayPeriod
+        });
+    }
+    #buildDate() {
+        const _date = this.date();
+        const _withTime = this.withTime();
+        if (_date) {
+            this.selectedIndex = -1;
+            this.selectMonthOfYear(_date.getMonth(), _date.getFullYear(), true);
+            if (_withTime) {
+                this.time = this._dateToTime(_date);
+                _date.setSeconds(0, 0);
+            }
+            else {
+                _date.setHours(0, 0, 0, 0);
+            }
+            this.select(_date, true, true);
+        }
+    }
+    selectByIndex(i, setFocusPosition) {
+        const d = new Date(this.calendarDays[i].id);
+        if (this.time) {
+            d.setHours(this.time.dayPeriod === 'pm' && this.time.hour < 12 ? this.time.hour + 12 : this.time.hour);
+            d.setMinutes(this.time.minute);
+        }
+        this.select(d, setFocusPosition);
+    }
+    select(d, setFocusPosition, silent) {
+        const date = d instanceof Date ? d : new Date(d);
+        // also be aware of time
+        if (this.withTime()) {
+            const time = this._dateToTime(date);
+            if (this.time && this.time.hour === time.hour && this.time.minute === time.minute) {
+                let amPmShift = this.time.dayPeriod === 'pm' && this.time.hour !== 12 ? 12 : 0;
+                if (this.time.dayPeriod === 'am' && this.time.hour === 12)
+                    amPmShift = -12;
+                date.setHours(this.time.hour + amPmShift);
+                date.setMinutes(this.time.minute, 0, 0);
+            }
+            else
+                this.time = time;
+        }
+        if (!this.onlyFutureDates() || DatepickerUtils.isFutureDate(date)) {
+            this.selectedIndex = this._getCalendarIndex(date);
+            if (setFocusPosition)
+                this._setFocusPosByCalendarIndex(this.selectedIndex);
+            this.date.update(() => date);
+            // if (!silent) this.dateChange.emit(date);
+        }
+    }
+    selectMonthOfYear(month, year, skipImmediateSelect) {
+        if (month < 0 || month > 11)
+            return;
+        if (month !== this.month)
+            this.month = month;
+        if (!this.year && !year)
+            this.year = new Date().getFullYear();
+        if (year && this.year !== year)
+            this.year = year;
+        if (this.year && this.datepickerService.yearOffset)
+            this._offsetYear = this.year + this.datepickerService.yearOffset;
+        else
+            this._offsetYear = this.year;
+        this._buildMonth(this.year, this.month);
+        const date = this.date();
+        if (!skipImmediateSelect && this.#immediatelySelect && date) {
+            let d = new Date(date);
+            d.setMonth(month);
+            if (d.getMonth() !== month) {
+                // already in the next month (e.g. going from the 31st of August to September)
+                // so we'll pick the last date of the month that has been selected
+                d = new Date(d.getFullYear(), month + 1, 0);
+            }
+            this.select(d, true);
+        }
+    }
+    selectYear(year, skipImmediateSelect) {
+        if (this.datepickerService.yearOffset)
+            year -= this.datepickerService.yearOffset;
+        if (year > this.maxYear || year < this.minYear)
+            return;
+        if (year && this.year !== year)
+            this.year = year;
+        this._buildMonth(this.year, this.month);
+        const date = this.date();
+        if (!skipImmediateSelect && this.#immediatelySelect && date) {
+            const d = new Date(date);
+            d.setFullYear(year);
+            this.select(d, true);
+        }
+    }
+    onYearInputKeydown(e) {
+        e.stopPropagation();
+    }
+    onTimeChange(e) {
+        const date = this.date();
+        if (date) {
+            let hour = e.dayPeriod === 'pm' && e.hour < 12 ? e.hour + 12 : e.hour;
+            hour = e.dayPeriod === 'am' && hour === 12 ? 0 : hour;
+            date.setHours(hour === 24 ? 0 : hour);
+            date.setMinutes(e.minute);
+            this.time = e;
+        }
+        this.date.update(() => date);
+    }
+    _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 }));
+        const dFormat = new Intl.DateTimeFormat(locale, { weekday: 'short' }).format;
+        this._firstDayOfWeek = DatepickerUtils.getWeekInfo(this.locale() || 'en').firstDay - 1;
+        const daysOfWeekIdx = [];
+        for (let i = 0; i < 7; i++) {
+            let x = this._firstDayOfWeek + i;
+            if (x > 6)
+                x -= 7;
+            daysOfWeekIdx.push(x);
+        }
+        this.daysOfWeek = daysOfWeekIdx.map((day) => dFormat(new Date(Date.UTC(2021, 5, day))));
+        this._buildMonth(this.year, this.month);
+    }
+    _reset() {
+        this.selectedIndex = -1;
+        this.focusedIndex = 0;
+    }
+    _buildMonth(year, month) {
+        this._reset();
+        // TODO: find a more generic approach (if there actually are other first days of week than sonday and monday)
+        const startDayOffset = this._firstDayOfWeek === 0 ? -1 : 0;
+        let firstDayOfMonthInWeek = new Date(year, month).getDay() + startDayOffset;
+        if (firstDayOfMonthInWeek === -1)
+            firstDayOfMonthInWeek = 6;
+        const lastDateOfMonth = new Date(year, month + 1, 0).getDate(), lastDayOfMonthInWeek = new Date(year, month, lastDateOfMonth).getDay() + startDayOffset, lastDateOfPreviousMonth = new Date(year, month, 0).getDate();
+        const today = new Date();
+        today.setDate(today.getDate() - 1);
+        today.setHours(23, 59, 59);
+        const items = [];
+        // previous months last days
+        for (let i = firstDayOfMonthInWeek; i > 0; i--) {
+            const day = lastDateOfPreviousMonth - i + 1;
+            items.push({
+                day,
+                disabled: DatepickerUtils.isValidValue(new Date(year, month, i), {
+                    onlyFutureDates: this.onlyFutureDates(),
+                    withTime: this.withTime(),
+                    maxDate: this.maxDate(),
+                    minDate: this.minDate()
+                }),
+                inactive: true,
+                id: this._getDayId(year, month - 1, day)
+            });
+        }
+        // all days of current month
+        for (let i = 1; i <= lastDateOfMonth; i++) {
+            items.push({
+                day: i,
+                disabled: DatepickerUtils.isValidValue(new Date(year, month, i), {
+                    onlyFutureDates: this.onlyFutureDates(),
+                    withTime: this.withTime(),
+                    maxDate: this.maxDate(),
+                    minDate: this.minDate()
+                }),
+                id: this._getDayId(year, month, i)
+            });
+        }
+        // next months first days
+        for (let i = lastDayOfMonthInWeek; i < 6; i++) {
+            const day = i - lastDayOfMonthInWeek + 1;
+            items.push({
+                day,
+                inactive: true,
+                id: this._getDayId(year, month + 1, day)
+            });
+        }
+        this._numberOfWeeks = items.length / 7;
+        this.calendarDays = items;
+        const date = this.date();
+        if (date?.getMonth() === month && date?.getFullYear() === year) {
+            this.select(date, true, true);
+        }
+    }
+    _getDayId(year, month, day) {
+        const d = new Date(year, month, day);
+        return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
+    }
+    _handleKeyboardEvent(event) {
+        switch (event.code) {
+            case 'PageDown': {
+                // go to previous month
+                const d = new Date(this.year, this.month);
+                d.setMonth(this.month - 1);
+                this.selectMonthOfYear(d.getMonth(), d.getFullYear());
+                this._stopEvent(event);
+                break;
+            }
+            case 'PageUp': {
+                // go to next month
+                const d = new Date(this.year, this.month);
+                d.setMonth(this.month + 1);
+                this.selectMonthOfYear(d.getMonth(), d.getFullYear());
+                this._stopEvent(event);
+                break;
+            }
+            case 'Home': {
+                // focus first day of month
+                this._setFocusPosByCalendarIndex(this._getCalendarIndex(new Date(this.year, this.month, 1)));
+                this._stopEvent(event);
+                break;
+            }
+            case 'End': {
+                // focus last day of month
+                this._setFocusPosByCalendarIndex(this._getCalendarIndex(new Date(this.year, this.month + 1, 0)));
+                this._stopEvent(event);
+                break;
+            }
+            case 'Space': {
+                this.selectByIndex(this.focusedIndex, false);
+                this._stopEvent(event);
+                break;
+            }
+            case 'ArrowUp': {
+                let row = this._focusPos.row - 1;
+                if (row <= 0)
+                    row = this._numberOfWeeks;
+                this._setFocusPos(row, undefined);
+                this._stopEvent(event);
+                break;
+            }
+            case 'ArrowDown': {
+                let row = this._focusPos.row + 1;
+                if (row > this._numberOfWeeks)
+                    row = 1;
+                this._setFocusPos(row, undefined);
+                this._stopEvent(event);
+                break;
+            }
+            case 'ArrowRight': {
+                let col = this._focusPos.col + 1;
+                let row = this._focusPos.row;
+                if (col > 7) {
+                    col = 1;
+                    row++;
+                    if (row > this._numberOfWeeks) {
+                        // go to next month
+                        const d = new Date(this.calendarDays[this.calendarDays.length - 1].id);
+                        d.setDate(d.getDate() + 1);
+                        row = col = 1;
+                        this.selectMonthOfYear(d.getMonth(), d.getFullYear());
+                    }
+                }
+                this._setFocusPos(row, col);
+                this._stopEvent(event);
+                break;
+            }
+            case 'ArrowLeft': {
+                let col = this._focusPos.col - 1;
+                let row = this._focusPos.row;
+                if (col <= 0) {
+                    col = 7;
+                    row--;
+                    if (row <= 0) {
+                        // go to previous month
+                        const d = new Date(this.calendarDays[0].id);
+                        d.setDate(d.getDate() - 1);
+                        row = this._numberOfWeeks;
+                        col = 7;
+                        this.selectMonthOfYear(d.getMonth(), d.getFullYear());
+                    }
+                }
+                this._setFocusPos(row, col);
+                this._stopEvent(event);
+                break;
+            }
+        }
+    }
+    _getCalendarIndex(date) {
+        return this.calendarDays.findIndex((cd) => cd.id === this._getDayId(date.getFullYear(), date.getMonth(), date.getDate()));
+    }
+    _stopEvent(e) {
+        if (e) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+    _setFocusPos(row, col) {
+        if (row !== undefined)
+            this._focusPos.row = row;
+        if (col !== undefined)
+            this._focusPos.col = col;
+        this.focusedIndex = (this._focusPos.row - 1) * 7 + this._focusPos.col - 1;
+    }
+    _setFocusPosByCalendarIndex(index) {
+        this.focusedIndex = index;
+        this._focusPos = {
+            col: (this.focusedIndex % 7) + 1,
+            row: Math.round(this.focusedIndex / this._numberOfWeeks)
+        };
+    }
+    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.1", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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    <yuv-time-input [(ngModel)]=\"time\" [hour12]=\"hour12()\" [dayPeriodLabels]=\"dayPeriodLabels\" (ngModelChange)=\"onTimeChange($event)\"></yuv-time-input>\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:row wrap}:host section.date{max-width:calc(var(--_calendar-item-size) * 11)}:host section.time{display:flex;align-items:center;margin-inline-start:var(--ymt-spacing-m)}:host *:focus:not(:focus-visible){outline:none}:host header{display:flex;align-items:center;justify-content:space-between}: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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-calendar', standalone: true, imports: [CommonModule, FormsModule, 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    <yuv-time-input [(ngModel)]=\"time\" [hour12]=\"hour12()\" [dayPeriodLabels]=\"dayPeriodLabels\" (ngModelChange)=\"onTimeChange($event)\"></yuv-time-input>\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:row wrap}:host section.date{max-width:calc(var(--_calendar-item-size) * 11)}:host section.time{display:flex;align-items:center;margin-inline-start:var(--ymt-spacing-m)}:host *:focus:not(:focus-visible){outline:none}:host header{display:flex;align-items:center;justify-content:space-between}: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']]
+            }] } });
+
+/**
+ *
+ */
+class DateInputComponent {
+    set disabled(d) {
+        this._disabled = d;
+        if (d) {
+            this.dateInputForm?.disable();
+        }
+        else {
+            this.dateInputForm?.enable();
+        }
+    }
+    set placeholder(p) {
+        this._placeholder = p;
+        this._refreshPlaceholder = false;
+    }
+    set withTime(b) {
+        this._withTime = b;
+        if (b !== undefined)
+            this._init();
+    }
+    get withTime() {
+        return this._withTime;
+    }
+    set hour12(b) {
+        if (b === this._hour12)
+            return;
+        this._hour12 = b;
+        if (b !== undefined)
+            this._init(true);
+    }
+    get hour12() {
+        return this._hour12;
+    }
+    get hoursControl() {
+        return this.dateInputForm.controls['hour'];
+    }
+    constructor(datepickerService, fb, elRef) {
+        this.datepickerService = datepickerService;
+        this.fb = fb;
+        this.elRef = elRef;
+        this._subs = [];
+        this._date = null;
+        this._disabled = false;
+        this._refreshPlaceholder = true;
+        this._locale = this.datepickerService.DEFAULT_LANGUAGE;
+        this._withTime = false;
+        this._hour12 = false;
+        // @Output() blur = new EventEmitter<any>();
+        // @Output() focus = new EventEmitter<any>();
+        this.dateTokens = [];
+        this.dayPeriodLabels = {
+            am: 'AM',
+            pm: 'PM'
+        };
+        this._placeholderVisible = true;
+    }
+    _setupForm() {
+        const dateTokens = this._getPatch(this._date);
+        const dateCfg = {
+            day: [dateTokens.day, [Validators.max(31), Validators.minLength(2)]],
+            month: [dateTokens.month, [Validators.max(12), Validators.minLength(2)]],
+            year: [dateTokens.year, [Validators.minLength(4)]]
+        };
+        const timeCfg = {
+            hour: [dateTokens.hour, [Validators.minLength(2)]],
+            minute: [dateTokens.minute, [Validators.max(59), Validators.minLength(2)]]
+        };
+        this.dateInputForm = this.fb.group(this.withTime ? { ...dateCfg, ...timeCfg } : dateCfg, {
+            validators: (g) => {
+                let valueCount = 0;
+                Object.keys(g.value).forEach((k) => {
+                    if (g.value[k] && `${g.value[k]?.length}`)
+                        valueCount++;
+                });
+                return valueCount === 0 || valueCount === Object.keys(g.value).length
+                    ? null
+                    : {
+                        missingValue: true
+                    };
+            }
+        });
+        if (this._formValueSub) {
+            this._formValueSub.unsubscribe();
+            this._formValueSub = undefined;
+            this._formStateSub.unsubscribe();
+            this._formStateSub = undefined;
+        }
+        this._disabled && this.dateInputForm?.disable();
+        this._formValueSub = this.dateInputForm.valueChanges.subscribe({
+            next: (v) => {
+                this._checkAndPropagateForm();
+            }
+        });
+        this._formStateSub = this.dateInputForm.statusChanges.subscribe({
+            next: (v) => {
+                this._setInvalidInputError(v === 'INVALID');
+            }
+        });
+    }
+    _setInvalidInputError(isInvalid) {
+        if (isInvalid) {
+            this.datepickerService.setErrors({
+                invalidInput: true
+            });
+        }
+        else {
+            this.datepickerService.removeErrors(['invalidInput']);
+        }
+    }
+    _checkAndPropagateForm() {
+        if (this.dateInputForm?.status === 'VALID') {
+            this._date = this._formToDate(this.dateInputForm);
+            this.datepickerService.setValue(this._date);
+        }
+    }
+    _formToDate(g) {
+        // starting with a year of '0000' because there could be negative values
+        // that would break the date creation using string parameter
+        let dateString = `0000-${g.controls['month'].value}-${g.controls['day'].value}`;
+        if (this.withTime) {
+            const strHour = g.controls['hour'].value;
+            let hour = strHour?.length ? parseInt(strHour) : -1;
+            if (this.hour12) {
+                hour = this.currentDayPeriod === 'pm' && hour < 12 ? hour + 12 : hour;
+                hour = this.currentDayPeriod === 'am' && hour === 12 ? 0 : hour;
+                hour = hour === 24 ? 0 : hour;
+            }
+            dateString += `T${hour < 10 ? `0${hour}` : `${hour}`}:${g.controls['minute'].value}:00`;
+        }
+        const date = new Date(dateString);
+        let isValidDateObject = !!date && Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime());
+        if (isValidDateObject) {
+            // set the year independently
+            const parsedYear = parseInt(g.controls['year'].value);
+            if (!isNaN(parsedYear)) {
+                date.setFullYear(parsedYear);
+            }
+            else {
+                isValidDateObject = false;
+            }
+        }
+        this._setInvalidInputError(!isValidDateObject);
+        return isValidDateObject ? date : null;
+    }
+    _focusInput(offset) {
+        const inputs = this._getFocusableElements();
+        let i = inputs.findIndex((i) => i === document.activeElement);
+        i = i + offset;
+        if (i > inputs.length - 1)
+            i = 0;
+        if (i < 0)
+            i = inputs.length - 1;
+        inputs[i].focus();
+    }
+    onPlaceholderFocus() {
+        this.focusFirstInput();
+    }
+    onDateInputFocus() {
+        // this.focus.emit();
+        this._placeholderVisible = false;
+    }
+    onDateInputBlur() {
+        let hasValue = false;
+        Object.keys(this.dateInputForm?.value || {}).forEach((k) => {
+            if (!hasValue && !!this.dateInputForm?.value[k])
+                hasValue = true;
+        });
+        // if (hasValue) this.elRef.nativeElement.classList.add('is-dirty');
+        // else this.elRef.nativeElement.classList.remove('is-dirty');
+        this.elRef.nativeElement.classList.toggle('is-dirty', hasValue);
+        this._placeholderVisible = !hasValue;
+        // this.blur.emit();
+    }
+    focusFirstInput() {
+        this._getFocusableElements()[0].focus();
+    }
+    _getFocusableElements() {
+        return Array.from(this.elRef.nativeElement.querySelectorAll('input:not([inert])'));
+    }
+    _getPatch(d) {
+        const patch = {
+            day: undefined,
+            month: undefined,
+            year: undefined,
+            hour: undefined,
+            minute: undefined
+        };
+        if (d) {
+            // year may have an offset (e.g. locale 'th')
+            // Intl would return the offsetted value therefore we get the year from the date itself
+            patch.year = d.getFullYear();
+            const l = patch.year.length;
+            if (l > 0 && l !== 4) {
+                patch.year = `${[...Array(4 - l).keys()].map((_) => '0').join('')}${patch.year}`;
+            }
+            Intl.DateTimeFormat(this._locale, this._intlOptions)
+                .formatToParts(d)
+                .forEach((t) => {
+                switch (t.type) {
+                    case 'day': {
+                        patch.day = t.value;
+                        break;
+                    }
+                    case 'month': {
+                        patch.month = t.value;
+                        break;
+                    }
+                    case 'hour': {
+                        patch.hour = t.value === '24' ? '0' : t.value;
+                        break;
+                    }
+                    case 'minute': {
+                        patch.minute = t.value;
+                        break;
+                    }
+                    case 'dayPeriod': {
+                        this.currentDayPeriod = t.value === 'AM' ? 'am' : 'pm';
+                        break;
+                    }
+                }
+            });
+        }
+        return patch;
+    }
+    reset() {
+        this.datepickerService.setValue(null);
+    }
+    getFormattedValue() {
+        return this._date ? Intl.DateTimeFormat(this._locale, this._intlOptions).format(this._date) : null;
+    }
+    onInputNext() {
+        this._focusInput(1);
+    }
+    onInputPrev() {
+        this._focusInput(-1);
+    }
+    toggleDayPeriod() {
+        this.currentDayPeriod = this.currentDayPeriod === 'pm' ? 'am' : 'pm';
+        this._checkAndPropagateForm();
+    }
+    _init(skipFormSetup = false) {
+        this._setPlaceholder();
+        this._intlOptions = this.datepickerService.getIntlOptions(this.withTime, this.hour12);
+        const d = this._date || new Date();
+        this.dateTokens = new Intl.DateTimeFormat(this._locale, this._intlOptions).formatToParts(d);
+        if (this.hour12) {
+            this.currentDayPeriod = d.getHours() > 12 ? 'pm' : 'am';
+            this.dayPeriodLabels = this.datepickerService.getDayPeriodLabels(this._locale);
+        }
+        if (!skipFormSetup)
+            this._setupForm();
+    }
+    _setPlaceholder() {
+        this.placeholder = this.datepickerService.getDatePattern(this._locale, this.withTime, this.hour12);
+    }
+    ngOnInit() {
+        this._subs.push(this.datepickerService.language$.subscribe({
+            next: (lang) => {
+                if (lang !== this._locale) {
+                    this._locale = lang;
+                    this._init(true);
+                    if (this._refreshPlaceholder)
+                        this._setPlaceholder();
+                }
+            }
+        }));
+        this._subs.push(this.datepickerService.valueChange$.subscribe({
+            next: (vc) => {
+                this._date = vc.value;
+                this.dateAttribute = this.getFormattedValue() || undefined;
+                this.dateInputForm.patchValue(this._getPatch(vc.value), {
+                    emitEvent: false
+                });
+                // this.dateInputForm?.updateValueAndValidity()
+            }
+        }));
+        this._init();
+    }
+    ngOnDestroy() {
+        if (this._formValueSub)
+            this._formValueSub.unsubscribe();
+        if (this._formStateSub)
+            this._formStateSub.unsubscribe();
+        this._subs.forEach((s) => s.unsubscribe());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", 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.1", 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!\" (yuvFocusWithin)=\"onDateInputFocus()\" (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=\"dd\"\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=\"MM\"\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=\"yyyy\"\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=\"HH\"\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=\"mm\"\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          <!-- <span>{{ t.value }}</span> -->\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@if (_placeholderVisible) {\n  <input class=\"placeholder\" [placeholder]=\"_placeholder\" (focus)=\"onPlaceholderFocus()\" />\n}\n", styles: [":host{display:inline-grid;outline:0;align-items:center;grid-template-rows:1fr;grid-template-columns:1fr}: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;font-size:var(--_datepicker-font-size);padding:0;border:0;background-color:transparent;border-block-end:1px solid transparent;color:var(--_datepicker-text-color)}:host:focus-within yuv-date-input-hour-element,:host:focus-within yuv-date-input-element{border-color:var(--_datepicker-input-focus-border-color)}:host:focus-within form{opacity:1}:host:focus-within .placeholder{opacity:0;outline:2px solid red;pointer-events:none}:host.is-dirty form,:host.has-value form{opacity:1}:host.is-dirty .placeholder,:host.has-value .placeholder{opacity:0}:host .placeholder{grid-row:1;grid-column:1;font-size:var(--_datepicker-font-size);width:100%;padding:0;flex:1;line-height:1em;border:0;background-color:transparent;transition:opacity .2s ease-in-out}:host form{transition:opacity .2s ease-in-out;grid-row:1;grid-column:1;display:flex;opacity:0;align-items:flex-end;gap:.1em}:host form button.dayPeriod{font-family:monospace;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FocusWithinDirective, selector: "[yuvFocusWithin]", outputs: ["yuvFocusWithin", "yuvFocusWithinBlur"] }, { 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.1", ngImport: i0, type: DateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-date-input', standalone: true, imports: [CommonModule, FocusWithinDirective, DateInputHourElementComponent, DateInputElementComponent, ReactiveFormsModule], template: "@if (dateInputForm) {\n  <form [formGroup]=\"dateInputForm!\" (yuvFocusWithin)=\"onDateInputFocus()\" (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=\"dd\"\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=\"MM\"\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=\"yyyy\"\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=\"HH\"\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=\"mm\"\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          <!-- <span>{{ t.value }}</span> -->\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@if (_placeholderVisible) {\n  <input class=\"placeholder\" [placeholder]=\"_placeholder\" (focus)=\"onPlaceholderFocus()\" />\n}\n", styles: [":host{display:inline-grid;outline:0;align-items:center;grid-template-rows:1fr;grid-template-columns:1fr}: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;font-size:var(--_datepicker-font-size);padding:0;border:0;background-color:transparent;border-block-end:1px solid transparent;color:var(--_datepicker-text-color)}:host:focus-within yuv-date-input-hour-element,:host:focus-within yuv-date-input-element{border-color:var(--_datepicker-input-focus-border-color)}:host:focus-within form{opacity:1}:host:focus-within .placeholder{opacity:0;outline:2px solid red;pointer-events:none}:host.is-dirty form,:host.has-value form{opacity:1}:host.is-dirty .placeholder,:host.has-value .placeholder{opacity:0}:host .placeholder{grid-row:1;grid-column:1;font-size:var(--_datepicker-font-size);width:100%;padding:0;flex:1;line-height:1em;border:0;background-color:transparent;transition:opacity .2s ease-in-out}:host form{transition:opacity .2s ease-in-out;grid-row:1;grid-column:1;display:flex;opacity:0;align-items:flex-end;gap:.1em}:host form button.dayPeriod{font-family:monospace;padding:0}\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: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], withTime: [{
+                type: Input
+            }], hour12: [{
+                type: Input
+            }] } });
+
+class DatepickerCalendarComponent {
+    constructor() {
+        this.#dialogData = inject(MAT_DIALOG_DATA);
+        this.#dialogRef = inject((MatDialogRef));
+        this.date = this.#dialogData.date;
+        this.options = this.#dialogData.options;
+    }
+    #dialogData;
+    #dialogRef;
+    enterKeyHandler(event) {
+        this.applyDate();
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    shortcut(key) {
+        switch (key) {
+            case 'today': {
+                const today = new Date();
+                if (this.options.withTime && this.date) {
+                    // keep time value
+                    today.setHours(this.date.getHours());
+                    today.setMinutes(this.date.getMinutes());
+                }
+                this.date = today;
+                break;
+            }
+        }
+    }
+    applyDate() {
+        this.#dialogRef.close(this.date);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatepickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", 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\" mat-button 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\" mat-flat-button [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: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatepickerCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-datepicker-calendar', standalone: true, imports: [CalendarComponent, MatDialogModule, MatButtonModule], 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\" mat-button 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\" mat-flat-button [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']]
+            }] } });
+
+class DatepickerComponent {
+    constructor() {
+        this.#dialog = inject(MatDialog);
+        this.#datepickerService = inject(DatepickerService);
+        this._subs = [];
+        this.allSelected = signal(false);
+        /**
+         * Whether or not to show a calendar picker
+         */
+        this.calendar = false;
+        /**
+         * Whether or not the component is readonly
+         */
+        this.readonly = false;
+        this._hour12 = false;
+        this._detectHourCycle = true;
+        this._locale = this.#datepickerService.DEFAULT_LANGUAGE;
+        this._defaultLabelslabels = {
+            calendarApply: 'Apply',
+            calendarCancel: 'Cancel',
+            shortcut: { today: 'today' }
+        };
+        this._labels = this._defaultLabelslabels;
+        this._withTime = false;
+        this.disabled = false;
+        this.calendarValue = null;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.validationChange = () => { };
+    }
+    #dialog;
+    #datepickerService;
+    keydownHandler(e) {
+        if (e.key === 'a' && e.ctrlKey) {
+            // select all
+            e.preventDefault();
+            this.allSelected.set(true);
+        }
+        else if (e.key === 'Delete' && this.allSelected) {
+            // delete the whole date
+            if (this.readonly || this.disabled)
+                return;
+            this.allSelected.set(false);
+            this.clear();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else if (this.allSelected() && e.key === 'c' && e.ctrlKey) {
+            this.copyToClipboard();
+        }
+        else {
+            this.allSelected.set(false);
+        }
+    }
+    clickHandler() {
+        this.allSelected.set(false);
+    }
+    focusOutHandler() {
+        this.allSelected.set(false);
+    }
+    /**
+     * Whether or not to 12-hour format vs. default 24h format.
+     * By default the component will try to figure out which hour cycle to
+     * use based on the locale. Setting hour12 property to either `
+     * `true`or `false will overwrite that.
+     */
+    set hour12(b) {
+        if (b === true || b === false) {
+            this._hour12 = b;
+            this._detectHourCycle = false;
+        }
+    }
+    set locale(iso) {
+        if (iso !== this._locale) {
+            this._locale = iso;
+            if (this._detectHourCycle)
+                this._getHourCycle();
+            this.#datepickerService.setLanguage(iso);
+        }
+    }
+    get locale() {
+        return this._locale;
+    }
+    set labels(l) {
+        this._labels = l || this._defaultLabelslabels;
+    }
+    get labels() {
+        return this._labels;
+    }
+    /**
+     * Whether or not to also include time
+     */
+    set withTime(b) {
+        this._withTime = b;
+        this.#datepickerService.setOption({ withTime: b });
+    }
+    get withTime() {
+        return this._withTime;
+    }
+    /**
+     * Allow only date inputs that are after today
+     */
+    set onlyFutureDates(b) {
+        this.#datepickerService.setOption({ onlyFutureDates: b });
+    }
+    /**
+     * Allow only date inputs after this date
+     */
+    set minDate(d) {
+        this.#datepickerService.setOption({ minDate: d || undefined });
+    }
+    /**
+     * Allow only date inputs before this date
+     */
+    set maxDate(d) {
+        this.#datepickerService.setOption({ maxDate: d || undefined });
+    }
+    #dialogRef;
+    copyToClipboard() {
+        const fd = this.dateInputCmp.getFormattedValue();
+        if (fd)
+            navigator.clipboard.writeText(fd);
+    }
+    clear() {
+        this.#datepickerService.setValue(null);
+        this.dateInputCmp.focusFirstInput();
+    }
+    openCalendar() {
+        if (!this.calendarValue)
+            this.calendarValue = new Date();
+        this.#dialogRef = this.#dialog.open(DatepickerCalendarComponent, {
+            data: {
+                date: this.calendarValue,
+                options: {
+                    withTime: this.withTime,
+                    onlyFutureDates: this.onlyFutureDates,
+                    minDate: this.minDate,
+                    maxDate: this.maxDate,
+                    hour12: this._hour12,
+                    locale: this.locale,
+                    labels: this.labels
+                }
+            }
+        });
+        this.#dialogRef.afterClosed().subscribe({
+            next: (date) => {
+                if (date)
+                    this.onCalendarDateApply(date);
+            }
+        });
+    }
+    onCalendarDateApply(date) {
+        this.calendarValue = date;
+        this.#datepickerService.setValue(this.calendarValue);
+        this.closeCalendar();
+    }
+    onTextInputStatusChange(e) {
+        this.validationChange();
+    }
+    closeCalendar() {
+        this.#dialogRef?.close();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onDateInputBlur() { }
+    validate(ac) {
+        return this.#datepickerService.getErrors();
+    }
+    writeValue(value) {
+        if (value && DatepickerUtils.isValidDate(value)) {
+            this.#datepickerService.setValue(value || null, true);
+        }
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this.validationChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    _getHourCycle() {
+        this._hour12 = DatepickerUtils.getPreferredHourCycle(this._locale) === 'h12';
+    }
+    ngOnInit() {
+        if (this._detectHourCycle)
+            this._getHourCycle();
+        this._subs.push(this.#datepickerService.valueChange$.subscribe({
+            next: (vc) => {
+                this.calendarValue = vc.value;
+                if (vc.propagateChange)
+                    this.propagateChange(vc.value);
+            }
+        }));
+        this._subs.push(this.#datepickerService.validationChange$.subscribe({
+            next: (valid) => {
+                this.validationChange();
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this._subs.forEach((s) => s.unsubscribe());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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: [
+            DatepickerService,
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DatepickerComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                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 mat-icon-button type=\"button\" class=\"calender\" [disabled]=\"disabled\" (click)=\"openCalendar()\">\n    <mat-icon>calendar_month</mat-icon>\n  </button>\n}\n", styles: [":host{--_datepicker-font-size: var(--datepicker-font-size, var(-ymt-font-body-size));--_datepicker-text-color: var(--datepicker-color, var(--ymt-on-surface));--_datepicker-input-focus-border-color: var(--datepicker-color, var(--_datepicker-text-color));font-size:var(--_datepicker-font-size);padding:.25em;display:inline-flex}:host.all-selected yuv-date-input,:host.all-selected yuv-date-input-text{background-color:var(--text-selection-background);color:var(--text-selection-color)}: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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-datepicker', standalone: true, imports: [CommonModule, MatIconModule, DateInputComponent, MatButtonModule, ReactiveFormsModule], providers: [
+                        DatepickerService,
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatepickerComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => DatepickerComponent),
+                            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 mat-icon-button type=\"button\" class=\"calender\" [disabled]=\"disabled\" (click)=\"openCalendar()\">\n    <mat-icon>calendar_month</mat-icon>\n  </button>\n}\n", styles: [":host{--_datepicker-font-size: var(--datepicker-font-size, var(-ymt-font-body-size));--_datepicker-text-color: var(--datepicker-color, var(--ymt-on-surface));--_datepicker-input-focus-border-color: var(--datepicker-color, var(--_datepicker-text-color));font-size:var(--_datepicker-font-size);padding:.25em;display:inline-flex}:host.all-selected yuv-date-input,:host.all-selected yuv-date-input-text{background-color:var(--text-selection-background);color:var(--text-selection-color)}: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: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], withTime: [{
+                type: Input
+            }], onlyFutureDates: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], disabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }, {
+                type: Input
+            }] } });
+
+class DatepickerCalendarTriggerComponent {
+    constructor() {
+        this.for = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatepickerCalendarTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", 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: i4.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", 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] }]
+        }] });
+
+class YuvDatepickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: YuvDatepickerModule, imports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent], exports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvDatepickerModule, imports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: YuvDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent],
+                    exports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CalendarComponent, DEFAULT_DAY_PERIOD_LABELS, DatepickerCalendarTriggerComponent, DatepickerComponent, YuvDatepickerModule };
+//# sourceMappingURL=yuuvis-client-framework-datepicker.mjs.map