@db-ux/ngx-core-components 4.3.0 → 4.3.2-consolidation-7549d9f

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>
     }
@@ -3221,6 +3226,14 @@ class DBCustomSelect {
                     activeElement.click();
                     event.preventDefault();
                 }
+                else if (activeElement.getAttribute("type") === "search") {
+                    // When Enter is pressed in search field, select the first available option
+                    const firstOption = this._options()?.find((opt) => !opt.isGroupTitle && !opt.disabled);
+                    if (firstOption?.value) {
+                        this.handleSelect(firstOption.value);
+                        event.preventDefault();
+                    }
+                }
             }
         }
         else if (event.key === "ArrowDown" ||
@@ -4464,7 +4477,7 @@ class DBDrawer {
             const open = Boolean(this.open());
             if (open && !this._ref()?.nativeElement.open) {
                 if (this.dialogContainerRef()?.nativeElement) {
-                    this.dialogContainerRef().nativeElement.hidden = false;
+                    (this.dialogContainerRef()?.nativeElement).removeAttribute("data-transition");
                 }
                 if (this.position() === "absolute" ||
                     this.backdrop() === "none" ||
@@ -4474,15 +4487,17 @@ class DBDrawer {
                 else {
                     this._ref()?.nativeElement.showModal();
                 }
+                void delay(() => {
+                    if (this.dialogContainerRef()?.nativeElement) {
+                        (this.dialogContainerRef()?.nativeElement).dataset["transition"] = "open";
+                    }
+                }, 1);
             }
             if (!open && this._ref()?.nativeElement.open) {
                 if (this.dialogContainerRef()?.nativeElement) {
-                    this.dialogContainerRef().nativeElement.hidden = true;
+                    (this.dialogContainerRef()?.nativeElement).dataset["transition"] = "close";
                 }
-                delay(() => {
-                    if (this.dialogContainerRef()?.nativeElement) {
-                        this.dialogContainerRef().nativeElement.hidden = false;
-                    }
+                void delay(() => {
                     this._ref()?.nativeElement?.close();
                 }, 401);
             }
@@ -6236,7 +6251,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 +6284,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 +6548,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 +7158,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 +7227,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 +8121,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 +8131,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 +8250,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 +8319,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)"