@ascentgl/ads-ui 21.67.0 → 21.69.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -2408,7 +2408,7 @@ class AbstractBaseComponent {
             if (this.originalValidator === null) {
                 this.originalValidator = this.valueControl.validator;
                 this.originalAsyncValidator = this.valueControl.asyncValidator;
-                this.hadRequiredValidator = this.valueControl.hasValidator(Validators.required);
+                this.hadRequiredValidator = this.hasRequiredValidatorCheck(this.valueControl);
             }
             const subscription = this.valueControl.events
                 .pipe(filter((event) => event instanceof TouchedChangeEvent))
@@ -2461,7 +2461,7 @@ class AbstractBaseComponent {
                 // Only update hadRequiredValidator if we're not in skipValidationWhenEmpty mode
                 // When skipValidationWhenEmpty is active, we preserve the original validator state
                 if (!this.skipValidationWhenEmpty) {
-                    this.hadRequiredValidator = this.valueControl.hasValidator(Validators.required);
+                    this.hadRequiredValidator = this.hasRequiredValidatorCheck(this.valueControl);
                 }
             });
             this.destroyRef.onDestroy(() => {
@@ -2481,7 +2481,7 @@ class AbstractBaseComponent {
         if (this.skipValidationWhenEmpty) {
             return this.hadRequiredValidator;
         }
-        return this.valueControl.hasValidator(Validators.required);
+        return this.hasRequiredValidatorCheck(this.valueControl);
     }
     constructor() {
         this._isStaticFooter = inject(ADS_UI_CONFIG, { optional: true })?.staticFormFieldFooter;
@@ -2553,7 +2553,7 @@ class AbstractBaseComponent {
                     this.valueControl.setAsyncValidators(this.originalAsyncValidator);
                 }
                 // Update required flag based on current validators
-                this.hadRequiredValidator = this.valueControl.hasValidator(Validators.required);
+                this.hadRequiredValidator = this.hasRequiredValidatorCheck(this.valueControl);
                 this.valueControl.updateValueAndValidity({ emitEvent: false });
                 this.displayControl.updateValueAndValidity({ emitEvent: false });
                 this.syncState();
@@ -2673,6 +2673,27 @@ class AbstractBaseComponent {
     canShowSuccess() {
         return !this.valueControl.errors && this.valueControl.touched && !!this.successMessage;
     }
+    /**
+     * @ignore
+     * Robustly checks whether a control has a required validator.
+     * Angular's `hasValidator(Validators.required)` uses reference equality, which fails
+     * when validators are provided as an array (e.g., `[Validators.required]`) because
+     * Angular composes them into a wrapper function with a different reference.
+     * This method also checks by running the validator against an empty value.
+     */
+    hasRequiredValidatorCheck(control) {
+        // Fast path: direct reference check
+        if (control.hasValidator(Validators.required)) {
+            return true;
+        }
+        // Fallback: run the current validator against an empty value to detect 'required' error
+        const validator = control.validator;
+        if (!validator) {
+            return false;
+        }
+        const result = validator(new FormControl(null));
+        return result !== null && 'required' in result;
+    }
     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: { skipValidationWhenEmpty: "skipValidationWhenEmpty", control: "control", immediateValidation: "immediateValidation", errorMessages: "errorMessages", hint: "hint", successMessage: "successMessage", id: "id", label: "label", showFooter: "showFooter", width: "width" }, usesOnChanges: true, ngImport: i0 }); }
 }
@@ -4129,6 +4150,18 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
             }, 0);
         }
     }
+    /** @ignore - Detect value changes when setValue is called with emitEvent: false */
+    ngDoCheck() {
+        // Check if valueControl value has changed (handles emitEvent: false cases)
+        const currentValue = this.valueControl?.value;
+        if (currentValue !== this.previousValueControlValue) {
+            this.previousValueControlValue = currentValue;
+            // Only sync if not set internally and component is initialized
+            if (!this.isInternalValueSet && this.valueControl) {
+                this.controlValueToDisplayedControlValue();
+            }
+        }
+    }
     /** @ignore */
     ngOnDestroy() {
         if (this.unsubscribeFromScroll)
@@ -4572,11 +4605,27 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
          */
         const displayedValue = this.valueControl.value
             ? this.getDisplayedValue(this.valueControl.value)
-            : this.valueControl.value;
+            : null;
         /**
          * use it to build displayedControl value
          */
-        this.displayControl.setValue(displayedValue ? { key: this.valueControl.value, value: displayedValue } : this.valueControl.value, { emitEvent: false });
+        this.displayControl.setValue(displayedValue ? { key: this.valueControl.value, value: displayedValue } : null, { emitEvent: false });
+        // When value is cleared, also clear the input element directly and reset state
+        if (!this.valueControl.value) {
+            this.hasSearched = false;
+            this.previousControlValue = '';
+            // Clear displayed options when value is cleared
+            if (!this.staticOptions) {
+                this.displayedOptions = new Map();
+                this.allOptions = new Map();
+            }
+            // Directly clear the input element to ensure UI reflects the cleared state
+            if (this.input?.nativeElement) {
+                this.input.nativeElement.value = '';
+            }
+        }
+        // Trigger change detection to update UI
+        this.cdr.detectChanges();
         // Trigger textarea resize after DOM updates to avoid ExpressionChangedAfterItHasBeenCheckedError
         if (this.wrapOptionText && this.input?.nativeElement instanceof HTMLTextAreaElement) {
             Promise.resolve().then(() => {