ngx-com 0.0.1 → 0.0.4

package/fesm2022/ngx-com-components-form-field.mjs

@@ -0,0 +1,924 @@
+import * as i0 from '@angular/core';
+import { signal, Directive, input, computed, Injectable, inject, ElementRef, DestroyRef, booleanAttribute, forwardRef, InjectionToken, contentChild, contentChildren, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { cva } from 'class-variance-authority';
+import { mergeClasses } from 'ngx-com/utils';
+import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
+import { AutofillMonitor } from '@angular/cdk/text-field';
+
+/**
+ * Contract that any control inside a form field must implement.
+ *
+ * This allows the form field to read state from any inner control
+ * (input, textarea, custom controls) without knowing implementation details.
+ *
+ * @example Implementing for a custom phone input
+ * ```ts
+ * @Directive({
+ *   selector: 'com-phone-input',
+ *   providers: [{ provide: FormFieldControl, useExisting: PhoneInputComponent }],
+ * })
+ * export class PhoneInputComponent extends FormFieldControl<string> {
+ *   // ... implement all abstract members
+ * }
+ * ```
+ */
+class FormFieldControl {
+}
+
+/** Auto-incrementing ID counter. */
+let nextId$3 = 0;
+/**
+ * Directive to mark the label element inside a form field.
+ *
+ * The form field automatically associates this label with the inner control
+ * and positions it appropriately based on appearance and float state.
+ *
+ * @example
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Email address</label>
+ *   <input comInput formControlName="email" />
+ * </com-form-field>
+ * ```
+ */
+class ComLabel {
+    labelId = `com-label-${nextId$3++}`;
+    _forId = signal(null, ...(ngDevMode ? [{ debugName: "_forId" }] : []));
+    forId = this._forId.asReadonly();
+    /** Sets the `for` attribute to link to the control. Called by form field. */
+    setForId(id) {
+        this._forId.set(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComLabel, isStandalone: true, selector: "[comLabel]", host: { properties: { "attr.for": "forId()", "id": "labelId" } }, exportAs: ["comLabel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comLabel]',
+                    exportAs: 'comLabel',
+                    host: {
+                        '[attr.for]': 'forId()',
+                        '[id]': 'labelId',
+                    },
+                }]
+        }] });
+
+/**
+ * CVA variants for the form field wrapper.
+ *
+ * @tokens `--color-foreground`
+ */
+const formFieldVariants = cva(['com-form-field', 'relative block w-full', 'text-foreground'], {
+    variants: {
+        disabled: {
+            true: 'pointer-events-none',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
+});
+/**
+ * CVA variants for the input container (the bordered/filled area).
+ *
+ * @tokens `--color-input-border`, `--color-input-background`, `--color-primary`,
+ *         `--color-accent`, `--color-warn`, `--color-ring`, `--color-muted`,
+ *         `--color-disabled`, `--radius-input`
+ */
+const formFieldContainerVariants = cva([
+    'com-form-field__container',
+    'relative flex items-center',
+    'w-full min-h-11',
+    'transition-all duration-150',
+    'rounded-input',
+], {
+    variants: {
+        appearance: {
+            outline: [
+                'border border-input-border',
+                'bg-transparent',
+            ],
+            fill: [
+                'rounded-b-none',
+                'bg-muted',
+                'border-b-2 border-input-border',
+            ],
+        },
+        color: {
+            primary: '',
+            accent: '',
+            warn: '',
+        },
+        focused: {
+            true: '',
+            false: '',
+        },
+        error: {
+            true: '',
+            false: '',
+        },
+        disabled: {
+            true: 'bg-disabled border-disabled',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        // Outline + focused (no error)
+        { appearance: 'outline', focused: true, error: false, class: 'border-primary ring-1 ring-primary' },
+        { appearance: 'outline', focused: true, error: false, color: 'accent', class: 'border-accent ring-accent' },
+        { appearance: 'outline', focused: true, error: false, color: 'warn', class: 'border-warn ring-warn' },
+        // Outline + error
+        { appearance: 'outline', error: true, class: 'border-warn ring-1 ring-warn' },
+        // Fill + focused (no error)
+        { appearance: 'fill', focused: true, error: false, class: 'border-b-primary' },
+        { appearance: 'fill', focused: true, error: false, color: 'accent', class: 'border-b-accent' },
+        { appearance: 'fill', focused: true, error: false, color: 'warn', class: 'border-b-warn' },
+        // Fill + error
+        { appearance: 'fill', error: true, class: 'border-b-warn' },
+    ],
+    defaultVariants: {
+        appearance: 'outline',
+        color: 'primary',
+        focused: false,
+        error: false,
+        disabled: false,
+    },
+});
+/**
+ * CVA variants for the floating label.
+ *
+ * @tokens `--color-muted-foreground`, `--color-primary`, `--color-accent`,
+ *         `--color-warn`, `--color-background`
+ */
+const formFieldLabelVariants = cva([
+    'com-form-field__label',
+    'pointer-events-none',
+    'text-muted-foreground text-sm',
+    'origin-top-left',
+    'transition-all duration-200 ease-in-out',
+], {
+    variants: {
+        appearance: {
+            outline: '',
+            fill: '',
+        },
+        floating: {
+            // Floating: absolute positioning at container border
+            true: 'absolute',
+            // Not floating: relative positioning in flex flow (after prefix)
+            false: 'relative flex-shrink-0 pl-3',
+        },
+        color: {
+            primary: '',
+            accent: '',
+            warn: '',
+        },
+        error: {
+            true: 'text-warn',
+            false: '',
+        },
+        focused: {
+            true: '',
+            false: '',
+        },
+        disabled: {
+            true: 'text-disabled-foreground',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        // Outline floating (label above border with notch effect)
+        {
+            appearance: 'outline',
+            floating: true,
+            class: 'left-2 -top-2.5 scale-75 bg-background px-1',
+        },
+        // Fill floating
+        {
+            appearance: 'fill',
+            floating: true,
+            class: 'left-3 top-1 scale-75 text-xs',
+        },
+        // Focused + floating colors (no error)
+        { floating: true, focused: true, error: false, color: 'primary', class: 'text-primary' },
+        { floating: true, focused: true, error: false, color: 'accent', class: 'text-accent' },
+        { floating: true, focused: true, error: false, color: 'warn', class: 'text-warn' },
+        // Error overrides
+        { floating: true, error: true, class: 'text-warn' },
+    ],
+    defaultVariants: {
+        appearance: 'outline',
+        floating: false,
+        color: 'primary',
+        error: false,
+        focused: false,
+        disabled: false,
+    },
+});
+/**
+ * CVA variants for the subscript area (hints/errors).
+ *
+ * @tokens (inherits from children)
+ */
+const formFieldSubscriptVariants = cva(['com-form-field__subscript', 'text-xs mt-1 px-3'], {
+    variants: {
+        sizing: {
+            fixed: 'min-h-5',
+            dynamic: 'min-h-0',
+        },
+    },
+    defaultVariants: {
+        sizing: 'fixed',
+    },
+});
+/**
+ * CVA variants for hint text.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const hintVariants = cva(['com-form-field__hint', 'text-muted-foreground text-xs']);
+/**
+ * CVA variants for error messages.
+ *
+ * @tokens `--color-warn`
+ */
+const errorVariants = cva(['com-form-field__error', 'text-warn text-xs']);
+/**
+ * CVA variants for prefix slot.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const prefixVariants = cva([
+    'com-form-field__prefix',
+    'flex items-center text-muted-foreground pl-3',
+]);
+/**
+ * CVA variants for suffix slot.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const suffixVariants = cva([
+    'com-form-field__suffix',
+    'flex items-center text-muted-foreground pr-3',
+]);
+
+/** Auto-incrementing ID counter. */
+let nextId$2 = 0;
+/**
+ * Directive for hint text displayed below the form field.
+ *
+ * The hint provides supplementary information to help users fill out the field.
+ * It is automatically added to the control's `aria-describedby`.
+ *
+ * @tokens `--color-muted-foreground`
+ *
+ * @example Basic hint
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Password</label>
+ *   <input comInput formControlName="password" />
+ *   <span comHint>At least 8 characters</span>
+ * </com-form-field>
+ * ```
+ *
+ * @example Right-aligned hint (e.g., character count)
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Bio</label>
+ *   <textarea comInput formControlName="bio"></textarea>
+ *   <span comHint>Keep it brief</span>
+ *   <span comHint align="end">{{ bioLength }}/150</span>
+ * </com-form-field>
+ * ```
+ */
+class ComHint {
+    id = `com-hint-${nextId$2++}`;
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    hostClasses = computed(() => mergeClasses(hintVariants(), this.align() === 'end' && 'ml-auto'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComHint, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComHint, isStandalone: true, selector: "[comHint]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id", "class": "hostClasses()" } }, exportAs: ["comHint"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComHint, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comHint]',
+                    exportAs: 'comHint',
+                    host: {
+                        '[id]': 'id',
+                        '[class]': 'hostClasses()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+
+/** Auto-incrementing ID counter. */
+let nextId$1 = 0;
+/**
+ * Directive for error messages displayed below the form field.
+ *
+ * Errors replace hints when the control is in an error state.
+ * Uses `role="alert"` and `aria-live="polite"` for screen reader announcement.
+ *
+ * The optional `match` input allows showing errors only for specific validation errors.
+ *
+ * @tokens `--color-warn`
+ *
+ * @example Basic error
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Email</label>
+ *   <input comInput formControlName="email" />
+ *   <span comError>Please enter a valid email</span>
+ * </com-form-field>
+ * ```
+ *
+ * @example Matching specific errors
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Email</label>
+ *   <input comInput formControlName="email" />
+ *   <span comError match="required">Email is required.</span>
+ *   <span comError match="email">Must be a valid email address.</span>
+ * </com-form-field>
+ * ```
+ */
+class ComError {
+    id = `com-error-${nextId$1++}`;
+    /** Reference to the form control, set by the parent form field. */
+    _control = signal(null, ...(ngDevMode ? [{ debugName: "_control" }] : []));
+    /**
+     * Show this error only when a specific validation error key is present.
+     * If empty, the error is always shown when the control is in error state.
+     */
+    match = input('', ...(ngDevMode ? [{ debugName: "match" }] : []));
+    errorVariants = errorVariants;
+    /**
+     * Whether this error should be displayed based on the match condition.
+     * Used by the form field to filter which errors to show.
+     */
+    shouldShow = computed(() => {
+        const matchKey = this.match();
+        if (!matchKey)
+            return true;
+        const errors = this._control()?.errors;
+        return errors ? matchKey in errors : false;
+    }, ...(ngDevMode ? [{ debugName: "shouldShow" }] : []));
+    /**
+     * Sets the form control reference.
+     * Called by the parent form field component.
+     */
+    setControl(control) {
+        this._control.set(control);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComError, isStandalone: true, selector: "[comError]", inputs: { match: { classPropertyName: "match", publicName: "match", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert", "aria-live": "polite" }, properties: { "id": "id", "class": "errorVariants()", "class.hidden": "!shouldShow()" } }, exportAs: ["comError"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComError, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comError]',
+                    exportAs: 'comError',
+                    host: {
+                        '[id]': 'id',
+                        '[class]': 'errorVariants()',
+                        '[class.hidden]': '!shouldShow()',
+                        'role': 'alert',
+                        'aria-live': 'polite',
+                    },
+                }]
+        }], propDecorators: { match: [{ type: i0.Input, args: [{ isSignal: true, alias: "match", required: false }] }] } });
+
+/**
+ * Directive to mark content as the prefix slot in a form field.
+ *
+ * Prefix content appears before the input (e.g., currency symbol, icon).
+ *
+ * @tokens `--color-muted-foreground`
+ *
+ * @example Currency prefix
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Amount</label>
+ *   <span comPrefix>$</span>
+ *   <input comInput type="number" formControlName="amount" />
+ * </com-form-field>
+ * ```
+ *
+ * @example Icon prefix
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Search</label>
+ *   <svg comPrefix class="size-4">...</svg>
+ *   <input comInput formControlName="query" />
+ * </com-form-field>
+ * ```
+ */
+class ComPrefix {
+    prefixVariants = prefixVariants;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComPrefix, isStandalone: true, selector: "[comPrefix]", host: { properties: { "class": "prefixVariants()" } }, exportAs: ["comPrefix"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComPrefix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comPrefix]',
+                    exportAs: 'comPrefix',
+                    host: {
+                        '[class]': 'prefixVariants()',
+                    },
+                }]
+        }] });
+
+/**
+ * Directive to mark content as the suffix slot in a form field.
+ *
+ * Suffix content appears after the input (e.g., unit, clear button, visibility toggle).
+ *
+ * @tokens `--color-muted-foreground`
+ *
+ * @example Unit suffix
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Weight</label>
+ *   <input comInput type="number" formControlName="weight" />
+ *   <span comSuffix>kg</span>
+ * </com-form-field>
+ * ```
+ *
+ * @example Clear button suffix
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Search</label>
+ *   <input comInput formControlName="query" />
+ *   <button comSuffix type="button" (click)="clearSearch()">
+ *     <svg class="size-4">...</svg>
+ *   </button>
+ * </com-form-field>
+ * ```
+ *
+ * @example Password visibility toggle
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Password</label>
+ *   <input comInput [type]="showPassword ? 'text' : 'password'" formControlName="password" />
+ *   <button comSuffix type="button" (click)="showPassword = !showPassword">
+ *     <svg class="size-4">...</svg>
+ *   </button>
+ * </com-form-field>
+ * ```
+ */
+class ComSuffix {
+    suffixVariants = suffixVariants;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComSuffix, isStandalone: true, selector: "[comSuffix]", host: { properties: { "class": "suffixVariants()" } }, exportAs: ["comSuffix"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComSuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comSuffix]',
+                    exportAs: 'comSuffix',
+                    host: {
+                        '[class]': 'suffixVariants()',
+                    },
+                }]
+        }] });
+
+/**
+ * Strategy for determining when to display errors in a form field.
+ *
+ * The default behavior shows errors when the control is invalid AND
+ * either touched OR the parent form has been submitted.
+ *
+ * @example Override globally with eager error display
+ * ```ts
+ * @Injectable()
+ * export class EagerErrorStateMatcher extends ErrorStateMatcher {
+ *   override isErrorState(control: AbstractControl | null): boolean {
+ *     return !!(control?.invalid && control.dirty);
+ *   }
+ * }
+ *
+ * // In app config
+ * providers: [{ provide: ErrorStateMatcher, useClass: EagerErrorStateMatcher }]
+ * ```
+ *
+ * @example Per-field override
+ * ```html
+ * <com-form-field>
+ *   <input comInput [errorStateMatcher]="eagerMatcher" />
+ * </com-form-field>
+ * ```
+ */
+class ErrorStateMatcher {
+    isErrorState(control, form) {
+        return !!(control?.invalid && (control.touched || form?.submitted));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ErrorStateMatcher, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Auto-incrementing ID counter. */
+let nextId = 0;
+/**
+ * Directive applied to native `<input>` and `<textarea>` elements to bridge
+ * them to the form field wrapper. Implements the `FormFieldControl` contract.
+ *
+ * This directive does NOT implement `ControlValueAccessor` - it relies on
+ * Angular's built-in value accessors (`DefaultValueAccessor`, `NumberValueAccessor`, etc.)
+ * that are already applied to native elements with `formControlName` or `ngModel`.
+ *
+ * Instead, this directive reports state (focused, empty, disabled, error) to the
+ * parent form field for proper visual presentation.
+ *
+ * @tokens (styling is controlled by the parent form field)
+ *
+ * @example Basic usage
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Email</label>
+ *   <input comInput formControlName="email" placeholder="you@example.com" />
+ * </com-form-field>
+ * ```
+ *
+ * @example Textarea
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Description</label>
+ *   <textarea comInput formControlName="description"></textarea>
+ * </com-form-field>
+ * ```
+ *
+ * @example Custom error state matcher
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Code</label>
+ *   <input comInput formControlName="code" [errorStateMatcher]="eagerMatcher" />
+ * </com-form-field>
+ * ```
+ */
+class ComInput {
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    autofillMonitor = inject(AutofillMonitor);
+    defaultErrorStateMatcher = inject(ErrorStateMatcher);
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    /** NgControl bound to this input (if using reactive forms). */
+    ngControl = inject(NgControl, { optional: true, self: true });
+    // Inputs
+    inputId = input(undefined, { ...(ngDevMode ? { debugName: "inputId" } : {}), alias: 'id' });
+    inputDisabled = input(false, { ...(ngDevMode ? { debugName: "inputDisabled" } : {}), alias: 'disabled',
+        transform: booleanAttribute });
+    inputRequired = input(false, { ...(ngDevMode ? { debugName: "inputRequired" } : {}), alias: 'required',
+        transform: booleanAttribute });
+    userAriaDescribedBy = input('', { ...(ngDevMode ? { debugName: "userAriaDescribedBy" } : {}), alias: 'aria-describedby' });
+    errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : []));
+    // Internal state
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
+    _autofilled = signal(false, ...(ngDevMode ? [{ debugName: "_autofilled" }] : []));
+    _empty = signal(true, ...(ngDevMode ? [{ debugName: "_empty" }] : []));
+    _uniqueId = `com-input-${nextId++}`;
+    _appearance = signal('outline', ...(ngDevMode ? [{ debugName: "_appearance" }] : []));
+    // Public signals implementing FormFieldControl
+    focused = this._focused.asReadonly();
+    id = computed(() => this.inputId() ?? this._uniqueId, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    shouldLabelFloat = computed(() => {
+        return this._focused() || !this._empty() || this._autofilled();
+    }, ...(ngDevMode ? [{ debugName: "shouldLabelFloat" }] : []));
+    disabled = computed(() => {
+        if (this.inputDisabled())
+            return true;
+        return this.ngControl?.control?.disabled ?? false;
+    }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    required = computed(() => {
+        if (this.inputRequired())
+            return true;
+        const control = this.ngControl?.control;
+        if (control?.validator) {
+            const result = control.validator({ value: '' });
+            return result?.['required'] !== undefined;
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    errorState = computed(() => {
+        // Read _focused to trigger re-evaluation on blur (when touched changes)
+        // Read _empty to trigger re-evaluation on input (when validity changes)
+        this._focused();
+        this._empty();
+        const matcher = this.errorStateMatcher() ?? this.defaultErrorStateMatcher;
+        const form = this.parentFormGroup ?? this.parentForm;
+        return matcher.isErrorState(this.ngControl?.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : []));
+    /** Combined aria-describedby including user-provided and form-field-generated IDs. */
+    _describedByIds = signal('', ...(ngDevMode ? [{ debugName: "_describedByIds" }] : []));
+    ariaDescribedBy = computed(() => {
+        const userIds = this.userAriaDescribedBy();
+        const fieldIds = this._describedByIds();
+        return [userIds, fieldIds].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+    /** Computed host classes including appearance-based padding. */
+    hostClasses = computed(() => {
+        const base = 'peer w-full bg-transparent text-foreground placeholder:text-input-placeholder outline-none border-none disabled:cursor-not-allowed disabled:text-disabled-foreground px-3';
+        const padding = this._appearance() === 'fill' ? 'pt-5 pb-1.5' : 'py-2.5';
+        return `${base} ${padding}`;
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    ngOnInit() {
+        this.updateEmpty();
+        const autofillSub = this.autofillMonitor.monitor(this.elementRef).subscribe((event) => {
+            this._autofilled.set(event.isAutofilled);
+        });
+        this.destroyRef.onDestroy(() => {
+            autofillSub.unsubscribe();
+            this.autofillMonitor.stopMonitoring(this.elementRef);
+        });
+    }
+    onFocus() {
+        this._focused.set(true);
+    }
+    onBlur() {
+        this._focused.set(false);
+    }
+    onInput() {
+        this.updateEmpty();
+    }
+    updateEmpty() {
+        this._empty.set(!this.elementRef.nativeElement.value);
+    }
+    // FormFieldControl methods
+    onContainerClick(event) {
+        if (!this.disabled() && event.target !== this.elementRef.nativeElement) {
+            this.elementRef.nativeElement.focus();
+        }
+    }
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids) {
+        this._describedByIds.set(ids);
+    }
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance) {
+        this._appearance.set(appearance);
+    }
+    /** Focus the native element. */
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComInput, isStandalone: true, selector: "input[comInput], textarea[comInput]", inputs: { inputId: { classPropertyName: "inputId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputRequired: { classPropertyName: "inputRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userAriaDescribedBy: { classPropertyName: "userAriaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "input": "onInput()" }, properties: { "id": "id()", "disabled": "disabled()", "required": "required()", "attr.aria-invalid": "errorState() || null", "attr.aria-required": "required() || null", "attr.aria-describedby": "ariaDescribedBy() || null", "class": "hostClasses()" } }, providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComInput) }], exportAs: ["comInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[comInput], textarea[comInput]',
+                    exportAs: 'comInput',
+                    providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComInput) }],
+                    host: {
+                        '[id]': 'id()',
+                        '[disabled]': 'disabled()',
+                        '[required]': 'required()',
+                        '[attr.aria-invalid]': 'errorState() || null',
+                        '[attr.aria-required]': 'required() || null',
+                        '[attr.aria-describedby]': 'ariaDescribedBy() || null',
+                        '[class]': 'hostClasses()',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(input)': 'onInput()',
+                    },
+                }]
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], userAriaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }] } });
+
+const FORM_FIELD_DEFAULTS = new InjectionToken('FORM_FIELD_DEFAULTS', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+
+/**
+ * Form field wrapper providing visual structure for form inputs.
+ *
+ * Provides floating labels, borders (outline/fill appearance), hints, errors,
+ * and prefix/suffix slots. Automatically wires ARIA attributes for accessibility.
+ *
+ * The form field reads state from its inner `FormFieldControl` child (typically
+ * a `ComInput` directive) and renders UI accordingly.
+ *
+ * @tokens `--color-foreground`, `--color-input-border`, `--color-input-background`,
+ *         `--color-primary`, `--color-accent`, `--color-warn`, `--color-ring`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-disabled`,
+ *         `--color-disabled-foreground`, `--color-background`, `--radius-input`
+ *
+ * @example Basic outline field
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Email</label>
+ *   <input comInput formControlName="email" />
+ *   <span comHint>We'll never share your email.</span>
+ *   <span comError match="required">Email is required.</span>
+ * </com-form-field>
+ * ```
+ *
+ * @example Fill appearance
+ * ```html
+ * <com-form-field appearance="fill">
+ *   <label comLabel>Username</label>
+ *   <input comInput formControlName="username" />
+ * </com-form-field>
+ * ```
+ *
+ * @example With prefix and suffix
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Amount</label>
+ *   <span comPrefix>$</span>
+ *   <input comInput type="number" formControlName="amount" />
+ *   <span comSuffix>.00</span>
+ * </com-form-field>
+ * ```
+ */
+class ComFormField {
+    defaults = inject(FORM_FIELD_DEFAULTS, { optional: true });
+    // Content children
+    control = contentChild(FormFieldControl, ...(ngDevMode ? [{ debugName: "control" }] : []));
+    inputDirective = contentChild(ComInput, ...(ngDevMode ? [{ debugName: "inputDirective" }] : []));
+    labelChild = contentChild(ComLabel, ...(ngDevMode ? [{ debugName: "labelChild" }] : []));
+    hintChildren = contentChildren(ComHint, ...(ngDevMode ? [{ debugName: "hintChildren" }] : []));
+    errorChildren = contentChildren(ComError, ...(ngDevMode ? [{ debugName: "errorChildren" }] : []));
+    prefixChild = contentChild(ComPrefix, ...(ngDevMode ? [{ debugName: "prefixChild" }] : []));
+    suffixChild = contentChild(ComSuffix, ...(ngDevMode ? [{ debugName: "suffixChild" }] : []));
+    // Inputs with defaults fallback
+    appearance = input(this.defaults?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    color = input(this.defaults?.color ?? 'primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    floatLabel = input(this.defaults?.floatLabel ?? 'auto', ...(ngDevMode ? [{ debugName: "floatLabel" }] : []));
+    hideRequiredMarker = input(this.defaults?.hideRequiredMarker ?? false, { ...(ngDevMode ? { debugName: "hideRequiredMarker" } : {}), transform: booleanAttribute });
+    subscriptSizing = input(this.defaults?.subscriptSizing ?? 'fixed', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    // Derived state from inner control
+    shouldLabelFloat = computed(() => {
+        if (this.floatLabel() === 'always')
+            return true;
+        return this.control()?.shouldLabelFloat() ?? false;
+    }, ...(ngDevMode ? [{ debugName: "shouldLabelFloat" }] : []));
+    isFocused = computed(() => this.control()?.focused() ?? false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    isDisabled = computed(() => this.control()?.disabled() ?? false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    hasError = computed(() => this.control()?.errorState() ?? false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    hasPrefix = computed(() => !!this.prefixChild(), ...(ngDevMode ? [{ debugName: "hasPrefix" }] : []));
+    hasSuffix = computed(() => !!this.suffixChild(), ...(ngDevMode ? [{ debugName: "hasSuffix" }] : []));
+    showRequiredMarker = computed(() => {
+        if (this.hideRequiredMarker())
+            return false;
+        return this.control()?.required() ?? false;
+    }, ...(ngDevMode ? [{ debugName: "showRequiredMarker" }] : []));
+    showErrors = computed(() => this.hasError() && this.errorChildren().length > 0, ...(ngDevMode ? [{ debugName: "showErrors" }] : []));
+    // Computed classes
+    hostClasses = computed(() => mergeClasses(formFieldVariants({ disabled: this.isDisabled() }), this.userClass()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    containerClasses = computed(() => formFieldContainerVariants({
+        appearance: this.appearance(),
+        color: this.color(),
+        focused: this.isFocused(),
+        error: this.hasError(),
+        disabled: this.isDisabled(),
+    }), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    labelClasses = computed(() => formFieldLabelVariants({
+        appearance: this.appearance(),
+        floating: this.shouldLabelFloat(),
+        color: this.color(),
+        error: this.hasError(),
+        focused: this.isFocused(),
+        disabled: this.isDisabled(),
+    }), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    subscriptClasses = computed(() => formFieldSubscriptVariants({ sizing: this.subscriptSizing() }), ...(ngDevMode ? [{ debugName: "subscriptClasses" }] : []));
+    constructor() {
+        // Wire up label to control
+        effect(() => {
+            const label = this.labelChild();
+            const ctrl = this.control();
+            if (label && ctrl) {
+                label.setForId(ctrl.id());
+            }
+        });
+        // Wire up aria-describedby on the control
+        effect(() => {
+            const ctrl = this.control();
+            if (!ctrl || !('setDescribedByIds' in ctrl))
+                return;
+            const ids = this.showErrors()
+                ? this.errorChildren().filter((e) => e.shouldShow()).map((e) => e.id)
+                : this.hintChildren().map((h) => h.id);
+            ctrl.setDescribedByIds(ids.join(' '));
+        });
+        // Wire up appearance to control for proper styling
+        effect(() => {
+            const ctrl = this.control();
+            if (ctrl && 'setAppearance' in ctrl) {
+                ctrl.setAppearance(this.appearance());
+            }
+        });
+        // Wire up control reference to error directives (re-runs on error state change)
+        effect(() => {
+            // Read hasError to trigger re-evaluation when validation state changes
+            this.hasError();
+            const ctrl = this.control();
+            const ngControl = ctrl?.ngControl?.control ?? null;
+            this.errorChildren().forEach((error) => error.setControl(ngControl));
+        });
+    }
+    onContainerClick(event) {
+        this.control()?.onContainerClick(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComFormField, isStandalone: true, selector: "com-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, hideRequiredMarker: { classPropertyName: "hideRequiredMarker", publicName: "hideRequiredMarker", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "class.com-form-field--focused": "isFocused()", "class.com-form-field--disabled": "isDisabled()", "class.com-form-field--error": "hasError()", "class.com-form-field--floating": "shouldLabelFloat()", "class.com-form-field--has-label": "!!labelChild()" } }, queries: [{ propertyName: "control", first: true, predicate: FormFieldControl, descendants: true, isSignal: true }, { propertyName: "inputDirective", first: true, predicate: ComInput, descendants: true, isSignal: true }, { propertyName: "labelChild", first: true, predicate: ComLabel, descendants: true, isSignal: true }, { propertyName: "hintChildren", predicate: ComHint, isSignal: true }, { propertyName: "errorChildren", predicate: ComError, isSignal: true }, { propertyName: "prefixChild", first: true, predicate: ComPrefix, descendants: true, isSignal: true }, { propertyName: "suffixChild", first: true, predicate: ComSuffix, descendants: true, isSignal: true }], exportAs: ["comFormField"], ngImport: i0, template: `
+    <div [class]="containerClasses()" (click)="onContainerClick($event)">
+      <div class="flex items-center w-full">
+        @if (hasPrefix()) {
+          <ng-content select="[comPrefix]" />
+        }
+        @if (labelChild()) {
+          <span [class]="labelClasses()">
+            <ng-content select="[comLabel]" />
+            @if (showRequiredMarker()) {
+              <span class="text-warn" aria-hidden="true">&thinsp;*</span>
+            }
+          </span>
+        }
+        <div class="flex-1 min-w-0">
+          <ng-content />
+        </div>
+        @if (hasSuffix()) {
+          <ng-content select="[comSuffix]" />
+        }
+      </div>
+    </div>
+
+    <div [class]="subscriptClasses()">
+      <div [class.hidden]="!showErrors()">
+        <ng-content select="[comError]" />
+      </div>
+      <div [class.hidden]="showErrors()" class="flex justify-between w-full gap-2">
+        <ng-content select="[comHint]:not([align='end'])" />
+        <ng-content select="[comHint][align='end']" />
+      </div>
+    </div>
+  `, isInline: true, styles: ["com-form-field.com-form-field--has-label:not(.com-form-field--floating) input::placeholder,com-form-field.com-form-field--has-label:not(.com-form-field--floating) textarea::placeholder{color:transparent}com-form-field.com-form-field--has-label:not(.com-form-field--floating) com-dropdown .text-placeholder{display:none}com-form-field com-dropdown{display:block;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-form-field', exportAs: 'comFormField', template: `
+    <div [class]="containerClasses()" (click)="onContainerClick($event)">
+      <div class="flex items-center w-full">
+        @if (hasPrefix()) {
+          <ng-content select="[comPrefix]" />
+        }
+        @if (labelChild()) {
+          <span [class]="labelClasses()">
+            <ng-content select="[comLabel]" />
+            @if (showRequiredMarker()) {
+              <span class="text-warn" aria-hidden="true">&thinsp;*</span>
+            }
+          </span>
+        }
+        <div class="flex-1 min-w-0">
+          <ng-content />
+        </div>
+        @if (hasSuffix()) {
+          <ng-content select="[comSuffix]" />
+        }
+      </div>
+    </div>
+
+    <div [class]="subscriptClasses()">
+      <div [class.hidden]="!showErrors()">
+        <ng-content select="[comError]" />
+      </div>
+      <div [class.hidden]="showErrors()" class="flex justify-between w-full gap-2">
+        <ng-content select="[comHint]:not([align='end'])" />
+        <ng-content select="[comHint][align='end']" />
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'hostClasses()',
+                        '[class.com-form-field--focused]': 'isFocused()',
+                        '[class.com-form-field--disabled]': 'isDisabled()',
+                        '[class.com-form-field--error]': 'hasError()',
+                        '[class.com-form-field--floating]': 'shouldLabelFloat()',
+                        '[class.com-form-field--has-label]': '!!labelChild()',
+                    }, styles: ["com-form-field.com-form-field--has-label:not(.com-form-field--floating) input::placeholder,com-form-field.com-form-field--has-label:not(.com-form-field--floating) textarea::placeholder{color:transparent}com-form-field.com-form-field--has-label:not(.com-form-field--floating) com-dropdown .text-placeholder{display:none}com-form-field com-dropdown{display:block;width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormFieldControl), { isSignal: true }] }], inputDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComInput), { isSignal: true }] }], labelChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComLabel), { isSignal: true }] }], hintChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ComHint), { isSignal: true }] }], errorChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ComError), { isSignal: true }] }], prefixChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComPrefix), { isSignal: true }] }], suffixChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComSuffix), { isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], hideRequiredMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideRequiredMarker", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+// Public API for the form-field component
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComError, ComFormField, ComHint, ComInput, ComLabel, ComPrefix, ComSuffix, ErrorStateMatcher, FORM_FIELD_DEFAULTS, FormFieldControl, errorVariants, formFieldContainerVariants, formFieldLabelVariants, formFieldSubscriptVariants, formFieldVariants, hintVariants, prefixVariants, suffixVariants };
+//# sourceMappingURL=ngx-com-components-form-field.mjs.map