@coreui/angular-pro 4.2.0-next.3 → 4.2.0-next.4

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.
@@ -2367,6 +2367,9 @@ class CalendarComponent {
2367
2367
  set startDate(value) {
2368
2368
  this._startDate = !!value ? tryDate(value, 'startDate') : null;
2369
2369
  this.calendarService.update({ startDate: this._startDate });
2370
+ if (!this.range || !this._startDate || (this.endDate && this._startDate > this.endDate)) {
2371
+ this.endDate = null;
2372
+ }
2370
2373
  }
2371
2374
  get startDate() {
2372
2375
  return this._startDate;
@@ -2377,10 +2380,11 @@ class CalendarComponent {
2377
2380
  */
2378
2381
  set endDate(value) {
2379
2382
  this._endDate = !!value ? tryDate(value, 'endDate') : null;
2383
+ this._endDate = this.range ? this._endDate : null;
2380
2384
  this.calendarService.update({ endDate: this._endDate });
2381
2385
  }
2382
2386
  get endDate() {
2383
- return this._endDate;
2387
+ return this.range ? this._endDate : null;
2384
2388
  }
2385
2389
  /**
2386
2390
  * Sets the day of start week.
@@ -2520,17 +2524,20 @@ class CalendarComponent {
2520
2524
  for (const key of keys) {
2521
2525
  if (key in this) {
2522
2526
  // @ts-ignore
2523
- this[key] = state[key];
2524
- if (key === 'startDate') {
2525
- setTimeout(() => {
2526
- this.startDateChange.emit(this._startDate);
2527
- });
2528
- continue;
2529
- }
2530
- if (key === 'endDate') {
2531
- setTimeout(() => {
2532
- this.endDateChange.emit(this._endDate);
2533
- });
2527
+ if (this[key] !== state[key]) {
2528
+ // @ts-ignore
2529
+ this[key] = state[key];
2530
+ if (key === 'startDate') {
2531
+ setTimeout(() => {
2532
+ this.startDateChange.emit(this._startDate);
2533
+ });
2534
+ continue;
2535
+ }
2536
+ if (key === 'endDate') {
2537
+ setTimeout(() => {
2538
+ this.endDateChange.emit(this._endDate);
2539
+ });
2540
+ }
2534
2541
  }
2535
2542
  }
2536
2543
  }
@@ -2579,7 +2586,8 @@ class CalendarComponent {
2579
2586
  * @type void
2580
2587
  */
2581
2588
  clearDates() {
2582
- this.calendarService.update({ startDate: null, endDate: null });
2589
+ this.calendarService.update({ endDate: null });
2590
+ this.calendarService.update({ startDate: null });
2583
2591
  }
2584
2592
  }
2585
2593
  CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CalendarComponent, deps: [{ token: CalendarService }], target: i0.ɵɵFactoryTarget.Component });
@@ -3738,36 +3746,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
3738
3746
  }]
3739
3747
  }] });
3740
3748
 
3741
- class StartDateDirective {
3742
- constructor(elementRef) {
3743
- this.elementRef = elementRef;
3744
- }
3745
- }
3746
- StartDateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: StartDateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
3747
- StartDateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: StartDateDirective, selector: "[cStartDate]", exportAs: ["cStartDate"], ngImport: i0 });
3748
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: StartDateDirective, decorators: [{
3749
- type: Directive,
3750
- args: [{
3751
- selector: '[cStartDate]',
3752
- exportAs: 'cStartDate'
3753
- }]
3754
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
3755
-
3756
- class EndDateDirective {
3757
- constructor(elementRef) {
3758
- this.elementRef = elementRef;
3759
- }
3760
- }
3761
- EndDateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: EndDateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
3762
- EndDateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: EndDateDirective, selector: "[cEndDate]", exportAs: ["cEndDate"], ngImport: i0 });
3763
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: EndDateDirective, decorators: [{
3764
- type: Directive,
3765
- args: [{
3766
- selector: '[cEndDate]',
3767
- exportAs: 'cEndDate'
3768
- }]
3769
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
3770
-
3771
3749
  class FormControlDirective {
3772
3750
  constructor(hostElement) {
3773
3751
  this.hostElement = hostElement;
@@ -5773,6 +5751,7 @@ class DateRangePickerComponent {
5773
5751
  return;
5774
5752
  }
5775
5753
  elementRef.nativeElement.value = (_a = date === null || date === void 0 ? void 0 : date.toLocaleDateString(this.locale)) !== null && _a !== void 0 ? _a : '';
5754
+ // elementRef.nativeElement.valueAsDate = date;
5776
5755
  return;
5777
5756
  };
5778
5757
  this.onChange = (value) => { };
@@ -5974,6 +5953,19 @@ class DateRangePickerComponent {
5974
5953
  });
5975
5954
  });
5976
5955
  }
