@porscheinformatik/clr-addons 10.4.1 → 10.4.2

package/bundles/clr-addons.umd.js

@@ -2250,11 +2250,11 @@
             this.autofillDecimals = false;
             this.decimalSeparator = ',';
             this.groupingSeparator = '.';
-            this.unit = null;
             this.unitPosition = 'right';
             this.numericValueChanged = new i0.EventEmitter();
             this.displayValue = '';
             this.originalValue = NaN;
+            this._unit = null;
             this.allowedKeys = new Set(NUMBERS);
             /* Control Values Accessor Stuff below */
             // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -2273,6 +2273,20 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(ClrNumericField.prototype, "unit", {
+            set: function (value) {
+                if (value != this._unit) {
+                    this._unit = value;
+                    if (this.unitSpan != null) {
+                        this.unitSpan.innerHTML = '';
+                        var newUnitText = this.renderer.createText(value);
+                        this.renderer.appendChild(this.unitSpan, newUnitText);
+                    }
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         ClrNumericField.prototype.registerOnChange = function (fn) {
             this.onChange = fn;
         };
@@ -2504,7 +2518,7 @@
         ClrNumericField.prototype.injectUnitSymbol = function () {
             // Need to inject the unit symbol when the input element width is set to its actual value,
             // otherwise the icon wont show in the correct position
-            if (!!this.unit && !this.unitSpan && this.inputEl.nativeElement.offsetWidth !== 0) {
+            if (!!this._unit && !this.unitSpan && this.inputEl.nativeElement.offsetWidth !== 0) {
                 // Get the input wrapper and apply necessary styles
                 var inputWrapper = this.inputEl.nativeElement.parentNode;
                 this.renderer.addClass(inputWrapper, 'numeric-input-wrapper');
@@ -2512,7 +2526,7 @@
                 if (!this.unitSpan) {
                     this.unitSpan = this.renderer.createElement('span');
                     this.renderer.addClass(this.unitSpan, 'unit');
-                    var unitSymbol = this.renderer.createText(this.unit);
+                    var unitSymbol = this.renderer.createText(this._unit);
                     this.renderer.appendChild(this.unitSpan, unitSymbol);
                     this.renderer.appendChild(inputWrapper, this.unitSpan);
                 }
@@ -2577,10 +2591,10 @@
         autofillDecimals: [{ type: i0.Input, args: ['clrAutofillDecimals',] }],
         decimalSeparator: [{ type: i0.Input, args: ['clrDecimalSep',] }],
         groupingSeparator: [{ type: i0.Input, args: ['clrGroupingSep',] }],
-        unit: [{ type: i0.Input, args: ['clrUnit',] }],
         unitPosition: [{ type: i0.Input, args: ['clrUnitPosition',] }],
         numericValueChanged: [{ type: i0.Output, args: ['clrNumericValueChange',] }],
-        numericValue: [{ type: i0.Input, args: ['clrNumericValue',] }]
+        numericValue: [{ type: i0.Input, args: ['clrNumericValue',] }],
+        unit: [{ type: i0.Input, args: ['clrUnit',] }]
     };
 
     /*