ng-primitives 0.91.2 → 0.93.0

package/fesm2022/ng-primitives-form-field.mjs

@@ -1,75 +1,253 @@
 import * as i0 from '@angular/core';
-import { input, effect, Directive, computed, booleanAttribute, afterRenderEffect, signal, contentChild, inject, Injector, untracked, ElementRef, HostListener } from '@angular/core';
-import { uniqueId, onBooleanChange, controlStatus, onChange } from 'ng-primitives/utils';
-import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { inject, Injector, signal, untracked, effect, input, Directive, computed, booleanAttribute, contentChild } from '@angular/core';
+import { onChange, uniqueId, onBooleanChange, controlStatus } from 'ng-primitives/utils';
 import { injectElementRef, explicitEffect } from 'ng-primitives/internal';
+import { createPrimitive, dataBinding, onDestroy, attrBinding, listener } from 'ng-primitives/state';
 import { NgControl } from '@angular/forms';
 
-/**
- * The state token  for the FormField primitive.
- */
-const NgpFormFieldStateToken = createStateToken('FormField');
-/**
- * Provides the FormField state.
- */
-const provideFormFieldState = createStateProvider(NgpFormFieldStateToken);
-/**
- * Injects the FormField state.
- */
-const injectFormFieldState = createStateInjector(NgpFormFieldStateToken);
-/**
- * The FormField state registration function.
- */
-const formFieldState = createState(NgpFormFieldStateToken);
+const [NgpFormFieldStateToken, ngpFormField, injectFormFieldState, provideFormFieldState] = createPrimitive('NgpFormField', ({ ngControl }) => {
+    const element = injectElementRef();
+    const injector = inject(Injector);
+    // Store the form labels
+    const labels = signal([], ...(ngDevMode ? [{ debugName: "labels" }] : []));
+    // Store the form descriptions
+    const descriptions = signal([], ...(ngDevMode ? [{ debugName: "descriptions" }] : []));
+    // Store the id of the associated form control
+    const formControl = signal(null, ...(ngDevMode ? [{ debugName: "formControl" }] : []));
+    // Store the validation error messages
+    const errors = signal([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    // Form control state signals
+    const pristine = signal(null, ...(ngDevMode ? [{ debugName: "pristine" }] : []));
+    const touched = signal(null, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    const dirty = signal(null, ...(ngDevMode ? [{ debugName: "dirty" }] : []));
+    const valid = signal(null, ...(ngDevMode ? [{ debugName: "valid" }] : []));
+    const invalid = signal(null, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    const pending = signal(null, ...(ngDevMode ? [{ debugName: "pending" }] : []));
+    const disabled = signal(null, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    // Store the current status subscription
+    let subscription;
+    // Host bindings
+    dataBinding(element, 'data-invalid', invalid);
+    dataBinding(element, 'data-valid', valid);
+    dataBinding(element, 'data-touched', touched);
+    dataBinding(element, 'data-pristine', pristine);
+    dataBinding(element, 'data-dirty', dirty);
+    dataBinding(element, 'data-pending', pending);
+    dataBinding(element, 'data-disabled', disabled);
+    function updateStatus() {
+        const control = ngControl();
+        if (!control) {
+            return;
+        }
+        // Wrap in try-catch to handle signal-forms interop controls where
+        // the `field` input may not be available yet (throws NG0950).
+        // Reading the signal still establishes a dependency, so the effect
+        // will re-run when the input becomes available.
+        try {
+            const controlPristine = control.pristine;
+            const controlTouched = control.touched;
+            const controlDirty = control.dirty;
+            const controlValid = control.valid;
+            const controlInvalid = control.invalid;
+            const controlPending = control.pending;
+            const controlDisabled = control.disabled;
+            const controlErrors = control.errors;
+            untracked(() => {
+                pristine.set(controlPristine);
+                touched.set(controlTouched);
+                dirty.set(controlDirty);
+                valid.set(controlValid);
+                invalid.set(controlInvalid);
+                pending.set(controlPending);
+                disabled.set(controlDisabled);
+                errors.set(controlErrors ? Object.keys(controlErrors) : []);
+            });
+        }
+        catch {
+            // NG0950: Required input not available yet. The effect will re-run
+            // when the signal input becomes available.
+        }
+    }
+    function setupSubscriptions(control) {
+        // Unsubscribe from the previous subscriptions.
+        subscription?.unsubscribe();
+        if (!control) {
+            return;
+        }
+        // For signal-forms interop controls, use an effect to reactively track status.
+        // For classic controls, also use an effect but additionally subscribe to events.
+        effect(() => {
+            updateStatus();
+        }, { injector });
+        // Classic controls also have an events observable we can subscribe to.
+        const underlyingControl = control?.control;
+        if (underlyingControl?.events) {
+            subscription = underlyingControl.events.subscribe(() => updateStatus());
+        }
+    }
+    // Setup subscriptions when ngControl changes
+    onChange(ngControl, setupSubscriptions);
+    // Cleanup subscription on destroy
+    onDestroy(() => subscription?.unsubscribe());
+    // Methods
+    function setFormControl(id) {
+        formControl.set(id);
+    }
+    function addLabel(label) {
+        if (labels().includes(label)) {
+            return;
+        }
+        labels.update(currentLabels => [...currentLabels, label]);
+    }
+    function addDescription(description) {
+        if (descriptions().includes(description)) {
+            return;
+        }
+        descriptions.update(currentDescriptions => [...currentDescriptions, description]);
+    }
+    function removeFormControl() {
+        formControl.set(null);
+    }
+    function removeLabel(label) {
+        labels.update(currentLabels => currentLabels.filter(l => l !== label));
+    }
+    function removeDescription(description) {
+        descriptions.update(currentDescriptions => currentDescriptions.filter(d => d !== description));
+    }
+    return {
+        labels,
+        descriptions,
+        formControl,
+        errors,
+        pristine,
+        touched,
+        dirty,
+        valid,
+        invalid,
+        pending,
+        disabled,
+        setFormControl,
+        addLabel,
+        addDescription,
+        removeFormControl,
+        removeLabel,
+        removeDescription,
+    };
+});
+
+const [NgpDescriptionStateToken, ngpDescription, injectDescriptionState, provideDescriptionState,] = createPrimitive('NgpDescription', ({ id = signal(uniqueId('ngp-description')) }) => {
+    const element = injectElementRef();
+    const formField = injectFormFieldState({ optional: true });
+    // Host bindings
+    attrBinding(element, 'id', id);
+    dataBinding(element, 'data-invalid', () => (formField()?.invalid() ? '' : null));
+    dataBinding(element, 'data-valid', () => (formField()?.valid() ? '' : null));
+    dataBinding(element, 'data-touched', () => (formField()?.touched() ? '' : null));
+    dataBinding(element, 'data-pristine', () => (formField()?.pristine() ? '' : null));
+    dataBinding(element, 'data-dirty', () => (formField()?.dirty() ? '' : null));
+    dataBinding(element, 'data-pending', () => (formField()?.pending() ? '' : null));
+    dataBinding(element, 'data-disabled', () => (formField()?.disabled() ? '' : null));
+    // Register with form field and cleanup on destroy
+    formField()?.addDescription(id());
+    onDestroy(() => formField()?.removeDescription(id()));
+    onChange(id, (newId, oldId) => {
+        if (oldId) {
+            formField()?.removeDescription(oldId);
+        }
+        formField()?.addDescription(newId);
+    });
+    return { id };
+});
 
 /**
  * The `NgpDescription` directive is used to mark a description element within a form field. There may be multiple descriptions associated with a form control.
  */
 class NgpDescription {
+    /**
+     * The description state.
+     */
     constructor() {
         /**
          * The id of the description. If not provided, a unique id will be generated.
          */
         this.id = input(uniqueId('ngp-description'), ...(ngDevMode ? [{ debugName: "id" }] : []));
-        /**
-         * Access the form field that the description is associated with.
-         */
-        this.formField = injectFormFieldState({ optional: true });
-        effect(onCleanup => {
-            this.formField()?.addDescription(this.id());
-            onCleanup(() => this.formField()?.removeDescription(this.id()));
-        });
+        ngpDescription({ id: this.id });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpDescription, isStandalone: true, selector: "[ngpDescription]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "attr.data-invalid": "formField()?.invalid() ? \"\" : null", "attr.data-valid": "formField()?.valid() ? \"\" : null", "attr.data-touched": "formField()?.touched() ? \"\" : null", "attr.data-pristine": "formField()?.pristine() ? \"\" : null", "attr.data-dirty": "formField()?.dirty() ? \"\" : null", "attr.data-pending": "formField()?.pending() ? \"\" : null", "attr.data-disabled": "formField()?.disabled() ? \"\" : null" } }, exportAs: ["ngpDescription"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpDescription, isStandalone: true, selector: "[ngpDescription]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDescriptionState()], exportAs: ["ngpDescription"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpDescription]',
                     exportAs: 'ngpDescription',
-                    host: {
-                        '[attr.id]': 'id()',
-                        '[attr.data-invalid]': 'formField()?.invalid() ? "" : null',
-                        '[attr.data-valid]': 'formField()?.valid() ? "" : null',
-                        '[attr.data-touched]': 'formField()?.touched() ? "" : null',
-                        '[attr.data-pristine]': 'formField()?.pristine() ? "" : null',
-                        '[attr.data-dirty]': 'formField()?.dirty() ? "" : null',
-                        '[attr.data-pending]': 'formField()?.pending() ? "" : null',
-                        '[attr.data-disabled]': 'formField()?.disabled() ? "" : null',
-                    },
+                    providers: [provideDescriptionState()],
                 }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
+const [NgpErrorStateToken, ngpError, injectErrorState, provideErrorState] = createPrimitive('NgpError', ({ id, validator = signal(null) }) => {
+    const element = injectElementRef();
+    const formField = injectFormFieldState({ optional: true });
+    // Determine if there is an error message
+    const hasError = computed(() => {
+        const errors = formField()?.errors() ?? [];
+        const validatorValue = validator();
+        return validatorValue ? errors?.includes(validatorValue) : errors?.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    // Determine whether the validator associated with this error is failing
+    const state = computed(() => (hasError() ? 'fail' : 'pass'), ...(ngDevMode ? [{ debugName: "state" }] : []));
+    // Host bindings
+    attrBinding(element, 'id', id);
+    dataBinding(element, 'data-invalid', () => (formField()?.invalid() ? '' : null));
+    dataBinding(element, 'data-valid', () => (formField()?.valid() ? '' : null));
+    dataBinding(element, 'data-touched', () => (formField()?.touched() ? '' : null));
+    dataBinding(element, 'data-pristine', () => (formField()?.pristine() ? '' : null));
+    dataBinding(element, 'data-dirty', () => (formField()?.dirty() ? '' : null));
+    dataBinding(element, 'data-pending', () => (formField()?.pending() ? '' : null));
+    dataBinding(element, 'data-disabled', () => (formField()?.disabled() ? '' : null));
+    dataBinding(element, 'data-validator', state);
+    let currentId = id();
+    // Register/unregister with form field based on error state
+    function registerError() {
+        formField()?.addDescription(currentId);
+    }
+    function unregisterError() {
+        formField()?.removeDescription(currentId);
+    }
+    // Update error registration when hasError changes
+    onBooleanChange(hasError, registerError, unregisterError);
+    function updateIdRegistration(newId, oldId) {
+        if (oldId && hasError()) {
+            formField()?.removeDescription(oldId);
+        }
+        currentId = newId;
+        if (hasError()) {
+            formField()?.addDescription(newId);
+        }
+    }
+    // Watch for id changes to update registration
+    explicitEffect([id], () => updateIdRegistration(id(), currentId));
+    // Cleanup on destroy
+    onDestroy(() => {
+        if (hasError()) {
+            formField()?.removeDescription(currentId);
+        }
+    });
+    return {
+        id,
+        hasError,
+        state,
+    };
+});
+
 /**
  * The `NgpError` directive is used to mark an error message element within a form field. There may be multiple error messages associated with a form control.
  */
 class NgpError {
+    /**
+     * The error state.
+     */
     constructor() {
-        /**
-         * Access the form field that the description is associated with.
-         */
-        this.formField = injectFormFieldState({ optional: true });
         /**
          * The id of the error message. If not provided, a unique id will be generated.
          */
@@ -80,67 +258,55 @@ class NgpError {
         this.validator = input(null, ...(ngDevMode ? [{ debugName: "validator", alias: 'ngpErrorValidator' }] : [{
                 alias: 'ngpErrorValidator',
             }]));
-        /**
-         * Determine if there is an error message.
-         */
-        this.hasError = computed(() => {
-            const errors = this.formField()?.errors() ?? [];
-            const validator = this.validator();
-            return validator ? errors?.includes(validator) : errors?.length > 0;
-        }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
-        /**
-         * Determine whether the validator associated with this error is failing.
-         */
-        this.state = computed(() => (this.hasError() ? 'fail' : 'pass'), ...(ngDevMode ? [{ debugName: "state" }] : []));
-        // add or remove the error message when the error state changes
-        onBooleanChange(this.hasError, () => this.formField()?.addDescription(this.id()), () => this.formField()?.removeDescription(this.id()));
-    }
-    ngOnChanges(changes) {
-        if ('id' in changes) {
-            this.formField()?.removeDescription(changes['id'].previousValue);
-        }
-    }
-    ngOnDestroy() {
-        this.formField()?.removeDescription(this.id());
+        ngpError({ id: this.id, validator: this.validator });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpError, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpError, isStandalone: true, selector: "[ngpError]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "ngpErrorValidator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "attr.data-invalid": "formField()?.invalid() ? \"\" : null", "attr.data-valid": "formField()?.valid() ? \"\" : null", "attr.data-touched": "formField()?.touched() ? \"\" : null", "attr.data-pristine": "formField()?.pristine() ? \"\" : null", "attr.data-dirty": "formField()?.dirty() ? \"\" : null", "attr.data-pending": "formField()?.pending() ? \"\" : null", "attr.data-disabled": "formField()?.disabled() ? \"\" : null", "attr.data-validator": "state()" } }, exportAs: ["ngpError"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpError, isStandalone: true, selector: "[ngpError]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "ngpErrorValidator", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideErrorState()], exportAs: ["ngpError"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpError, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpError]',
                     exportAs: 'ngpError',
-                    host: {
-                        '[attr.id]': 'id()',
-                        '[attr.data-invalid]': 'formField()?.invalid() ? "" : null',
-                        '[attr.data-valid]': 'formField()?.valid() ? "" : null',
-                        '[attr.data-touched]': 'formField()?.touched() ? "" : null',
-                        '[attr.data-pristine]': 'formField()?.pristine() ? "" : null',
-                        '[attr.data-dirty]': 'formField()?.dirty() ? "" : null',
-                        '[attr.data-pending]': 'formField()?.pending() ? "" : null',
-                        '[attr.data-disabled]': 'formField()?.disabled() ? "" : null',
-                        '[attr.data-validator]': 'state()',
-                    },
+                    providers: [provideErrorState()],
                 }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], validator: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpErrorValidator", required: false }] }] } });
 
-/**
- * The state token  for the FormControl primitive.
- */
-const NgpFormControlStateToken = createStateToken('FormControl');
-/**
- * Provides the FormControl state.
- */
-const provideFormControlState = createStateProvider(NgpFormControlStateToken);
-/**
- * Injects the FormControl state.
- */
-const injectFormControlState = createStateInjector(NgpFormControlStateToken);
-/**
- * The FormControl state registration function.
- */
-const formControlState = createState(NgpFormControlStateToken);
+function ngpFormControl({ id, disabled = signal(false), }) {
+    const elementRef = injectElementRef();
+    // Access the form field that the form control is associated with.
+    const formField = injectFormFieldState({ optional: true });
+    // Access the form control status.
+    const status = controlStatus();
+    // Determine the aria-labelledby attribute value.
+    const ariaLabelledBy = computed(() => {
+        const labels = formField()?.labels() ?? [];
+        return labels.length > 0 ? labels.join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : []));
+    // Determine the aria-describedby attribute value.
+    const ariaDescribedBy = computed(() => {
+        const descriptions = formField()?.descriptions() ?? [];
+        return descriptions.length > 0 ? descriptions.join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+    const supportsDisabledAttribute = 'disabled' in elementRef.nativeElement;
+    // Host bindings
+    attrBinding(elementRef, 'disabled', () => (supportsDisabledAttribute && disabled() ? '' : null));
+    explicitEffect([id], ([id], onCleanup) => {
+        formField()?.setFormControl(id);
+        onCleanup(() => formField()?.removeFormControl());
+    });
+    attrBinding(elementRef, 'id', id);
+    attrBinding(elementRef, 'aria-labelledby', ariaLabelledBy);
+    attrBinding(elementRef, 'aria-describedby', ariaDescribedBy);
+    dataBinding(elementRef, 'data-invalid', () => status().invalid);
+    dataBinding(elementRef, 'data-valid', () => status().valid);
+    dataBinding(elementRef, 'data-touched', () => status().touched);
+    dataBinding(elementRef, 'data-pristine', () => status().pristine);
+    dataBinding(elementRef, 'data-dirty', () => status().dirty);
+    dataBinding(elementRef, 'data-pending', () => status().pending);
+    dataBinding(elementRef, 'data-disabled', () => disabled() || status().disabled);
+    return computed(() => ({ ...status(), disabled: status().disabled || disabled() }));
+}
 
 /**
  * Typically this primitive would be not be used directly, but instead a more specific form control primitive would be used (e.g. `ngpInput`). All of our form control primitives use `ngpFormControl` internally so they will have the same accessibility features as described below.
@@ -162,277 +328,38 @@ class NgpFormControl {
                 transform: booleanAttribute,
             }]));
         /**
-         * The element reference.
-         */
-        this.elementRef = injectElementRef();
-        /**
-         * Whether the element supports the disabled attribute.
+         * The status of the form control.
          */
-        this.supportsDisabledAttribute = 'disabled' in this.elementRef.nativeElement;
-        /**
-         * The state of the form control.
-         */
-        this.state = formControlState(this);
-        // Sync the form control state with the control state.
-        this.status = ngpFormControl({ id: this.state.id, disabled: this.state.disabled });
+        this.status = ngpFormControl({ id: this.id, disabled: this.disabled });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpFormControl, isStandalone: true, selector: "[ngpFormControl]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpFormControlDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "supportsDisabledAttribute && status().disabled ? \"\" : null" } }, providers: [provideFormControlState()], exportAs: ["ngpFormControl"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpFormControl, isStandalone: true, selector: "[ngpFormControl]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpFormControlDisabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngpFormControl"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpFormControl, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpFormControl]',
                     exportAs: 'ngpFormControl',
-                    providers: [provideFormControlState()],
-                    host: {
-                        '[attr.disabled]': 'supportsDisabledAttribute && status().disabled ? "" : null',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpFormControlDisabled", required: false }] }] } });
-function ngpFormControl({ id, disabled = signal(false), }) {
-    const element = injectElementRef().nativeElement;
-    // Access the form field that the form control is associated with.
-    const formField = injectFormFieldState({ optional: true });
-    // Access the form control status.
-    const status = controlStatus();
-    // Determine the aria-labelledby attribute value.
-    const ariaLabelledBy = computed(() => formField()?.labels().join(' '), ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : []));
-    // Determine the aria-describedby attribute value.
-    const ariaDescribedBy = computed(() => formField()?.descriptions().join(' '), ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
-    explicitEffect([id], ([id], onCleanup) => {
-        formField()?.setFormControl(id);
-        onCleanup(() => formField()?.removeFormControl());
-    });
-    afterRenderEffect({
-        write: () => {
-            setAttribute(element, 'id', id());
-            setAttribute(element, 'aria-labelledby', ariaLabelledBy());
-            setAttribute(element, 'aria-describedby', ariaDescribedBy());
-            setStateAttribute(element, status().invalid, 'data-invalid');
-            setStateAttribute(element, status().valid, 'data-valid');
-            setStateAttribute(element, status().touched, 'data-touched');
-            setStateAttribute(element, status().pristine, 'data-pristine');
-            setStateAttribute(element, status().dirty, 'data-dirty');
-            setStateAttribute(element, status().pending, 'data-pending');
-            setStateAttribute(element, disabled() || status().disabled, 'data-disabled');
-        },
-    });
-    return computed(() => ({ ...status(), disabled: status().disabled || disabled() }));
-}
-/**
- * Sets the attribute on the element. If the value is not empty, the attribute is set to the value.
- * If the value is empty, the attribute is removed.
- * @param element The element to set the attribute on.
- * @param attribute The attribute to set on the element.
- * @param value The value to set on the attribute.
- */
-function setAttribute(element, attribute, value) {
-    if (value && value.length > 0) {
-        element.setAttribute(attribute, value);
-    }
-    else {
-        element.removeAttribute(attribute);
-    }
-}
-/**
- * Sets the attribute on the element based on the state. If the state is true, the attribute
- * is set to an empty string. If the state is false, the attribute is removed.
- * @param element The element to set the attribute on.
- * @param state The state to set the attribute based on.
- * @param attribute The attribute to set on the element.
- */
-function setStateAttribute(element, state, attribute) {
-    if (state) {
-        element.setAttribute(attribute, '');
-    }
-    else {
-        element.removeAttribute(attribute);
-    }
-}
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpFormControlDisabled", required: false }] }] } });
 
 /**
  * The `NgpFormField` directive is a container for form field elements. Any labels, form controls, or descriptions should be placed within this directive.
  */
 class NgpFormField {
+    /**
+     * The form field state.
+     */
     constructor() {
-        /**
-         * Store the form label.
-         * @internal
-         */
-        this.labels = signal([], ...(ngDevMode ? [{ debugName: "labels" }] : []));
-        /**
-         * Store the form descriptions.
-         * @internal
-         */
-        this.descriptions = signal([], ...(ngDevMode ? [{ debugName: "descriptions" }] : []));
-        /**
-         * Store the id of the associated form control.
-         * @internal
-         */
-        this.formControl = signal(null, ...(ngDevMode ? [{ debugName: "formControl" }] : []));
         /**
          * Find any NgControl within the form field.
          * @internal
          */
         this.ngControl = contentChild(NgControl, ...(ngDevMode ? [{ debugName: "ngControl" }] : []));
-        /**
-         * Store the validation error messages.
-         * @internal
-         */
-        this.errors = signal([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
-        /**
-         * Whether the control is pristine.
-         * @internal
-         */
-        this.pristine = signal(null, ...(ngDevMode ? [{ debugName: "pristine" }] : []));
-        /**
-         * Whether the control is touched.
-         * @internal
-         */
-        this.touched = signal(null, ...(ngDevMode ? [{ debugName: "touched" }] : []));
-        /**
-         * Whether the control is dirty.
-         * @internal
-         */
-        this.dirty = signal(null, ...(ngDevMode ? [{ debugName: "dirty" }] : []));
-        /**
-         * Whether the control is valid.
-         */
-        this.valid = signal(null, ...(ngDevMode ? [{ debugName: "valid" }] : []));
-        /**
-         * Whether the control is invalid.
-         * @internal
-         */
-        this.invalid = signal(null, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
-        /**
-         * Whether the control is pending.
-         * @internal
-         */
-        this.pending = signal(null, ...(ngDevMode ? [{ debugName: "pending" }] : []));
-        /**
-         * Whether the control is disabled.
-         * @internal
-         */
-        this.disabled = signal(null, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        /**
-         * Injector for creating effects outside the constructor.
-         */
-        this.injector = inject(Injector);
-        /**
-         * The form field state.
-         */
-        this.state = formFieldState(this);
-        // any time the ngControl changes, setup the subscriptions.
-        onChange(this.ngControl, this.setupSubscriptions.bind(this));
-    }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
-    }
-    /**
-     * Setup a listener for the form control status.
-     * @param control
-     */
-    setupSubscriptions(control) {
-        // Unsubscribe from the previous subscriptions.
-        this.subscription?.unsubscribe();
-        if (!control) {
-            return;
-        }
-        // For signal-forms interop controls, use an effect to reactively track status.
-        // For classic controls, also use an effect but additionally subscribe to events.
-        effect(() => {
-            this.updateStatus();
-        }, { injector: this.injector });
-        // Classic controls also have an events observable we can subscribe to.
-        const underlyingControl = control?.control;
-        if (underlyingControl?.events) {
-            this.subscription = underlyingControl.events.subscribe(() => this.updateStatus());
-        }
-    }
-    updateStatus() {
-        const control = this.ngControl();
-        if (!control) {
-            return;
-        }
-        // Wrap in try-catch to handle signal-forms interop controls where
-        // the `field` input may not be available yet (throws NG0950).
-        // Reading the signal still establishes a dependency, so the effect
-        // will re-run when the input becomes available.
-        try {
-            const pristine = control.pristine;
-            const touched = control.touched;
-            const dirty = control.dirty;
-            const valid = control.valid;
-            const invalid = control.invalid;
-            const pending = control.pending;
-            const disabled = control.disabled;
-            const errors = control.errors;
-            untracked(() => {
-                this.pristine.set(pristine);
-                this.touched.set(touched);
-                this.dirty.set(dirty);
-                this.valid.set(valid);
-                this.invalid.set(invalid);
-                this.pending.set(pending);
-                this.disabled.set(disabled);
-                this.errors.set(errors ? Object.keys(errors) : []);
-            });
-        }
-        catch {
-            // NG0950: Required input not available yet. The effect will re-run
-            // when the signal input becomes available.
-        }
-    }
-    /**
-     * Register the id of the associated form control.
-     * @param id
-     * @internal
-     */
-    setFormControl(id) {
-        this.formControl.set(id);
-    }
-    /**
-     * Register a label with the form field.
-     * @param label
-     * @internal
-     */
-    addLabel(label) {
-        this.labels.update(labels => [...labels, label]);
-    }
-    /**
-     * Register a description with the form field.
-     * @param description
-     * @internal
-     */
-    addDescription(description) {
-        this.descriptions.update(descriptions => [...descriptions, description]);
-    }
-    /**
-     * Remove the associated form control.
-     * @internal
-     */
-    removeFormControl() {
-        this.formControl.set(null);
-    }
-    /**
-     * Remove a label from the form field.
-     * @param label
-     * @internal
-     */
-    removeLabel(label) {
-        this.labels.update(labels => labels.filter(l => l !== label));
-    }
-    /**
-     * Remove a description from the form field.
-     * @param description
-     * @internal
-     */
-    removeDescription(description) {
-        this.descriptions.update(descriptions => descriptions.filter(d => d !== description));
+        ngpFormField({ ngControl: this.ngControl });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpFormField, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.9", type: NgpFormField, isStandalone: true, selector: "[ngpFormField]", host: { properties: { "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-valid": "valid() ? \"\" : null", "attr.data-touched": "touched() ? \"\" : null", "attr.data-pristine": "pristine() ? \"\" : null", "attr.data-dirty": "dirty() ? \"\" : null", "attr.data-pending": "pending() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null" } }, providers: [provideFormFieldState()], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], exportAs: ["ngpFormField"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.9", type: NgpFormField, isStandalone: true, selector: "[ngpFormField]", providers: [provideFormFieldState()], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], exportAs: ["ngpFormField"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpFormField, decorators: [{
             type: Directive,
@@ -440,59 +367,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                     selector: '[ngpFormField]',
                     exportAs: 'ngpFormField',
                     providers: [provideFormFieldState()],
-                    host: {
-                        '[attr.data-invalid]': 'invalid() ? "" : null',
-                        '[attr.data-valid]': 'valid() ? "" : null',
-                        '[attr.data-touched]': 'touched() ? "" : null',
-                        '[attr.data-pristine]': 'pristine() ? "" : null',
-                        '[attr.data-dirty]': 'dirty() ? "" : null',
-                        '[attr.data-pending]': 'pending() ? "" : null',
-                        '[attr.data-disabled]': 'disabled() ? "" : null',
-                    },
                 }]
         }], ctorParameters: () => [], propDecorators: { ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }] } });
 
-/**
- * The `NgpLabel` directive is used to mark a label element within a form field. Preferably, there should use an HTML `<label>` element.
- */
-class NgpLabel {
-    constructor() {
-        /**
-         * The id of the label. If not provided, a unique id will be generated.
-         */
-        this.id = input(uniqueId('ngp-label'), ...(ngDevMode ? [{ debugName: "id" }] : []));
-        /**
-         * Access the form field that the label is associated with.
-         */
-        this.formField = injectFormFieldState({ optional: true });
-        /**
-         * Derive the for attribute value if the label is an HTML label element.
-         */
-        this.htmlFor = computed(() => this.formField()?.formControl(), ...(ngDevMode ? [{ debugName: "htmlFor" }] : []));
-        /**
-         * Access the element that the label is associated with.
-         */
-        this.elementRef = inject(ElementRef);
-        /**
-         * Determine if the label is an HTML label element.
-         */
-        this.isLabel = this.elementRef.nativeElement instanceof HTMLLabelElement;
-        effect(onCleanup => {
-            this.formField()?.addLabel(this.id());
-            onCleanup(() => this.formField()?.removeLabel(this.id()));
-        });
-    }
-    onClick(event) {
+const [NgpLabelStateToken, ngpLabel, injectLabelState, provideLabelState] = createPrimitive('NgpLabel', ({ id }) => {
+    const element = injectElementRef();
+    const formField = injectFormFieldState({ optional: true });
+    // Derive the for attribute value if the label is an HTML label element
+    const htmlFor = computed(() => formField()?.formControl() ?? null, ...(ngDevMode ? [{ debugName: "htmlFor" }] : []));
+    // Determine if the label is an HTML label element
+    const isLabel = element.nativeElement instanceof HTMLLabelElement;
+    // Host bindings
+    attrBinding(element, 'id', id);
+    attrBinding(element, 'for', htmlFor);
+    dataBinding(element, 'data-invalid', () => (formField()?.invalid() ? '' : null));
+    dataBinding(element, 'data-valid', () => (formField()?.valid() ? '' : null));
+    dataBinding(element, 'data-touched', () => (formField()?.touched() ? '' : null));
+    dataBinding(element, 'data-pristine', () => (formField()?.pristine() ? '' : null));
+    dataBinding(element, 'data-dirty', () => (formField()?.dirty() ? '' : null));
+    dataBinding(element, 'data-pending', () => (formField()?.pending() ? '' : null));
+    dataBinding(element, 'data-disabled', () => (formField()?.disabled() ? '' : null));
+    function onClick(event) {
         // by default a label will perform a click on the associated form control, however
         // this only works if the associated form control is an input element which may not always
         // be the case, so we prevent the default behavior and handle the click event ourselves.
         // This was inspired by the HeadlessUI approach:
         // https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/label/label.tsx#L58
-        if (this.isLabel) {
+        if (isLabel) {
             event.preventDefault();
         }
         // to find the associated form control we can lookup via the known id
-        const targetId = this.htmlFor();
+        const targetId = htmlFor();
         if (!targetId) {
             return;
         }
@@ -518,34 +423,53 @@ class NgpLabel {
         // bound element is now focused.
         target.focus({ preventScroll: true });
     }
+    // Event listeners
+    listener(element, 'click', onClick);
+    // Register with form field and cleanup on destroy
+    formField()?.addLabel(id());
+    onDestroy(() => formField()?.removeLabel(id()));
+    // any time the id changes we need to update the registration with the form field
+    onChange(id, (newId, oldId) => {
+        if (oldId) {
+            formField()?.removeLabel(oldId);
+        }
+        formField()?.addLabel(newId);
+    });
+    return {
+        id,
+        htmlFor,
+    };
+});
+
+/**
+ * The `NgpLabel` directive is used to mark a label element within a form field. Preferably, there should use an HTML `<label>` element.
+ */
+class NgpLabel {
+    /**
+     * The label state.
+     */
+    constructor() {
+        /**
+         * The id of the label. If not provided, a unique id will be generated.
+         */
+        this.id = input(uniqueId('ngp-label'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        ngpLabel({ id: this.id });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpLabel, isStandalone: true, selector: "[ngpLabel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id()", "attr.for": "htmlFor()", "attr.data-invalid": "formField()?.invalid() ? \"\" : null", "attr.data-valid": "formField()?.valid() ? \"\" : null", "attr.data-touched": "formField()?.touched() ? \"\" : null", "attr.data-pristine": "formField()?.pristine() ? \"\" : null", "attr.data-dirty": "formField()?.dirty() ? \"\" : null", "attr.data-pending": "formField()?.pending() ? \"\" : null", "attr.data-disabled": "formField()?.disabled() ? \"\" : null" } }, exportAs: ["ngpLabel"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpLabel, isStandalone: true, selector: "[ngpLabel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideLabelState()], exportAs: ["ngpLabel"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpLabel]',
                     exportAs: 'ngpLabel',
-                    host: {
-                        '[attr.id]': 'id()',
-                        '[attr.for]': 'htmlFor()',
-                        '[attr.data-invalid]': 'formField()?.invalid() ? "" : null',
-                        '[attr.data-valid]': 'formField()?.valid() ? "" : null',
-                        '[attr.data-touched]': 'formField()?.touched() ? "" : null',
-                        '[attr.data-pristine]': 'formField()?.pristine() ? "" : null',
-                        '[attr.data-dirty]': 'formField()?.dirty() ? "" : null',
-                        '[attr.data-pending]': 'formField()?.pending() ? "" : null',
-                        '[attr.data-disabled]': 'formField()?.disabled() ? "" : null',
-                    },
+                    providers: [provideLabelState()],
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpDescription, NgpError, NgpFormControl, NgpFormField, NgpLabel, injectFormControlState, injectFormFieldState, ngpFormControl, provideFormControlState, provideFormFieldState };
+export { NgpDescription, NgpError, NgpFormControl, NgpFormField, NgpLabel, injectDescriptionState, injectErrorState, injectFormFieldState, injectLabelState, ngpDescription, ngpError, ngpFormControl, ngpFormField, ngpLabel, provideDescriptionState, provideErrorState, provideFormFieldState, provideLabelState };
 //# sourceMappingURL=ng-primitives-form-field.mjs.map