import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ClISz4NF.js';
import { c as FormCheckboxGroupClass, F as FormGroupClass, a as FormGroupSizes, b as FormGroupOrientation } from './constants-Du0ZtfYe.js';
import { g as govHost } from './template-CoD1xawt.js';
import { v as validateProp } from './props-CJZgTDla.js';
import { t as tick } from './stencil.utils-Cjg0wpDG.js';
import { p as propsValueToArray } from './array.utils-CJ0U_ONv.js';
import './utils-CQvUntGY.js';
import './sizes-BcQO4NH2.js';
import './gov.log-BtqD9K8d.js';
import './helpers.types-DNztiAH0.js';

const govFormGroupCss = "gov-form-group,.gov-form-group,gov-form-radio-group,.gov-form-radio-group,gov-form-checkbox-group,.gov-form-checkbox-group{margin-top:0;margin-bottom:0;position:relative;display:flex;width:100%;flex-direction:column;align-items:flex-start}gov-form-group .gov-form-label__label,.gov-form-group .gov-form-label__label,gov-form-radio-group .gov-form-label__label,.gov-form-radio-group .gov-form-label__label,gov-form-checkbox-group .gov-form-label__label,.gov-form-checkbox-group .gov-form-label__label{margin:0}gov-form-group[orientation=horizontal],.gov-form-group[orientation=horizontal],gov-form-radio-group[orientation=horizontal],.gov-form-radio-group[orientation=horizontal],gov-form-checkbox-group[orientation=horizontal],.gov-form-checkbox-group[orientation=horizontal]{flex-direction:row;flex-wrap:wrap}gov-form-group[orientation=horizontal] .gov-form-label__label,.gov-form-group[orientation=horizontal] .gov-form-label__label,gov-form-radio-group[orientation=horizontal] .gov-form-label__label,.gov-form-radio-group[orientation=horizontal] .gov-form-label__label,gov-form-checkbox-group[orientation=horizontal] .gov-form-label__label,.gov-form-checkbox-group[orientation=horizontal] .gov-form-label__label{white-space:nowrap}gov-form-group[gap=xs],.gov-form-group[gap=xs],gov-form-radio-group[gap=xs],.gov-form-radio-group[gap=xs],gov-form-checkbox-group[gap=xs],.gov-form-checkbox-group[gap=xs]{gap:var(--gap, var(--spacing-xs-nudge))}gov-form-group[gap=s],.gov-form-group[gap=s],gov-form-radio-group[gap=s],.gov-form-radio-group[gap=s],gov-form-checkbox-group[gap=s],.gov-form-checkbox-group[gap=s]{gap:var(--gap, var(--spacing-s))}gov-form-group[gap=m],.gov-form-group[gap=m],gov-form-radio-group[gap=m],.gov-form-radio-group[gap=m],gov-form-checkbox-group[gap=m],.gov-form-checkbox-group[gap=m]{gap:var(--gap, var(--spacing-m))}gov-form-group[gap=l],.gov-form-group[gap=l],gov-form-radio-group[gap=l],.gov-form-radio-group[gap=l],gov-form-checkbox-group[gap=l],.gov-form-checkbox-group[gap=l]{gap:var(--gap, var(--spacing-l))}gov-form-group[gap=xl],.gov-form-group[gap=xl],gov-form-radio-group[gap=xl],.gov-form-radio-group[gap=xl],gov-form-checkbox-group[gap=xl],.gov-form-checkbox-group[gap=xl]{gap:var(--gap, var(--spacing-xl))}";

const GovFormCheckboxGroup = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.govChange = createEvent(this, "gov-change");
        /**
         * Gap's size.
         */
        this.gap = undefined;
        /**
         * Elements orientation
         */
        this.orientation = 'vertical';
        /**
         * Group's value
         */
        this.value = undefined;
        this.handleChange = (event) => {
            var _a;
            event.stopPropagation();
            const value = propsValueToArray(this.value);
            if (!Array.isArray(value))
                return;
            if (event.detail.checked) {
                this.value = [...value, event.detail.value];
            }
            else {
                this.value = (_a = value.filter((val) => val !== event.detail.value)) !== null && _a !== void 0 ? _a : [];
            }
            this.govChange.emit({
                value: this.value,
                component: FormCheckboxGroupClass.root,
            });
        };
        this.h = govHost(this.host);
    }
    validateGap(newValue) {
        if (newValue) {
            validateProp(FormGroupSizes, newValue, FormGroupClass.root);
        }
    }
    validateOrientation(newValue) {
        if (newValue) {
            validateProp(FormGroupOrientation, newValue, FormGroupClass.root);
        }
    }
    componentWillLoad() {
        this.validateGap(this.gap);
        this.validateOrientation(this.orientation);
        this.value = propsValueToArray(this.value);
    }
    componentDidRender() {
        tick(() => this.rerenderComponent());
    }
    rerenderComponent() {
        this.host.querySelectorAll('gov-form-checkbox').forEach((element) => {
            if (!element.hasAttribute('listener-attached')) {
                element.addEventListener('gov-change', this.handleChange);
            }
            element.setAttribute('listener-attached', 'true');
            element.checked = this.value.includes(element.value);
        });
    }
    render() {
        return (h(Host, { key: 'cfff4a643c778c0a573b08e6310045b8f0f0764b', gap: this.gap, class: this.h.classes(FormGroupClass.root), value: this.value }, h("slot", { key: '6c9f6c553525f61c3aa95c834fd495d4dd6a8346' })));
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "gap": ["validateGap"],
        "orientation": ["validateOrientation"]
    }; }
};
GovFormCheckboxGroup.style = govFormGroupCss;

export { GovFormCheckboxGroup as gov_form_checkbox_group };
//# sourceMappingURL=gov-form-checkbox-group.entry.js.map

//# sourceMappingURL=gov-form-checkbox-group.entry.js.map