'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d337cd8a.js');
const helpers = require('./helpers-fc4016d2.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 ic-typography{margin-bottom:var(--ic-space-sm)}:host(.ic-checkbox-group-small) ic-input-label ic-typography{margin-bottom:calc(var(--ic-space-sm) / 2)}ic-input-validation{margin-top:var(--ic-space-sm)}:host(.ic-checkbox-group-small) ic-input-validation{margin-top:calc(var(--ic-space-sm) / 2)}.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.icChange = index.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 validation status - e.g. 'error' | 'warning' | 'success'.
         */
        this.validationStatus = "";
        /**
         * The text to display as the validation message.
         */
        this.validationText = "";
    }
    watchDisabledHandler() {
        helpers.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;
            }
        });
    }
    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() {
        helpers.removeDisabledFalse(this.disabled, this.el);
        this.watchThemeHandler(this.theme);
    }
    componentDidLoad() {
        helpers.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, validationStatus, validationText, } = this;
        const describedBy = helpers.getInputDescribedByText(name, helperText !== "", validationStatus !== "");
        const renderSRText = validationStatus === "error" || required || hideLabel;
        return (index.h(index.Host, { key: '14f796e660bc12e04a7deebc288de1987112a5f9', class: {
                "ic-checkbox-group-disabled": !!disabled,
                [`ic-checkbox-group-${size}`]: true,
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, renderSRText && (index.h("span", { key: 'ffe548e83ebbdb80220e20c469fb2c81f9dea8f3', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), index.h("fieldset", { key: '3b6d7864c62969a582875afce0ba9baac6d17a85', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (index.h("legend", { key: 'f7dd53b9c3a5bda90854e9033c90f9a65732498e' }, index.h("ic-input-label", { key: '3781f0c225a7ac7a2c905d3d58130f7a53b10357', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }))), index.h("div", { key: '48064a6c2137e78656c3187765d75123f0fd9ab5', class: "checkboxes-container" }, index.h("slot", { key: '3322f03cf4dfb88b764da8d37555e89790bfa43c' }))), helpers.hasValidationStatus(validationStatus, disabled) && (index.h("ic-input-validation", { key: '18f9971669d4068210360d4cb49233d8fbb9c70c', for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "disabled": ["watchDisabledHandler"],
        "label": ["labelNameHandler"],
        "name": ["labelNameHandler"],
        "theme": ["watchThemeHandler"]
    }; }
};
CheckboxGroup.style = IcCheckboxGroupStyle0;

exports.ic_checkbox_group = CheckboxGroup;

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