@coreui/angular-pro 4.5.23 → 4.5.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/calendar/calendar.service.mjs +1 -2
- package/esm2022/lib/calendar/calendar.utils.mjs +6 -9
- package/esm2022/lib/date-picker/date-picker.component.mjs +6 -4
- package/esm2022/lib/date-range-picker/date-range-picker/custom-range-key.pipe.mjs +17 -0
- package/esm2022/lib/date-range-picker/date-range-picker/date-range-picker.component.mjs +24 -9
- package/fesm2022/coreui-angular-pro.mjs +47 -21
- package/fesm2022/coreui-angular-pro.mjs.map +1 -1
- package/lib/calendar/calendar.utils.d.ts +1 -1
- package/lib/date-range-picker/date-range-picker/custom-range-key.pipe.d.ts +8 -0
- package/lib/date-range-picker/date-range-picker/date-range-picker.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -12,9 +12,8 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
|
12
12
|
import { filter, tap, distinctUntilChanged, debounceTime, map, delay, combineLatestWith, take } from 'rxjs/operators';
|
|
13
13
|
import * as i1$3 from '@angular/forms';
|
|
14
14
|
import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
15
|
-
import * as i1$4 from '@angular/cdk/layout';
|
|
16
|
-
import { Breakpoints } from '@angular/cdk/layout';
|
|
17
15
|
import { createPopper } from '@popperjs/core';
|
|
16
|
+
import * as i1$4 from '@angular/cdk/layout';
|
|
18
17
|
import * as i1$5 from '@angular/cdk/a11y';
|
|
19
18
|
import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
|
|
20
19
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
@@ -1513,16 +1512,13 @@ const isThisYear = (year) => {
|
|
|
1513
1512
|
return (year == today.getFullYear());
|
|
1514
1513
|
};
|
|
1515
1514
|
const isValidDate = (date) => {
|
|
1516
|
-
|
|
1515
|
+
if (date instanceof Date || typeof date === 'number' || typeof date === 'string') {
|
|
1516
|
+
// Try to create a Date object from Date or timestamp or string
|
|
1517
1517
|
const dateObj = new Date(date);
|
|
1518
|
-
|
|
1519
|
-
// console.log('isValidDate', date, d.getTime(), !!d.getTime())
|
|
1520
|
-
return dateVal === 0 || !!dateVal;
|
|
1521
|
-
}
|
|
1522
|
-
catch (err) {
|
|
1523
|
-
console.warn(`Invalid date ${date}`, err);
|
|
1524
|
-
return false;
|
|
1518
|
+
return !isNaN(dateObj.getTime());
|
|
1525
1519
|
}
|
|
1520
|
+
// If none of the above conditions are met, it's not a valid date
|
|
1521
|
+
return false;
|
|
1526
1522
|
};
|
|
1527
1523
|
const tryDate = (value, propName = 'date') => {
|
|
1528
1524
|
let _value;
|
|
@@ -1661,7 +1657,6 @@ class CalendarService {
|
|
|
1661
1657
|
if (entry === state[key]) {
|
|
1662
1658
|
continue;
|
|
1663
1659
|
}
|
|
1664
|
-
// if (isValidDate(state[key]) && entry ? entry.getTime() === state[key]?.getTime() : false) {
|
|
1665
1660
|
if (isValidDate(state[key]) && entry ? entry.getTime() === state[key]?.getTime() : false) {
|
|
1666
1661
|
continue;
|
|
1667
1662
|
}
|
|
@@ -6477,6 +6472,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
|
|
|
6477
6472
|
}]
|
|
6478
6473
|
}] });
|
|
6479
6474
|
|
|
6475
|
+
class CustomRangeKeyPipe {
|
|
6476
|
+
transform(customRange, ...args) {
|
|
6477
|
+
return customRange[0];
|
|
6478
|
+
}
|
|
6479
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: CustomRangeKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
6480
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.8", ngImport: i0, type: CustomRangeKeyPipe, isStandalone: true, name: "customRangeKey" }); }
|
|
6481
|
+
}
|
|
6482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: CustomRangeKeyPipe, decorators: [{
|
|
6483
|
+
type: Pipe,
|
|
6484
|
+
args: [{
|
|
6485
|
+
name: 'customRangeKey',
|
|
6486
|
+
standalone: true
|
|
6487
|
+
}]
|
|
6488
|
+
}] });
|
|
6489
|
+
|
|
6480
6490
|
/** Must be a valid date string */
|
|
6481
6491
|
// todo: validation
|
|
6482
6492
|
// export function invalidDateStringValidator(locale: string): ValidatorFn {
|
|
@@ -6570,6 +6580,7 @@ class DateRangePickerComponent {
|
|
|
6570
6580
|
this.templates = {};
|
|
6571
6581
|
this.dateChangeSubscriptions = [];
|
|
6572
6582
|
this.isMobile = true;
|
|
6583
|
+
this.showRanges = false;
|
|
6573
6584
|
this._startDateValue = this.formatDate(this.startDate);
|
|
6574
6585
|
this._endDateValue = this.formatDate(this.endDate);
|
|
6575
6586
|
// todo: validation
|
|
@@ -6585,6 +6596,11 @@ class DateRangePickerComponent {
|
|
|
6585
6596
|
// Validators.maxLength(10),
|
|
6586
6597
|
// invalidDateStringValidator(this.locale)
|
|
6587
6598
|
]);
|
|
6599
|
+
this.#breakpoints = {
|
|
6600
|
+
OneCalendarRanges: '(min-width: 480px)',
|
|
6601
|
+
TwoCalendars: '(max-width: 650px)',
|
|
6602
|
+
TwoCalendarsRanges: '(max-width: 810px)'
|
|
6603
|
+
};
|
|
6588
6604
|
this.setInputValue = (elementRef, date) => {
|
|
6589
6605
|
if (!elementRef) {
|
|
6590
6606
|
return;
|
|
@@ -6852,14 +6868,22 @@ class DateRangePickerComponent {
|
|
|
6852
6868
|
this.timepicker ? date.toLocaleString(this.locale) :
|
|
6853
6869
|
date.toLocaleDateString(this.locale);
|
|
6854
6870
|
}
|
|
6871
|
+
#breakpoints;
|
|
6855
6872
|
ngOnInit() {
|
|
6873
|
+
this.customRanges = this.ranges ? Object.entries(this.ranges) : [];
|
|
6874
|
+
const breakpoints = this.#breakpoints;
|
|
6856
6875
|
this.layoutChanges = this.breakpointObserver.observe([
|
|
6857
|
-
|
|
6858
|
-
|
|
6876
|
+
breakpoints.OneCalendarRanges,
|
|
6877
|
+
breakpoints.TwoCalendars,
|
|
6878
|
+
breakpoints.TwoCalendarsRanges
|
|
6859
6879
|
]).subscribe(result => {
|
|
6860
|
-
|
|
6880
|
+
if (result.matches) {
|
|
6881
|
+
this.isMobile = (this.customRanges?.length > 0 && result.breakpoints[breakpoints.TwoCalendarsRanges]) || result.breakpoints[breakpoints.TwoCalendars];
|
|
6882
|
+
if (this.customRanges?.length > 0) {
|
|
6883
|
+
this.showRanges = !result.breakpoints[breakpoints.OneCalendarRanges];
|
|
6884
|
+
}
|
|
6885
|
+
}
|
|
6861
6886
|
});
|
|
6862
|
-
this.customRanges = this.ranges ? Object.entries(this.ranges) : [];
|
|
6863
6887
|
this.startDateValue = this.formatDate(this.startDate);
|
|
6864
6888
|
this.endDateValue = this.formatDate(this.endDate);
|
|
6865
6889
|
this.subscribeDateChange();
|
|
@@ -7018,7 +7042,7 @@ class DateRangePickerComponent {
|
|
|
7018
7042
|
useExisting: forwardRef(() => DateRangePickerComponent),
|
|
7019
7043
|
multi: true
|
|
7020
7044
|
}
|
|
7021
|
-
], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ 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\" [ngClass]=\"datePickerClasses\"\n [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\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\"\n cFormControl\n #startDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"range ? undefined : valid\"\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\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid ?? undefined\"\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)\"\n *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n 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]=\"!
|
|
7045
|
+
], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ 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\" [ngClass]=\"datePickerClasses\"\n [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\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\"\n cFormControl\n #startDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"range ? undefined : valid\"\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\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid ?? undefined\"\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)\"\n *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n 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]=\"!showRanges\">\n <div *ngIf=\"ranges && customRanges.length > 0\" 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 {{customRange | customRangeKey}}\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 [selectAdjacentDays]=\"selectAdjacentDays\"\n [showAdjacentDays]=\"showAdjacentDays\"\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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { 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: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
|
|
7022
7046
|
}
|
|
7023
7047
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
7024
7048
|
type: Component,
|
|
@@ -7036,14 +7060,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
|
|
|
7036
7060
|
DropdownMenuDirective,
|
|
7037
7061
|
InputGroupComponent,
|
|
7038
7062
|
FormControlDirective,
|
|
7039
|
-
InputGroupTextDirective
|
|
7063
|
+
InputGroupTextDirective,
|
|
7064
|
+
CustomRangeKeyPipe
|
|
7040
7065
|
], providers: [
|
|
7041
7066
|
{
|
|
7042
7067
|
provide: NG_VALUE_ACCESSOR,
|
|
7043
7068
|
useExisting: forwardRef(() => DateRangePickerComponent),
|
|
7044
7069
|
multi: true
|
|
7045
7070
|
}
|
|
7046
|
-
], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\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\"\n cFormControl\n #startDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"range ? undefined : valid\"\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\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid ?? undefined\"\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)\"\n *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n 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]=\"!
|
|
7071
|
+
], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\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\"\n cFormControl\n #startDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"range ? undefined : valid\"\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\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid ?? undefined\"\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)\"\n *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n 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]=\"!showRanges\">\n <div *ngIf=\"ranges && customRanges.length > 0\" 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 {{customRange | customRangeKey}}\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 [selectAdjacentDays]=\"selectAdjacentDays\"\n [showAdjacentDays]=\"showAdjacentDays\"\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" }]
|
|
7047
7072
|
}], ctorParameters: function () { return [{ type: i1$4.BreakpointObserver }]; }, propDecorators: { dayFormat: [{
|
|
7048
7073
|
type: Input
|
|
7049
7074
|
}], calendars: [{
|
|
@@ -7198,7 +7223,7 @@ class DatePickerComponent extends DateRangePickerComponent {
|
|
|
7198
7223
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
7199
7224
|
multi: true
|
|
7200
7225
|
}
|
|
7201
|
-
], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\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\"\n cFormControl\n #startDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"range ? undefined : valid\"\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\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid ?? undefined\"\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)\"\n *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n 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]=\"!
|
|
7226
|
+
], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\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\"\n cFormControl\n #startDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"range ? undefined : valid\"\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\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid ?? undefined\"\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)\"\n *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n 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]=\"!showRanges\">\n <div *ngIf=\"ranges && customRanges.length > 0\" 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 {{customRange | customRangeKey}}\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 [selectAdjacentDays]=\"selectAdjacentDays\"\n [showAdjacentDays]=\"showAdjacentDays\"\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", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { 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: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
|
|
7202
7227
|
}
|
|
7203
7228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
7204
7229
|
type: Component,
|
|
@@ -7216,14 +7241,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
|
|
|
7216
7241
|
DropdownMenuDirective,
|
|
7217
7242
|
InputGroupComponent,
|
|
7218
7243
|
FormControlDirective,
|
|
7219
|
-
InputGroupTextDirective
|
|
7244
|
+
InputGroupTextDirective,
|
|
7245
|
+
CustomRangeKeyPipe
|
|
7220
7246
|
], providers: [
|
|
7221
7247
|
{
|
|
7222
7248
|
provide: NG_VALUE_ACCESSOR,
|
|
7223
7249
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
7224
7250
|
multi: true
|
|
7225
7251
|
}
|
|
7226
|
-
], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\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\"\n cFormControl\n #startDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"range ? undefined : valid\"\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\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid ?? undefined\"\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)\"\n *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n 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]=\"!
|
|
7252
|
+
], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\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\"\n cFormControl\n #startDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"range ? undefined : valid\"\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\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid ?? undefined\"\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)\"\n *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n 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]=\"!showRanges\">\n <div *ngIf=\"ranges && customRanges.length > 0\" 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 {{customRange | customRangeKey}}\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 [selectAdjacentDays]=\"selectAdjacentDays\"\n [showAdjacentDays]=\"showAdjacentDays\"\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" }]
|
|
7227
7253
|
}], ctorParameters: function () { return [{ type: i1$4.BreakpointObserver }]; }, propDecorators: { placeholder: [{
|
|
7228
7254
|
type: Input
|
|
7229
7255
|
}], startDateChange: [{
|