@porscheinformatik/clr-addons 18.1.1 → 18.1.3
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/content-panel/content-panel.mjs +3 -3
- package/esm2022/datagrid/date-filter/date-filter.component.mjs +9 -7
- package/esm2022/daterangepicker/directives/daterangepicker-container/daterangepicker-container.component.mjs +2 -2
- package/esm2022/history/history.mjs +3 -3
- package/fesm2022/clr-addons.mjs +14 -12
- package/fesm2022/clr-addons.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/clr-addons-phs.css +2 -2
- package/styles/clr-addons-phs.css.map +1 -1
- package/styles/clr-addons-phs.min.css +1 -1
- package/styles/clr-addons-phs.min.css.map +1 -1
package/fesm2022/clr-addons.mjs
CHANGED
|
@@ -293,7 +293,7 @@ class ClrContentPanel {
|
|
|
293
293
|
window.dispatchEvent(new Event('resize'));
|
|
294
294
|
}
|
|
295
295
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
296
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrContentPanel, selector: "clr-content-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.content-panel": "true" } }, ngImport: i0, template: "<ng-container *ngIf=\"_open\">\n <div [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <h3 class=\"content-panel-title\">\n <button type=\"button\" class=\"close content-panel-close-btn\" (click)=\"close()\">\n <cds-icon class=\"content-panel-close-icon\" shape=\"times\" size=\"
|
|
296
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrContentPanel, selector: "clr-content-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.content-panel": "true" } }, ngImport: i0, template: "<ng-container *ngIf=\"_open\">\n <div [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <h3 class=\"content-panel-title\">\n <button type=\"button\" class=\"close content-panel-close-btn\" (click)=\"close()\">\n <cds-icon class=\"content-panel-close-icon\" shape=\"times\" size=\"24\"></cds-icon>\n </button>\n <ng-content select=\"[clr-content-panel-title]\"></ng-content>\n </h3>\n <ng-content select=\"[clr-content-panel-content]\"></ng-content>\n </div>\n <div [@fade] class=\"content-panel-backdrop\" (click)=\"close()\" (@fade.done)=\"resizeWindow()\"></div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }], animations: [
|
|
297
297
|
trigger('slideIn', [
|
|
298
298
|
transition(':enter', [style({ opacity: 0, width: 0 }), animate('0.2s', style({ opacity: 1, width: '*' }))]),
|
|
299
299
|
transition(':leave', [style({ opacity: 1, width: '*' }), animate('0.2s', style({ opacity: 0, width: 0 }))]),
|
|
@@ -317,7 +317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
|
|
|
317
317
|
]),
|
|
318
318
|
], host: {
|
|
319
319
|
'[class.content-panel]': 'true',
|
|
320
|
-
}, template: "<ng-container *ngIf=\"_open\">\n <div [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <h3 class=\"content-panel-title\">\n <button type=\"button\" class=\"close content-panel-close-btn\" (click)=\"close()\">\n <cds-icon class=\"content-panel-close-icon\" shape=\"times\" size=\"
|
|
320
|
+
}, template: "<ng-container *ngIf=\"_open\">\n <div [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <h3 class=\"content-panel-title\">\n <button type=\"button\" class=\"close content-panel-close-btn\" (click)=\"close()\">\n <cds-icon class=\"content-panel-close-icon\" shape=\"times\" size=\"24\"></cds-icon>\n </button>\n <ng-content select=\"[clr-content-panel-title]\"></ng-content>\n </h3>\n <ng-content select=\"[clr-content-panel-content]\"></ng-content>\n </div>\n <div [@fade] class=\"content-panel-backdrop\" (click)=\"close()\" (@fade.done)=\"resizeWindow()\"></div>\n</ng-container>\n" }]
|
|
321
321
|
}], propDecorators: { opened: [{
|
|
322
322
|
type: Output,
|
|
323
323
|
args: ['clrOpened']
|
|
@@ -4526,11 +4526,11 @@ class ClrHistory {
|
|
|
4526
4526
|
this.historyService.setHistoryPinned(this.username, !this.pinActivated);
|
|
4527
4527
|
}
|
|
4528
4528
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrHistory, deps: [{ token: ClrHistoryService }, { token: HISTORY_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4529
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrHistory, selector: "clr-history", inputs: { username: ["clrUsername", "username"], context: ["clrContext", "context"], pinActive: ["clrPinActive", "pinActive"], dropdownHeader: ["clrDropdownHeader", "dropdownHeader"], dropdownPin: ["clrDropdownPin", "dropdownPin"], dropdownUnpin: ["clrDropdownUnpin", "dropdownUnpin"], domain: ["clrDomain", "domain"], position: ["clrPosition", "position"] }, ngImport: i0, template: "<clr-dropdown>\n <button type=\"button\" class=\"btn btn-icon btn-outline-primary\" clrDropdownTrigger>\n <cds-icon shape=\"history\" size=\"
|
|
4529
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrHistory, selector: "clr-history", inputs: { username: ["clrUsername", "username"], context: ["clrContext", "context"], pinActive: ["clrPinActive", "pinActive"], dropdownHeader: ["clrDropdownHeader", "dropdownHeader"], dropdownPin: ["clrDropdownPin", "dropdownPin"], dropdownUnpin: ["clrDropdownUnpin", "dropdownUnpin"], domain: ["clrDomain", "domain"], position: ["clrPosition", "position"] }, ngImport: i0, template: "<clr-dropdown>\n <button type=\"button\" class=\"btn btn-icon btn-outline-primary\" clrDropdownTrigger>\n <cds-icon shape=\"history\" size=\"16\"></cds-icon>\n <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n </button>\n <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n {{history.title}}\n </button>\n <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n <button clrDropdownItem (click)=\"togglePinHistory()\">\n <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n </button>\n </clr-dropdown-menu>\n</clr-dropdown>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "component", type: i2.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i2.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i2.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i2.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }] }); }
|
|
4530
4530
|
}
|
|
4531
4531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrHistory, decorators: [{
|
|
4532
4532
|
type: Component,
|
|
4533
|
-
args: [{ selector: 'clr-history', template: "<clr-dropdown>\n <button type=\"button\" class=\"btn btn-icon btn-outline-primary\" clrDropdownTrigger>\n <cds-icon shape=\"history\" size=\"
|
|
4533
|
+
args: [{ selector: 'clr-history', template: "<clr-dropdown>\n <button type=\"button\" class=\"btn btn-icon btn-outline-primary\" clrDropdownTrigger>\n <cds-icon shape=\"history\" size=\"16\"></cds-icon>\n <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n </button>\n <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n {{history.title}}\n </button>\n <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n <button clrDropdownItem (click)=\"togglePinHistory()\">\n <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n </button>\n </clr-dropdown-menu>\n</clr-dropdown>\n" }]
|
|
4534
4534
|
}], ctorParameters: () => [{ type: ClrHistoryService }, { type: HistoryProvider, decorators: [{
|
|
4535
4535
|
type: Inject,
|
|
4536
4536
|
args: [HISTORY_PROVIDER]
|
|
@@ -6461,12 +6461,14 @@ class ClrDateFilterComponent {
|
|
|
6461
6461
|
if (values && (values[0] !== this._from || values[1] !== this._to)) {
|
|
6462
6462
|
if (typeof values[0] === 'object') {
|
|
6463
6463
|
this._from = values[0];
|
|
6464
|
+
this._fromTime = this._from?.toLocaleTimeString();
|
|
6464
6465
|
}
|
|
6465
6466
|
else {
|
|
6466
6467
|
this._from = null;
|
|
6467
6468
|
}
|
|
6468
6469
|
if (typeof values[1] === 'object') {
|
|
6469
6470
|
this._to = values[1];
|
|
6471
|
+
this._toTime = this._to?.toLocaleTimeString();
|
|
6470
6472
|
}
|
|
6471
6473
|
else {
|
|
6472
6474
|
this._to = null;
|
|
@@ -6491,7 +6493,7 @@ class ClrDateFilterComponent {
|
|
|
6491
6493
|
}
|
|
6492
6494
|
if (this.fromTime) {
|
|
6493
6495
|
const [hours, minutes, seconds] = this.fromTime.split(':').map(n => parseInt(n));
|
|
6494
|
-
from.setHours(hours, minutes, seconds
|
|
6496
|
+
from.setHours(hours, minutes, seconds || 0, 0);
|
|
6495
6497
|
}
|
|
6496
6498
|
this._from = from;
|
|
6497
6499
|
this._changes.next([this._from, this._to]);
|
|
@@ -6502,7 +6504,7 @@ class ClrDateFilterComponent {
|
|
|
6502
6504
|
this._fromTime = fromtime;
|
|
6503
6505
|
if (this._fromTime && this._from) {
|
|
6504
6506
|
const [hours, minutes, seconds] = this._fromTime.split(':').map(n => parseInt(n));
|
|
6505
|
-
this._from.setHours(hours, minutes, seconds
|
|
6507
|
+
this._from.setHours(hours, minutes, seconds || 0, 0);
|
|
6506
6508
|
this._changes.next([this._from, this._to]);
|
|
6507
6509
|
this.filterValueChange.emit([this._from, this._to]);
|
|
6508
6510
|
}
|
|
@@ -6517,7 +6519,7 @@ class ClrDateFilterComponent {
|
|
|
6517
6519
|
}
|
|
6518
6520
|
if (this.toTime) {
|
|
6519
6521
|
const [hours, minutes, seconds] = this.toTime.split(':').map(n => parseInt(n));
|
|
6520
|
-
to.setHours(hours, minutes, seconds
|
|
6522
|
+
to.setHours(hours, minutes, seconds || 0, 0);
|
|
6521
6523
|
}
|
|
6522
6524
|
this._to = to;
|
|
6523
6525
|
this._changes.next([this._from, this._to]);
|
|
@@ -6528,7 +6530,7 @@ class ClrDateFilterComponent {
|
|
|
6528
6530
|
this._toTime = totime;
|
|
6529
6531
|
if (this._toTime && this._to) {
|
|
6530
6532
|
const [hours, minutes, seconds] = this._toTime.split(':').map(n => parseInt(n));
|
|
6531
|
-
this._to.setHours(hours, minutes, seconds
|
|
6533
|
+
this._to.setHours(hours, minutes, seconds || 0, 0);
|
|
6532
6534
|
this._changes.next([this._from, this._to]);
|
|
6533
6535
|
this.filterValueChange.emit([this._from, this._to]);
|
|
6534
6536
|
}
|
|
@@ -6578,11 +6580,11 @@ class ClrDateFilterComponent {
|
|
|
6578
6580
|
return other === this;
|
|
6579
6581
|
}
|
|
6580
6582
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDateFilterComponent, deps: [{ token: i2.ClrCommonStringsService }, { token: i2.ClrPopoverEventsService }, { token: i2.ClrDatagridFilter }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6581
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrDateFilterComponent, selector: "clr-date-filter", inputs: { timeActive: "timeActive", property: ["clrProperty", "property"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, ngImport: i0, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\">\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<ng-container *ngIf=\"!timeActive\">\n <clr-date-container>\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n />\n </clr-date-container>\n <clr-date-container>\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n />\n </clr-date-container>\n</ng-container>\n<ng-container *ngIf=\"timeActive\">\n <clr-date-time-container>\n <clr-date-container class=\"time-filter-active\">\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input time-filter-active-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n />\n </clr-date-container>\n <input clrTime type=\"time\" [(ngModel)]=\"fromTime\" />\n </clr-date-time-container>\n <clr-date-time-container>\n <clr-date-container class=\"time-filter-active\">\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input time-filter-active-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n />\n </clr-date-container>\n <input clrTime type=\"time\" [(ngModel)]=\"toTime\" />\n </clr-date-time-container>\n</ng-container>\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem}.time-filter-active-input{width:5rem!important}\n"], dependencies: [{ kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i2.ClrDateContainer, selector: "clr-date-container", inputs: ["clrPosition"] }, { kind: "directive", type: i2.ClrDateInput, selector: "[clrDate]", inputs: ["placeholder", "clrDate", "min", "max", "disabled"], outputs: ["clrDateChange"] }, { kind: "directive", type: i2.ClrDateInputValidator, selector: "[clrDate]" }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDateTimeContainer, selector: "clr-date-time-container" }, { kind: "directive", type: ClrTimeInput, selector: "[clrTime]" }] }); }
|
|
6583
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrDateFilterComponent, selector: "clr-date-filter", inputs: { timeActive: "timeActive", property: ["clrProperty", "property"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, ngImport: i0, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\">\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<ng-container *ngIf=\"!timeActive\">\n <clr-date-container>\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n />\n </clr-date-container>\n <clr-date-container>\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n />\n </clr-date-container>\n</ng-container>\n<ng-container *ngIf=\"timeActive\">\n <clr-date-time-container>\n <clr-date-container class=\"time-filter-active\">\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input time-filter-active-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n />\n </clr-date-container>\n <input clrTime type=\"time\" class=\"time-filter-input\" [(ngModel)]=\"fromTime\" />\n </clr-date-time-container>\n <clr-date-time-container>\n <clr-date-container class=\"time-filter-active\">\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input time-filter-active-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n />\n </clr-date-container>\n <input clrTime type=\"time\" class=\"time-filter-input\" [(ngModel)]=\"toTime\" />\n </clr-date-time-container>\n</ng-container>\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem}.time-filter-active-input{width:5rem!important}.time-filter-input{width:4rem!important}\n"], dependencies: [{ kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i2.ClrDateContainer, selector: "clr-date-container", inputs: ["clrPosition"] }, { kind: "directive", type: i2.ClrDateInput, selector: "[clrDate]", inputs: ["placeholder", "clrDate", "min", "max", "disabled"], outputs: ["clrDateChange"] }, { kind: "directive", type: i2.ClrDateInputValidator, selector: "[clrDate]" }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDateTimeContainer, selector: "clr-date-time-container" }, { kind: "directive", type: ClrTimeInput, selector: "[clrTime]" }] }); }
|
|
6582
6584
|
}
|
|
6583
6585
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDateFilterComponent, decorators: [{
|
|
6584
6586
|
type: Component,
|
|
6585
|
-
args: [{ selector: 'clr-date-filter', template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\">\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<ng-container *ngIf=\"!timeActive\">\n <clr-date-container>\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n />\n </clr-date-container>\n <clr-date-container>\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n />\n </clr-date-container>\n</ng-container>\n<ng-container *ngIf=\"timeActive\">\n <clr-date-time-container>\n <clr-date-container class=\"time-filter-active\">\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input time-filter-active-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n />\n </clr-date-container>\n <input clrTime type=\"time\" [(ngModel)]=\"fromTime\" />\n </clr-date-time-container>\n <clr-date-time-container>\n <clr-date-container class=\"time-filter-active\">\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input time-filter-active-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n />\n </clr-date-container>\n <input clrTime type=\"time\" [(ngModel)]=\"toTime\" />\n </clr-date-time-container>\n</ng-container>\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem}.time-filter-active-input{width:5rem!important}\n"] }]
|
|
6587
|
+
args: [{ selector: 'clr-date-filter', template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\">\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<ng-container *ngIf=\"!timeActive\">\n <clr-date-container>\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n />\n </clr-date-container>\n <clr-date-container>\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n />\n </clr-date-container>\n</ng-container>\n<ng-container *ngIf=\"timeActive\">\n <clr-date-time-container>\n <clr-date-container class=\"time-filter-active\">\n <input\n #input_from\n type=\"date\"\n name=\"from\"\n class=\"datagrid-date-filter-input time-filter-active-input\"\n [(clrDate)]=\"from\"\n [placeholder]=\"minPlaceholderValue\"\n [attr.aria-label]=\"minPlaceholderValue\"\n />\n </clr-date-container>\n <input clrTime type=\"time\" class=\"time-filter-input\" [(ngModel)]=\"fromTime\" />\n </clr-date-time-container>\n <clr-date-time-container>\n <clr-date-container class=\"time-filter-active\">\n <input\n type=\"date\"\n name=\"to\"\n class=\"datagrid-date-filter-input time-filter-active-input\"\n [(clrDate)]=\"to\"\n [placeholder]=\"maxPlaceholderValue\"\n [attr.aria-label]=\"maxPlaceholderValue\"\n />\n </clr-date-container>\n <input clrTime type=\"time\" class=\"time-filter-input\" [(ngModel)]=\"toTime\" />\n </clr-date-time-container>\n</ng-container>\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem}.time-filter-active-input{width:5rem!important}.time-filter-input{width:4rem!important}\n"] }]
|
|
6586
6588
|
}], ctorParameters: () => [{ type: i2.ClrCommonStringsService }, { type: i2.ClrPopoverEventsService }, { type: i2.ClrDatagridFilter }], propDecorators: { timeActive: [{
|
|
6587
6589
|
type: Input
|
|
6588
6590
|
}], property: [{
|
|
@@ -8080,7 +8082,7 @@ class ClrDaterangepickerContainerComponent extends ClrAbstractContainer {
|
|
|
8080
8082
|
DaterangeService,
|
|
8081
8083
|
OpenedDatepickersTrackerService,
|
|
8082
8084
|
ControlIdService,
|
|
8083
|
-
], queries: [{ propertyName: "daterangepickerDirective", first: true, predicate: ClrDaterangepickerDirective, descendants: true }], viewQueries: [{ propertyName: "datepickerComponents", predicate: ClrDatepickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<label *ngIf=\"!this.labelComponent && this.addLayoutGrid\"></label>\n<div\n [class.clr-col-12]=\"this.addLayoutGrid\"\n [class.clr-col-md-10]=\"this.addLayoutGrid\"\n [class.clr-error]=\"this.isInvalid\"\n class=\"clr-control-container\"\n>\n <div class=\"clr-input-wrapper\" clrPopoverAnchor>\n <div [class.clr-focus]=\"this.focus\" class=\"clr-input-group\">\n <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n <button\n [attr.aria-label]=\"this.friendlyDaterange\"\n [disabled]=\"this.disabled\"\n [title]=\"this.friendlyDaterange\"\n class=\"clr-input-group-icon-action\"\n clrPopoverOpenCloseButton\n type=\"button\"\n >\n <cds-icon shape=\"calendar\" status=\"info\"></cds-icon>\n </button>\n </div>\n <cds-icon\n *ngIf=\"this.isInvalid\"\n aria-hidden=\"true\"\n class=\"clr-validate-icon\"\n shape=\"exclamation-circle\"\n status=\"danger\"\n ></cds-icon>\n <cds-icon\n *ngIf=\"!this.isInvalid\"\n aria-hidden=\"true\"\n class=\"clr-validate-icon\"\n shape=\"check-circle\"\n status=\"success\"\n ></cds-icon>\n </div>\n <ng-content *ngIf=\"this.showHelper\" select=\"clr-control-helper\"></ng-content>\n <ng-content *ngIf=\"this.showInvalid\" select=\"clr-control-error\"></ng-content>\n <ng-content *ngIf=\"this.showValid\" select=\"clr-control-success\"></ng-content>\n\n <div\n *clrPopoverContent=\"this.open; at: this.popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n class=\"clr-daterangepicker-container-popup datepicker\"\n >\n <button\n class=\"btn btn-sm btn-link close clr-smart-close-button btn-trash\"\n type=\"button\"\n (click)=\"daterangeService.updateSelectedDaterange(null)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n [attr.aria-label]=\"this.commonStrings.close\"\n class=\"btn btn-sm btn-link close\"\n clrPopoverCloseButton\n type=\"button\"\n >\n <cds-icon [attr.title]=\"this.commonStrings.close\" aria-hidden=\"true\" shape=\"window-close\"></cds-icon>\n <span class=\"clr-sr-only\">{{ this.commonStrings.close }}</span>\n </button>\n <div class=\"clr-daterangepicker-container-popup-content\">\n <form [clrLayout]=\"'vertical'\" clrForm>\n <div class=\"datetime-container\">\n <clr-datepicker\n (valueChange)=\"this.onDateFromChange($event)\"\n [label]=\"this.labelFrom\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateFrom\"\n class=\"clr-datepicker\"\n >\n </clr-datepicker>\n <clr-timepicker\n *ngIf=\"timeSelection\"\n class=\"timepicker\"\n (valueChange)=\"this.onTimeFromChange($event)\"\n [value]=\"this.timeFrom\"\n [activateSeconds]=\"activateSeconds\"\n >\n </clr-timepicker>\n </div>\n <div class=\"datetime-container datetime-container-to\">\n <clr-datepicker\n (valueChange)=\"this.onDateToChange($event)\"\n [label]=\"this.labelTo\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateTo\"\n class=\"clr-datepicker\"\n >\n </clr-datepicker>\n <clr-timepicker\n *ngIf=\"timeSelection\"\n class=\"timepicker\"\n (valueChange)=\"this.onTimeToChange($event)\"\n [value]=\"this.timeTo\"\n [activateSeconds]=\"activateSeconds\"\n >\n </clr-timepicker>\n </div>\n </form>\n <div *ngIf=\"this.presets?.length > 0\" class=\"clr-daterangepicker-container-popup-content-presets\">\n <ng-container *ngFor=\"let preset of this.presets\">\n <button (click)=\"this.applyPreset(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n {{ preset.text }}\n </button>\n </ng-container>\n </div>\n <div *ngIf=\"this.presetsDateTime?.length > 0\" class=\"clr-daterangepicker-container-popup-content-presets\">\n <ng-container *ngFor=\"let preset of this.presetsDateTime\">\n <button (click)=\"this.applyPresetTime(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n {{ preset.text }}\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [".clr-input-wrapper>.clr-input-group{max-width:fit-content;padding-right:1.5rem}.clr-input-wrapper>.clr-input-group ::ng-deep>.clr-input{width:100%;padding:0 .3rem}.clr-daterangepicker-container-popup.datepicker{padding:0;width:auto;height:auto;display:block}.clr-daterangepicker-container-popup.datepicker .clr-smart-close-button{min-width:1.2rem;padding:0;position:absolute;right:0;margin:5px}.clr-daterangepicker-container-popup.datepicker .btn-trash{padding-right:25px;margin:5px}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content{padding
|
|
8085
|
+
], queries: [{ propertyName: "daterangepickerDirective", first: true, predicate: ClrDaterangepickerDirective, descendants: true }], viewQueries: [{ propertyName: "datepickerComponents", predicate: ClrDatepickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<label *ngIf=\"!this.labelComponent && this.addLayoutGrid\"></label>\n<div\n [class.clr-col-12]=\"this.addLayoutGrid\"\n [class.clr-col-md-10]=\"this.addLayoutGrid\"\n [class.clr-error]=\"this.isInvalid\"\n class=\"clr-control-container\"\n>\n <div class=\"clr-input-wrapper\" clrPopoverAnchor>\n <div [class.clr-focus]=\"this.focus\" class=\"clr-input-group\">\n <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n <button\n [attr.aria-label]=\"this.friendlyDaterange\"\n [disabled]=\"this.disabled\"\n [title]=\"this.friendlyDaterange\"\n class=\"clr-input-group-icon-action\"\n clrPopoverOpenCloseButton\n type=\"button\"\n >\n <cds-icon shape=\"calendar\" status=\"info\"></cds-icon>\n </button>\n </div>\n <cds-icon\n *ngIf=\"this.isInvalid\"\n aria-hidden=\"true\"\n class=\"clr-validate-icon\"\n shape=\"exclamation-circle\"\n status=\"danger\"\n ></cds-icon>\n <cds-icon\n *ngIf=\"!this.isInvalid\"\n aria-hidden=\"true\"\n class=\"clr-validate-icon\"\n shape=\"check-circle\"\n status=\"success\"\n ></cds-icon>\n </div>\n <ng-content *ngIf=\"this.showHelper\" select=\"clr-control-helper\"></ng-content>\n <ng-content *ngIf=\"this.showInvalid\" select=\"clr-control-error\"></ng-content>\n <ng-content *ngIf=\"this.showValid\" select=\"clr-control-success\"></ng-content>\n\n <div\n *clrPopoverContent=\"this.open; at: this.popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n class=\"clr-daterangepicker-container-popup datepicker\"\n >\n <button\n class=\"btn btn-sm btn-link close clr-smart-close-button btn-trash\"\n type=\"button\"\n (click)=\"daterangeService.updateSelectedDaterange(null)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n [attr.aria-label]=\"this.commonStrings.close\"\n class=\"btn btn-sm btn-link close\"\n clrPopoverCloseButton\n type=\"button\"\n >\n <cds-icon [attr.title]=\"this.commonStrings.close\" aria-hidden=\"true\" shape=\"window-close\"></cds-icon>\n <span class=\"clr-sr-only\">{{ this.commonStrings.close }}</span>\n </button>\n <div class=\"clr-daterangepicker-container-popup-content\">\n <form [clrLayout]=\"'vertical'\" clrForm>\n <div class=\"datetime-container\">\n <clr-datepicker\n (valueChange)=\"this.onDateFromChange($event)\"\n [label]=\"this.labelFrom\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateFrom\"\n class=\"clr-datepicker\"\n >\n </clr-datepicker>\n <clr-timepicker\n *ngIf=\"timeSelection\"\n class=\"timepicker\"\n (valueChange)=\"this.onTimeFromChange($event)\"\n [value]=\"this.timeFrom\"\n [activateSeconds]=\"activateSeconds\"\n >\n </clr-timepicker>\n </div>\n <div class=\"datetime-container datetime-container-to\">\n <clr-datepicker\n (valueChange)=\"this.onDateToChange($event)\"\n [label]=\"this.labelTo\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateTo\"\n class=\"clr-datepicker\"\n >\n </clr-datepicker>\n <clr-timepicker\n *ngIf=\"timeSelection\"\n class=\"timepicker\"\n (valueChange)=\"this.onTimeToChange($event)\"\n [value]=\"this.timeTo\"\n [activateSeconds]=\"activateSeconds\"\n >\n </clr-timepicker>\n </div>\n </form>\n <div *ngIf=\"this.presets?.length > 0\" class=\"clr-daterangepicker-container-popup-content-presets\">\n <ng-container *ngFor=\"let preset of this.presets\">\n <button (click)=\"this.applyPreset(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n {{ preset.text }}\n </button>\n </ng-container>\n </div>\n <div *ngIf=\"this.presetsDateTime?.length > 0\" class=\"clr-daterangepicker-container-popup-content-presets\">\n <ng-container *ngFor=\"let preset of this.presetsDateTime\">\n <button (click)=\"this.applyPresetTime(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n {{ preset.text }}\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [".clr-input-wrapper>.clr-input-group{max-width:fit-content;padding-right:1.5rem}.clr-input-wrapper>.clr-input-group ::ng-deep>.clr-input{width:100%;padding:0 .3rem}.clr-daterangepicker-container-popup.datepicker{padding:0;width:auto;height:auto;display:block}.clr-daterangepicker-container-popup.datepicker .clr-smart-close-button{min-width:1.2rem;padding:0;position:absolute;right:0;margin:5px}.clr-daterangepicker-container-popup.datepicker .btn-trash{padding-right:25px;margin:5px}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content{padding:1rem;display:flex;flex-direction:row}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-form ::ng-deep clr-datepicker:first-of-type ::ng-deep clr-date-container{margin-top:0}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets{margin-left:.6rem;padding:.3rem}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets .btn{margin-right:0}.datetime-container{display:flex;flex-direction:row;align-items:flex-start}.datetime-container-to{padding-top:1rem}.timepicker{padding-left:1rem}.timepicker clr-input-container{margin-top:.8rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i2.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { kind: "directive", type: i2.ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: i2.ÇlrClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: i2.ÇlrClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: i2.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { kind: "component", type: ClrDatepickerComponent, selector: "clr-datepicker", inputs: ["value", "label", "minDate", "maxDate", "timeSelection"], outputs: ["valueChange"] }, { kind: "component", type: ClrTimepickerComponent, selector: "clr-timepicker", inputs: ["value", "activateSeconds"], outputs: ["valueChange"] }] }); }
|
|
8084
8086
|
}
|
|
8085
8087
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDaterangepickerContainerComponent, decorators: [{
|
|
8086
8088
|
type: Component,
|
|
@@ -8092,7 +8094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
|
|
|
8092
8094
|
DaterangeService,
|
|
8093
8095
|
OpenedDatepickersTrackerService,
|
|
8094
8096
|
ControlIdService,
|
|
8095
|
-
], template: "<ng-content select=\"label\"></ng-content>\n<label *ngIf=\"!this.labelComponent && this.addLayoutGrid\"></label>\n<div\n [class.clr-col-12]=\"this.addLayoutGrid\"\n [class.clr-col-md-10]=\"this.addLayoutGrid\"\n [class.clr-error]=\"this.isInvalid\"\n class=\"clr-control-container\"\n>\n <div class=\"clr-input-wrapper\" clrPopoverAnchor>\n <div [class.clr-focus]=\"this.focus\" class=\"clr-input-group\">\n <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n <button\n [attr.aria-label]=\"this.friendlyDaterange\"\n [disabled]=\"this.disabled\"\n [title]=\"this.friendlyDaterange\"\n class=\"clr-input-group-icon-action\"\n clrPopoverOpenCloseButton\n type=\"button\"\n >\n <cds-icon shape=\"calendar\" status=\"info\"></cds-icon>\n </button>\n </div>\n <cds-icon\n *ngIf=\"this.isInvalid\"\n aria-hidden=\"true\"\n class=\"clr-validate-icon\"\n shape=\"exclamation-circle\"\n status=\"danger\"\n ></cds-icon>\n <cds-icon\n *ngIf=\"!this.isInvalid\"\n aria-hidden=\"true\"\n class=\"clr-validate-icon\"\n shape=\"check-circle\"\n status=\"success\"\n ></cds-icon>\n </div>\n <ng-content *ngIf=\"this.showHelper\" select=\"clr-control-helper\"></ng-content>\n <ng-content *ngIf=\"this.showInvalid\" select=\"clr-control-error\"></ng-content>\n <ng-content *ngIf=\"this.showValid\" select=\"clr-control-success\"></ng-content>\n\n <div\n *clrPopoverContent=\"this.open; at: this.popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n class=\"clr-daterangepicker-container-popup datepicker\"\n >\n <button\n class=\"btn btn-sm btn-link close clr-smart-close-button btn-trash\"\n type=\"button\"\n (click)=\"daterangeService.updateSelectedDaterange(null)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n [attr.aria-label]=\"this.commonStrings.close\"\n class=\"btn btn-sm btn-link close\"\n clrPopoverCloseButton\n type=\"button\"\n >\n <cds-icon [attr.title]=\"this.commonStrings.close\" aria-hidden=\"true\" shape=\"window-close\"></cds-icon>\n <span class=\"clr-sr-only\">{{ this.commonStrings.close }}</span>\n </button>\n <div class=\"clr-daterangepicker-container-popup-content\">\n <form [clrLayout]=\"'vertical'\" clrForm>\n <div class=\"datetime-container\">\n <clr-datepicker\n (valueChange)=\"this.onDateFromChange($event)\"\n [label]=\"this.labelFrom\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateFrom\"\n class=\"clr-datepicker\"\n >\n </clr-datepicker>\n <clr-timepicker\n *ngIf=\"timeSelection\"\n class=\"timepicker\"\n (valueChange)=\"this.onTimeFromChange($event)\"\n [value]=\"this.timeFrom\"\n [activateSeconds]=\"activateSeconds\"\n >\n </clr-timepicker>\n </div>\n <div class=\"datetime-container datetime-container-to\">\n <clr-datepicker\n (valueChange)=\"this.onDateToChange($event)\"\n [label]=\"this.labelTo\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateTo\"\n class=\"clr-datepicker\"\n >\n </clr-datepicker>\n <clr-timepicker\n *ngIf=\"timeSelection\"\n class=\"timepicker\"\n (valueChange)=\"this.onTimeToChange($event)\"\n [value]=\"this.timeTo\"\n [activateSeconds]=\"activateSeconds\"\n >\n </clr-timepicker>\n </div>\n </form>\n <div *ngIf=\"this.presets?.length > 0\" class=\"clr-daterangepicker-container-popup-content-presets\">\n <ng-container *ngFor=\"let preset of this.presets\">\n <button (click)=\"this.applyPreset(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n {{ preset.text }}\n </button>\n </ng-container>\n </div>\n <div *ngIf=\"this.presetsDateTime?.length > 0\" class=\"clr-daterangepicker-container-popup-content-presets\">\n <ng-container *ngFor=\"let preset of this.presetsDateTime\">\n <button (click)=\"this.applyPresetTime(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n {{ preset.text }}\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [".clr-input-wrapper>.clr-input-group{max-width:fit-content;padding-right:1.5rem}.clr-input-wrapper>.clr-input-group ::ng-deep>.clr-input{width:100%;padding:0 .3rem}.clr-daterangepicker-container-popup.datepicker{padding:0;width:auto;height:auto;display:block}.clr-daterangepicker-container-popup.datepicker .clr-smart-close-button{min-width:1.2rem;padding:0;position:absolute;right:0;margin:5px}.clr-daterangepicker-container-popup.datepicker .btn-trash{padding-right:25px;margin:5px}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content{padding
|
|
8097
|
+
], template: "<ng-content select=\"label\"></ng-content>\n<label *ngIf=\"!this.labelComponent && this.addLayoutGrid\"></label>\n<div\n [class.clr-col-12]=\"this.addLayoutGrid\"\n [class.clr-col-md-10]=\"this.addLayoutGrid\"\n [class.clr-error]=\"this.isInvalid\"\n class=\"clr-control-container\"\n>\n <div class=\"clr-input-wrapper\" clrPopoverAnchor>\n <div [class.clr-focus]=\"this.focus\" class=\"clr-input-group\">\n <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n <button\n [attr.aria-label]=\"this.friendlyDaterange\"\n [disabled]=\"this.disabled\"\n [title]=\"this.friendlyDaterange\"\n class=\"clr-input-group-icon-action\"\n clrPopoverOpenCloseButton\n type=\"button\"\n >\n <cds-icon shape=\"calendar\" status=\"info\"></cds-icon>\n </button>\n </div>\n <cds-icon\n *ngIf=\"this.isInvalid\"\n aria-hidden=\"true\"\n class=\"clr-validate-icon\"\n shape=\"exclamation-circle\"\n status=\"danger\"\n ></cds-icon>\n <cds-icon\n *ngIf=\"!this.isInvalid\"\n aria-hidden=\"true\"\n class=\"clr-validate-icon\"\n shape=\"check-circle\"\n status=\"success\"\n ></cds-icon>\n </div>\n <ng-content *ngIf=\"this.showHelper\" select=\"clr-control-helper\"></ng-content>\n <ng-content *ngIf=\"this.showInvalid\" select=\"clr-control-error\"></ng-content>\n <ng-content *ngIf=\"this.showValid\" select=\"clr-control-success\"></ng-content>\n\n <div\n *clrPopoverContent=\"this.open; at: this.popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n class=\"clr-daterangepicker-container-popup datepicker\"\n >\n <button\n class=\"btn btn-sm btn-link close clr-smart-close-button btn-trash\"\n type=\"button\"\n (click)=\"daterangeService.updateSelectedDaterange(null)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n [attr.aria-label]=\"this.commonStrings.close\"\n class=\"btn btn-sm btn-link close\"\n clrPopoverCloseButton\n type=\"button\"\n >\n <cds-icon [attr.title]=\"this.commonStrings.close\" aria-hidden=\"true\" shape=\"window-close\"></cds-icon>\n <span class=\"clr-sr-only\">{{ this.commonStrings.close }}</span>\n </button>\n <div class=\"clr-daterangepicker-container-popup-content\">\n <form [clrLayout]=\"'vertical'\" clrForm>\n <div class=\"datetime-container\">\n <clr-datepicker\n (valueChange)=\"this.onDateFromChange($event)\"\n [label]=\"this.labelFrom\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateFrom\"\n class=\"clr-datepicker\"\n >\n </clr-datepicker>\n <clr-timepicker\n *ngIf=\"timeSelection\"\n class=\"timepicker\"\n (valueChange)=\"this.onTimeFromChange($event)\"\n [value]=\"this.timeFrom\"\n [activateSeconds]=\"activateSeconds\"\n >\n </clr-timepicker>\n </div>\n <div class=\"datetime-container datetime-container-to\">\n <clr-datepicker\n (valueChange)=\"this.onDateToChange($event)\"\n [label]=\"this.labelTo\"\n [maxDate]=\"this.maxDate\"\n [minDate]=\"this.minDate\"\n [value]=\"this.dateTo\"\n class=\"clr-datepicker\"\n >\n </clr-datepicker>\n <clr-timepicker\n *ngIf=\"timeSelection\"\n class=\"timepicker\"\n (valueChange)=\"this.onTimeToChange($event)\"\n [value]=\"this.timeTo\"\n [activateSeconds]=\"activateSeconds\"\n >\n </clr-timepicker>\n </div>\n </form>\n <div *ngIf=\"this.presets?.length > 0\" class=\"clr-daterangepicker-container-popup-content-presets\">\n <ng-container *ngFor=\"let preset of this.presets\">\n <button (click)=\"this.applyPreset(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n {{ preset.text }}\n </button>\n </ng-container>\n </div>\n <div *ngIf=\"this.presetsDateTime?.length > 0\" class=\"clr-daterangepicker-container-popup-content-presets\">\n <ng-container *ngFor=\"let preset of this.presetsDateTime\">\n <button (click)=\"this.applyPresetTime(preset)\" class=\"btn btn-outline btn-sm btn-block\" type=\"button\">\n {{ preset.text }}\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [".clr-input-wrapper>.clr-input-group{max-width:fit-content;padding-right:1.5rem}.clr-input-wrapper>.clr-input-group ::ng-deep>.clr-input{width:100%;padding:0 .3rem}.clr-daterangepicker-container-popup.datepicker{padding:0;width:auto;height:auto;display:block}.clr-daterangepicker-container-popup.datepicker .clr-smart-close-button{min-width:1.2rem;padding:0;position:absolute;right:0;margin:5px}.clr-daterangepicker-container-popup.datepicker .btn-trash{padding-right:25px;margin:5px}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content{padding:1rem;display:flex;flex-direction:row}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-form ::ng-deep clr-datepicker:first-of-type ::ng-deep clr-date-container{margin-top:0}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets{margin-left:.6rem;padding:.3rem}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content .clr-daterangepicker-container-popup-content-presets .btn{margin-right:0}.datetime-container{display:flex;flex-direction:row;align-items:flex-start}.datetime-container-to{padding-top:1rem}.timepicker{padding-left:1rem}.timepicker clr-input-container{margin-top:.8rem}\n"] }]
|
|
8096
8098
|
}], ctorParameters: () => [{ type: i2.ClrPopoverEventsService }, { type: i2.ClrPopoverToggleService }, { type: i2.ClrCommonStringsService }, { type: i2.ClrLayout, decorators: [{
|
|
8097
8099
|
type: Optional
|
|
8098
8100
|
}] }, { type: DaterangeControlStateService }, { type: OpenedDatepickersTrackerService }, { type: DaterangeService }, { type: DaterangeParsingService }], propDecorators: { presets: [{
|