@radix-ng/primitives 1.0.10 → 1.1.1

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, model, signal, computed, ElementRef, input, booleanAttribute, output, effect, untracked, Directive, InjectionToken, Injector, DestroyRef, afterNextRender, linkedSignal, contentChild, forwardRef, isDevMode } from '@angular/core';
 import * as i3 from '@radix-ng/primitives/core';
-import { isEqual, getActiveElement, formUiStateContext, createContext, RdxFormUiControlBase, injectId, createFloatingRootContext, useTransitionStatus, isNullish, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useListHighlight, useAnchoredScrollLock, RdxFloatingNodeRegistration, handleAndDispatchCustomEvent, resizeEffect, clamp, rdxDevError, setupInternalBackdrop, provideExistingToken } from '@radix-ng/primitives/core';
+import { isEqual, getActiveElement, formUiStateContext, createContext, RdxFormUiControlBase, injectId, createFloatingRootContext, useTransitionStatus, isNullish, useNativeFormControl, serializeNativeFormValue, createCancelableChangeEventDetails, provideValueAccessor, provideFloatingTree, provideFloatingRootContext, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useListHighlight, useAnchoredScrollLock, RdxFloatingNodeRegistration, handleAndDispatchCustomEvent, resizeEffect, clamp, rdxDevError, setupInternalBackdrop, provideExistingToken, itemToStringLabel } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import * as i2 from '@radix-ng/primitives/floating-focus-manager';
 import { getInteractionTypeFromEvent, provideFloatingFocusManagerConfig, RdxFloatingFocusManager, createRdxTriggerInteraction } from '@radix-ng/primitives/floating-focus-manager';
@@ -70,7 +70,7 @@ const context$2 = () => {
         openInteractionType: context.openInteractionType,
         closeInteractionType: context.closeInteractionType,
         ...formUiStateContext(context.formUi),
-        disabled: context.disabled,
+        disabled: context.disabledState,
         readOnly: context.readOnly,
         required: context.required,
         modal: context.modal,
@@ -134,10 +134,20 @@ class RdxSelectRoot extends RdxFormUiControlBase {
         this.defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.cvaDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+        this.disabledState = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
         /** When `true`, the value cannot be changed by the user (the popup can still be opened to view it). */
         this.readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Marks the control as required — reflected on the trigger as `aria-required` / `data-required`. */
         this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Name used when serializing this composite control into native `FormData`. */
+        this.name = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        /** Id of an external form that owns this control. */
+        this.form = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
         /** Whether the popup is modal: locks page scroll and makes outside content inert while open. */
         this.modal = input(true, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.dirInput = input(undefined, { ...(ngDevMode ? { debugName: "dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
@@ -148,6 +158,9 @@ class RdxSelectRoot extends RdxFormUiControlBase {
         /** Converts a value to its display label (used by `RdxSelectValue`). */
         this.itemToStringLabel = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "itemToStringLabel" }] : /* istanbul ignore next */ []));
+        /** Converts an item value to the string submitted by a native form. */
+        this.itemToStringValue = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "itemToStringValue" }] : /* istanbul ignore next */ []));
         /** Emits before an open-state change is committed; call `eventDetails.cancel()` to veto it. */
         this.onOpenChange = output();
         /** Emits before a value change is committed; call `eventDetails.cancel()` to veto it. */
@@ -169,6 +182,29 @@ class RdxSelectRoot extends RdxFormUiControlBase {
         ...(ngDevMode ? [{ debugName: "isEmptyModelValue" }] : /* istanbul ignore next */ []));
         this.hasAppliedDefaultValue = false;
         this.hasAppliedDefaultOpen = false;
+        this.nativeFormControl = useNativeFormControl({
+            name: this.name,
+            form: this.form,
+            disabled: this.disabledState,
+            value: this.value,
+            serialize: (value) => {
+                const itemToStringValue = this.itemToStringValue();
+                return itemToStringValue
+                    ? serializeNativeFormValue(value, (entry) => itemToStringValue(entry))
+                    : serializeNativeFormValue(value);
+            },
+            defaultValue: () => {
+                const defaultValue = this.defaultValue();
+                return defaultValue === undefined ? this.value() : defaultValue;
+            },
+            onReset: (value) => {
+                this.value.set(value);
+                if (!this.resetNgControl(value)) {
+                    this.onChange?.(value);
+                }
+                this.formUi.resetInteractionState?.();
+            }
+        });
         this.optionsSet = signal(new Set(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "optionsSet" }] : /* istanbul ignore next */ []));
         // The native `select` only associates the correct default value if the corresponding
