@wirekyt/angular 0.0.6 → 0.0.8

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

@@ -0,0 +1,628 @@
+import * as checkbox from '@wirekyt/dom/machines/checkbox';
+import { anatomy } from '@wirekyt/dom/machines/checkbox';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, TemplateRef, ViewContainerRef, effect, DestroyRef, Directive, Renderer2, ElementRef, signal, computed, untracked, input, model, booleanAttribute, forwardRef, output } from '@angular/core';
+import { bindProps, injectLocale, injectEnvironment, createId, useMachine, createCvaController } from '@wirekyt/angular';
+import { injectFieldsetContextOptional } from '@wirekyt/angular/fieldset';
+import { injectFieldContextOptional } from '@wirekyt/angular/field';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const checkboxAnatomy = anatomy.extendWith("group");
+
+const CHECKBOX_CONTEXT = new InjectionToken("WIREKYT.CHECKBOX_CONTEXT");
+function injectCheckboxContext() {
+    return inject(CHECKBOX_CONTEXT);
+}
+
+class CheckboxContext {
+    static ngTemplateContextGuard(_directive, context) {
+        void context;
+        return true;
+    }
+    checkbox = injectCheckboxContext();
+    templateRef = inject(TemplateRef);
+    viewContainer = inject(ViewContainerRef);
+    constructor() {
+        const view = this.viewContainer.createEmbeddedView(this.templateRef, {
+            $implicit: this.checkbox.api,
+            api: this.checkbox.api,
+        });
+        effect(() => {
+            this.checkbox.api();
+            view.detectChanges();
+        });
+        inject(DestroyRef).onDestroy(() => view.destroy());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxContext, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: CheckboxContext, isStandalone: true, selector: "[checkboxContext]", exportAs: ["checkboxContext"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxContext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[checkboxContext]",
+                    standalone: true,
+                    exportAs: "checkboxContext",
+                }]
+        }], ctorParameters: () => [] });
+
+class CheckboxControl {
+    constructor() {
+        const context = injectCheckboxContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getControlProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: CheckboxControl, isStandalone: true, selector: "[checkboxControl]", exportAs: ["checkboxControl"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxControl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[checkboxControl]",
+                    standalone: true,
+                    exportAs: "checkboxControl",
+                }]
+        }], ctorParameters: () => [] });
+
+const uniqueValues = (values) => Array.from(new Set(values.map((value) => String(value))));
+function useCheckboxGroup(options = { context: () => ({}) }) {
+    const fieldset = injectFieldsetContextOptional();
+    const uncontrolledValue = signal(uniqueValues(options.context().defaultValue ?? []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uncontrolledValue" }] : /* istanbul ignore next */ []));
+    let defaultEffectInitialized = false;
+    let defaultHydrationChecked = false;
+    let userTouched = false;
+    const resolved = computed(() => {
+        const props = options.context();
+        return {
+            defaultValue: props.defaultValue,
+            value: props.value,
+            name: props.name,
+            disabled: Boolean(props.disabled) || Boolean(fieldset?.disabled()),
+            readOnly: Boolean(props.readOnly),
+            invalid: Boolean(props.invalid) || Boolean(fieldset?.invalid()),
+            maxSelectedValues: props.maxSelectedValues,
+            onValueChange: props.onValueChange,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    const value = computed(() => uniqueValues(resolved().value ??
+        (userTouched ? uncontrolledValue() : (resolved().defaultValue ?? uncontrolledValue()))), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    const name = computed(() => resolved().name, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    const disabled = computed(() => resolved().disabled, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    const readOnly = computed(() => resolved().readOnly, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    const invalid = computed(() => resolved().invalid, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    const interactive = computed(() => !(disabled() || readOnly()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    const isAtMax = computed(() => {
+        const max = resolved().maxSelectedValues;
+        return max != null && value().length >= max;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAtMax" }] : /* istanbul ignore next */ []));
+    const setValue = (nextValue) => {
+        const next = uniqueValues(nextValue);
+        if (resolved().value === undefined) {
+            userTouched = true;
+            uncontrolledValue.set(next);
+        }
+        untracked(() => resolved().onValueChange?.(next));
+    };
+    effect(() => {
+        const next = resolved();
+        if (!defaultEffectInitialized) {
+            defaultEffectInitialized = true;
+            return;
+        }
+        if (userTouched || next.value !== undefined || defaultHydrationChecked)
+            return;
+        defaultHydrationChecked = true;
+        if (next.defaultValue === undefined)
+            return;
+        uncontrolledValue.set(uniqueValues(next.defaultValue));
+    });
+    const isChecked = (itemValue) => {
+        if (itemValue == null)
+            return false;
+        return value().some((current) => String(current) === String(itemValue));
+    };
+    const addValue = (itemValue) => {
+        if (!interactive())
+            return;
+        if (isChecked(itemValue))
+            return;
+        if (isAtMax())
+            return;
+        setValue(value().concat(itemValue));
+    };
+    const removeValue = (itemValue) => {
+        if (!interactive())
+            return;
+        setValue(value().filter((current) => String(current) !== String(itemValue)));
+    };
+    const toggleValue = (itemValue) => {
+        if (isChecked(itemValue)) {
+            removeValue(itemValue);
+        }
+        else {
+            addValue(itemValue);
+        }
+    };
+    const getItemProps = (props) => {
+        const checked = props.value != null ? isChecked(props.value) : undefined;
+        return {
+            checked,
+            onCheckedChange() {
+                if (props.value != null) {
+                    toggleValue(props.value);
+                }
+            },
+            name: name(),
+            disabled: disabled() || (isAtMax() && !checked) || undefined,
+            readOnly: readOnly() || undefined,
+            invalid: invalid() || undefined,
+        };
+    };
+    return {
+        value,
+        name,
+        disabled,
+        readOnly,
+        invalid,
+        isChecked,
+        setValue,
+        addValue,
+        removeValue,
+        toggleValue,
+        getItemProps,
+    };
+}
+
+const CHECKBOX_GROUP_CONTEXT = new InjectionToken("WIREKYT.CHECKBOX_GROUP_CONTEXT");
+function injectCheckboxGroupContext() {
+    return inject(CHECKBOX_GROUP_CONTEXT);
+}
+function injectCheckboxGroupContextOptional() {
+    return inject(CHECKBOX_GROUP_CONTEXT, { optional: true });
+}
+
+class CheckboxGroup {
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    valueModel = model(undefined, { ...(ngDevMode ? { debugName: "valueModel" } : /* istanbul ignore next */ {}), alias: "value" });
+    nameInput = input(undefined, { ...(ngDevMode ? { debugName: "nameInput" } : /* istanbul ignore next */ {}), alias: "name" });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: "disabled",
+        transform: booleanAttribute });
+    readOnlyInput = input(false, { ...(ngDevMode ? { debugName: "readOnlyInput" } : /* istanbul ignore next */ {}), alias: "readOnly",
+        transform: booleanAttribute });
+    invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {}), alias: "invalid",
+        transform: booleanAttribute });
+    maxSelectedValues = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSelectedValues" }] : /* istanbul ignore next */ []));
+    group = useCheckboxGroup({
+        context: () => ({
+            defaultValue: this.defaultValue(),
+            value: this.valueModel(),
+            name: this.nameInput(),
+            disabled: this.disabledInput(),
+            readOnly: this.readOnlyInput(),
+            invalid: this.invalidInput(),
+            maxSelectedValues: this.maxSelectedValues(),
+            onValueChange: (value) => this.valueModel.set(value),
+        }),
+    });
+    value = this.group.value;
+    name = this.group.name;
+    disabled = this.group.disabled;
+    readOnly = this.group.readOnly;
+    invalid = this.group.invalid;
+    isChecked(value) {
+        return this.group.isChecked(value);
+    }
+    setValue(value) {
+        this.group.setValue(value);
+    }
+    addValue(value) {
+        this.group.addValue(value);
+    }
+    removeValue(value) {
+        this.group.removeValue(value);
+    }
+    toggleValue(value) {
+        this.group.toggleValue(value);
+    }
+    getItemProps(props) {
+        return this.group.getItemProps(props);
+    }
+    constructor() {
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => ({ role: "group", ...checkboxAnatomy.build().group.attrs }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: CheckboxGroup, isStandalone: true, selector: "[checkboxGroup]", inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, nameInput: { classPropertyName: "nameInput", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnlyInput: { classPropertyName: "readOnlyInput", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedValues: { classPropertyName: "maxSelectedValues", publicName: "maxSelectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "valueChange" }, providers: [{ provide: CHECKBOX_GROUP_CONTEXT, useExisting: forwardRef(() => CheckboxGroup) }], exportAs: ["checkboxGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[checkboxGroup]",
+                    standalone: true,
+                    exportAs: "checkboxGroup",
+                    providers: [{ provide: CHECKBOX_GROUP_CONTEXT, useExisting: forwardRef(() => CheckboxGroup) }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], valueModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], nameInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxSelectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedValues", required: false }] }] } });
+
+class CheckboxGroupProvider {
+    groupValue = input.required({ ...(ngDevMode ? { debugName: "groupValue" } : /* istanbul ignore next */ {}), alias: "value" });
+    get value() {
+        return this.groupValue().value;
+    }
+    get name() {
+        return this.groupValue().name;
+    }
+    get disabled() {
+        return this.groupValue().disabled;
+    }
+    get readOnly() {
+        return this.groupValue().readOnly;
+    }
+    get invalid() {
+        return this.groupValue().invalid;
+    }
+    isChecked(value) {
+        return this.groupValue().isChecked(value);
+    }
+    setValue(value) {
+        this.groupValue().setValue(value);
+    }
+    addValue(value) {
+        this.groupValue().addValue(value);
+    }
+    removeValue(value) {
+        this.groupValue().removeValue(value);
+    }
+    toggleValue(value) {
+        this.groupValue().toggleValue(value);
+    }
+    getItemProps(props) {
+        return this.groupValue().getItemProps(props);
+    }
+    constructor() {
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => ({ role: "group", ...checkboxAnatomy.build().group.attrs }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxGroupProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: CheckboxGroupProvider, isStandalone: true, selector: "[checkboxGroupProvider]", inputs: { groupValue: { classPropertyName: "groupValue", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            { provide: CHECKBOX_GROUP_CONTEXT, useExisting: forwardRef(() => CheckboxGroupProvider) },
+        ], exportAs: ["checkboxGroupProvider"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxGroupProvider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[checkboxGroupProvider]",
+                    standalone: true,
+                    exportAs: "checkboxGroupProvider",
+                    providers: [
+                        { provide: CHECKBOX_GROUP_CONTEXT, useExisting: forwardRef(() => CheckboxGroupProvider) },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { groupValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+class CheckboxHiddenInput {
+    constructor() {
+        const context = injectCheckboxContext();
+        const field = injectFieldContextOptional();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => {
+                const props = context.api().getHiddenInputProps();
+                const onBlur = props["onBlur"];
+                return {
+                    ...props,
+                    "aria-describedby": field?.ariaDescribedby(),
+                    onBlur: (event) => {
+                        onBlur?.(event);
+                        context.markTouched?.();
+                    },
+                };
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxHiddenInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: CheckboxHiddenInput, isStandalone: true, selector: "[checkboxHiddenInput]", exportAs: ["checkboxHiddenInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxHiddenInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[checkboxHiddenInput]",
+                    standalone: true,
+                    exportAs: "checkboxHiddenInput",
+                }]
+        }], ctorParameters: () => [] });
+
+class CheckboxIndicator {
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        const context = injectCheckboxContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => {
+                const api = context.api();
+                return {
+                    ...api.getIndicatorProps(),
+                    hidden: this.indeterminate() ? !api.indeterminate : !api.checked,
+                };
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: CheckboxIndicator, isStandalone: true, selector: "[checkboxIndicator]", inputs: { indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["checkboxIndicator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[checkboxIndicator]",
+                    standalone: true,
+                    exportAs: "checkboxIndicator",
+                }]
+        }], ctorParameters: () => [], propDecorators: { indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
+
+class CheckboxLabel {
+    constructor() {
+        const context = injectCheckboxContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getLabelProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: CheckboxLabel, isStandalone: true, selector: "[checkboxLabel]", exportAs: ["checkboxLabel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[checkboxLabel]",
+                    standalone: true,
+                    exportAs: "checkboxLabel",
+                }]
+        }], ctorParameters: () => [] });
+
+function useCheckbox(options = { context: () => ({}) }) {
+    const locale = injectLocale();
+    const environment = injectEnvironment();
+    const field = injectFieldContextOptional();
+    const group = injectCheckboxGroupContextOptional();
+    const fallbackId = createId();
+    return useMachine({
+        machine: checkbox.machine,
+        context: () => {
+            const ownProps = options.context();
+            const groupProps = group?.getItemProps({ value: ownProps.value });
+            const groupCheckedChange = groupProps?.onCheckedChange;
+            const ownCheckedChange = ownProps.onCheckedChange;
+            const ids = {
+                label: field?.ids.label,
+                hiddenInput: field?.ids.control,
+                ...ownProps.ids,
+            };
+            return {
+                dir: locale.dir,
+                getRootNode: environment.getRootNode,
+                ...groupProps,
+                ...ownProps,
+                id: ownProps.id ?? fallbackId,
+                ids,
+                checked: ownProps.checked ?? groupProps?.checked,
+                name: ownProps.name ?? groupProps?.name,
+                disabled: Boolean(groupProps?.disabled) ||
+                    Boolean(ownProps.disabled) ||
+                    Boolean(field?.disabled()) ||
+                    undefined,
+                invalid: Boolean(groupProps?.invalid) ||
+                    Boolean(ownProps.invalid) ||
+                    Boolean(field?.invalid()) ||
+                    undefined,
+                readOnly: Boolean(groupProps?.readOnly) ||
+                    Boolean(ownProps.readOnly) ||
+                    Boolean(field?.readOnly()) ||
+                    undefined,
+                required: Boolean(ownProps.required) || Boolean(field?.required()) || undefined,
+                onCheckedChange: (details) => {
+                    groupCheckedChange?.();
+                    ownCheckedChange?.(details);
+                },
+            };
+        },
+        connect: (service, normalize) => checkbox.connect(service, normalize),
+    });
+}
+
+class CheckboxRoot {
+    id = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    elementIds = input(undefined, { ...(ngDevMode ? { debugName: "elementIds" } : /* istanbul ignore next */ {}), alias: "ids" });
+    checked = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    defaultChecked = input(undefined, { ...(ngDevMode ? { debugName: "defaultChecked" } : /* istanbul ignore next */ {}), transform: (value) => typeof value === "boolean"
+            ? value
+            : value === "indeterminate"
+                ? value
+                : booleanAttribute(value) });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    form = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    checkedDetailsChange = output();
+    group = injectCheckboxGroupContextOptional();
+    disabledFromForm = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledFromForm" }] : /* istanbul ignore next */ []));
+    pendingInternalWrites = 0;
+    hasExternalCheckedBinding = false;
+    hasReceivedFormWrite = false;
+    cva = createCvaController({
+        value: this.checked,
+        setDisabled: (disabled) => this.disabledFromForm.set(disabled),
+        componentName: "CheckboxRoot",
+        hasExternalModelBinding: () => this.hasExternalCheckedBinding,
+    });
+    machine = useCheckbox({
+        context: () => ({
+            id: this.id(),
+            ids: this.elementIds(),
+            checked: this.checked(),
+            defaultChecked: this.defaultChecked(),
+            disabled: this.disabled() || this.disabledFromForm() || undefined,
+            invalid: this.invalid() || undefined,
+            required: this.required() || undefined,
+            readOnly: this.readOnly() || undefined,
+            name: this.name(),
+            form: this.form(),
+            value: this.value(),
+            onCheckedChange: (details) => {
+                const shouldWriteModel = !this.group || this.hasExternalCheckedBinding || this.checked() !== undefined;
+                if (shouldWriteModel && this.checked() !== details.checked) {
+                    this.pendingInternalWrites++;
+                    this.checked.set(details.checked);
+                }
+                this.checkedDetailsChange.emit(details);
+                this.cva.notifyValueChange(details.checked);
+            },
+        }),
+    });
+    state = this.machine.state;
+    api = this.machine.api;
+    service = this.machine.service;
+    send = this.machine.send;
+    constructor() {
+        let firstRun = true;
+        effect(() => {
+            void this.checked();
+            if (firstRun) {
+                firstRun = false;
+                this.pendingInternalWrites = 0;
+                return;
+            }
+            if (this.pendingInternalWrites > 0) {
+                this.pendingInternalWrites--;
+                return;
+            }
+            this.hasExternalCheckedBinding = true;
+        });
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => this.api().getRootProps(),
+        });
+    }
+    markTouched() {
+        this.cva.markTouched();
+    }
+    writeValue(value) {
+        const next = value === null ? undefined : value;
+        const current = this.checked();
+        if (!this.hasReceivedFormWrite && current !== undefined) {
+            this.hasExternalCheckedBinding = true;
+        }
+        this.hasReceivedFormWrite = true;
+        if (current !== next) {
+            this.pendingInternalWrites++;
+        }
+        this.cva.writeValue(value);
+    }
+    registerOnChange(fn) {
+        this.cva.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this.cva.registerOnTouched(fn);
+    }
+    setDisabledState(disabled) {
+        this.cva.setDisabledState(disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: CheckboxRoot, isStandalone: true, selector: "[checkboxRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, elementIds: { classPropertyName: "elementIds", publicName: "ids", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, defaultChecked: { classPropertyName: "defaultChecked", publicName: "defaultChecked", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", checkedDetailsChange: "checkedDetailsChange" }, providers: [
+            { provide: CHECKBOX_CONTEXT, useExisting: forwardRef(() => CheckboxRoot) },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxRoot), multi: true },
+        ], exportAs: ["checkboxRoot"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[checkboxRoot]",
+                    standalone: true,
+                    exportAs: "checkboxRoot",
+                    providers: [
+                        { provide: CHECKBOX_CONTEXT, useExisting: forwardRef(() => CheckboxRoot) },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxRoot), multi: true },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], elementIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "ids", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], defaultChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultChecked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checkedDetailsChange: [{ type: i0.Output, args: ["checkedDetailsChange"] }] } });
+
+class CheckboxRootProvider {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    get state() {
+        return this.value().state;
+    }
+    get api() {
+        return this.value().api;
+    }
+    get service() {
+        return this.value().service;
+    }
+    get send() {
+        return this.value().send;
+    }
+    constructor() {
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => this.value().api().getRootProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxRootProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: CheckboxRootProvider, isStandalone: true, selector: "[checkboxRootProvider]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: CHECKBOX_CONTEXT, useExisting: forwardRef(() => CheckboxRootProvider) }], exportAs: ["checkboxRootProvider"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckboxRootProvider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[checkboxRootProvider]",
+                    standalone: true,
+                    exportAs: "checkboxRootProvider",
+                    providers: [{ provide: CHECKBOX_CONTEXT, useExisting: forwardRef(() => CheckboxRootProvider) }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CHECKBOX_CONTEXT, CHECKBOX_GROUP_CONTEXT, CheckboxContext, CheckboxControl, CheckboxGroup, CheckboxGroupProvider, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot, CheckboxRootProvider, checkboxAnatomy, injectCheckboxContext, injectCheckboxGroupContext, injectCheckboxGroupContextOptional, useCheckbox, useCheckboxGroup };
+//# sourceMappingURL=wirekyt-angular-checkbox.mjs.map