@yuuvis/client-framework 2.7.0 → 2.8.1
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/datepicker/lib/calendar/calendar.component.d.ts +1 -2
- package/datepicker/lib/date-input/date-input.component.d.ts +1 -1
- package/fesm2022/yuuvis-client-framework-datepicker.mjs +32 -29
- package/fesm2022/yuuvis-client-framework-datepicker.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-list.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-query-list.mjs +17 -2
- package/fesm2022/yuuvis-client-framework-query-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +12 -4
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/package.json +4 -4
- package/query-list/lib/query-list.component.d.ts +14 -1
- package/tile-list/lib/tile-list/tile-list.component.d.ts +9 -1
|
@@ -48,7 +48,7 @@ export declare class CalendarComponent implements OnInit {
|
|
|
48
48
|
private _focusPos;
|
|
49
49
|
calendarDays: CalendarItem[];
|
|
50
50
|
private _numberOfWeeks;
|
|
51
|
-
|
|
51
|
+
ngOnInit(): void;
|
|
52
52
|
private _dateToTime;
|
|
53
53
|
selectByIndex(i: number, setFocusPosition?: boolean): void;
|
|
54
54
|
select(d: Date | string | number, setFocusPosition?: boolean, silent?: boolean): void;
|
|
@@ -65,7 +65,6 @@ export declare class CalendarComponent implements OnInit {
|
|
|
65
65
|
private _stopEvent;
|
|
66
66
|
private _setFocusPos;
|
|
67
67
|
private _setFocusPosByCalendarIndex;
|
|
68
|
-
ngOnInit(): void;
|
|
69
68
|
static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent, never>;
|
|
70
69
|
static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "yuv-calendar", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "onlyFutureDates": { "alias": "onlyFutureDates"; "required": false; "isSignal": true; }; "date": { "alias": "date"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "withTime": { "alias": "withTime"; "required": false; "isSignal": true; }; "hour12": { "alias": "hour12"; "required": false; "isSignal": true; }; }, { "date": "dateChange"; }, never, never, true, never>;
|
|
71
70
|
}
|
|
@@ -14,7 +14,7 @@ export declare class DateInputComponent implements OnInit, OnDestroy {
|
|
|
14
14
|
private _subs;
|
|
15
15
|
private _formValueSub?;
|
|
16
16
|
private _formStateSub?;
|
|
17
|
-
|
|
17
|
+
protected date: Date | null;
|
|
18
18
|
private _intlOptions?;
|
|
19
19
|
dateAttribute?: string;
|
|
20
20
|
set disabled(d: boolean);
|
|
@@ -636,12 +636,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
636
636
|
}] } });
|
|
637
637
|
|
|
638
638
|
class CalendarComponent {
|
|
639
|
-
// feature flag for immediately selecting a new (close) Date when
|
|
640
|
-
// navigating between years/months
|
|
641
|
-
#immediatelySelect;
|
|
642
|
-
#dateEffect;
|
|
643
|
-
#localeEffect;
|
|
644
|
-
#withTimeEffect;
|
|
645
639
|
constructor() {
|
|
646
640
|
this.datepickerService = inject(DatepickerService);
|
|
647
641
|
this.calEl = viewChild.required('cal');
|
|
@@ -663,7 +657,7 @@ class CalendarComponent {
|
|
|
663
657
|
* Allow only date inputs that are after today
|
|
664
658
|
*/
|
|
665
659
|
this.onlyFutureDates = input(false);
|
|
666
|
-
this.date = model(
|
|
660
|
+
this.date = model();
|
|
667
661
|
this.#dateEffect = effect(() => {
|
|
668
662
|
const d = this.date();
|
|
669
663
|
untracked(() => {
|
|
@@ -704,12 +698,23 @@ class CalendarComponent {
|
|
|
704
698
|
};
|
|
705
699
|
this.calendarDays = [];
|
|
706
700
|
this._numberOfWeeks = 4;
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
701
|
+
}
|
|
702
|
+
// feature flag for immediately selecting a new (close) Date when
|
|
703
|
+
// navigating between years/months
|
|
704
|
+
#immediatelySelect;
|
|
705
|
+
#dateEffect;
|
|
706
|
+
#localeEffect;
|
|
707
|
+
#withTimeEffect;
|
|
708
|
+
ngOnInit() {
|
|
709
|
+
this._initialized = true;
|
|
710
|
+
const d = this.date();
|
|
711
|
+
if (d) {
|
|
712
|
+
this.selectMonthOfYear(d.getMonth(), d.getFullYear());
|
|
713
|
+
this.time = {
|
|
714
|
+
hour: d.getHours(),
|
|
715
|
+
minute: d.getMinutes()
|
|
716
|
+
};
|
|
717
|
+
}
|
|
713
718
|
}
|
|
714
719
|
_dateToTime(date) {
|
|
715
720
|
const hour = date.getHours();
|
|
@@ -818,13 +823,14 @@ class CalendarComponent {
|
|
|
818
823
|
onTimeChange(e) {
|
|
819
824
|
const date = this.date();
|
|
820
825
|
if (date) {
|
|
826
|
+
const newDate = new Date(date.getTime());
|
|
821
827
|
let hour = e.dayPeriod === 'pm' && e.hour < 12 ? e.hour + 12 : e.hour;
|
|
822
828
|
hour = e.dayPeriod === 'am' && hour === 12 ? 0 : hour;
|
|
823
|
-
|
|
824
|
-
|
|
829
|
+
newDate.setHours(hour === 24 ? 0 : hour);
|
|
830
|
+
newDate.setMinutes(e.minute);
|
|
825
831
|
this.time = e;
|
|
832
|
+
this.date.update(() => newDate);
|
|
826
833
|
}
|
|
827
|
-
this.date.update(() => date);
|
|
828
834
|
}
|
|
829
835
|
_setLocale(locale) {
|
|
830
836
|
this.dayPeriodLabels = this.datepickerService.getDayPeriodLabels(locale);
|
|
@@ -1019,16 +1025,13 @@ class CalendarComponent {
|
|
|
1019
1025
|
row: Math.round(this.focusedIndex / this._numberOfWeeks)
|
|
1020
1026
|
};
|
|
1021
1027
|
}
|
|
1022
|
-
ngOnInit() {
|
|
1023
|
-
this._initialized = true;
|
|
1024
|
-
}
|
|
1025
1028
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1026
1029
|
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"] }] }); }
|
|
1027
1030
|
}
|
|
1028
1031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
1029
1032
|
type: Component,
|
|
1030
1033
|
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
|
-
}]
|
|
1034
|
+
}] });
|
|
1032
1035
|
|
|
1033
1036
|
/**
|
|
1034
1037
|
*
|
|
@@ -1074,7 +1077,7 @@ class DateInputComponent {
|
|
|
1074
1077
|
this.fb = fb;
|
|
1075
1078
|
this.elRef = elRef;
|
|
1076
1079
|
this._subs = [];
|
|
1077
|
-
this.
|
|
1080
|
+
this.date = null;
|
|
1078
1081
|
this._disabled = false;
|
|
1079
1082
|
this.invalid = signal(false);
|
|
1080
1083
|
this._refreshPlaceholder = true;
|
|
@@ -1090,7 +1093,7 @@ class DateInputComponent {
|
|
|
1090
1093
|
};
|
|
1091
1094
|
}
|
|
1092
1095
|
_setupForm() {
|
|
1093
|
-
const dateTokens = this._getPatch(this.
|
|
1096
|
+
const dateTokens = this._getPatch(this.date);
|
|
1094
1097
|
const dateCfg = {
|
|
1095
1098
|
day: [dateTokens.day, [Validators.max(31), Validators.minLength(2)]],
|
|
1096
1099
|
month: [dateTokens.month, [Validators.max(12), Validators.minLength(2)]],
|
|
@@ -1145,8 +1148,8 @@ class DateInputComponent {
|
|
|
1145
1148
|
}
|
|
1146
1149
|
_checkAndPropagateForm() {
|
|
1147
1150
|
if (this.dateInputForm?.status === 'VALID') {
|
|
1148
|
-
this.
|
|
1149
|
-
this.datepickerService.setValue(this.
|
|
1151
|
+
this.date = this._formToDate(this.dateInputForm);
|
|
1152
|
+
this.datepickerService.setValue(this.date);
|
|
1150
1153
|
}
|
|
1151
1154
|
}
|
|
1152
1155
|
_formToDate(g) {
|
|
@@ -1256,7 +1259,7 @@ class DateInputComponent {
|
|
|
1256
1259
|
this.datepickerService.setValue(null);
|
|
1257
1260
|
}
|
|
1258
1261
|
getFormattedValue() {
|
|
1259
|
-
return this.
|
|
1262
|
+
return this.date ? Intl.DateTimeFormat(this._locale, this._intlOptions).format(this.date) : null;
|
|
1260
1263
|
}
|
|
1261
1264
|
onInputNext() {
|
|
1262
1265
|
this._focusInput(1);
|
|
@@ -1271,7 +1274,7 @@ class DateInputComponent {
|
|
|
1271
1274
|
_init(skipFormSetup = false) {
|
|
1272
1275
|
this._setPlaceholder();
|
|
1273
1276
|
this._intlOptions = this.datepickerService.getIntlOptions(this.withTime, this.hour12);
|
|
1274
|
-
const d = this.
|
|
1277
|
+
const d = this.date || new Date();
|
|
1275
1278
|
this.dateTokens = new Intl.DateTimeFormat(this._locale, this._intlOptions).formatToParts(d);
|
|
1276
1279
|
if (this.hour12) {
|
|
1277
1280
|
this.currentDayPeriod = d.getHours() > 12 ? 'pm' : 'am';
|
|
@@ -1296,7 +1299,7 @@ class DateInputComponent {
|
|
|
1296
1299
|
}));
|
|
1297
1300
|
this._subs.push(this.datepickerService.valueChange$.subscribe({
|
|
1298
1301
|
next: (vc) => {
|
|
1299
|
-
this.
|
|
1302
|
+
this.date = vc.value;
|
|
1300
1303
|
this.dateAttribute = this.getFormattedValue() || undefined;
|
|
1301
1304
|
this.dateInputForm.patchValue(this._getPatch(vc.value), {
|
|
1302
1305
|
emitEvent: false
|
|
@@ -1314,7 +1317,7 @@ class DateInputComponent {
|
|
|
1314
1317
|
this._subs.forEach((s) => s.unsubscribe());
|
|
1315
1318
|
}
|
|
1316
1319
|
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 }); }
|
|
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.
|
|
1320
|
+
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"] }] }); }
|
|
1318
1321
|
}
|
|
1319
1322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
1320
1323
|
type: Component,
|
|
@@ -1324,7 +1327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1324
1327
|
}], ctorParameters: () => [{ type: DatepickerService }, { type: i1.FormBuilder }, { type: i0.ElementRef }], propDecorators: { dateInputEls: [{
|
|
1325
1328
|
type: ViewChildren,
|
|
1326
1329
|
args: [DateInputElementComponent, { read: ElementRef }]
|
|
1327
|
-
}],
|
|
1330
|
+
}], date: [{
|
|
1328
1331
|
type: HostBinding,
|
|
1329
1332
|
args: ['class.has-value']
|
|
1330
1333
|
}], dateAttribute: [{
|