codexly-ui 0.12.45 → 0.12.46

package/fesm2022/codexly-ui.mjs

@@ -3,7 +3,7 @@ import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component,
 import { DomSanitizer } from '@angular/platform-browser';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgStyle, CurrencyPipe, DecimalPipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, NgControl, ReactiveFormsModule, FormGroup, Validators, FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, NgControl, TouchedChangeEvent, ReactiveFormsModule, FormGroup, Validators, FormsModule } from '@angular/forms';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { startWith, map, debounceTime, distinctUntilChanged, switchMap, of, catchError, filter } from 'rxjs';
 import * as i1 from '@angular/cdk/overlay';
@@ -4421,6 +4421,11 @@ class ClxSelectComponent {
     _asyncLoading = signal(false, ...(ngDevMode ? [{ debugName: "_asyncLoading" }] : /* istanbul ignore next */ []));
     _asyncQuery = signal('', ...(ngDevMode ? [{ debugName: "_asyncQuery" }] : /* istanbul ignore next */ []));
     _wasTouched = signal(false, ...(ngDevMode ? [{ debugName: "_wasTouched" }] : /* istanbul ignore next */ []));
+    // Mirrors this._ngControl.control.touched reactively — that flag is plain mutable state on the
+    // AbstractControl, not a signal, so a form.markAllAsTouched() call (e.g. from a failed submit)
+    // would never be noticed by a computed() reading it directly. control.events emits a
+    // TouchedChangeEvent for exactly that call, which is what actually drives this.
+    _controlTouched = signal(false, ...(ngDevMode ? [{ debugName: "_controlTouched" }] : /* istanbul ignore next */ []));
     _selectedVals = signal([], ...(ngDevMode ? [{ debugName: "_selectedVals" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
@@ -4437,6 +4442,18 @@ class ClxSelectComponent {
         this._searchQuery = toSignal(this._searchControl.valueChanges.pipe(startWith(''), map(v => v ?? '')), { initialValue: '' });
         if (this._ngControl)
             this._ngControl.valueAccessor = this;
+        // See _controlTouched's own doc comment — control.touched itself isn't observable, but
+        // control.events (Angular 18+) emits a TouchedChangeEvent whenever markAsTouched/
+        // markAllAsTouched runs, which is exactly the case (a failed form submit) that needs to make
+        // this field's error visible even though the user never opened this dropdown themselves.
+        const control = this._ngControl?.control;
+        if (control) {
+            this._controlTouched.set(control.touched);
+            control.events.subscribe(event => {
+                if (event instanceof TouchedChangeEvent)
+                    this._controlTouched.set(event.touched);
+            });
+        }
         effect(() => {
             const family = this._displayFontFamily();
             if (family)
@@ -4472,7 +4489,12 @@ class ClxSelectComponent {
     _hasValue = computed(() => this._selectedVals().length > 0, ...(ngDevMode ? [{ debugName: "_hasValue" }] : /* istanbul ignore next */ []));
     _isInvalid = computed(() => {
         this._selectedVals(); // re-evaluate control.invalid (imperatively updated by Angular Forms) on each selection change
-        return this._wasTouched() && (this._ngControl?.control?.invalid ?? false);
+        // Either signal is enough: the user actually opening/closing this dropdown (_wasTouched), or
+        // Angular Forms marking the control touched programmatically (_controlTouched — set by e.g.
+        // form.markAllAsTouched() on a failed submit, which never fires this component's own
+        // _closePanel(), so _wasTouched alone would stay false forever for a field the user never
+        // interacted with before trying to submit).
+        return (this._wasTouched() || this._controlTouched()) && (this._ngControl?.control?.invalid ?? false);
     }, ...(ngDevMode ? [{ debugName: "_isInvalid" }] : /* istanbul ignore next */ []));
     _selectedOptions = computed(() => {
         const vals = this._selectedVals();