@yuuvis/client-framework 2.5.2 → 2.6.0
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.
- package/actions/lib/components/contextmenu/contextmenu.component.d.ts +2 -0
- package/common/index.d.ts +1 -0
- package/common/lib/components/halo-focus/halo-focus.component.d.ts +5 -0
- package/datepicker/lib/calendar/calendar.component.d.ts +1 -2
- package/fesm2022/yuuvis-client-framework-actions.mjs +6 -4
- package/fesm2022/yuuvis-client-framework-actions.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-autocomplete.mjs +3 -2
- package/fesm2022/yuuvis-client-framework-autocomplete.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-common.mjs +10 -1
- package/fesm2022/yuuvis-client-framework-common.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-datepicker.mjs +10 -19
- package/fesm2022/yuuvis-client-framework-datepicker.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-forms.mjs +33 -15
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-list.mjs +12 -0
- package/fesm2022/yuuvis-client-framework-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs +1 -1
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs +198 -198
- package/fesm2022/yuuvis-client-framework-object-relationship.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-simple-search.mjs +92 -58
- package/fesm2022/yuuvis-client-framework-simple-search.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-split-view.mjs +55 -4
- package/fesm2022/yuuvis-client-framework-split-view.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +4 -4
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework.mjs +231 -2
- package/fesm2022/yuuvis-client-framework.mjs.map +1 -1
- package/forms/lib/elements/datetime/datetime.component.d.ts +1 -0
- package/index.d.ts +2 -2
- package/lib/providers/halo-focus/provide-halo-focus.d.ts +10 -0
- package/lib/providers/index.d.ts +1 -0
- package/lib/services/halo-focus/halo-focus.service.d.ts +7 -0
- package/lib/services/index.d.ts +3 -0
- package/list/lib/list-item.directive.d.ts +7 -1
- package/package.json +9 -9
- package/simple-search/lib/models/index.d.ts +1 -0
- package/simple-search/lib/models/object-type-aggregation.model.d.ts +14 -0
- package/simple-search/lib/simple-search/simple-search.component.d.ts +13 -23
- package/split-view/lib/split-area-cover.directive.d.ts +15 -0
|
@@ -412,7 +412,7 @@ class DateInputElementComponent {
|
|
|
412
412
|
useExisting: forwardRef(() => DateInputElementComponent),
|
|
413
413
|
multi: true
|
|
414
414
|
}
|
|
415
|
-
], ngImport: i0, template: "<input\n[placeholder]=\"placeholder()\"\n type=\"text\"\n (focus)=\"focusHandler($event)\"\n (keydown)=\"keydownHandler($event)\"\n (wheel)=\"wheelHandler($event)\"\n (blur)=\"onBlur()\"\n [readonly]=\"disabled\"\n pattern=\"[0-9]*\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"_value\"\n (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
|
|
415
|
+
], ngImport: i0, template: "<input\n[placeholder]=\"placeholder()\"\n type=\"text\"\n (focus)=\"focusHandler($event)\"\n (keydown)=\"keydownHandler($event)\"\n (wheel)=\"wheelHandler($event)\"\n (blur)=\"onBlur()\"\n [readonly]=\"disabled\"\n pattern=\"[0-9]*\"\n [disabled]=\"disabled\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"_value\"\n (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
|
|
416
416
|
}
|
|
417
417
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateInputElementComponent, decorators: [{
|
|
418
418
|
type: Component,
|
|
@@ -427,7 +427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
427
427
|
useExisting: forwardRef(() => DateInputElementComponent),
|
|
428
428
|
multi: true
|
|
429
429
|
}
|
|
430
|
-
], template: "<input\n[placeholder]=\"placeholder()\"\n type=\"text\"\n (focus)=\"focusHandler($event)\"\n (keydown)=\"keydownHandler($event)\"\n (wheel)=\"wheelHandler($event)\"\n (blur)=\"onBlur()\"\n [readonly]=\"disabled\"\n pattern=\"[0-9]*\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"_value\"\n (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"] }]
|
|
430
|
+
], template: "<input\n[placeholder]=\"placeholder()\"\n type=\"text\"\n (focus)=\"focusHandler($event)\"\n (keydown)=\"keydownHandler($event)\"\n (wheel)=\"wheelHandler($event)\"\n (blur)=\"onBlur()\"\n [readonly]=\"disabled\"\n pattern=\"[0-9]*\"\n [disabled]=\"disabled\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"_value\"\n (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"] }]
|
|
431
431
|
}], propDecorators: { pasteHandler: [{
|
|
432
432
|
type: HostListener,
|
|
433
433
|
args: ['paste', ['$event']]
|
|
@@ -480,7 +480,7 @@ class DateInputHourElementComponent extends DateInputElementComponent {
|
|
|
480
480
|
useExisting: forwardRef(() => DateInputHourElementComponent),
|
|
481
481
|
multi: true
|
|
482
482
|
}
|
|
483
|
-
], usesInheritance: true, ngImport: i0, template: "<input\n[placeholder]=\"placeholder()\"\n type=\"text\"\n (focus)=\"focusHandler($event)\"\n (keydown)=\"keydownHandler($event)\"\n (wheel)=\"wheelHandler($event)\"\n (blur)=\"onBlur()\"\n [readonly]=\"disabled\"\n pattern=\"[0-9]*\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"_value\"\n (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
483
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n[placeholder]=\"placeholder()\"\n type=\"text\"\n (focus)=\"focusHandler($event)\"\n (keydown)=\"keydownHandler($event)\"\n (wheel)=\"wheelHandler($event)\"\n (blur)=\"onBlur()\"\n [readonly]=\"disabled\"\n pattern=\"[0-9]*\"\n [disabled]=\"disabled\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"_value\"\n (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
484
484
|
}
|
|
485
485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateInputHourElementComponent, decorators: [{
|
|
486
486
|
type: Component,
|
|
@@ -495,7 +495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
495
495
|
useExisting: forwardRef(() => DateInputHourElementComponent),
|
|
496
496
|
multi: true
|
|
497
497
|
}
|
|
498
|
-
], template: "<input\n[placeholder]=\"placeholder()\"\n type=\"text\"\n (focus)=\"focusHandler($event)\"\n (keydown)=\"keydownHandler($event)\"\n (wheel)=\"wheelHandler($event)\"\n (blur)=\"onBlur()\"\n [readonly]=\"disabled\"\n pattern=\"[0-9]*\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"_value\"\n (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"] }]
|
|
498
|
+
], template: "<input\n[placeholder]=\"placeholder()\"\n type=\"text\"\n (focus)=\"focusHandler($event)\"\n (keydown)=\"keydownHandler($event)\"\n (wheel)=\"wheelHandler($event)\"\n (blur)=\"onBlur()\"\n [readonly]=\"disabled\"\n pattern=\"[0-9]*\"\n [disabled]=\"disabled\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"_value\"\n (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host.time input{font:var(--ymt-font-headline-large-font);font-size:var(--ymt-font-headline-large-size)}:host input{font:var(--ymt-font-body-font);font-size:var(--ymt-font-body-size);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input.ng-invalid{color:var(--ymt-danger)}:host input::placeholder{font:var(--ymt-font-body-font);color:var(--placeholder-color)}\n"] }]
|
|
499
499
|
}], ctorParameters: () => [], propDecorators: { dayPeriod: [{
|
|
500
500
|
type: Input
|
|
501
501
|
}], dayPeriodChange: [{
|
|
@@ -642,10 +642,6 @@ class CalendarComponent {
|
|
|
642
642
|
#dateEffect;
|
|
643
643
|
#localeEffect;
|
|
644
644
|
#withTimeEffect;
|
|
645
|
-
keyDownHandler(event) {
|
|
646
|
-
if (event.target.nodeName === "YUV-CALENDAR")
|
|
647
|
-
this._handleKeyboardEvent(event);
|
|
648
|
-
}
|
|
649
645
|
constructor() {
|
|
650
646
|
this.datepickerService = inject(DatepickerService);
|
|
651
647
|
this.calEl = viewChild.required('cal');
|
|
@@ -910,7 +906,7 @@ class CalendarComponent {
|
|
|
910
906
|
const d = new Date(year, month, day);
|
|
911
907
|
return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
|
|
912
908
|
}
|
|
913
|
-
|
|
909
|
+
handleKeyboardEvent(event) {
|
|
914
910
|
switch (event.code) {
|
|
915
911
|
case 'PageDown': {
|
|
916
912
|
// go to previous month
|
|
@@ -1027,17 +1023,12 @@ class CalendarComponent {
|
|
|
1027
1023
|
this._initialized = true;
|
|
1028
1024
|
}
|
|
1029
1025
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1030
|
-
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" },
|
|
1026
|
+
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 : '' }} </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"] }] }); }
|
|
1031
1027
|
}
|
|
1032
1028
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
1033
1029
|
type: Component,
|
|
1034
|
-
args: [{ selector: 'yuv-calendar', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, MatSelectModule, TimeInputComponent], providers: [DatepickerService], host: {
|
|
1035
|
-
|
|
1036
|
-
}, 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 : '' }} \n </mat-select-trigger>\n @for (m of months; track $index) {\n <mat-option [value]=\"m.value\">{{ m.label }}</mat-option>\n }\n </mat-select>\n </div>\n\n <input\n class=\"year-picker\"\n name=\"year\"\n type=\"number\"\n [min]=\"minYear\"\n [max]=\"maxYear\"\n [(ngModel)]=\"_offsetYear\"\n (keydown)=\"onYearInputKeydown($event)\"\n (ngModelChange)=\"selectYear($event)\"\n />\n </header>\n <main>\n <ul class=\"daysOfWeek\">\n @for (d of daysOfWeek; track d) {\n <li>{{ d }}</li>\n }\n </ul>\n <ul class=\"days\">\n @for (d of calendarDays; track d; let i = $index) {\n <li\n [attr.data-day]=\"d.id\"\n (click)=\"selectByIndex(i, true)\"\n [ngClass]=\"{\n disabled: d.disabled,\n inactive: d.inactive,\n focused: i === focusedIndex,\n selected: i === selectedIndex\n }\"\n >\n {{ d.day }}\n </li>\n }\n </ul>\n </main>\n</section>\n@if (withTime()) {\n <section class=\"time\">\n <label>{{'yuv.calendar.time.label' | translate}}\n <yuv-time-input [(ngModel)]=\"time\" [hour12]=\"hour12()\" \n [dayPeriodLabels]=\"dayPeriodLabels\" (ngModelChange)=\"onTimeChange($event)\"></yuv-time-input>\n </label>\n </section>\n}\n", styles: [":host{--_calendar-item-size: var(--calendar-item-size, 3em);--_calendar-item-border-size: var(--calendar-item-border-size, 2px);display:inline-flex;flex-flow:column}:host section.date{max-width:calc(var(--_calendar-item-size) * 11)}:host section.date header{border-block-end:1px solid var(--ymt-outline-variant)}:host section.time{display:flex;align-items:center;border-block-start:1px solid var(--ymt-outline-variant);padding:var(--ymt-spacing-m)}:host section.time label{display:flex;width:100%;flex-flow:column;align-items:center}:host section.time yuv-time-input{margin-block-start:var(--ymt-spacing-m)}:host *:focus:not(:focus-visible){outline:none}:host header{display:flex;align-items:center;justify-content:space-between;padding:var(--ymt-spacing-s)}:host header mat-select,:host header input.year-picker{border:1px solid transparent;border-radius:var(--ymt-corner-xs)}:host header mat-select:focus,:host header input.year-picker:focus{border-color:var(--ymt-primary)}:host header mat-select{padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs)}:host header input.year-picker{background-color:transparent;text-align:end;font-size:2.5em;width:5ch;color:var(--ymt-text-color-subtle);-moz-appearance:textfield}:host header input.year-picker::-webkit-outer-spin-button,:host header input.year-picker::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host main{padding:0}:host main ul li.focused:before{outline:var(--_calendar-item-border-size) solid var(--ymt-text-color-subtle);outline-offset:2px}:host ul{list-style:none;display:flex;flex-wrap:wrap;text-align:center;padding:0;min-width:calc(var(--_calendar-item-size) * 7 + .5em)}:host ul.daysOfWeek li{font-weight:700;color:var(--ymt-text-color-subtle)}:host ul.days li:before{display:block;position:absolute;content:\"\";width:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);height:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);border-radius:var(--ymt-corner-full);top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}:host ul.days li{position:relative;min-width:var(--_calendar-item-size);z-index:1;line-height:1em;cursor:pointer;color:var(--ymt-text-color);height:var(--_calendar-item-size);display:flex;flex-flow:column;align-items:center;justify-content:center}:host ul.days li.focused{color:var(--ymt-on-focus-background)}:host ul.days li.focused:before{background-color:var(--ymt-focus-background)}:host ul.days li.inactive:not(.disabled){opacity:.5}:host ul.days li.disabled{opacity:.5;cursor:default}:host ul.days li.selected{color:var(--ymt-on-selection-background)}:host ul.days li.selected:before{background-color:var(--ymt-selection-background);outline-color:var(--ymt-selection-background);opacity:1}:host ul.days li:not(.selected,.disabled).focused:before,:host ul.days li:not(.selected,.disabled):hover:before{opacity:1}:host ul li{position:relative;width:14.2857142857%}\n"] }]
|
|
1037
|
-
}], ctorParameters: () => [], propDecorators: { keyDownHandler: [{
|
|
1038
|
-
type: HostListener,
|
|
1039
|
-
args: ['keydown', ['$event']]
|
|
1040
|
-
}] } });
|
|
1030
|
+
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 : '' }} </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"] }]
|
|
1031
|
+
}], ctorParameters: () => [] });
|
|
1041
1032
|
|
|
1042
1033
|
/**
|
|
1043
1034
|
*
|
|
@@ -1323,13 +1314,13 @@ class DateInputComponent {
|
|
|
1323
1314
|
this._subs.forEach((s) => s.unsubscribe());
|
|
1324
1315
|
}
|
|
1325
1316
|
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 }); }
|
|
1326
|
-
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 [maxLength]=\"2\"\n [minValue]=\"1\"\n [maxValue]=\"31\"\n (prev)=\"onInputPrev()\"\n (next)=\"onInputNext()\"\n ></yuv-date-input-element>\n }\n <!-- month -->\n @case ('month') {\n <yuv-date-input-element\n placeholder=\"12\"\n [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n [attr.aria-disabled]=\"dateInputForm.disabled\"\n formControlName=\"month\"\n [maxLength]=\"2\"\n [minValue]=\"1\"\n [maxValue]=\"12\"\n (prev)=\"onInputPrev()\"\n (next)=\"onInputNext()\"\n ></yuv-date-input-element>\n }\n <!-- year -->\n @case ('year') {\n <yuv-date-input-element\n placeholder=\"2000\"\n class=\"year\"\n [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n [attr.aria-disabled]=\"dateInputForm.disabled\"\n formControlName=\"year\"\n [maxLength]=\"4\"\n (prev)=\"onInputPrev()\"\n (next)=\"onInputNext()\"\n ></yuv-date-input-element>\n }\n <!-- hours -->\n @case ('hour') {\n <yuv-date-input-hour-element\n placeholder=\"10\"\n [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n [attr.aria-disabled]=\"dateInputForm.disabled\"\n [(dayPeriod)]=\"currentDayPeriod\"\n formControlName=\"hour\"\n [maxLength]=\"2\"\n (prev)=\"onInputPrev()\"\n (next)=\"onInputNext()\"\n ></yuv-date-input-hour-element>\n }\n <!-- minutes -->\n @case ('minute') {\n <yuv-date-input-element\n placeholder=\"00\"\n [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n [attr.aria-disabled]=\"dateInputForm.disabled\"\n [minValue]=\"0\"\n [maxValue]=\"59\"\n formControlName=\"minute\"\n [maxLength]=\"2\"\n (prev)=\"onInputPrev()\"\n (next)=\"onInputNext()\"\n ></yuv-date-input-element>\n }\n @case ('literal') {\n <input type=\"text\" class=\"literal\" [value]=\"t.value\" readonly inert />\n }\n @case ('dayPeriod') {\n <button type=\"button\" class=\"dayPeriod\" [disabled]=\"dateInputForm.disabled\" (click)=\"toggleDayPeriod()\">\n {{ dayPeriodLabels[currentDayPeriod!] }}\n </button>\n }\n }\n }\n </form>\n}\n", styles: [":host{--placeholder-color: rgb(from var(--ymt-text-color) r g b / .2);--period-button-color: var(--ymt-text-color);--period-button-border-color: var(--ymt-outline);--period-button-background-color: transparent;display:flex;position:relative;outline:0;align-items:center;overflow-x:auto;scrollbar-width:none;transition:opacity .2s ease-in-out}:host yuv-date-input-hour-element,:host yuv-date-input-element{border:0;border-block-end:1px solid transparent;box-sizing:border-box}:host input.literal{width:1ch;text-align:center;padding:0;border:0;background-color:transparent;border-block-end:1px solid transparent}:host:not(:focus-within):not(.has-value):not(.invalid){--period-button-color: var(--placeholder-color);--period-button-border-color: var(--placeholder-color);--period-button-background-color: transparent}:host:not(:focus-within):not(.has-value):not(.invalid) input.literal{color:var(--placeholder-color)}:host:not(:focus-within):not(:hover):not(.has-value):not(.invalid){opacity:0}:host form{flex:1 1 auto;cursor:text;transition:opacity .2s ease-in-out;display:flex;opacity:1;align-items:flex-end;gap:.1em}:host form button.dayPeriod{color:var(--period-button-color);background-color:var(--period-button-background-color);border:1px solid var(--period-button-border-color);font-family:monospace;padding:0 .25em;border-radius:var(--ymt-corner-xs)}:host form button.dayPeriod:hover{background-color:var(--ymt-hover-background);color:var(--ymt-on-hover-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DateInputHourElementComponent, selector: "yuv-date-input-hour-element", inputs: ["dayPeriod"], outputs: ["dayPeriodChange"] }, { kind: "component", type: DateInputElementComponent, selector: "yuv-date-input-element", inputs: ["maxLength", "maxValue", "minValue", "disabled", "placeholder"], outputs: ["next", "prev"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
1317
|
+
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"] }] }); }
|
|
1327
1318
|
}
|
|
1328
1319
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
1329
1320
|
type: Component,
|
|
1330
1321
|
args: [{ selector: 'yuv-date-input', standalone: true, imports: [CommonModule, DateInputHourElementComponent, DateInputElementComponent, ReactiveFormsModule], host: {
|
|
1331
1322
|
'[class.invalid]': 'invalid()'
|
|
1332
|
-
}, template: "@if (dateInputForm) {\n <form [formGroup]=\"dateInputForm!\" \n (click)=\"onFormClick($event)\" (yuvFocusWithinBlur)=\"onDateInputBlur()\">\n @for (t of dateTokens; track t) {\n @switch (t.type) {\n <!-- day -->\n @case ('day') {\n <yuv-date-input-element\n placeholder=\"31\"\n [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n [attr.aria-disabled]=\"dateInputForm.disabled\"\n formControlName=\"day\"\n [maxLength]=\"2\"\n [minValue]=\"1\"\n [maxValue]=\"31\"\n (prev)=\"onInputPrev()\"\n (next)=\"onInputNext()\"\n ></yuv-date-input-element>\n }\n <!-- month -->\n @case ('month') {\n <yuv-date-input-element\n placeholder=\"12\"\n [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n [attr.aria-disabled]=\"dateInputForm.disabled\"\n formControlName=\"month\"\n [maxLength]=\"2\"\n [minValue]=\"1\"\n [maxValue]=\"12\"\n (prev)=\"onInputPrev()\"\n (next)=\"onInputNext()\"\n ></yuv-date-input-element>\n }\n <!-- year -->\n @case ('year') {\n <yuv-date-input-element\n placeholder=\"2000\"\n class=\"year\"\n [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n [attr.aria-disabled]=\"dateInputForm.disabled\"\n formControlName=\"year\"\n [maxLength]=\"4\"\n (prev)=\"onInputPrev()\"\n (next)=\"onInputNext()\"\n ></yuv-date-input-element>\n }\n <!-- hours -->\n @case ('hour') {\n <yuv-date-input-hour-element\n placeholder=\"10\"\n [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n [attr.aria-disabled]=\"dateInputForm.disabled\"\n [(dayPeriod)]=\"currentDayPeriod\"\n formControlName=\"hour\"\n [maxLength]=\"2\"\n (prev)=\"onInputPrev()\"\n (next)=\"onInputNext()\"\n ></yuv-date-input-hour-element>\n }\n <!-- minutes -->\n @case ('minute') {\n <yuv-date-input-element\n placeholder=\"00\"\n [ngClass]=\"{ disabled: dateInputForm.disabled }\"\n [attr.aria-disabled]=\"dateInputForm.disabled\"\n [minValue]=\"0\"\n [maxValue]=\"59\"\n formControlName=\"minute\"\n [maxLength]=\"2\"\n (prev)=\"onInputPrev()\"\n (next)=\"onInputNext()\"\n ></yuv-date-input-element>\n }\n @case ('literal') {\n <input type=\"text\" class=\"literal\" [value]=\"t.value\" readonly inert />\n }\n @case ('dayPeriod') {\n <button type=\"button\" class=\"dayPeriod\" [disabled]=\"dateInputForm.disabled\" (click)=\"toggleDayPeriod()\">\n {{ dayPeriodLabels[currentDayPeriod!] }}\n </button>\n }\n }\n }\n </form>\n}\n", styles: [":host{--placeholder-color: rgb(from var(--ymt-text-color) r g b / .2);--period-button-color: var(--ymt-text-color);--period-button-border-color: var(--ymt-outline);--period-button-background-color: transparent;display:flex;position:relative;outline:0;align-items:center;overflow-x:auto;scrollbar-width:none;transition:opacity .2s ease-in-out}:host yuv-date-input-hour-element,:host yuv-date-input-element{border:0;border-block-end:1px solid transparent;box-sizing:border-box}:host input.literal{width:1ch;text-align:center;padding:0;border:0;background-color:transparent;border-block-end:1px solid transparent}:host:not(:focus-within):not(.has-value):not(.invalid){--period-button-color: var(--placeholder-color);--period-button-border-color: var(--placeholder-color);--period-button-background-color: transparent}:host:not(:focus-within):not(.has-value):not(.invalid) input.literal{color:var(--placeholder-color)}:host:not(:focus-within):not(:hover):not(.has-value):not(.invalid){opacity:0}:host form{flex:1 1 auto;cursor:text;transition:opacity .2s ease-in-out;display:flex;opacity:1;align-items:flex-end;gap:.1em}:host form button.dayPeriod{color:var(--period-button-color);background-color:var(--period-button-background-color);border:1px solid var(--period-button-border-color);font-family:monospace;padding:0 .25em;border-radius:var(--ymt-corner-xs)}:host form button.dayPeriod:hover{background-color:var(--ymt-hover-background);color:var(--ymt-on-hover-background)}\n"] }]
|
|
1323
|
+
}, 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"] }]
|
|
1333
1324
|
}], ctorParameters: () => [{ type: DatepickerService }, { type: i1.FormBuilder }, { type: i0.ElementRef }], propDecorators: { dateInputEls: [{
|
|
1334
1325
|
type: ViewChildren,
|
|
1335
1326
|
args: [DateInputElementComponent, { read: ElementRef }]
|