@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-component-form.mjs

@@ -1,442 +1,821 @@
-import * as i0 from '@angular/core';
-import { signal, computed, effect, Service, inject, input, booleanAttribute, Component, Directive } from '@angular/core';
-import { injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
-import { NgControl } from '@angular/forms';
-
-/**
- * Backing store for a single `<FormField>`. Provided on the component
- * so descendant parts (label, description, message, control) can inject it.
- */
-class FormFieldContext {
-    controlId = injectUniqueId('FormField');
-    labelId = `${this.controlId}-label`;
-    descriptionId = `${this.controlId}-description`;
-    messageId = `${this.controlId}-message`;
-    control = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
-    manualInvalid = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "manualInvalid" }] : /* istanbul ignore next */ []));
-    hasLabel = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
-    hasDescription = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
-    hasMessage = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasMessage" }] : /* istanbul ignore next */ []));
-    /**
-     * `aria-labelledby` for the control. `<FormLabel>` renders as a custom element,
-     * so the native `for`/`id` pairing does not associate it — point the control at
-     * the label's id explicitly so it has an accessible name (axe `select-name`/`label`).
-     */
-    labelledBy = computed(() => (this.hasLabel() ? this.labelId : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
-    statusTick = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "statusTick" }] : /* istanbul ignore next */ []));
-    invalid = computed(() => {
-        this.statusTick();
-        const c = this.control();
-        return this.manualInvalid() || (!!c && c.invalid && (c.touched || c.dirty));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    firstError = computed(() => {
-        this.statusTick();
-        const c = this.control();
-        if (!c?.errors)
-            return null;
-        const keys = Object.keys(c.errors);
-        return keys.length > 0 ? keys[0] : null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "firstError" }] : /* istanbul ignore next */ []));
-    describedBy = computed(() => {
-        const parts = [];
-        if (this.hasDescription())
-            parts.push(this.descriptionId);
-        if (this.hasMessage() && this.invalid())
-            parts.push(this.messageId);
-        return parts.length > 0 ? parts.join(' ') : null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
-    constructor() {
-        // Re-run computed() above whenever the control's status or interaction state changes.
-        effect((onCleanup) => {
-            const c = this.control();
-            if (!c)
-                return;
-            // Signal Forms exposes an NgControl-compatible adapter whose state getters
-            // read signals directly but which intentionally has no `events` stream.
-            // The computed values above track those getters automatically; classic
-            // AbstractControl instances still need the event bridge.
-            const events = c.events;
-            if (!events)
-                return;
-            const sub = events.subscribe(() => this.statusTick.update((n) => n + 1));
-            onCleanup(() => sub.unsubscribe());
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormFieldContext, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: FormFieldContext, autoProvided: false });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormFieldContext, decorators: [{
-            type: Service,
-            args: [{ autoProvided: false }]
-        }], ctorParameters: () => [] });
-
-/**
- * Groups a label, control, description, and validation message.
- * Provides ids + invalid state to descendants via {@link FormFieldContext}.
- */
-class FormFieldComponent {
-    ctx = inject(FormFieldContext);
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    orientation = input('vertical', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    classes = computed(() => {
-        const orientation = this.orientation();
-        return cn('block min-w-0', orientation === 'vertical' && 'flex flex-col gap-2', orientation === 'horizontal' && 'flex items-start gap-3', orientation === 'responsive' &&
-            'flex flex-col gap-3 sm:grid sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)] sm:items-start', this.class());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => this.ctx.manualInvalid.set(this.invalid()));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: FormFieldComponent, isStandalone: true, selector: "FormField", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()", "attr.data-invalid": "ctx.invalid() ? \"\" : null", "attr.role": "\"group\"" } }, providers: [FormFieldContext], ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormFieldComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'FormField',
-                    providers: [FormFieldContext],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-orientation]': 'orientation()',
-                        '[attr.data-invalid]': 'ctx.invalid() ? "" : null',
-                        '[attr.role]': '"group"',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
-
-class FormFieldsetComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('block min-w-0 border-0 p-0 m-0', 'grid gap-4', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: FormFieldsetComponent, isStandalone: true, selector: "FormFieldset, fieldset[FormFieldset]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormFieldsetComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'FormFieldset, fieldset[FormFieldset]',
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class FormLegendComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    variant = input('legend', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('block min-w-0 text-foreground', this.variant() === 'label'
-        ? 'text-sm font-medium leading-none'
-        : 'text-sm font-semibold leading-none', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: FormLegendComponent, isStandalone: true, selector: "FormLegend, legend[FormLegend]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormLegendComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'FormLegend, legend[FormLegend]',
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
-
-class FormGroupComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('block min-w-0', 'grid gap-6', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: FormGroupComponent, isStandalone: true, selector: "FormGroup", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'FormGroup',
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class FormSeparatorComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('block min-w-0', 'flex items-center gap-3 text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground', 'before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: FormSeparatorComponent, isStandalone: true, selector: "FormSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<span class="shrink-0"><ng-content /></span>`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'FormSeparator',
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                    template: `<span class="shrink-0"><ng-content /></span>`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class FormContentComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('block min-w-0 flex-1', 'grid gap-1.5', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: FormContentComponent, isStandalone: true, selector: "FormContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'FormContent',
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class FormTitleComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('block text-sm font-medium leading-none text-foreground', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: FormTitleComponent, isStandalone: true, selector: "FormTitle", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormTitleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'FormTitle',
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class FormLabelComponent {
-    ctx = inject(FormFieldContext);
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('text-sm font-medium leading-none', this.ctx.invalid() ? 'text-destructive' : 'text-foreground', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    ngOnInit() {
-        // Let the control reference this label via aria-labelledby.
-        this.ctx.hasLabel.set(true);
-    }
-    ngOnDestroy() {
-        // Clear the flag on the way out, the way the description and message parts
-        // do. A conditionally rendered label that is removed but leaves the flag set
-        // points the control's aria-labelledby at an id no longer in the document,
-        // which strips its accessible name instead of restoring it.
-        this.ctx.hasLabel.set(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: FormLabelComponent, isStandalone: true, selector: "FormLabel, label[FormLabel]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "ctx.labelId", "attr.for": "ctx.controlId" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormLabelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'FormLabel, label[FormLabel]',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.id]': 'ctx.labelId',
-                        '[attr.for]': 'ctx.controlId',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class FormDescriptionComponent {
-    ctx = inject(FormFieldContext, { optional: true });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('text-sm text-muted-foreground', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    descriptionId = computed(() => this.ctx?.descriptionId ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "descriptionId" }] : /* istanbul ignore next */ []));
-    ngOnInit() {
-        this.ctx?.hasDescription.set(true);
-    }
-    ngOnDestroy() {
-        this.ctx?.hasDescription.set(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: FormDescriptionComponent, isStandalone: true, selector: "FormDescription, p[FormDescription]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "descriptionId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormDescriptionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'FormDescription, p[FormDescription]',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.id]': 'descriptionId()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-const numericConstraint = (value, key) => value && typeof value === 'object' && key in value
-    ? value[key]
-    : undefined;
-/** Default human-readable messages for Angular's built-in validators. */
+import * as i0 from "@angular/core";
+import { Component, Directive, Service, booleanAttribute, computed, effect, inject, input, signal } from "@angular/core";
+import { cn, injectUniqueId } from "@ojiepermana/angular/component/utils/core";
+import { NgControl } from "@angular/forms";
+var FormFieldContext = class FormFieldContext {
+	controlId = injectUniqueId("FormField");
+	labelId = `${this.controlId}-label`;
+	descriptionId = `${this.controlId}-description`;
+	messageId = `${this.controlId}-message`;
+	control = signal(null, ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
+	manualInvalid = signal(false, ...ngDevMode ? [{ debugName: "manualInvalid" }] : /* istanbul ignore next */ []);
+	hasLabel = signal(false, ...ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []);
+	hasDescription = signal(false, ...ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []);
+	hasMessage = signal(false, ...ngDevMode ? [{ debugName: "hasMessage" }] : /* istanbul ignore next */ []);
+	labelledBy = computed(() => this.hasLabel() ? this.labelId : null, ...ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []);
+	statusTick = signal(0, ...ngDevMode ? [{ debugName: "statusTick" }] : /* istanbul ignore next */ []);
+	invalid = computed(() => {
+		this.statusTick();
+		const c = this.control();
+		return this.manualInvalid() || !!c && c.invalid && (c.touched || c.dirty);
+	}, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
+	firstError = computed(() => {
+		this.statusTick();
+		const c = this.control();
+		if (!c?.errors) return null;
+		const keys = Object.keys(c.errors);
+		return keys.length > 0 ? keys[0] : null;
+	}, ...ngDevMode ? [{ debugName: "firstError" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => {
+		const parts = [];
+		if (this.hasDescription()) parts.push(this.descriptionId);
+		if (this.hasMessage() && this.invalid()) parts.push(this.messageId);
+		return parts.length > 0 ? parts.join(" ") : null;
+	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect((onCleanup) => {
+			const c = this.control();
+			if (!c) return;
+			const events = c.events;
+			if (!events) return;
+			const sub = events.subscribe(() => this.statusTick.update((n) => n + 1));
+			onCleanup(() => sub.unsubscribe());
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormFieldContext,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormFieldContext,
+		autoProvided: false
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FormFieldContext,
+	decorators: [{
+		type: Service,
+		args: [{ autoProvided: false }]
+	}],
+	ctorParameters: () => []
+});
+var FormFieldComponent = class FormFieldComponent {
+	ctx = inject(FormFieldContext);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => {
+		const orientation = this.orientation();
+		return cn("block min-w-0", orientation === "vertical" && "flex flex-col gap-2", orientation === "horizontal" && "flex items-start gap-3", orientation === "responsive" && "flex flex-col gap-3 sm:grid sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)] sm:items-start", this.class());
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => this.ctx.manualInvalid.set(this.invalid()));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormFieldComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: FormFieldComponent,
+		isStandalone: true,
+		selector: "FormField",
+		inputs: {
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-orientation": "orientation()",
+			"attr.data-invalid": "ctx.invalid() ? \"\" : null",
+			"attr.role": "\"group\""
+		} },
+		providers: [FormFieldContext],
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FormFieldComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "FormField",
+			providers: [FormFieldContext],
+			host: {
+				"[class]": "classes()",
+				"[attr.data-orientation]": "orientation()",
+				"[attr.data-invalid]": "ctx.invalid() ? \"\" : null",
+				"[attr.role]": "\"group\""
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}]
+	}
+});
+var FormFieldsetComponent = class FormFieldsetComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("block min-w-0 border-0 p-0 m-0", "grid gap-4", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormFieldsetComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: FormFieldsetComponent,
+		isStandalone: true,
+		selector: "FormFieldset, fieldset[FormFieldset]",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FormFieldsetComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "FormFieldset, fieldset[FormFieldset]",
+			host: { "[class]": "classes()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var FormLegendComponent = class FormLegendComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	variant = input("legend", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("block min-w-0 text-foreground", this.variant() === "label" ? "text-sm font-medium leading-none" : "text-sm font-semibold leading-none", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormLegendComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: FormLegendComponent,
+		isStandalone: true,
+		selector: "FormLegend, legend[FormLegend]",
+		inputs: {
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FormLegendComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "FormLegend, legend[FormLegend]",
+			host: { "[class]": "classes()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}]
+	}
+});
+var FormGroupComponent = class FormGroupComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("block min-w-0", "grid gap-6", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormGroupComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: FormGroupComponent,
+		isStandalone: true,
+		selector: "FormGroup",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FormGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "FormGroup",
+			host: { "[class]": "classes()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var FormSeparatorComponent = class FormSeparatorComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("block min-w-0", "flex items-center gap-3 text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground", "before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormSeparatorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: FormSeparatorComponent,
+		isStandalone: true,
+		selector: "FormSeparator",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: `<span class="shrink-0"><ng-content /></span>`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FormSeparatorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "FormSeparator",
+			host: { "[class]": "classes()" },
+			template: `<span class="shrink-0"><ng-content /></span>`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var FormContentComponent = class FormContentComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("block min-w-0 flex-1", "grid gap-1.5", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormContentComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: FormContentComponent,
+		isStandalone: true,
+		selector: "FormContent",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FormContentComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "FormContent",
+			host: { "[class]": "classes()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var FormTitleComponent = class FormTitleComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("block text-sm font-medium leading-none text-foreground", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormTitleComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: FormTitleComponent,
+		isStandalone: true,
+		selector: "FormTitle",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FormTitleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "FormTitle",
+			host: { "[class]": "classes()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var FormLabelComponent = class FormLabelComponent {
+	ctx = inject(FormFieldContext);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("text-sm font-medium leading-none", this.ctx.invalid() ? "text-destructive" : "text-foreground", "peer-disabled:cursor-not-allowed peer-disabled:opacity-70", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	ngOnInit() {
+		this.ctx.hasLabel.set(true);
+	}
+	ngOnDestroy() {
+		this.ctx.hasLabel.set(false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormLabelComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: FormLabelComponent,
+		isStandalone: true,
+		selector: "FormLabel, label[FormLabel]",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "classes()",
+			"attr.id": "ctx.labelId",
+			"attr.for": "ctx.controlId"
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FormLabelComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "FormLabel, label[FormLabel]",
+			host: {
+				"[class]": "classes()",
+				"[attr.id]": "ctx.labelId",
+				"[attr.for]": "ctx.controlId"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var FormDescriptionComponent = class FormDescriptionComponent {
+	ctx = inject(FormFieldContext, { optional: true });
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("text-sm text-muted-foreground", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	descriptionId = computed(() => this.ctx?.descriptionId ?? null, ...ngDevMode ? [{ debugName: "descriptionId" }] : /* istanbul ignore next */ []);
+	ngOnInit() {
+		this.ctx?.hasDescription.set(true);
+	}
+	ngOnDestroy() {
+		this.ctx?.hasDescription.set(false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormDescriptionComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: FormDescriptionComponent,
+		isStandalone: true,
+		selector: "FormDescription, p[FormDescription]",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "classes()",
+			"attr.id": "descriptionId()"
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FormDescriptionComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "FormDescription, p[FormDescription]",
+			host: {
+				"[class]": "classes()",
+				"[attr.id]": "descriptionId()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+const numericConstraint = (value, key) => value && typeof value === "object" && key in value ? value[key] : void 0;
 const defaultFormErrorMessageResolver = (errorKey, errorValue) => {
-    switch (errorKey) {
-        case 'required':
-            return 'This field is required.';
-        case 'requiredTrue':
-            return 'This option must be selected.';
-        case 'email':
-            return 'Enter a valid email address.';
-        case 'minlength':
-            return `Enter at least ${numericConstraint(errorValue, 'requiredLength')} characters.`;
-        case 'maxlength':
-            return `Enter no more than ${numericConstraint(errorValue, 'requiredLength')} characters.`;
-        case 'min':
-            return `Enter a value greater than or equal to ${numericConstraint(errorValue, 'min')}.`;
-        case 'max':
-            return `Enter a value less than or equal to ${numericConstraint(errorValue, 'max')}.`;
-        case 'pattern':
-            return 'Enter a value in the required format.';
-        default:
-            return 'Enter a valid value.';
-    }
+	switch (errorKey) {
+		case "required": return "This field is required.";
+		case "requiredTrue": return "This option must be selected.";
+		case "email": return "Enter a valid email address.";
+		case "minlength": return `Enter at least ${numericConstraint(errorValue, "requiredLength")} characters.`;
+		case "maxlength": return `Enter no more than ${numericConstraint(errorValue, "requiredLength")} characters.`;
+		case "min": return `Enter a value greater than or equal to ${numericConstraint(errorValue, "min")}.`;
+		case "max": return `Enter a value less than or equal to ${numericConstraint(errorValue, "max")}.`;
+		case "pattern": return "Enter a value in the required format.";
+		default: return "Enter a valid value.";
+	}
 };
-
-/**
- * Renders validation errors for the field's control.
- * By default, surfaces the first error key. Provide custom content to override.
- */
-class FormMessageComponent {
-    ctx = inject(FormFieldContext);
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    errorMessageResolver = input(defaultFormErrorMessageResolver, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorMessageResolver" }] : /* istanbul ignore next */ []));
-    show = computed(() => this.ctx.invalid(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
-    message = computed(() => {
-        const errorKey = this.ctx.firstError();
-        const control = this.ctx.control();
-        if (!errorKey) {
-            return '';
-        }
-        return this.errorMessageResolver()(errorKey, control?.errors?.[errorKey], control);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('text-sm font-medium text-destructive', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    ngOnInit() {
-        this.ctx.hasMessage.set(true);
-    }
-    ngOnDestroy() {
-        this.ctx.hasMessage.set(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: FormMessageComponent, isStandalone: true, selector: "FormMessage, p[FormMessage]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, errorMessageResolver: { classPropertyName: "errorMessageResolver", publicName: "errorMessageResolver", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "ctx.messageId", "attr.role": "\"status\"" } }, ngImport: i0, template: `
+var FormMessageComponent = class FormMessageComponent {
+	ctx = inject(FormFieldContext);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	errorMessageResolver = input(defaultFormErrorMessageResolver, ...ngDevMode ? [{ debugName: "errorMessageResolver" }] : /* istanbul ignore next */ []);
+	show = computed(() => this.ctx.invalid(), ...ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []);
+	message = computed(() => {
+		const errorKey = this.ctx.firstError();
+		const control = this.ctx.control();
+		if (!errorKey) return "";
+		return this.errorMessageResolver()(errorKey, control?.errors?.[errorKey], control);
+	}, ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("text-sm font-medium text-destructive", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	ngOnInit() {
+		this.ctx.hasMessage.set(true);
+	}
+	ngOnDestroy() {
+		this.ctx.hasMessage.set(false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormMessageComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: FormMessageComponent,
+		isStandalone: true,
+		selector: "FormMessage, p[FormMessage]",
+		inputs: {
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessageResolver: {
+				classPropertyName: "errorMessageResolver",
+				publicName: "errorMessageResolver",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.id": "ctx.messageId",
+			"attr.role": "\"status\""
+		} },
+		ngImport: i0,
+		template: `
     @if (show()) {
       <ng-content>{{ message() }}</ng-content>
     }
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormMessageComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'FormMessage, p[FormMessage]',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.id]': 'ctx.messageId',
-                        // One semantic, not two. `role="alert"` carries an implicit assertive live
-                        // region, so pairing it with aria-live="polite" asked screen readers to be
-                        // both interruptive and polite about the same message. A field error is
-                        // status about the field the user is working in, so it announces politely.
-                        '[attr.role]': '"status"',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FormMessageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "FormMessage, p[FormMessage]",
+			host: {
+				"[class]": "classes()",
+				"[attr.id]": "ctx.messageId",
+				"[attr.role]": "\"status\""
+			},
+			template: `
     @if (show()) {
       <ng-content>{{ message() }}</ng-content>
     }
-  `,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], errorMessageResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessageResolver", required: false }] }] } });
-
-/**
- * Attach to the native form control inside a `<FormField>` to auto-wire:
- *  - `id` ↔ `<FormLabel for>`
- *  - `aria-describedby` ↔ description + error message
- *  - `aria-invalid` ↔ control validity (after touch/dirty)
- *
- * @example
- * <FormField>
- *   <FormLabel>Email</FormLabel>
- *   <input Input FormControl [formControl]="email" />
- *   <FormDescription>We'll never share it.</FormDescription>
- *   <FormMessage />
- * </FormField>
- */
-class FormControlDirective {
-    ctx = inject(FormFieldContext);
-    ngControl = inject(NgControl, { optional: true, self: true });
-    ngOnInit() {
-        this.publishControl();
-    }
-    ngAfterViewInit() {
-        // `formControlName` only assigns `.control` in FormControlName.ngOnChanges.
-        // Whether that lands before this ngOnInit depends on directive *creation*
-        // order: injecting NgControl in a field initializer (as above) instantiates
-        // FormControlName early, which registers its hooks first and happens to make
-        // the init read work today. Anything that moves that injection later — a lazy
-        // `injector.get`, for instance — parks `null` in the FormField forever, and
-        // the field can then never surface the control's invalid state. Re-resolving
-        // here removes the dependence on that ordering accident.
-        this.publishControl();
-    }
-    publishControl() {
-        const control = this.ngControl?.control ?? null;
-        if (control !== this.ctx.control()) {
-            this.ctx.control.set(control);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: FormControlDirective, isStandalone: true, selector: "[FormControl]", host: { properties: { "attr.id": "ctx.controlId", "attr.aria-labelledby": "ctx.labelledBy()", "attr.aria-describedby": "ctx.describedBy()", "attr.aria-invalid": "ctx.invalid() ? \"true\" : null" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: FormControlDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[FormControl]',
-                    host: {
-                        '[attr.id]': 'ctx.controlId',
-                        '[attr.aria-labelledby]': 'ctx.labelledBy()',
-                        '[attr.aria-describedby]': 'ctx.describedBy()',
-                        '[attr.aria-invalid]': 'ctx.invalid() ? "true" : null',
-                    },
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { FormContentComponent, FormControlDirective, FormDescriptionComponent, FormFieldComponent, FormFieldContext, FormFieldsetComponent, FormGroupComponent, FormLabelComponent, FormLegendComponent, FormMessageComponent, FormSeparatorComponent, FormTitleComponent, defaultFormErrorMessageResolver };
+  `
+		}]
+	}],
+	propDecorators: {
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		errorMessageResolver: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessageResolver",
+				required: false
+			}]
+		}]
+	}
+});
+var FormControlDirective = class FormControlDirective {
+	ctx = inject(FormFieldContext);
+	ngControl = inject(NgControl, {
+		optional: true,
+		self: true
+	});
+	ngOnInit() {
+		this.publishControl();
+	}
+	ngAfterViewInit() {
+		this.publishControl();
+	}
+	publishControl() {
+		const control = this.ngControl?.control ?? null;
+		if (control !== this.ctx.control()) this.ctx.control.set(control);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FormControlDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: FormControlDirective,
+		isStandalone: true,
+		selector: "[FormControl]",
+		host: { properties: {
+			"attr.id": "ctx.controlId",
+			"attr.aria-labelledby": "ctx.labelledBy()",
+			"attr.aria-describedby": "ctx.describedBy()",
+			"attr.aria-invalid": "ctx.invalid() ? \"true\" : null"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FormControlDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[FormControl]",
+			host: {
+				"[attr.id]": "ctx.controlId",
+				"[attr.aria-labelledby]": "ctx.labelledBy()",
+				"[attr.aria-describedby]": "ctx.describedBy()",
+				"[attr.aria-invalid]": "ctx.invalid() ? \"true\" : null"
+			}
+		}]
+	}]
+});
+export { FormContentComponent, FormControlDirective, FormDescriptionComponent, FormFieldComponent, FormFieldContext, FormFieldsetComponent, FormGroupComponent, FormLabelComponent, FormLegendComponent, FormMessageComponent, FormSeparatorComponent, FormTitleComponent, defaultFormErrorMessageResolver };