5956
+ ngOnChanges(changes) {
5957
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
5958
+ if (changes['date']) {
5959
+ // for date-picker component
5960
+ this.startDateValue = (_c = (_b = (_a = changes['date']) === null || _a === void 0 ? void 0 : _a.currentValue) === null || _b === void 0 ? void 0 : _b.toLocaleDateString(this.locale)) !== null && _c !== void 0 ? _c : '';
5961
+ }
5962
+ if (changes['startDate']) {
5963
+ this.startDateValue = (_f = (_e = (_d = changes['startDate']) === null || _d === void 0 ? void 0 : _d.currentValue) === null || _e === void 0 ? void 0 : _e.toLocaleDateString(this.locale)) !== null && _f !== void 0 ? _f : '';
5964
+ }
5965
+ if (changes['endDate']) {
5966
+ this.endDateValue = (_j = (_h = (_g = changes['endDate']) === null || _g === void 0 ? void 0 : _g.currentValue) === null || _h === void 0 ? void 0 : _h.toLocaleDateString(this.locale)) !== null && _j !== void 0 ? _j : '';
5967
+ }
5968
+ }
5977
5969
  getCustomRangeKey(customRange) {
5978
5970
  return customRange[0];
5979
5971
  }
@@ -5983,15 +5975,14 @@ class DateRangePickerComponent {
5983
5975
  this.endDate = customRange[1][1];
5984
5976
  }
