@db-ux/ngx-core-components 4.3.0 → 4.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @db-ux/ngx-core-components
 
+## 4.3.1
+
+### Patch Changes
+
+- fix(angular): issue with form-components not applying value changes because of [attr.value] instead of native [value] binding - [see commit 61ab4a3](https://github.com/db-ux-design-system/core-web/commit/61ab4a3e9a781459b829c74cf23624a23edd9e3f)
+
 ## 4.3.0
 
 ### Minor Changes

package/fesm2022/db-ux-ngx-core-components.mjs

@@ -1393,7 +1393,7 @@ class DBCheckbox {
         [attr.name]="name()"
         [checked]="getBoolean(checked(), 'checked')"
         [disabled]="getBoolean(disabled(), 'disabled')"
-        [attr.value]="value()"
+        [value]="value()"
         [required]="getBoolean(required(), 'required')"
         (change)="handleChange($event)"
         (blur)="handleBlur($event)"
@@ -1454,7 +1454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [attr.name]="name()"
         [checked]="getBoolean(checked(), 'checked')"
         [disabled]="getBoolean(disabled(), 'disabled')"
-        [attr.value]="value()"
+        [value]="value()"
         [required]="getBoolean(required(), 'required')"
         (change)="handleChange($event)"
         (blur)="handleBlur($event)"
@@ -2350,7 +2350,7 @@ class DBInput {
         this._invalidMessage = signal(undefined, ...(ngDevMode ? [{ debugName: "_invalidMessage" }] : []));
         this._dataListId = signal(undefined, ...(ngDevMode ? [{ debugName: "_dataListId" }] : []));
         this._descByIds = signal(undefined, ...(ngDevMode ? [{ debugName: "_descByIds" }] : []));
-        this._value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+        this._value = signal("", ...(ngDevMode ? [{ debugName: "_value" }] : []));
         this._voiceOverFallback = signal("", ...(ngDevMode ? [{ debugName: "_voiceOverFallback" }] : []));
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : []));
         if (typeof window !== "undefined") {
@@ -2387,7 +2387,9 @@ class DBInput {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.value();
                 // ---
-                this._value.set(this.value());
+                if (this.value() !== undefined) {
+                    this._value.set(this.value());
+                }
             }, {
             // Enable writing to signals inside effects
             });
@@ -2395,7 +2397,10 @@ class DBInput {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
                 // ---
-                if (this._ref()?.nativeElement) {
+                // If angular uses ngModel value and _value are null
+                // then the value will be set afterward and the _ref will be refreshed
+                const addResetListener = !(this.value() === null && this._value() === null);
+                if (this._ref()?.nativeElement && addResetListener) {
                     const defaultValue = undefined;
                     let controller = this.abortController();
                     if (!controller) {
@@ -2513,7 +2518,7 @@ class DBInput {
       [disabled]="getBoolean(disabled(), 'disabled')"
       [required]="getBoolean(required(), 'required')"
       [attr.step]="getStep(step())"
-      [attr.value]="value() ?? _value()"
+      [value]="value() ?? _value()"
       [attr.maxLength]="getNumber(maxLength(), maxlength())"
       [attr.minLength]="getNumber(minLength(), minlength())"
       [attr.max]="getInputValue(max(), type())"
@@ -2538,7 +2543,7 @@ class DBInput {
     <datalist [attr.id]="_dataListId()">
       @for (option of getDataList();track trackByOption0(i, option);let i =
       $index) {
-      <option [attr.value]="option.value">{{option.label}}</option>
+      <option [value]="option.value">{{option.label}}</option>
       }
     </datalist>
     }
@@ -2601,7 +2606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       [disabled]="getBoolean(disabled(), 'disabled')"
       [required]="getBoolean(required(), 'required')"
       [attr.step]="getStep(step())"
-      [attr.value]="value() ?? _value()"
+      [value]="value() ?? _value()"
       [attr.maxLength]="getNumber(maxLength(), maxlength())"
       [attr.minLength]="getNumber(minLength(), minlength())"
       [attr.max]="getInputValue(max(), type())"
@@ -2626,7 +2631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <datalist [attr.id]="_dataListId()">
       @for (option of getDataList();track trackByOption0(i, option);let i =
       $index) {
-      <option [attr.value]="option.value">{{option.label}}</option>
+      <option [value]="option.value">{{option.label}}</option>
       }
     </datalist>
     }
@@ -6236,7 +6241,7 @@ class DBRadio {
       [attr.name]="name()"
       [checked]="getBoolean(checked(), 'checked')"
       [disabled]="getBoolean(disabled(), 'disabled')"
-      [attr.value]="value()"
+      [value]="value()"
       [required]="getBoolean(required(), 'required')"
       (input)="handleInput($event)"
       (change)="handleChange($event)"
@@ -6269,7 +6274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       [attr.name]="name()"
       [checked]="getBoolean(checked(), 'checked')"
       [disabled]="getBoolean(disabled(), 'disabled')"
-      [attr.value]="value()"
+      [value]="value()"
       [required]="getBoolean(required(), 'required')"
       (input)="handleInput($event)"
       (change)="handleChange($event)"
@@ -6533,7 +6538,10 @@ class DBSelect {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
                 // ---
-                if (this._ref()?.nativeElement) {
+                // If angular uses ngModel value and _value are null
+                // then the value will be set afterward and the _ref will be refreshed
+                const addResetListener = !(this.value() === null && this._value() === null);
+                if (this._ref()?.nativeElement && addResetListener) {
                     const defaultValue = undefined;
                     let controller = this.abortController();
                     if (!controller) {
@@ -7140,7 +7148,7 @@ class DBSwitch {
         [attr.id]="_id()"
         #_ref
         [checked]="getBoolean(checked(), 'checked')"
-        [attr.value]="value()"
+        [value]="value()"
         [disabled]="getBoolean(disabled(), 'disabled')"
         [attr.aria-invalid]="validation() === 'invalid' ? 'true' : undefined"
         [attr.aria-describedby]="_descByIds()"
@@ -7209,7 +7217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [attr.id]="_id()"
         #_ref
         [checked]="getBoolean(checked(), 'checked')"
-        [attr.value]="value()"
+        [value]="value()"
         [disabled]="getBoolean(disabled(), 'disabled')"
         [attr.aria-invalid]="validation() === 'invalid' ? 'true' : undefined"
         [attr.aria-describedby]="_descByIds()"
@@ -8103,7 +8111,9 @@ class DBTextarea {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.value();
                 // ---
-                this._value.set(this.value());
+                if (this.value() !== undefined) {
+                    this._value.set(this.value());
+                }
             }, {
             // Enable writing to signals inside effects
             });
@@ -8111,7 +8121,10 @@ class DBTextarea {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this._ref();
                 // ---
-                if (this._ref()?.nativeElement) {
+                // If angular uses ngModel value and _value are null
+                // then the value will be set afterward and the _ref will be refreshed
+                const addResetListener = !(this.value() === null && this._value() === null);
+                if (this._ref()?.nativeElement && addResetListener) {
                     const defaultValue = undefined;
                     let controller = this.abortController();
                     if (!controller) {
@@ -8227,7 +8240,7 @@ class DBTextarea {
       (change)="handleChange($event)"
       (blur)="handleBlur($event)"
       (focus)="handleFocus($event)"
-      [attr.value]="value() ?? _value()"
+      [value]="value() ?? _value()"
       [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
       [attr.placeholder]="placeholder() ?? DEFAULT_PLACEHOLDER"
       [attr.rows]="getNumber(rows(), DEFAULT_ROWS)"
@@ -8296,7 +8309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       (change)="handleChange($event)"
       (blur)="handleBlur($event)"
       (focus)="handleFocus($event)"
-      [attr.value]="value() ?? _value()"
+      [value]="value() ?? _value()"
       [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
       [attr.placeholder]="placeholder() ?? DEFAULT_PLACEHOLDER"
       [attr.rows]="getNumber(rows(), DEFAULT_ROWS)"