@radix-ng/primitives 1.0.7 → 1.0.8

package/fesm2022/radix-ng-primitives-signal-forms.mjs

@@ -0,0 +1,184 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, Directive, input, NgModule } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { injectFieldRootContext } from '@radix-ng/primitives/field';
+import { injectFormRootContext } from '@radix-ng/primitives/form';
+
+/**
+ * Bridges an Angular **Signal Forms** field into an enclosing `rdxFieldRoot` — with **no duplicate
+ * binding**. Place it on the control that already carries `[formField]`; it reads the bound field's
+ * state from that directive, so the field expression is written exactly once:
+ *
+ * ```html
+ * <div rdxFieldRoot>
+ *   <label rdxFieldLabel>Email</label>
+ *   <input rdxInput [formField]="loginForm.email" rdxSignalField />
+ *   <p rdxFieldError>Email is required.</p>
+ * </div>
+ * ```
+ *
+ * It owns no model and runs no validation — Signal Forms remains the source of truth. It only registers
+ * an {@link RdxFieldState} provider on the ancestor Field context so the field's `invalid` / `disabled` /
+ * `required` / `dirty` / `touched` data-attributes and the error *content* (`rdxFieldError.messages()`)
+ * read authoritative Signal Forms state. `filled` / `focused` stay on Field's DOM heuristic (partial
+ * ownership — the seam supports it).
+ *
+ * It reports the **actual** Signal Forms state only; the `Field` decides *when* to display it from its
+ * `validationMode` (default `'onBlur'` — neutral until the field is touched or the form submitted). So an
+ * empty required field is neutral on load with no manual `[invalid]`/`[touched]` wiring, and a pristine
+ * submit reveals the errors (the `Form` records the submit attempt before checking validity and blocks).
+ *
+ * See ADR 0018.
+ *
+ * @group Components
+ */
+class RdxSignalField {
+    constructor() {
+        /** The co-located `[formField]` directive — the single source of the bound field's state. */
+        this.formField = inject(FormField);
+        this.fieldContext = injectFieldRootContext();
+        // The accessors are evaluated lazily by Field's `*State` computeds during change detection (after
+        // the `[formField]` binding resolves), so reading `state()` inside these closures is safe. The
+        // adapter reports authoritative *actual* state; the Field gates the *display* by its validationMode.
+        const state = {
+            invalid: () => this.state().invalid(),
+            disabled: () => this.state().disabled(),
+            required: () => this.state().required(),
+            dirty: () => this.state().dirty(),
+            touched: () => this.state().touched(),
+            errors: () => this.state()
+                .errors()
+                .map((error) => ({ kind: error.kind, message: error.message }))
+        };
+        const previous = this.fieldContext.setStateProvider(state);
+        // Identity-checked teardown: only roll back if our provider is still active, so a newer adapter
+        // mounted during a view swap (create-before-destroy) is not clobbered by this destroy.
+        inject(DestroyRef).onDestroy(() => this.fieldContext.clearStateProvider(state, previous));
+    }
+    /** Current Signal Forms field state, read from the co-located `[formField]` directive. */
+    state() {
+        return this.formField.state();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalField, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxSignalField, isStandalone: true, selector: "[formField][rdxSignalField]", exportAs: ["rdxSignalField"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[formField][rdxSignalField]',
+                    exportAs: 'rdxSignalField'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Bridges an Angular **Signal Forms** form into an enclosing `form[rdxFormRoot]`.
+ *
+ * ```html
+ * <form rdxFormRoot [rdxSignalForm]="loginForm">
+ *   <!-- fields bound with [formField] (+ rdxSignalField) -->
+ * </form>
+ * ```
+ *
+ * Registers an {@link RdxFormState} provider so the Form's aggregate `data-invalid` / `data-dirty` /
+ * `data-touched` / `data-submitting` attributes and the submit guard read authoritative Signal Forms
+ * state. This adapter owns only client-side state and `name`-routing; server errors stay a separate
+ * eager channel applied through `rdxFormRoot[errors]`, and Signal Forms' own `submit()` owns the
+ * submit lifecycle.
+ *
+ * `errorsFor(name)` routes a field's errors to a `rdxFieldRoot` by its `name`, walking the `FieldTree`
+ * so dotted paths into nested object/array fields resolve too (`address.street`, `items.0.name`). A
+ * field can surface messages from the form alone — no per-field `rdxSignalField` needed for errors.
+ * These are the **two modes** (per-field adapter vs form-level name routing) — prefer one per field; if
+ * a field carries both, `rdxFieldError.messages()` deduplicates by text so the shared message is not
+ * shown twice.
+ *
+ * See ADR 0018.
+ *
+ * @group Components
+ */
+class RdxSignalForm {
+    constructor() {
+        /** The Signal Forms root field (from `form(...)`) whose aggregate state drives the enclosing Form. */
+        this.form = input.required({ ...(ngDevMode ? { debugName: "form" } : /* istanbul ignore next */ {}), alias: 'rdxSignalForm' });
+        this.formContext = injectFormRootContext();
+        const state = {
+            invalid: () => this.state().invalid(),
+            dirty: () => this.state().dirty(),
+            touched: () => this.state().touched(),
+            submitting: () => this.state().submitting(),
+            errorsFor: (name) => this.errorsFor(name),
+            // Per-name interaction state so a name-routed field (bare `[formField]`, no `rdxSignalField`)
+            // can reveal its error on blur/change under `validationMode="onBlur"`/`"onChange"`.
+            touchedFor: (name) => this.fieldState(name)?.touched() ?? false,
+            dirtyFor: (name) => this.fieldState(name)?.dirty() ?? false
+        };
+        const previous = this.formContext.setStateProvider(state);
+        // Identity-checked teardown: only roll back if our provider is still active, so a newer adapter
+        // mounted during a view swap (create-before-destroy) is not clobbered by this destroy.
+        inject(DestroyRef).onDestroy(() => this.formContext.clearStateProvider(state, previous));
+    }
+    /**
+     * Messages for the field at the dotted `name` path (`message ?? kind` per error). Walks the
+     * `FieldTree` so nested object/array fields resolve too — e.g. `address.street`, `items.0.name`.
+     */
+    errorsFor(name) {
+        return (this.fieldState(name)
+            ?.errors()
+            .map((error) => error.message ?? error.kind) ?? []);
+    }
+    /**
+     * The Signal Forms field *state* at the dotted `name` path, or `null` if it doesn't resolve. Walks the
+     * `FieldTree` so nested object/array fields work (`address.street`, `items.0.name`).
+     */
+    fieldState(name) {
+        let node = this.form();
+        for (const segment of name.split('.')) {
+            if (node == null || (typeof node !== 'object' && typeof node !== 'function')) {
+                return null;
+            }
+            // Only walk into own properties: a `FieldTree` exposes its subfields as own keys, so a
+            // segment that is not one (`constructor`, `__proto__`, `toString`, …) is not a real field.
+            // Reading it would resolve to an inherited member — and a function one would then be called
+            // below — so reject it instead.
+            if (!Object.hasOwn(node, segment)) {
+                return null;
+            }
+            node = node[segment];
+        }
+        return typeof node === 'function' ? node() : null;
+    }
+    /** The current Signal Forms root field state (a `FieldTree` is callable). */
+    state() {
+        return this.form()();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalForm, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxSignalForm, isStandalone: true, selector: "form[rdxFormRoot][rdxSignalForm]", inputs: { form: { classPropertyName: "form", publicName: "rdxSignalForm", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["rdxSignalForm"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalForm, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form[rdxFormRoot][rdxSignalForm]',
+                    exportAs: 'rdxSignalForm'
+                }]
+        }], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "rdxSignalForm", required: true }] }] } });
+
+const _importsSignalForms = [RdxSignalField, RdxSignalForm];
+class RdxSignalFormsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalFormsModule, imports: [RdxSignalField, RdxSignalForm], exports: [RdxSignalField, RdxSignalForm] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalFormsModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSignalFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [..._importsSignalForms],
+                    exports: [..._importsSignalForms]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxSignalField, RdxSignalForm, RdxSignalFormsModule, _importsSignalForms };
+//# sourceMappingURL=radix-ng-primitives-signal-forms.mjs.map

