@yuuvis/client-framework 2.0.11 → 2.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/fesm2022/yuuvis-client-framework-autocomplete.mjs +2 -2
  2. package/fesm2022/yuuvis-client-framework-autocomplete.mjs.map +1 -1
  3. package/fesm2022/yuuvis-client-framework-common.mjs +3 -5
  4. package/fesm2022/yuuvis-client-framework-common.mjs.map +1 -1
  5. package/fesm2022/yuuvis-client-framework-datepicker.mjs +4 -4
  6. package/fesm2022/yuuvis-client-framework-datepicker.mjs.map +1 -1
  7. package/fesm2022/yuuvis-client-framework-forms.mjs +103 -55
  8. package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
  9. package/fesm2022/yuuvis-client-framework-icons.mjs +1 -0
  10. package/fesm2022/yuuvis-client-framework-icons.mjs.map +1 -1
  11. package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs +1 -1
  12. package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs.map +1 -1
  13. package/fesm2022/yuuvis-client-framework-object-form.mjs +1 -1
  14. package/fesm2022/yuuvis-client-framework-object-form.mjs.map +1 -1
  15. package/fesm2022/yuuvis-client-framework-pagination.mjs +3 -0
  16. package/fesm2022/yuuvis-client-framework-pagination.mjs.map +1 -1
  17. package/fesm2022/yuuvis-client-framework-widget-grid.mjs +924 -0
  18. package/fesm2022/yuuvis-client-framework-widget-grid.mjs.map +1 -0
  19. package/forms/lib/elements/number-range/number-range.component.d.ts +2 -1
  20. package/icons/lib/icon.service.d.ts +1 -0
  21. package/lib/assets/i18n/de.json +22 -3
  22. package/lib/assets/i18n/en.json +24 -5
  23. package/package.json +10 -5
  24. package/pagination/lib/pagination.component.d.ts +3 -0
  25. package/widget-grid/README.md +48 -0
  26. package/widget-grid/index.d.ts +7 -0
  27. package/widget-grid/lib/widget-grid-event.service.d.ts +10 -0
  28. package/widget-grid/lib/widget-grid-registry.service.d.ts +80 -0
  29. package/widget-grid/lib/widget-grid-workspaces/widget-grid-workspaces.component.d.ts +51 -0
  30. package/widget-grid/lib/widget-grid-workspaces/widget-grid-workspaces.interface.d.ts +16 -0
  31. package/widget-grid/lib/widget-grid-workspaces/workspace-edit/workspace-edit.component.d.ts +10 -0
  32. package/widget-grid/lib/widget-grid.component.d.ts +51 -0
  33. package/widget-grid/lib/widget-grid.interface.d.ts +50 -0
  34. package/widget-grid/lib/widget-grid.module.d.ts +8 -0
  35. package/widget-grid/lib/widget-grid.service.d.ts +45 -0
  36. package/widget-grid/lib/widget-grid.utils.d.ts +18 -0
  37. package/widget-grid/lib/widget-picker/widget-picker.component.d.ts +38 -0
  38. package/widget-grid/lib/widgets/noop/noop.component.d.ts +7 -0
@@ -1314,11 +1314,11 @@ class DateInputComponent {
1314
1314
  this._subs.forEach((s) => s.unsubscribe());
1315
1315
  }
1316
1316
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DateInputComponent, deps: [{ token: DatepickerService }, { token: i1.FormBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
1317
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", 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"] }] }); }
1317
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", 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:flex;position:relative;outline:0;align-items:center;overflow-x:auto;scrollbar-width:none}: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;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{position:absolute;font-size:var(--_datepicker-font-size);width:100%;padding:0;line-height:1em;border:0;background-color:transparent;transition:opacity .2s ease-in-out}:host form{flex:1 1 auto;transition:opacity .2s ease-in-out;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"] }] }); }
1318
1318
  }
1319
1319
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DateInputComponent, decorators: [{
1320
1320
  type: Component,
1321
- 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"] }]
1321
+ 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:flex;position:relative;outline:0;align-items:center;overflow-x:auto;scrollbar-width:none}: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;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{position:absolute;font-size:var(--_datepicker-font-size);width:100%;padding:0;line-height:1em;border:0;background-color:transparent;transition:opacity .2s ease-in-out}:host form{flex:1 1 auto;transition:opacity .2s ease-in-out;display:flex;opacity:0;align-items:flex-end;gap:.1em}:host form button.dayPeriod{font-family:monospace;padding:0}\n"] }]
1322
1322
  }], ctorParameters: () => [{ type: DatepickerService }, { type: i1.FormBuilder }, { type: i0.ElementRef }], propDecorators: { dateInputEls: [{
1323
1323
  type: ViewChildren,
1324
1324
  args: [DateInputElementComponent, { read: ElementRef }]
@@ -1596,7 +1596,7 @@ class DatepickerComponent {
1596
1596
  useExisting: forwardRef(() => DatepickerComponent),
1597
1597
  multi: true
1598
1598
  }
1599
- ], 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 }] }); }
1599
+ ], 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));display:flex;font-size:var(--_datepicker-font-size);padding:.25em;overflow:hidden}: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 }] }); }
1600
1600
  }
1601
1601
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DatepickerComponent, decorators: [{
1602
1602
  type: Component,
@@ -1614,7 +1614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
1614
1614
  }
1615
1615
  ], host: {
1616
1616
  'class.all-selected': 'allSelected()'
1617
- }, 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"] }]
1617
+ }, 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));display:flex;font-size:var(--_datepicker-font-size);padding:.25em;overflow:hidden}: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"] }]
1618
1618
  }], propDecorators: { dateInputCmp: [{
1619
1619
  type: ViewChild,
1620
1620
  args: [DateInputComponent]