@radix-ng/primitives 1.0.6 → 1.0.8

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

@@ -4,7 +4,7 @@ import * as i1 from '@radix-ng/primitives/popper';
 import { RdxPopperAnchor, RdxPopperArrow, RdxPopper, RdxPopperContentWrapper, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, injectPopperContentWrapperContext, RdxPopperContent } from '@radix-ng/primitives/popper';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2 from '@radix-ng/primitives/core';
-import { useFilter, injectId, useListHighlight, useTransitionStatus, createContext, createFloatingRootContext, isItemEqualToValue, isNullish, createCancelableChangeEventDetails, itemToStringLabel, provideFloatingTree, provideFloatingRootContext, setupInternalBackdrop, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError } from '@radix-ng/primitives/core';
+import { useFilter, injectId, useListHighlight, useTransitionStatus, createContext, RdxFormUiControlBase, createFloatingRootContext, isItemEqualToValue, isNullish, createCancelableChangeEventDetails, itemToStringLabel, provideFloatingTree, provideFloatingRootContext, setupInternalBackdrop, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import * as i1$1 from '@radix-ng/primitives/dismissable-layer';
 import { RdxFloatingInsideElement, RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
@@ -621,6 +621,9 @@ const context = () => {
         disabledState: root.disabledState,
         readonly: root.readOnly,
         requiredState: root.requiredState,
+        invalidState: root.invalidState,
+        touchedState: root.touchedState,
+        dirtyState: root.dirtyState,
         openOnInputClick: root.openOnInputClick,
         modal: root.modal,
         virtualized: root.virtualized,
@@ -699,7 +702,7 @@ function coerceAutoHighlight(value) {
  *
  * @group Components
  */
-class RdxComboboxRoot {
+class RdxComboboxRoot extends RdxFormUiControlBase {
     /** The list element id referenced by `aria-controls` / `aria-activedescendant` (engine-backed). */
     get listId() {
         return this.engine.listId;
@@ -725,6 +728,7 @@ class RdxComboboxRoot {
         return this.engine.activeId;
     }
     constructor() {
+        super();
         this.injector = inject(Injector);
         /** Per-popup floating root context (ADR 0015) — `open` / `triggers` / reference for the dismissal engine. */
         this.floatingContext = createFloatingRootContext({
@@ -864,6 +868,12 @@ class RdxComboboxRoot {
         ...(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 */
@@ -1193,8 +1203,12 @@ class RdxComboboxRoot {
     focusLastChip() {
         return this.chipsFocusLast?.() ?? false;
     }
+    /** @ignore Bridge the CVA `onTouched` so `markAsTouched()` also notifies Reactive/template forms. */
+    formUiTouchTarget() {
+        return { markAsTouched: () => this.onTouched?.() };
+    }
     markAsTouched() {
-        this.onTouched?.();
+        this.formUi.markAsTouched();
     }
     /**
      * The single guarded value-mutation point for all user-driven changes (selection toggle, Clear,
@@ -1211,6 +1225,7 @@ class RdxComboboxRoot {
             return false;
         }
         this.value.set(value);
+        this.formUi.markDirty();
         this.onChange?.(value);
         return true;
     }
@@ -1255,7 +1270,7 @@ class RdxComboboxRoot {
             // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
             provideFloatingTree(),
             provideFloatingRootContext(() => inject(RdxComboboxRoot).floatingContext)
-        ], exportAs: ["rdxComboboxRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
+        ], exportAs: ["rdxComboboxRoot"], usesInheritance: true, hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxRoot, decorators: [{
             type: Directive,
@@ -1746,12 +1761,27 @@ class RdxComboboxInput {
         ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /** Marks the input as invalid independently of any Field state. */
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.invalidState = computed(() => this.invalid() || Boolean(this.fieldRootContext?.invalidState()), /* @ts-ignore */
+        this.invalidState = computed(() => this.invalid() || this.rootContext.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.rootContext.invalidState()
+                ? false
+                : true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayValid" }] : /* istanbul ignore next */ []));
         this.disabledState = computed(() => this.rootContext.disabledState() || Boolean(this.fieldRootContext?.disabledState()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
         this.requiredState = computed(() => this.rootContext.requiredState() || Boolean(this.fieldRootContext?.requiredState()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
+        this.touchedState = computed(() => this.rootContext.touchedState() || Boolean(this.fieldRootContext?.touchedState()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touchedState" }] : /* istanbul ignore next */ []));
+        this.dirtyState = computed(() => this.rootContext.dirtyState() || Boolean(this.fieldRootContext?.dirtyState()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dirtyState" }] : /* istanbul ignore next */ []));
         this.filledState = computed(() => !this.isEmptyValue() || Boolean(this.fieldRootContext?.filledState()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filledState" }] : /* istanbul ignore next */ []));
         this.focusedState = computed(() => Boolean(this.fieldRootContext?.focusedState()), /* @ts-ignore */
@@ -1830,6 +1860,8 @@ class RdxComboboxInput {
     onBlur() {
         this.fieldRootContext?.setFocused(false);
         this.fieldRootContext?.setTouched(true);
+        // Notify Signal Forms (touched model + touch output) the control was touched.
+        this.rootContext.markAsTouched();
     }
     onKeydown(event) {
         // Don't interfere with IME composition or text-editing shortcuts / range selection. Shift+Arrows
@@ -1946,7 +1978,7 @@ class RdxComboboxInput {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxComboboxInput, isStandalone: true, selector: "input[rdxComboboxInput]", 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", "aria-autocomplete": "list" }, listeners: { "input": "onInput($event)", "click": "onClick($event)", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)", "compositionstart": "composing = true", "compositionend": "onCompositionEnd($event)" }, properties: { "attr.id": "id()", "attr.aria-haspopup": "rootContext.grid() ? \"grid\" : \"listbox\"", "attr.aria-expanded": "rootContext.open()", "attr.aria-controls": "rootContext.listId", "attr.aria-labelledby": "rootContext.labelId()", "attr.aria-activedescendant": "rootContext.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": "rootContext.readonly() ? \"\" : undefined", "attr.required": "requiredState() ? \"\" : undefined", "value": "rootContext.inputValue()", "attr.data-popup-open": "dataAttr(rootContext.open())", "attr.data-list-empty": "dataAttr(rootContext.visibleCount() === 0)", "attr.data-placeholder": "dataAttr(isEmptyValue())", "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: ["rdxComboboxInput"], hostDirectives: [{ directive: i1.RdxPopperAnchor }, { directive: i1$1.RdxFloatingInsideElement }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxComboboxInput, isStandalone: true, selector: "input[rdxComboboxInput]", 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", "aria-autocomplete": "list" }, listeners: { "input": "onInput($event)", "click": "onClick($event)", "focus": "onFocus()", "blur": "onBlur()", "keydown": "onKeydown($event)", "compositionstart": "composing = true", "compositionend": "onCompositionEnd($event)" }, properties: { "attr.id": "id()", "attr.aria-haspopup": "rootContext.grid() ? \"grid\" : \"listbox\"", "attr.aria-expanded": "rootContext.open()", "attr.aria-controls": "rootContext.listId", "attr.aria-labelledby": "rootContext.labelId()", "attr.aria-activedescendant": "rootContext.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": "rootContext.readonly() ? \"\" : undefined", "attr.required": "requiredState() ? \"\" : undefined", "value": "rootContext.inputValue()", "attr.data-popup-open": "dataAttr(rootContext.open())", "attr.data-list-empty": "dataAttr(rootContext.visibleCount() === 0)", "attr.data-placeholder": "dataAttr(isEmptyValue())", "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: ["rdxComboboxInput"], hostDirectives: [{ directive: i1.RdxPopperAnchor }, { directive: i1$1.RdxFloatingInsideElement }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxComboboxInput, decorators: [{
             type: Directive,
@@ -1965,7 +1997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[attr.aria-labelledby]': 'rootContext.labelId()',
                         '[attr.aria-activedescendant]': 'rootContext.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',
@@ -1975,10 +2007,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[attr.data-popup-open]': 'dataAttr(rootContext.open())',
                         '[attr.data-list-empty]': 'dataAttr(rootContext.visibleCount() === 0)',
                         '[attr.data-placeholder]': 'dataAttr(isEmptyValue())',
-                        '[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)',