@coreui/angular-pro 4.3.7 → 4.3.8
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/LICENSE +1 -1
- package/README.md +1 -1
- package/esm2020/lib/date-picker/date-picker.component.mjs +3 -3
- package/esm2020/lib/date-range-picker/date-range-picker/date-range-picker.component.mjs +25 -4
- package/esm2020/lib/dropdown/dropdown/dropdown.component.mjs +23 -15
- package/esm2020/lib/multi-select/multi-select-tag/multi-select-tag.component.mjs +4 -23
- package/esm2020/lib/tabs/tab-content/tab-content.component.mjs +2 -2
- package/fesm2015/coreui-angular-pro.mjs +50 -42
- package/fesm2015/coreui-angular-pro.mjs.map +1 -1
- package/fesm2020/coreui-angular-pro.mjs +50 -42
- package/fesm2020/coreui-angular-pro.mjs.map +1 -1
- package/lib/date-range-picker/date-range-picker/date-range-picker.component.d.ts +10 -1
- package/lib/dropdown/dropdown/dropdown.component.d.ts +4 -3
- package/lib/multi-select/multi-select-tag/multi-select-tag.component.d.ts +3 -7
- package/lib/tabs/tab-content/tab-content.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -10,12 +10,12 @@ import { NavigationEnd, RouterModule } from '@angular/router';
|
|
|
10
10
|
import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject, distinctUntilChanged, takeUntil, map, debounceTime } from 'rxjs';
|
|
11
11
|
import { filter } from 'rxjs/operators';
|
|
12
12
|
import { isValid, format } from 'date-fns';
|
|
13
|
+
import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
|
|
13
14
|
import * as i2 from '@angular/forms';
|
|
14
15
|
import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
15
16
|
import * as i1$2 from '@angular/cdk/layout';
|
|
16
17
|
import { Breakpoints } from '@angular/cdk/layout';
|
|
17
18
|
import { createPopper } from '@popperjs/core';
|
|
18
|
-
import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
|
|
19
19
|
import * as i1$3 from '@angular/cdk/a11y';
|
|
20
20
|
import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
|
|
21
21
|
import * as i5 from '@coreui/icons-angular';
|
|
@@ -4108,6 +4108,7 @@ class DropdownComponent {
|
|
|
4108
4108
|
this.dropdownContext = { $implicit: this.visible };
|
|
4109
4109
|
this.activeTrap = false;
|
|
4110
4110
|
this.listeners = [];
|
|
4111
|
+
this.dropdownStateSubscribe();
|
|
4111
4112
|
}
|
|
4112
4113
|
/**
|
|
4113
4114
|
* Sets a darker color scheme to match a dark navbar.
|
|
@@ -4177,10 +4178,12 @@ class DropdownComponent {
|
|
|
4177
4178
|
*/
|
|
4178
4179
|
set visible(value) {
|
|
4179
4180
|
const _value = coerceBooleanProperty(value);
|
|
4180
|
-
this.
|
|
4181
|
-
|
|
4182
|
-
|
|
4183
|
-
|
|
4181
|
+
if (_value !== this._visible) {
|
|
4182
|
+
this.activeTrap = _value;
|
|
4183
|
+
this._visible = _value;
|
|
4184
|
+
_value ? this.createPopperInstance() : this.destroyPopperInstance();
|
|
4185
|
+
this.visibleChange.emit(_value);
|
|
4186
|
+
}
|
|
4184
4187
|
}
|
|
4185
4188
|
get visible() {
|
|
4186
4189
|
return this._visible;
|
|
@@ -4205,13 +4208,13 @@ class DropdownComponent {
|
|
|
4205
4208
|
dropdownStateSubscribe(subscribe = true) {
|
|
4206
4209
|
if (subscribe) {
|
|
4207
4210
|
this.dropdownStateSubscription =
|
|
4208
|
-
this.dropdownService.dropdownState$.
|
|
4209
|
-
|
|
4210
|
-
|
|
4211
|
-
|
|
4212
|
-
|
|
4213
|
-
|
|
4214
|
-
|
|
4211
|
+
this.dropdownService.dropdownState$.pipe(filter((state) => {
|
|
4212
|
+
return this === state.dropdown;
|
|
4213
|
+
})).subscribe((state) => {
|
|
4214
|
+
if ('visible' in state) {
|
|
4215
|
+
state?.visible === 'toggle'
|
|
4216
|
+
? this.toggleDropdown()
|
|
4217
|
+
: (this.visible = state.visible);
|
|
4215
4218
|
}
|
|
4216
4219
|
});
|
|
4217
4220
|
}
|
|
@@ -4233,9 +4236,13 @@ class DropdownComponent {
|
|
|
4233
4236
|
}
|
|
4234
4237
|
}
|
|
4235
4238
|
ngOnInit() {
|
|
4236
|
-
this.dropdownStateSubscribe();
|
|
4237
4239
|
this.setVisibleState(this.visible);
|
|
4238
4240
|
}
|
|
4241
|
+
ngOnChanges(changes) {
|
|
4242
|
+
if (changes['visible'] && !changes['visible'].firstChange) {
|
|
4243
|
+
this.setVisibleState(changes['visible'].currentValue);
|
|
4244
|
+
}
|
|
4245
|
+
}
|
|
4239
4246
|
ngOnDestroy() {
|
|
4240
4247
|
this.clearListeners();
|
|
4241
4248
|
this.dropdownStateSubscribe(false);
|
|
@@ -4314,7 +4321,7 @@ class DropdownComponent {
|
|
|
4314
4321
|
}
|
|
4315
4322
|
}
|
|
4316
4323
|
DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DropdownComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DropdownService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4317
|
-
DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: DropdownComponent, selector: "c-dropdown", inputs: { alignment: "alignment", autoClose: "autoClose", dark: "dark", direction: "direction", placement: "placement", popper: "popper", popperOptions: "popperOptions", variant: "variant", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "this.hostClasses", "style": "this.hostStyle" } }, providers: [DropdownService], queries: [{ propertyName: "_toggler", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "_menu", first: true, predicate: DropdownMenuDirective, descendants: true }, { propertyName: "_menuElementRef", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }], exportAs: ["cDropdown"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] });
|
|
4324
|
+
DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: DropdownComponent, selector: "c-dropdown", inputs: { alignment: "alignment", autoClose: "autoClose", dark: "dark", direction: "direction", placement: "placement", popper: "popper", popperOptions: "popperOptions", variant: "variant", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "this.hostClasses", "style": "this.hostStyle" } }, providers: [DropdownService], queries: [{ propertyName: "_toggler", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "_menu", first: true, predicate: DropdownMenuDirective, descendants: true }, { propertyName: "_menuElementRef", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }], exportAs: ["cDropdown"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] });
|
|
4318
4325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
4319
4326
|
type: Component,
|
|
4320
4327
|
args: [{ selector: 'c-dropdown', template: '<ng-content></ng-content>', exportAs: 'cDropdown', providers: [DropdownService], styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
|
|
@@ -5977,6 +5984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
|
|
|
5977
5984
|
args: [TemplateIdDirective, { descendants: true }]
|
|
5978
5985
|
}] } });
|
|
5979
5986
|
|
|
5987
|
+
var _DateRangePickerComponent_closeOnSelect;
|
|
5980
5988
|
/** Must be a valid date string */
|
|
5981
5989
|
// todo: validation
|
|
5982
5990
|
// export function invalidDateStringValidator(locale: string): ValidatorFn {
|
|
@@ -6003,6 +6011,7 @@ class DateRangePickerComponent {
|
|
|
6003
6011
|
this.dayFormat = 'numeric';
|
|
6004
6012
|
this._calendars = 2;
|
|
6005
6013
|
this._cleaner = true;
|
|
6014
|
+
_DateRangePickerComponent_closeOnSelect.set(this, false);
|
|
6006
6015
|
this._indicator = true;
|
|
6007
6016
|
this._inputReadOnly = false;
|
|
6008
6017
|
this._navYearFirst = false;
|
|
@@ -6104,6 +6113,17 @@ class DateRangePickerComponent {
|
|
|
6104
6113
|
get cleaner() {
|
|
6105
6114
|
return this._cleaner;
|
|
6106
6115
|
}
|
|
6116
|
+
/**
|
|
6117
|
+
* Determine if the dropdown should be closed after value setting.
|
|
6118
|
+
* @type boolean
|
|
6119
|
+
* @default false
|
|
6120
|
+
*/
|
|
6121
|
+
set closeOnSelect(value) {
|
|
6122
|
+
__classPrivateFieldSet(this, _DateRangePickerComponent_closeOnSelect, coerceBooleanProperty(value), "f");
|
|
6123
|
+
}
|
|
6124
|
+
get closeOnSelect() {
|
|
6125
|
+
return __classPrivateFieldGet(this, _DateRangePickerComponent_closeOnSelect, "f");
|
|
6126
|
+
}
|
|
6107
6127
|
/**
|
|
6108
6128
|
* Toggle visibility or set the content of the input indicator.
|
|
6109
6129
|
* @type boolean
|
|
@@ -6234,6 +6254,10 @@ class DateRangePickerComponent {
|
|
|
6234
6254
|
this.onChange(newValue);
|
|
6235
6255
|
this.onTouched();
|
|
6236
6256
|
this.valueChange.emit(this.value);
|
|
6257
|
+
if (this.closeOnSelect) {
|
|
6258
|
+
const hasValue = this.range ? !!(this.value.startDate && this.value.endDate) : !!this.value;
|
|
6259
|
+
this.visible = !hasValue;
|
|
6260
|
+
}
|
|
6237
6261
|
}
|
|
6238
6262
|
}
|
|
6239
6263
|
get value() {
|
|
@@ -6460,14 +6484,15 @@ class DateRangePickerComponent {
|
|
|
6460
6484
|
this.endDate = time ?? this.endDate;
|
|
6461
6485
|
}
|
|
6462
6486
|
}
|
|
6487
|
+
_DateRangePickerComponent_closeOnSelect = new WeakMap();
|
|
6463
6488
|
DateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
6464
|
-
DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: DateRangePickerComponent, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: "calendars", cleaner: "cleaner", format: "format", indicator: "indicator", inputReadOnly: "inputReadOnly", navYearFirst: "navYearFirst", placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: "separator", size: "size", timepicker: "timepicker", valid: "valid", visible: "visible", startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: "navigation", range: "range", dateFilter: "dateFilter", disabled: "disabled", value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
|
|
6489
|
+
DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: DateRangePickerComponent, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: "calendars", cleaner: "cleaner", closeOnSelect: "closeOnSelect", format: "format", indicator: "indicator", inputReadOnly: "inputReadOnly", navYearFirst: "navYearFirst", placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: "separator", size: "size", timepicker: "timepicker", valid: "valid", visible: "visible", startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: "navigation", range: "range", dateFilter: "dateFilter", disabled: "disabled", value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
|
|
6465
6490
|
{
|
|
6466
6491
|
provide: NG_VALUE_ACCESSOR,
|
|
6467
6492
|
useExisting: forwardRef(() => DateRangePickerComponent),
|
|
6468
6493
|
multi: true
|
|
6469
6494
|
}
|
|
6470
|
-
], 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\" [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 ?? 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 [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 ?? placeholder[1]\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid\"\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 && startDateElementRef.value && !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", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
|
|
6495
|
+
], 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\" [(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 ?? 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 [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 ?? placeholder[1]\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid\"\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 && startDateElementRef.value && !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", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
|
|
6471
6496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
6472
6497
|
type: Component,
|
|
6473
6498
|
args: [{ selector: 'c-date-range-picker', exportAs: 'cDateRangePicker', providers: [
|
|
@@ -6476,13 +6501,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
|
|
|
6476
6501
|
useExisting: forwardRef(() => DateRangePickerComponent),
|
|
6477
6502
|
multi: true
|
|
6478
6503
|
}
|
|
6479
|
-
], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [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 ?? 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 [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 ?? placeholder[1]\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid\"\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 && startDateElementRef.value && !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" }]
|
|
6504
|
+
], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(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 ?? 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 [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 ?? placeholder[1]\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid\"\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 && startDateElementRef.value && !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" }]
|
|
6480
6505
|
}], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { dayFormat: [{
|
|
6481
6506
|
type: Input
|
|
6482
6507
|
}], calendars: [{
|
|
6483
6508
|
type: Input
|
|
6484
6509
|
}], cleaner: [{
|
|
6485
6510
|
type: Input
|
|
6511
|
+
}], closeOnSelect: [{
|
|
6512
|
+
type: Input
|
|
6486
6513
|
}], format: [{
|
|
6487
6514
|
type: Input
|
|
6488
6515
|
}], indicator: [{
|
|
@@ -7074,7 +7101,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
|
|
|
7074
7101
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
7075
7102
|
multi: true
|
|
7076
7103
|
}
|
|
7077
|
-
], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [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 ?? 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 [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 ?? placeholder[1]\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid\"\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 && startDateElementRef.value && !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", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
|
|
7104
|
+
], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(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 ?? 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 [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 ?? placeholder[1]\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid\"\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 && startDateElementRef.value && !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", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
|
|
7078
7105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
7079
7106
|
type: Component,
|
|
7080
7107
|
args: [{ selector: 'c-date-picker', exportAs: 'cDatePicker', providers: [
|
|
@@ -7083,7 +7110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
|
|
|
7083
7110
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
7084
7111
|
multi: true
|
|
7085
7112
|
}
|
|
7086
|
-
], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [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 ?? 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 [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 ?? placeholder[1]\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid\"\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 && startDateElementRef.value && !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" }]
|
|
7113
|
+
], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(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 ?? 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 [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 ?? placeholder[1]\"\n cFormControl\n #endDateElementRef\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.disabled]=\"disabled ? '' : null\"\n pattern=\"[1-9]*\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid\"\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 && startDateElementRef.value && !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" }]
|
|
7087
7114
|
}], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { placeholder: [{
|
|
7088
7115
|
type: Input
|
|
7089
7116
|
}], startDateChange: [{
|
|
@@ -8492,7 +8519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
|
|
|
8492
8519
|
class MultiSelectTagComponent {
|
|
8493
8520
|
constructor(multiSelectService) {
|
|
8494
8521
|
this.multiSelectService = multiSelectService;
|
|
8495
|
-
this.multiselectVisible =
|
|
8522
|
+
this.multiselectVisible$ = this.multiSelectService.multiSelectVisible$;
|
|
8496
8523
|
this.remove = new EventEmitter();
|
|
8497
8524
|
}
|
|
8498
8525
|
get hostClasses() {
|
|
@@ -8500,37 +8527,18 @@ class MultiSelectTagComponent {
|
|
|
8500
8527
|
'form-multi-select-tag': true
|
|
8501
8528
|
};
|
|
8502
8529
|
}
|
|
8503
|
-
ngOnInit() {
|
|
8504
|
-
this.multiselectSubscribe();
|
|
8505
|
-
}
|
|
8506
|
-
ngOnDestroy() {
|
|
8507
|
-
this.multiselectSubscribe(false);
|
|
8508
|
-
}
|
|
8509
8530
|
handleRemove($event) {
|
|
8510
8531
|
if (this.option) {
|
|
8511
8532
|
this.option.selected = false;
|
|
8512
8533
|
this.remove.emit(this.option);
|
|
8513
8534
|
}
|
|
8514
8535
|
}
|
|
8515
|
-
multiselectSubscribe(subscribe = true) {
|
|
8516
|
-
if (subscribe) {
|
|
8517
|
-
this.multiselectVisibleSubscription =
|
|
8518
|
-
this.multiSelectService.multiSelectVisible$.subscribe((visible) => {
|
|
8519
|
-
setTimeout(() => {
|
|
8520
|
-
this.multiselectVisible = visible;
|
|
8521
|
-
});
|
|
8522
|
-
});
|
|
8523
|
-
}
|
|
8524
|
-
else {
|
|
8525
|
-
this.multiselectVisibleSubscription.unsubscribe();
|
|
8526
|
-
}
|
|
8527
|
-
}
|
|
8528
8536
|
}
|
|
8529
8537
|
MultiSelectTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MultiSelectTagComponent, deps: [{ token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8530
|
-
MultiSelectTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: { option: "option" }, outputs: { remove: "remove" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template [ngIfElse]=\"elseContent\"\n [ngIf]=\"!!option\">{{option.label ?? option.value ?? 'undefined'}}</ng-template>\n<ng-template #elseContent>\n <ng-content></ng-content>\n</ng-template>\n<button (click)=\"handleRemove($event)\" *ngIf=\"!option?.disabled\"
|
|
8538
|
+
MultiSelectTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: { option: "option" }, outputs: { remove: "remove" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template [ngIfElse]=\"elseContent\"\n [ngIf]=\"!!option\">{{option.label ?? option.value ?? 'undefined'}}\n</ng-template>\n<ng-template #elseContent>\n <ng-content></ng-content>\n</ng-template>\n<button (click)=\"handleRemove($event)\" *ngIf=\"!option?.disabled\"\n [disabled]=\"((multiselectVisible$ | async) ?? false) === false\" aria-label=\"Clear\"\n class=\"form-multi-select-tag-delete close\" type=\"button\">\n <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
|
|
8531
8539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MultiSelectTagComponent, decorators: [{
|
|
8532
8540
|
type: Component,
|
|
8533
|
-
args: [{ selector: 'c-multi-select-tag', template: "<ng-template [ngIfElse]=\"elseContent\"\n [ngIf]=\"!!option\">{{option.label ?? option.value ?? 'undefined'}}</ng-template>\n<ng-template #elseContent>\n <ng-content></ng-content>\n</ng-template>\n<button (click)=\"handleRemove($event)\" *ngIf=\"!option?.disabled\"
|
|
8541
|
+
args: [{ selector: 'c-multi-select-tag', template: "<ng-template [ngIfElse]=\"elseContent\"\n [ngIf]=\"!!option\">{{option.label ?? option.value ?? 'undefined'}}\n</ng-template>\n<ng-template #elseContent>\n <ng-content></ng-content>\n</ng-template>\n<button (click)=\"handleRemove($event)\" *ngIf=\"!option?.disabled\"\n [disabled]=\"((multiselectVisible$ | async) ?? false) === false\" aria-label=\"Clear\"\n class=\"form-multi-select-tag-delete close\" type=\"button\">\n <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"] }]
|
|
8534
8542
|
}], ctorParameters: function () { return [{ type: MultiSelectService }]; }, propDecorators: { option: [{
|
|
8535
8543
|
type: Input
|
|
8536
8544
|
}], remove: [{
|
|
@@ -13977,7 +13985,7 @@ class TabContentComponent {
|
|
|
13977
13985
|
this.tabService = tabService;
|
|
13978
13986
|
this._activeTabPaneIdx = -1;
|
|
13979
13987
|
/**
|
|
13980
|
-
* Event
|
|
13988
|
+
* Event emitted on the active tab pane index change.
|
|
13981
13989
|
*/
|
|
13982
13990
|
this.activeTabPaneIdxChange = new EventEmitter();
|
|
13983
13991
|
}
|