@@ -197,7 +233,9 @@ class RdxSelectRoot extends RdxFormUiControlBase {
             const defaultValue = this.defaultValue();
             if (!this.hasAppliedDefaultValue && defaultValue !== undefined) {
                 this.hasAppliedDefaultValue = true;
-                this.value.set(defaultValue);
+                if (untracked(this.value) === undefined) {
+                    this.value.set(defaultValue);
+                }
             }
         });
         effect(() => {
@@ -237,7 +275,7 @@ class RdxSelectRoot extends RdxFormUiControlBase {
         return Array.from(this.optionsSet()).find((option) => valueComparator(value, option.value, this.isItemEqualToValue()));
     }
     setValue(value, reason = 'none', event = new Event('select.value-change')) {
-        if (this.readOnly()) {
+        if (this.disabledState() || this.readOnly()) {
             return false;
         }
         const nextValue = this.multiple()
@@ -259,6 +297,7 @@ class RdxSelectRoot extends RdxFormUiControlBase {
         }
         this.value.set(nextValue);
         this.formUi.markDirty();
+        this.onChange?.(nextValue);
         return true;
     }
     setOpen(open, reason = 'none', event) {
@@ -279,8 +318,29 @@ class RdxSelectRoot extends RdxFormUiControlBase {
         }
         return true;
     }
+    /** @ignore Bridge the CVA touched callback into the shared Signal Forms UI-state path. */
+    formUiTouchTarget() {
+        return { markAsTouched: () => this.onTouched?.() };
+    }
+    /** @ignore Write a form-owned value without emitting a user change. */
+    writeValue(value) {
+        untracked(() => this.value.set(value));
+    }
+    /** @ignore Register the Reactive Forms / ngModel value callback. */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /** @ignore Register the Reactive Forms / ngModel touched callback. */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** @ignore Merge form-owned disabled state with the public disabled input. */
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSelectRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxSelectRoot, isStandalone: true, selector: "[rdxSelectRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToStringLabel: { classPropertyName: "itemToStringLabel", publicName: "itemToStringLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", value: "valueChange", onOpenChange: "onOpenChange", onValueChange: "onValueChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxSelectRoot, isStandalone: true, selector: "[rdxSelectRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToStringLabel: { classPropertyName: "itemToStringLabel", publicName: "itemToStringLabel", isSignal: true, isRequired: false, transformFunction: null }, itemToStringValue: { classPropertyName: "itemToStringValue", publicName: "itemToStringValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", value: "valueChange", onOpenChange: "onOpenChange", onValueChange: "onValueChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [
+            provideValueAccessor(RdxSelectRoot),
             provideSelectRootContext(context$2),
             // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
             provideFloatingTree(),
@@ -293,6 +353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     selector: '[rdxSelectRoot]',
                     exportAs: 'rdxSelectRoot',
                     providers: [
+                        provideValueAccessor(RdxSelectRoot),
                         provideSelectRootContext(context$2),
                         // New floating foundation (ADR 0015/0017) — the dismissal capability reads this shared context.
                         provideFloatingTree(),
@@ -300,7 +361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     ],
                     hostDirectives: [RdxPopper]
                 }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], isItemEqualToValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemEqualToValue", required: false }] }], itemToStringLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringLabel", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], isItemEqualToValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemEqualToValue", required: false }] }], itemToStringLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringLabel", required: false }] }], itemToStringValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringValue", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
 
 /**
  * An overlay rendered beneath the popup in `modal` mode. Place it inside the portal/presence; style
@@ -1514,14 +1575,12 @@ class RdxSelectTrigger {
             disabled: () => this.isDisabled(),
             contentId: () => this.rootContext.contentId
         });
-        this.invalidState = computed(() => this.rootContext.invalidState() || Boolean(this.fieldRootContext?.invalidState()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         /**
          * Tri-state *displayed* validity: when inside a `rdxFieldRoot` the field's gated `validState` is the
          * single source (so the field's `validationMode` keeps the trigger neutral until revealed), otherwise
          * the trigger's own binary invalidity.
          */
-        this.displayValid = computed(() => this.fieldRootContext ? this.fieldRootContext.validState() : this.invalidState() ? false : true, /* @ts-ignore */
+        this.displayValid = computed(() => this.fieldRootContext ? this.fieldRootContext.validState() : this.rootContext.validState(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayValid" }] : /* istanbul ignore next */ []));
         this.requiredState = computed(() => this.rootContext.required() || Boolean(this.fieldRootContext?.requiredState()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "requiredState" }] : /* istanbul ignore next */ []));
@@ -1539,10 +1598,7 @@ class RdxSelectTrigger {
             if (!this.fieldRootContext) {
                 return undefined;
             }
-            const ids = [
-                ...this.fieldRootContext.descriptionIds(),
-                ...(this.fieldRootContext.invalidState() ? this.fieldRootContext.errorIds() : [])
-            ];
+            const ids = [...this.fieldRootContext.descriptionIds(), ...this.fieldRootContext.errorIds()];
             return ids.length ? ids.join(' ') : undefined;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
@@ -1680,7 +1736,7 @@ class RdxSelectValue {
                     return customLabel(value);
                 }
                 const option = options.find((o) => valueComparator(value, o.value, this.rootContext.isItemEqualToValue()));
-                return option?.textContent ?? '';
+                return option?.textContent ?? itemToStringLabel(value);
             };
             const value = this.rootContext.value();
             const list = Array.isArray(value) ? value.map((v) => labelFor(v)) : [labelFor(value)];