@ascentgl/ads-ui 21.17.4 → 21.19.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -2409,7 +2409,10 @@ class AbstractBaseComponent {
                 .subscribe((event) => {
                 if (event.touched) {
                     this.syncState();
-                    this.displayControl.updateValueAndValidity({ emitEvent: false });
+                    // Avoid triggering validators for empty values when configured.
+                    if (!this.skipValidationWhenEmpty || !this.isEmptyValue(this.valueControl.value)) {
+                        this.displayControl.updateValueAndValidity({ emitEvent: false });
+                    }
                 }
             });
             this.destroyRef.onDestroy(() => subscription.unsubscribe());
@@ -2424,6 +2427,11 @@ class AbstractBaseComponent {
     }
     constructor() {
         this._isStaticFooter = inject(ADS_UI_CONFIG, { optional: true })?.staticFormFieldFooter;
+        /**
+         * If true, validators won't be triggered when the field value is empty (null/undefined/"").
+         * Useful for cases where validation should only run once the user provides a value.
+         */
+        this.skipValidationWhenEmpty = false;
         /** @ignore */
         this.displayControl = new FormControl();
         /** If true, invalid field will immediately become dirty to display the error */
@@ -2527,12 +2535,28 @@ class AbstractBaseComponent {
         else if (this.displayControl.untouched) {
             this.displayControl.markAsTouched();
         }
+        // If configured, treat empty value as "no validation" state.
+        if (this.skipValidationWhenEmpty && this.isEmptyValue(this.valueControl.value)) {
+            if (this.valueControl.errors) {
+                this.valueControl.setErrors(null);
+            }
+            if (this.displayControl.errors) {
+                this.displayControl.setErrors(null);
+            }
+            return;
+        }
         if (this.valueControl.valid !== this.displayControl.valid) {
             this.displayControl.setErrors(this.valueControl.errors);
         }
     }
     /** @ignore */
+    isEmptyValue(value) {
+        return value === null || value === undefined || value === '';
+    }
+    /** @ignore */
     canShowError() {
+        if (this.skipValidationWhenEmpty && this.isEmptyValue(this.valueControl.value))
+            return false;
         return !!this.valueControl.errors && (this.valueControl.touched || this.immediateValidation);
     }
     /** @ignore */
@@ -2540,11 +2564,13 @@ class AbstractBaseComponent {
         return !this.valueControl.errors && this.valueControl.touched && !!this.successMessage;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AbstractBaseComponent, isStandalone: true, inputs: { control: "control", immediateValidation: "immediateValidation", errorMessages: "errorMessages", hint: "hint", successMessage: "successMessage", id: "id", label: "label", showFooter: "showFooter", width: "width" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AbstractBaseComponent, isStandalone: true, inputs: { skipValidationWhenEmpty: "skipValidationWhenEmpty", control: "control", immediateValidation: "immediateValidation", errorMessages: "errorMessages", hint: "hint", successMessage: "successMessage", id: "id", label: "label", showFooter: "showFooter", width: "width" }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractBaseComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { control: [{
+        }], ctorParameters: () => [], propDecorators: { skipValidationWhenEmpty: [{
+                type: Input
+            }], control: [{
                 type: Input
             }], immediateValidation: [{
                 type: Input