@cdevhub/ngx-tw 0.2.1 → 0.3.0

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

@@ -1,5 +1,5 @@
 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 { InjectionToken, inject, ElementRef, computed, isDevMode, Directive, input, contentChild, contentChildren, viewChild, signal, effect, untracked, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { tv } from 'tailwind-variants';
 
 /**
@@ -26,6 +26,14 @@ class FormFieldControl {
  * `providers: [{ provide: TW_FORM_FIELD_CONTROL, useExisting: MyControl }]`.
  */
 const TW_FORM_FIELD_CONTROL = new InjectionToken('TW_FORM_FIELD_CONTROL');
+/**
+ * Injection token exposing the wrapping {@link TwFormFieldParent}. The
+ * {@link FormFieldComponent} provides itself under this token; controls inject
+ * it with `{ optional: true }` to detect (and read label state from) a parent
+ * `tw-form-field` without referencing the concrete component class — keeping the
+ * form-field component out of each control's bundle.
+ */
+const TW_FORM_FIELD = new InjectionToken('TW_FORM_FIELD');
 // ── Unique ID counters ──
 let nextLabelId = 0;
 let nextHintId = 0;
@@ -176,9 +184,11 @@ class LabelDirective {
     /** @internal */
     id = `tw-form-field-label-${nextLabelId++}`;
     /** @internal */
-    controlId = computed(() => this.formField.control()?.id() ?? null, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    controlId = computed(() => this.formField.control()?.id() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
     /** @internal */
-    classes = computed(() => this.formField.labelClasses(), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => this.formField.labelClasses(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     constructor() {
         if (isDevMode()) {
             const tag = this.elementRef.nativeElement.tagName;
@@ -187,10 +197,10 @@ class LabelDirective {
             }
         }
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twLabel]',
@@ -207,18 +217,21 @@ class HintDirective {
     /** @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 */ []));
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     /** @internal */
-    effectiveAlign = computed(() => this.align() ?? this.formField.hintAlign(), ...(ngDevMode ? [{ debugName: "effectiveAlign" }] : /* istanbul ignore next */ []));
+    effectiveAlign = computed(() => this.align() ?? this.formField.hintAlign(), /* @ts-ignore */
+    ...(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 });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HintDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twHint]',
@@ -234,20 +247,23 @@ class ErrorDirective {
     /** @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 */ []));
+    match = input(undefined, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 });
+    classes = computed(() => this.formField.errorClasses(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twError]',
@@ -266,11 +282,12 @@ class PrefixDirective {
     /** @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 });
+    prefixClasses = computed(() => this.formField.prefixClasses(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twPrefix]',
@@ -283,11 +300,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 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 });
+    suffixClasses = computed(() => this.formField.suffixClasses(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suffixClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twSuffix]',
@@ -304,11 +322,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 // 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 });
+    prefixClasses = computed(() => `${this.formField.prefixClasses()} size-5`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PrefixIconDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PrefixIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twPrefixIcon]',
@@ -320,11 +339,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }] });
 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 });
+    suffixClasses = computed(() => `${this.formField.suffixClasses()} size-5`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suffixClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SuffixIconDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SuffixIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twSuffixIcon]',
@@ -337,19 +357,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 // ── 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 */ []));
+    appearance = input('outline', /* @ts-ignore */
+    ...(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 */ []));
+    size = input('md', /* @ts-ignore */
+    ...(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 */ []));
+    floatLabel = input('auto', /* @ts-ignore */
+    ...(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 */ []));
+    subscriptSizing = input('fixed', /* @ts-ignore */
+    ...(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 */ []));
+    hideRequiredMarker = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(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 */ []));
+    hintAlign = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintAlign" }] : /* istanbul ignore next */ []));
     /** @internal */
     control = contentChild(TW_FORM_FIELD_CONTROL, { ...(ngDevMode ? { debugName: "control" } : /* istanbul ignore next */ {}), descendants: true });
     /** @internal */
@@ -361,23 +388,32 @@ class FormFieldComponent {
     /** @internal */
     prefixChildren = contentChildren(PrefixDirective, { ...(ngDevMode ? { debugName: "prefixChildren" } : /* istanbul ignore next */ {}), descendants: true });
     /** @internal */
-    infixRef = viewChild('infix', ...(ngDevMode ? [{ debugName: "infixRef" }] : /* istanbul ignore next */ []));
+    infixRef = viewChild('infix', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "infixRef" }] : /* istanbul ignore next */ []));
     /** @internal */
