@porscheinformatik/clr-addons 18.1.3 → 18.1.5

package/fesm2022/clr-addons.mjs

@@ -4526,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-outline-primary\" clrDropdownTrigger>\n    <cds-icon shape=\"history\" size=\"16\"></cds-icon>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n    <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n      {{history.title}}\n    </button>\n    <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n      <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "component", type: i2.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i2.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i2.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i2.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }] }); }
+    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 history-button\" clrDropdownTrigger>\n    <cds-icon shape=\"history\" size=\"16\"></cds-icon>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{ dropdownHeader }}</label>\n    <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n      {{ history.title }}\n    </button>\n    <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      <span *ngIf=\"pinActive && !pinActivated\">{{ dropdownPin }}</span>\n      <span *ngIf=\"pinActive && pinActivated\">{{ dropdownUnpin }}</span>\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "component", type: i2.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i2.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i2.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i2.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight", "clrMarginBottom"] }] }); }
 }
 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-outline-primary\" clrDropdownTrigger>\n    <cds-icon shape=\"history\" size=\"16\"></cds-icon>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n    <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n      {{history.title}}\n    </button>\n    <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n      <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n" }]
+            args: [{ selector: 'clr-history', template: "<clr-dropdown>\n  <button type=\"button\" class=\"btn btn-icon btn-outline-primary history-button\" clrDropdownTrigger>\n    <cds-icon shape=\"history\" size=\"16\"></cds-icon>\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n  <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n    <label class=\"dropdown-header\" aria-hidden=\"true\">{{ dropdownHeader }}</label>\n    <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n      {{ history.title }}\n    </button>\n    <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n    <button clrDropdownItem (click)=\"togglePinHistory()\">\n      <span *ngIf=\"pinActive && !pinActivated\">{{ dropdownPin }}</span>\n      <span *ngIf=\"pinActive && pinActivated\">{{ dropdownUnpin }}</span>\n    </button>\n  </clr-dropdown-menu>\n</clr-dropdown>\n" }]
         }], ctorParameters: () => [{ type: ClrHistoryService }, { type: HistoryProvider, decorators: [{
                     type: Inject,
                     args: [HISTORY_PROVIDER]
@@ -6435,6 +6435,7 @@ class ClrDateFilterComponent {
         this.commonStrings = commonStrings;
         this.clrPopoverEventsService = clrPopoverEventsService;
         this.timeActive = false;
+        this.valError = false;
         this.filterValueChange = new EventEmitter();
         /**
          * Internal values and accessor
@@ -6461,14 +6462,14 @@ class ClrDateFilterComponent {
             if (values && (values[0] !== this._from || values[1] !== this._to)) {
                 if (typeof values[0] === 'object') {
                     this._from = values[0];
-                    this._fromTime = this._from?.toLocaleTimeString();
+                    this._fromTime = this._from?.toLocaleTimeString().substring(0, 5);
                 }
                 else {
                     this._from = null;
                 }
                 if (typeof values[1] === 'object') {
                     this._to = values[1];
-                    this._toTime = this._to?.toLocaleTimeString();
+                    this._toTime = this._to?.toLocaleTimeString().substring(0, 5);
                 }
                 else {
                     this._to = null;
@@ -6488,14 +6489,18 @@ class ClrDateFilterComponent {
     }
     set from(from) {
         if (typeof from === 'object' && from !== this._from) {
-            if (from && typeof from.setHours === 'function') {
+            if (!this.timeActive && from && typeof from.setHours === 'function') {
                 from.setHours(0, 0, 0, 0); // set from-date to start of day
             }
-            if (this.fromTime) {
+            if (!this.fromTime && from && from?.toLocaleTimeString() !== '00:00:00') {
+                this.fromTime = from?.toLocaleTimeString().substring(0, 5);
+            }
+            if (this.fromTime && from) {
                 const [hours, minutes, seconds] = this.fromTime.split(':').map(n => parseInt(n));
                 from.setHours(hours, minutes, seconds || 0, 0);
             }
             this._from = from;
+            this.validateDates();
             this._changes.next([this._from, this._to]);
             this.filterValueChange.emit([this._from, this._to]);
         }
@@ -6505,6 +6510,7 @@ class ClrDateFilterComponent {
         if (this._fromTime && this._from) {
             const [hours, minutes, seconds] = this._fromTime.split(':').map(n => parseInt(n));
             this._from.setHours(hours, minutes, seconds || 0, 0);
+            this.validateDates();
             this._changes.next([this._from, this._to]);
             this.filterValueChange.emit([this._from, this._to]);
         }
@@ -6514,14 +6520,18 @@ class ClrDateFilterComponent {
     }
     set to(to) {
         if (typeof to === 'object' && to !== this._to) {
-            if (to && typeof to.setHours === 'function') {
+            if (!this.timeActive && to && typeof to.setHours === 'function') {
                 to.setHours(23, 59, 59, 999); // set to-date to end of day
             }
+            if (!this.toTime && to?.toLocaleTimeString() !== '23:59:59' && to?.toLocaleTimeString() !== '00:00:00') {
+                this.toTime = to?.toLocaleTimeString().substring(0, 5);
+            }
             if (this.toTime) {
                 const [hours, minutes, seconds] = this.toTime.split(':').map(n => parseInt(n));
                 to.setHours(hours, minutes, seconds || 0, 0);
             }
             this._to = to;
+            this.validateDates();
             this._changes.next([this._from, this._to]);
             this.filterValueChange.emit([this._from, this._to]);
         }
@@ -6531,6 +6541,7 @@ class ClrDateFilterComponent {
         if (this._toTime && this._to) {
             const [hours, minutes, seconds] = this._toTime.split(':').map(n => parseInt(n));
             this._to.setHours(hours, minutes, seconds || 0, 0);
+            this.validateDates();
             this._changes.next([this._from, this._to]);
             this.filterValueChange.emit([this._from, this._to]);
         }
@@ -6579,14 +6590,21 @@ class ClrDateFilterComponent {
     equals(other) {
         return other === this;
     }
+    validateDates() {
+        if (this._from && this._to) {
+            this.valError = this._from > this._to;
+        }
+    }
     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: { timeActive: "timeActive", property: ["clrProperty", "property"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, ngImport: i0, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\">\n  <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<ng-container *ngIf=\"!timeActive\">\n  <clr-date-container>\n    <input\n      #input_from\n      type=\"date\"\n      name=\"from\"\n      class=\"datagrid-date-filter-input\"\n      [(clrDate)]=\"from\"\n      [placeholder]=\"minPlaceholderValue\"\n      [attr.aria-label]=\"minPlaceholderValue\"\n    />\n  </clr-date-container>\n  <clr-date-container>\n    <input\n      type=\"date\"\n      name=\"to\"\n      class=\"datagrid-date-filter-input\"\n      [(clrDate)]=\"to\"\n      [placeholder]=\"maxPlaceholderValue\"\n      [attr.aria-label]=\"maxPlaceholderValue\"\n    />\n  </clr-date-container>\n</ng-container>\n<ng-container *ngIf=\"timeActive\">\n  <clr-date-time-container>\n    <clr-date-container class=\"time-filter-active\">\n      <input\n        #input_from\n        type=\"date\"\n        name=\"from\"\n        class=\"datagrid-date-filter-input time-filter-active-input\"\n        [(clrDate)]=\"from\"\n        [placeholder]=\"minPlaceholderValue\"\n        [attr.aria-label]=\"minPlaceholderValue\"\n      />\n    </clr-date-container>\n    <input clrTime type=\"time\" class=\"time-filter-input\" [(ngModel)]=\"fromTime\" />\n  </clr-date-time-container>\n  <clr-date-time-container>\n    <clr-date-container class=\"time-filter-active\">\n      <input\n        type=\"date\"\n        name=\"to\"\n        class=\"datagrid-date-filter-input time-filter-active-input\"\n        [(clrDate)]=\"to\"\n        [placeholder]=\"maxPlaceholderValue\"\n        [attr.aria-label]=\"maxPlaceholderValue\"\n      />\n    </clr-date-container>\n    <input clrTime type=\"time\" class=\"time-filter-input\" [(ngModel)]=\"toTime\" />\n  </clr-date-time-container>\n</ng-container>\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem}.time-filter-active-input{width:5rem!important}.time-filter-input{width:4rem!important}\n"], dependencies: [{ kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i2.ClrDateContainer, selector: "clr-date-container", inputs: ["clrPosition"] }, { kind: "directive", type: i2.ClrDateInput, selector: "[clrDate]", inputs: ["placeholder", "clrDate", "min", "max", "disabled"], outputs: ["clrDateChange"] }, { kind: "directive", type: i2.ClrDateInputValidator, selector: "[clrDate]" }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDateTimeContainer, selector: "clr-date-time-container" }, { kind: "directive", type: ClrTimeInput, selector: "[clrTime]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ClrDateFilterComponent, selector: "clr-date-filter", inputs: { timeActive: "timeActive", dateValidationError: "dateValidationError", property: ["clrProperty", "property"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, ngImport: i0, template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\">\n  <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<ng-container *ngIf=\"!timeActive\">\n  <clr-date-container>\n    <input\n      #input_from\n      type=\"date\"\n      name=\"from\"\n      class=\"datagrid-date-filter-input\"\n      [(clrDate)]=\"from\"\n      [placeholder]=\"minPlaceholderValue\"\n      [attr.aria-label]=\"minPlaceholderValue\"\n    />\n  </clr-date-container>\n  <clr-date-container>\n    <input\n      type=\"date\"\n      name=\"to\"\n      class=\"datagrid-date-filter-input\"\n      [(clrDate)]=\"to\"\n      [placeholder]=\"maxPlaceholderValue\"\n      [attr.aria-label]=\"maxPlaceholderValue\"\n    />\n  </clr-date-container>\n</ng-container>\n<ng-container *ngIf=\"timeActive\">\n  <clr-date-time-container>\n    <clr-date-container class=\"time-filter-active\">\n      <input\n        #input_from\n        type=\"date\"\n        name=\"from\"\n        class=\"datagrid-date-filter-input time-filter-active-input\"\n        [(clrDate)]=\"from\"\n        [placeholder]=\"minPlaceholderValue\"\n        [attr.aria-label]=\"minPlaceholderValue\"\n      />\n    </clr-date-container>\n    <input clrTime type=\"time\" class=\"time-filter-input\" step=\"60\" [(ngModel)]=\"fromTime\" />\n  </clr-date-time-container>\n  <clr-date-time-container>\n    <clr-date-container class=\"time-filter-active\">\n      <input\n        type=\"date\"\n        name=\"to\"\n        class=\"datagrid-date-filter-input time-filter-active-input\"\n        [(clrDate)]=\"to\"\n        [placeholder]=\"maxPlaceholderValue\"\n        [attr.aria-label]=\"maxPlaceholderValue\"\n      />\n    </clr-date-container>\n    <input clrTime type=\"time\" class=\"time-filter-input\" step=\"60\" [(ngModel)]=\"toTime\" />\n  </clr-date-time-container>\n  <clr-control-error *ngIf=\"valError\"\n    >{{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }}\n  </clr-control-error>\n</ng-container>\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem}.time-filter-active-input,.time-filter-input{width:4.5rem!important}\n"], dependencies: [{ kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i2.ClrControlError, selector: "clr-control-error" }, { 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<ng-container *ngIf=\"!timeActive\">\n  <clr-date-container>\n    <input\n      #input_from\n      type=\"date\"\n      name=\"from\"\n      class=\"datagrid-date-filter-input\"\n      [(clrDate)]=\"from\"\n      [placeholder]=\"minPlaceholderValue\"\n      [attr.aria-label]=\"minPlaceholderValue\"\n    />\n  </clr-date-container>\n  <clr-date-container>\n    <input\n      type=\"date\"\n      name=\"to\"\n      class=\"datagrid-date-filter-input\"\n      [(clrDate)]=\"to\"\n      [placeholder]=\"maxPlaceholderValue\"\n      [attr.aria-label]=\"maxPlaceholderValue\"\n    />\n  </clr-date-container>\n</ng-container>\n<ng-container *ngIf=\"timeActive\">\n  <clr-date-time-container>\n    <clr-date-container class=\"time-filter-active\">\n      <input\n        #input_from\n        type=\"date\"\n        name=\"from\"\n        class=\"datagrid-date-filter-input time-filter-active-input\"\n        [(clrDate)]=\"from\"\n        [placeholder]=\"minPlaceholderValue\"\n        [attr.aria-label]=\"minPlaceholderValue\"\n      />\n    </clr-date-container>\n    <input clrTime type=\"time\" class=\"time-filter-input\" [(ngModel)]=\"fromTime\" />\n  </clr-date-time-container>\n  <clr-date-time-container>\n    <clr-date-container class=\"time-filter-active\">\n      <input\n        type=\"date\"\n        name=\"to\"\n        class=\"datagrid-date-filter-input time-filter-active-input\"\n        [(clrDate)]=\"to\"\n        [placeholder]=\"maxPlaceholderValue\"\n        [attr.aria-label]=\"maxPlaceholderValue\"\n      />\n    </clr-date-container>\n    <input clrTime type=\"time\" class=\"time-filter-input\" [(ngModel)]=\"toTime\" />\n  </clr-date-time-container>\n</ng-container>\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem}.time-filter-active-input{width:5rem!important}.time-filter-input{width:4rem!important}\n"] }]
+            args: [{ selector: 'clr-date-filter', template: "<button class=\"btn btn-sm btn-icon btn-link btn-trash\" (click)=\"clearFilter()\">\n  <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<ng-container *ngIf=\"!timeActive\">\n  <clr-date-container>\n    <input\n      #input_from\n      type=\"date\"\n      name=\"from\"\n      class=\"datagrid-date-filter-input\"\n      [(clrDate)]=\"from\"\n      [placeholder]=\"minPlaceholderValue\"\n      [attr.aria-label]=\"minPlaceholderValue\"\n    />\n  </clr-date-container>\n  <clr-date-container>\n    <input\n      type=\"date\"\n      name=\"to\"\n      class=\"datagrid-date-filter-input\"\n      [(clrDate)]=\"to\"\n      [placeholder]=\"maxPlaceholderValue\"\n      [attr.aria-label]=\"maxPlaceholderValue\"\n    />\n  </clr-date-container>\n</ng-container>\n<ng-container *ngIf=\"timeActive\">\n  <clr-date-time-container>\n    <clr-date-container class=\"time-filter-active\">\n      <input\n        #input_from\n        type=\"date\"\n        name=\"from\"\n        class=\"datagrid-date-filter-input time-filter-active-input\"\n        [(clrDate)]=\"from\"\n        [placeholder]=\"minPlaceholderValue\"\n        [attr.aria-label]=\"minPlaceholderValue\"\n      />\n    </clr-date-container>\n    <input clrTime type=\"time\" class=\"time-filter-input\" step=\"60\" [(ngModel)]=\"fromTime\" />\n  </clr-date-time-container>\n  <clr-date-time-container>\n    <clr-date-container class=\"time-filter-active\">\n      <input\n        type=\"date\"\n        name=\"to\"\n        class=\"datagrid-date-filter-input time-filter-active-input\"\n        [(clrDate)]=\"to\"\n        [placeholder]=\"maxPlaceholderValue\"\n        [attr.aria-label]=\"maxPlaceholderValue\"\n      />\n    </clr-date-container>\n    <input clrTime type=\"time\" class=\"time-filter-input\" step=\"60\" [(ngModel)]=\"toTime\" />\n  </clr-date-time-container>\n  <clr-control-error *ngIf=\"valError\"\n    >{{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }}\n  </clr-control-error>\n</ng-container>\n", styles: [".btn-trash{position:absolute;top:15px;right:40px;padding:0}.time-filter-active{width:12rem}.time-filter-active-input,.time-filter-input{width:4.5rem!important}\n"] }]
         }], ctorParameters: () => [{ type: i2.ClrCommonStringsService }, { type: i2.ClrPopoverEventsService }, { type: i2.ClrDatagridFilter }], propDecorators: { timeActive: [{
                 type: Input
+            }], dateValidationError: [{
+                type: Input
             }], property: [{
                 type: Input,
                 args: ['clrProperty']
@@ -7584,7 +7602,6 @@ class ClrDaterangepickerDirective {
         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);