@radix-ng/primitives 1.0.7 → 1.0.8

package/fesm2022/radix-ng-primitives-autocomplete.mjs

@@ -8,7 +8,7 @@ import * as i1$2 from '@radix-ng/primitives/dismissable-layer';
 import { RdxFloatingInsideElement, RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2 from '@radix-ng/primitives/core';
-import { createFloatingRootContext, rdxDevWarning, isItemEqualToValue, itemToStringLabel, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, setupInternalBackdrop, injectId, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError } from '@radix-ng/primitives/core';
+import { RdxFormUiControlBase, createFloatingRootContext, rdxDevWarning, isItemEqualToValue, itemToStringLabel, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, setupInternalBackdrop, injectId, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import { injectFieldRootContext } from '@radix-ng/primitives/field';
 
@@ -142,6 +142,9 @@ const context = () => {
         setInputValue: (value) => root.setQuery(value),
         openAndHighlight: (edge, reason, event) => root.openAndHighlight(edge, reason, event),
         navigateByKeyboard: (direction, event) => root.navigateByKeyboard(direction, event),
+        invalidState: root.invalidState,
+        touchedState: root.touchedState,
+        dirtyState: root.dirtyState,
         select: (item, event) => root.handleSelect(item, event),
         selectIndex: (index, event) => root.selectIndex(index, event),
         selectHighlighted: (event) => root.selectHighlighted(event),
@@ -171,7 +174,7 @@ function coerceAutoHighlight(value) {
  *
  * @group Components
  */
-class RdxAutocompleteRoot {
+class RdxAutocompleteRoot extends RdxFormUiControlBase {
     // --- engine-backed surface read by the parts / tests ---
     get listId() {
         return this.engine.listId;
@@ -231,6 +234,7 @@ class RdxAutocompleteRoot {
         return this.engine.triggerElement;
     }
     constructor() {
+        super();
         this.injector = inject(Injector);
         /** Per-popup floating root context (ADR 0015) — `open` / `triggers` / reference for the dismissal engine. */
         this.floatingContext = createFloatingRootContext({
@@ -332,6 +336,12 @@ class RdxAutocompleteRoot {
         ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
         this.requiredState = computed(() => this.required(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.invalidState = this.formUi.invalidState;
+        /** @ignore */
+        this.touchedState = this.formUi.touchedState;
+        /** @ignore */
+        this.dirtyState = this.formUi.dirtyState;
         this.preventUnmountOnClose = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
         this.present = computed(() => this.open() || this.preventUnmountOnClose(), /* @ts-ignore */
@@ -603,8 +613,12 @@ class RdxAutocompleteRoot {
     focusInput() {
         this.engine.focusInput();
     }
+    /** @ignore Bridge the CVA `onTouched` so `markAsTouched()` also notifies Reactive/template forms. */
+    formUiTouchTarget() {
+        return { markAsTouched: () => this.onTouched?.() };
+    }
     markAsTouched() {
-        this.onTouched?.();
+        this.formUi.markAsTouched();
     }
     commitValue(value, reason, event = new Event('autocomplete.value-change')) {
         // Mirror combobox's guarded commit: never mutate the value while disabled or read-only
@@ -618,6 +632,7 @@ class RdxAutocompleteRoot {
             return;
         }
         this.value.set(value);
+        this.formUi.markDirty();
         this.onChange?.(value);
     }
     createOpenChangeEvent(open, reason, event) {
@@ -661,7 +676,7 @@ class RdxAutocompleteRoot {
             // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
             provideFloatingTree(),
             provideFloatingRootContext(() => inject(RdxAutocompleteRoot).floatingContext)
-        ], exportAs: ["rdxAutocompleteRoot"], hostDirectives: [{ directive: i1$1.RdxPopper }], ngImport: i0 }); }
+        ], exportAs: ["rdxAutocompleteRoot"], usesInheritance: true, hostDirectives: [{ directive: i1$1.RdxPopper }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxAutocompleteRoot, decorators: [{
             type: Directive,
@@ -882,12 +897,27 @@ class RdxAutocompleteInput {
         // `aria-autocomplete` tokens. Must reflect the static mechanism, not the transient inline preview.
         this.ariaAutocomplete = computed(() => this.root.mode(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaAutocomplete" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || Boolean(this.fieldRootContext?.invalidState()), /* @ts-ignore */
+        this.invalidState = computed(() => this.invalid() || this.root.invalidState() || Boolean(this.fieldRootContext?.invalidState()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        /**
+         * Tri-state *displayed* validity: the enclosing Field's gated `validState` when inside a `rdxFieldRoot`
+         * (so a field whose `validationMode` defers display (e.g. `onBlur`) keeps the input neutral until revealed), else the input's
+         * own binary invalidity.
+         */
+        this.displayValid = computed(() => this.fieldRootContext
+            ? this.fieldRootContext.validState()
+            : this.invalid() || this.root.invalidState()
+                ? false
+                : true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayValid" }] : /* istanbul ignore next */ []));
         this.disabledState = computed(() => this.root.disabledState() || Boolean(this.fieldRootContext?.disabledState()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
         this.requiredState = computed(() => this.root.requiredState() || Boolean(this.fieldRootContext?.requiredState()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
+        this.touchedState = computed(() => this.root.touchedState() || Boolean(this.fieldRootContext?.touchedState()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touchedState" }] : /* istanbul ignore next */ []));
+        this.dirtyState = computed(() => this.root.dirtyState() || Boolean(this.fieldRootContext?.dirtyState()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dirtyState" }] : /* istanbul ignore next */ []));
         this.filledState = computed(() => Boolean(this.root.value()) || Boolean(this.fieldRootContext?.filledState()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filledState" }] : /* istanbul ignore next */ []));
         this.focusedState = computed(() => Boolean(this.fieldRootContext?.focusedState()), /* @ts-ignore */
@@ -959,6 +989,8 @@ class RdxAutocompleteInput {
     onBlur() {
         this.fieldRootContext?.setFocused(false);
         this.fieldRootContext?.setTouched(true);
+        // Notify Signal Forms (touched model + touch output) the control was touched.
+        this.root.markAsTouched();
     }
     onKeydown(event) {
         if (event.isComposing || this.composing) {
@@ -1060,7 +1092,7 @@ class RdxAutocompleteInput {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxAutocompleteInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxAutocompleteInput, isStandalone: true, selector: "input[rdxAutocompleteInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "autocomplete": "off" }, listeners: { "input": "onInput($event)", "click": "onClick($event)", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)", "compositionstart": "composing = true", "compositionend": "onCompositionEnd($event)" }, properties: { "attr.aria-autocomplete": "ariaAutocomplete()", "attr.id": "id()", "attr.aria-haspopup": "root.grid() ? \"grid\" : \"listbox\"", "attr.aria-expanded": "root.open()", "attr.aria-controls": "root.listId", "attr.aria-labelledby": "root.labelId()", "attr.aria-activedescendant": "root.activeId()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "invalidState() ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.aria-disabled": "disabledState() ? \"true\" : undefined", "attr.disabled": "disabledState() ? \"\" : undefined", "attr.readonly": "root.readOnly() ? \"\" : undefined", "attr.required": "requiredState() ? \"\" : undefined", "value": "root.displayValue()", "attr.data-popup-open": "dataAttr(root.open())", "attr.data-list-empty": "dataAttr(root.visibleCount() === 0)", "attr.data-invalid": "dataAttr(invalidState())", "attr.data-valid": "dataAttr(!invalidState())", "attr.data-disabled": "dataAttr(disabledState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, exportAs: ["rdxAutocompleteInput"], hostDirectives: [{ directive: i1$1.RdxPopperAnchor }, { directive: i1$2.RdxFloatingInsideElement }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxAutocompleteInput, isStandalone: true, selector: "input[rdxAutocompleteInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "autocomplete": "off" }, listeners: { "input": "onInput($event)", "click": "onClick($event)", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)", "compositionstart": "composing = true", "compositionend": "onCompositionEnd($event)" }, properties: { "attr.aria-autocomplete": "ariaAutocomplete()", "attr.id": "id()", "attr.aria-haspopup": "root.grid() ? \"grid\" : \"listbox\"", "attr.aria-expanded": "root.open()", "attr.aria-controls": "root.listId", "attr.aria-labelledby": "root.labelId()", "attr.aria-activedescendant": "root.activeId()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "displayValid() === false ? \"true\" : undefined", "attr.aria-required": "requiredState() ? \"true\" : undefined", "attr.aria-disabled": "disabledState() ? \"true\" : undefined", "attr.disabled": "disabledState() ? \"\" : undefined", "attr.readonly": "root.readOnly() ? \"\" : undefined", "attr.required": "requiredState() ? \"\" : undefined", "value": "root.displayValue()", "attr.data-popup-open": "dataAttr(root.open())", "attr.data-list-empty": "dataAttr(root.visibleCount() === 0)", "attr.data-invalid": "dataAttr(displayValid() === false)", "attr.data-valid": "dataAttr(displayValid() === true)", "attr.data-disabled": "dataAttr(disabledState())", "attr.data-required": "dataAttr(requiredState())", "attr.data-touched": "dataAttr(touchedState())", "attr.data-dirty": "dataAttr(dirtyState())", "attr.data-filled": "dataAttr(filledState())", "attr.data-focused": "dataAttr(focusedState())" } }, exportAs: ["rdxAutocompleteInput"], hostDirectives: [{ directive: i1$1.RdxPopperAnchor }, { directive: i1$2.RdxFloatingInsideElement }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxAutocompleteInput, decorators: [{
             type: Directive,
@@ -1079,7 +1111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[attr.aria-labelledby]': 'root.labelId()',
                         '[attr.aria-activedescendant]': 'root.activeId()',
                         '[attr.aria-describedby]': 'describedBy()',
-                        '[attr.aria-invalid]': 'invalidState() ? "true" : undefined',
+                        '[attr.aria-invalid]': 'displayValid() === false ? "true" : undefined',
                         '[attr.aria-required]': 'requiredState() ? "true" : undefined',
                         '[attr.aria-disabled]': 'disabledState() ? "true" : undefined',
                         '[attr.disabled]': 'disabledState() ? "" : undefined',
@@ -1088,10 +1120,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[value]': 'root.displayValue()',
                         '[attr.data-popup-open]': 'dataAttr(root.open())',
                         '[attr.data-list-empty]': 'dataAttr(root.visibleCount() === 0)',
-                        '[attr.data-invalid]': 'dataAttr(invalidState())',
-                        '[attr.data-valid]': 'dataAttr(!invalidState())',
+                        '[attr.data-invalid]': 'dataAttr(displayValid() === false)',
+                        '[attr.data-valid]': 'dataAttr(displayValid() === true)',
                         '[attr.data-disabled]': 'dataAttr(disabledState())',
                         '[attr.data-required]': 'dataAttr(requiredState())',
+                        '[attr.data-touched]': 'dataAttr(touchedState())',
+                        '[attr.data-dirty]': 'dataAttr(dirtyState())',
                         '[attr.data-filled]': 'dataAttr(filledState())',
                         '[attr.data-focused]': 'dataAttr(focusedState())',
                         '(input)': 'onInput($event)',