@db-ux/ngx-core-components 4.13.1-angular-signal-forms4-d3a9db2 → 4.13.1-angular-signal-forms5-fe63b55

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

@@ -1425,7 +1425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$B = {};
 class DBCheckbox {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
         // Signal Forms validation bridge: errors InputSignal has priority
@@ -1441,8 +1441,8 @@ class DBCheckbox {
             }
             return; // Signal Forms errors take priority
         }
-        else if (this.errors() !== undefined) {
-            // Signal Forms provided errors=[] (valid state)
+        else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
+            // Signal Forms provided errors=[] after previous invalid state → now valid
             this._valid.set('valid');
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
@@ -1754,8 +1754,8 @@ class DBCheckbox {
     <label [attr.for]="_id()"
       ><input
         type="checkbox"
-        [attr.aria-invalid]="validation() === 'invalid'"
-        [attr.data-custom-validity]="validation()"
+        [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+        [attr.data-custom-validity]="_valid() ?? validation()"
         #_ref
         [attr.id]="_id()"
         [attr.name]="name()"
@@ -1812,8 +1812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     <label [attr.for]="_id()"
       ><input
         type="checkbox"
-        [attr.aria-invalid]="validation() === 'invalid'"
-        [attr.data-custom-validity]="validation()"
+        [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+        [attr.data-custom-validity]="_valid() ?? validation()"
         #_ref
         [attr.id]="_id()"
         [attr.name]="name()"
@@ -2901,7 +2901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$w = {};
 class DBInput {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     getPatternAttr() {
         const p = this.pattern();
@@ -2925,8 +2925,8 @@ class DBInput {
             }
             return; // Signal Forms errors take priority
         }
-        else if (this.errors() !== undefined) {
-            // Signal Forms provided errors=[] (valid state)
+        else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
+            // Signal Forms provided errors=[] after previous invalid state → now valid
             this._valid.set('valid');
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
@@ -3285,8 +3285,8 @@ class DBInput {
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <input
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
+      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="_valid() ?? validation()"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -3374,8 +3374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <input
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
+      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="_valid() ?? validation()"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -3953,7 +3953,7 @@ class DBCustomSelect {
         }
     }
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
         // Signal Forms validation bridge: errors InputSignal has priority
@@ -3967,11 +3967,13 @@ class DBCustomSelect {
                 this._voiceOverFallback.set(this._invalidMessage());
                 void delay(() => this._voiceOverFallback.set(""), 1000);
             }
+            this._validity.set('invalid');
             return; // Signal Forms errors take priority
         }
-        else if (this.errors() !== undefined) {
-            // Signal Forms provided errors=[] (valid state)
+        else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
+            // Signal Forms provided errors=[] after previous invalid state → now valid
             this._valid.set('valid');
+            this._validity.set('valid');
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
         }
@@ -4536,20 +4538,28 @@ class DBCustomSelect {
         this._valid = signal(undefined, ...(ngDevMode ? [{ debugName: "_valid" }] : /* istanbul ignore next */ []));
         /** Signal Forms alias — maps to 'values' for FormValueControl duck-typing */
         this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        /** @internal Flag to prevent circular sync between value↔values */
+        this._syncing = false;
         /** @internal Sync value → values (Signal Forms writes to value) */
         this._syncValueToValues = effect(() => {
             const v = this.value();
+            if (this._syncing)
+                return;
+            this._syncing = true;
             if (v !== undefined) {
                 this.values.set(Array.isArray(v) ? v : v ? [v] : []);
             }
+            this._syncing = false;
         }, ...(ngDevMode ? [{ debugName: "_syncValueToValues" }] : /* istanbul ignore next */ []));
         /** @internal Sync values → value (CVA/user interaction writes to values) */
         this._syncValuesToValue = effect(() => {
             const vals = this.values();
-            const current = vals && vals.length > 0 ? vals[0] : undefined;
-            if (current !== this.value()) {
-                this.value.set(current);
-            }
+            if (this._syncing)
+                return;
+            this._syncing = true;
+            const current = vals && vals.length > 0 ? vals : undefined;
+            this.value.set(current);
+            this._syncing = false;
         }, ...(ngDevMode ? [{ debugName: "_syncValuesToValue" }] : /* istanbul ignore next */ []));
         if (typeof window !== "undefined") {
             effect(() => {
@@ -7943,7 +7953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$f = {};
 class DBSelect {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
         // Signal Forms validation bridge: errors InputSignal has priority
@@ -7959,8 +7969,8 @@ class DBSelect {
             }
             return; // Signal Forms errors take priority
         }
-        else if (this.errors() !== undefined) {
-            // Signal Forms provided errors=[] (valid state)
+        else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
+            // Signal Forms provided errors=[] after previous invalid state → now valid
             this._valid.set('valid');
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
@@ -8313,8 +8323,8 @@ class DBSelect {
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <select
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
+      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="_valid() ?? validation()"
       #_ref
       [required]="getBoolean(required(), 'required')"
       [disabled]="getBoolean(disabled(), 'disabled')"
@@ -8417,8 +8427,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <select
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
+      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="_valid() ?? validation()"
       #_ref
       [required]="getBoolean(required(), 'required')"
       [disabled]="getBoolean(disabled(), 'disabled')"
@@ -8636,7 +8646,7 @@ const StackJustifyContentList = ['space-between', 'start', 'end', 'center'];
 const defaultProps$d = {};
 class DBSwitch {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
         // Signal Forms validation bridge: errors InputSignal has priority
@@ -8652,8 +8662,8 @@ class DBSwitch {
             }
             return; // Signal Forms errors take priority
         }
-        else if (this.errors() !== undefined) {
-            // Signal Forms provided errors=[] (valid state)
+        else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
+            // Signal Forms provided errors=[] after previous invalid state → now valid
             this._valid.set('valid');
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
@@ -8944,7 +8954,7 @@ class DBSwitch {
     [attr.data-hide-label]="getHideProp(showLabel())"
     [attr.data-variant]="variant()"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
-    [attr.data-custom-validity]="validation()"
+    [attr.data-custom-validity]="_valid() ?? validation()"
     [class]="cls('db-switch', className())"
   >
     <label [attr.for]="_id()"
@@ -9009,7 +9019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     [attr.data-hide-label]="getHideProp(showLabel())"
     [attr.data-variant]="variant()"
     [attr.data-hide-asterisk]="getHideProp(showRequiredAsterisk())"
-    [attr.data-custom-validity]="validation()"
+    [attr.data-custom-validity]="_valid() ?? validation()"
     [class]="cls('db-switch', className())"
   >
     <label [attr.for]="_id()"
@@ -11002,7 +11012,7 @@ const TagBehaviorList = ['static', 'removable'];
 const defaultProps = {};
 class DBTextarea {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
         // Signal Forms validation bridge: errors InputSignal has priority
@@ -11018,8 +11028,8 @@ class DBTextarea {
             }
             return; // Signal Forms errors take priority
         }
-        else if (this.errors() !== undefined) {
-            // Signal Forms provided errors=[] (valid state)
+        else if (Array.isArray(signalFormErrors) && signalFormErrors.length === 0 && this._valid() === 'invalid') {
+            // Signal Forms provided errors=[] after previous invalid state → now valid
             this._valid.set('valid');
             this._validMessage.set(DEFAULT_VALID_MESSAGE);
             this._invalidMessage.set('');
@@ -11337,8 +11347,8 @@ class DBTextarea {
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <textarea
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
+      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="_valid() ?? validation()"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -11406,8 +11416,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <textarea
-      [attr.aria-invalid]="validation() === 'invalid'"
-      [attr.data-custom-validity]="validation()"
+      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="_valid() ?? validation()"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"