import { Host, h, } from "@stencil/core";
import { getInputDescribedByText, hasValidationStatus, onComponentRequiredPropUndefined, removeDisabledFalse, } from "../../utils/helpers";
const CHECKBOX_SELECTOR = "ic-checkbox";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export class CheckboxGroup {
    constructor() {
        /**
         * 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() {
        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() {
        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, validationStatus, validationText, } = this;
        const describedBy = getInputDescribedByText(name, helperText !== "", validationStatus !== "");
        const renderSRText = validationStatus === "error" || required || hideLabel;
        return (h(Host, { key: '14f796e660bc12e04a7deebc288de1987112a5f9', class: {
                "ic-checkbox-group-disabled": !!disabled,
                [`ic-checkbox-group-${size}`]: true,
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, renderSRText && (h("span", { key: 'ffe548e83ebbdb80220e20c469fb2c81f9dea8f3', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { key: '3b6d7864c62969a582875afce0ba9baac6d17a85', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", { key: 'f7dd53b9c3a5bda90854e9033c90f9a65732498e' }, h("ic-input-label", { key: '3781f0c225a7ac7a2c905d3d58130f7a53b10357', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }))), h("div", { key: '48064a6c2137e78656c3187765d75123f0fd9ab5', class: "checkboxes-container" }, h("slot", { key: '3322f03cf4dfb88b764da8d37555e89790bfa43c' }))), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { key: '18f9971669d4068210360d4cb49233d8fbb9c70c', for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
    }
    static get is() { return "ic-checkbox-group"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-checkbox-group.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-checkbox-group.css"]
        };
    }
    static get properties() {
        return {
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the checkbox group will be set to the disabled state."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The helper text that will be displayed for additional field guidance."
                },
                "getter": false,
                "setter": false,
                "attribute": "helper-text",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "hideLabel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
                },
                "getter": false,
                "setter": false,
                "attribute": "hide-label",
                "reflect": false,
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The label for the checkbox group to be displayed."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name for the checkbox group to differentiate from other groups."
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the checkbox group will require a value."
                },
                "getter": false,
                "setter": false,
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcSizes",
                    "resolved": "\"large\" | \"medium\" | \"small\"",
                    "references": {
                        "IcSizes": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcSizes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The size of the checkboxes to be displayed. This does not affect the font size of the label."
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "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."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            },
            "validationStatus": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcInformationStatusOrEmpty",
                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
                    "references": {
                        "IcInformationStatusOrEmpty": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcInformationStatusOrEmpty"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The validation status - e.g. 'error' | 'warning' | 'success'."
                },
                "getter": false,
                "setter": false,
                "attribute": "validation-status",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "validationText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The text to display as the validation message."
                },
                "getter": false,
                "setter": false,
                "attribute": "validation-text",
                "reflect": false,
                "defaultValue": "\"\""
            }
        };
    }
    static get events() {
        return [{
                "method": "icChange",
                "name": "icChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a checkbox is checked."
                },
                "complexType": {
                    "original": "IcChangeEventDetail",
                    "resolved": "IcChangeEventDetail",
                    "references": {
                        "IcChangeEventDetail": {
                            "location": "import",
                            "path": "./ic-checkbox-group.types",
                            "id": "src/components/ic-checkbox-group/ic-checkbox-group.types.ts::IcChangeEventDetail"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "watchDisabledHandler"
            }, {
                "propName": "label",
                "methodName": "labelNameHandler"
            }, {
                "propName": "name",
                "methodName": "labelNameHandler"
            }, {
                "propName": "theme",
                "methodName": "watchThemeHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "icChange",
                "method": "handleChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "icCheck",
                "method": "selectHandler",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-checkbox-group.js.map