-    hasLabel = computed(() => !!this.labelChild(), ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
+    hasLabel = computed(() => !!this.labelChild(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
-    hasPrefix = computed(() => this.prefixChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
+    hasPrefix = computed(() => this.prefixChildren().length > 0, /* @ts-ignore */
+    ...(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 */ []));
+    restingLabelOffset = signal(12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restingLabelOffset" }] : /* istanbul ignore next */ []));
     /** @internal */
-    isFocused = computed(() => !!this.control()?.focused(), ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isFocused = computed(() => !!this.control()?.focused(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
     /** @internal */
-    isInvalid = computed(() => !!this.control()?.errorState(), ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => !!this.control()?.errorState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     /** @internal */
-    isDisabled = computed(() => !!this.control()?.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => !!this.control()?.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     /** @internal */
-    isRequired = computed(() => !!this.control()?.required(), ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => !!this.control()?.required(), /* @ts-ignore */
+    ...(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 */ []));
+    shouldRenderLabelWrapper = computed(() => this.hasLabel() && this.floatLabel() !== 'never', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldRenderLabelWrapper" }] : /* istanbul ignore next */ []));
     /** @internal */
     shouldLabelFloat = computed(() => {
         const mode = this.floatLabel();
@@ -389,32 +425,39 @@ class FormFieldComponent {
         if (!ctrl)
             return false;
         return ctrl.focused() || !ctrl.empty();
-    }, ...(ngDevMode ? [{ debugName: "shouldLabelFloat" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    labelLeft = computed(() => this.shouldLabelFloat() ? '0.5rem' : `${this.restingLabelOffset()}px`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelLeft" }] : /* istanbul ignore next */ []));
     /** @internal */
-    subscriptMode = computed(() => this.isInvalid() && this.errorChildren().length > 0 ? 'error' : 'hint', ...(ngDevMode ? [{ debugName: "subscriptMode" }] : /* istanbul ignore next */ []));
+    subscriptMode = computed(() => this.isInvalid() && this.errorChildren().length > 0 ? 'error' : 'hint', /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlTypeClass" }] : /* istanbul ignore next */ []));
     variantResult = computed(() => formFieldVariants({
         appearance: this.appearance(),
         size: this.size(),
@@ -424,15 +467,18 @@ class FormFieldComponent {
         labelFloated: this.shouldLabelFloat(),
         subscriptReserve: this.subscriptSizing() === 'fixed',
         disabled: this.isDisabled(),
-    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    controlWrapperClasses = computed(() => this.variantResult().controlWrapper(), ...(ngDevMode ? [{ debugName: "controlWrapperClasses" }] : /* istanbul ignore next */ []));
+    controlWrapperClasses = computed(() => this.variantResult().controlWrapper(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlWrapperClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
     infixClasses = computed(() => {
         const base = this.variantResult().infix();
@@ -442,23 +488,32 @@ class FormFieldComponent {
         return hidePlaceholder
             ? `${base} [&_input::placeholder]:opacity-0 [&_textarea::placeholder]:opacity-0`
             : base;
-    }, ...(ngDevMode ? [{ debugName: "infixClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "infixClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    labelWrapperClasses = computed(() => this.variantResult().labelWrapper(), ...(ngDevMode ? [{ debugName: "labelWrapperClasses" }] : /* istanbul ignore next */ []));
+    labelWrapperClasses = computed(() => this.variantResult().labelWrapper(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWrapperClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    labelClasses = computed(() => this.variantResult().label(), ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    labelClasses = computed(() => this.variantResult().label(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    requiredMarkerClasses = computed(() => this.variantResult().requiredMarker(), ...(ngDevMode ? [{ debugName: "requiredMarkerClasses" }] : /* istanbul ignore next */ []));
+    requiredMarkerClasses = computed(() => this.variantResult().requiredMarker(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "requiredMarkerClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    prefixClasses = computed(() => this.variantResult().prefix(), ...(ngDevMode ? [{ debugName: "prefixClasses" }] : /* istanbul ignore next */ []));
+    prefixClasses = computed(() => this.variantResult().prefix(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    suffixClasses = computed(() => this.variantResult().suffix(), ...(ngDevMode ? [{ debugName: "suffixClasses" }] : /* istanbul ignore next */ []));
+    suffixClasses = computed(() => this.variantResult().suffix(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suffixClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    subscriptWrapperClasses = computed(() => this.variantResult().subscriptWrapper(), ...(ngDevMode ? [{ debugName: "subscriptWrapperClasses" }] : /* istanbul ignore next */ []));
+    subscriptWrapperClasses = computed(() => this.variantResult().subscriptWrapper(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subscriptWrapperClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    hintClasses = computed(() => this.variantResult().hint(), ...(ngDevMode ? [{ debugName: "hintClasses" }] : /* istanbul ignore next */ []));
+    hintClasses = computed(() => this.variantResult().hint(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    errorClasses = computed(() => this.variantResult().error(), ...(ngDevMode ? [{ debugName: "errorClasses" }] : /* istanbul ignore next */ []));
+    errorClasses = computed(() => this.variantResult().error(), /* @ts-ignore */
+    ...(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(() => {
@@ -553,20 +608,24 @@ class FormFieldComponent {
     _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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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()" } }, providers: [
+            { provide: TW_FORM_FIELD, useExisting: forwardRef(() => FormFieldComponent) },
+        ], 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", 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" }]
+                    }, providers: [
+                        { provide: TW_FORM_FIELD, useExisting: forwardRef(() => FormFieldComponent) },
+                    ], 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 };
+export { ErrorDirective, FormFieldComponent, FormFieldControl, HintDirective, LabelDirective, PrefixDirective, PrefixIconDirective, SuffixDirective, SuffixIconDirective, TW_FORM_FIELD, TW_FORM_FIELD_CONTROL };
 //# sourceMappingURL=cdevhub-ngx-tw-form-field.mjs.map