5985
5977
  handleCalendarCellHover($event) {
5986
- var _a, _b;
5987
5978
  this.calendarCellHover.emit($event);
5988
5979
  if (!this.startDate) {
5989
- this.setInputValue((_a = this.startDateDirective) === null || _a === void 0 ? void 0 : _a.elementRef, $event);
5980
+ this.setInputValue(this.startDateElementRef, $event);
5990
5981
  this.inputStartHoverValue = $event;
5991
5982
  return;
5992
5983
  }
5993
5984
  if (!this.endDate) {
5994
- this.setInputValue((_b = this.endDateDirective) === null || _b === void 0 ? void 0 : _b.elementRef, $event);
5985
+ this.setInputValue(this.endDateElementRef, $event);
5995
5986
  this.inputEndHoverValue = $event;
5996
5987
  return;
5997
5988
  }
@@ -6016,14 +6007,13 @@ class DateRangePickerComponent {
6016
6007
  // }
6017
6008
  }
6018
6009
  handleClear($event) {
6019
- var _a;
6020
- (_a = this.calendarComponent) === null || _a === void 0 ? void 0 : _a.clearDates();
6010
+ this.calendarComponent.clearDates();
6021
6011
  }
6022
6012
  handleStartDateInputChange($event) {
6023
- var _a, _b, _c, _d;
6013
+ var _a, _b;
6024
6014
  const date = getLocalDateFromString((_a = $event.target) === null || _a === void 0 ? void 0 : _a.value, this.locale, this.timepicker);
6025
6015
  if (!date) {
6026
- (_b = this.calendarComponent) === null || _b === void 0 ? void 0 : _b.clearDates();
6016
+ this.calendarComponent.clearDates();
6027
6017
  }
6028
6018
  if (date instanceof Date && date.getTime()) {
6029
6019
  if (!(this.forbiddenDate(date) || (this.endDate && this.endDate < date))) {
@@ -6031,10 +6021,10 @@ class DateRangePickerComponent {
6031
6021
  this.startDate = date;
6032
6022
  }
6033
6023
  }
6034
- this.startDateValue = (_d = (_c = this.startDate) === null || _c === void 0 ? void 0 : _c.toLocaleDateString(this.locale)) !== null && _d !== void 0 ? _d : '';
6024
+ this.handleStartDateChange((_b = this.startDate) !== null && _b !== void 0 ? _b : null);
6035
6025
  }
6036
6026
  handleEndDateInputChange($event) {
6037
- var _a, _b, _c;
6027
+ var _a, _b;
6038
6028
  const date = getLocalDateFromString((_a = $event.target) === null || _a === void 0 ? void 0 : _a.value, this.locale, this.timepicker);
6039
6029
  if (!date) {
6040
6030
  this.endDate = null;
@@ -6045,7 +6035,7 @@ class DateRangePickerComponent {
6045
6035
  this.endDate = date;
6046
6036
  }
6047
6037
  }
6048
- this.endDateValue = (_c = (_b = this.endDate) === null || _b === void 0 ? void 0 : _b.toLocaleDateString(this.locale)) !== null && _c !== void 0 ? _c : '';
6038
+ this.handleEndDateChange((_b = this.endDate) !== null && _b !== void 0 ? _b : null);
6049
6039
  }
6050
6040
  forbiddenDate(date) {
6051
6041
  return isDateDisabled(date, this.minDate, this.maxDate, this.disabledDates) || (this.dateFilter ? !this.dateFilter(date) : false);
@@ -6078,7 +6068,7 @@ DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
6078
6068
  useExisting: forwardRef(() => DateRangePickerComponent),
6079
6069
  multi: true
6080
6070
  }
6081
- ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "startDateDirective", first: true, predicate: StartDateDirective, descendants: true }, { propertyName: "endDateDirective", first: true, predicate: EndDateDirective, descendants: true }], exportAs: ["cDateRangePicker"], ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\r\n <c-input-group [caret]=\"false\"\r\n [disabled]=\"disabled ?? dropdown.visible\"\r\n [sizing]=\"size ?? ''\"\r\n cDropdownToggle\r\n class=\"picker-input-group\"\r\n >\r\n <input (change)=\"handleStartDateInputChange($event)\"\r\n [formControl]=\"startDateInput\"\r\n [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n cFormControl\r\n cStartDate\r\n [attr.tabindex]=\"disabled ? -1 : 0\"\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n pattern=\"[1-9]*\"\r\n [readonly]=\"inputReadOnly ?? null\"\r\n >\r\n <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n </span>\r\n <input (change)=\"handleEndDateInputChange($event)\"\r\n *ngIf=\"range\"\r\n [formControl]=\"endDateInput\"\r\n [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n cEndDate\r\n cFormControl\r\n [attr.tabindex]=\"disabled ? -1 : 0\"\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n pattern=\"[1-9]*\"\r\n [readonly]=\"inputReadOnly ?? null\"\r\n >\r\n <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n </span>\r\n <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDate &&!disabled\" class=\"picker-input-group-cleaner\"\r\n role=\"button\">\r\n <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n </span>\r\n </span>\r\n\r\n </c-input-group>\r\n <div cDropdownMenu>\r\n <div class=\"date-picker-body\">\r\n <ng-template [ngIf]=\"!isMobile\">\r\n <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n <button (click)=\"setCustomRange(customRange)\"\r\n *ngFor=\"let customRange of customRanges\"\r\n [color]=\"rangesButtonsColor\"\r\n [size]=\"rangesButtonsSize\"\r\n [variant]=\"rangesButtonsVariant\"\r\n cButton>\r\n {{getCustomRangeKey(customRange)}}\r\n </button>\r\n </div>\r\n </ng-template>\r\n <c-calendar\r\n (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n (endDateChange)=\"handleEndDateChange($event)\"\r\n (startDateChange)=\"handleStartDateChange($event)\"\r\n [calendarDate]=\"calendarDate\"\r\n [calendars]=\"isMobile ? 1 : calendars\"\r\n [dateFilter]=\"dateFilter\"\r\n [disabledDates]=\"disabledDates\"\r\n [endDate]=\"endDate\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n [locale]=\"locale\"\r\n [maxDate]=\"maxDate\"\r\n [minDate]=\"minDate\"\r\n [navigation]=\"navigation\"\r\n [range]=\"range\"\r\n [startDate]=\"startDate\"\r\n [navYearFirst]=\"navYearFirst\"\r\n [dayFormat]=\"dayFormat\"\r\n [weekdayFormat]=\"weekdayFormat\"\r\n class=\"date-picker-calendars\"\r\n ></c-calendar>\r\n <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n <!-- todo-->\r\n <c-time-picker\r\n variant=\"select\"\r\n [locale]=\"locale\"\r\n [disabled]=\"!startDate\"\r\n [time]=\"startDate ?? undefined\"\r\n (timeChange)=\"handleStartTimeChange($event)\"\r\n ></c-time-picker>\r\n <c-time-picker\r\n *ngIf=\"range\"\r\n variant=\"select\"\r\n [locale]=\"locale\"\r\n [disabled]=\"!endDate\"\r\n [time]=\"endDate ?? undefined\"\r\n (timeChange)=\"handleEndTimeChange($event)\"\r\n ></c-time-picker>\r\n </div>\r\n </div>\r\n <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n </div>\r\n </div>\r\n <ng-content></ng-content>\r\n</c-dropdown>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { 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: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: StartDateDirective, selector: "[cStartDate]", exportAs: ["cStartDate"] }, { kind: "directive", type: EndDateDirective, selector: "[cEndDate]", exportAs: ["cEndDate"] }] });
6071
+ ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\n <c-input-group [caret]=\"false\"\n [disabled]=\"disabled ?? dropdown.visible\"\n [sizing]=\"size ?? ''\"\n cDropdownToggle\n class=\"picker-input-group\"\n >\n <input (change)=\"handleStartDateInputChange($event)\"\n [formControl]=\"startDateInput\"\n [ngClass]=\"{hover: !!inputStartHoverValue}\"\n [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n cFormControl\n #startDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n >\n <span *ngIf=\"range && separator !== false\" cInputGroupText>\n <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n </span>\n <input (change)=\"handleEndDateInputChange($event)\"\n *ngIf=\"range\"\n [formControl]=\"endDateInput\"\n [ngClass]=\"{hover: !!inputEndHoverValue}\"\n [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"(inputReadOnly || !startDate) ?? null\"\n >\n <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n </span>\n <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDate &&!disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n </span>\n </span>\n\n </c-input-group>\n <div cDropdownMenu>\n <div class=\"date-picker-body\">\n <ng-template [ngIf]=\"!isMobile\">\n <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n <button (click)=\"setCustomRange(customRange)\"\n *ngFor=\"let customRange of customRanges\"\n [color]=\"rangesButtonsColor\"\n [size]=\"rangesButtonsSize\"\n [variant]=\"rangesButtonsVariant\"\n cButton>\n {{getCustomRangeKey(customRange)}}\n </button>\n </div>\n </ng-template>\n <c-calendar\n (calendarCellHover)=\"handleCalendarCellHover($event)\"\n (calendarDateChange)=\"handleCalendarDateChange($event)\"\n (endDateChange)=\"handleEndDateChange($event)\"\n (startDateChange)=\"handleStartDateChange($event)\"\n [calendarDate]=\"calendarDate\"\n [calendars]=\"isMobile ? 1 : calendars\"\n [dateFilter]=\"dateFilter\"\n [disabledDates]=\"disabledDates\"\n [endDate]=\"endDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [locale]=\"locale\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [navigation]=\"navigation\"\n [range]=\"range\"\n [startDate]=\"startDate\"\n [navYearFirst]=\"navYearFirst\"\n [dayFormat]=\"dayFormat\"\n [weekdayFormat]=\"weekdayFormat\"\n class=\"date-picker-calendars\"\n ></c-calendar>\n <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n <!-- todo-->\n <c-time-picker\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!startDate\"\n [time]=\"startDate ?? undefined\"\n (timeChange)=\"handleStartTimeChange($event)\"\n ></c-time-picker>\n <c-time-picker\n *ngIf=\"range\"\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!endDate\"\n [time]=\"endDate ?? undefined\"\n (timeChange)=\"handleEndTimeChange($event)\"\n ></c-time-picker>\n </div>\n </div>\n <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n </div>\n </div>\n <ng-content></ng-content>\n</c-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { 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: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
6082
6072
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DateRangePickerComponent, decorators: [{
6083
6073
  type: Component,
6084
6074
  args: [{ selector: 'c-date-range-picker', exportAs: 'cDateRangePicker', providers: [
@@ -6087,7 +6077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
6087
6077
  useExisting: forwardRef(() => DateRangePickerComponent),
6088
6078
  multi: true
6089
6079
  }
6090
- ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\r\n <c-input-group [caret]=\"false\"\r\n [disabled]=\"disabled ?? dropdown.visible\"\r\n [sizing]=\"size ?? ''\"\r\n cDropdownToggle\r\n class=\"picker-input-group\"\r\n >\r\n <input (change)=\"handleStartDateInputChange($event)\"\r\n [formControl]=\"startDateInput\"\r\n [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n cFormControl\r\n cStartDate\r\n [attr.tabindex]=\"disabled ? -1 : 0\"\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n pattern=\"[1-9]*\"\r\n [readonly]=\"inputReadOnly ?? null\"\r\n >\r\n <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n </span>\r\n <input (change)=\"handleEndDateInputChange($event)\"\r\n *ngIf=\"range\"\r\n [formControl]=\"endDateInput\"\r\n [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n cEndDate\r\n cFormControl\r\n [attr.tabindex]=\"disabled ? -1 : 0\"\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n pattern=\"[1-9]*\"\r\n [readonly]=\"inputReadOnly ?? null\"\r\n >\r\n <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n </span>\r\n <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDate &&!disabled\" class=\"picker-input-group-cleaner\"\r\n role=\"button\">\r\n <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n </span>\r\n </span>\r\n\r\n </c-input-group>\r\n <div cDropdownMenu>\r\n <div class=\"date-picker-body\">\r\n <ng-template [ngIf]=\"!isMobile\">\r\n <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n <button (click)=\"setCustomRange(customRange)\"\r\n *ngFor=\"let customRange of customRanges\"\r\n [color]=\"rangesButtonsColor\"\r\n [size]=\"rangesButtonsSize\"\r\n [variant]=\"rangesButtonsVariant\"\r\n cButton>\r\n {{getCustomRangeKey(customRange)}}\r\n </button>\r\n </div>\r\n </ng-template>\r\n <c-calendar\r\n (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n (endDateChange)=\"handleEndDateChange($event)\"\r\n (startDateChange)=\"handleStartDateChange($event)\"\r\n [calendarDate]=\"calendarDate\"\r\n [calendars]=\"isMobile ? 1 : calendars\"\r\n [dateFilter]=\"dateFilter\"\r\n [disabledDates]=\"disabledDates\"\r\n [endDate]=\"endDate\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n [locale]=\"locale\"\r\n [maxDate]=\"maxDate\"\r\n [minDate]=\"minDate\"\r\n [navigation]=\"navigation\"\r\n [range]=\"range\"\r\n [startDate]=\"startDate\"\r\n [navYearFirst]=\"navYearFirst\"\r\n [dayFormat]=\"dayFormat\"\r\n [weekdayFormat]=\"weekdayFormat\"\r\n class=\"date-picker-calendars\"\r\n ></c-calendar>\r\n <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n <!-- todo-->\r\n <c-time-picker\r\n variant=\"select\"\r\n [locale]=\"locale\"\r\n [disabled]=\"!startDate\"\r\n [time]=\"startDate ?? undefined\"\r\n (timeChange)=\"handleStartTimeChange($event)\"\r\n ></c-time-picker>\r\n <c-time-picker\r\n *ngIf=\"range\"\r\n variant=\"select\"\r\n [locale]=\"locale\"\r\n [disabled]=\"!endDate\"\r\n [time]=\"endDate ?? undefined\"\r\n (timeChange)=\"handleEndTimeChange($event)\"\r\n ></c-time-picker>\r\n </div>\r\n </div>\r\n <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n </div>\r\n </div>\r\n <ng-content></ng-content>\r\n</c-dropdown>\r\n" }]
6080
+ ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\n <c-input-group [caret]=\"false\"\n [disabled]=\"disabled ?? dropdown.visible\"\n [sizing]=\"size ?? ''\"\n cDropdownToggle\n class=\"picker-input-group\"\n >\n <input (change)=\"handleStartDateInputChange($event)\"\n [formControl]=\"startDateInput\"\n [ngClass]=\"{hover: !!inputStartHoverValue}\"\n [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n cFormControl\n #startDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n >\n <span *ngIf=\"range && separator !== false\" cInputGroupText>\n <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n </span>\n <input (change)=\"handleEndDateInputChange($event)\"\n *ngIf=\"range\"\n [formControl]=\"endDateInput\"\n [ngClass]=\"{hover: !!inputEndHoverValue}\"\n [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"(inputReadOnly || !startDate) ?? null\"\n >\n <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n </span>\n <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDate &&!disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n </span>\n </span>\n\n </c-input-group>\n <div cDropdownMenu>\n <div class=\"date-picker-body\">\n <ng-template [ngIf]=\"!isMobile\">\n <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n <button (click)=\"setCustomRange(customRange)\"\n *ngFor=\"let customRange of customRanges\"\n [color]=\"rangesButtonsColor\"\n [size]=\"rangesButtonsSize\"\n [variant]=\"rangesButtonsVariant\"\n cButton>\n {{getCustomRangeKey(customRange)}}\n </button>\n </div>\n </ng-template>\n <c-calendar\n (calendarCellHover)=\"handleCalendarCellHover($event)\"\n (calendarDateChange)=\"handleCalendarDateChange($event)\"\n (endDateChange)=\"handleEndDateChange($event)\"\n (startDateChange)=\"handleStartDateChange($event)\"\n [calendarDate]=\"calendarDate\"\n [calendars]=\"isMobile ? 1 : calendars\"\n [dateFilter]=\"dateFilter\"\n [disabledDates]=\"disabledDates\"\n [endDate]=\"endDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [locale]=\"locale\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [navigation]=\"navigation\"\n [range]=\"range\"\n [startDate]=\"startDate\"\n [navYearFirst]=\"navYearFirst\"\n [dayFormat]=\"dayFormat\"\n [weekdayFormat]=\"weekdayFormat\"\n class=\"date-picker-calendars\"\n ></c-calendar>\n <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n <!-- todo-->\n <c-time-picker\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!startDate\"\n [time]=\"startDate ?? undefined\"\n (timeChange)=\"handleStartTimeChange($event)\"\n ></c-time-picker>\n <c-time-picker\n *ngIf=\"range\"\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!endDate\"\n [time]=\"endDate ?? undefined\"\n (timeChange)=\"handleEndTimeChange($event)\"\n ></c-time-picker>\n </div>\n </div>\n <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n </div>\n </div>\n <ng-content></ng-content>\n</c-dropdown>\n" }]
6091
6081
  }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { dayFormat: [{
6092
6082
  type: Input
6093
6083
  }], calendars: [{
@@ -6169,12 +6159,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
6169
6159
  }], calendarComponent: [{
6170
6160
  type: ViewChild,
6171
6161
  args: [CalendarComponent]
6172
- }], startDateDirective: [{
6162
+ }], startDateElementRef: [{
6173
6163
  type: ViewChild,
6174
- args: [StartDateDirective]
6175
- }], endDateDirective: [{
6164
+ args: ['startDateElementRef']
6165
+ }], endDateElementRef: [{
6176
6166
  type: ViewChild,
6177
- args: [EndDateDirective]
6167
+ args: ['endDateElementRef']
6178
6168
  }], contentTemplates: [{
6179
6169
  type: ContentChildren,
6180
6170
  args: [TemplateIdDirective, { descendants: true }]
@@ -6875,9 +6865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
6875
6865
  class DateRangePickerModule {
6876
6866
  }
6877
6867
  DateRangePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
6878
- DateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: DateRangePickerModule, declarations: [DateRangePickerComponent,
6879
- StartDateDirective,
6880
- EndDateDirective], imports: [CommonModule,
6868
+ DateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: DateRangePickerModule, declarations: [DateRangePickerComponent], imports: [CommonModule,
6881
6869
  FormsModule,
6882
6870
  ReactiveFormsModule,
6883
6871
  ButtonModule,
@@ -6899,9 +6887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
6899
6887
  type: NgModule,
6900
6888
  args: [{
6901
6889
  declarations: [
6902
- DateRangePickerComponent,
6903
- StartDateDirective,
6904
- EndDateDirective
6890
+ DateRangePickerComponent
6905
6891
  ],
6906
6892
  imports: [
6907
6893
  CommonModule,
@@ -6942,10 +6928,10 @@ class DatePickerComponent extends DateRangePickerComponent {
6942
6928
  }
6943
6929
  }
6944
6930
  DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
6945
- DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DatePickerComponent, selector: "c-date-picker", inputs: { placeholder: "placeholder", date: "date" }, outputs: { startDateChange: "dateChange" }, exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\r\n <c-input-group [caret]=\"false\"\r\n [disabled]=\"disabled ?? dropdown.visible\"\r\n [sizing]=\"size ?? ''\"\r\n cDropdownToggle\r\n class=\"picker-input-group\"\r\n >\r\n <input (change)=\"handleStartDateInputChange($event)\"\r\n [formControl]=\"startDateInput\"\r\n [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n cFormControl\r\n cStartDate\r\n [attr.tabindex]=\"disabled ? -1 : 0\"\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n pattern=\"[1-9]*\"\r\n [readonly]=\"inputReadOnly ?? null\"\r\n >\r\n <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n </span>\r\n <input (change)=\"handleEndDateInputChange($event)\"\r\n *ngIf=\"range\"\r\n [formControl]=\"endDateInput\"\r\n [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n cEndDate\r\n cFormControl\r\n [attr.tabindex]=\"disabled ? -1 : 0\"\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n pattern=\"[1-9]*\"\r\n [readonly]=\"inputReadOnly ?? null\"\r\n >\r\n <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n </span>\r\n <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDate &&!disabled\" class=\"picker-input-group-cleaner\"\r\n role=\"button\">\r\n <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n </span>\r\n </span>\r\n\r\n </c-input-group>\r\n <div cDropdownMenu>\r\n <div class=\"date-picker-body\">\r\n <ng-template [ngIf]=\"!isMobile\">\r\n <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n <button (click)=\"setCustomRange(customRange)\"\r\n *ngFor=\"let customRange of customRanges\"\r\n [color]=\"rangesButtonsColor\"\r\n [size]=\"rangesButtonsSize\"\r\n [variant]=\"rangesButtonsVariant\"\r\n cButton>\r\n {{getCustomRangeKey(customRange)}}\r\n </button>\r\n </div>\r\n </ng-template>\r\n <c-calendar\r\n (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n (endDateChange)=\"handleEndDateChange($event)\"\r\n (startDateChange)=\"handleStartDateChange($event)\"\r\n [calendarDate]=\"calendarDate\"\r\n [calendars]=\"isMobile ? 1 : calendars\"\r\n [dateFilter]=\"dateFilter\"\r\n [disabledDates]=\"disabledDates\"\r\n [endDate]=\"endDate\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n [locale]=\"locale\"\r\n [maxDate]=\"maxDate\"\r\n [minDate]=\"minDate\"\r\n [navigation]=\"navigation\"\r\n [range]=\"range\"\r\n [startDate]=\"startDate\"\r\n [navYearFirst]=\"navYearFirst\"\r\n [dayFormat]=\"dayFormat\"\r\n [weekdayFormat]=\"weekdayFormat\"\r\n class=\"date-picker-calendars\"\r\n ></c-calendar>\r\n <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n <!-- todo-->\r\n <c-time-picker\r\n variant=\"select\"\r\n [locale]=\"locale\"\r\n [disabled]=\"!startDate\"\r\n [time]=\"startDate ?? undefined\"\r\n (timeChange)=\"handleStartTimeChange($event)\"\r\n ></c-time-picker>\r\n <c-time-picker\r\n *ngIf=\"range\"\r\n variant=\"select\"\r\n [locale]=\"locale\"\r\n [disabled]=\"!endDate\"\r\n [time]=\"endDate ?? undefined\"\r\n (timeChange)=\"handleEndTimeChange($event)\"\r\n ></c-time-picker>\r\n </div>\r\n </div>\r\n <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n </div>\r\n </div>\r\n <ng-content></ng-content>\r\n</c-dropdown>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { 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: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
6931
+ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DatePickerComponent, selector: "c-date-picker", inputs: { placeholder: "placeholder", date: "date" }, outputs: { startDateChange: "dateChange" }, exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\n <c-input-group [caret]=\"false\"\n [disabled]=\"disabled ?? dropdown.visible\"\n [sizing]=\"size ?? ''\"\n cDropdownToggle\n class=\"picker-input-group\"\n >\n <input (change)=\"handleStartDateInputChange($event)\"\n [formControl]=\"startDateInput\"\n [ngClass]=\"{hover: !!inputStartHoverValue}\"\n [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n cFormControl\n #startDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n >\n <span *ngIf=\"range && separator !== false\" cInputGroupText>\n <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n </span>\n <input (change)=\"handleEndDateInputChange($event)\"\n *ngIf=\"range\"\n [formControl]=\"endDateInput\"\n [ngClass]=\"{hover: !!inputEndHoverValue}\"\n [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"(inputReadOnly || !startDate) ?? null\"\n >\n <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n </span>\n <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDate &&!disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n </span>\n </span>\n\n </c-input-group>\n <div cDropdownMenu>\n <div class=\"date-picker-body\">\n <ng-template [ngIf]=\"!isMobile\">\n <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n <button (click)=\"setCustomRange(customRange)\"\n *ngFor=\"let customRange of customRanges\"\n [color]=\"rangesButtonsColor\"\n [size]=\"rangesButtonsSize\"\n [variant]=\"rangesButtonsVariant\"\n cButton>\n {{getCustomRangeKey(customRange)}}\n </button>\n </div>\n </ng-template>\n <c-calendar\n (calendarCellHover)=\"handleCalendarCellHover($event)\"\n (calendarDateChange)=\"handleCalendarDateChange($event)\"\n (endDateChange)=\"handleEndDateChange($event)\"\n (startDateChange)=\"handleStartDateChange($event)\"\n [calendarDate]=\"calendarDate\"\n [calendars]=\"isMobile ? 1 : calendars\"\n [dateFilter]=\"dateFilter\"\n [disabledDates]=\"disabledDates\"\n [endDate]=\"endDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [locale]=\"locale\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [navigation]=\"navigation\"\n [range]=\"range\"\n [startDate]=\"startDate\"\n [navYearFirst]=\"navYearFirst\"\n [dayFormat]=\"dayFormat\"\n [weekdayFormat]=\"weekdayFormat\"\n class=\"date-picker-calendars\"\n ></c-calendar>\n <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n <!-- todo-->\n <c-time-picker\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!startDate\"\n [time]=\"startDate ?? undefined\"\n (timeChange)=\"handleStartTimeChange($event)\"\n ></c-time-picker>\n <c-time-picker\n *ngIf=\"range\"\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!endDate\"\n [time]=\"endDate ?? undefined\"\n (timeChange)=\"handleEndTimeChange($event)\"\n ></c-time-picker>\n </div>\n </div>\n <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n </div>\n </div>\n <ng-content></ng-content>\n</c-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { 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: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
6946
6932
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DatePickerComponent, decorators: [{
6947
6933
  type: Component,
6948
- args: [{ selector: 'c-date-picker', exportAs: 'cDatePicker', template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\r\n <c-input-group [caret]=\"false\"\r\n [disabled]=\"disabled ?? dropdown.visible\"\r\n [sizing]=\"size ?? ''\"\r\n cDropdownToggle\r\n class=\"picker-input-group\"\r\n >\r\n <input (change)=\"handleStartDateInputChange($event)\"\r\n [formControl]=\"startDateInput\"\r\n [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n cFormControl\r\n cStartDate\r\n [attr.tabindex]=\"disabled ? -1 : 0\"\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n pattern=\"[1-9]*\"\r\n [readonly]=\"inputReadOnly ?? null\"\r\n >\r\n <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n </span>\r\n <input (change)=\"handleEndDateInputChange($event)\"\r\n *ngIf=\"range\"\r\n [formControl]=\"endDateInput\"\r\n [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n cEndDate\r\n cFormControl\r\n [attr.tabindex]=\"disabled ? -1 : 0\"\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n pattern=\"[1-9]*\"\r\n [readonly]=\"inputReadOnly ?? null\"\r\n >\r\n <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n </span>\r\n <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDate &&!disabled\" class=\"picker-input-group-cleaner\"\r\n role=\"button\">\r\n <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n </span>\r\n </span>\r\n\r\n </c-input-group>\r\n <div cDropdownMenu>\r\n <div class=\"date-picker-body\">\r\n <ng-template [ngIf]=\"!isMobile\">\r\n <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n <button (click)=\"setCustomRange(customRange)\"\r\n *ngFor=\"let customRange of customRanges\"\r\n [color]=\"rangesButtonsColor\"\r\n [size]=\"rangesButtonsSize\"\r\n [variant]=\"rangesButtonsVariant\"\r\n cButton>\r\n {{getCustomRangeKey(customRange)}}\r\n </button>\r\n </div>\r\n </ng-template>\r\n <c-calendar\r\n (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n (endDateChange)=\"handleEndDateChange($event)\"\r\n (startDateChange)=\"handleStartDateChange($event)\"\r\n [calendarDate]=\"calendarDate\"\r\n [calendars]=\"isMobile ? 1 : calendars\"\r\n [dateFilter]=\"dateFilter\"\r\n [disabledDates]=\"disabledDates\"\r\n [endDate]=\"endDate\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n [locale]=\"locale\"\r\n [maxDate]=\"maxDate\"\r\n [minDate]=\"minDate\"\r\n [navigation]=\"navigation\"\r\n [range]=\"range\"\r\n [startDate]=\"startDate\"\r\n [navYearFirst]=\"navYearFirst\"\r\n [dayFormat]=\"dayFormat\"\r\n [weekdayFormat]=\"weekdayFormat\"\r\n class=\"date-picker-calendars\"\r\n ></c-calendar>\r\n <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n <!-- todo-->\r\n <c-time-picker\r\n variant=\"select\"\r\n [locale]=\"locale\"\r\n [disabled]=\"!startDate\"\r\n [time]=\"startDate ?? undefined\"\r\n (timeChange)=\"handleStartTimeChange($event)\"\r\n ></c-time-picker>\r\n <c-time-picker\r\n *ngIf=\"range\"\r\n variant=\"select\"\r\n [locale]=\"locale\"\r\n [disabled]=\"!endDate\"\r\n [time]=\"endDate ?? undefined\"\r\n (timeChange)=\"handleEndTimeChange($event)\"\r\n ></c-time-picker>\r\n </div>\r\n </div>\r\n <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n </div>\r\n </div>\r\n <ng-content></ng-content>\r\n</c-dropdown>\r\n" }]
6934
+ args: [{ selector: 'c-date-picker', exportAs: 'cDatePicker', template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\n <c-input-group [caret]=\"false\"\n [disabled]=\"disabled ?? dropdown.visible\"\n [sizing]=\"size ?? ''\"\n cDropdownToggle\n class=\"picker-input-group\"\n >\n <input (change)=\"handleStartDateInputChange($event)\"\n [formControl]=\"startDateInput\"\n [ngClass]=\"{hover: !!inputStartHoverValue}\"\n [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n cFormControl\n #startDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n >\n <span *ngIf=\"range && separator !== false\" cInputGroupText>\n <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n </span>\n <input (change)=\"handleEndDateInputChange($event)\"\n *ngIf=\"range\"\n [formControl]=\"endDateInput\"\n [ngClass]=\"{hover: !!inputEndHoverValue}\"\n [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"(inputReadOnly || !startDate) ?? null\"\n >\n <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n </span>\n <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDate &&!disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n </span>\n </span>\n\n </c-input-group>\n <div cDropdownMenu>\n <div class=\"date-picker-body\">\n <ng-template [ngIf]=\"!isMobile\">\n <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n <button (click)=\"setCustomRange(customRange)\"\n *ngFor=\"let customRange of customRanges\"\n [color]=\"rangesButtonsColor\"\n [size]=\"rangesButtonsSize\"\n [variant]=\"rangesButtonsVariant\"\n cButton>\n {{getCustomRangeKey(customRange)}}\n </button>\n </div>\n </ng-template>\n <c-calendar\n (calendarCellHover)=\"handleCalendarCellHover($event)\"\n (calendarDateChange)=\"handleCalendarDateChange($event)\"\n (endDateChange)=\"handleEndDateChange($event)\"\n (startDateChange)=\"handleStartDateChange($event)\"\n [calendarDate]=\"calendarDate\"\n [calendars]=\"isMobile ? 1 : calendars\"\n [dateFilter]=\"dateFilter\"\n [disabledDates]=\"disabledDates\"\n [endDate]=\"endDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [locale]=\"locale\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [navigation]=\"navigation\"\n [range]=\"range\"\n [startDate]=\"startDate\"\n [navYearFirst]=\"navYearFirst\"\n [dayFormat]=\"dayFormat\"\n [weekdayFormat]=\"weekdayFormat\"\n class=\"date-picker-calendars\"\n ></c-calendar>\n <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n <!-- todo-->\n <c-time-picker\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!startDate\"\n [time]=\"startDate ?? undefined\"\n (timeChange)=\"handleStartTimeChange($event)\"\n ></c-time-picker>\n <c-time-picker\n *ngIf=\"range\"\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!endDate\"\n [time]=\"endDate ?? undefined\"\n (timeChange)=\"handleEndTimeChange($event)\"\n ></c-time-picker>\n </div>\n </div>\n <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n </div>\n </div>\n <ng-content></ng-content>\n</c-dropdown>\n" }]
6949
6935
  }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { placeholder: [{
6950
6936
  type: Input
6951
6937
  }], date: [{