package/fesm2022/radix-ng-primitives-signal-forms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-signal-forms.mjs","sources":["../../../packages/primitives/signal-forms/src/signal-field.ts","../../../packages/primitives/signal-forms/src/signal-form.ts","../../../packages/primitives/signal-forms/index.ts","../../../packages/primitives/signal-forms/radix-ng-primitives-signal-forms.ts"],"sourcesContent":["import { DestroyRef, Directive, inject } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { injectFieldRootContext, RdxFieldState } from '@radix-ng/primitives/field';\n\n/**\n * Bridges an Angular **Signal Forms** field into an enclosing `rdxFieldRoot` — with **no duplicate\n * binding**. Place it on the control that already carries `[formField]`; it reads the bound field's\n * state from that directive, so the field expression is written exactly once:\n *\n * ```html\n * <div rdxFieldRoot>\n *   <label rdxFieldLabel>Email</label>\n *   <input rdxInput [formField]=\"loginForm.email\" rdxSignalField />\n *   <p rdxFieldError>Email is required.</p>\n * </div>\n * ```\n *\n * It owns no model and runs no validation — Signal Forms remains the source of truth. It only registers\n * an {@link RdxFieldState} provider on the ancestor Field context so the field's `invalid` / `disabled` /\n * `required` / `dirty` / `touched` data-attributes and the error *content* (`rdxFieldError.messages()`)\n * read authoritative Signal Forms state. `filled` / `focused` stay on Field's DOM heuristic (partial\n * ownership — the seam supports it).\n *\n * It reports the **actual** Signal Forms state only; the `Field` decides *when* to display it from its\n * `validationMode` (default `'onBlur'` — neutral until the field is touched or the form submitted). So an\n * empty required field is neutral on load with no manual `[invalid]`/`[touched]` wiring, and a pristine\n * submit reveals the errors (the `Form` records the submit attempt before checking validity and blocks).\n *\n * See ADR 0018.\n *\n * @group Components\n */\n@Directive({\n    selector: '[formField][rdxSignalField]',\n    exportAs: 'rdxSignalField'\n})\nexport class RdxSignalField {\n    /** The co-located `[formField]` directive — the single source of the bound field's state. */\n    private readonly formField = inject(FormField);\n    private readonly fieldContext = injectFieldRootContext();\n\n    constructor() {\n        // The accessors are evaluated lazily by Field's `*State` computeds during change detection (after\n        // the `[formField]` binding resolves), so reading `state()` inside these closures is safe. The\n        // adapter reports authoritative *actual* state; the Field gates the *display* by its validationMode.\n        const state: RdxFieldState = {\n            invalid: () => this.state().invalid(),\n            disabled: () => this.state().disabled(),\n            required: () => this.state().required(),\n            dirty: () => this.state().dirty(),\n            touched: () => this.state().touched(),\n            errors: () =>\n                this.state()\n                    .errors()\n                    .map((error) => ({ kind: error.kind, message: error.message }))\n        };\n\n        const previous = this.fieldContext.setStateProvider(state);\n        // Identity-checked teardown: only roll back if our provider is still active, so a newer adapter\n        // mounted during a view swap (create-before-destroy) is not clobbered by this destroy.\n        inject(DestroyRef).onDestroy(() => this.fieldContext.clearStateProvider(state, previous));\n    }\n\n    /** Current Signal Forms field state, read from the co-located `[formField]` directive. */\n    private state() {\n        return this.formField.state();\n    }\n}\n","import { DestroyRef, Directive, inject, input } from '@angular/core';\nimport type { FieldTree } from '@angular/forms/signals';\nimport { injectFormRootContext, RdxFormState } from '@radix-ng/primitives/form';\n\n/** A Signal Forms subfield read structurally — callable to its state (`errors()` / `touched()` / `dirty()`). */\ntype NamedField = () => {\n    errors: () => readonly { kind: string; message?: string }[];\n    touched: () => boolean;\n    dirty: () => boolean;\n};\n\n/**\n * Bridges an Angular **Signal Forms** form into an enclosing `form[rdxFormRoot]`.\n *\n * ```html\n * <form rdxFormRoot [rdxSignalForm]=\"loginForm\">\n *   <!-- fields bound with [formField] (+ rdxSignalField) -->\n * </form>\n * ```\n *\n * Registers an {@link RdxFormState} provider so the Form's aggregate `data-invalid` / `data-dirty` /\n * `data-touched` / `data-submitting` attributes and the submit guard read authoritative Signal Forms\n * state. This adapter owns only client-side state and `name`-routing; server errors stay a separate\n * eager channel applied through `rdxFormRoot[errors]`, and Signal Forms' own `submit()` owns the\n * submit lifecycle.\n *\n * `errorsFor(name)` routes a field's errors to a `rdxFieldRoot` by its `name`, walking the `FieldTree`\n * so dotted paths into nested object/array fields resolve too (`address.street`, `items.0.name`). A\n * field can surface messages from the form alone — no per-field `rdxSignalField` needed for errors.\n * These are the **two modes** (per-field adapter vs form-level name routing) — prefer one per field; if\n * a field carries both, `rdxFieldError.messages()` deduplicates by text so the shared message is not\n * shown twice.\n *\n * See ADR 0018.\n *\n * @group Components\n */\n@Directive({\n    selector: 'form[rdxFormRoot][rdxSignalForm]',\n    exportAs: 'rdxSignalForm'\n})\nexport class RdxSignalForm {\n    /** The Signal Forms root field (from `form(...)`) whose aggregate state drives the enclosing Form. */\n    readonly form = input.required<FieldTree<unknown>>({ alias: 'rdxSignalForm' });\n\n    private readonly formContext = injectFormRootContext();\n\n    constructor() {\n        const state: RdxFormState = {\n            invalid: () => this.state().invalid(),\n            dirty: () => this.state().dirty(),\n            touched: () => this.state().touched(),\n            submitting: () => this.state().submitting(),\n            errorsFor: (name) => this.errorsFor(name),\n            // Per-name interaction state so a name-routed field (bare `[formField]`, no `rdxSignalField`)\n            // can reveal its error on blur/change under `validationMode=\"onBlur\"`/`\"onChange\"`.\n            touchedFor: (name) => this.fieldState(name)?.touched() ?? false,\n            dirtyFor: (name) => this.fieldState(name)?.dirty() ?? false\n        };\n\n        const previous = this.formContext.setStateProvider(state);\n        // Identity-checked teardown: only roll back if our provider is still active, so a newer adapter\n        // mounted during a view swap (create-before-destroy) is not clobbered by this destroy.\n        inject(DestroyRef).onDestroy(() => this.formContext.clearStateProvider(state, previous));\n    }\n\n    /**\n     * Messages for the field at the dotted `name` path (`message ?? kind` per error). Walks the\n     * `FieldTree` so nested object/array fields resolve too — e.g. `address.street`, `items.0.name`.\n     */\n    private errorsFor(name: string): string[] {\n        return (\n            this.fieldState(name)\n                ?.errors()\n                .map((error) => error.message ?? error.kind) ?? []\n        );\n    }\n\n    /**\n     * The Signal Forms field *state* at the dotted `name` path, or `null` if it doesn't resolve. Walks the\n     * `FieldTree` so nested object/array fields work (`address.street`, `items.0.name`).\n     */\n    private fieldState(name: string): ReturnType<NamedField> | null {\n        let node: unknown = this.form();\n        for (const segment of name.split('.')) {\n            if (node == null || (typeof node !== 'object' && typeof node !== 'function')) {\n                return null;\n            }\n            // Only walk into own properties: a `FieldTree` exposes its subfields as own keys, so a\n            // segment that is not one (`constructor`, `__proto__`, `toString`, …) is not a real field.\n            // Reading it would resolve to an inherited member — and a function one would then be called\n            // below — so reject it instead.\n            if (!Object.hasOwn(node, segment)) {\n                return null;\n            }\n            node = (node as Record<string, unknown>)[segment];\n        }\n        return typeof node === 'function' ? (node as NamedField)() : null;\n    }\n\n    /** The current Signal Forms root field state (a `FieldTree` is callable). */\n    private state() {\n        return this.form()();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { RdxSignalField } from './src/signal-field';\nimport { RdxSignalForm } from './src/signal-form';\n\nexport * from './src/signal-field';\nexport * from './src/signal-form';\n\nexport const _importsSignalForms = [RdxSignalField, RdxSignalForm];\n\n@NgModule({\n    imports: [..._importsSignalForms],\n    exports: [..._importsSignalForms]\n})\nexport class RdxSignalFormsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, DestroyRef, Directive, computed, input, numberAttribute, booleanAttribute, model, output, signal, effect, afterNextRender, afterRenderEffect, untracked, NgModule } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import * as i2 from '@radix-ng/primitives/core';
-import { createContext, clamp, injectControlValueAccessor, injectDocument, injectId, createCancelableChangeEventDetails, RdxControlValueAccessor } from '@radix-ng/primitives/core';
+import { createContext, clamp, RdxFormUiControlBase, injectControlValueAccessor, injectDocument, injectId, createCancelableChangeEventDetails, provideFormUiState, RdxFormUiStateHost, RdxControlValueAccessor } from '@radix-ng/primitives/core';
 export { clamp } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/composite';
 import { RdxCompositeList, RdxCompositeListItem } from '@radix-ng/primitives/composite';
@@ -718,8 +718,12 @@ function cloneChangeEventWithTarget(event, value, name) {
  *
  * @see https://base-ui.com/react/components/slider
  */
-class RdxSliderRoot {
+// NOTE: does not `implements RdxFormValueControl` — the slider value is a `number | number[]` union,
+// while `min`/`max` are scalar `number`s; the shim ties `min`/`max` to `NonNullable<TValue>`, which the
+// union can't satisfy. The runtime contract (value model + the inherited `FormUiControl` state) holds.
+class RdxSliderRoot extends RdxFormUiControlBase {
     constructor() {
+        super(...arguments);
         /** @ignore */
         this.cva = injectControlValueAccessor();
         this.document = injectDocument();
@@ -935,6 +939,7 @@ class RdxSliderRoot {
         this.lastChangeEvent = eventDetails.event;
         this.value.set(next);
         this.cva.setValue(next);
+        this.formUi.markDirty();
         return true;
     }
     /** @ignore Keyboard / native input path: clamps to neighbours, commits immediately. */
@@ -948,7 +953,7 @@ class RdxSliderRoot {
         }
         const arr = Array.isArray(result) ? result : [result];
         const applied = this.setValue(arr, reason, event, index);
-        this.cva.markAsTouched();
+        this.markAsTouched();
         if (applied) {
             this.commitValue(event, reason);
         }
@@ -966,9 +971,13 @@ class RdxSliderRoot {
             }
         });
     }
-    /** @ignore */
+    /** @ignore Bridge the CVA into `markAsTouched` (dual). */
+    formUiTouchTarget() {
+        return injectControlValueAccessor();
+    }
+    /** @ignore Mark touched: CVA (Reactive/template) + `touched` model + `touch` (Signal Forms). */
     markAsTouched() {
-        this.cva.markAsTouched();
+        this.formUi.markAsTouched();
     }
     /** @ignore */
     setDragging(dragging) {
@@ -984,17 +993,24 @@ class RdxSliderRoot {
     getOwnerWindow() {
         return this.document.defaultView ?? undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSliderRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxSliderRoot, isStandalone: true, selector: "div[rdxSliderRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenValues: { classPropertyName: "minStepsBetweenValues", publicName: "minStepsBetweenValues", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, thumbCollisionBehavior: { classPropertyName: "thumbCollisionBehavior", publicName: "thumbCollisionBehavior", isSignal: true, isRequired: false, transformFunction: null }, thumbAlignment: { classPropertyName: "thumbAlignment", publicName: "thumbAlignment", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onValueCommitted: "onValueCommitted" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.dir": "dir()", "attr.data-orientation": "orientation()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-dragging": "dragging() ? \"\" : undefined" } }, providers: [provideSliderRootContext(() => inject(RdxSliderRoot))], exportAs: ["rdxSliderRoot"], hostDirectives: [{ directive: i1.RdxCompositeList }, { directive: i2.RdxControlValueAccessor, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSliderRoot, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxSliderRoot, isStandalone: true, selector: "div[rdxSliderRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenValues: { classPropertyName: "minStepsBetweenValues", publicName: "minStepsBetweenValues", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, thumbCollisionBehavior: { classPropertyName: "thumbCollisionBehavior", publicName: "thumbCollisionBehavior", isSignal: true, isRequired: false, transformFunction: null }, thumbAlignment: { classPropertyName: "thumbAlignment", publicName: "thumbAlignment", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onValueCommitted: "onValueCommitted" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.dir": "dir()", "attr.data-orientation": "orientation()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-dragging": "dragging() ? \"\" : undefined" } }, providers: [
+            provideSliderRootContext(() => inject(RdxSliderRoot)),
+            provideFormUiState(() => inject(RdxSliderRoot).formUi)
+        ], exportAs: ["rdxSliderRoot"], usesInheritance: true, hostDirectives: [{ directive: i1.RdxCompositeList }, { directive: i2.RdxFormUiStateHost }, { directive: i2.RdxControlValueAccessor, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxSliderRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[rdxSliderRoot]',
                     exportAs: 'rdxSliderRoot',
-                    providers: [provideSliderRootContext(() => inject(RdxSliderRoot))],
+                    providers: [
+                        provideSliderRootContext(() => inject(RdxSliderRoot)),
+                        provideFormUiState(() => inject(RdxSliderRoot).formUi)
+                    ],
                     hostDirectives: [
                         RdxCompositeList,
+                        RdxFormUiStateHost,
                         {
                             directive: RdxControlValueAccessor,
                             inputs: ['value: value', 'disabled']