@porscheinformatik/clr-addons 19.0.8 → 19.1.0

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 = '';
@@ -13867,9 +13873,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 +13950,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 +13988,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 }); }
 }