@ojiepermana/angular 22.1.11 → 22.1.12

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

@@ -1,7 +1,138 @@
-export * from '@ojiepermana/angular-component/empty';
+import * as i0 from '@angular/core';
+import { input, computed, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import { cva } from 'class-variance-authority';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const emptyVariants = cva('flex w-full flex-col items-center justify-center gap-6 rounded-xl px-6 py-10 text-center');
+const emptyMediaVariants = cva('flex shrink-0 items-center justify-center', {
+    variants: {
+        variant: {
+            default: '',
+            icon: [
+                'size-12 rounded-full border border-border bg-muted/40 text-muted-foreground shadow-sm',
+                '[&_svg]:size-6 [&_svg]:shrink-0',
+            ].join(' '),
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
+class EmptyComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(emptyVariants(), 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: EmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: EmptyComponent, isStandalone: true, selector: "Empty", 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: EmptyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Empty',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class EmptyHeaderComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex w-full max-w-xl flex-col items-center gap-3 text-center', 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: EmptyHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: EmptyHeaderComponent, isStandalone: true, selector: "EmptyHeader", 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: EmptyHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'EmptyHeader',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class EmptyMediaComponent {
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(emptyMediaVariants({ variant: this.variant() }), 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: EmptyMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: EmptyMediaComponent, isStandalone: true, selector: "EmptyMedia", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-variant": "variant()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: EmptyMediaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'EmptyMedia',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class EmptyTitleComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block text-xl font-semibold tracking-tight text-foreground sm:text-2xl', 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: EmptyTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: EmptyTitleComponent, isStandalone: true, selector: "EmptyTitle", 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: EmptyTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'EmptyTitle',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class EmptyDescriptionComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block max-w-lg text-sm leading-6 text-muted-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: EmptyDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: EmptyDescriptionComponent, isStandalone: true, selector: "EmptyDescription", 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: EmptyDescriptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'EmptyDescription',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class EmptyContentComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex w-full flex-col items-center justify-center gap-3', 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: EmptyContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: EmptyContentComponent, isStandalone: true, selector: "EmptyContent", 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: EmptyContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'EmptyContent',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { EmptyComponent, EmptyContentComponent, EmptyDescriptionComponent, EmptyHeaderComponent, EmptyMediaComponent, EmptyTitleComponent, emptyMediaVariants, emptyVariants };

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

@@ -1,7 +1,442 @@
-export * from '@ojiepermana/angular-component/form';
+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';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * 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. */
+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.';
+    }
+};
+
+/**
+ * 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: `
+    @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: `
+    @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 };