@porscheinformatik/clr-addons 19.0.2 → 19.0.4

package/fesm2022/clr-addons.mjs

@@ -11534,7 +11534,7 @@ class ClrDateFilterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", 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: "19.1.3", type: ClrDateFilterComponent, isStandalone: false, 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]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ClrDateFilterComponent, isStandalone: false, 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: ["showActionButtons", "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: "19.1.3", ngImport: i0, type: ClrDateFilterComponent, decorators: [{
             type: Component,
@@ -11802,7 +11802,7 @@ class ClrDatepickerComponent {
         this.inputElm.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ClrDatepickerComponent, deps: [{ token: OpenedDatepickersTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ClrDatepickerComponent, isStandalone: false, 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: ["id", "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: "19.1.3", type: ClrDatepickerComponent, isStandalone: false, 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: ["id", "for"] }, { kind: "component", type: i2.ClrDateContainer, selector: "clr-date-container", inputs: ["showActionButtons", "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: "19.1.3", ngImport: i0, type: ClrDatepickerComponent, decorators: [{
             type: Component,
@@ -13794,7 +13794,6 @@ class ClrReadonlyDirective {
         this.elementRef = elementRef;
         this.renderer = renderer;
         this.injector = injector;
-        this.isMultiSelect = false;
         this.unitPosition = 'right';
         this.property = null;
         this.clrReadOnly = true;
@@ -13869,8 +13868,8 @@ class ClrReadonlyDirective {
         if (controlType === 'numeric') {
             return this.formatNumericValue(controlValue);
         }
-        else if (this.isMultiSelect) {
-            return this.formatMultiSelectValue(controlValue);
+        else if (this.property) {
+            return this.formatValueForObjectValue(controlValue);
         }
         else if (controlType === 'select') {
             return this.formatListValue(controlValue);
@@ -13881,8 +13880,13 @@ class ClrReadonlyDirective {
         const result = formatNumber(controlValue + '', true, this.decimalSeparator, this.groupingSeparator, this.decimalPlaces, this.autofillDecimals);
         return this.unitPosition === 'left' ? `${this.unit} ${result}` : `${result} ${this.unit}`;
     }
-    formatMultiSelectValue(controlValue) {
-        return controlValue.map((item) => item[this.property]).join(', ');
+    formatValueForObjectValue(controlValue) {
+        if (Array.isArray(controlValue)) {
+            return controlValue.map((item) => item[this.property]).join(', ');
+        }
+        else {
+            return controlValue[this.property];
+        }
     }
     formatListValue(controlValue) {
         const options = this.elementRef.nativeElement.querySelectorAll('option');
@@ -13895,7 +13899,7 @@ class ClrReadonlyDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ClrReadonlyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: ClrReadonlyDirective, isStandalone: false, selector: "[clrReadonly]", inputs: { isMultiSelect: ["clrMulti", "isMultiSelect"], unitPosition: ["clrUnitPosition", "unitPosition"], property: ["clrReadOnlyProperty", "property"], clrReadOnly: ["clrReadonly", "clrReadOnly"], unit: ["clrUnit", "unit"], decimalPlaces: ["clrDecimalPlaces", "decimalPlaces"], roundValue: ["clrRoundDisplayValue", "roundValue"], autofillDecimals: ["clrAutofillDecimals", "autofillDecimals"], decimalSeparator: ["clrDecimalSep", "decimalSeparator"], groupingSeparator: ["clrGroupingSep", "groupingSeparator"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: ClrReadonlyDirective, isStandalone: false, selector: "[clrReadonly]", inputs: { unitPosition: ["clrUnitPosition", "unitPosition"], property: ["clrReadOnlyProperty", "property"], clrReadOnly: ["clrReadonly", "clrReadOnly"], unit: ["clrUnit", "unit"], decimalPlaces: ["clrDecimalPlaces", "decimalPlaces"], roundValue: ["clrRoundDisplayValue", "roundValue"], autofillDecimals: ["clrAutofillDecimals", "autofillDecimals"], decimalSeparator: ["clrDecimalSep", "decimalSeparator"], groupingSeparator: ["clrGroupingSep", "groupingSeparator"] }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ClrReadonlyDirective, decorators: [{
             type: Directive,
@@ -13903,10 +13907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                     selector: '[clrReadonly]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }], propDecorators: { isMultiSelect: [{
-                type: Input,
-                args: ['clrMulti']
-            }], unitPosition: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }], propDecorators: { unitPosition: [{
                 type: Input,
                 args: ['clrUnitPosition']
             }], property: [{