@porscheinformatik/clr-addons 18.0.4 → 18.1.1

package/fesm2022/clr-addons.mjs

@@ -1232,7 +1232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 /*
- * Copyright (c) 2018-2023 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -1288,7 +1288,6 @@ class ClrMainNavGroup {
     closeMenus(selector) {
         selector = '.main-container:not(.open-hamburger-menu) ' + selector;
         const hiddenInputs = document.querySelectorAll(selector);
-        // tslint:disable-next-line:prefer-for-of
         for (let i = 0; i < hiddenInputs.length; i++) {
             hiddenInputs[i].checked = false;
         }
@@ -4527,11 +4526,11 @@ class ClrHistory {
         this.historyService.setHistoryPinned(this.username, !this.pinActivated);
     }
     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 }); }
-    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-link\" clrDropdownTrigger>\n    <cds-icon shape=\"history\" size=\"24\"></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"] }] }); }
+    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=\"24\"></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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrHistory, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-history', template: "<clr-dropdown>\n  <button type=\"button\" class=\"btn btn-icon btn-link\" clrDropdownTrigger>\n    <cds-icon shape=\"history\" size=\"24\"></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" }]
+            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=\"24\"></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" }]
         }], ctorParameters: () => [{ type: ClrHistoryService }, { type: HistoryProvider, decorators: [{
                     type: Inject,
                     args: [HISTORY_PROVIDER]
@@ -6435,6 +6434,7 @@ class ClrDateFilterComponent {
     constructor(commonStrings, clrPopoverEventsService, filterContainer) {
         this.commonStrings = commonStrings;
         this.clrPopoverEventsService = clrPopoverEventsService;
+        this.timeActive = false;
         this.filterValueChange = new EventEmitter();
         /**
          * Internal values and accessor
@@ -6478,16 +6478,35 @@ class ClrDateFilterComponent {
     get from() {
         return this._from;
     }
+    get fromTime() {
+        return this._fromTime;
+    }
+    get toTime() {
+        return this._toTime;
+    }
     set from(from) {
         if (typeof from === 'object' && from !== this._from) {
             if (from && typeof from.setHours === 'function') {
                 from.setHours(0, 0, 0, 0); // set from-date to start of day
             }
+            if (this.fromTime) {
+                const [hours, minutes, seconds] = this.fromTime.split(':').map(n => parseInt(n));
+                from.setHours(hours, minutes, seconds ? seconds : 0, 0);
+            }
             this._from = from;
             this._changes.next([this._from, this._to]);
             this.filterValueChange.emit([this._from, this._to]);
         }
     }
+    set fromTime(fromtime) {
+        this._fromTime = fromtime;
+        if (this._fromTime && this._from) {
+            const [hours, minutes, seconds] = this._fromTime.split(':').map(n => parseInt(n));
+            this._from.setHours(hours, minutes, seconds ? seconds : 0, 0);
+            this._changes.next([this._from, this._to]);
+            this.filterValueChange.emit([this._from, this._to]);
+        }
+    }
     get to() {
         return this._to;
     }
@@ -6496,11 +6515,24 @@ class ClrDateFilterComponent {
             if (to && typeof to.setHours === 'function') {
                 to.setHours(23, 59, 59, 999); // set to-date to end of day
             }
+            if (this.toTime) {
+                const [hours, minutes, seconds] = this.toTime.split(':').map(n => parseInt(n));
+                to.setHours(hours, minutes, seconds ? seconds : 0, 0);
+            }
             this._to = to;
             this._changes.next([this._from, this._to]);
             this.filterValueChange.emit([this._from, this._to]);
         }
     }
+    set toTime(totime) {
+        this._toTime = totime;
+        if (this._toTime && this._to) {
+            const [hours, minutes, seconds] = this._toTime.split(':').map(n => parseInt(n));
+            this._to.setHours(hours, minutes, seconds ? seconds : 0, 0);
+            this._changes.next([this._from, this._to]);
+            this.filterValueChange.emit([this._from, this._to]);
+        }
+    }
     /**
      * Indicates if the filter is currently active, (at least one input is set)
      */
@@ -6537,6 +6569,8 @@ class ClrDateFilterComponent {
     clearFilter() {
         this._from = null;
         this._to = null;
+        this.fromTime = null;
+        this.toTime = null;
         this._changes.next([this._from, this._to]);
         this.filterValueChange.emit([this._from, this._to]);
     }
@@ -6544,12 +6578,14 @@ class ClrDateFilterComponent {
         return other === this;
     }
     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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrDateFilterComponent, selector: "clr-date-filter", inputs: { 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<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", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}\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]" }] }); }
