@db-ux/ngx-core-components 4.13.1-angular-signal-forms4-d3a9db2 → 4.13.1-angular-signal-forms6-a1510bb

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

@@ -1425,9 +1425,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$B = {};
 class DBCheckbox {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        if (this.validation() === 'no-validation')
+            return false;
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
+        // validation="no-validation" suppresses ALL validation UI (Signal Forms + native)
+        if (this.validation() === 'no-validation') {
+            this._valid.set(undefined);
+            this._invalidMessage.set('');
+            this._validMessage.set('');
+            this._descByIds.set(undefined);
+            return;
+        }
         // Signal Forms validation bridge: errors InputSignal has priority
         const signalFormErrors = this.errors();
         if (Array.isArray(signalFormErrors) && signalFormErrors.length > 0) {
@@ -1441,12 +1451,18 @@ 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('');
         }
+        // If Signal Forms says "valid" but native validation disagrees, reset _valid
+        // so native validation can take over via CSS :user-invalid selectors
+        if (this._valid() === 'valid' && this._ref()?.nativeElement && !this._ref()?.nativeElement?.validity?.valid) {
+            this._valid.set(undefined);
+            this._validMessage.set('');
+        }
         /* For a11y reasons we need to map the correct message with the checkbox */
         if (!this._ref()?.nativeElement?.validity.valid ||
             this.validation() === "invalid") {
@@ -1754,8 +1770,8 @@ class DBCheckbox {
     <label [attr.for]="_id()"
       ><input
         type="checkbox"
-        [attr.aria-invalid]="validation() === 'invalid'"
-        [attr.data-custom-validity]="validation()"
+        [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+        [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
         #_ref
         [attr.id]="_id()"
         [attr.name]="name()"
@@ -1812,8 +1828,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]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+        [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
         #_ref
         [attr.id]="_id()"
         [attr.name]="name()"
@@ -2901,7 +2917,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$w = {};
 class DBInput {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        if (this.validation() === 'no-validation')
+            return false;
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     getPatternAttr() {
         const p = this.pattern();
@@ -2912,6 +2930,14 @@ class DBInput {
         return undefined;
     }
     handleValidation() {
+        // validation="no-validation" suppresses ALL validation UI (Signal Forms + native)
+        if (this.validation() === 'no-validation') {
+            this._valid.set(undefined);
+            this._invalidMessage.set('');
+            this._validMessage.set('');
+            this._descByIds.set(undefined);
+            return;
+        }
         // Signal Forms validation bridge: errors InputSignal has priority
         const signalFormErrors = this.errors();
         if (Array.isArray(signalFormErrors) && signalFormErrors.length > 0) {
@@ -2925,12 +2951,18 @@ 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('');
         }
+        // If Signal Forms says "valid" but native validation disagrees, reset _valid
+        // so native validation can take over via CSS :user-invalid selectors
+        if (this._valid() === 'valid' && this._ref()?.nativeElement && !this._ref()?.nativeElement?.validity?.valid) {
+            this._valid.set(undefined);
+            this._validMessage.set('');
+        }
         /* For a11y reasons we need to map the correct message with the input */
         if (!this._ref()?.nativeElement?.validity.valid ||
             this.validation() === "invalid") {
@@ -3285,8 +3317,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]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -3374,8 +3406,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]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -3953,9 +3985,20 @@ class DBCustomSelect {
         }
     }
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        if (this.validation() === 'no-validation')
+            return false;
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
+        // validation="no-validation" suppresses ALL validation UI (Signal Forms + native)
+        if (this.validation() === 'no-validation') {
+            this._valid.set(undefined);
+            this._validity.set(undefined);
+            this._invalidMessage.set('');
+            this._validMessage.set('');
+            this._descByIds.set(undefined);
+            return;
+        }
         // Signal Forms validation bridge: errors InputSignal has priority
         const signalFormErrors = this.errors();
         if (Array.isArray(signalFormErrors) && signalFormErrors.length > 0) {
@@ -3967,14 +4010,23 @@ 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('');
         }
+        // If Signal Forms says "valid" but native validation disagrees, reset _valid
+        // so native validation can take over via CSS :user-invalid selectors
+        if (this._valid() === 'valid' && this._ref()?.nativeElement && !this._ref()?.nativeElement?.validity?.valid) {
+            this._valid.set(undefined);
+            this._validity.set(undefined);
+            this._validMessage.set('');
+        }
         if (this.selectRef()?.nativeElement) {
             this.selectRef().nativeElement.value = this.getNativeSelectValue();
         }
@@ -4536,20 +4588,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,9 +8003,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$f = {};
 class DBSelect {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        if (this.validation() === 'no-validation')
+            return false;
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
+        // validation="no-validation" suppresses ALL validation UI (Signal Forms + native)
+        if (this.validation() === 'no-validation') {
+            this._valid.set(undefined);
+            this._invalidMessage.set('');
+            this._validMessage.set('');
+            this._descByIds.set(undefined);
+            return;
+        }
         // Signal Forms validation bridge: errors InputSignal has priority
         const signalFormErrors = this.errors();
         if (Array.isArray(signalFormErrors) && signalFormErrors.length > 0) {
@@ -7959,12 +8029,18 @@ 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('');
         }
+        // If Signal Forms says "valid" but native validation disagrees, reset _valid
+        // so native validation can take over via CSS :user-invalid selectors
+        if (this._valid() === 'valid' && this._ref()?.nativeElement && !this._ref()?.nativeElement?.validity?.valid) {
+            this._valid.set(undefined);
+            this._validMessage.set('');
+        }
         /* For a11y reasons we need to map the correct message with the select */
         if (!this._ref()?.nativeElement?.validity.valid ||
             this.validation() === "invalid") {
@@ -8313,8 +8389,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]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
       #_ref
       [required]="getBoolean(required(), 'required')"
       [disabled]="getBoolean(disabled(), 'disabled')"
@@ -8417,8 +8493,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]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
       #_ref
       [required]="getBoolean(required(), 'required')"
       [disabled]="getBoolean(disabled(), 'disabled')"
@@ -8636,9 +8712,19 @@ const StackJustifyContentList = ['space-between', 'start', 'end', 'center'];
 const defaultProps$d = {};
 class DBSwitch {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        if (this.validation() === 'no-validation')
+            return false;
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
+        // validation="no-validation" suppresses ALL validation UI (Signal Forms + native)
+        if (this.validation() === 'no-validation') {
+            this._valid.set(undefined);
+            this._invalidMessage.set('');
+            this._validMessage.set('');
+            this._descByIds.set(undefined);
+            return;
+        }
         // Signal Forms validation bridge: errors InputSignal has priority
         const signalFormErrors = this.errors();
         if (Array.isArray(signalFormErrors) && signalFormErrors.length > 0) {
@@ -8652,12 +8738,18 @@ 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('');
         }
+        // If Signal Forms says "valid" but native validation disagrees, reset _valid
+        // so native validation can take over via CSS :user-invalid selectors
+        if (this._valid() === 'valid' && this._ref()?.nativeElement && !this._ref()?.nativeElement?.validity?.valid) {
+            this._valid.set(undefined);
+            this._validMessage.set('');
+        }
         if (!this._ref()?.nativeElement?.validity?.valid ||
             this.validation() === "invalid") {
             this._descByIds.set(this._invalidMessageId());
@@ -8944,7 +9036,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]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
     [class]="cls('db-switch', className())"
   >
     <label [attr.for]="_id()"
@@ -8956,7 +9048,7 @@ class DBSwitch {
         [checked]="getBoolean(checked(), 'checked')"
         [value]="value()"
         [disabled]="getBoolean(disabled(), 'disabled')"
-        [attr.aria-invalid]="validation() === 'invalid' ? 'true' : undefined"
+        [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid' ? 'true' : undefined"
         [attr.aria-describedby]="_descByIds()"
         [attr.name]="name()"
         [required]="getBoolean(required(), 'required')"
@@ -9009,7 +9101,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]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
     [class]="cls('db-switch', className())"
   >
     <label [attr.for]="_id()"
@@ -9021,7 +9113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         [checked]="getBoolean(checked(), 'checked')"
         [value]="value()"
         [disabled]="getBoolean(disabled(), 'disabled')"
-        [attr.aria-invalid]="validation() === 'invalid' ? 'true' : undefined"
+        [attr.aria-invalid]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid' ? 'true' : undefined"
         [attr.aria-describedby]="_descByIds()"
         [attr.name]="name()"
         [required]="getBoolean(required(), 'required')"
@@ -11002,9 +11094,19 @@ const TagBehaviorList = ['static', 'removable'];
 const defaultProps = {};
 class DBTextarea {
     hasValidState() {
-        return !!(this.validMessage() ?? this.validation() === "valid");
+        if (this.validation() === 'no-validation')
+            return false;
+        return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     handleValidation() {
+        // validation="no-validation" suppresses ALL validation UI (Signal Forms + native)
+        if (this.validation() === 'no-validation') {
+            this._valid.set(undefined);
+            this._invalidMessage.set('');
+            this._validMessage.set('');
+            this._descByIds.set(undefined);
+            return;
+        }
         // Signal Forms validation bridge: errors InputSignal has priority
         const signalFormErrors = this.errors();
         if (Array.isArray(signalFormErrors) && signalFormErrors.length > 0) {
@@ -11018,12 +11120,18 @@ 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('');
         }
+        // If Signal Forms says "valid" but native validation disagrees, reset _valid
+        // so native validation can take over via CSS :user-invalid selectors
+        if (this._valid() === 'valid' && this._ref()?.nativeElement && !this._ref()?.nativeElement?.validity?.valid) {
+            this._valid.set(undefined);
+            this._validMessage.set('');
+        }
         /* For a11y reasons we need to map the correct message with the textarea */
         if (!this._ref()?.nativeElement?.validity.valid ||
             this.validation() === "invalid") {
@@ -11337,8 +11445,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]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"
@@ -11406,8 +11514,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]="validation() !== 'no-validation' && (_valid() ?? validation()) === 'invalid'"
+      [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
       [attr.data-field-sizing]="fieldSizing()"
       #_ref
       [attr.id]="_id()"