@coreui/angular-pro 4.2.0-next.0 → 4.2.0-next.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.
@@ -13130,7 +13130,9 @@ class TimePickerComponent {
13130
13130
  * @default 'roll'
13131
13131
  */
13132
13132
  this.variant = 'roll';
13133
+ this._visible = false;
13133
13134
  this.timeChange = new EventEmitter(false);
13135
+ this.templates = {};
13134
13136
  this.hour12 = isHour12(this.locale);
13135
13137
  this.dayPeriods = [
13136
13138
  { value: 'am', label: 'am' },
@@ -13228,13 +13230,20 @@ class TimePickerComponent {
13228
13230
  get time() {
13229
13231
  return this._time;
13230
13232
  }
13233
+ /**
13234
+ * Toggle the visibility of dropdown menu component.
13235
+ * @type boolean
13236
+ * @default false
13237
+ */
13238
+ set visible(value) {
13239
+ this._visible = coerceBooleanProperty(value);
13240
+ }
13241
+ get visible() {
13242
+ return this._visible;
13243
+ }
13231
13244
  onBlur() {
13232
13245
  this.onTouched();
13233
13246
  }
13234
- // dayPeriodElements = [
13235
- // {value: 'am', label: 'am'},
13236
- // {value: 'pm', label: 'pm'}
13237
- // ]
13238
13247
  set timeInputValue(value) {
13239
13248
  this.timeInput.setValue(value);
13240
13249
  this._timeInputValue = value;
@@ -13290,20 +13299,20 @@ class TimePickerComponent {
13290
13299
  this._hour = this._hour < 0 ? 0 : this._hour;
13291
13300
  this._minute = this._minute < 0 ? 0 : this._minute;
13292
13301
  this._second = this._second < 0 ? 0 : this._second;
13293
- const time = new Date(this._time?.getTime() ?? new Date());
13302
+ const time = new Date(this._time?.getTime() || new Date());
13294
13303
  time.setHours(this.hour, this.minute, this.second, 0);
13295
13304
  this.time = time;
13296
13305
  this.emitTime(time);
13297
13306
  }
13298
13307
  clearTime() {
13299
- this._hour = -1;
13300
- this._minute = -1;
13301
- this._second = -1;
13302
- this.dayPeriod = 'am';
13303
13308
  if (this.time) {
13304
13309
  this._time = undefined;
13305
13310
  this.emitTime(undefined);
13306
13311
  }
13312
+ this._hour = -1;
13313
+ this._minute = -1;
13314
+ this._second = -1;
13315
+ this.dayPeriod = 'am';
13307
13316
  this.patchSelectTimeValues();
13308
13317
  }
13309
13318
  emitTime(time) {
@@ -13329,6 +13338,13 @@ class TimePickerComponent {
13329
13338
  }
13330
13339
  }
13331
13340
  }
13341
+ ngAfterViewInit() {
13342
+ setTimeout(() => {
13343
+ this.contentTemplates.forEach((child) => {
13344
+ this.templates[child.id] = child.templateRef;
13345
+ });
13346
+ });
13347
+ }
13332
13348
  setTimeLists() {
13333
13349
  this.dayPeriods = getDayPeriods(this.locale, this.dateTimeFormatOptions);
13334
13350
  this.hour12 = isHour12(this.locale);
@@ -13453,7 +13469,6 @@ class TimePickerComponent {
13453
13469
  }
13454
13470
  handleTimeInputChange($event) {
13455
13471
  const value = $event.target?.value;
13456
- console.log('handleTimeInputChange', isValidTime(value), value);
13457
13472
  if (!isValidTime(value)) {
13458
13473
  this.clearTime();
13459
13474
  return;
@@ -13466,22 +13481,22 @@ class TimePickerComponent {
13466
13481
  }
13467
13482
  }
13468
13483
  TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
13469
- TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TimePickerComponent, selector: "c-time-picker-select", inputs: { cleaner: "cleaner", dateTimeFormatOptions: "dateTimeFormatOptions", disabled: "disabled", filterHours: "filterHours", filterMinutes: "filterMinutes", filterSeconds: "filterSeconds", indicator: "indicator", inputReadOnly: "inputReadOnly", locale: "locale", placeholder: "placeholder", seconds: "seconds", size: "size", time: "time", variant: "variant" }, outputs: { timeChange: "timeChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
13484
+ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TimePickerComponent, selector: "c-time-picker", inputs: { cleaner: "cleaner", dateTimeFormatOptions: "dateTimeFormatOptions", disabled: "disabled", filterHours: "filterHours", filterMinutes: "filterMinutes", filterSeconds: "filterSeconds", indicator: "indicator", inputReadOnly: "inputReadOnly", locale: "locale", placeholder: "placeholder", seconds: "seconds", size: "size", time: "time", variant: "variant", visible: "visible" }, outputs: { timeChange: "timeChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
13470
13485
  {
13471
13486
  provide: NG_VALUE_ACCESSOR,
13472
13487
  useExisting: forwardRef(() => TimePickerComponent),
13473
13488
  multi: true
13474
13489
  }
13475
- ], exportAs: ["cTimePickerSelect"], usesOnChanges: true, ngImport: i0, template: "<div class=\"date-picker-timepickers\" *ngIf=\"variant==='select'\">\n <div class=\"picker time-picker\">\n <div [formGroup]=\"selectTime\" class=\"time-picker-body\">\n <span class=\"time-picker-inline-icon\"></span>\n <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectHours\" (ngModelChange)=\"handleSelectHoursChange($event)\">\n <option *ngFor=\"let hour of listOfHours12; index as i; trackBy: trackByHour\" [ngValue]=\"hour.value\" [attr.disabled]=\"hour.disabled || null\">{{hour.label}}</option>\n </select>\n {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectMinutes\" (ngModelChange)=\"handleSelectMinutesChange($event)\">\n <option *ngFor=\"let minute of listOfMinutes\" [ngValue]=\"minute.value\" [attr.disabled]=\"minute.disabled || null\">{{minute.label}}</option>\n </select>\n <ng-template [ngIf]=\"seconds\">\n {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectSeconds\" (ngModelChange)=\"handleSelectSecondsChange($event)\">\n <option *ngFor=\"let second of listOfSeconds\" [ngValue]=\"second.value\" [attr.disabled]=\"second.disabled || null\">{{second.label}}</option>\n </select>\n </ng-template>\n <ng-template [ngIf]=\"hour12\">\n <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectDayPeriod\" (ngModelChange)=\"handleSelectDayPeriodChange($event)\">\n <option *ngFor=\"let dayPeriod of dayPeriods\" [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">{{dayPeriod.label}}</option>\n </select>\n </ng-template>\n </div>\n </div>\n</div>\n\n<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"time-picker picker\" *ngIf=\"variant==='roll'\">\n <c-input-group [caret]=\"false\"\n [disabled]=\"disabled ?? dropdown.visible\"\n [sizing]=\"size ?? ''\"\n cDropdownToggle\n class=\"picker-input-group\">\n <input (change)=\"handleTimeInputChange($event)\"\n [formControl]=\"timeInput\"\n [placeholder]=\"placeholder\"\n cFormControl\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\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 [readonly]=\"inputReadOnly ?? null\"\n >\n <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n <span class=\"picker-input-group-icon time-picker-input-icon\"></span>\n </span>\n <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && time && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n <span class=\"picker-input-group-icon time-picker-cleaner-icon\"></span>\n </span>\n </span>\n\n </c-input-group>\n <div cDropdownMenu #dropdownMenu=\"cDropdownMenu\">\n <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n <c-time-picker-roll-col\n [elements]=\"listOfHours12\"\n [selected]=\"hour\"\n (selectedChange)=\"handleSelectHoursChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-col>\n <c-time-picker-roll-col\n [elements]=\"listOfMinutes\"\n [selected]=\"minute\"\n (selectedChange)=\"handleSelectMinutesChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-col>\n <c-time-picker-roll-col\n *ngIf=\"seconds\"\n [elements]=\"listOfSeconds\"\n [selected]=\"second\"\n (selectedChange)=\"handleSelectSecondsChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-col>\n <c-time-picker-roll-am-pm\n *ngIf=\"hour12\" [elements]=\"dayPeriods\"\n [selected]=\"dayPeriod\"\n (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-am-pm>\n </div>\n </div>\n</c-dropdown>\n", styles: [".disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "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", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: TimePickerRollColComponent, selector: "c-time-picker-roll-col", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"], exportAs: ["cTimePickerRollCol"] }, { kind: "component", type: TimePickerRollAmPmComponent, selector: "c-time-picker-roll-am-pm", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"] }] });
13490
+ ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "<div class=\"date-picker-timepickers\" *ngIf=\"variant==='select'\">\n <div class=\"picker time-picker\">\n <div [formGroup]=\"selectTime\" class=\"time-picker-body\">\n <span class=\"time-picker-inline-icon\"></span>\n <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectHours\" (ngModelChange)=\"handleSelectHoursChange($event)\">\n <option *ngFor=\"let hour of listOfHours12; index as i; trackBy: trackByHour\" [ngValue]=\"hour.value\" [attr.disabled]=\"hour.disabled || null\">{{hour.label}}</option>\n </select>\n {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectMinutes\" (ngModelChange)=\"handleSelectMinutesChange($event)\">\n <option *ngFor=\"let minute of listOfMinutes\" [ngValue]=\"minute.value\" [attr.disabled]=\"minute.disabled || null\">{{minute.label}}</option>\n </select>\n <ng-template [ngIf]=\"seconds\">\n {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectSeconds\" (ngModelChange)=\"handleSelectSecondsChange($event)\">\n <option *ngFor=\"let second of listOfSeconds\" [ngValue]=\"second.value\" [attr.disabled]=\"second.disabled || null\">{{second.label}}</option>\n </select>\n </ng-template>\n <ng-template [ngIf]=\"hour12\">\n <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectDayPeriod\" (ngModelChange)=\"handleSelectDayPeriodChange($event)\">\n <option *ngFor=\"let dayPeriod of dayPeriods\" [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">{{dayPeriod.label}}</option>\n </select>\n </ng-template>\n </div>\n </div>\n</div>\n\n<c-dropdown #dropdown=\"cDropdown\" autoClose=\"outside\" class=\"time-picker picker\" *ngIf=\"variant==='roll'\" [visible]=\"visible\">\n <c-input-group [caret]=\"false\"\n [disabled]=\"disabled ?? dropdown.visible\"\n [sizing]=\"size ?? ''\"\n cDropdownToggle\n class=\"picker-input-group\">\n <input (change)=\"handleTimeInputChange($event)\"\n [formControl]=\"timeInput\"\n [placeholder]=\"placeholder\"\n cFormControl\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\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 [readonly]=\"inputReadOnly ?? null\"\n >\n <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n <span class=\"picker-input-group-icon time-picker-input-icon\"></span>\n </span>\n <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && time && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n <span class=\"picker-input-group-icon time-picker-cleaner-icon\"></span>\n </span>\n </span>\n\n </c-input-group>\n <div cDropdownMenu #dropdownMenu=\"cDropdownMenu\">\n <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n <c-time-picker-roll-col\n [elements]=\"listOfHours12\"\n [selected]=\"hour\"\n (selectedChange)=\"handleSelectHoursChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-col>\n <c-time-picker-roll-col\n [elements]=\"listOfMinutes\"\n [selected]=\"minute\"\n (selectedChange)=\"handleSelectMinutesChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-col>\n <c-time-picker-roll-col\n *ngIf=\"seconds\"\n [elements]=\"listOfSeconds\"\n [selected]=\"second\"\n (selectedChange)=\"handleSelectSecondsChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-col>\n <c-time-picker-roll-am-pm\n *ngIf=\"hour12\" [elements]=\"dayPeriods\"\n [selected]=\"dayPeriod\"\n (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-am-pm>\n </div>\n <div *ngIf=\"templates?.timePickerFooter\" class=\"picker-footer\">\n <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n </div>\n </div>\n</c-dropdown>\n", styles: [".disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "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", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: TimePickerRollColComponent, selector: "c-time-picker-roll-col", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"], exportAs: ["cTimePickerRollCol"] }, { kind: "component", type: TimePickerRollAmPmComponent, selector: "c-time-picker-roll-am-pm", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"] }] });
13476
13491
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TimePickerComponent, decorators: [{
13477
13492
  type: Component,
13478
- args: [{ selector: 'c-time-picker-select', exportAs: 'cTimePickerSelect', providers: [
13493
+ args: [{ selector: 'c-time-picker', exportAs: 'cTimePicker', providers: [
13479
13494
  {
13480
13495
  provide: NG_VALUE_ACCESSOR,
13481
13496
  useExisting: forwardRef(() => TimePickerComponent),
13482
13497
  multi: true
13483
13498
  }
13484
- ], template: "<div class=\"date-picker-timepickers\" *ngIf=\"variant==='select'\">\n <div class=\"picker time-picker\">\n <div [formGroup]=\"selectTime\" class=\"time-picker-body\">\n <span class=\"time-picker-inline-icon\"></span>\n <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectHours\" (ngModelChange)=\"handleSelectHoursChange($event)\">\n <option *ngFor=\"let hour of listOfHours12; index as i; trackBy: trackByHour\" [ngValue]=\"hour.value\" [attr.disabled]=\"hour.disabled || null\">{{hour.label}}</option>\n </select>\n {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectMinutes\" (ngModelChange)=\"handleSelectMinutesChange($event)\">\n <option *ngFor=\"let minute of listOfMinutes\" [ngValue]=\"minute.value\" [attr.disabled]=\"minute.disabled || null\">{{minute.label}}</option>\n </select>\n <ng-template [ngIf]=\"seconds\">\n {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectSeconds\" (ngModelChange)=\"handleSelectSecondsChange($event)\">\n <option *ngFor=\"let second of listOfSeconds\" [ngValue]=\"second.value\" [attr.disabled]=\"second.disabled || null\">{{second.label}}</option>\n </select>\n </ng-template>\n <ng-template [ngIf]=\"hour12\">\n <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectDayPeriod\" (ngModelChange)=\"handleSelectDayPeriodChange($event)\">\n <option *ngFor=\"let dayPeriod of dayPeriods\" [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">{{dayPeriod.label}}</option>\n </select>\n </ng-template>\n </div>\n </div>\n</div>\n\n<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"time-picker picker\" *ngIf=\"variant==='roll'\">\n <c-input-group [caret]=\"false\"\n [disabled]=\"disabled ?? dropdown.visible\"\n [sizing]=\"size ?? ''\"\n cDropdownToggle\n class=\"picker-input-group\">\n <input (change)=\"handleTimeInputChange($event)\"\n [formControl]=\"timeInput\"\n [placeholder]=\"placeholder\"\n cFormControl\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\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 [readonly]=\"inputReadOnly ?? null\"\n >\n <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n <span class=\"picker-input-group-icon time-picker-input-icon\"></span>\n </span>\n <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && time && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n <span class=\"picker-input-group-icon time-picker-cleaner-icon\"></span>\n </span>\n </span>\n\n </c-input-group>\n <div cDropdownMenu #dropdownMenu=\"cDropdownMenu\">\n <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n <c-time-picker-roll-col\n [elements]=\"listOfHours12\"\n [selected]=\"hour\"\n (selectedChange)=\"handleSelectHoursChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-col>\n <c-time-picker-roll-col\n [elements]=\"listOfMinutes\"\n [selected]=\"minute\"\n (selectedChange)=\"handleSelectMinutesChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-col>\n <c-time-picker-roll-col\n *ngIf=\"seconds\"\n [elements]=\"listOfSeconds\"\n [selected]=\"second\"\n (selectedChange)=\"handleSelectSecondsChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-col>\n <c-time-picker-roll-am-pm\n *ngIf=\"hour12\" [elements]=\"dayPeriods\"\n [selected]=\"dayPeriod\"\n (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-am-pm>\n </div>\n </div>\n</c-dropdown>\n", styles: [".disabled{pointer-events:none}\n"] }]
13499
+ ], template: "<div class=\"date-picker-timepickers\" *ngIf=\"variant==='select'\">\n <div class=\"picker time-picker\">\n <div [formGroup]=\"selectTime\" class=\"time-picker-body\">\n <span class=\"time-picker-inline-icon\"></span>\n <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectHours\" (ngModelChange)=\"handleSelectHoursChange($event)\">\n <option *ngFor=\"let hour of listOfHours12; index as i; trackBy: trackByHour\" [ngValue]=\"hour.value\" [attr.disabled]=\"hour.disabled || null\">{{hour.label}}</option>\n </select>\n {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectMinutes\" (ngModelChange)=\"handleSelectMinutesChange($event)\">\n <option *ngFor=\"let minute of listOfMinutes\" [ngValue]=\"minute.value\" [attr.disabled]=\"minute.disabled || null\">{{minute.label}}</option>\n </select>\n <ng-template [ngIf]=\"seconds\">\n {{' :'}}<select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectSeconds\" (ngModelChange)=\"handleSelectSecondsChange($event)\">\n <option *ngFor=\"let second of listOfSeconds\" [ngValue]=\"second.value\" [attr.disabled]=\"second.disabled || null\">{{second.label}}</option>\n </select>\n </ng-template>\n <ng-template [ngIf]=\"hour12\">\n <select [attr.disabled]=\"disabled || null\" cSelect class=\"ms-0\" formControlName=\"selectDayPeriod\" (ngModelChange)=\"handleSelectDayPeriodChange($event)\">\n <option *ngFor=\"let dayPeriod of dayPeriods\" [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">{{dayPeriod.label}}</option>\n </select>\n </ng-template>\n </div>\n </div>\n</div>\n\n<c-dropdown #dropdown=\"cDropdown\" autoClose=\"outside\" class=\"time-picker picker\" *ngIf=\"variant==='roll'\" [visible]=\"visible\">\n <c-input-group [caret]=\"false\"\n [disabled]=\"disabled ?? dropdown.visible\"\n [sizing]=\"size ?? ''\"\n cDropdownToggle\n class=\"picker-input-group\">\n <input (change)=\"handleTimeInputChange($event)\"\n [formControl]=\"timeInput\"\n [placeholder]=\"placeholder\"\n cFormControl\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\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 [readonly]=\"inputReadOnly ?? null\"\n >\n <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n <span class=\"picker-input-group-icon time-picker-input-icon\"></span>\n </span>\n <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && time && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n <span class=\"picker-input-group-icon time-picker-cleaner-icon\"></span>\n </span>\n </span>\n\n </c-input-group>\n <div cDropdownMenu #dropdownMenu=\"cDropdownMenu\">\n <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n <c-time-picker-roll-col\n [elements]=\"listOfHours12\"\n [selected]=\"hour\"\n (selectedChange)=\"handleSelectHoursChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-col>\n <c-time-picker-roll-col\n [elements]=\"listOfMinutes\"\n [selected]=\"minute\"\n (selectedChange)=\"handleSelectMinutesChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-col>\n <c-time-picker-roll-col\n *ngIf=\"seconds\"\n [elements]=\"listOfSeconds\"\n [selected]=\"second\"\n (selectedChange)=\"handleSelectSecondsChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-col>\n <c-time-picker-roll-am-pm\n *ngIf=\"hour12\" [elements]=\"dayPeriods\"\n [selected]=\"dayPeriod\"\n (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n [disabled]=\"disabled\"\n [refresh]=\"dropdownMenu.visible\"\n >\n </c-time-picker-roll-am-pm>\n </div>\n <div *ngIf=\"templates?.timePickerFooter\" class=\"picker-footer\">\n <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n </div>\n </div>\n</c-dropdown>\n", styles: [".disabled{pointer-events:none}\n"] }]
13485
13500
  }], ctorParameters: function () { return []; }, propDecorators: { cleaner: [{
13486
13501
  type: Input
13487
13502
  }], dateTimeFormatOptions: [{
@@ -13510,11 +13525,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
13510
13525
  type: Input
13511
13526
  }], variant: [{
13512
13527
  type: Input
13528
+ }], visible: [{
13529
+ type: Input
13513
13530
  }], timeChange: [{
13514
13531
  type: Output
13515
13532
  }], onBlur: [{
13516
13533
  type: HostListener,
13517
13534
  args: ['blur']
13535
+ }], dropdown: [{
13536
+ type: ViewChild,
13537
+ args: ['dropdown']
13538
+ }], contentTemplates: [{
13539
+ type: ContentChildren,
13540
+ args: [TemplateIdDirective, { descendants: true }]
13518
13541
  }] } });
13519
13542
 
13520
13543
  class TimePickerModule {