@radix-ng/primitives 1.0.7 → 1.0.9

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { forwardRef, input, booleanAttribute, output, linkedSignal, untracked, Directive, inject, isDevMode, HOST_TAG_NAME, ElementRef, InjectionToken, computed, APP_ID, Injectable, DOCUMENT, PLATFORM_ID, DestroyRef, signal, effect, afterNextRender, assertInInjectionContext, Injector } from '@angular/core';
+import { forwardRef, input, booleanAttribute, output, linkedSignal, untracked, Directive, inject, isDevMode, HOST_TAG_NAME, ElementRef, InjectionToken, computed, APP_ID, Injectable, DOCUMENT, PLATFORM_ID, DestroyRef, signal, model, effect, afterNextRender, assertInInjectionContext, Injector } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { getLocalTimeZone, CalendarDateTime, ZonedDateTime, getDayOfWeek, DateFormatter, createCalendar, toCalendar, CalendarDate, Time, startOfMonth, endOfMonth, today } from '@internationalized/date';
 import { isPlatformBrowser, DOCUMENT as DOCUMENT$1 } from '@angular/common';
@@ -2030,6 +2030,212 @@ function provideToken(token, type) {
     };
 }
 
+/**
+ * Builds the shared form-UI state and its mutators from a control's input signals, removing the
+ * per-control copy-paste of the `invalidState`/`touchedState`/`dirtyState` computeds and the
+ * `markAsTouched`/`markDirty` logic.
+ *
+ * **Why the inputs stay on the control (not in here):** Angular's compiler only discovers
+ * `input()`/`model()` declared as field initializers, and Signal Forms binds form-written state
+ * (`errors`/`disabled`/`touched`) onto the single directive that carries the `value`/`checked`
+ * model — so the inputs must co-locate with `value` on the control directive. This helper takes
+ * those signals and centralizes only the derivation.
+ *
+ * Safe to call from a field initializer: `signal()`/`computed()` need no injection context.
+ */
+function createFormUiState(options) {
+    const dirtyValue = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dirtyValue" }] : /* istanbul ignore next */ []));
+    return {
+        invalidState: computed(() => options.invalid() || (options.errors()?.length ?? 0) > 0),
+        touchedState: computed(() => options.touched()),
+        dirtyState: computed(() => options.dirty() || dirtyValue()),
+        markDirty: () => dirtyValue.set(true),
+        markAsTouched: () => {
+            options.cva?.markAsTouched();
+            options.touched.set(true);
+            options.touch.emit();
+        }
+    };
+}
+/** Spread helper to wire {@link RdxFormUiStateContext} fields from an {@link RdxFormUiState} into a context factory. */
+function formUiStateContext(state) {
+    return {
+        invalidState: state.invalidState,
+        touchedState: state.touchedState,
+        dirtyState: state.dirtyState,
+        markAsTouched: () => state.markAsTouched()
+    };
+}
+/** DI token holding the control's {@link RdxFormUiState}, read by {@link RdxFormUiStateHost}. */
+const RDX_FORM_UI_STATE = new InjectionToken('RdxFormUiState');
+/**
+ * Tri-state *displayed* validity (`true` valid / `false` invalid / `null` neutral) an enclosing `Field`
+ * exposes so a control can reflect the field's single, gated display-state instead of its own eager
+ * invalid. A control inside a `rdxFieldRoot` reads this for its `data-valid` / `data-invalid` /
+ * `aria-invalid`; standalone (token absent) it falls back to its own binary invalidity. This keeps the
+ * field root, the control, and any trigger/group part on one display-state (Base UI's `valid: boolean |
+ * null`). `Field` provides it (`useFactory` over the root's `validState`).
+ */
+const RDX_FIELD_VALIDITY = new InjectionToken('RdxFieldValidity');
+/**
+ * Tri-state display validity: when inside a `Field` the field's gated `validState` is the **single
+ * source** (the control reflects it, including its `validationMode` neutral state); standalone, the
+ * control's own binary invalidity.
+ *
+ * **Contract:** inside a `Field` a control's own `invalid` / `errors` inputs are **not** displayed — the
+ * Field owns displayed validity. Drive validity through the Field instead: bind `rdxSignalField`
+ * (Signal Forms), or set `[invalid]` on `rdxFieldRoot`. The control's own `invalid`/`errors` are for
+ * standalone use.
+ */
+function resolveDisplayValid(fieldValidity, ownInvalid) {
+    return fieldValidity ? fieldValidity() : ownInvalid() ? false : true;
+}
+/**
+ * Provide a control's {@link RdxFormUiState} on its host element so {@link RdxFormUiStateHost} can
+ * reflect it. Pair with `hostDirectives: [RdxFormUiStateHost]`:
+ *
+ * ```ts
+ * providers: [provideFormUiState(() => inject(MyControl).formUi)],
+ * hostDirectives: [RdxFormUiStateHost]
+ * ```
+ */
+function provideFormUiState(state) {
+    return { provide: RDX_FORM_UI_STATE, useFactory: state };
+}
+/**
+ * Host directive that reflects a control's {@link RdxFormUiState} as the standard validation
+ * `data-*`/`aria-invalid` attributes and marks the control touched on focus-out — the binding block
+ * that was otherwise copy-pasted into every form control's `host`.
+ *
+ * Compose it via `hostDirectives` on a control (or group root) whose host element is the one that
+ * should carry the attributes, and provide the state with {@link provideFormUiState}. It reads the
+ * state from DI, so the control does not need to expose `invalidState`/`touchedState`/`dirtyState`
+ * or a `markAsTouched` method just for the host bindings.
+ *
+ * Note: the `focusout` listener marks touched for controls whose touched-trigger is blur/focus-out
+ * (text inputs, groups). Controls that latch touched on interaction instead (e.g. checkbox) still do
+ * so themselves; the extra focus-out call only ever sets `touched` to `true`, so it is harmless.
+ *
+ * Not for compound controls that surface state on a child part via context (e.g. select reflects on
+ * its trigger) — those keep their own child-part bindings.
+ */
+class RdxFormUiStateHost {
+    constructor() {
+        /** @ignore The injected state the host bindings read. */
+        this.formUi = inject(RDX_FORM_UI_STATE);
+        this.fieldValidity = inject(RDX_FIELD_VALIDITY, { optional: true });
+        /** @ignore Tri-state display validity (enclosing Field's gated state, else own invalidity). */
+        this.displayValid = computed(() => resolveDisplayValid(this.fieldValidity, this.formUi.invalidState), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayValid" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFormUiStateHost, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxFormUiStateHost, isStandalone: true, host: { listeners: { "focusout": "formUi.markAsTouched()" }, properties: { "attr.aria-invalid": "displayValid() === false ? \"true\" : undefined", "attr.data-invalid": "displayValid() === false ? \"\" : undefined", "attr.data-valid": "displayValid() === true ? \"\" : undefined", "attr.data-touched": "formUi.touchedState() ? \"\" : undefined", "attr.data-dirty": "formUi.dirtyState() ? \"\" : undefined" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFormUiStateHost, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        // Tri-state via the enclosing Field when present (neutral → neither data-valid nor data-invalid),
+                        // else the control's own binary invalidity. `touched`/`dirty` always reflect the control.
+                        '[attr.aria-invalid]': 'displayValid() === false ? "true" : undefined',
+                        '[attr.data-invalid]': 'displayValid() === false ? "" : undefined',
+                        '[attr.data-valid]': 'displayValid() === true ? "" : undefined',
+                        '[attr.data-touched]': 'formUi.touchedState() ? "" : undefined',
+                        '[attr.data-dirty]': 'formUi.dirtyState() ? "" : undefined',
+                        '(focusout)': 'formUi.markAsTouched()'
+                    }
+                }]
+        }] });
+/**
+ * Abstract base that declares the optional `FormUiControl` state inputs
+ * (`invalid`/`errors`/`touched`/`dirty` + the `touch` output) once and builds the control's
+ * {@link RdxFormUiState} from them, so a control directive can inherit the whole surface with a
+ * single `extends` instead of re-declaring it.
+ *
+ * The declarations must live on a decorated **directive class** (Angular only discovers
+ * `input()`/`model()`/`output()` as field initializers, and Signal Forms binds form-written state
+ * onto the single directive carrying the `value`/`checked` model) — inheritance keeps them on that
+ * directive, which a host directive could not. The control still declares its own `value`/`checked`
+ * model (the type-parametric part) and, for `data-*` reflection, either composes
+ * {@link RdxFormUiStateHost} or binds the attributes itself.
+ *
+ * Dual controls override {@link formUiTouchTarget} to bridge their `ControlValueAccessor` into
+ * `markAsTouched`.
+ */
+class RdxFormUiControlBase {
+    constructor() {
+        /** Whether the control is invalid. A non-empty {@link errors} list also marks it invalid. */
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the control has been touched. A `model()` so Signal Forms can write it; set on blur/focus-out. */
+        this.touched = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /** Whether the value changed from its initial value. Merged with internal tracking. */
+        this.dirty = input(false, { ...(ngDevMode ? { debugName: "dirty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Validation errors for the control. A non-empty list marks it invalid. */
+        this.errors = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        /** Emits when the control is touched, notifying Signal Forms (stable Angular 22 contract). */
+        this.touch = output();
+        /** The shared form-UI state derived from the inputs above. Call `formUi.markDirty()` on value change. */
+        this.formUi = createFormUiState({
+            invalid: this.invalid,
+            errors: this.errors,
+            touched: this.touched,
+            touch: this.touch,
+            dirty: this.dirty,
+            cva: this.formUiTouchTarget()
+        });
+        /** The enclosing Field's tri-state display validity, if any. `protected` so a control whose own
+         * invalidity is richer than `formUi.invalidState` (e.g. date/time-field add a parse check) can build
+         * its own `displayValid` from it. */
+        this.fieldValidity = inject(RDX_FIELD_VALIDITY, { optional: true });
+        /**
+         * Tri-state *displayed* validity for controls that bind their own host attributes (radio, switch,
+         * number-field): the enclosing Field's gated state when inside a `rdxFieldRoot`, else this control's
+         * own binary invalidity (`formUi.invalidState`). Bind `data-valid`/`data-invalid`/`aria-invalid` to
+         * this so a neutral field shows neither. Controls whose `invalidState` is richer than
+         * `formUi.invalidState` override this with `resolveDisplayValid(this.fieldValidity, this.invalidState)`.
+         */
+        this.displayValid = computed(() => resolveDisplayValid(this.fieldValidity, this.formUi.invalidState), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayValid" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Override to bridge the control's `ControlValueAccessor` into `markAsTouched` (dual controls —
+     * return `injectControlValueAccessor()` or a `{ markAsTouched }` adapter). Default: no CVA
+     * (Signal-Forms-only controls such as select).
+     */
+    formUiTouchTarget() {
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFormUiControlBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxFormUiControlBase, isStandalone: true, inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxFormUiControlBase, decorators: [{
+            type: Directive
+        }], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
+
+/** The default validation-display mode when neither `rdxFieldRoot` nor `rdxFormRoot` sets one. */
+const RDX_DEFAULT_VALIDATION_MODE = 'onBlur';
+/**
+ * Whether a Field should reveal its (client-side) validity given the {@link RdxValidationMode} and the
+ * field's interaction state. `false` means stay neutral (neither `data-valid` nor `data-invalid`, error
+ * hidden); `true` means reflect the actual validity.
+ */
+function isValidationRevealed(mode, interaction) {
+    const { touched, dirty, submitAttempted } = interaction;
+    switch (mode) {
+        case 'always':
+            return true;
+        case 'onChange':
+            return dirty || submitAttempted;
+        case 'onBlur':
+            return touched || submitAttempted;
+        case 'onSubmit':
+            return submitAttempted;
+    }
+}
+
 function createCancelableChangeEventDetails(reason, event, trigger) {
     let canceled = false;
     let propagationAllowed = false;
@@ -4075,5 +4281,5 @@ var RdxPositionAlign;
  * Generated bundle index. Do not edit.
  */
 
-export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, DOCS_BASE_URL, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RDX_FLOATING_REGISTRATION, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_TREE, RDX_INTERNAL_BACKDROP_ATTR, RDX_SCROLL_LOCKED_ATTR, RdxControlValueAccessor, RdxFloatingNode, RdxFloatingNodeRegistration, RdxFloatingRegistrationContext, RdxFloatingRootContext, RdxFloatingTree, RdxIdGenerator, RdxLiveAnnouncer, RdxPositionAlign, RdxPositionSide, RdxTriggerRegistry, SHIFT, SPACE, SPACE_CODE, TAB, TIME_GRANULARITIES, a, areAllDaysBetweenValid, clamp, createCancelableChangeEventDetails, createContent, createContext, createFloatingEvents, createFloatingRootContext, createFormatter, createMonth, createMonths, docsUrl, elementSize, getActiveElement, getDaysBetween, getDaysInMonth, getDefaultDate, getDefaultTime, getLastFirstDayOfWeek, getMaxTransitionDuration, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getWeekNumber, handleAndDispatchCustomEvent, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectControlValueAccessor, injectDocument, injectFloatingRootContext, injectId, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isEqual, isItemEqualToValue, isNullish, isNumberString, isSegmentNavigationKey, isZonedDateTime, itemToStringLabel, itemToStringValue, j, k, n, normalizeDateStep, normalizeHour12, normalizeHourCycle, p, provideFloatingRegistration, provideFloatingRootContext, provideFloatingTree, provideToken, provideValueAccessor, rdxCheckLabelElement, rdxCheckTriggerElement, rdxDevError, rdxDevWarning, resetRdxDevWarnings, resizeEffect, resolveFloatingTree, roundToStepPrecision, segmentBuilders, setupInternalBackdrop, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useAnchoredScrollLock, useArrowNavigation, useDateField, useFilter, useGraceArea, useListHighlight, usePointerDrag, useScrollLock, useTransitionStatus, watch };
+export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, DOCS_BASE_URL, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RDX_DEFAULT_VALIDATION_MODE, RDX_FIELD_VALIDITY, RDX_FLOATING_REGISTRATION, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_TREE, RDX_FORM_UI_STATE, RDX_INTERNAL_BACKDROP_ATTR, RDX_SCROLL_LOCKED_ATTR, RdxControlValueAccessor, RdxFloatingNode, RdxFloatingNodeRegistration, RdxFloatingRegistrationContext, RdxFloatingRootContext, RdxFloatingTree, RdxFormUiControlBase, RdxFormUiStateHost, RdxIdGenerator, RdxLiveAnnouncer, RdxPositionAlign, RdxPositionSide, RdxTriggerRegistry, SHIFT, SPACE, SPACE_CODE, TAB, TIME_GRANULARITIES, a, areAllDaysBetweenValid, clamp, createCancelableChangeEventDetails, createContent, createContext, createFloatingEvents, createFloatingRootContext, createFormUiState, createFormatter, createMonth, createMonths, docsUrl, elementSize, formUiStateContext, getActiveElement, getDaysBetween, getDaysInMonth, getDefaultDate, getDefaultTime, getLastFirstDayOfWeek, getMaxTransitionDuration, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getWeekNumber, handleAndDispatchCustomEvent, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectControlValueAccessor, injectDocument, injectFloatingRootContext, injectId, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isEqual, isItemEqualToValue, isNullish, isNumberString, isSegmentNavigationKey, isValidationRevealed, isZonedDateTime, itemToStringLabel, itemToStringValue, j, k, n, normalizeDateStep, normalizeHour12, normalizeHourCycle, p, provideFloatingRegistration, provideFloatingRootContext, provideFloatingTree, provideFormUiState, provideToken, provideValueAccessor, rdxCheckLabelElement, rdxCheckTriggerElement, rdxDevError, rdxDevWarning, resetRdxDevWarnings, resizeEffect, resolveDisplayValid, resolveFloatingTree, roundToStepPrecision, segmentBuilders, setupInternalBackdrop, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useAnchoredScrollLock, useArrowNavigation, useDateField, useFilter, useGraceArea, useListHighlight, usePointerDrag, useScrollLock, useTransitionStatus, watch };
 //# sourceMappingURL=radix-ng-primitives-core.mjs.map