import { Host, h, } from "@stencil/core";
import { getInputDescribedByText, hasValidationStatus, onComponentRequiredPropUndefined, removeDisabledFalse, } from "../../utils/helpers";
const CHECKBOX_SELECTOR = "ic-checkbox";
/**
 * @slot helper-text - Content is set as the helper text for the checkbox group.
 * @slot label - Content is placed as the label text.
 */
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 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 : "" })));
    }
    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\""
            },
            "validationAriaLive": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcAriaLive",
                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
                    "references": {
                        "IcAriaLive": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcAriaLive"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the `aria-live` attribute on the validation message."
                },
                "getter": false,
                "setter": false,
                "attribute": "validation-aria-live",
                "reflect": false,
                "defaultValue": "\"polite\""
            },
            "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": "size",
                "methodName": "watchSizeHandler"
            }, {
                "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
