@db-ux/ngx-core-components 4.13.1-angular-signal-forms5-fe63b55 → 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() {
+        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) {
@@ -1447,6 +1457,12 @@ class DBCheckbox {
             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]="(_valid() ?? validation()) === 'invalid'"
-        [attr.data-custom-validity]="_valid() ?? 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]="(_valid() ?? validation()) === 'invalid'"
-        [attr.data-custom-validity]="_valid() ?? 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,6 +2917,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$w = {};
 class DBInput {
     hasValidState() {
+        if (this.validation() === 'no-validation')
+            return false;
         return !!(this.validMessage() || this._valid() === 'valid' || this.validation() === "valid");
     }
     getPatternAttr() {
@@ -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) {
@@ -2931,6 +2957,12 @@ class DBInput {
             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]="(_valid() ?? validation()) === 'invalid'"
-      [attr.data-custom-validity]="_valid() ?? 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]="(_valid() ?? validation()) === 'invalid'"
-      [attr.data-custom-validity]="_valid() ?? 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() {
+        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) {
@@ -3977,6 +4020,13 @@ class DBCustomSelect {
             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();
         }
@@ -7953,9 +8003,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const defaultProps$f = {};
 class DBSelect {
     hasValidState() {
+        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) {
@@ -7975,6 +8035,12 @@ class DBSelect {
             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") {
@@ -8323,8 +8389,8 @@ class DBSelect {
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <select
-      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
-      [attr.data-custom-validity]="_valid() ?? 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')"
@@ -8427,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]="(_valid() ?? validation()) === 'invalid'"
-      [attr.data-custom-validity]="_valid() ?? 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')"
@@ -8646,9 +8712,19 @@ const StackJustifyContentList = ['space-between', 'start', 'end', 'center'];
 const defaultProps$d = {};
 class DBSwitch {
     hasValidState() {
+        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) {
@@ -8668,6 +8744,12 @@ class DBSwitch {
             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());
@@ -8954,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]="_valid() ?? validation()"
+    [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
     [class]="cls('db-switch', className())"
   >
     <label [attr.for]="_id()"
@@ -8966,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')"
@@ -9019,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]="_valid() ?? validation()"
+    [attr.data-custom-validity]="validation() === 'no-validation' ? 'no-validation' : (_valid() ?? validation())"
     [class]="cls('db-switch', className())"
   >
     <label [attr.for]="_id()"
@@ -9031,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')"
@@ -11012,9 +11094,19 @@ const TagBehaviorList = ['static', 'removable'];
 const defaultProps = {};
 class DBTextarea {
     hasValidState() {
+        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) {
@@ -11034,6 +11126,12 @@ class DBTextarea {
             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") {
@@ -11347,8 +11445,8 @@ class DBTextarea {
   >
     <label [attr.for]="_id()">{{label() ?? DEFAULT_LABEL}}</label>
     <textarea
-      [attr.aria-invalid]="(_valid() ?? validation()) === 'invalid'"
-      [attr.data-custom-validity]="_valid() ?? 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()"
@@ -11416,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]="(_valid() ?? validation()) === 'invalid'"
-      [attr.data-custom-validity]="_valid() ?? 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()"