+    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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDateFilterComponent, decorators: [{
             type: Component,
-            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<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", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i2.ClrCommonStringsService }, { type: i2.ClrPopoverEventsService }, { type: i2.ClrDatagridFilter }], propDecorators: { property: [{
+            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"] }]
+        }], ctorParameters: () => [{ type: i2.ClrCommonStringsService }, { type: i2.ClrPopoverEventsService }, { type: i2.ClrDatagridFilter }], propDecorators: { timeActive: [{
+                type: Input
+            }], property: [{
                 type: Input,
                 args: ['clrProperty']
             }], maxPlaceholder: [{
@@ -6568,13 +6604,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
 
 class ClrDateFilterModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDateFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: ClrDateFilterModule, declarations: [ClrDateFilterComponent], imports: [ClarityModule, CommonModule, FormsModule], exports: [ClrDateFilterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDateFilterModule, imports: [ClarityModule, CommonModule, FormsModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: ClrDateFilterModule, declarations: [ClrDateFilterComponent], imports: [ClarityModule, CommonModule, FormsModule, ClrDateTimeModule, ClrFormModule], exports: [ClrDateFilterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDateFilterModule, imports: [ClarityModule, CommonModule, FormsModule, ClrDateTimeModule, ClrFormModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDateFilterModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [ClarityModule, CommonModule, FormsModule],
+                    imports: [ClarityModule, CommonModule, FormsModule, ClrDateTimeModule, ClrFormModule],
                     declarations: [ClrDateFilterComponent],
                     exports: [ClrDateFilterComponent],
                 }]
@@ -6783,6 +6819,7 @@ class ClrDatepickerComponent {
          * Maximum date that can be selected.
          */
         this.maxDate = undefined;
+        this.timeSelection = false;
         /**
          * Event triggered when value changes.
          */
@@ -6807,7 +6844,7 @@ class ClrDatepickerComponent {
         this.inputElm.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDatepickerComponent, deps: [{ token: OpenedDatepickersTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrDatepickerComponent, selector: "clr-datepicker", inputs: { value: "value", label: "label", minDate: "minDate", maxDate: "maxDate" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElm", first: true, predicate: ["inputElm"], descendants: true }, { propertyName: "clrDateContainer", first: true, predicate: ClrDateContainer, descendants: true }], ngImport: i0, template: "<clr-date-container>\n  <label>{{ this.label }}</label>\n  <input #inputElm clrDate [(clrDate)]=\"this.date\" [min]=\"this.minDateAttr\" [max]=\"this.maxDateAttr\" />\n</clr-date-container>\n", dependencies: [{ kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { 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]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrDatepickerComponent, selector: "clr-datepicker", inputs: { value: "value", label: "label", minDate: "minDate", maxDate: "maxDate", timeSelection: "timeSelection" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElm", first: true, predicate: ["inputElm"], descendants: true }, { propertyName: "clrDateContainer", first: true, predicate: ClrDateContainer, descendants: true }], ngImport: i0, template: "<clr-date-container>\n  <label>{{ this.label }}</label>\n  <input #inputElm clrDate [(clrDate)]=\"this.date\" [min]=\"this.minDateAttr\" [max]=\"this.maxDateAttr\" />\n</clr-date-container>\n", dependencies: [{ kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { 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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDatepickerComponent, decorators: [{
             type: Component,
@@ -6820,6 +6857,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 type: Input
             }], maxDate: [{
                 type: Input
+            }], timeSelection: [{
+                type: Input
             }], inputElm: [{
                 type: ViewChild,
                 args: ['inputElm']
@@ -7008,6 +7047,26 @@ class DaterangeParsingService {
         const toDateStr = this.toLocaleDisplayFormatString(toDate);
         return fromDateStr + separator + toDateStr;
     }
+    toLocaleStringWithTime(daterange, separator = SEPARATOR_TEXT_DEFAULT) {
+        if (daterange == null) {
+            return '';
+        }
+        const { from, to, fromTime, toTime } = daterange;
+        if (from == null || to == null) {
+            return '';
+        }
+        const fromDate = from.toDate();
+        const toDate = to.toDate();
+        const fromDateStr = this.toLocaleDisplayFormatString(fromDate);
+        const toDateStr = this.toLocaleDisplayFormatString(toDate);
+        if (fromTime === null || toTime === null) {
+            return fromDateStr + separator + toDateStr;
+        }
+        return fromDateStr + ' ' + this.toTimeString(fromTime) + separator + toDateStr + ' ' + this.toTimeString(toTime);
+    }
+    toTimeString(time) {
+        return time?.toHTML5SpecTimeString();
+    }
     /**
      * Convert date to locale display format string.
      * @param date - Javascript Date object.
@@ -7167,6 +7226,8 @@ class DaterangeService {
         /** Maximum date that can be selected. */
         this.maxDate = null;
         this._selectedDaterange = null;
+        this.timeActive = false;
+        this.timeSecondsActive = false;
         /**
          * Event triggered when value changes.
          */
@@ -7190,16 +7251,26 @@ class DaterangeService {
             this.valueChange.emit(value);
         }
     }
+    /**
+     * Set selected Timerange value.
+     * @param value - New selected Timerange value.
+     * @param triggerEvent - Trigger change event (default true).
+     */
+    updateSelectedTimerange(value, triggerEvent = true) {
+        this._selectedDaterange = value;
+        if (triggerEvent) {
+            this.valueChange.emit(value);
+        }
+    }
     /**
      * Checks if daterange is valid.
      * Daterange is considered invalid when it's empty, or when one of it's properties is absent.
      * @returns Wether daterange is valid.
      */
     isValid() {
-        if (this._selectedDaterange == null || this._selectedDaterange.from == null || this._selectedDaterange.to == null) {
-            return false;
-        }
-        return true;
+        return !(this._selectedDaterange == null ||
+            this._selectedDaterange.from == null ||
+            this._selectedDaterange.to == null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DaterangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DaterangeService }); }
@@ -7306,6 +7377,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 args: [ClrControlSuccess]
             }] } });
 
+/**
+ * Time model.
+ * Takes care of keeping records of full time.
+ */
+class TimeModel {
+    constructor(...args) {
+        if (args[0] instanceof Date) {
+            const date = args[0];
+            this.hours = date.getHours();
+            this.minutes = date.getMinutes();
+            this.seconds = date.getSeconds();
+        }
+        else if (typeof args[0] === 'string') {
+            const [hours, minutes, seconds] = args[0].split(':').map(n => parseInt(n));
+            this.hours = hours;
+            this.minutes = minutes;
+            this.seconds = seconds;
+        }
+        else {
+            this.hours = args[0];
+            this.minutes = args[1];
+            this.seconds = args[2];
+        }
+    }
+    /**
+     * Checks if the passed value is equal to current time model.
+     * @param value - Time model.
+     * @returns Whether value is equal to current time model.
+     */
+    isEqual(value) {
+        if (value) {
+            return this.hours === value.hours && this.minutes === value.minutes && this.seconds === value.seconds;
+        }
+        return false;
+    }
+    /**
+     * Checks if current time model is after value.
+     * @param value - time model.
+     * @returns Whether current time model is after value.
+     */
+    isAfter(value) {
+        return this.toDate() > value.toDate();
+    }
+    /**
+     * Checks if current time model is before value.
+     * @param value - Time model.
+     * @returns Whether current time model is before value.
+     */
+    isBefore(value) {
+        return this.toDate() < value.toDate();
+    }
+    /**
+     * Clones the current odel.
+     * @returns Cloned model.
+     */
+    clone() {
+        return new TimeModel(this.hours, this.minutes, this.seconds);
+    }
+    /**
+     * Convert to Javascript Date object.
+     * @returns Javascript Date object.
+     */
+    toDate() {
+        return new Date(new Date().setHours(this.hours, this.minutes, this.seconds ? this.seconds : 0));
+    }
+    /**
+     * To HTML5 time spec string.
+     * @returns Time as HTML5 spec string.
+     */
+    toHTML5SpecTimeString() {
+        // The clarity time picker uses the format 'hh:mm:ss'.
+        if (this.seconds) {
+            return this.pad(this.hours) + ':' + this.pad(this.minutes) + ':' + this.pad(this.seconds);
+        }
+        // The clarity time picker uses the format 'hh:mm'.
+        return this.pad(this.hours) + ':' + this.pad(this.minutes);
+    }
+    pad(num) {
+        return num < 10 ? `0${num}` : `${num}`;
+    }
+}
+
 /**
  * Daterangepicker.
  */
@@ -7323,6 +7476,16 @@ class ClrDaterangepickerDirective {
         this.daterangeService.maxDate = !value ? null : new DayModel(value);
     }
     get placeholderText() {
+        if (this.daterangeService.timeActive) {
+            return (this.placeholder ??
+                this.daterangeParsingService.localeFormat +
+                    ' hh:mm' +
+                    (this.daterangeService.timeSecondsActive ? ':ss' : '') +
+                    this.separatorText +
+                    this.daterangeParsingService.localeFormat +
+                    ' hh:mm' +
+                    (this.daterangeService.timeSecondsActive ? ':ss' : ''));
+        }
         return (this.placeholder ??
             this.daterangeParsingService.localeFormat + this.separatorText + this.daterangeParsingService.localeFormat);
     }
@@ -7364,6 +7527,11 @@ class ClrDaterangepickerDirective {
          * Locale text between 'from' and 'to' dateranges.
          */
         this.separatorText = SEPARATOR_TEXT_DEFAULT;
+        this.regex = /^[0-9]+[mhdw]$/;
+        this.regexW = /^[0-9]+w$/;
+        this.regexH = /^[0-9]+h$/;
+        this.regexD = /^[0-9]+d$/;
+        this.regexM = /^[0-9]+m$/;
         /**
          * Event that is triggered when value changes.
          */
@@ -7411,6 +7579,15 @@ class ClrDaterangepickerDirective {
         if (this.control.control.hasError('invalid')) {
             delete this.control.control.errors.invalid;
         }
+        if (!target) {
+            return;
+        }
+        console.log('aaaaa', target, this.regex.test(target.value));
+        if (target.value && this.regex.test(target.value)) {
+            // handle easy access
+            this.handleEasyAccess(target.value);
+            return;
+        }
         // If there is nothing to parse, `ClrDaterangeRequiredValidator` will take care of this.
         if (!target.value) {
             this.daterangeService.updateSelectedDaterange(null, true);
@@ -7468,7 +7645,19 @@ class ClrDaterangepickerDirective {
      * Update input with friendly daterange text.
      */
     updateInput() {
-        const dateString = this.daterangeParsingService.toLocaleString(this.daterangeService.selectedDaterange, this.separatorText);
+        let dateString;
+        if (this.daterangeService.timeActive) {
+            if (this.daterangeService.selectedDaterange &&
+                Object.prototype.hasOwnProperty.call(this.daterangeService.selectedDaterange, 'fromTime')) {
+                this.daterangeService.updateSelectedDaterange(this.daterangeService.selectedDaterange
+                    ? this.daterangeService.selectedDaterange
+                    : null, false);
+            }
+            dateString = this.daterangeParsingService.toLocaleStringWithTime(this.daterangeService.selectedDaterange, this.separatorText);
+        }
+        else {
+            dateString = this.daterangeParsingService.toLocaleString(this.daterangeService.selectedDaterange, this.separatorText);
+        }
         this.renderer.setProperty(this.element.nativeElement, 'value', dateString);
     }
     /**
@@ -7499,6 +7688,43 @@ class ClrDaterangepickerDirective {
     setDisabledState(disabled) {
         this.daterangeControlStateService.disabled = disabled;
     }
+    handleEasyAccess(value) {
+        const now = new Date();
+        if (this.regexW.test(value)) {
+            value = value.replace('w', '');
+            now.setDate(now.getDate() - Number(value) * 7);
+            this.daterangeService.updateSelectedDaterange({
+                from: new DayModel(now),
+                to: new DayModel(new Date()),
+            }, true);
+        }
+        else if (this.regexD.test(value)) {
+            value = value.replace('d', '');
+            now.setDate(now.getDate() - Number(value));
+            this.daterangeService.updateSelectedDaterange({
+                from: new DayModel(now),
+                to: new DayModel(new Date()),
+            }, true);
+        }
+        else if (this.regexH.test(value)) {
+            value = value.replace('h', '');
+            this.daterangeService.updateSelectedDaterange({
+                from: new DayModel(new Date()),
+                to: new DayModel(new Date()),
+                fromTime: new TimeModel(new Date(new Date().getTime() - Number(value) * 3600000)),
+                toTime: new TimeModel(new Date()),
+            }, true);
+        }
+        else if (this.regexM.test(value)) {
+            value = value.replace('m', '');
+            this.daterangeService.updateSelectedDaterange({
+                from: new DayModel(new Date()),
+                to: new DayModel(new Date()),
+                fromTime: new TimeModel(new Date(new Date().getTime() - Number(value) * 60000)),
+                toTime: new TimeModel(new Date()),
+            }, true);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDaterangepickerDirective, deps: [{ token: i3$1.NgControl, self: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DaterangeControlStateService }, { token: ControlIdService }, { token: DaterangeService }, { token: DaterangeParsingService }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: ClrDaterangepickerDirective, selector: "[clrDaterangepicker]", inputs: { min: "min", max: "max", separatorText: "separatorText", placeholder: "placeholder", id: "id", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "change": "onChangeEvent($event.target)", "focus": "focusEvent()", "blur": "blurEvent()" }, properties: { "attr.placeholder": "this.placeholderText", "id": "this.id", "disabled": "this.disabled", "attr.type": "this.inputType", "class.clr-input": "this.inputClass" } }, ngImport: i0 }); }
 }
@@ -7548,7 +7774,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 args: ['blur']
             }] } });
 
-ClarityIcons.addIcons(calendarIcon, exclamationCircleIcon, checkCircleIcon, windowCloseIcon);
+class ClrTimepickerComponent {
+    get time() {
+        if (typeof this.value === 'string') {
+            return this.value;
+        }
+        if (this.value) {
+            return this.value.toHTML5SpecTimeString();
+        }
+    }
+    /**
+     * Set time.
+     */
+    set time(val) {
+        this.value = val;
+        this.valueChange.emit(new TimeModel(val));
+    }
+    constructor() {
+        /**
+         * Activate/Deactivate seconds handling.
+         */
+        this.activateSeconds = false;
+        /**
+         * Event triggered when value changes.
+         */
+        this.valueChange = new EventEmitter();
+    }
+    /**
+     * Focus input.
+     */
+    focus() {
+        this.inputElm.nativeElement.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrTimepickerComponent, selector: "clr-timepicker", inputs: { value: "value", activateSeconds: "activateSeconds" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputElm", first: true, predicate: ["inputElm"], descendants: true }], ngImport: i0, template: "<clr-input-container class=\"clr-input-time\">\n  <label class=\"clr-control-label\">&nbsp;</label>\n  <input clrInput #inputElm [(ngModel)]=\"this.time\" type=\"time\" step=\"{{ activateSeconds ? 1 : 60 }}\" />\n</clr-input-container>\n", styles: [".clr-input-time{margin-top:0}\n"], dependencies: [{ 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: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i2.ClrInputContainer, selector: "clr-input-container" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrTimepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-timepicker', template: "<clr-input-container class=\"clr-input-time\">\n  <label class=\"clr-control-label\">&nbsp;</label>\n  <input clrInput #inputElm [(ngModel)]=\"this.time\" type=\"time\" step=\"{{ activateSeconds ? 1 : 60 }}\" />\n</clr-input-container>\n", styles: [".clr-input-time{margin-top:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{
+                type: Input
+            }], activateSeconds: [{
+                type: Input
+            }], inputElm: [{
+                type: ViewChild,
+                args: ['inputElm']
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+ClarityIcons.addIcons(calendarIcon, exclamationCircleIcon, checkCircleIcon, windowCloseIcon, trashIcon);
 /**
  * Daterangepicker container.
  */
@@ -7568,6 +7843,11 @@ class ClrDaterangepickerContainerComponent extends ClrAbstractContainer {
     get dateFrom() {
         return this.daterangeService.selectedDaterange?.from;
     }
+    get timeFrom() {
+        return this.daterangeService.selectedDaterange
+            ? this.daterangeService.selectedDaterange.fromTime
+            : null;
+    }
     /**
      * Date to.
      * @returns Date to.
@@ -7575,6 +7855,11 @@ class ClrDaterangepickerContainerComponent extends ClrAbstractContainer {
     get dateTo() {
         return this.daterangeService.selectedDaterange?.to;
     }
+    get timeTo() {
+        return this.daterangeService.selectedDaterange
+            ? this.daterangeService.selectedDaterange.toTime
+            : null;
+    }
     /**
      * Minimum date that can be selected.
      * @returns Minimum date that can be selected.
@@ -7616,6 +7901,12 @@ class ClrDaterangepickerContainerComponent extends ClrAbstractContainer {
          * List of presets.
          */
         this.presets = [];
+        /**
+         * List of time presets.
+         */
+        this.presetsDateTime = [];
+        this.timeSelection = false;
+        this.activateSeconds = false;
         /**
          * Text for the 'from' label.
          */
@@ -7641,6 +7932,8 @@ class ClrDaterangepickerContainerComponent extends ClrAbstractContainer {
         if (this.daterangepickerDirective == null) {
             throw new Error('`ClrDaterangepickerContainerComponent` requires an child `ClrDaterangepickerDirective`');
         }
+        this.daterangeService.timeActive = this.timeSelection;
+        this.daterangeService.timeSecondsActive = this.activateSeconds;
         this.listenForDaterangeValueChanges();
         this.listenForOpenedDatepickersTrackerChanges();
         this.listenForPopoverToggleChanges();
@@ -7705,20 +7998,40 @@ class ClrDaterangepickerContainerComponent extends ClrAbstractContainer {
      * @param value - Date from.
      */
     onDateFromChange(value) {
-        this.daterangeService.updateSelectedDaterange({
-            from: value,
-            to: this.dateTo,
-        });
+        if (this.daterangeService.timeActive) {
+            this.daterangeService.updateSelectedDaterange({
+                from: value,
+                to: this.dateTo,
+                fromTime: this.timeFrom,
+                toTime: this.timeTo,
+            });
+        }
+        else {
+            this.daterangeService.updateSelectedDaterange({
+                from: value,
+                to: this.dateTo,
+            });
+        }
     }
     /**
      * Event triggered when date to changed.
      * @param value - Date to.
      */
     onDateToChange(value) {
-        this.daterangeService.updateSelectedDaterange({
-            from: this.dateFrom,
-            to: value,
-        });
+        if (this.daterangeService.timeActive) {
+            this.daterangeService.updateSelectedDaterange({
+                from: this.dateFrom,
+                to: value,
+                fromTime: this.timeFrom,
+                toTime: this.timeTo,
+            });
+        }
+        else {
+            this.daterangeService.updateSelectedDaterange({
+                from: this.dateFrom,
+                to: value,
+            });
+        }
     }
     /**
      * Apply selected preset.
@@ -7733,8 +8046,33 @@ class ClrDaterangepickerContainerComponent extends ClrAbstractContainer {
             this.clrPopoverToggleService.open = false;
         }
     }
+    applyPresetTime(preset) {
+        const range = preset.range();
+        this.daterangeService.updateSelectedDaterange(range);
+        // Close popover here, because it's not possible to conditionally
+        // apply `clrPopoverCloseButton` directive on preset button.
+        if (this.daterangeService.isValid()) {
+            this.clrPopoverToggleService.open = false;
+        }
+    }
+    onTimeFromChange(value) {
+        this.daterangeService.updateSelectedDaterange({
+            from: this.dateFrom,
+            to: this.dateTo,
+            fromTime: value,
+            toTime: this.timeTo,
+        });
+    }
+    onTimeToChange(value) {
+        this.daterangeService.updateSelectedDaterange({
+            from: this.dateFrom,
+            to: this.dateTo,
+            fromTime: this.timeFrom,
+            toTime: value,
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDaterangepickerContainerComponent, deps: [{ token: i2.ClrPopoverEventsService }, { token: i2.ClrPopoverToggleService }, { token: i2.ClrCommonStringsService }, { token: i2.ClrLayout, optional: true }, { token: DaterangeControlStateService }, { token: OpenedDatepickersTrackerService }, { token: DaterangeService }, { token: DaterangeParsingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrDaterangepickerContainerComponent, selector: "clr-daterangepicker-container", inputs: { presets: "presets", clrPosition: "clrPosition", labelFrom: "labelFrom", labelTo: "labelTo" }, host: { properties: { "class": "this.classes" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrDaterangepickerContainerComponent, selector: "clr-daterangepicker-container", inputs: { presets: "presets", presetsDateTime: "presetsDateTime", timeSelection: "timeSelection", activateSeconds: "activateSeconds", clrPosition: "clrPosition", labelFrom: "labelFrom", labelTo: "labelTo" }, host: { properties: { "class": "this.classes" } }, providers: [
             ClrPopoverToggleService,
             ClrPopoverEventsService,
             ClrPopoverPositionService,
@@ -7742,7 +8080,7 @@ class ClrDaterangepickerContainerComponent extends ClrAbstractContainer {
             DaterangeService,
             OpenedDatepickersTrackerService,
             ControlIdService,
-        ], 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-control-container\"\n  [class.clr-error]=\"this.isInvalid\"\n  [class.clr-col-12]=\"this.addLayoutGrid\"\n  [class.clr-col-md-10]=\"this.addLayoutGrid\"\n>\n  <div class=\"clr-input-wrapper\" clrPopoverAnchor>\n    <div class=\"clr-input-group\" [class.clr-focus]=\"this.focus\">\n      <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n      <button\n        type=\"button\"\n        class=\"clr-input-group-icon-action\"\n        [disabled]=\"this.disabled\"\n        [title]=\"this.friendlyDaterange\"\n        [attr.aria-label]=\"this.friendlyDaterange\"\n        clrPopoverOpenCloseButton\n      >\n        <cds-icon status=\"info\" shape=\"calendar\"></cds-icon>\n      </button>\n    </div>\n    <cds-icon\n      *ngIf=\"this.isInvalid\"\n      class=\"clr-validate-icon\"\n      shape=\"exclamation-circle\"\n      status=\"danger\"\n      aria-hidden=\"true\"\n    ></cds-icon>\n    <cds-icon\n      *ngIf=\"!this.isInvalid\"\n      class=\"clr-validate-icon\"\n      shape=\"check-circle\"\n      status=\"success\"\n      aria-hidden=\"true\"\n    ></cds-icon>\n  </div>\n  <ng-content select=\"clr-control-helper\" *ngIf=\"this.showHelper\"></ng-content>\n  <ng-content select=\"clr-control-error\" *ngIf=\"this.showInvalid\"></ng-content>\n  <ng-content select=\"clr-control-success\" *ngIf=\"this.showValid\"></ng-content>\n\n  <div\n    class=\"clr-daterangepicker-container-popup datepicker\"\n    *clrPopoverContent=\"this.open; at: this.popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n  >\n    <button\n      class=\"btn btn-sm btn-link close\"\n      clrPopoverCloseButton\n      type=\"button\"\n      [attr.aria-label]=\"this.commonStrings.close\"\n    >\n      <cds-icon shape=\"window-close\" aria-hidden=\"true\" [attr.title]=\"this.commonStrings.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 clrForm [clrLayout]=\"'vertical'\">\n        <clr-datepicker\n          class=\"clr-datepicker\"\n          [label]=\"this.labelFrom\"\n          [value]=\"this.dateFrom\"\n          [minDate]=\"this.minDate\"\n          [maxDate]=\"this.maxDate\"\n          (valueChange)=\"this.onDateFromChange($event)\"\n        >\n        </clr-datepicker>\n        <clr-datepicker\n          class=\"clr-datepicker\"\n          [label]=\"this.labelTo\"\n          [value]=\"this.dateTo\"\n          [minDate]=\"this.minDate\"\n          [maxDate]=\"this.maxDate\"\n          (valueChange)=\"this.onDateToChange($event)\"\n        >\n        </clr-datepicker>\n      </form>\n      <div class=\"clr-daterangepicker-container-popup-content-presets\" *ngIf=\"this.presets?.length > 0\">\n        <ng-container *ngFor=\"let preset of this.presets\">\n          <button class=\"btn btn-outline btn-sm btn-block\" type=\"button\" (click)=\"this.applyPreset(preset)\">\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;margin:0;padding:0;position:absolute;right:0}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content{padding:.6rem;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}\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"], outputs: ["valueChange"] }] }); }
+        ], 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:.6rem;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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrDaterangepickerContainerComponent, decorators: [{
             type: Component,
@@ -7754,11 +8092,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         DaterangeService,
                         OpenedDatepickersTrackerService,
                         ControlIdService,
-                    ], template: "<ng-content select=\"label\"></ng-content>\n<label *ngIf=\"!this.labelComponent && this.addLayoutGrid\"></label>\n<div\n  class=\"clr-control-container\"\n  [class.clr-error]=\"this.isInvalid\"\n  [class.clr-col-12]=\"this.addLayoutGrid\"\n  [class.clr-col-md-10]=\"this.addLayoutGrid\"\n>\n  <div class=\"clr-input-wrapper\" clrPopoverAnchor>\n    <div class=\"clr-input-group\" [class.clr-focus]=\"this.focus\">\n      <ng-content select=\"[clrDaterangepicker]\"></ng-content>\n      <button\n        type=\"button\"\n        class=\"clr-input-group-icon-action\"\n        [disabled]=\"this.disabled\"\n        [title]=\"this.friendlyDaterange\"\n        [attr.aria-label]=\"this.friendlyDaterange\"\n        clrPopoverOpenCloseButton\n      >\n        <cds-icon status=\"info\" shape=\"calendar\"></cds-icon>\n      </button>\n    </div>\n    <cds-icon\n      *ngIf=\"this.isInvalid\"\n      class=\"clr-validate-icon\"\n      shape=\"exclamation-circle\"\n      status=\"danger\"\n      aria-hidden=\"true\"\n    ></cds-icon>\n    <cds-icon\n      *ngIf=\"!this.isInvalid\"\n      class=\"clr-validate-icon\"\n      shape=\"check-circle\"\n      status=\"success\"\n      aria-hidden=\"true\"\n    ></cds-icon>\n  </div>\n  <ng-content select=\"clr-control-helper\" *ngIf=\"this.showHelper\"></ng-content>\n  <ng-content select=\"clr-control-error\" *ngIf=\"this.showInvalid\"></ng-content>\n  <ng-content select=\"clr-control-success\" *ngIf=\"this.showValid\"></ng-content>\n\n  <div\n    class=\"clr-daterangepicker-container-popup datepicker\"\n    *clrPopoverContent=\"this.open; at: this.popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n  >\n    <button\n      class=\"btn btn-sm btn-link close\"\n      clrPopoverCloseButton\n      type=\"button\"\n      [attr.aria-label]=\"this.commonStrings.close\"\n    >\n      <cds-icon shape=\"window-close\" aria-hidden=\"true\" [attr.title]=\"this.commonStrings.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 clrForm [clrLayout]=\"'vertical'\">\n        <clr-datepicker\n          class=\"clr-datepicker\"\n          [label]=\"this.labelFrom\"\n          [value]=\"this.dateFrom\"\n          [minDate]=\"this.minDate\"\n          [maxDate]=\"this.maxDate\"\n          (valueChange)=\"this.onDateFromChange($event)\"\n        >\n        </clr-datepicker>\n        <clr-datepicker\n          class=\"clr-datepicker\"\n          [label]=\"this.labelTo\"\n          [value]=\"this.dateTo\"\n          [minDate]=\"this.minDate\"\n          [maxDate]=\"this.maxDate\"\n          (valueChange)=\"this.onDateToChange($event)\"\n        >\n        </clr-datepicker>\n      </form>\n      <div class=\"clr-daterangepicker-container-popup-content-presets\" *ngIf=\"this.presets?.length > 0\">\n        <ng-container *ngFor=\"let preset of this.presets\">\n          <button class=\"btn btn-outline btn-sm btn-block\" type=\"button\" (click)=\"this.applyPreset(preset)\">\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;margin:0;padding:0;position:absolute;right:0}.clr-daterangepicker-container-popup.datepicker .clr-daterangepicker-container-popup-content{padding:.6rem;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}\n"] }]
+                    ], 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:.6rem;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"] }]
         }], ctorParameters: () => [{ type: i2.ClrPopoverEventsService }, { type: i2.ClrPopoverToggleService }, { type: i2.ClrCommonStringsService }, { type: i2.ClrLayout, decorators: [{
                     type: Optional
                 }] }, { type: DaterangeControlStateService }, { type: OpenedDatepickersTrackerService }, { type: DaterangeService }, { type: DaterangeParsingService }], propDecorators: { presets: [{
                 type: Input
+            }], presetsDateTime: [{
+                type: Input
+            }], timeSelection: [{
+                type: Input
+            }], activateSeconds: [{
+                type: Input
             }], clrPosition: [{
                 type: Input
             }], labelFrom: [{
@@ -8058,11 +8402,18 @@ class ClrDaterangeOrderValidator {
         if (control.value == null) {
             return null;
         }
-        const { from, to } = control.value;
+        const { from, to, fromTime, toTime } = control.value;
         // Validation with `null` values from 'from' & 'to' is done with the ClrDaterangeRequiredValidator.
         if (from == null || to == null) {
             return null;
         }
+        if ((from.isAfter(to) || from.isEqual(to)) && fromTime && toTime) {
+            if (fromTime.isAfter(toTime)) {
+                return {
+                    [ClrDaterangeOrderValidator.validationErrorName]: control.value,
+                };
+            }
+        }
         if (from.isAfter(to)) {
             return {
                 [ClrDaterangeOrderValidator.validationErrorName]: control.value,
@@ -8173,7 +8524,8 @@ class ClrDaterangepickerModule {
             ClrDaterangepickerContainerComponent,
             ClrDaterangepickerDirective,
             ClrDaterangeRequiredValidator,
-            ClrIfDaterangeErrorDirective], imports: [CommonModule, FormsModule, ClarityModule, ClrDatepickerModule, ClrIconModule], exports: [ClrDaterangeMaxValidator,
+            ClrIfDaterangeErrorDirective,
+            ClrTimepickerComponent], imports: [CommonModule, FormsModule, ClarityModule, ClrDatepickerModule, ClrIconModule], exports: [ClrDaterangeMaxValidator,
             ClrDaterangeMinValidator,
             ClrDaterangeOrderValidator,
             ClrDaterangepickerContainerComponent,
@@ -8195,6 +8547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         ClrDaterangepickerDirective,
                         ClrDaterangeRequiredValidator,
                         ClrIfDaterangeErrorDirective,
+                        ClrTimepickerComponent,
                     ],
                     exports: [
                         ClrDaterangeMaxValidator,
@@ -8294,6 +8647,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }] });
 
+/*
+ * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+ClarityIcons.addIcons(timesIcon);
+class ClrActionPanel {
+    constructor() {
+        this._open = false;
+        this.opened = new EventEmitter();
+        this.closed = new EventEmitter();
+    }
+    isOpen() {
+        return this._open;
+    }
+    open() {
+        if (this._open) {
+            return;
+        }
+        this._open = true;
+        this.opened.emit();
+    }
+    close() {
+        if (!this._open) {
+            return;
+        }
+        this._open = false;
+        this.closed.emit();
+    }
+    toggle() {
+        if (this._open) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    resizeWindow() {
+        // this event is used by the tree table to adjust the colomns width
+        window.dispatchEvent(new Event('resize'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrActionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrActionPanel, selector: "clr-action-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.action-panel": "true" } }, ngImport: i0, template: "<ng-container *ngIf=\"_open\">\n  <div [@slideIn] class=\"action-panel-action-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n    <ng-content select=\"[clr-action-panel-content]\"></ng-content>\n  </div>\n  <div [@fade] class=\"action-panel-backdrop\" (click)=\"close()\" (@fade.done)=\"resizeWindow()\"></div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+            trigger('slideIn', [
+                transition(':enter', [style({ opacity: 0, width: 0 }), animate('0.2s', style({ opacity: 1, width: '*' }))]),
+                transition(':leave', [style({ opacity: 1, width: '*' }), animate('0.2s', style({ opacity: 0, width: 0 }))]),
+            ]),
+            trigger('fade', [
+                transition(':enter', [style({ opacity: 0 }), animate('0.2s ease-in-out', style({ opacity: 0.85 }))]),
+                transition(':leave', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrActionPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'clr-action-panel', animations: [
+                        trigger('slideIn', [
+                            transition(':enter', [style({ opacity: 0, width: 0 }), animate('0.2s', style({ opacity: 1, width: '*' }))]),
+                            transition(':leave', [style({ opacity: 1, width: '*' }), animate('0.2s', style({ opacity: 0, width: 0 }))]),
+                        ]),
+                        trigger('fade', [
+                            transition(':enter', [style({ opacity: 0 }), animate('0.2s ease-in-out', style({ opacity: 0.85 }))]),
+                            transition(':leave', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
+                        ]),
+                    ], host: {
+                        '[class.action-panel]': 'true',
+                    }, template: "<ng-container *ngIf=\"_open\">\n  <div [@slideIn] class=\"action-panel-action-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n    <ng-content select=\"[clr-action-panel-content]\"></ng-content>\n  </div>\n  <div [@fade] class=\"action-panel-backdrop\" (click)=\"close()\" (@fade.done)=\"resizeWindow()\"></div>\n</ng-container>\n" }]
+        }], propDecorators: { opened: [{
+                type: Output,
+                args: ['clrOpened']
+            }], closed: [{
+                type: Output,
+                args: ['clrClosed']
+            }] } });
+
+/*
+ * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrActionPanelContainer {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrActionPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrActionPanelContainer, selector: "clr-action-panel-container", host: { properties: { "class.content-container": "true", "class.action-panel-container": "true" } }, ngImport: i0, template: `
+    <div class="action-panel-outer-wrapper">
+      <ng-content select="clr-action-panel-container-content"></ng-content>
+      <ng-content select="clr-action-panel-container-footer"></ng-content>
+    </div>
+    <ng-content select="clr-action-panel"></ng-content>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrActionPanelContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-action-panel-container',
+                    template: `
+    <div class="action-panel-outer-wrapper">
+      <ng-content select="clr-action-panel-container-content"></ng-content>
+      <ng-content select="clr-action-panel-container-footer"></ng-content>
+    </div>
+    <ng-content select="clr-action-panel"></ng-content>
+  `,
+                    host: {
+                        '[class.content-container]': 'true',
+                        '[class.action-panel-container]': 'true',
+                    },
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrActionPanelContainerContent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrActionPanelContainerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrActionPanelContainerContent, selector: "clr-action-panel-container-content", host: { properties: { "class.content-area": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrActionPanelContainerContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-action-panel-container-content',
+                    template: ` <ng-content></ng-content> `,
+                    host: {
+                        '[class.content-area]': 'true',
+                    },
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrActionPanelContainerFooter {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrActionPanelContainerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrActionPanelContainerFooter, selector: "clr-action-panel-container-footer", host: { properties: { "class.content-area-footer": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrActionPanelContainerFooter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-action-panel-container-footer',
+                    template: ` <ng-content></ng-content> `,
+                    host: {
+                        '[class.content-area-footer]': 'true',
+                    },
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ClrActionPanelModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrActionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: ClrActionPanelModule, declarations: [ClrActionPanel,
+            ClrActionPanelContainer,
+            ClrActionPanelContainerContent,
+            ClrActionPanelContainerFooter], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrActionPanelModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrActionPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ClarityModule, FormsModule],
+                    declarations: [
+                        ClrActionPanel,
+                        ClrActionPanelContainer,
+                        ClrActionPanelContainerContent,
+                        ClrActionPanelContainerFooter,
+                    ],
+                    exports: [ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter],
+                }]
+        }] });
+
 /*
  * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -8332,7 +8860,8 @@ class ClrAddonsModule {
             ClrEnumFilterModule,
             ClrDateFilterModule,
             ClrDaterangepickerModule,
-            ClrIfWarningModule] }); }
+            ClrIfWarningModule,
+            ClrActionPanelModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
             ClrPagerModule,
             ClrDotPagerModule,
@@ -8364,7 +8893,8 @@ class ClrAddonsModule {
             ClrEnumFilterModule,
             ClrDateFilterModule,
             ClrDaterangepickerModule,
-            ClrIfWarningModule] }); }
+            ClrIfWarningModule,
+            ClrActionPanelModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrAddonsModule, decorators: [{
             type: NgModule,
@@ -8402,6 +8932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         ClrDateFilterModule,
                         ClrDaterangepickerModule,
                         ClrIfWarningModule,
+                        ClrActionPanelModule,
                     ],
                 }]
         }] });
@@ -8442,5 +8973,5 @@ function escapeRegex(s) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACShape, AcceptanceDateShape, AcceptedBrands, AccessoriesShape, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BIG_ENDIAN, BlocksGroupForwardShape, BrochureShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, BusinessPartnerWithCar, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CaliforniaSpecialistShape, CampaignOutdatedShape, CampaignShape, CarOffSite, CarOnSite, CarPickupServiceShape, CarWashShape, CertifiedRepairShape, CertifiedRetailerShape, ClrActiveNotification, ClrAddonsIconShapes, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridStatePersistenceModule, ClrDateFilterComponent, ClrDateFilterModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDaterangeMaxValidator, ClrDaterangeMinValidator, ClrDaterangeOrderValidator, ClrDaterangeRequiredValidator, ClrDaterangepickerContainerComponent, ClrDaterangepickerDirective, ClrDaterangepickerModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrEnumFilterComponent, ClrEnumFilterModule, ClrFlowBar, ClrFlowBarModule, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrIfDaterangeErrorDirective, ClrIfWarning, ClrIfWarningModule, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, CompletedByDateShape, ConfiguratorCommercialShape, ConfiguratorPrivateShape, ConsumptionShape, ContactDealerShape, CupraBrandShape, CustomersCenterShape, DATE, DELIMITER_REGEX, DWABrandShape, DatagridFieldDirective, DayModel, DieselShape, DollarBillForwardShape, DollarBillPartialShape, DriversAssistanceShape, EfficiencyShape, ElectricCarsServiceShape, ElectricCarsShape, ElectricityShape, EmissionShape, EnergyShape, EngineShape, ExpressServiceShape, ExteriorShape, ExternalPartForwardShape, FindACarShape, FleetServiceCommercialShape, FleetServicePrivateShape, GasCarsServiceShape, GasShape, HISTORY_NOTIFICATION_URL_PROVIDER, HISTORY_PROVIDER, HistoryProvider, HybridShape, InternalPartForwardShape, InvoiceReadyShape, InvoiceShape, ItemsForwardShape, ItemsReceiveShape, LITTLE_ENDIAN, LITTLE_ENDIAN_REGEX, LoadingVolumeShape, LocateShape, LocationBarComponent, LocationBarContentProvider, LocationBarNode, MIDDLE_ENDIAN, MIDDLE_ENDIAN_REGEX, MONTH, NewCarCommercialShape, NewCarPrivateShape, NewCarUtilityVehicleShape, NightServiceShape, NodeId, OffersShape, OnCallDutyShape, OpenSatShape, PaintMaterialForwardShape, PaintMaterialShape, PaintShopShape, ParkingLocation, PartNonStockForwardShape, PartsForwardShape, PartsNonStockShape, PartsShape, PayloadShape, PerformanceShape, PetrolShape, PlusServiceShape, PopoverPositions, PorscheBrandShape, PowerShape, PowerTrainShape, PriceTypeSwitchShape, QualifiedWorkshopShape, RepeatRepairShape, ReturnDateShape, RoadsideAssistanceShape, RouteShape, SEPARATOR_TEXT_DEFAULT, SeatAirShape, SeatBrandShape, SeatShape, ServiceBellShape, ServiceShape, SizeShape, SkodaBrandShape, StatePersistenceKeyDirective, StockLocatorCommercialShape, StockLocatorPrivateShape, TRANSLATIONS, TaskAndAppointment, TaxiDealerShape, TextForward, TopcardShape, TouaregServiceShape, TransmissionAutomaticShape, TransmissionManualShape, TreetableCellRenderer, TreetableHeaderRenderer, TreetableMainRenderer, TreetableRowRenderer, USER_INPUT_REGEX, UsedCarCommercialShape, UsedCarPrivateShape, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, View360Shape, VinShape, VirtualRealityShape, VsfSearchShape, WCPShape, WheelToWheelShape, WindscreenWashShape, WrenchForward, YEAR, acceptanceDateIcon, accessoriesIcon, accessoryPartsIcon, airConditionerIcon, allIcons, audiBrandIcon, awardWinnerPremiumIcon, blocksGroupForwardIcon, brochureIcon, bundleForwardIcon, businessCustomersCommercialIcon, businessCustomersPrivateIcon, businessPartnerWithCarIcon, calculatorForwardIcon, californiaServiceIcon, californiaSpecialistIcon, campaignIcon, campaignOutdatedIcon, carOffSite, carOnSite, carPickupServiceIcon, carWashIcon, certifiedRepairIcon, certifiedRetailerIcon, clrIconSVG, completedByDateIcon, configuratorCommercialIcon, configuratorPrivateIcon, consumptionIcon, contactDealerIcon, cupraBrandIcon, customersCenterIcon, dieselIcon, dollarBillForwardIcon, dollarBillPartialIcon, driversAssistanceIcon, dwaBrandIcon, efficiencyIcon, electricCarsIcon, electricCarsServiceIcon, electricityIcon, emissionIcon, energyIcon, engineIcon, escapeHtml, escapeRegex, expressServiceIcon, exteriorIcon, externalPartForwardIcon, findACarIcon, fleetServiceCommercialIcon, fleetServicePrivateIcon, gasCarsServiceIcon, gasIcon, hybridIcon, internalPartForwardIcon, invoiceIcon, invoiceReadyIcon, itemsForwardIcon, itemsRecieveIcon, loadingVolumeIcon, locateIcon, newCarCommercialIcon, newCarPrivateIcon, newCarUtilityVehicleIcon, nightServiceIcon, offersIcon, onCallDutyIcon, openSatIcon, paintMaterialForwardIcon, paintMaterialIcon, paintShopIcon, parkingLocationIcon, partsForwardIcon, partsIcon, partsNonStockForwardIcon, partsNonStockIcon, payloadIcon, performanceIcon, petrolIcon, plusServiceIcon, porscheBrandIcon, powerIcon, powerTrainIcon, priceTypeSwitchIcon, qualifiedWorkshopIcon, repeatRepairIcon, returnDateIcon, roadsideAssistanceIcon, routeIcon, seatAirIcon, seatBrandIcon, seatIcon, serviceBellIcon, serviceIcon, sizeIcon, skodaBrandIcon, stockLocatorCommercialIcon, stockLocatorPrivateIcon, taskAndAppointmentIcon, taxiDealerIcon, textForwardIcon, topcardIcon, touaregServiceIcon, transmissionAutomaticIcon, transmissionManualIcon, usedCarCommercialIcon, usedCarPrivateIcon, vehicleConversionIcon, view360Icon, vinIcon, virtualRealityIcon, volkswagenIcon, vsfSearchIcon, vwBrandIcon, vwnBrandIcon, wcpIcon, wheelToWheelIcon, windscreenWashIcon, wrenchForwardIcon };
+export { ACShape, AcceptanceDateShape, AcceptedBrands, AccessoriesShape, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BIG_ENDIAN, BlocksGroupForwardShape, BrochureShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, BusinessPartnerWithCar, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CaliforniaSpecialistShape, CampaignOutdatedShape, CampaignShape, CarOffSite, CarOnSite, CarPickupServiceShape, CarWashShape, CertifiedRepairShape, CertifiedRetailerShape, ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter, ClrActionPanelModule, ClrActiveNotification, ClrAddonsIconShapes, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridStatePersistenceModule, ClrDateFilterComponent, ClrDateFilterModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDaterangeMaxValidator, ClrDaterangeMinValidator, ClrDaterangeOrderValidator, ClrDaterangeRequiredValidator, ClrDaterangepickerContainerComponent, ClrDaterangepickerDirective, ClrDaterangepickerModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrEnumFilterComponent, ClrEnumFilterModule, ClrFlowBar, ClrFlowBarModule, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrIfDaterangeErrorDirective, ClrIfWarning, ClrIfWarningModule, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, CompletedByDateShape, ConfiguratorCommercialShape, ConfiguratorPrivateShape, ConsumptionShape, ContactDealerShape, CupraBrandShape, CustomersCenterShape, DATE, DELIMITER_REGEX, DWABrandShape, DatagridFieldDirective, DayModel, DieselShape, DollarBillForwardShape, DollarBillPartialShape, DriversAssistanceShape, EfficiencyShape, ElectricCarsServiceShape, ElectricCarsShape, ElectricityShape, EmissionShape, EnergyShape, EngineShape, ExpressServiceShape, ExteriorShape, ExternalPartForwardShape, FindACarShape, FleetServiceCommercialShape, FleetServicePrivateShape, GasCarsServiceShape, GasShape, HISTORY_NOTIFICATION_URL_PROVIDER, HISTORY_PROVIDER, HistoryProvider, HybridShape, InternalPartForwardShape, InvoiceReadyShape, InvoiceShape, ItemsForwardShape, ItemsReceiveShape, LITTLE_ENDIAN, LITTLE_ENDIAN_REGEX, LoadingVolumeShape, LocateShape, LocationBarComponent, LocationBarContentProvider, LocationBarNode, MIDDLE_ENDIAN, MIDDLE_ENDIAN_REGEX, MONTH, NewCarCommercialShape, NewCarPrivateShape, NewCarUtilityVehicleShape, NightServiceShape, NodeId, OffersShape, OnCallDutyShape, OpenSatShape, PaintMaterialForwardShape, PaintMaterialShape, PaintShopShape, ParkingLocation, PartNonStockForwardShape, PartsForwardShape, PartsNonStockShape, PartsShape, PayloadShape, PerformanceShape, PetrolShape, PlusServiceShape, PopoverPositions, PorscheBrandShape, PowerShape, PowerTrainShape, PriceTypeSwitchShape, QualifiedWorkshopShape, RepeatRepairShape, ReturnDateShape, RoadsideAssistanceShape, RouteShape, SEPARATOR_TEXT_DEFAULT, SeatAirShape, SeatBrandShape, SeatShape, ServiceBellShape, ServiceShape, SizeShape, SkodaBrandShape, StatePersistenceKeyDirective, StockLocatorCommercialShape, StockLocatorPrivateShape, TRANSLATIONS, TaskAndAppointment, TaxiDealerShape, TextForward, TimeModel, TopcardShape, TouaregServiceShape, TransmissionAutomaticShape, TransmissionManualShape, TreetableCellRenderer, TreetableHeaderRenderer, TreetableMainRenderer, TreetableRowRenderer, USER_INPUT_REGEX, UsedCarCommercialShape, UsedCarPrivateShape, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, View360Shape, VinShape, VirtualRealityShape, VsfSearchShape, WCPShape, WheelToWheelShape, WindscreenWashShape, WrenchForward, YEAR, acceptanceDateIcon, accessoriesIcon, accessoryPartsIcon, airConditionerIcon, allIcons, audiBrandIcon, awardWinnerPremiumIcon, blocksGroupForwardIcon, brochureIcon, bundleForwardIcon, businessCustomersCommercialIcon, businessCustomersPrivateIcon, businessPartnerWithCarIcon, calculatorForwardIcon, californiaServiceIcon, californiaSpecialistIcon, campaignIcon, campaignOutdatedIcon, carOffSite, carOnSite, carPickupServiceIcon, carWashIcon, certifiedRepairIcon, certifiedRetailerIcon, clrIconSVG, completedByDateIcon, configuratorCommercialIcon, configuratorPrivateIcon, consumptionIcon, contactDealerIcon, cupraBrandIcon, customersCenterIcon, dieselIcon, dollarBillForwardIcon, dollarBillPartialIcon, driversAssistanceIcon, dwaBrandIcon, efficiencyIcon, electricCarsIcon, electricCarsServiceIcon, electricityIcon, emissionIcon, energyIcon, engineIcon, escapeHtml, escapeRegex, expressServiceIcon, exteriorIcon, externalPartForwardIcon, findACarIcon, fleetServiceCommercialIcon, fleetServicePrivateIcon, gasCarsServiceIcon, gasIcon, hybridIcon, internalPartForwardIcon, invoiceIcon, invoiceReadyIcon, itemsForwardIcon, itemsRecieveIcon, loadingVolumeIcon, locateIcon, newCarCommercialIcon, newCarPrivateIcon, newCarUtilityVehicleIcon, nightServiceIcon, offersIcon, onCallDutyIcon, openSatIcon, paintMaterialForwardIcon, paintMaterialIcon, paintShopIcon, parkingLocationIcon, partsForwardIcon, partsIcon, partsNonStockForwardIcon, partsNonStockIcon, payloadIcon, performanceIcon, petrolIcon, plusServiceIcon, porscheBrandIcon, powerIcon, powerTrainIcon, priceTypeSwitchIcon, qualifiedWorkshopIcon, repeatRepairIcon, returnDateIcon, roadsideAssistanceIcon, routeIcon, seatAirIcon, seatBrandIcon, seatIcon, serviceBellIcon, serviceIcon, sizeIcon, skodaBrandIcon, stockLocatorCommercialIcon, stockLocatorPrivateIcon, taskAndAppointmentIcon, taxiDealerIcon, textForwardIcon, topcardIcon, touaregServiceIcon, transmissionAutomaticIcon, transmissionManualIcon, usedCarCommercialIcon, usedCarPrivateIcon, vehicleConversionIcon, view360Icon, vinIcon, virtualRealityIcon, volkswagenIcon, vsfSearchIcon, vwBrandIcon, vwnBrandIcon, wcpIcon, wheelToWheelIcon, windscreenWashIcon, wrenchForwardIcon };
 //# sourceMappingURL=clr-addons.mjs.map