@yuuvis/client-framework 2.0.0-beta.9 → 2.0.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/fesm2022/yuuvis-client-framework-actions.mjs +16 -16
- package/fesm2022/yuuvis-client-framework-actions.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-app-bar.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-autocomplete.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-clipboard.mjs +6 -6
- package/fesm2022/yuuvis-client-framework-clipboard.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-common.mjs +66 -74
- package/fesm2022/yuuvis-client-framework-common.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-datepicker.mjs +33 -32
- package/fesm2022/yuuvis-client-framework-datepicker.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-forms.mjs +48 -48
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-icons.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-list.mjs +31 -27
- package/fesm2022/yuuvis-client-framework-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-master-details.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs +15 -15
- package/fesm2022/yuuvis-client-framework-object-details.mjs +26 -26
- package/fesm2022/yuuvis-client-framework-object-details.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs +24 -24
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-form.mjs +28 -28
- package/fesm2022/yuuvis-client-framework-object-preview.mjs +10 -10
- package/fesm2022/yuuvis-client-framework-object-preview.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-summary.mjs +23 -23
- package/fesm2022/yuuvis-client-framework-object-summary.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-overflow-menu.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-pagination.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-panel.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-popout.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-renderer.mjs +34 -34
- package/fesm2022/yuuvis-client-framework-renderer.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-sequence-list.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-simple-search.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-split-view.mjs +10 -10
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +49 -41
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tree.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-upload-progress.mjs +6 -6
- package/fesm2022/yuuvis-client-framework.mjs +4 -4
- package/package.json +4 -4
- package/tile-list/lib/tile-list/tile-list.component.d.ts +2 -0
|
@@ -15,6 +15,7 @@ import * as i1$1 from '@angular/material/dialog';
|
|
|
15
15
|
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
|
|
16
16
|
import * as i1$2 from '@yuuvis/client-framework/common';
|
|
17
17
|
import { FocusWithinDirective } from '@yuuvis/client-framework/common';
|
|
18
|
+
import { YmtButtonDirective } from '@yuuvis/material';
|
|
18
19
|
|
|
19
20
|
const DEFAULT_DAY_PERIOD_LABELS = {
|
|
20
21
|
am: 'AM',
|
|
@@ -249,10 +250,10 @@ class DatepickerService {
|
|
|
249
250
|
_validateValue() {
|
|
250
251
|
this._validationErrors = DatepickerUtils.validateValue(this._value, this._options);
|
|
251
252
|
}
|
|
252
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
253
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
253
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
254
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DatepickerService }); }
|
|
254
255
|
}
|
|
255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DatepickerService, decorators: [{
|
|
256
257
|
type: Injectable
|
|
257
258
|
}] });
|
|
258
259
|
|
|
@@ -394,8 +395,8 @@ class DateInputElementComponent {
|
|
|
394
395
|
validate(c) {
|
|
395
396
|
return !this._value || this._isValidInput(this._value) ? null : { dateInputElement: { valid: false } };
|
|
396
397
|
}
|
|
397
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
398
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
398
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DateInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
399
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.12", type: DateInputElementComponent, isStandalone: true, selector: "yuv-date-input-element", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { next: "next", prev: "prev" }, host: { listeners: { "paste": "pasteHandler($event)", "keydown": "keyDownHandler($event)" } }, providers: [
|
|
399
400
|
{
|
|
400
401
|
provide: NG_VALUE_ACCESSOR,
|
|
401
402
|
useExisting: forwardRef(() => DateInputElementComponent),
|
|
@@ -408,7 +409,7 @@ class DateInputElementComponent {
|
|
|
408
409
|
}
|
|
409
410
|
], ngImport: i0, template: "<input\n[placeholder]=\"placeholder()\"\n type=\"text\"\n (focus)=\"focusHandler($event)\"\n (keydown)=\"keydownHandler($event)\"\n (wheel)=\"wheelHandler($event)\"\n (blur)=\"onBlur()\"\n [readonly]=\"disabled\"\n pattern=\"[0-9]*\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"_value\"\n (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host input{font-size:var(--_datepicker-font-size);color:var(--_datepicker-text-color);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input::placeholder{font-size:.7em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
410
411
|
}
|
|
411
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
412
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DateInputElementComponent, decorators: [{
|
|
412
413
|
type: Component,
|
|
413
414
|
args: [{ selector: 'yuv-date-input-element', standalone: true, imports: [CommonModule, FormsModule], providers: [
|
|
414
415
|
{
|
|
@@ -462,8 +463,8 @@ class DateInputHourElementComponent extends DateInputElementComponent {
|
|
|
462
463
|
this._value = '12';
|
|
463
464
|
this._setValue(value, true);
|
|
464
465
|
}
|
|
465
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
466
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
466
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DateInputHourElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
467
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: DateInputHourElementComponent, isStandalone: true, selector: "yuv-date-input-hour-element", inputs: { dayPeriod: "dayPeriod" }, outputs: { dayPeriodChange: "dayPeriodChange" }, providers: [
|
|
467
468
|
{
|
|
468
469
|
provide: NG_VALUE_ACCESSOR,
|
|
469
470
|
useExisting: forwardRef(() => DateInputHourElementComponent),
|
|
@@ -476,7 +477,7 @@ class DateInputHourElementComponent extends DateInputElementComponent {
|
|
|
476
477
|
}
|
|
477
478
|
], usesInheritance: true, ngImport: i0, template: "<input\n[placeholder]=\"placeholder()\"\n type=\"text\"\n (focus)=\"focusHandler($event)\"\n (keydown)=\"keydownHandler($event)\"\n (wheel)=\"wheelHandler($event)\"\n (blur)=\"onBlur()\"\n [readonly]=\"disabled\"\n pattern=\"[0-9]*\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"_value\"\n (ngModelChange)=\"onInputChange($event)\"\n/>\n", styles: [":host{height:100%;display:flex;flex-flow:column;align-items:center;justify-content:flex-end;cursor:default}:host.year input{width:4ch}:host input{font-size:var(--_datepicker-font-size);color:var(--_datepicker-text-color);width:2ch;padding:0;flex:1;line-height:1em;text-align:end;border:0;background-color:transparent;outline:0}:host input::placeholder{font-size:.7em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
478
479
|
}
|
|
479
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
480
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DateInputHourElementComponent, decorators: [{
|
|
480
481
|
type: Component,
|
|
481
482
|
args: [{ selector: 'yuv-date-input-hour-element', standalone: true, imports: [CommonModule, FormsModule], providers: [
|
|
482
483
|
{
|
|
@@ -594,8 +595,8 @@ class TimeInputComponent {
|
|
|
594
595
|
ngOnDestroy() {
|
|
595
596
|
this._subs.forEach((s) => s.unsubscribe());
|
|
596
597
|
}
|
|
597
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
598
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
598
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TimeInputComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
599
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: TimeInputComponent, isStandalone: true, selector: "yuv-time-input", inputs: { hour12: "hour12", dayPeriodLabels: "dayPeriodLabels" }, providers: [
|
|
599
600
|
{
|
|
600
601
|
provide: NG_VALUE_ACCESSOR,
|
|
601
602
|
useExisting: forwardRef(() => TimeInputComponent),
|
|
@@ -603,7 +604,7 @@ class TimeInputComponent {
|
|
|
603
604
|
}
|
|
604
605
|
], viewQueries: [{ propertyName: "hourInput", first: true, predicate: ["dipHour"], descendants: true }, { propertyName: "minuteInput", first: true, predicate: ["dipMinute"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n <button mat-icon-button type=\"button\" class=\"increase hour\" (click)=\"increaseHour()\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n\n <yuv-date-input-hour-element\n #dipHour\n class=\"hour focusable\"\n [(dayPeriod)]=\"currentDayPeriod\"\n formControlName=\"hour\"\n [maxLength]=\"2\"\n ></yuv-date-input-hour-element>\n\n <button mat-icon-button type=\"button\" class=\"decrease hour\" (click)=\"decreaseHour()\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <div class=\"literal\">:</div>\n <button mat-icon-button type=\"button\" class=\"increase minute\" (click)=\"increaseMinute()\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n\n <yuv-date-input-element\n #dipMinute\n class=\"minute focusable\"\n [maxValue]=\"59\"\n [minValue]=\"0\"\n formControlName=\"minute\"\n [maxLength]=\"2\"\n ></yuv-date-input-element>\n\n <button mat-icon-button type=\"button\" class=\"decrease minute\" (click)=\"decreaseMinute()\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n\n @if (hour12) {\n <div class=\"dayPeriod\">\n <button\n type=\"button\"\n class=\"dp pm\"\n [ngClass]=\"{ active: currentDayPeriod === 'pm' }\"\n (click)=\"currentDayPeriod = 'pm'\"\n >\n {{ dayPeriodLabels.pm }}\n </button>\n <button\n type=\"button\"\n class=\"dp am\"\n [ngClass]=\"{ active: currentDayPeriod === 'am' }\"\n (click)=\"currentDayPeriod = 'am'\"\n >\n {{ dayPeriodLabels.am }}\n </button>\n </div>\n }\n</form>\n", styles: [":host{--time-input-border-color: var(--ymt-outline-variant)}:host form{display:grid;grid-template-rows:auto auto auto;grid-template-columns:max-content max-content max-content max-content;grid-template-areas:\"hup div mup period\" \"hin div min period\" \"hdown div mdown period\"}:host form .literal{grid-area:div;display:flex;padding:0 var(--ymt-spacing-2xs);align-items:center}:host form yuv-date-input-hour-element,:host form yuv-date-input-element{border:1px solid var(--time-input-border-color);border-width:0 1px;min-height:2em;justify-content:center}:host form yuv-date-input-hour-element.hour,:host form yuv-date-input-element.hour{grid-area:hin}:host form yuv-date-input-hour-element.minute,:host form yuv-date-input-element.minute{grid-area:min}:host form button{border:1px solid var(--time-input-border-color);border-radius:0;padding:0}:host form button.decrease.hour{grid-area:hdown}:host form button.decrease.minute{grid-area:mdown}:host form button.increase.hour{grid-area:hup}:host form button.increase.minute{grid-area:mup}:host form button.increase mat-icon{transform:rotate(180deg)}:host form .dayPeriod{grid-area:period;display:flex;flex-flow:column;justify-content:center;margin-inline-start:var(--ymt-spacing-xs)}:host form .dayPeriod>button.dp{padding:.2em;line-height:1em;margin:1px 0}:host form .dayPeriod>button.dp.active{background-color:var(--ymt-primary);border-color:var(--ymt-primary);color:var(--ymt-on-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DateInputHourElementComponent, selector: "yuv-date-input-hour-element", inputs: ["dayPeriod"], outputs: ["dayPeriodChange"] }, { kind: "component", type: DateInputElementComponent, selector: "yuv-date-input-element", inputs: ["maxLength", "maxValue", "minValue", "disabled", "placeholder"], outputs: ["next", "prev"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
605
606
|
}
|
|
606
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
607
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TimeInputComponent, decorators: [{
|
|
607
608
|
type: Component,
|
|
608
609
|
args: [{ selector: 'yuv-time-input', standalone: true, imports: [CommonModule, MatIconModule, DateInputHourElementComponent, DateInputElementComponent, MatButtonModule, ReactiveFormsModule], providers: [
|
|
609
610
|
{
|
|
@@ -1012,10 +1013,10 @@ class CalendarComponent {
|
|
|
1012
1013
|
this._initialized = true;
|
|
1013
1014
|
this.#buildDate();
|
|
1014
1015
|
}
|
|
1015
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1016
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1016
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1017
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: CalendarComponent, isStandalone: true, selector: "yuv-calendar", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, onlyFutureDates: { classPropertyName: "onlyFutureDates", publicName: "onlyFutureDates", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "keyDownHandler($event)" } }, providers: [DatepickerService], viewQueries: [{ propertyName: "calEl", first: true, predicate: ["cal"], descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"date\">\n <header>\n <div class=\"month-picker\">\n <mat-select [panelWidth]=\"null\" [(ngModel)]=\"month\" (ngModelChange)=\"selectMonthOfYear($event)\">\n <mat-select-trigger>\n {{ month !== undefined ? months[month].label : '' }} \n </mat-select-trigger>\n @for (m of months; track $index) {\n <mat-option [value]=\"m.value\">{{ m.label }}</mat-option>\n }\n </mat-select>\n </div>\n\n <input\n class=\"year-picker\"\n name=\"year\"\n type=\"number\"\n [min]=\"minYear\"\n [max]=\"maxYear\"\n [(ngModel)]=\"_offsetYear\"\n (keydown)=\"onYearInputKeydown($event)\"\n (ngModelChange)=\"selectYear($event)\"\n />\n </header>\n <main>\n <ul class=\"daysOfWeek\">\n @for (d of daysOfWeek; track d) {\n <li>{{ d }}</li>\n }\n </ul>\n <ul class=\"days\">\n @for (d of calendarDays; track d; let i = $index) {\n <li\n [attr.data-day]=\"d.id\"\n (click)=\"selectByIndex(i, true)\"\n [ngClass]=\"{\n disabled: d.disabled,\n inactive: d.inactive,\n focused: i === focusedIndex,\n selected: i === selectedIndex\n }\"\n >\n {{ d.day }}\n </li>\n }\n </ul>\n </main>\n</section>\n@if (withTime()) {\n <section class=\"time\">\n <yuv-time-input [(ngModel)]=\"time\" [hour12]=\"hour12()\" [dayPeriodLabels]=\"dayPeriodLabels\" (ngModelChange)=\"onTimeChange($event)\"></yuv-time-input>\n </section>\n}\n", styles: [":host{--_calendar-item-size: var(--calendar-item-size, 3em);--_calendar-item-border-size: var(--calendar-item-border-size, 2px);display:inline-flex;flex-flow:row wrap}:host section.date{max-width:calc(var(--_calendar-item-size) * 11)}:host section.time{display:flex;align-items:center;margin-inline-start:var(--ymt-spacing-m)}:host *:focus:not(:focus-visible){outline:none}:host header{display:flex;align-items:center;justify-content:space-between}:host header mat-select,:host header input.year-picker{border:1px solid transparent;border-radius:var(--ymt-corner-xs)}:host header mat-select:focus,:host header input.year-picker:focus{border-color:var(--ymt-primary)}:host header mat-select{padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs)}:host header input.year-picker{background-color:transparent;text-align:end;font-size:2.5em;width:5ch;color:var(--ymt-text-color-subtle);-moz-appearance:textfield}:host header input.year-picker::-webkit-outer-spin-button,:host header input.year-picker::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host main{padding:0}:host main ul li.focused:before{outline:var(--_calendar-item-border-size) solid var(--ymt-text-color-subtle);outline-offset:2px}:host ul{list-style:none;display:flex;flex-wrap:wrap;text-align:center;padding:0;min-width:calc(var(--_calendar-item-size) * 7 + .5em)}:host ul.daysOfWeek li{font-weight:700;color:var(--ymt-text-color-subtle)}:host ul.days li:before{display:block;position:absolute;content:\"\";width:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);height:calc(var(--_calendar-item-size) - var(--_calendar-item-border-size) * 4);border-radius:var(--ymt-corner-full);top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}:host ul.days li{position:relative;min-width:var(--_calendar-item-size);z-index:1;line-height:1em;cursor:pointer;color:var(--ymt-text-color);height:var(--_calendar-item-size);display:flex;flex-flow:column;align-items:center;justify-content:center}:host ul.days li.focused{color:var(--ymt-on-focus-background)}:host ul.days li.focused:before{background-color:var(--ymt-focus-background)}:host ul.days li.inactive:not(.disabled){opacity:.5}:host ul.days li.disabled{opacity:.5;cursor:default}:host ul.days li.selected{color:var(--ymt-on-selection-background)}:host ul.days li.selected:before{background-color:var(--ymt-selection-background);outline-color:var(--ymt-selection-background);opacity:1}:host ul.days li:not(.selected,.disabled).focused:before,:host ul.days li:not(.selected,.disabled):hover:before{opacity:1}:host ul li{position:relative;width:14.2857142857%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TimeInputComponent, selector: "yuv-time-input", inputs: ["hour12", "dayPeriodLabels"] }] }); }
|
|
1017
1018
|
}
|
|
1018
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1019
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
1019
1020
|
type: Component,
|
|
1020
1021
|
args: [{ selector: 'yuv-calendar', standalone: true, imports: [CommonModule, FormsModule, MatSelectModule, TimeInputComponent], providers: [DatepickerService], host: {
|
|
1021
1022
|
tabindex: '0'
|
|
@@ -1312,10 +1313,10 @@ class DateInputComponent {
|
|
|
1312
1313
|
this._formStateSub.unsubscribe();
|
|
1313
1314
|
this._subs.forEach((s) => s.unsubscribe());
|
|
1314
1315
|
}
|
|
1315
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
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
1318
|
}
|
|
1318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
1319
1320
|
type: Component,
|
|
1320
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
1322
|
}], ctorParameters: () => [{ type: DatepickerService }, { type: i1.FormBuilder }, { type: i0.ElementRef }], propDecorators: { dateInputEls: [{
|
|
@@ -1368,12 +1369,12 @@ class DatepickerCalendarComponent {
|
|
|
1368
1369
|
applyDate() {
|
|
1369
1370
|
this.#dialogRef.close(this.date);
|
|
1370
1371
|
}
|
|
1371
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1372
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1372
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DatepickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1373
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: DatepickerCalendarComponent, isStandalone: true, selector: "yuv-datepicker-calendar", host: { listeners: { "keydown.enter": "enterKeyHandler($event)" } }, ngImport: i0, template: "<mat-dialog-content>\n <yuv-calendar tabindex=\"0\"\n [locale]=\"options.locale\"\n [onlyFutureDates]=\"options.onlyFutureDates || false\"\n [(date)]=\"date\"\n [withTime]=\"options.withTime || false\"\n [minDate]=\"options.minDate\"\n [maxDate]=\"options.maxDate\"\n [hour12]=\"options.hour12 || false\"\n ></yuv-calendar>\n</mat-dialog-content>\n<mat-dialog-actions>\n <button type=\"button\" ymtButton=\"secondary\" mat-dialog-close>{{ options.labels!.calendarCancel }}</button>\n <!-- <button type=\"button\" mat-button (click)=\"shortcut('today')\">{{ options.labels!.shortcut.today }}</button> -->\n <button type=\"button\" ymtButton=\"primary\" [mat-dialog-close]=\"true\" (click)=\"applyDate()\">{{ options.labels!.calendarApply }}</button>\n</mat-dialog-actions>\n", styles: [":host{display:block;background-color:var(--ymt-surface)}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "yuv-calendar", inputs: ["minDate", "maxDate", "onlyFutureDates", "date", "locale", "withTime", "hour12"], outputs: ["dateChange"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
|
|
1373
1374
|
}
|
|
1374
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DatepickerCalendarComponent, decorators: [{
|
|
1375
1376
|
type: Component,
|
|
1376
|
-
args: [{ selector: 'yuv-datepicker-calendar', standalone: true, imports: [CalendarComponent, MatDialogModule, MatButtonModule], template: "<mat-dialog-content>\n <yuv-calendar tabindex=\"0\"\n [locale]=\"options.locale\"\n [onlyFutureDates]=\"options.onlyFutureDates || false\"\n [(date)]=\"date\"\n [withTime]=\"options.withTime || false\"\n [minDate]=\"options.minDate\"\n [maxDate]=\"options.maxDate\"\n [hour12]=\"options.hour12 || false\"\n ></yuv-calendar>\n</mat-dialog-content>\n<mat-dialog-actions>\n <button type=\"button\"
|
|
1377
|
+
args: [{ selector: 'yuv-datepicker-calendar', standalone: true, imports: [CalendarComponent, MatDialogModule, MatButtonModule, YmtButtonDirective], template: "<mat-dialog-content>\n <yuv-calendar tabindex=\"0\"\n [locale]=\"options.locale\"\n [onlyFutureDates]=\"options.onlyFutureDates || false\"\n [(date)]=\"date\"\n [withTime]=\"options.withTime || false\"\n [minDate]=\"options.minDate\"\n [maxDate]=\"options.maxDate\"\n [hour12]=\"options.hour12 || false\"\n ></yuv-calendar>\n</mat-dialog-content>\n<mat-dialog-actions>\n <button type=\"button\" ymtButton=\"secondary\" mat-dialog-close>{{ options.labels!.calendarCancel }}</button>\n <!-- <button type=\"button\" mat-button (click)=\"shortcut('today')\">{{ options.labels!.shortcut.today }}</button> -->\n <button type=\"button\" ymtButton=\"primary\" [mat-dialog-close]=\"true\" (click)=\"applyDate()\">{{ options.labels!.calendarApply }}</button>\n</mat-dialog-actions>\n", styles: [":host{display:block;background-color:var(--ymt-surface)}\n"] }]
|
|
1377
1378
|
}], propDecorators: { enterKeyHandler: [{
|
|
1378
1379
|
type: HostListener,
|
|
1379
1380
|
args: ['keydown.enter', ['$event']]
|
|
@@ -1582,8 +1583,8 @@ class DatepickerComponent {
|
|
|
1582
1583
|
ngOnDestroy() {
|
|
1583
1584
|
this._subs.forEach((s) => s.unsubscribe());
|
|
1584
1585
|
}
|
|
1585
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1586
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1586
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1587
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DatepickerComponent, isStandalone: true, selector: "yuv-datepicker", inputs: { calendar: "calendar", readonly: "readonly", hour12: "hour12", locale: "locale", labels: "labels", withTime: "withTime", onlyFutureDates: "onlyFutureDates", minDate: "minDate", maxDate: "maxDate", disabled: "disabled" }, host: { attributes: { "class.all-selected": "allSelected()" }, listeners: { "keydown": "keydownHandler($event)", "click": "clickHandler()", "focusout": "focusOutHandler()" }, properties: { "attr.aria-disabled": "this.disabled" } }, providers: [
|
|
1587
1588
|
DatepickerService,
|
|
1588
1589
|
{
|
|
1589
1590
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1597,7 +1598,7 @@ class DatepickerComponent {
|
|
|
1597
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
1600
|
}
|
|
1600
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1601
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1601
1602
|
type: Component,
|
|
1602
1603
|
args: [{ selector: 'yuv-datepicker', standalone: true, imports: [CommonModule, MatIconModule, DateInputComponent, MatButtonModule, ReactiveFormsModule], providers: [
|
|
1603
1604
|
DatepickerService,
|
|
@@ -1655,12 +1656,12 @@ class DatepickerCalendarTriggerComponent {
|
|
|
1655
1656
|
constructor() {
|
|
1656
1657
|
this.for = input.required();
|
|
1657
1658
|
}
|
|
1658
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1659
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
1659
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DatepickerCalendarTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.12", type: DatepickerCalendarTriggerComponent, isStandalone: true, selector: "yuv-datepicker-calendar-trigger", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<button mat-icon-button>
|
|
1660
1661
|
<mat-icon (click)="for().openCalendar()">calendar_month</mat-icon>
|
|
1661
1662
|
</button>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1662
1663
|
}
|
|
1663
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1664
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DatepickerCalendarTriggerComponent, decorators: [{
|
|
1664
1665
|
type: Component,
|
|
1665
1666
|
args: [{ selector: 'yuv-datepicker-calendar-trigger', template: `<button mat-icon-button>
|
|
1666
1667
|
<mat-icon (click)="for().openCalendar()">calendar_month</mat-icon>
|
|
@@ -1668,11 +1669,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
1668
1669
|
}] });
|
|
1669
1670
|
|
|
1670
1671
|
class YuvDatepickerModule {
|
|
1671
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1672
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
1673
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
1672
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1673
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.12", ngImport: i0, type: YuvDatepickerModule, imports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent], exports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent] }); }
|
|
1674
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvDatepickerModule, imports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent] }); }
|
|
1674
1675
|
}
|
|
1675
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1676
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvDatepickerModule, decorators: [{
|
|
1676
1677
|
type: NgModule,
|
|
1677
1678
|
args: [{
|
|
1678
1679
|
imports: [CalendarComponent, DatepickerComponent, DatepickerCalendarTriggerComponent],
|