@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-form-field.mjs

@@ -0,0 +1,572 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, computed, isDevMode, Directive, input, contentChild, contentChildren, viewChild, signal, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { tv } from 'tailwind-variants';
+
+/**
+ * Contract every ngx-tw form-field-compatible control must implement. A
+ * concrete control provides itself under {@link TW_FORM_FIELD_CONTROL} so the
+ * surrounding `FormFieldComponent` can mirror its state and wire ARIA.
+ */
+class FormFieldControl {
+    /** Active validation errors map keyed by validator name (e.g. `{ required: true, email: true }`). Returns `null` when the control has no validation errors. Drives `[twError match="…"]` filtering inside the form-field. Optional — controls without a backing `NgControl` may omit it. */
+    errors;
+    /** Optional consumer-supplied `aria-labelledby` ids the form-field preserves when merging in the projected label id. Controls that consume label pushdown (non-native triggers) override this. */
+    userAriaLabelledby;
+    /**
+     * Called by the form-field to push the merged `aria-labelledby` ids onto the control's host element.
+     * Default is a no-op — native `<input>` controls rely on the label's `for=` attribute for the canonical association.
+     * Non-native controls (combobox triggers, date-pickers, etc.) override this to set the attribute explicitly.
+     */
+    setLabelledByIds(_ids) {
+        // Default no-op. Controls override when label pushdown is required for accessibility.
+    }
+}
+/**
+ * Injection token matching {@link FormFieldControl}. Controls register via
+ * `providers: [{ provide: TW_FORM_FIELD_CONTROL, useExisting: MyControl }]`.
+ */
+const TW_FORM_FIELD_CONTROL = new InjectionToken('TW_FORM_FIELD_CONTROL');
+// ── Unique ID counters ──
+let nextLabelId = 0;
+let nextHintId = 0;
+let nextErrorId = 0;
+// ── tv() config ──
+const formFieldVariants = tv({
+    slots: {
+        root: 'block text-fg',
+        controlWrapper: 'relative flex items-stretch gap-2 rounded-md bg-transparent transition-colors duration-normal motion-reduce:transition-none',
+        infix: 'relative flex-1 flex items-center min-w-0 [&_input::placeholder]:transition-opacity [&_input::placeholder]:duration-normal [&_textarea::placeholder]:transition-opacity [&_textarea::placeholder]:duration-normal',
+        labelWrapper: 'absolute pointer-events-none flex items-center max-w-[calc(100%-1.5rem)] transition-[top,left,color,transform] duration-normal motion-reduce:transition-none origin-[top_left]',
+        label: 'text-fg-muted truncate transition-[font-size,color] duration-normal motion-reduce:transition-none',
+        requiredMarker: 'text-error-600 ml-0.5',
+        prefix: 'flex items-center shrink-0 text-fg-muted',
+        suffix: 'flex items-center shrink-0 text-fg-muted',
+        subscriptWrapper: 'mt-1 text-xs flex gap-2',
+        hint: 'text-fg-muted',
+        error: 'text-error-600 font-medium',
+    },
+    variants: {
+        appearance: {
+            outline: {
+                controlWrapper: 'border border-border hover:border-border-strong',
+            },
+            filled: {
+                controlWrapper: 'bg-surface-muted border-b border-border hover:bg-surface-sunken',
+                infix: 'items-end',
+            },
+        },
+        size: {
+            xs: {},
+            sm: {},
+            md: {},
+            lg: {},
+            xl: {},
+        },
+        color: {
+            primary: {},
+            secondary: {},
+            accent: {},
+            neutral: {},
+            info: {},
+            success: {},
+            warning: {},
+            error: {},
+        },
+        focused: {
+            true: {},
+            false: {},
+        },
+        invalid: {
+            true: {},
+            false: {},
+        },
+        labelFloated: {
+            true: {
+                labelWrapper: 'top-1 left-2',
+            },
+            false: {
+                labelWrapper: 'top-1/2 -translate-y-1/2 left-3',
+            },
+        },
+        subscriptReserve: {
+            true: { subscriptWrapper: 'min-h-5' },
+            false: {},
+        },
+        disabled: {
+            true: { root: 'opacity-50 pointer-events-none' },
+            false: {},
+        },
+    },
+    compoundVariants: [
+        // ── Padding × (appearance, size) ──
+        { appearance: 'outline', size: 'xs', class: { controlWrapper: 'px-2 py-1' } },
+        { appearance: 'outline', size: 'sm', class: { controlWrapper: 'px-3 py-1.5' } },
+        { appearance: 'outline', size: 'md', class: { controlWrapper: 'px-3 py-2' } },
+        { appearance: 'outline', size: 'lg', class: { controlWrapper: 'px-4 py-2.5' } },
+        { appearance: 'outline', size: 'xl', class: { controlWrapper: 'px-5 py-3' } },
+        { appearance: 'filled', size: 'xs', class: { controlWrapper: 'px-2 pt-5 pb-1' } },
+        { appearance: 'filled', size: 'sm', class: { controlWrapper: 'px-3 pt-5 pb-1.5' } },
+        { appearance: 'filled', size: 'md', class: { controlWrapper: 'px-3 pt-6 pb-2' } },
+        { appearance: 'filled', size: 'lg', class: { controlWrapper: 'px-4 pt-7 pb-2.5' } },
+        { appearance: 'filled', size: 'xl', class: { controlWrapper: 'px-5 pt-8 pb-3' } },
+        // ── Label font-size × (size, labelFloated) ──
+        { size: 'xs', labelFloated: false, class: { label: 'text-xs' } },
+        { size: 'xs', labelFloated: true, class: { label: 'text-2xs' } },
+        { size: 'sm', labelFloated: false, class: { label: 'text-sm' } },
+        { size: 'sm', labelFloated: true, class: { label: 'text-xs' } },
+        { size: 'md', labelFloated: false, class: { label: 'text-sm' } },
+        { size: 'md', labelFloated: true, class: { label: 'text-xs' } },
+        { size: 'lg', labelFloated: false, class: { label: 'text-base' } },
+        { size: 'lg', labelFloated: true, class: { label: 'text-sm' } },
+        { size: 'xl', labelFloated: false, class: { label: 'text-base' } },
+        { size: 'xl', labelFloated: true, class: { label: 'text-sm' } },
+        // ── Outline + focused → colored border ──
+        { appearance: 'outline', focused: true, color: 'primary', class: { controlWrapper: 'border-primary-500' } },
+        { appearance: 'outline', focused: true, color: 'secondary', class: { controlWrapper: 'border-secondary-500' } },
+        { appearance: 'outline', focused: true, color: 'accent', class: { controlWrapper: 'border-accent-500' } },
+        { appearance: 'outline', focused: true, color: 'neutral', class: { controlWrapper: 'border-border-strong' } },
+        { appearance: 'outline', focused: true, color: 'info', class: { controlWrapper: 'border-info-500' } },
+        { appearance: 'outline', focused: true, color: 'success', class: { controlWrapper: 'border-success-500' } },
+        { appearance: 'outline', focused: true, color: 'warning', class: { controlWrapper: 'border-warning-500' } },
+        { appearance: 'outline', focused: true, color: 'error', class: { controlWrapper: 'border-error-500' } },
+        // ── Filled + focused → colored bottom border ──
+        { appearance: 'filled', focused: true, color: 'primary', class: { controlWrapper: 'border-b-2 border-primary-500' } },
+        { appearance: 'filled', focused: true, color: 'secondary', class: { controlWrapper: 'border-b-2 border-secondary-500' } },
+        { appearance: 'filled', focused: true, color: 'accent', class: { controlWrapper: 'border-b-2 border-accent-500' } },
+        { appearance: 'filled', focused: true, color: 'neutral', class: { controlWrapper: 'border-b-2 border-border-strong' } },
+        { appearance: 'filled', focused: true, color: 'info', class: { controlWrapper: 'border-b-2 border-info-500' } },
+        { appearance: 'filled', focused: true, color: 'success', class: { controlWrapper: 'border-b-2 border-success-500' } },
+        { appearance: 'filled', focused: true, color: 'warning', class: { controlWrapper: 'border-b-2 border-warning-500' } },
+        { appearance: 'filled', focused: true, color: 'error', class: { controlWrapper: 'border-b-2 border-error-500' } },
+        // ── Floated label + focused → colored label ──
+        { labelFloated: true, focused: true, color: 'primary', class: { label: 'text-primary-600' } },
+        { labelFloated: true, focused: true, color: 'secondary', class: { label: 'text-secondary-600' } },
+        { labelFloated: true, focused: true, color: 'accent', class: { label: 'text-accent-600' } },
+        { labelFloated: true, focused: true, color: 'neutral', class: { label: 'text-fg' } },
+        { labelFloated: true, focused: true, color: 'info', class: { label: 'text-info-600' } },
+        { labelFloated: true, focused: true, color: 'success', class: { label: 'text-success-600' } },
+        { labelFloated: true, focused: true, color: 'warning', class: { label: 'text-warning-600' } },
+        { labelFloated: true, focused: true, color: 'error', class: { label: 'text-error-600' } },
+        // ── Outline + floated label → sit centered on the top border with a surface notch ──
+        { appearance: 'outline', labelFloated: true, class: { labelWrapper: 'bg-surface px-1 top-0 -translate-y-1/2' } },
+        // ── Filled + resting label → align vertically with the input baseline (input is items-end inside an asymmetric pt/pb container) ──
+        { appearance: 'filled', labelFloated: false, class: { labelWrapper: 'top-[calc(50%+0.5rem)]' } },
+        // ── Invalid overrides (declared last so twMerge lets them win) ──
+        { invalid: true, appearance: 'outline', class: { controlWrapper: 'border-error-500' } },
+        { invalid: true, appearance: 'filled', class: { controlWrapper: 'border-b-2 border-error-500' } },
+        { invalid: true, labelFloated: true, class: { label: 'text-error-600' } },
+    ],
+    defaultVariants: {
+        appearance: 'outline',
+        size: 'md',
+        color: 'primary',
+        focused: false,
+        invalid: false,
+        labelFloated: false,
+        subscriptReserve: true,
+        disabled: false,
+    },
+}, {
+    twMerge: true,
+});
+// ── LabelDirective ──
+class LabelDirective {
+    formField = inject(FormFieldComponent);
+    elementRef = inject((ElementRef));
+    /** @internal */
+    id = `tw-form-field-label-${nextLabelId++}`;
+    /** @internal */
+    controlId = computed(() => this.formField.control()?.id() ?? null, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    classes = computed(() => this.formField.labelClasses(), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (isDevMode()) {
+            const tag = this.elementRef.nativeElement.tagName;
+            if (tag !== 'LABEL') {
+                console.warn(`[tw-form-field] twLabel should be applied to a <label> element for the native \`for\`/\`id\` association to work; got <${tag.toLowerCase()}>. Non-native controls (e.g. tw-select) still receive label pushdown via aria-labelledby.`);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: LabelDirective, isStandalone: true, selector: "[twLabel]", host: { properties: { "attr.id": "id", "attr.for": "controlId()", "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twLabel]',
+                    host: {
+                        '[attr.id]': 'id',
+                        '[attr.for]': 'controlId()',
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+// ── HintDirective ──
+class HintDirective {
+    formField = inject(FormFieldComponent);
+    /** @internal */
+    id = `tw-form-field-hint-${nextHintId++}`;
+    /** Alignment within the subscript row. `'end'` pushes the hint to the right. When unset, the form-field's `hintAlign` input supplies the default. */
+    align = input(undefined, ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    effectiveAlign = computed(() => this.align() ?? this.formField.hintAlign(), ...(ngDevMode ? [{ debugName: "effectiveAlign" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    classes = computed(() => {
+        const base = this.formField.hintClasses();
+        return this.effectiveAlign() === 'end' ? `${base} ml-auto` : base;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: HintDirective, isStandalone: true, selector: "[twHint]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id", "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HintDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twHint]',
+                    host: {
+                        '[attr.id]': 'id',
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+// ── ErrorDirective ──
+class ErrorDirective {
+    formField = inject(FormFieldComponent);
+    /** @internal */
+    id = `tw-form-field-error-${nextErrorId++}`;
+    /** Validation error key this message is bound to (e.g. `'required'`, `'email'`, `'minlength'`). When set, the error renders only while the surrounding control reports that key in its active validation errors. When omitted, the error displays whenever the form-field is in an error state — useful as a generic fallback. */
+    match = input(undefined, ...(ngDevMode ? [{ debugName: "match" }] : /* istanbul ignore next */ []));
+    /** @internal Whether this error should display given the control's active error keys. */
+    shouldShow = computed(() => {
+        const key = this.match();
+        if (!key)
+            return true;
+        return this.formField.activeErrorKeys().has(key);
+    }, ...(ngDevMode ? [{ debugName: "shouldShow" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    classes = computed(() => this.formField.errorClasses(), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: ErrorDirective, isStandalone: true, selector: "[twError]", inputs: { match: { classPropertyName: "match", publicName: "match", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert", "aria-live": "polite" }, properties: { "attr.id": "id", "class": "classes()", "class.hidden": "!shouldShow()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ErrorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twError]',
+                    host: {
+                        'role': 'alert',
+                        'aria-live': 'polite',
+                        '[attr.id]': 'id',
+                        '[class]': 'classes()',
+                        '[class.hidden]': '!shouldShow()',
+                    },
+                }]
+        }], propDecorators: { match: [{ type: i0.Input, args: [{ isSignal: true, alias: "match", required: false }] }] } });
+// ── PrefixDirective ──
+class PrefixDirective {
+    formField = inject(FormFieldComponent);
+    /** @internal Used by the form-field to measure the prefix area and align the resting label after it. */
+    elementRef = inject((ElementRef));
+    /** @internal */
+    prefixClasses = computed(() => this.formField.prefixClasses(), ...(ngDevMode ? [{ debugName: "prefixClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: PrefixDirective, isStandalone: true, selector: "[twPrefix]", host: { properties: { "class": "prefixClasses()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twPrefix]',
+                    host: {
+                        '[class]': 'prefixClasses()',
+                    },
+                }]
+        }] });
+// ── SuffixDirective ──
+class SuffixDirective {
+    formField = inject(FormFieldComponent);
+    /** @internal */
+    suffixClasses = computed(() => this.formField.suffixClasses(), ...(ngDevMode ? [{ debugName: "suffixClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SuffixDirective, isStandalone: true, selector: "[twSuffix]", host: { properties: { "class": "suffixClasses()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twSuffix]',
+                    host: {
+                        '[class]': 'suffixClasses()',
+                    },
+                }]
+        }] });
+// ── PrefixIconDirective / SuffixIconDirective ──
+// Opt-in directives that apply a glyph-sized adornment (`size-5 text-fg-muted shrink-0`) so consumers
+// don't pick `size-4` vs `size-5` ad-hoc. Use these for SVG icons; use [twPrefix]/[twSuffix]
+// when the adornment is text (currency, units, kbd hints).
+// They extend Prefix/SuffixDirective so the form-field's content query picks them up as a prefix/suffix
+// when computing the resting-label offset.
+class PrefixIconDirective extends PrefixDirective {
+    /** @internal */
+    prefixClasses = computed(() => `${this.formField.prefixClasses()} size-5`, ...(ngDevMode ? [{ debugName: "prefixClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PrefixIconDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: PrefixIconDirective, isStandalone: true, selector: "[twPrefixIcon]", host: { properties: { "class": "prefixClasses()" } }, providers: [{ provide: PrefixDirective, useExisting: PrefixIconDirective }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PrefixIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twPrefixIcon]',
+                    host: {
+                        '[class]': 'prefixClasses()',
+                    },
+                    providers: [{ provide: PrefixDirective, useExisting: PrefixIconDirective }],
+                }]
+        }] });
+class SuffixIconDirective extends SuffixDirective {
+    /** @internal */
+    suffixClasses = computed(() => `${this.formField.suffixClasses()} size-5`, ...(ngDevMode ? [{ debugName: "suffixClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SuffixIconDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SuffixIconDirective, isStandalone: true, selector: "[twSuffixIcon]", host: { properties: { "class": "suffixClasses()" } }, providers: [{ provide: SuffixDirective, useExisting: SuffixIconDirective }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SuffixIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twSuffixIcon]',
+                    host: {
+                        '[class]': 'suffixClasses()',
+                    },
+                    providers: [{ provide: SuffixDirective, useExisting: SuffixIconDirective }],
+                }]
+        }] });
+// ── FormFieldComponent ──
+class FormFieldComponent {
+    /** Visual appearance of the field container. `'outline'` draws a full border around the control; `'filled'` uses a filled surface with a bottom border. Defaults to `'outline'`. */
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** Density of the field container. Maps to the inline-padding scale (`px-2 py-1` xs … `px-5 py-3` xl) and the floating-label font scale. Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Floating label behavior. `'auto'` floats when focused or non-empty; `'always'` stays floated; `'never'` disables floating entirely (the label wrapper is not rendered and the wrapped control's placeholder is always visible). Defaults to `'auto'`. */
+    floatLabel = input('auto', ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
+    /** Subscript sizing strategy. `'fixed'` always reserves a 20px row for hints/errors so adjacent fields align; `'dynamic'` collapses the row when no hint/error is projected. Defaults to `'fixed'`. */
+    subscriptSizing = input('fixed', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : /* istanbul ignore next */ []));
+    /** Hides the visual required marker (`*`) even when the wrapped control is required. `aria-required` on the control is unaffected. Defaults to `false`. */
+    hideRequiredMarker = input(false, ...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
+    /** Semantic color for focused/active accents (focused border, floated label). Defaults to `'primary'`. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Default alignment for a `twHint` element that does not specify its own `align`. Defaults to `'start'`. */
+    hintAlign = input('start', ...(ngDevMode ? [{ debugName: "hintAlign" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    control = contentChild(TW_FORM_FIELD_CONTROL, { ...(ngDevMode ? { debugName: "control" } : /* istanbul ignore next */ {}), descendants: true });
+    /** @internal */
+    labelChild = contentChild(LabelDirective, { ...(ngDevMode ? { debugName: "labelChild" } : /* istanbul ignore next */ {}), descendants: true });
+    /** @internal */
+    hintChildren = contentChildren(HintDirective, { ...(ngDevMode ? { debugName: "hintChildren" } : /* istanbul ignore next */ {}), descendants: true });
+    /** @internal */
+    errorChildren = contentChildren(ErrorDirective, { ...(ngDevMode ? { debugName: "errorChildren" } : /* istanbul ignore next */ {}), descendants: true });
+    /** @internal */
+    prefixChildren = contentChildren(PrefixDirective, { ...(ngDevMode ? { debugName: "prefixChildren" } : /* istanbul ignore next */ {}), descendants: true });
+    /** @internal */
+    infixRef = viewChild('infix', ...(ngDevMode ? [{ debugName: "infixRef" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hasLabel = computed(() => !!this.labelChild(), ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hasPrefix = computed(() => this.prefixChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
+    /** @internal Resting-label left offset in pixels, mirroring the infix's `offsetLeft` so the label sits right after any prefix. */
+    restingLabelOffset = signal(12, ...(ngDevMode ? [{ debugName: "restingLabelOffset" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    isFocused = computed(() => !!this.control()?.focused(), ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    isInvalid = computed(() => !!this.control()?.errorState(), ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    isDisabled = computed(() => !!this.control()?.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    isRequired = computed(() => !!this.control()?.required(), ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    /** @internal Whether the floating label wrapper should render at all. `'never'` opts out entirely. */
+    shouldRenderLabelWrapper = computed(() => this.hasLabel() && this.floatLabel() !== 'never', ...(ngDevMode ? [{ debugName: "shouldRenderLabelWrapper" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    shouldLabelFloat = computed(() => {
+        const mode = this.floatLabel();
+        if (mode === 'never')
+            return false;
+        if (mode === 'always')
+            return true;
+        const ctrl = this.control();
+        if (!ctrl)
+            return false;
+        return ctrl.focused() || !ctrl.empty();
+    }, ...(ngDevMode ? [{ debugName: "shouldLabelFloat" }] : /* istanbul ignore next */ []));
+    /** @internal Inline `left` value for the label wrapper. Floated labels pin to the container edge; resting labels align with the infix's left (after any prefix). */
+    labelLeft = computed(() => this.shouldLabelFloat() ? '0.5rem' : `${this.restingLabelOffset()}px`, ...(ngDevMode ? [{ debugName: "labelLeft" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    subscriptMode = computed(() => this.isInvalid() && this.errorChildren().length > 0 ? 'error' : 'hint', ...(ngDevMode ? [{ debugName: "subscriptMode" }] : /* istanbul ignore next */ []));
+    /** @internal Set of validation error keys currently active on the bound control (e.g. `Set('required', 'email')`). Empty when the control has no `errors` signal or no active errors. Read by `[twError match="…"]` to decide whether to display. */
+    activeErrorKeys = computed(() => {
+        const errs = this.control()?.errors?.();
+        return new Set(errs ? Object.keys(errs) : []);
+    }, ...(ngDevMode ? [{ debugName: "activeErrorKeys" }] : /* istanbul ignore next */ []));
+    /** @internal Whether the subscript row has anything to render right now. */
+    hasSubscriptContent = computed(() => {
+        if (this.subscriptMode() === 'error')
+            return this.errorChildren().length > 0;
+        return this.hintChildren().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasSubscriptContent" }] : /* istanbul ignore next */ []));
+    /** @internal Whether the subscript wrapper renders. In `'fixed'` mode it always renders to reserve vertical space; in `'dynamic'` mode it collapses when empty. */
+    shouldRenderSubscript = computed(() => {
+        if (this.subscriptSizing() === 'fixed')
+            return true;
+        return this.hasSubscriptContent();
+    }, ...(ngDevMode ? [{ debugName: "shouldRenderSubscript" }] : /* istanbul ignore next */ []));
+    controlTypeClass = computed(() => {
+        const type = this.control()?.controlType;
+        return type ? `tw-form-field-type-${type}` : '';
+    }, ...(ngDevMode ? [{ debugName: "controlTypeClass" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => formFieldVariants({
+        appearance: this.appearance(),
+        size: this.size(),
+        color: this.color(),
+        focused: this.isFocused(),
+        invalid: this.isInvalid(),
+        labelFloated: this.shouldLabelFloat(),
+        subscriptReserve: this.subscriptSizing() === 'fixed',
+        disabled: this.isDisabled(),
+    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rootClasses = computed(() => {
+        const base = this.variantResult().root();
+        const type = this.controlTypeClass();
+        return type ? `${base} ${type}` : base;
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    controlWrapperClasses = computed(() => this.variantResult().controlWrapper(), ...(ngDevMode ? [{ debugName: "controlWrapperClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    infixClasses = computed(() => {
+        const base = this.variantResult().infix();
+        // Hide the placeholder while the resting label is occupying the same space.
+        // `floatLabel='never'` keeps the placeholder visible regardless of label projection.
+        const hidePlaceholder = this.shouldRenderLabelWrapper() && !this.shouldLabelFloat();
+        return hidePlaceholder
+            ? `${base} [&_input::placeholder]:opacity-0 [&_textarea::placeholder]:opacity-0`
+            : base;
+    }, ...(ngDevMode ? [{ debugName: "infixClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    labelWrapperClasses = computed(() => this.variantResult().labelWrapper(), ...(ngDevMode ? [{ debugName: "labelWrapperClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    labelClasses = computed(() => this.variantResult().label(), ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    requiredMarkerClasses = computed(() => this.variantResult().requiredMarker(), ...(ngDevMode ? [{ debugName: "requiredMarkerClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    prefixClasses = computed(() => this.variantResult().prefix(), ...(ngDevMode ? [{ debugName: "prefixClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    suffixClasses = computed(() => this.variantResult().suffix(), ...(ngDevMode ? [{ debugName: "suffixClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    subscriptWrapperClasses = computed(() => this.variantResult().subscriptWrapper(), ...(ngDevMode ? [{ debugName: "subscriptWrapperClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hintClasses = computed(() => this.variantResult().hint(), ...(ngDevMode ? [{ debugName: "hintClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    errorClasses = computed(() => this.variantResult().error(), ...(ngDevMode ? [{ debugName: "errorClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Push merged aria-describedby ids to the control whenever hint/error lists, the subscript mode, or per-error `match` visibility change.
+        effect(() => {
+            const ctrl = this.control();
+            if (!ctrl)
+                return;
+            const ids = [];
+            if (this.subscriptMode() === 'error') {
+                for (const e of this.errorChildren()) {
+                    // Filter by `shouldShow()` so `[twError match="…"]` entries that
+                    // don't match the active validation keys are not announced.
+                    if (e.shouldShow())
+                        ids.push(e.id);
+                }
+            }
+            else {
+                for (const h of this.hintChildren())
+                    ids.push(h.id);
+            }
+            const userIds = ctrl.userAriaDescribedBy?.();
+            if (userIds) {
+                for (const id of userIds.split(/\s+/)) {
+                    if (id)
+                        ids.push(id);
+                }
+            }
+            untracked(() => ctrl.setDescribedByIds(ids));
+        });
+        // Push merged aria-labelledby ids (projected label id + user-supplied) to the control.
+        // Native inputs ignore this in practice (the `for=`/`id` association wins) but non-native
+        // triggers (combobox, date-picker) need the explicit attribute for screen readers.
+        effect(() => {
+            const ctrl = this.control();
+            if (!ctrl)
+                return;
+            const ids = [];
+            const labelId = this.labelChild()?.id;
+            if (labelId && this.shouldRenderLabelWrapper())
+                ids.push(labelId);
+            const userIds = ctrl.userAriaLabelledby?.();
+            if (userIds) {
+                for (const id of userIds.split(/\s+/)) {
+                    if (id)
+                        ids.push(id);
+                }
+            }
+            untracked(() => ctrl.setLabelledByIds(ids));
+        });
+        // Dev-mode validation: at most one hint per alignment.
+        // Reports via `console.error` instead of `throw` so an authoring mistake
+        // surfaces during development without crashing the surrounding effect graph
+        // (which would otherwise leave Angular in an unrecoverable error state).
+        effect(() => {
+            if (!isDevMode())
+                return;
+            const hints = this.hintChildren();
+            const startCount = hints.filter((h) => h.effectiveAlign() === 'start').length;
+            const endCount = hints.filter((h) => h.effectiveAlign() === 'end').length;
+            if (startCount > 1 || endCount > 1) {
+                console.error('tw-form-field: only one twHint per alignment ("start" / "end") is allowed.');
+            }
+        });
+        // Track the infix's left offset so the resting label can sit right after any prefix.
+        effect((onCleanup) => {
+            const prefixes = this.prefixChildren();
+            if (prefixes.length === 0) {
+                this.restingLabelOffset.set(12);
+                return;
+            }
+            const infix = this.infixRef()?.nativeElement;
+            if (!infix)
+                return;
+            const update = () => this.restingLabelOffset.set(infix.offsetLeft);
+            update();
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const ro = new ResizeObserver(update);
+            for (const p of prefixes) {
+                ro.observe(p.elementRef.nativeElement);
+            }
+            ro.observe(infix);
+            onCleanup(() => ro.disconnect());
+        });
+    }
+    ngAfterContentInit() {
+        if (isDevMode() && !this.control()) {
+            throw new Error('tw-form-field requires a child control providing TW_FORM_FIELD_CONTROL. ' +
+                'Place a control (e.g. <input twInput />) inside the <tw-form-field>.');
+        }
+    }
+    /** @internal */
+    _onContainerClick(event) {
+        this.control()?.onContainerClick(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: FormFieldComponent, isStandalone: true, selector: "tw-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, hideRequiredMarker: { classPropertyName: "hideRequiredMarker", publicName: "hideRequiredMarker", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hintAlign: { classPropertyName: "hintAlign", publicName: "hintAlign", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onContainerClick($event)" }, properties: { "class": "rootClasses()" } }, queries: [{ propertyName: "control", first: true, predicate: TW_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "labelChild", first: true, predicate: LabelDirective, descendants: true, isSignal: true }, { propertyName: "hintChildren", predicate: HintDirective, descendants: true, isSignal: true }, { propertyName: "errorChildren", predicate: ErrorDirective, descendants: true, isSignal: true }, { propertyName: "prefixChildren", predicate: PrefixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "infixRef", first: true, predicate: ["infix"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"controlWrapperClasses()\">\n  <ng-content select=\"[twPrefix]\" />\n  <ng-content select=\"[twPrefixIcon]\" />\n  <div #infix [class]=\"infixClasses()\">\n    <ng-content />\n  </div>\n  <ng-content select=\"[twSuffix]\" />\n  <ng-content select=\"[twSuffixIcon]\" />\n  @if (shouldRenderLabelWrapper()) {\n    <div [class]=\"labelWrapperClasses()\" [style.left]=\"labelLeft()\">\n      <ng-content select=\"[twLabel]\" />\n      @if (!hideRequiredMarker() && isRequired()) {\n        <span [class]=\"requiredMarkerClasses()\" aria-hidden=\"true\">*</span>\n      }\n    </div>\n  }\n</div>\n\n@if (shouldRenderSubscript()) {\n  <div [class]=\"subscriptWrapperClasses()\">\n    @if (subscriptMode() === 'error') {\n      <ng-content select=\"[twError]\" />\n    } @else {\n      <ng-content select=\"[twHint]\" />\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tw-form-field', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'rootClasses()',
+                        '(click)': '_onContainerClick($event)',
+                    }, template: "<div [class]=\"controlWrapperClasses()\">\n  <ng-content select=\"[twPrefix]\" />\n  <ng-content select=\"[twPrefixIcon]\" />\n  <div #infix [class]=\"infixClasses()\">\n    <ng-content />\n  </div>\n  <ng-content select=\"[twSuffix]\" />\n  <ng-content select=\"[twSuffixIcon]\" />\n  @if (shouldRenderLabelWrapper()) {\n    <div [class]=\"labelWrapperClasses()\" [style.left]=\"labelLeft()\">\n      <ng-content select=\"[twLabel]\" />\n      @if (!hideRequiredMarker() && isRequired()) {\n        <span [class]=\"requiredMarkerClasses()\" aria-hidden=\"true\">*</span>\n      }\n    </div>\n  }\n</div>\n\n@if (shouldRenderSubscript()) {\n  <div [class]=\"subscriptWrapperClasses()\">\n    @if (subscriptMode() === 'error') {\n      <ng-content select=\"[twError]\" />\n    } @else {\n      <ng-content select=\"[twHint]\" />\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], hideRequiredMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideRequiredMarker", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], hintAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintAlign", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TW_FORM_FIELD_CONTROL), { ...{ descendants: true }, isSignal: true }] }], labelChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => LabelDirective), { ...{ descendants: true }, isSignal: true }] }], hintChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HintDirective), { ...{ descendants: true }, isSignal: true }] }], errorChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ErrorDirective), { ...{ descendants: true }, isSignal: true }] }], prefixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrefixDirective), { ...{ descendants: true }, isSignal: true }] }], infixRef: [{ type: i0.ViewChild, args: ['infix', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ErrorDirective, FormFieldComponent, FormFieldControl, HintDirective, LabelDirective, PrefixDirective, PrefixIconDirective, SuffixDirective, SuffixIconDirective, TW_FORM_FIELD_CONTROL };
+//# sourceMappingURL=cdevhub-ngx-tw-form-field.mjs.map