@wirekyt/angular 0.0.3 → 0.0.5

package/dist/fesm2022/wirekyt-angular-field.mjs

@@ -0,0 +1,647 @@
+import { createAnatomy } from '@wirekyt/dom/anatomy';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, signal, input, booleanAttribute, DestroyRef, Renderer2, ElementRef, forwardRef, Directive, PLATFORM_ID, effect, untracked } from '@angular/core';
+import { createId, bindProps } from '@wirekyt/angular';
+import { injectFieldsetContextOptional } from '@wirekyt/angular/fieldset';
+import { isPlatformBrowser } from '@angular/common';
+import { autoresizeTextarea } from '@wirekyt/dom/auto-resize';
+
+const fieldAnatomy = createAnatomy("field").parts("root", "errorText", "helperText", "input", "label", "select", "textarea", "requiredIndicator");
+const fieldParts = fieldAnatomy.build();
+
+const FIELD_CONTEXT = new InjectionToken("WIREKYT.FIELD_CONTEXT");
+function injectFieldContext() {
+    return inject(FIELD_CONTEXT);
+}
+function injectFieldContextOptional() {
+    return inject(FIELD_CONTEXT, { optional: true });
+}
+
+const dataAttr = (value) => (value ? "" : undefined);
+const ariaAttr = (value) => (value ? "true" : undefined);
+function useField(options) {
+    const fallbackId = createId();
+    const fieldsetContext = injectFieldsetContextOptional();
+    const propsSignal = computed(() => options.context(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "propsSignal" }] : /* istanbul ignore next */ []));
+    const id = computed(() => propsSignal().id ?? fallbackId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    const ids = computed(() => {
+        const provided = propsSignal().ids;
+        const baseId = id();
+        return {
+            root: provided?.root ?? `field:${baseId}`,
+            control: provided?.control ?? baseId,
+            label: provided?.label ?? `field:${baseId}:label`,
+            errorText: provided?.errorText ?? `field:${baseId}:error-text`,
+            helperText: provided?.helperText ?? `field:${baseId}:helper-text`,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ids" }] : /* istanbul ignore next */ []));
+    const disabled = computed(() => {
+        if (propsSignal().disabled)
+            return true;
+        return fieldsetContext ? fieldsetContext.disabled() : false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    const invalid = computed(() => {
+        if (propsSignal().invalid)
+            return true;
+        return fieldsetContext ? fieldsetContext.invalid() : false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    const readOnly = computed(() => Boolean(propsSignal().readOnly), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    const required = computed(() => Boolean(propsSignal().required), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    const errorTextCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorTextCount" }] : /* istanbul ignore next */ []));
+    const helperTextCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helperTextCount" }] : /* istanbul ignore next */ []));
+    const explicitHasErrorText = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "explicitHasErrorText" }] : /* istanbul ignore next */ []));
+    const explicitHasHelperText = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "explicitHasHelperText" }] : /* istanbul ignore next */ []));
+    const hasErrorTextSignal = computed(() => explicitHasErrorText() || errorTextCount() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasErrorTextSignal" }] : /* istanbul ignore next */ []));
+    const hasHelperTextSignal = computed(() => explicitHasHelperText() || helperTextCount() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasHelperTextSignal" }] : /* istanbul ignore next */ []));
+    const ariaDescribedby = computed(() => {
+        return hasHelperTextSignal() ? ids().helperText : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    const ariaErrormessage = computed(() => {
+        return hasErrorTextSignal() && invalid() ? ids().errorText : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaErrormessage" }] : /* istanbul ignore next */ []));
+    const targetControlId = computed(() => {
+        const t = propsSignal().target;
+        return t ? `field:${id()}:item:${t}` : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetControlId" }] : /* istanbul ignore next */ []));
+    const getRootProps = () => ({
+        ...fieldParts.root.attrs,
+        id: ids().root,
+        role: "group",
+        "data-disabled": dataAttr(disabled()),
+        "data-invalid": dataAttr(invalid()),
+        "data-readonly": dataAttr(readOnly()),
+    });
+    const getLabelProps = () => ({
+        ...fieldParts.label.attrs,
+        id: ids().label,
+        "data-disabled": dataAttr(disabled()),
+        "data-invalid": dataAttr(invalid()),
+        "data-readonly": dataAttr(readOnly()),
+        "data-required": dataAttr(required()),
+        htmlFor: targetControlId() ?? ids().control,
+    });
+    const getControlProps = () => ({
+        "aria-describedby": ariaDescribedby(),
+        "aria-errormessage": ariaErrormessage(),
+        "aria-invalid": ariaAttr(invalid()),
+        "data-invalid": dataAttr(invalid()),
+        "data-required": dataAttr(required()),
+        "data-readonly": dataAttr(readOnly()),
+        id: ids().control,
+        required: required() || undefined,
+        disabled: disabled() || undefined,
+        readOnly: readOnly() || undefined,
+    });
+    const getInputProps = () => ({
+        ...getControlProps(),
+        ...fieldParts.input.attrs,
+    });
+    const getTextareaProps = () => ({
+        ...getControlProps(),
+        ...fieldParts.textarea.attrs,
+    });
+    const getSelectProps = () => ({
+        ...getControlProps(),
+        ...fieldParts.select.attrs,
+    });
+    const getHelperTextProps = () => ({
+        ...fieldParts.helperText.attrs,
+        id: ids().helperText,
+        "data-disabled": dataAttr(disabled()),
+    });
+    const getErrorTextProps = () => ({
+        ...fieldParts.errorText.attrs,
+        id: ids().errorText,
+        "aria-live": "polite",
+        hidden: !invalid() || undefined,
+    });
+    const getRequiredIndicatorProps = () => ({
+        ...fieldParts.requiredIndicator.attrs,
+        "aria-hidden": "true",
+        hidden: !required() || undefined,
+    });
+    return {
+        get ids() {
+            return ids();
+        },
+        disabled,
+        invalid,
+        readOnly,
+        required,
+        hasErrorText: hasErrorTextSignal,
+        hasHelperText: hasHelperTextSignal,
+        ariaDescribedby,
+        setHasErrorText: (value) => explicitHasErrorText.set(value),
+        setHasHelperText: (value) => explicitHasHelperText.set(value),
+        registerErrorText: () => {
+            errorTextCount.update((count) => count + 1);
+            return () => errorTextCount.update((count) => Math.max(0, count - 1));
+        },
+        registerHelperText: () => {
+            helperTextCount.update((count) => count + 1);
+            return () => helperTextCount.update((count) => Math.max(0, count - 1));
+        },
+        getRootProps,
+        getControlProps,
+        getLabelProps,
+        getInputProps,
+        getTextareaProps,
+        getSelectProps,
+        getHelperTextProps,
+        getErrorTextProps,
+        getRequiredIndicatorProps,
+        getItemControlId: (value) => `field:${id()}:item:${value}`,
+        getItemLabelId: (value) => `field:${id()}:item:${value}:label`,
+    };
+}
+
+class FieldRoot {
+    id = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    elementIds = input(undefined, { ...(ngDevMode ? { debugName: "elementIds" } : /* istanbul ignore next */ {}), alias: "ids" });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    target = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    field = useField({
+        context: () => ({
+            id: this.id(),
+            ids: this.elementIds(),
+            required: this.required(),
+            disabled: this.disabled(),
+            invalid: this.invalid(),
+            readOnly: this.readOnly(),
+            target: this.target(),
+        }),
+    });
+    get ids() {
+        return this.field.ids;
+    }
+    get hasErrorText() {
+        return this.field.hasErrorText;
+    }
+    get hasHelperText() {
+        return this.field.hasHelperText;
+    }
+    get ariaDescribedby() {
+        return this.field.ariaDescribedby;
+    }
+    setHasErrorText(value) {
+        this.field.setHasErrorText(value);
+    }
+    setHasHelperText(value) {
+        this.field.setHasHelperText(value);
+    }
+    registerErrorText() {
+        return this.field.registerErrorText();
+    }
+    registerHelperText() {
+        return this.field.registerHelperText();
+    }
+    getRootProps() {
+        return this.field.getRootProps();
+    }
+    getControlProps() {
+        return this.field.getControlProps();
+    }
+    getLabelProps() {
+        return this.field.getLabelProps();
+    }
+    getInputProps() {
+        return this.field.getInputProps();
+    }
+    getTextareaProps() {
+        return this.field.getTextareaProps();
+    }
+    getSelectProps() {
+        return this.field.getSelectProps();
+    }
+    getHelperTextProps() {
+        return this.field.getHelperTextProps();
+    }
+    getErrorTextProps() {
+        return this.field.getErrorTextProps();
+    }
+    getRequiredIndicatorProps() {
+        return this.field.getRequiredIndicatorProps();
+    }
+    getItemControlId(value) {
+        return this.field.getItemControlId(value);
+    }
+    getItemLabelId(value) {
+        return this.field.getItemLabelId(value);
+    }
+    constructor() {
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => this.field.getRootProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: FieldRoot, isStandalone: true, selector: "[fieldRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, elementIds: { classPropertyName: "elementIds", publicName: "ids", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: FIELD_CONTEXT, useExisting: forwardRef(() => FieldRoot) }], exportAs: ["fieldRoot"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fieldRoot]",
+                    standalone: true,
+                    exportAs: "fieldRoot",
+                    providers: [{ provide: FIELD_CONTEXT, useExisting: forwardRef(() => FieldRoot) }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], elementIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "ids", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
+
+class FieldRootProvider {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.value().disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.value().invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    readOnly = computed(() => this.value().readOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    required = computed(() => this.value().required(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    hasErrorText = computed(() => this.value().hasErrorText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasErrorText" }] : /* istanbul ignore next */ []));
+    hasHelperText = computed(() => this.value().hasHelperText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasHelperText" }] : /* istanbul ignore next */ []));
+    ariaDescribedby = computed(() => this.value().ariaDescribedby(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    get ids() {
+        return this.value().ids;
+    }
+    setHasErrorText(value) {
+        this.value().setHasErrorText(value);
+    }
+    setHasHelperText(value) {
+        this.value().setHasHelperText(value);
+    }
+    registerErrorText() {
+        return this.value().registerErrorText();
+    }
+    registerHelperText() {
+        return this.value().registerHelperText();
+    }
+    getRootProps() {
+        return this.value().getRootProps();
+    }
+    getControlProps() {
+        return this.value().getControlProps();
+    }
+    getLabelProps() {
+        return this.value().getLabelProps();
+    }
+    getInputProps() {
+        return this.value().getInputProps();
+    }
+    getTextareaProps() {
+        return this.value().getTextareaProps();
+    }
+    getSelectProps() {
+        return this.value().getSelectProps();
+    }
+    getHelperTextProps() {
+        return this.value().getHelperTextProps();
+    }
+    getErrorTextProps() {
+        return this.value().getErrorTextProps();
+    }
+    getRequiredIndicatorProps() {
+        return this.value().getRequiredIndicatorProps();
+    }
+    getItemControlId(value) {
+        return this.value().getItemControlId(value);
+    }
+    getItemLabelId(value) {
+        return this.value().getItemLabelId(value);
+    }
+    constructor() {
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => this.value().getRootProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldRootProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: FieldRootProvider, isStandalone: true, selector: "[fieldRootProvider]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: FIELD_CONTEXT, useExisting: forwardRef(() => FieldRootProvider) }], exportAs: ["fieldRootProvider"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldRootProvider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fieldRootProvider]",
+                    standalone: true,
+                    exportAs: "fieldRootProvider",
+                    providers: [{ provide: FIELD_CONTEXT, useExisting: forwardRef(() => FieldRootProvider) }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+class FieldLabel {
+    constructor() {
+        const context = injectFieldContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.getLabelProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: FieldLabel, isStandalone: true, selector: "[fieldLabel]", exportAs: ["fieldLabel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fieldLabel]",
+                    standalone: true,
+                    exportAs: "fieldLabel",
+                }]
+        }], ctorParameters: () => [] });
+
+class FieldInput {
+    constructor() {
+        const context = injectFieldContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.getInputProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: FieldInput, isStandalone: true, selector: "[fieldInput]", exportAs: ["fieldInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fieldInput]",
+                    standalone: true,
+                    exportAs: "fieldInput",
+                }]
+        }], ctorParameters: () => [] });
+
+class FieldTextarea {
+    autoresize = input(false, { ...(ngDevMode ? { debugName: "autoresize" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        const context = injectFieldContext();
+        const elementRef = inject(ElementRef);
+        const destroyRef = inject(DestroyRef);
+        const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        bindProps({
+            elementRef,
+            renderer: inject(Renderer2),
+            destroyRef,
+            props: () => ({
+                ...context.getTextareaProps(),
+                style: this.autoresize() ? { resize: "none" } : undefined,
+            }),
+        });
+        if (!isBrowser)
+            return;
+        effect((onCleanup) => {
+            if (!this.autoresize())
+                return;
+            const cleanup = autoresizeTextarea(elementRef.nativeElement);
+            onCleanup(() => {
+                cleanup?.();
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldTextarea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: FieldTextarea, isStandalone: true, selector: "[fieldTextarea]", inputs: { autoresize: { classPropertyName: "autoresize", publicName: "autoresize", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["fieldTextarea"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldTextarea, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fieldTextarea]",
+                    standalone: true,
+                    exportAs: "fieldTextarea",
+                }]
+        }], ctorParameters: () => [], propDecorators: { autoresize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoresize", required: false }] }] } });
+
+class FieldSelect {
+    constructor() {
+        const context = injectFieldContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.getSelectProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: FieldSelect, isStandalone: true, selector: "[fieldSelect]", exportAs: ["fieldSelect"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldSelect, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fieldSelect]",
+                    standalone: true,
+                    exportAs: "fieldSelect",
+                }]
+        }], ctorParameters: () => [] });
+
+class FieldHelperText {
+    constructor() {
+        const context = injectFieldContext();
+        effect((onCleanup) => {
+            const unregister = untracked(() => context.registerHelperText());
+            onCleanup(unregister);
+        });
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.getHelperTextProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldHelperText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: FieldHelperText, isStandalone: true, selector: "[fieldHelperText]", exportAs: ["fieldHelperText"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldHelperText, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fieldHelperText]",
+                    standalone: true,
+                    exportAs: "fieldHelperText",
+                }]
+        }], ctorParameters: () => [] });
+
+class FieldErrorText {
+    constructor() {
+        const context = injectFieldContext();
+        effect((onCleanup) => {
+            const unregister = untracked(() => context.registerErrorText());
+            onCleanup(unregister);
+        });
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.getErrorTextProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldErrorText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: FieldErrorText, isStandalone: true, selector: "[fieldErrorText]", exportAs: ["fieldErrorText"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldErrorText, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fieldErrorText]",
+                    standalone: true,
+                    exportAs: "fieldErrorText",
+                }]
+        }], ctorParameters: () => [] });
+
+class FieldRequiredIndicator {
+    constructor() {
+        const context = injectFieldContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.getRequiredIndicatorProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldRequiredIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: FieldRequiredIndicator, isStandalone: true, selector: "[fieldRequiredIndicator]", exportAs: ["fieldRequiredIndicator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldRequiredIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fieldRequiredIndicator]",
+                    standalone: true,
+                    exportAs: "fieldRequiredIndicator",
+                }]
+        }], ctorParameters: () => [] });
+
+class FieldItem {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    parent = inject(FIELD_CONTEXT, { skipSelf: true });
+    disabled = computed(() => this.parent.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.parent.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    readOnly = computed(() => this.parent.readOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    required = computed(() => this.parent.required(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    hasErrorText = computed(() => this.parent.hasErrorText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasErrorText" }] : /* istanbul ignore next */ []));
+    hasHelperText = computed(() => this.parent.hasHelperText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasHelperText" }] : /* istanbul ignore next */ []));
+    ariaDescribedby = computed(() => this.parent.ariaDescribedby(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    controlIdSignal = computed(() => this.parent.getItemControlId(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlIdSignal" }] : /* istanbul ignore next */ []));
+    labelIdSignal = computed(() => this.parent.getItemLabelId(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelIdSignal" }] : /* istanbul ignore next */ []));
+    get ids() {
+        const parentIds = this.parent.ids;
+        return {
+            ...parentIds,
+            control: this.controlIdSignal(),
+            label: this.labelIdSignal(),
+        };
+    }
+    setHasErrorText(value) {
+        this.parent.setHasErrorText(value);
+    }
+    setHasHelperText(value) {
+        this.parent.setHasHelperText(value);
+    }
+    registerErrorText() {
+        return this.parent.registerErrorText();
+    }
+    registerHelperText() {
+        return this.parent.registerHelperText();
+    }
+    getRootProps() {
+        return this.parent.getRootProps();
+    }
+    getControlProps() {
+        return {
+            ...this.parent.getControlProps(),
+            id: this.controlIdSignal(),
+        };
+    }
+    getLabelProps() {
+        return {
+            ...this.parent.getLabelProps(),
+            id: this.labelIdSignal(),
+            htmlFor: this.controlIdSignal(),
+        };
+    }
+    getInputProps() {
+        return {
+            ...this.getControlProps(),
+            ...fieldParts.input.attrs,
+        };
+    }
+    getTextareaProps() {
+        return {
+            ...this.getControlProps(),
+            ...fieldParts.textarea.attrs,
+        };
+    }
+    getSelectProps() {
+        return {
+            ...this.getControlProps(),
+            ...fieldParts.select.attrs,
+        };
+    }
+    getHelperTextProps() {
+        return this.parent.getHelperTextProps();
+    }
+    getErrorTextProps() {
+        return this.parent.getErrorTextProps();
+    }
+    getRequiredIndicatorProps() {
+        return this.parent.getRequiredIndicatorProps();
+    }
+    getItemControlId(value) {
+        return this.parent.getItemControlId(value);
+    }
+    getItemLabelId(value) {
+        return this.parent.getItemLabelId(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: FieldItem, isStandalone: true, selector: "[fieldItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: FIELD_CONTEXT, useExisting: forwardRef(() => FieldItem) }], exportAs: ["fieldItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FieldItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[fieldItem]",
+                    standalone: true,
+                    exportAs: "fieldItem",
+                    providers: [{ provide: FIELD_CONTEXT, useExisting: forwardRef(() => FieldItem) }],
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FIELD_CONTEXT, FieldErrorText, FieldHelperText, FieldInput, FieldItem, FieldLabel, FieldRequiredIndicator, FieldRoot, FieldRootProvider, FieldSelect, FieldTextarea, fieldAnatomy, injectFieldContext, injectFieldContextOptional, useField };
+//# sourceMappingURL=wirekyt-angular-field.mjs.map