@coreui/angular-pro 5.7.16 → 5.7.17
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.
|
@@ -10197,32 +10197,36 @@ class TimePickerRollColComponent {
|
|
|
10197
10197
|
...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
|
|
10198
10198
|
onClick = input(/* @ts-ignore */
|
|
10199
10199
|
...(ngDevMode ? [undefined, { debugName: "onClick" }] : /* istanbul ignore next */ []));
|
|
10200
|
-
|
|
10200
|
+
refreshInput = input(undefined, { ...(ngDevMode ? { debugName: "refreshInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'refresh' });
|
|
10201
|
+
refresh = linkedSignal(this.refreshInput, /* @ts-ignore */
|
|
10202
|
+
...(ngDevMode ? [{ debugName: "refresh" }] : /* istanbul ignore next */ []));
|
|
10201
10203
|
selectedInput = input(null, { ...(ngDevMode ? { debugName: "selectedInput" } : /* istanbul ignore next */ {}), alias: 'selected' });
|
|
10202
10204
|
selected = linkedSignal(this.selectedInput, /* @ts-ignore */
|
|
10203
10205
|
...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
10204
10206
|
selectedChange = output();
|
|
10205
|
-
timeElements
|
|
10206
|
-
|
|
10207
|
-
|
|
10208
|
-
|
|
10209
|
-
|
|
10210
|
-
|
|
10211
|
-
|
|
10212
|
-
|
|
10213
|
-
|
|
10214
|
-
|
|
10215
|
-
|
|
10216
|
-
|
|
10217
|
-
|
|
10218
|
-
|
|
10219
|
-
const selectedElement =
|
|
10220
|
-
return element.cTimeElement()?.value ===
|
|
10207
|
+
timeElements = viewChildren(TimeElementDirective, /* @ts-ignore */
|
|
10208
|
+
...(ngDevMode ? [{ debugName: "timeElements" }] : /* istanbul ignore next */ []));
|
|
10209
|
+
#timeElementsEffect = effect(() => {
|
|
10210
|
+
const timeElements = this.timeElements();
|
|
10211
|
+
if (timeElements.length > 0) {
|
|
10212
|
+
this.refresh.set(true);
|
|
10213
|
+
}
|
|
10214
|
+
}, /* @ts-ignore */
|
|
10215
|
+
...(ngDevMode ? [{ debugName: "#timeElementsEffect" }] : /* istanbul ignore next */ []));
|
|
10216
|
+
#refreshEffect = effect(() => {
|
|
10217
|
+
const refresh = this.refresh();
|
|
10218
|
+
const selected = this.selected();
|
|
10219
|
+
untracked(() => {
|
|
10220
|
+
const timeElements = this.timeElements();
|
|
10221
|
+
const selectedElement = timeElements.find((element) => {
|
|
10222
|
+
return element.cTimeElement()?.value === selected;
|
|
10221
10223
|
});
|
|
10222
10224
|
this.#init = !selectedElement;
|
|
10223
10225
|
this.scrollToElement(selectedElement?.elementRef.nativeElement);
|
|
10224
|
-
|
|
10225
|
-
|
|
10226
|
+
this.refresh.set(false);
|
|
10227
|
+
});
|
|
10228
|
+
}, /* @ts-ignore */
|
|
10229
|
+
...(ngDevMode ? [{ debugName: "#refreshEffect" }] : /* istanbul ignore next */ []));
|
|
10226
10230
|
scrollToElement(element) {
|
|
10227
10231
|
setTimeout(() => {
|
|
10228
10232
|
const elementSelected = element ??
|
|
@@ -10254,18 +10258,15 @@ class TimePickerRollColComponent {
|
|
|
10254
10258
|
}
|
|
10255
10259
|
}
|
|
10256
10260
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TimePickerRollColComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TimePickerRollColComponent, isStandalone: true, selector: "c-time-picker-roll-col", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: false, transformFunction: null }, onClick: { classPropertyName: "onClick", publicName: "onClick", isSignal: true, isRequired: false, transformFunction: null },
|
|
10261
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TimePickerRollColComponent, isStandalone: true, selector: "c-time-picker-roll-col", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: false, transformFunction: null }, onClick: { classPropertyName: "onClick", publicName: "onClick", isSignal: true, isRequired: false, transformFunction: null }, refreshInput: { classPropertyName: "refreshInput", publicName: "refresh", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.disabled": "disabled()" }, classAttribute: "time-picker-roll-col" }, viewQueries: [{ propertyName: "timeElements", predicate: TimeElementDirective, descendants: true, isSignal: true }], exportAs: ["cTimePickerRollCol"], ngImport: i0, template: "@for (element of elements(); track element.value; let i = $index) {\n @let cellWidth = element.label.length > 2 ? { '--cui-timepicker-roll-cell-width' : '80px' } : {};\n <div (click)=\"handleElementClick($event, element)\"\n (keydown)=\"handleElementKeyDown($event, element)\"\n [attr.disabled]=\"element.disabled || null\"\n [cTimeElement]=\"element\"\n [class]=\"{'time-picker-roll-cell': true, selected: element.value === selected(), disabled: element.disabled}\"\n [tabindex]=\"element.disabled ? -1 : 0\"\n role=\"button\"\n [style]=\"cellWidth\"\n >\n {{ element.label }}\n </div>\n}\n\n", styles: [":host{display:block}:host .disabled{pointer-events:none}:host .time-picker-roll-cell{--cui-timepicker-roll-cell-width: 50px;width:var(--cui-timepicker-roll-cell-width)}\n"], dependencies: [{ kind: "directive", type: TimeElementDirective, selector: "[cTimeElement]", inputs: ["cTimeElement"], exportAs: ["cTimeElement"] }] });
|
|
10258
10262
|
}
|
|
10259
10263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TimePickerRollColComponent, decorators: [{
|
|
10260
10264
|
type: Component,
|
|
10261
|
-
args: [{ selector: 'c-time-picker-roll-col', exportAs: 'cTimePickerRollCol', imports: [TimeElementDirective],
|
|
10265
|
+
args: [{ selector: 'c-time-picker-roll-col', exportAs: 'cTimePickerRollCol', imports: [TimeElementDirective], host: {
|
|
10262
10266
|
class: 'time-picker-roll-col',
|
|
10263
10267
|
'[class.disabled]': 'disabled()'
|
|
10264
10268
|
}, template: "@for (element of elements(); track element.value; let i = $index) {\n @let cellWidth = element.label.length > 2 ? { '--cui-timepicker-roll-cell-width' : '80px' } : {};\n <div (click)=\"handleElementClick($event, element)\"\n (keydown)=\"handleElementKeyDown($event, element)\"\n [attr.disabled]=\"element.disabled || null\"\n [cTimeElement]=\"element\"\n [class]=\"{'time-picker-roll-cell': true, selected: element.value === selected(), disabled: element.disabled}\"\n [tabindex]=\"element.disabled ? -1 : 0\"\n role=\"button\"\n [style]=\"cellWidth\"\n >\n {{ element.label }}\n </div>\n}\n\n", styles: [":host{display:block}:host .disabled{pointer-events:none}:host .time-picker-roll-cell{--cui-timepicker-roll-cell-width: 50px;width:var(--cui-timepicker-roll-cell-width)}\n"] }]
|
|
10265
|
-
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: false }] }], onClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClick", required: false }] }],
|
|
10266
|
-
type: ViewChildren,
|
|
10267
|
-
args: [TimeElementDirective]
|
|
10268
|
-
}] } });
|
|
10269
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: false }] }], onClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClick", required: false }] }], refreshInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "refresh", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], timeElements: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => TimeElementDirective), { isSignal: true }] }] } });
|
|
10269
10270
|
|
|
10270
10271
|
class DayPeriodElementDirective {
|
|
10271
10272
|
elementRef = inject(ElementRef);
|
|
@@ -10289,30 +10290,36 @@ class TimePickerRollAmPmComponent {
|
|
|
10289
10290
|
...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
|
|
10290
10291
|
onClick = input(/* @ts-ignore */
|
|
10291
10292
|
...(ngDevMode ? [undefined, { debugName: "onClick" }] : /* istanbul ignore next */ []));
|
|
10292
|
-
|
|
10293
|
+
refreshInput = input(undefined, { ...(ngDevMode ? { debugName: "refreshInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'refresh' });
|
|
10294
|
+
refresh = linkedSignal(this.refreshInput, /* @ts-ignore */
|
|
10295
|
+
...(ngDevMode ? [{ debugName: "refresh" }] : /* istanbul ignore next */ []));
|
|
10293
10296
|
selectedInput = input(null, { ...(ngDevMode ? { debugName: "selectedInput" } : /* istanbul ignore next */ {}), alias: 'selected' });
|
|
10294
10297
|
selected = linkedSignal(this.selectedInput, /* @ts-ignore */
|
|
10295
10298
|
...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
10296
10299
|
selectedChange = output();
|
|
10297
|
-
dayPeriodElements
|
|
10298
|
-
|
|
10299
|
-
|
|
10300
|
-
|
|
10301
|
-
|
|
10302
|
-
|
|
10303
|
-
|
|
10304
|
-
|
|
10305
|
-
}
|
|
10306
|
-
|
|
10307
|
-
|
|
10308
|
-
|
|
10309
|
-
|
|
10310
|
-
|
|
10300
|
+
dayPeriodElements = viewChildren(DayPeriodElementDirective, /* @ts-ignore */
|
|
10301
|
+
...(ngDevMode ? [{ debugName: "dayPeriodElements" }] : /* istanbul ignore next */ []));
|
|
10302
|
+
#timeElementsEffect = effect(() => {
|
|
10303
|
+
const timeElements = this.dayPeriodElements();
|
|
10304
|
+
if (timeElements.length > 0) {
|
|
10305
|
+
this.refresh.set(true);
|
|
10306
|
+
}
|
|
10307
|
+
}, /* @ts-ignore */
|
|
10308
|
+
...(ngDevMode ? [{ debugName: "#timeElementsEffect" }] : /* istanbul ignore next */ []));
|
|
10309
|
+
#refreshEffect = effect(() => {
|
|
10310
|
+
const refresh = this.refresh();
|
|
10311
|
+
const selected = this.selected();
|
|
10312
|
+
untracked(() => {
|
|
10313
|
+
const timeElements = this.dayPeriodElements();
|
|
10314
|
+
const selectedElement = timeElements.find((element) => {
|
|
10315
|
+
return element.cDayPeriodElement()?.value === selected;
|
|
10311
10316
|
});
|
|
10312
10317
|
this.#init = !selectedElement;
|
|
10313
10318
|
this.scrollToElement(selectedElement?.elementRef.nativeElement);
|
|
10314
|
-
|
|
10315
|
-
|
|
10319
|
+
this.refresh.set(false);
|
|
10320
|
+
});
|
|
10321
|
+
}, /* @ts-ignore */
|
|
10322
|
+
...(ngDevMode ? [{ debugName: "#refreshEffect" }] : /* istanbul ignore next */ []));
|
|
10316
10323
|
scrollToElement(element) {
|
|
10317
10324
|
setTimeout(() => {
|
|
10318
10325
|
const elementSelected = element || this.elementRef.nativeElement.querySelector('.selected');
|
|
@@ -10342,18 +10349,15 @@ class TimePickerRollAmPmComponent {
|
|
|
10342
10349
|
}
|
|
10343
10350
|
}
|
|
10344
10351
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TimePickerRollAmPmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10345
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TimePickerRollAmPmComponent, isStandalone: true, selector: "c-time-picker-roll-am-pm", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: false, transformFunction: null }, onClick: { classPropertyName: "onClick", publicName: "onClick", isSignal: true, isRequired: false, transformFunction: null },
|
|
10352
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TimePickerRollAmPmComponent, isStandalone: true, selector: "c-time-picker-roll-am-pm", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: false, transformFunction: null }, onClick: { classPropertyName: "onClick", publicName: "onClick", isSignal: true, isRequired: false, transformFunction: null }, refreshInput: { classPropertyName: "refreshInput", publicName: "refresh", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.disabled": "disabled()" }, classAttribute: "time-picker-roll-col" }, viewQueries: [{ propertyName: "dayPeriodElements", predicate: DayPeriodElementDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@for (element of elements(); track element.value; let i = $index) {\n <div (click)=\"handleElementClick($event, element)\"\n (keydown)=\"handleElementKeyDown($event, element)\"\n [attr.disabled]=\"element.disabled || null\"\n [cDayPeriodElement]=\"element\"\n [class]=\"{'time-picker-roll-cell': true, selected: element.value === selected(), disabled: element.disabled}\"\n [tabindex]=\"element.disabled ? -1 : 0\"\n role=\"button\"\n >\n {{ element.label }}\n </div>\n}\n", styles: [":host{display:block}:host .disabled{pointer-events:none}.time-picker-roll-cell{--cui-timepicker-roll-cell-width: 53px;width:var(--cui-timepicker-roll-cell-width)}\n"], dependencies: [{ kind: "directive", type: DayPeriodElementDirective, selector: "[cDayPeriodElement]", inputs: ["cDayPeriodElement"], exportAs: ["cDayPeriodElement"] }] });
|
|
10346
10353
|
}
|
|
10347
10354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TimePickerRollAmPmComponent, decorators: [{
|
|
10348
10355
|
type: Component,
|
|
10349
|
-
args: [{ selector: 'c-time-picker-roll-am-pm', imports: [DayPeriodElementDirective],
|
|
10356
|
+
args: [{ selector: 'c-time-picker-roll-am-pm', imports: [DayPeriodElementDirective], host: {
|
|
10350
10357
|
class: 'time-picker-roll-col',
|
|
10351
10358
|
'[class.disabled]': 'disabled()'
|
|
10352
10359
|
}, template: "@for (element of elements(); track element.value; let i = $index) {\n <div (click)=\"handleElementClick($event, element)\"\n (keydown)=\"handleElementKeyDown($event, element)\"\n [attr.disabled]=\"element.disabled || null\"\n [cDayPeriodElement]=\"element\"\n [class]=\"{'time-picker-roll-cell': true, selected: element.value === selected(), disabled: element.disabled}\"\n [tabindex]=\"element.disabled ? -1 : 0\"\n role=\"button\"\n >\n {{ element.label }}\n </div>\n}\n", styles: [":host{display:block}:host .disabled{pointer-events:none}.time-picker-roll-cell{--cui-timepicker-roll-cell-width: 53px;width:var(--cui-timepicker-roll-cell-width)}\n"] }]
|
|
10353
|
-
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: false }] }], onClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClick", required: false }] }],
|
|
10354
|
-
type: ViewChildren,
|
|
10355
|
-
args: [DayPeriodElementDirective]
|
|
10356
|
-
}] } });
|
|
10360
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: false }] }], onClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClick", required: false }] }], refreshInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "refresh", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], dayPeriodElements: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DayPeriodElementDirective), { isSignal: true }] }] } });
|
|
10357
10361
|
|
|
10358
10362
|
// todo: Focus management
|
|
10359
10363
|
class TimePickerComponent {
|
|
@@ -10361,7 +10365,11 @@ class TimePickerComponent {
|
|
|
10361
10365
|
static ngAcceptInputType_inputReadOnly;
|
|
10362
10366
|
static ngAcceptInputType_seconds;
|
|
10363
10367
|
static ngAcceptInputType_visible;
|
|
10368
|
+
#cdr = inject(ChangeDetectorRef);
|
|
10364
10369
|
#destroyRef = inject(DestroyRef);
|
|
10370
|
+
#elementRef = inject((ElementRef));
|
|
10371
|
+
#ngZone = inject(NgZone);
|
|
10372
|
+
#focusMonitor = inject(FocusMonitor);
|
|
10365
10373
|
/**
|
|
10366
10374
|
* Toggle visibility or set the content of the cleaner button.
|
|
10367
10375
|
* @return boolean
|
|
@@ -10434,7 +10442,7 @@ class TimePickerComponent {
|
|
|
10434
10442
|
locale = input('default', /* @ts-ignore */
|
|
10435
10443
|
...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
|
|
10436
10444
|
/**
|
|
10437
|
-
* Specifies short hint visible in time input.
|
|
10445
|
+
* Specifies a short hint visible in time input.
|
|
10438
10446
|
* @return string
|
|
10439
10447
|
* @default 'Select time'
|
|
10440
10448
|
*/
|
|
@@ -10454,7 +10462,7 @@ class TimePickerComponent {
|
|
|
10454
10462
|
size = input(/* @ts-ignore */
|
|
10455
10463
|
...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
|
|
10456
10464
|
/**
|
|
10457
|
-
*
|
|
10465
|
+
* Initially selected time.
|
|
10458
10466
|
* @return Date | string | null | number
|
|
10459
10467
|
* @default undefined
|
|
10460
10468
|
*/
|
|
@@ -10506,7 +10514,24 @@ class TimePickerComponent {
|
|
|
10506
10514
|
onBlur() {
|
|
10507
10515
|
this.onTouched();
|
|
10508
10516
|
}
|
|
10517
|
+
inputRef = viewChild('inputRef', { ...(ngDevMode ? { debugName: "inputRef" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
10518
|
+
#inputRefEffect = effect((OnCleanup) => {
|
|
10519
|
+
const inputRef = this.inputRef();
|
|
10520
|
+
if (inputRef) {
|
|
10521
|
+
this.#focusMonitor.monitor(inputRef).subscribe((origin) => {
|
|
10522
|
+
if (origin === 'keyboard') {
|
|
10523
|
+
this.handleFocus();
|
|
10524
|
+
}
|
|
10525
|
+
});
|
|
10526
|
+
OnCleanup(() => {
|
|
10527
|
+
this.#focusMonitor.stopMonitoring(inputRef);
|
|
10528
|
+
});
|
|
10529
|
+
}
|
|
10530
|
+
}, /* @ts-ignore */
|
|
10531
|
+
...(ngDevMode ? [{ debugName: "#inputRefEffect" }] : /* istanbul ignore next */ []));
|
|
10509
10532
|
dropdownRef = viewChild(DropdownComponent, { ...(ngDevMode ? { debugName: "dropdownRef" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
10533
|
+
dropdownComponent = viewChild(DropdownComponent, /* @ts-ignore */
|
|
10534
|
+
...(ngDevMode ? [{ debugName: "dropdownComponent" }] : /* istanbul ignore next */ []));
|
|
10510
10535
|
contentTemplates = contentChildren(TemplateIdDirective, { ...(ngDevMode ? { debugName: "contentTemplates" } : /* istanbul ignore next */ {}), descendants: true });
|
|
10511
10536
|
templates = computed(() => {
|
|
10512
10537
|
return this.contentTemplates().reduce((acc, child) => {
|
|
@@ -10658,9 +10683,8 @@ class TimePickerComponent {
|
|
|
10658
10683
|
emitTime(time) {
|
|
10659
10684
|
const timeValue = !!time && isValidTime(time) ? new Date(time.getTime()) : undefined;
|
|
10660
10685
|
if (this._timeInternal?.getTime() !== timeValue?.getTime()) {
|
|
10661
|
-
this.timeChange.emit(timeValue);
|
|
10662
10686
|
this.onChange(timeValue);
|
|
10663
|
-
this.
|
|
10687
|
+
this.timeChange.emit(timeValue);
|
|
10664
10688
|
this._timeInternal = timeValue;
|
|
10665
10689
|
}
|
|
10666
10690
|
this.timeInputValue =
|
|
@@ -10673,6 +10697,19 @@ class TimePickerComponent {
|
|
|
10673
10697
|
this.updateSelectTime();
|
|
10674
10698
|
this.setChangeHandlers();
|
|
10675
10699
|
}
|
|
10700
|
+
ngAfterViewInit() {
|
|
10701
|
+
this.#focusMonitor.monitor(this.#elementRef, true).subscribe((origin) => {
|
|
10702
|
+
if (origin === null) {
|
|
10703
|
+
this.#ngZone.run(() => {
|
|
10704
|
+
this.onBlur();
|
|
10705
|
+
this.#cdr.markForCheck();
|
|
10706
|
+
});
|
|
10707
|
+
}
|
|
10708
|
+
});
|
|
10709
|
+
this.#destroyRef.onDestroy(() => {
|
|
10710
|
+
this.#focusMonitor.stopMonitoring(this.#elementRef);
|
|
10711
|
+
});
|
|
10712
|
+
}
|
|
10676
10713
|
ngOnChanges(changes) {
|
|
10677
10714
|
if (changes['time']) {
|
|
10678
10715
|
if (!changes['time'].firstChange) {
|
|
@@ -10814,15 +10851,18 @@ class TimePickerComponent {
|
|
|
10814
10851
|
return;
|
|
10815
10852
|
}
|
|
10816
10853
|
this.dropdownRef()?.nativeElement?.classList.remove('show');
|
|
10817
|
-
|
|
10818
|
-
this.
|
|
10819
|
-
}
|
|
10854
|
+
if (this.dropdownComponent()?.visible()) {
|
|
10855
|
+
this.dropdownComponent()?.visible.set(true);
|
|
10856
|
+
}
|
|
10820
10857
|
}
|
|
10821
10858
|
handleFocus($event) {
|
|
10822
10859
|
if (this.disabled()) {
|
|
10823
10860
|
return;
|
|
10824
10861
|
}
|
|
10825
10862
|
this.dropdownRef()?.nativeElement?.classList.add('show');
|
|
10863
|
+
if (!this.dropdownComponent()?.visible()) {
|
|
10864
|
+
this.dropdownComponent()?.visible.set(true);
|
|
10865
|
+
}
|
|
10826
10866
|
}
|
|
10827
10867
|
setChangeHandlers() {
|
|
10828
10868
|
if (this.variant() !== 'select') {
|
|
@@ -10854,13 +10894,13 @@ class TimePickerComponent {
|
|
|
10854
10894
|
.subscribe();
|
|
10855
10895
|
}
|
|
10856
10896
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10857
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TimePickerComponent, isStandalone: true, selector: "c-time-picker", inputs: { cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: true, isRequired: false, transformFunction: null }, dateTimeFormatOptions: { classPropertyName: "dateTimeFormatOptions", publicName: "dateTimeFormatOptions", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterHours: { classPropertyName: "filterHours", publicName: "filterHours", isSignal: true, isRequired: false, transformFunction: null }, filterMinutes: { classPropertyName: "filterMinutes", publicName: "filterMinutes", isSignal: true, isRequired: false, transformFunction: null }, filterSeconds: { classPropertyName: "filterSeconds", publicName: "filterSeconds", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, inputReadOnly: { classPropertyName: "inputReadOnly", publicName: "inputReadOnly", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeChange: "timeChange" }, host: {
|
|
10897
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TimePickerComponent, isStandalone: true, selector: "c-time-picker", inputs: { cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: true, isRequired: false, transformFunction: null }, dateTimeFormatOptions: { classPropertyName: "dateTimeFormatOptions", publicName: "dateTimeFormatOptions", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterHours: { classPropertyName: "filterHours", publicName: "filterHours", isSignal: true, isRequired: false, transformFunction: null }, filterMinutes: { classPropertyName: "filterMinutes", publicName: "filterMinutes", isSignal: true, isRequired: false, transformFunction: null }, filterSeconds: { classPropertyName: "filterSeconds", publicName: "filterSeconds", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, inputReadOnly: { classPropertyName: "inputReadOnly", publicName: "inputReadOnly", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeChange: "timeChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
|
|
10858
10898
|
{
|
|
10859
10899
|
provide: NG_VALUE_ACCESSOR,
|
|
10860
10900
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
10861
10901
|
multi: true
|
|
10862
10902
|
}
|
|
10863
|
-
], 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\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectHours\"\n >\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 {{ ' :'\n }}<select\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectMinutes\"\n >\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 {{ ' :'\n }}<select\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectSeconds\"\n >\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\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectDayPeriod\"\n >\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\n (
|
|
10903
|
+
], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "dropdownRef", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "dropdownComponent", first: true, predicate: DropdownComponent, descendants: true, 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\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectHours\"\n >\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 {{ ' :'\n }}<select\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectMinutes\"\n >\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 {{ ' :'\n }}<select\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectSeconds\"\n >\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\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectDayPeriod\"\n >\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\n (change)=\"handleTimeInputChange($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 #inputRef\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\n *ngTemplateOutlet=\"$safeNavigationMigration(tmpl?.['timePickerFooter']); context: { $implicit: dropdown }\"\n />\n </div>\n }\n </div>\n </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}:host-context(.input-group) :host:not(:first-child) .time-picker-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .time-picker-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .time-picker-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .time-picker-input-group{border-start-end-radius:var(--cui-time-picker-border-radius);border-end-end-radius:var(--cui-time-picker-border-radius)}\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[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"] }] });
|
|
10864
10904
|
}
|
|
10865
10905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
10866
10906
|
type: Component,
|
|
@@ -10879,13 +10919,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
10879
10919
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
10880
10920
|
multi: true
|
|
10881
10921
|
}
|
|
10882
|
-
],
|
|
10883
|
-
'(focusout)': 'onBlur()',
|
|
10922
|
+
], host: {
|
|
10884
10923
|
'[class]': 'hostClasses()'
|
|
10885
|
-
}, 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\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectHours\"\n >\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 {{ ' :'\n }}<select\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectMinutes\"\n >\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 {{ ' :'\n }}<select\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectSeconds\"\n >\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\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectDayPeriod\"\n >\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\n (
|
|
10924
|
+
}, 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\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectHours\"\n >\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 {{ ' :'\n }}<select\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectMinutes\"\n >\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 {{ ' :'\n }}<select\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectSeconds\"\n >\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\n (blur)=\"onBlur()\"\n [attr.disabled]=\"disabled() || null\"\n [sizing]=\"size() ?? ''\"\n cSelect\n class=\"time-picker-inline-select ms-0\"\n formControlName=\"selectDayPeriod\"\n >\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\n (change)=\"handleTimeInputChange($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 #inputRef\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\n *ngTemplateOutlet=\"$safeNavigationMigration(tmpl?.['timePickerFooter']); context: { $implicit: dropdown }\"\n />\n </div>\n }\n </div>\n </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}:host-context(.input-group) :host:not(:first-child) .time-picker-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .time-picker-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .time-picker-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .time-picker-input-group{border-start-end-radius:var(--cui-time-picker-border-radius);border-end-end-radius:var(--cui-time-picker-border-radius)}\n"] }]
|
|
10886
10925
|
}], 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: [{
|
|
10887
10926
|
type: Input
|
|
10888
|
-
}], 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 }] }] } });
|
|
10927
|
+
}], 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"] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { ...{ read: ElementRef }, isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownComponent), { ...{ read: ElementRef }, isSignal: true }] }], dropdownComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownComponent), { isSignal: true }] }], contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateIdDirective), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
10889
10928
|
|
|
10890
10929
|
class TimePickerModule {
|
|
10891
10930
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -11237,8 +11276,8 @@ class DateRangePickerComponent {
|
|
|
11237
11276
|
const newValue = value;
|
|
11238
11277
|
if (JSON.stringify(this.#value()) !== JSON.stringify(newValue)) {
|
|
11239
11278
|
this.#value.set(newValue);
|
|
11240
|
-
this.valueChange.emit(this.value);
|
|
11241
11279
|
this.onChange(this.value);
|
|
11280
|
+
this.valueChange.emit(this.value);
|
|
11242
11281
|
this.#cdr.markForCheck();
|
|
11243
11282
|
if (this.closeOnSelect() && this.visible()) {
|
|
11244
11283
|
const hasValue = this.range() ? !!(newValue.startDate && newValue.endDate) : !!newValue;
|
|
@@ -11252,7 +11291,7 @@ class DateRangePickerComponent {
|
|
|
11252
11291
|
#value = signal({ startDate: null, endDate: null }, /* @ts-ignore */
|
|
11253
11292
|
...(ngDevMode ? [{ debugName: "#value" }] : /* istanbul ignore next */ []));
|
|
11254
11293
|
/**
|
|
11255
|
-
* Set length or format of day name.
|
|
11294
|
+
* Set the length or format of the day name.
|
|
11256
11295
|
* @return WeekdayFormatType
|
|
11257
11296
|
* @default 'short'
|
|
11258
11297
|
*/
|