@yuuvis/client-framework 2.6.3 → 2.8.0

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

@@ -636,12 +636,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             }] } });
 
 class CalendarComponent {
-    // feature flag for immediately selecting a new (close) Date when
-    // navigating between years/months
-    #immediatelySelect;
-    #dateEffect;
-    #localeEffect;
-    #withTimeEffect;
     constructor() {
         this.datepickerService = inject(DatepickerService);
         this.calEl = viewChild.required('cal');
@@ -663,7 +657,7 @@ class CalendarComponent {
          * Allow only date inputs that are after today
          */
         this.onlyFutureDates = input(false);
-        this.date = model(new Date());
+        this.date = model();
         this.#dateEffect = effect(() => {
             const d = this.date();
             untracked(() => {
@@ -704,12 +698,23 @@ class CalendarComponent {
         };
         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()
-        };
+    }
+    // feature flag for immediately selecting a new (close) Date when
+    // navigating between years/months
+    #immediatelySelect;
+    #dateEffect;
+    #localeEffect;
+    #withTimeEffect;
+    ngOnInit() {
+        this._initialized = true;
+        const d = this.date();
+        if (d) {
+            this.selectMonthOfYear(d.getMonth(), d.getFullYear());
+            this.time = {
+                hour: d.getHours(),
+                minute: d.getMinutes()
+            };
+        }
     }
     _dateToTime(date) {
         const hour = date.getHours();
@@ -818,13 +823,14 @@ class CalendarComponent {
     onTimeChange(e) {
         const date = this.date();
         if (date) {
+            const newDate = new Date(date.getTime());
             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);
+            newDate.setHours(hour === 24 ? 0 : hour);
+            newDate.setMinutes(e.minute);
             this.time = e;
+            this.date.update(() => newDate);
         }
-        this.date.update(() => date);
     }
     _setLocale(locale) {
         this.dayPeriodLabels = this.datepickerService.getDayPeriodLabels(locale);
@@ -1019,16 +1025,13 @@ class CalendarComponent {
             row: Math.round(this.focusedIndex / this._numberOfWeeks)
         };
     }
-    ngOnInit() {
-        this._initialized = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CalendarComponent, isStandalone: true, selector: "yuv-calendar", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, onlyFutureDates: { classPropertyName: "onlyFutureDates", publicName: "onlyFutureDates", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, providers: [DatepickerService], viewQueries: [{ propertyName: "calEl", first: true, predicate: ["cal"], descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"date\">\n  <header>\n    <div class=\"month-picker\">\n      <mat-select [panelWidth]=\"null\" [(ngModel)]=\"month\" (ngModelChange)=\"selectMonthOfYear($event)\">\n        <mat-select-trigger> {{ month !== undefined ? months[month].label : '' }} &nbsp; </mat-select-trigger>\n        @for (m of months; track $index) {\n          <mat-option [value]=\"m.value\">{{ m.label }}</mat-option>\n        }\n      </mat-select>\n    </div>\n\n    <input\n      class=\"year-picker\"\n      name=\"year\"\n      type=\"number\"\n      [min]=\"minYear\"\n      [max]=\"maxYear\"\n      [(ngModel)]=\"_offsetYear\"\n      (keydown)=\"onYearInputKeydown($event)\"\n      (ngModelChange)=\"selectYear($event)\"\n    />\n  </header>\n  <main>\n    <ul class=\"daysOfWeek\">\n      @for (d of daysOfWeek; track d) {\n        <li>{{ d }}</li>\n      }\n    </ul>\n    <ul class=\"days\" tabindex=\"0\" (keydown)=\"handleKeyboardEvent($event)\">\n      @for (d of calendarDays; track d; let i = $index) {\n        <li\n          [attr.data-day]=\"d.id\"\n          (click)=\"selectByIndex(i, true)\"\n          [ngClass]=\"{\n            disabled: d.disabled,\n            inactive: d.inactive,\n            focused: i === focusedIndex,\n            selected: i === selectedIndex\n          }\"\n        >\n          {{ d.day }}\n        </li>\n      }\n    </ul>\n  </main>\n</section>\n@if (withTime()) {\n  <section class=\"time\">\n    <label>\n      {{ 'yuv.calendar.time.label' | translate }}\n      <yuv-time-input [(ngModel)]=\"time\" [hour12]=\"hour12()\" [dayPeriodLabels]=\"dayPeriodLabels\" (ngModelChange)=\"onTimeChange($event)\"> </yuv-time-input>\n    </label>\n  </section>\n}\n", styles: [":host{--_calendar-item-size: var(--calendar-item-size, 3em);--_calendar-item-border-size: var(--calendar-item-border-size, 2px);display:inline-flex;flex-flow:column}:host section.date{max-width:calc(var(--_calendar-item-size) * 11)}:host section.date header{border-block-end:1px solid var(--ymt-outline-variant)}:host section.time{display:flex;align-items:center;border-block-start:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host section.time label{display:flex;width:100%;flex-flow:column;align-items:center}:host section.time yuv-time-input{margin-block-start:var(--ymt-spacing-m)}:host *:focus:not(:focus-visible){outline:none}:host header{display:flex;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s)}:host header mat-select,:host header input.year-picker{border:1px solid transparent;border-radius:var(--ymt-corner-xs)}:host header mat-select:focus,:host header input.year-picker:focus{border-color:var(--ymt-primary)}:host header mat-select{padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs)}:host header input.year-picker{background-color:transparent;text-align:end;font-size:2.5em;width:5ch;color:var(--ymt-text-color-subtle);-moz-appearance:textfield}:host header input.year-picker::-webkit-outer-spin-button,:host header input.year-picker::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host main{padding:0}:host main ul li.focused:before{outline:var(--_calendar-item-border-size) solid var(--ymt-text-color-subtle);outline-offset:2px}:host ul{list-style:none;display:flex;flex-wrap:wrap;text-align:center;padding:0;min-width:calc(var(--_calendar-item-size) * 7 + .5em)}:host ul.daysOfWeek li{font-weight:700;color:var(--ymt-text-color-subtle)}:host ul.days li:before{display:block;position:absolute;content:\"\";width:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);height:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);border-radius:var(--ymt-corner-full);top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}:host ul.days li{position:relative;min-width:var(--_calendar-item-size);z-index:1;line-height:1em;cursor:pointer;color:var(--ymt-text-color);height:var(--_calendar-item-size);display:flex;flex-flow:column;align-items:center;justify-content:center}:host ul.days li.focused{color:var(--ymt-on-focus-background)}:host ul.days li.focused:before{background-color:var(--ymt-focus-background)}:host ul.days li.inactive:not(.disabled){opacity:.5}:host ul.days li.disabled{opacity:.5;cursor:default}:host ul.days li.selected{color:var(--ymt-on-selection-background)}:host ul.days li.selected:before{background-color:var(--ymt-selection-background);outline-color:var(--ymt-selection-background);opacity:1}:host ul.days li:not(.selected,.disabled).focused:before,:host ul.days li:not(.selected,.disabled):hover:before{opacity:1}:host ul li{position:relative;width:14.2857142857%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TimeInputComponent, selector: "yuv-time-input", inputs: ["hour12", "dayPeriodLabels"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-calendar', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, MatSelectModule, TimeInputComponent], providers: [DatepickerService], template: "<section class=\"date\">\n  <header>\n    <div class=\"month-picker\">\n      <mat-select [panelWidth]=\"null\" [(ngModel)]=\"month\" (ngModelChange)=\"selectMonthOfYear($event)\">\n        <mat-select-trigger> {{ month !== undefined ? months[month].label : '' }} &nbsp; </mat-select-trigger>\n        @for (m of months; track $index) {\n          <mat-option [value]=\"m.value\">{{ m.label }}</mat-option>\n        }\n      </mat-select>\n    </div>\n\n    <input\n      class=\"year-picker\"\n      name=\"year\"\n      type=\"number\"\n      [min]=\"minYear\"\n      [max]=\"maxYear\"\n      [(ngModel)]=\"_offsetYear\"\n      (keydown)=\"onYearInputKeydown($event)\"\n      (ngModelChange)=\"selectYear($event)\"\n    />\n  </header>\n  <main>\n    <ul class=\"daysOfWeek\">\n      @for (d of daysOfWeek; track d) {\n        <li>{{ d }}</li>\n      }\n    </ul>\n    <ul class=\"days\" tabindex=\"0\" (keydown)=\"handleKeyboardEvent($event)\">\n      @for (d of calendarDays; track d; let i = $index) {\n        <li\n          [attr.data-day]=\"d.id\"\n          (click)=\"selectByIndex(i, true)\"\n          [ngClass]=\"{\n            disabled: d.disabled,\n            inactive: d.inactive,\n            focused: i === focusedIndex,\n            selected: i === selectedIndex\n          }\"\n        >\n          {{ d.day }}\n        </li>\n      }\n    </ul>\n  </main>\n</section>\n@if (withTime()) {\n  <section class=\"time\">\n    <label>\n      {{ 'yuv.calendar.time.label' | translate }}\n      <yuv-time-input [(ngModel)]=\"time\" [hour12]=\"hour12()\" [dayPeriodLabels]=\"dayPeriodLabels\" (ngModelChange)=\"onTimeChange($event)\"> </yuv-time-input>\n    </label>\n  </section>\n}\n", styles: [":host{--_calendar-item-size: var(--calendar-item-size, 3em);--_calendar-item-border-size: var(--calendar-item-border-size, 2px);display:inline-flex;flex-flow:column}:host section.date{max-width:calc(var(--_calendar-item-size) * 11)}:host section.date header{border-block-end:1px solid var(--ymt-outline-variant)}:host section.time{display:flex;align-items:center;border-block-start:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host section.time label{display:flex;width:100%;flex-flow:column;align-items:center}:host section.time yuv-time-input{margin-block-start:var(--ymt-spacing-m)}:host *:focus:not(:focus-visible){outline:none}:host header{display:flex;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s)}:host header mat-select,:host header input.year-picker{border:1px solid transparent;border-radius:var(--ymt-corner-xs)}:host header mat-select:focus,:host header input.year-picker:focus{border-color:var(--ymt-primary)}:host header mat-select{padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs)}:host header input.year-picker{background-color:transparent;text-align:end;font-size:2.5em;width:5ch;color:var(--ymt-text-color-subtle);-moz-appearance:textfield}:host header input.year-picker::-webkit-outer-spin-button,:host header input.year-picker::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host main{padding:0}:host main ul li.focused:before{outline:var(--_calendar-item-border-size) solid var(--ymt-text-color-subtle);outline-offset:2px}:host ul{list-style:none;display:flex;flex-wrap:wrap;text-align:center;padding:0;min-width:calc(var(--_calendar-item-size) * 7 + .5em)}:host ul.daysOfWeek li{font-weight:700;color:var(--ymt-text-color-subtle)}:host ul.days li:before{display:block;position:absolute;content:\"\";width:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);height:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);border-radius:var(--ymt-corner-full);top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}:host ul.days li{position:relative;min-width:var(--_calendar-item-size);z-index:1;line-height:1em;cursor:pointer;color:var(--ymt-text-color);height:var(--_calendar-item-size);display:flex;flex-flow:column;align-items:center;justify-content:center}:host ul.days li.focused{color:var(--ymt-on-focus-background)}:host ul.days li.focused:before{background-color:var(--ymt-focus-background)}:host ul.days li.inactive:not(.disabled){opacity:.5}:host ul.days li.disabled{opacity:.5;cursor:default}:host ul.days li.selected{color:var(--ymt-on-selection-background)}:host ul.days li.selected:before{background-color:var(--ymt-selection-background);outline-color:var(--ymt-selection-background);opacity:1}:host ul.days li:not(.selected,.disabled).focused:before,:host ul.days li:not(.selected,.disabled):hover:before{opacity:1}:host ul li{position:relative;width:14.2857142857%}\n"] }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  *
@@ -1074,7 +1077,7 @@ class DateInputComponent {
         this.fb = fb;
         this.elRef = elRef;
         this._subs = [];
-        this._date = null;
+        this.date = null;
         this._disabled = false;
         this.invalid = signal(false);
         this._refreshPlaceholder = true;
@@ -1090,7 +1093,7 @@ class DateInputComponent {
         };
     }
     _setupForm() {
-        const dateTokens = this._getPatch(this._date);
+        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)]],
@@ -1145,8 +1148,8 @@ class DateInputComponent {
     }
     _checkAndPropagateForm() {
         if (this.dateInputForm?.status === 'VALID') {
-            this._date = this._formToDate(this.dateInputForm);
-            this.datepickerService.setValue(this._date);
+            this.date = this._formToDate(this.dateInputForm);
+            this.datepickerService.setValue(this.date);
         }
     }
     _formToDate(g) {
@@ -1256,7 +1259,7 @@ class DateInputComponent {
         this.datepickerService.setValue(null);
     }
     getFormattedValue() {
-        return this._date ? Intl.DateTimeFormat(this._locale, this._intlOptions).format(this._date) : null;
+        return this.date ? Intl.DateTimeFormat(this._locale, this._intlOptions).format(this.date) : null;
     }
     onInputNext() {
         this._focusInput(1);
@@ -1271,7 +1274,7 @@ class DateInputComponent {
     _init(skipFormSetup = false) {
         this._setPlaceholder();
         this._intlOptions = this.datepickerService.getIntlOptions(this.withTime, this.hour12);
-        const d = this._date || new Date();
+        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';
@@ -1296,7 +1299,7 @@ class DateInputComponent {
         }));
         this._subs.push(this.datepickerService.valueChange$.subscribe({
             next: (vc) => {
-                this._date = vc.value;
+                this.date = vc.value;
                 this.dateAttribute = this.getFormattedValue() || undefined;
                 this.dateInputForm.patchValue(this._getPatch(vc.value), {
                     emitEvent: false
@@ -1314,7 +1317,7 @@ class DateInputComponent {
         this._subs.forEach((s) => s.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", 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.15", type: DateInputComponent, isStandalone: true, selector: "yuv-date-input", inputs: { disabled: "disabled", placeholder: "placeholder", withTime: "withTime", hour12: "hour12" }, host: { properties: { "class.invalid": "invalid()", "class.has-value": "this._date", "attr.data-datevalue": "this.dateAttribute" } }, viewQueries: [{ propertyName: "dateInputEls", predicate: DateInputElementComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "@if (dateInputForm) {\n  <form [formGroup]=\"dateInputForm!\" \n  (click)=\"onFormClick($event)\" (yuvFocusWithinBlur)=\"onDateInputBlur()\">\n    @for (t of dateTokens; track t) {\n      @switch (t.type) {\n        <!-- day -->\n        @case ('day') {\n          <yuv-date-input-element\n            placeholder=\"31\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"day\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            [minValue]=\"1\"\n            [maxValue]=\"31\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- month -->\n        @case ('month') {\n          <yuv-date-input-element\n            placeholder=\"12\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"month\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            [minValue]=\"1\"\n            [maxValue]=\"12\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- year -->\n        @case ('year') {\n          <yuv-date-input-element\n            placeholder=\"2000\"\n            class=\"year\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"year\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"4\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- hours -->\n        @case ('hour') {\n          <yuv-date-input-hour-element\n            placeholder=\"10\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            [(dayPeriod)]=\"currentDayPeriod\"\n            formControlName=\"hour\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-hour-element>\n        }\n        <!-- minutes -->\n        @case ('minute') {\n          <yuv-date-input-element\n            placeholder=\"00\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            [minValue]=\"0\"\n            [maxValue]=\"59\"\n            formControlName=\"minute\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        @case ('literal') {\n          <input type=\"text\" class=\"literal\" [value]=\"t.value\" readonly inert />\n        }\n        @case ('dayPeriod') {\n          <button type=\"button\" class=\"dayPeriod\" [disabled]=\"dateInputForm.disabled\" (click)=\"toggleDayPeriod()\">\n            {{ dayPeriodLabels[currentDayPeriod!] }}\n          </button>\n        }\n      }\n    }\n  </form>\n}\n", styles: [":host{--placeholder-color: rgb(from var(--ymt-text-color) r g b / .2);--period-button-color: var(--ymt-text-color);--period-button-border-color: var(--ymt-outline);--period-button-background-color: transparent;display:flex;position:relative;outline:0;align-items:center;overflow-x:auto;scrollbar-width:none;transition:opacity .2s ease-in-out}:host yuv-date-input-hour-element,:host yuv-date-input-element{border:0;border-block-end:1px solid transparent;box-sizing:border-box}:host input.literal{width:1ch;text-align:center;padding:0;border:0;background-color:transparent;border-block-end:1px solid transparent}:host:not(:focus-within):not(.has-value):not(.invalid){--period-button-color: var(--placeholder-color);--period-button-border-color: var(--placeholder-color);--period-button-background-color: transparent}:host:not(:focus-within):not(.has-value):not(.invalid) input.literal{color:var(--placeholder-color)}:host:not(:focus-within):not(:hover):not(.has-value):not(.invalid){opacity:0}:host form{flex:1 1 auto;cursor:text;transition:opacity .2s ease-in-out;display:flex;opacity:1;align-items:flex-end;gap:.1em}:host form button.dayPeriod{color:var(--period-button-color);background-color:var(--period-button-background-color);border:1px solid var(--period-button-border-color);font-family:monospace;padding:0 .25em;border-radius:var(--ymt-corner-xs)}:host form button.dayPeriod:hover{background-color:var(--ymt-hover-background);color:var(--ymt-on-hover-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DateInputHourElementComponent, selector: "yuv-date-input-hour-element", inputs: ["dayPeriod"], outputs: ["dayPeriodChange"] }, { kind: "component", type: DateInputElementComponent, selector: "yuv-date-input-element", inputs: ["maxLength", "maxValue", "minValue", "disabled", "placeholder"], outputs: ["next", "prev"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DateInputComponent, isStandalone: true, selector: "yuv-date-input", inputs: { disabled: "disabled", placeholder: "placeholder", withTime: "withTime", hour12: "hour12" }, host: { properties: { "class.invalid": "invalid()", "class.has-value": "this.date", "attr.data-datevalue": "this.dateAttribute" } }, viewQueries: [{ propertyName: "dateInputEls", predicate: DateInputElementComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "@if (dateInputForm) {\n  <form [formGroup]=\"dateInputForm!\" \n  (click)=\"onFormClick($event)\" (yuvFocusWithinBlur)=\"onDateInputBlur()\">\n    @for (t of dateTokens; track t) {\n      @switch (t.type) {\n        <!-- day -->\n        @case ('day') {\n          <yuv-date-input-element\n            placeholder=\"31\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"day\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            [minValue]=\"1\"\n            [maxValue]=\"31\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- month -->\n        @case ('month') {\n          <yuv-date-input-element\n            placeholder=\"12\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"month\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            [minValue]=\"1\"\n            [maxValue]=\"12\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- year -->\n        @case ('year') {\n          <yuv-date-input-element\n            placeholder=\"2000\"\n            class=\"year\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            formControlName=\"year\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"4\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        <!-- hours -->\n        @case ('hour') {\n          <yuv-date-input-hour-element\n            placeholder=\"10\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            [(dayPeriod)]=\"currentDayPeriod\"\n            formControlName=\"hour\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-hour-element>\n        }\n        <!-- minutes -->\n        @case ('minute') {\n          <yuv-date-input-element\n            placeholder=\"00\"\n            [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n            [attr.aria-disabled]=\"dateInputForm.disabled\"\n            [minValue]=\"0\"\n            [maxValue]=\"59\"\n            formControlName=\"minute\"\n            [disabled]=\"disabled\"\n            [maxLength]=\"2\"\n            (prev)=\"onInputPrev()\"\n            (next)=\"onInputNext()\"\n          ></yuv-date-input-element>\n        }\n        @case ('literal') {\n          <input type=\"text\" class=\"literal\" [value]=\"t.value\" readonly inert />\n        }\n        @case ('dayPeriod') {\n          <button type=\"button\" class=\"dayPeriod\" [disabled]=\"dateInputForm.disabled\" (click)=\"toggleDayPeriod()\">\n            {{ dayPeriodLabels[currentDayPeriod!] }}\n          </button>\n        }\n      }\n    }\n  </form>\n}\n", styles: [":host{--placeholder-color: rgb(from var(--ymt-text-color) r g b / .2);--period-button-color: var(--ymt-text-color);--period-button-border-color: var(--ymt-outline);--period-button-background-color: transparent;display:flex;position:relative;outline:0;align-items:center;overflow-x:auto;scrollbar-width:none;transition:opacity .2s ease-in-out}:host yuv-date-input-hour-element,:host yuv-date-input-element{border:0;border-block-end:1px solid transparent;box-sizing:border-box}:host input.literal{width:1ch;text-align:center;padding:0;border:0;background-color:transparent;border-block-end:1px solid transparent}:host:not(:focus-within):not(.has-value):not(.invalid){--period-button-color: var(--placeholder-color);--period-button-border-color: var(--placeholder-color);--period-button-background-color: transparent}:host:not(:focus-within):not(.has-value):not(.invalid) input.literal{color:var(--placeholder-color)}:host:not(:focus-within):not(:hover):not(.has-value):not(.invalid){opacity:0}:host form{flex:1 1 auto;cursor:text;transition:opacity .2s ease-in-out;display:flex;opacity:1;align-items:flex-end;gap:.1em}:host form button.dayPeriod{color:var(--period-button-color);background-color:var(--period-button-background-color);border:1px solid var(--period-button-border-color);font-family:monospace;padding:0 .25em;border-radius:var(--ymt-corner-xs)}:host form button.dayPeriod:hover{background-color:var(--ymt-hover-background);color:var(--ymt-on-hover-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DateInputHourElementComponent, selector: "yuv-date-input-hour-element", inputs: ["dayPeriod"], outputs: ["dayPeriodChange"] }, { kind: "component", type: DateInputElementComponent, selector: "yuv-date-input-element", inputs: ["maxLength", "maxValue", "minValue", "disabled", "placeholder"], outputs: ["next", "prev"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
@@ -1324,7 +1327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }], ctorParameters: () => [{ type: DatepickerService }, { type: i1.FormBuilder }, { type: i0.ElementRef }], propDecorators: { dateInputEls: [{
                 type: ViewChildren,
                 args: [DateInputElementComponent, { read: ElementRef }]
-            }], _date: [{
+            }], date: [{
                 type: HostBinding,
                 args: ['class.has-value']
             }], dateAttribute: [{