@porscheinformatik/clr-addons 19.0.8 → 19.1.1

package/fesm2022/clr-addons.mjs

@@ -2450,6 +2450,9 @@ class ClrNumericField {
             this.handleInputChanged();
         }
     }
+    /**
+     * @deprecated Use {@link clrInputSuffix} or {@link clrInputPrefix} from Clarity instead.
+     */
     set unit(value) {
         if (value != this._unit) {
             this._unit = value;
@@ -2481,6 +2484,9 @@ class ClrNumericField {
         this.autofillDecimals = false;
         this.decimalSeparator = ',';
         this.groupingSeparator = '.';
+        /**
+         * @deprecated Use {@link clrInputSuffix} or {@link clrInputPrefix} from Clarity instead.
+         */
         this.unitPosition = 'right';
         this.numericValueChanged = new EventEmitter();
         this.displayValue = '';
@@ -11503,8 +11509,10 @@ class ClrDateFilterComponent {
             }
             this._from = from;
             this.validateDates();
-            this._changes.next([this._from, this._to]);
-            this.filterValueChange.emit([this._from, this._to]);
+            if (!this.valError) {
+                this._changes.next([this._from, this._to]);
+                this.filterValueChange.emit([this._from, this._to]);
+            }
         }
     }
     set fromTime(fromtime) {
@@ -11534,8 +11542,10 @@ class ClrDateFilterComponent {
             }
             this._to = to;
             this.validateDates();
-            this._changes.next([this._from, this._to]);
-            this.filterValueChange.emit([this._from, this._to]);
+            if (!this.valError) {
+                this._changes.next([this._from, this._to]);
+                this.filterValueChange.emit([this._from, this._to]);
+            }
         }
     }
     set toTime(totime) {
@@ -11598,11 +11608,11 @@ class ClrDateFilterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.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: "19.1.5", 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 class=\"filter-selection\">\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 class=\"filter-selection\">\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 class=\"filter-selection\">\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:10px;right:40px;padding:0}.time-filter-active{width:12rem;margin-top:.5rem}.time-filter-active-input,.time-filter-input{width:4.5rem!important}.filter-selection{margin-top:.5rem}\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, clr-date-range-container", inputs: ["showActionButtons", "clrPosition", "rangeOptions", "min", "max"] }, { kind: "directive", type: i2.ClrDateInput, selector: "[clrDate]", inputs: ["clrDate", "min", "max"], outputs: ["clrDateChange"] }, { kind: "directive", type: i2.ClrDateInputValidator, selector: "[clrDate], [clrStartDate], [clrEndDate]" }, { 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.5", 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 class=\"filter-selection\">\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 class=\"filter-selection\">\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  <clr-control-error *ngIf=\"valError\"\n    >{{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }}\n  </clr-control-error>\n</ng-container>\n<ng-container *ngIf=\"timeActive\">\n  <clr-date-time-container class=\"filter-selection\">\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:10px;right:40px;padding:0}.time-filter-active{width:12rem;margin-top:.5rem}.time-filter-active-input,.time-filter-input{width:4.5rem!important}.filter-selection{margin-top:.5rem}\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, clr-date-range-container", inputs: ["showActionButtons", "clrPosition", "rangeOptions", "min", "max"] }, { kind: "directive", type: i2.ClrDateInput, selector: "[clrDate]", inputs: ["clrDate", "min", "max"], outputs: ["clrDateChange"] }, { kind: "directive", type: i2.ClrDateInputValidator, selector: "[clrDate], [clrStartDate], [clrEndDate]" }, { 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.5", ngImport: i0, type: ClrDateFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-date-filter', standalone: false, 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 class=\"filter-selection\">\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 class=\"filter-selection\">\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 class=\"filter-selection\">\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:10px;right:40px;padding:0}.time-filter-active{width:12rem;margin-top:.5rem}.time-filter-active-input,.time-filter-input{width:4.5rem!important}.filter-selection{margin-top:.5rem}\n"] }]
+            args: [{ selector: 'clr-date-filter', standalone: false, 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 class=\"filter-selection\">\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 class=\"filter-selection\">\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  <clr-control-error *ngIf=\"valError\"\n    >{{ dateValidationError || 'Date \"from\" must be before date \"to\"!' }}\n  </clr-control-error>\n</ng-container>\n<ng-container *ngIf=\"timeActive\">\n  <clr-date-time-container class=\"filter-selection\">\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:10px;right:40px;padding:0}.time-filter-active{width:12rem;margin-top:.5rem}.time-filter-active-input,.time-filter-input{width:4.5rem!important}.filter-selection{margin-top:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i2.ClrCommonStringsService }, { type: i2.ClrPopoverEventsService }, { type: i2.ClrDatagridFilter }], propDecorators: { timeActive: [{
                 type: Input
             }], dateValidationError: [{
@@ -13867,9 +13877,15 @@ class ClrReadonlyDirective {
         this.elementRef = elementRef;
         this.renderer = renderer;
         this.injector = injector;
+        /**
+         * @deprecated Use {@link clrInputSuffix} or {@link clrInputPrefix} from Clarity instead.
+         */
         this.unitPosition = 'right';
         this.property = null;
         this.clrReadOnly = true;
+        /**
+         * @deprecated Use {@link clrInputSuffix} or {@link clrInputPrefix} from Clarity instead.
+         */
         this.unit = '';
         this.decimalPlaces = 2;
         this.roundValue = false;
@@ -13938,19 +13954,24 @@ class ClrReadonlyDirective {
         if (controlValue == null || controlValue === '') {
             return '';
         }
+        let formattedValue = controlValue ?? '';
         if (controlType === 'numeric') {
-            return this.formatNumericValue(controlValue);
+            formattedValue = this.formatNumericValue(controlValue);
         }
         else if (this.property) {
-            return this.formatValueForObjectValue(controlValue);
+            formattedValue = this.formatValueForObjectValue(controlValue);
         }
         else if (controlType === 'select') {
-            return this.formatListValue(controlValue);
+            formattedValue = this.formatListValue(controlValue);
         }
-        return controlValue ?? '';
+        formattedValue = this.addTextPrefixSuffixToValue(formattedValue);
+        return formattedValue;
     }
     formatNumericValue(controlValue) {
         const result = formatNumber(controlValue + '', true, this.decimalSeparator, this.groupingSeparator, this.decimalPlaces, this.autofillDecimals);
+        if (this.unit == null || this.unit === '') {
+            return result;
+        }
         return this.unitPosition === 'left' ? `${this.unit} ${result}` : `${result} ${this.unit}`;
     }
     formatValueForObjectValue(controlValue) {
@@ -13971,6 +13992,18 @@ class ClrReadonlyDirective {
             return '';
         }
     }
+    addTextPrefixSuffixToValue(formattedValue) {
+        const parentElement = this.elementRef.nativeElement.parentElement;
+        const prefixElement = parentElement.querySelector('[clrInputPrefix]');
+        const suffixElement = parentElement.querySelector('[clrInputSuffix]');
+        if (prefixElement?.textContent) {
+            formattedValue = `${prefixElement.textContent} ${formattedValue}`;
+        }
+        if (suffixElement?.textContent) {
+            formattedValue = `${formattedValue} ${suffixElement.textContent}`;
+        }
+        return formattedValue;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", 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.5", 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 }); }
 }