@coreui/angular-pro 5.6.1 → 5.6.2
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.
|
@@ -9897,9 +9897,14 @@ class TimePickerComponent {
|
|
|
9897
9897
|
onBlur() {
|
|
9898
9898
|
this.onTouched();
|
|
9899
9899
|
}
|
|
9900
|
-
dropdownRef;
|
|
9901
|
-
|
|
9902
|
-
|
|
9900
|
+
dropdownRef = viewChild(DropdownComponent, { ...(ngDevMode ? { debugName: "dropdownRef" } : {}), read: ElementRef });
|
|
9901
|
+
contentTemplates = contentChildren(TemplateIdDirective, { ...(ngDevMode ? { debugName: "contentTemplates" } : {}), descendants: true });
|
|
9902
|
+
templates = computed(() => {
|
|
9903
|
+
return this.contentTemplates().reduce((acc, child) => {
|
|
9904
|
+
acc[child.id] = child.templateRef;
|
|
9905
|
+
return acc;
|
|
9906
|
+
}, {});
|
|
9907
|
+
}, ...(ngDevMode ? [{ debugName: "templates" }] : []));
|
|
9903
9908
|
listOfHours;
|
|
9904
9909
|
listOfHours12;
|
|
9905
9910
|
listOfMinutes;
|
|
@@ -10056,13 +10061,6 @@ class TimePickerComponent {
|
|
|
10056
10061
|
}
|
|
10057
10062
|
}
|
|
10058
10063
|
}
|
|
10059
|
-
ngAfterViewInit() {
|
|
10060
|
-
setTimeout(() => {
|
|
10061
|
-
this.contentTemplates.forEach((child) => {
|
|
10062
|
-
this.templates[child.id] = child.templateRef;
|
|
10063
|
-
});
|
|
10064
|
-
});
|
|
10065
|
-
}
|
|
10066
10064
|
setTimeLists() {
|
|
10067
10065
|
this.dayPeriods = getDayPeriods(this.locale(), this.dateTimeFormatOptions());
|
|
10068
10066
|
this.hour12 = isHour12(this.locale());
|
|
@@ -10194,7 +10192,7 @@ class TimePickerComponent {
|
|
|
10194
10192
|
if (this.disabled()) {
|
|
10195
10193
|
return;
|
|
10196
10194
|
}
|
|
10197
|
-
this.dropdownRef?.nativeElement?.classList.remove('show');
|
|
10195
|
+
this.dropdownRef()?.nativeElement?.classList.remove('show');
|
|
10198
10196
|
setTimeout(() => {
|
|
10199
10197
|
this.onBlur();
|
|
10200
10198
|
}, 100);
|
|
@@ -10203,7 +10201,7 @@ class TimePickerComponent {
|
|
|
10203
10201
|
if (this.disabled()) {
|
|
10204
10202
|
return;
|
|
10205
10203
|
}
|
|
10206
|
-
this.dropdownRef?.nativeElement?.classList.add('show');
|
|
10204
|
+
this.dropdownRef()?.nativeElement?.classList.add('show');
|
|
10207
10205
|
}
|
|
10208
10206
|
setChangeHandlers() {
|
|
10209
10207
|
if (this.variant() !== 'select') {
|
|
@@ -10241,7 +10239,7 @@ class TimePickerComponent {
|
|
|
10241
10239
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
10242
10240
|
multi: true
|
|
10243
10241
|
}
|
|
10244
|
-
], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "@if (variant() === 'select') {\n <div class=\"date-picker-timepickers\">\n <div class=\"picker time-picker\">\n <div [formGroup]=\"selectTime\" [class]=\"timePickerClasses()\" class=\"time-picker-body\">\n <span class=\"time-picker-inline-icon\"></span>\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n @for (hour of listOfHours12; track hour.value; let i = $index) {\n <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n {{ hour.label }}\n </option>\n }\n </select>\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n @for (minute of listOfMinutes; track minute.value; let i = $index) {\n <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n {{ minute.label }}\n </option>\n }\n </select>\n @if (seconds()) {\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n @for (second of listOfSeconds; track second.value; let i = $index) {\n <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n {{ second.label }}\n </option>\n }\n </select>\n }\n @if (hour12) {\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n @for (dayPeriod of dayPeriods; track dayPeriod.value) {\n <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n {{ dayPeriod.label }}\n </option>\n }\n </select>\n }\n </div>\n </div>\n </div>\n}\n@if (variant() === 'roll') {\n <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [class]=\"timePickerClasses()\" [visible]=\"visible()\">\n <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n <input (blur)=\"handleBlur($event);\"\n (change)=\"handleTimeInputChange($event)\"\n (focus)=\"handleFocus($event)\"\n [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [formControl]=\"timeInputCtrl\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"inputReadOnly() ?? null\"\n class=\"time-picker-input\"\n >\n @if (indicator()) {\n <div class=\"time-picker-indicator\"></div>\n }\n @if (cleaner() && time && !disabled()) {\n <div (click)=\"!disabled() && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n }\n </div>\n <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfHours12\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"hour\"\n role=\"listbox\"\n />\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfMinutes\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"minute\"\n role=\"listbox\"\n />\n @if (seconds()) {\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfSeconds\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"second\"\n role=\"listbox\"\n />\n }\n @if (hour12) {\n <c-time-picker-roll-am-pm\n (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n [disabled]=\"disabled()\"\n [elements]=\"dayPeriods\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"dayPeriod\"\n role=\"listbox\"\n />\n }\n </div>\n @if (
|
|
10242
|
+
], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef, isSignal: true }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "@if (variant() === 'select') {\n <div class=\"date-picker-timepickers\">\n <div class=\"picker time-picker\">\n <div [formGroup]=\"selectTime\" [class]=\"timePickerClasses()\" class=\"time-picker-body\">\n <span class=\"time-picker-inline-icon\"></span>\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n @for (hour of listOfHours12; track hour.value; let i = $index) {\n <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n {{ hour.label }}\n </option>\n }\n </select>\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n @for (minute of listOfMinutes; track minute.value; let i = $index) {\n <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n {{ minute.label }}\n </option>\n }\n </select>\n @if (seconds()) {\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n @for (second of listOfSeconds; track second.value; let i = $index) {\n <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n {{ second.label }}\n </option>\n }\n </select>\n }\n @if (hour12) {\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n @for (dayPeriod of dayPeriods; track dayPeriod.value) {\n <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n {{ dayPeriod.label }}\n </option>\n }\n </select>\n }\n </div>\n </div>\n </div>\n}\n@if (variant() === 'roll') {\n <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [class]=\"timePickerClasses()\" [visible]=\"visible()\">\n <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n <input (blur)=\"handleBlur($event);\"\n (change)=\"handleTimeInputChange($event)\"\n (focus)=\"handleFocus($event)\"\n [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [formControl]=\"timeInputCtrl\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"inputReadOnly() ?? null\"\n class=\"time-picker-input\"\n >\n @if (indicator()) {\n <div class=\"time-picker-indicator\"></div>\n }\n @if (cleaner() && time && !disabled()) {\n <div (click)=\"!disabled() && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n }\n </div>\n <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfHours12\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"hour\"\n role=\"listbox\"\n />\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfMinutes\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"minute\"\n role=\"listbox\"\n />\n @if (seconds()) {\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfSeconds\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"second\"\n role=\"listbox\"\n />\n }\n @if (hour12) {\n <c-time-picker-roll-am-pm\n (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n [disabled]=\"disabled()\"\n [elements]=\"dayPeriods\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"dayPeriod\"\n role=\"listbox\"\n />\n }\n </div>\n @let tmpl = templates();\n @if (tmpl?.['timePickerFooter']) {\n <div class=\"time-picker-footer\">\n <ng-container *ngTemplateOutlet=\"tmpl?.['timePickerFooter']; context: {$implicit: dropdown}\" />\n </div>\n }\n </div>\n </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: TimePickerRollColComponent, selector: "c-time-picker-roll-col", inputs: ["disabled", "elements", "onClick", "refresh", "selected"], outputs: ["selectedChange"], exportAs: ["cTimePickerRollCol"] }, { kind: "component", type: TimePickerRollAmPmComponent, selector: "c-time-picker-roll-am-pm", inputs: ["disabled", "elements", "onClick", "refresh", "selected"], outputs: ["selectedChange"] }] });
|
|
10245
10243
|
}
|
|
10246
10244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
10247
10245
|
type: Component,
|
|
@@ -10262,16 +10260,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
10262
10260
|
}
|
|
10263
10261
|
], host: {
|
|
10264
10262
|
'(focusout)': 'onBlur()'
|
|
10265
|
-
}, template: "@if (variant() === 'select') {\n <div class=\"date-picker-timepickers\">\n <div class=\"picker time-picker\">\n <div [formGroup]=\"selectTime\" [class]=\"timePickerClasses()\" class=\"time-picker-body\">\n <span class=\"time-picker-inline-icon\"></span>\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n @for (hour of listOfHours12; track hour.value; let i = $index) {\n <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n {{ hour.label }}\n </option>\n }\n </select>\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n @for (minute of listOfMinutes; track minute.value; let i = $index) {\n <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n {{ minute.label }}\n </option>\n }\n </select>\n @if (seconds()) {\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n @for (second of listOfSeconds; track second.value; let i = $index) {\n <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n {{ second.label }}\n </option>\n }\n </select>\n }\n @if (hour12) {\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n @for (dayPeriod of dayPeriods; track dayPeriod.value) {\n <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n {{ dayPeriod.label }}\n </option>\n }\n </select>\n }\n </div>\n </div>\n </div>\n}\n@if (variant() === 'roll') {\n <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [class]=\"timePickerClasses()\" [visible]=\"visible()\">\n <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n <input (blur)=\"handleBlur($event);\"\n (change)=\"handleTimeInputChange($event)\"\n (focus)=\"handleFocus($event)\"\n [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [formControl]=\"timeInputCtrl\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"inputReadOnly() ?? null\"\n class=\"time-picker-input\"\n >\n @if (indicator()) {\n <div class=\"time-picker-indicator\"></div>\n }\n @if (cleaner() && time && !disabled()) {\n <div (click)=\"!disabled() && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n }\n </div>\n <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfHours12\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"hour\"\n role=\"listbox\"\n />\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfMinutes\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"minute\"\n role=\"listbox\"\n />\n @if (seconds()) {\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfSeconds\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"second\"\n role=\"listbox\"\n />\n }\n @if (hour12) {\n <c-time-picker-roll-am-pm\n (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n [disabled]=\"disabled()\"\n [elements]=\"dayPeriods\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"dayPeriod\"\n role=\"listbox\"\n />\n }\n </div>\n @if (
|
|
10263
|
+
}, template: "@if (variant() === 'select') {\n <div class=\"date-picker-timepickers\">\n <div class=\"picker time-picker\">\n <div [formGroup]=\"selectTime\" [class]=\"timePickerClasses()\" class=\"time-picker-body\">\n <span class=\"time-picker-inline-icon\"></span>\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n @for (hour of listOfHours12; track hour.value; let i = $index) {\n <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n {{ hour.label }}\n </option>\n }\n </select>\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n @for (minute of listOfMinutes; track minute.value; let i = $index) {\n <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n {{ minute.label }}\n </option>\n }\n </select>\n @if (seconds()) {\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n @for (second of listOfSeconds; track second.value; let i = $index) {\n <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n {{ second.label }}\n </option>\n }\n </select>\n }\n @if (hour12) {\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n @for (dayPeriod of dayPeriods; track dayPeriod.value) {\n <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n {{ dayPeriod.label }}\n </option>\n }\n </select>\n }\n </div>\n </div>\n </div>\n}\n@if (variant() === 'roll') {\n <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [class]=\"timePickerClasses()\" [visible]=\"visible()\">\n <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n <input (blur)=\"handleBlur($event);\"\n (change)=\"handleTimeInputChange($event)\"\n (focus)=\"handleFocus($event)\"\n [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [formControl]=\"timeInputCtrl\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"inputReadOnly() ?? null\"\n class=\"time-picker-input\"\n >\n @if (indicator()) {\n <div class=\"time-picker-indicator\"></div>\n }\n @if (cleaner() && time && !disabled()) {\n <div (click)=\"!disabled() && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n }\n </div>\n <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfHours12\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"hour\"\n role=\"listbox\"\n />\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfMinutes\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"minute\"\n role=\"listbox\"\n />\n @if (seconds()) {\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfSeconds\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"second\"\n role=\"listbox\"\n />\n }\n @if (hour12) {\n <c-time-picker-roll-am-pm\n (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n [disabled]=\"disabled()\"\n [elements]=\"dayPeriods\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"dayPeriod\"\n role=\"listbox\"\n />\n }\n </div>\n @let tmpl = templates();\n @if (tmpl?.['timePickerFooter']) {\n <div class=\"time-picker-footer\">\n <ng-container *ngTemplateOutlet=\"tmpl?.['timePickerFooter']; context: {$implicit: dropdown}\" />\n </div>\n }\n </div>\n </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\n"] }]
|
|
10266
10264
|
}], propDecorators: { cleaner: [{ type: i0.Input, args: [{ isSignal: true, alias: "cleaner", required: false }] }], dateTimeFormatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTimeFormatOptions", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterHours", required: false }] }], filterMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMinutes", required: false }] }], filterSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterSeconds", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], inputReadOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputReadOnly", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], time: [{
|
|
10267
10265
|
type: Input
|
|
10268
|
-
}], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], dropdownRef: [{
|
|
10269
|
-
type: ViewChild,
|
|
10270
|
-
args: [DropdownComponent, { read: ElementRef }]
|
|
10271
|
-
}], contentTemplates: [{
|
|
10272
|
-
type: ContentChildren,
|
|
10273
|
-
args: [TemplateIdDirective, { descendants: true }]
|
|
10274
|
-
}] } });
|
|
10266
|
+
}], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], dropdownRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownComponent), { ...{ read: ElementRef }, isSignal: true }] }], contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateIdDirective), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
10275
10267
|
|
|
10276
10268
|
class TimePickerModule {
|
|
10277
10269
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -11833,57 +11825,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
11833
11825
|
}] });
|
|
11834
11826
|
|
|
11835
11827
|
class MultiSelectOptgroupComponent {
|
|
11836
|
-
multiSelectService = inject(MultiSelectService);
|
|
11837
11828
|
#destroyRef = inject(DestroyRef);
|
|
11829
|
+
#multiSelectService = inject(MultiSelectService);
|
|
11830
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
11831
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
11838
11832
|
visible = signal(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
11839
|
-
|
|
11840
|
-
|
|
11841
|
-
|
|
11842
|
-
|
|
11833
|
+
multiSelectOptions = contentChildren(MultiSelectOptionComponent, { ...(ngDevMode ? { debugName: "multiSelectOptions" } : {}), descendants: true });
|
|
11834
|
+
#optionsEffect = effect(() => {
|
|
11835
|
+
const disabled = this.disabled();
|
|
11836
|
+
const options = this.multiSelectOptions();
|
|
11837
|
+
options?.forEach((option) => {
|
|
11838
|
+
option.disabled = disabled || option.disabled;
|
|
11839
|
+
});
|
|
11840
|
+
}, ...(ngDevMode ? [{ debugName: "#optionsEffect" }] : []));
|
|
11841
|
+
hostClasses = computed(() => {
|
|
11843
11842
|
return {
|
|
11844
11843
|
'form-multi-select-options': true,
|
|
11845
11844
|
'd-none': !this.visible()
|
|
11846
11845
|
};
|
|
11847
|
-
}
|
|
11846
|
+
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
11848
11847
|
ngAfterContentInit() {
|
|
11849
|
-
this.updateMultiSelectOptions();
|
|
11850
11848
|
this.watchOptGroupContent();
|
|
11851
11849
|
}
|
|
11852
|
-
ngOnChanges(changes) {
|
|
11853
|
-
if (changes['disabled']) {
|
|
11854
|
-
this.updateMultiSelectOptions();
|
|
11855
|
-
}
|
|
11856
|
-
}
|
|
11857
|
-
updateMultiSelectOptions() {
|
|
11858
|
-
this.multiSelectOptions?.forEach((option) => {
|
|
11859
|
-
option.disabled = this.disabled || option.disabled;
|
|
11860
|
-
});
|
|
11861
|
-
}
|
|
11862
11850
|
watchOptGroupContent() {
|
|
11863
|
-
this
|
|
11851
|
+
this.#multiSelectService.optionsArray$
|
|
11864
11852
|
.pipe(tap((x) => {
|
|
11865
|
-
this.visible.set(this.multiSelectOptions?.some((option) => option.visible));
|
|
11853
|
+
this.visible.set(this.multiSelectOptions()?.some((option) => option.visible));
|
|
11866
11854
|
}), takeUntilDestroyed(this.#destroyRef))
|
|
11867
11855
|
.subscribe();
|
|
11868
11856
|
}
|
|
11869
11857
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MultiSelectOptgroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11870
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MultiSelectOptgroupComponent, isStandalone: true, selector: "c-multi-select-optgroup", inputs: { label: "label",
|
|
11858
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MultiSelectOptgroupComponent, isStandalone: true, selector: "c-multi-select-optgroup", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
11859
|
+
@let lbl = label();
|
|
11860
|
+
@if (lbl && visible()) {
|
|
11861
|
+
<c-multi-select-optgroup-label>{{ lbl }}</c-multi-select-optgroup-label>
|
|
11862
|
+
}
|
|
11863
|
+
<ng-content />
|
|
11864
|
+
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11871
11865
|
}
|
|
11872
11866
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MultiSelectOptgroupComponent, decorators: [{
|
|
11873
11867
|
type: Component,
|
|
11874
|
-
args: [{ selector: 'c-multi-select-optgroup',
|
|
11875
|
-
|
|
11876
|
-
|
|
11877
|
-
|
|
11878
|
-
|
|
11879
|
-
|
|
11880
|
-
|
|
11881
|
-
|
|
11882
|
-
|
|
11883
|
-
|
|
11884
|
-
type: HostBinding,
|
|
11885
|
-
args: ['class']
|
|
11886
|
-
}] } });
|
|
11868
|
+
args: [{ selector: 'c-multi-select-optgroup', template: `
|
|
11869
|
+
@let lbl = label();
|
|
11870
|
+
@if (lbl && visible()) {
|
|
11871
|
+
<c-multi-select-optgroup-label>{{ lbl }}</c-multi-select-optgroup-label>
|
|
11872
|
+
}
|
|
11873
|
+
<ng-content />
|
|
11874
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MultiSelectOptgroupLabelComponent], host: {
|
|
11875
|
+
'[class]': 'hostClasses()'
|
|
11876
|
+
}, styles: [":host{display:block}\n"] }]
|
|
11877
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiSelectOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MultiSelectOptionComponent), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
11887
11878
|
|
|
11888
11879
|
class MultiSelectModule {
|
|
11889
11880
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|