import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { r as removeDisabledFalse, o as onComponentRequiredPropUndefined, w as getInputDescribedByText, x as hasValidationStatus } from './helpers.js';
import { d as defineCustomElement$4 } from './ic-input-label2.js';
import { d as defineCustomElement$3 } from './ic-input-validation2.js';
import { d as defineCustomElement$2 } from './ic-typography2.js';

const icCheckboxGroupCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--ic-input-label-text-color:var(--ic-checkbox-group-label);--ic-input-label-helper-text-color:var(--ic-checkbox-group-subtitle);--ic-input-validation-error:var(--ic-checkbox-state-icon-error);--ic-input-validation-status-text-color:var(--ic-checkbox-state-text)}:host(.ic-checkbox-group-disabled){--ic-input-label-text-color:var(--ic-checkbox-group-label-disabled);--ic-input-label-helper-text-color:var(\n    --ic-checkbox-group-subtitle-disabled\n  )}ic-input-label.error{color:var(--ic-checkbox-group-label-error);--ic-typography-color:var(--ic-checkbox-group-label-error);--ic-input-label-helper-text-color:var(--ic-checkbox-group-subtitle-error)}ic-input-label:not(.with-helper) .ic-typography-label,ic-input-label .helpertext{margin-bottom:var(--ic-space-sm)}:host(.ic-checkbox-group-small) ic-input-label:not(.with-helper) .ic-typography-label,:host(.ic-checkbox-group-small) ic-input-label .helpertext{margin-bottom:calc(var(--ic-space-sm) / 2)}:host(.ic-checkbox-group-large) ic-input-label:not(.with-helper) .ic-typography-label,:host(.ic-checkbox-group-large) ic-input-label .helpertext{margin-bottom:calc(var(--ic-space-sm) * 1.5)}ic-input-label .helpertext{display:block}ic-input-validation.show-validation{margin-top:var(--ic-space-sm)}:host(.ic-checkbox-group-small) ic-input-validation.show-validation{margin-top:calc(var(--ic-space-sm) / 2)}:host(.ic-checkbox-group-large) ic-input-validation.show-validation{margin-top:calc(var(--ic-space-sm) * 1.5)}.checkboxes-container{margin-bottom:calc(-1 * var(--ic-space-xxs))}:host(.ic-checkbox-group-small) .checkboxes-container{margin-bottom:calc(-1 * var(--ic-space-xxxs))}.screen-reader-only-text{position:absolute;left:-9999px;background-color:#fff;color:#000;text-transform:none}.screen-reader-only-text:dir(rtl){right:-9999px}";
const IcCheckboxGroupStyle0 = icCheckboxGroupCss;

const CHECKBOX_SELECTOR = "ic-checkbox";
const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.icChange = createEvent(this, "icChange", 7);
        /**
         * If `true`, the checkbox group will be set to the disabled state.
         */
        this.disabled = false;
        /**
         * The helper text that will be displayed for additional field guidance.
         */
        this.helperText = "";
        /**
         * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
         */
        this.hideLabel = false;
        /**
         * If `true`, the checkbox group will require a value.
         */
        this.required = false;
        /**
         * The size of the checkboxes to be displayed. This does not affect the font size of the label.
         */
        this.size = "medium";
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * The value of the `aria-live` attribute on the validation message.
         */
        this.validationAriaLive = "polite";
        /**
         * The validation status - e.g. 'error' | 'warning' | 'success'.
         */
        this.validationStatus = "";
        /**
         * The text to display as the validation message.
         */
        this.validationText = "";
        this.setCheckboxProps = () => {
            this.checkboxes = Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR));
            this.checkboxes.forEach((checkbox) => {
                if (!checkbox.disabled) {
                    checkbox.disabled = this.disabled;
                }
                if (!checkbox.size) {
                    checkbox.size = this.size;
                }
            });
        };
    }
    watchDisabledHandler() {
        this.checkboxes.forEach((checkbox) => {
            checkbox.disabled = this.disabled;
        });
        removeDisabledFalse(this.disabled, this.el);
    }
    labelNameHandler(newValue, oldValue, propName) {
        Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach((checkbox) => {
            if (propName === "label")
                checkbox.groupLabel = newValue;
            else if (checkbox.name === oldValue) {
                // If the checkbox name has been set by the parent, then override it
                checkbox.name = newValue;
            }
        });
    }
    watchSizeHandler() {
        this.checkboxes.forEach((checkbox) => {
            checkbox.size = this.size;
        });
    }
    watchThemeHandler(newValue) {
        Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach((checkbox) => {
            checkbox.theme = newValue;
        });
    }
    handleChange(ev) {
        //don't pass on the event if it has come from slotted text field
        //otherwise any icChange handler bound to the checkbox group will also run
        if (ev.target.tagName === "IC-TEXT-FIELD") {
            ev.stopImmediatePropagation();
        }
    }
    componentWillLoad() {
        this.setCheckboxProps();
        removeDisabledFalse(this.disabled, this.el);
        this.watchThemeHandler(this.theme);
    }
    componentDidLoad() {
        onComponentRequiredPropUndefined([
            { prop: this.label, propName: "label" },
            { prop: this.name, propName: "name" },
        ], "Checkbox Group");
    }
    selectHandler({ target }) {
        const checkedOptions = Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).filter(({ checked, disabled }) => checked && !disabled);
        this.icChange.emit({
            value: checkedOptions.map(({ value }) => value),
            checkedOptions: checkedOptions.map((opt) => {
                var _a;
                return ({
                    checkbox: opt,
                    textFieldValue: (_a = opt.querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.value,
                });
            }),
            selectedOption: target,
        });
    }
    render() {
        const { disabled, helperText, hideLabel, label, name, required, size, theme, validationAriaLive, validationStatus, validationText, } = this;
        const describedBy = getInputDescribedByText(this.el, name, helperText !== "", validationStatus !== "");
        const renderSRText = validationStatus === "error" || required || hideLabel;
        const showValidation = hasValidationStatus(validationStatus, disabled);
        return (h(Host, { key: '710f409b81bb1cc6efa8c881216646cb653170bc', class: {
                "ic-checkbox-group-disabled": !!disabled,
                [`ic-checkbox-group-${size}`]: true,
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, renderSRText && (h("span", { key: 'f51c5a809b512cd8ed608ca46cb3b7e8da917dd9', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { key: '8107a3e6abf16406b201ae7fe5984cf65dc24e6a', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", { key: '1f2d96c8b95e5d23d3d1503e16795141c00d10f2' }, h("ic-input-label", { key: '1d0b955aca0e814dda4536bd88c42602bea1ddd2', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }, h("slot", { key: 'ebe59cbdf8de2d90ef6989354fbbf3ab7c63a275', name: "label", slot: "label" }), h("slot", { key: '425574841027cbf70673fc48ca1558257e8824ec', name: "helper-text", slot: "helper-text" })))), h("div", { key: 'a3df30cadd95a802d580e309f0f35397547023a8', class: "checkboxes-container" }, h("slot", { key: '46f74eb5f9241075b8f504de918af9a5644642fb' }))), h("ic-input-validation", { key: 'b800e52c3348e67ddbfbc8fc5ada934c1e1ace5b', class: {
                "show-validation": showValidation,
            }, for: name, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "" })));
    }
    get el() { return this; }
    static get watchers() { return {
        "disabled": ["watchDisabledHandler"],
        "label": ["labelNameHandler"],
        "name": ["labelNameHandler"],
        "size": ["watchSizeHandler"],
        "theme": ["watchThemeHandler"]
    }; }
    static get style() { return IcCheckboxGroupStyle0; }
}, [1, "ic-checkbox-group", {
        "disabled": [4],
        "helperText": [1, "helper-text"],
        "hideLabel": [4, "hide-label"],
        "label": [1],
        "name": [1],
        "required": [4],
        "size": [1],
        "theme": [1],
        "validationAriaLive": [1, "validation-aria-live"],
        "validationStatus": [1, "validation-status"],
        "validationText": [1, "validation-text"]
    }, [[0, "icChange", "handleChange"], [0, "icCheck", "selectHandler"]], {
        "disabled": ["watchDisabledHandler"],
        "label": ["labelNameHandler"],
        "name": ["labelNameHandler"],
        "size": ["watchSizeHandler"],
        "theme": ["watchThemeHandler"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ic-checkbox-group", "ic-input-label", "ic-input-validation", "ic-typography"];
    components.forEach(tagName => { switch (tagName) {
        case "ic-checkbox-group":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, CheckboxGroup);
            }
            break;
        case "ic-input-label":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "ic-input-validation":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "ic-typography":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const IcCheckboxGroup = CheckboxGroup;
const defineCustomElement = defineCustomElement$1;

export { IcCheckboxGroup, defineCustomElement };

//# sourceMappingURL=ic-checkbox-group.js.map