import { Host, h, } from "@stencil/core";
import { isSlotUsed, onComponentRequiredPropUndefined, renderHiddenInput, removeHiddenInput, addFormResetListener, removeFormResetListener, removeDisabledFalse, } from "../../utils/helpers";
/**
 * @slot additional-field - Content to be displayed alongside a checkbox.
 */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export class Checkbox {
    constructor() {
        /**
         * The style of additionalField that will be displayed if used.
         */
        this.additionalFieldDisplay = "static";
        /**
         * If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.
         */
        this.checked = false;
        this.initiallyChecked = this.checked;
        /**
         * If `true`, the checkbox will be set to the disabled state.
         */
        this.disabled = false;
        /**
         * The text to be displayed when dynamic.
         */
        this.dynamicText = "This selection requires additional answers";
        /**
         * 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 indeterminate state will be displayed when checked.
         */
        this.indeterminate = false;
        this.displayIndeterminate = this.indeterminate;
        /**
         * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.
         */
        this.nativeIndeterminateBehaviour = false;
        /**
         * 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 for the checkbox.
         */
        this.value = "";
        this.handleClick = () => {
            this.checked = !this.checked;
            this.displayIndeterminate =
                !this.nativeIndeterminateBehaviour && this.indeterminate && this.checked;
            this.icCheck.emit();
        };
        this.handleFormReset = () => {
            this.checked = this.initiallyChecked;
        };
    }
    watchDisabledHandler() {
        removeDisabledFalse(this.disabled, this.el);
    }
    watchIndeterminateHandler() {
        this.displayIndeterminate =
            this.indeterminate && (this.nativeIndeterminateBehaviour || this.checked);
    }
    componentWillLoad() {
        removeDisabledFalse(this.disabled, this.el);
        addFormResetListener(this.el, this.handleFormReset);
        const { parentElement } = this.el;
        if ((parentElement === null || parentElement === void 0 ? void 0 : parentElement.tagName) === "IC-CHECKBOX-GROUP") {
            const { name, label, size } = parentElement;
            if (!this.name)
                this.name = name;
            if (!this.size)
                this.size = size;
            this.groupLabel = label;
        }
    }
    componentDidLoad() {
        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Checkbox");
    }
    componentDidRender() {
        if (this.additionalFieldDisplay === "static") {
            const textfield = this.el.querySelector("ic-text-field");
            if (!this.checked) {
                textfield === null || textfield === void 0 ? void 0 : textfield.setAttribute("disabled", "");
            }
            else {
                textfield === null || textfield === void 0 ? void 0 : textfield.removeAttribute("disabled");
            }
        }
        else if (this.additionalFieldContainer) {
            this.additionalFieldContainer.style.display = !this.checked
                ? "none"
                : "flex";
        }
    }
    disconnectedCallback() {
        removeFormResetListener(this.el, this.handleFormReset);
    }
    /**
     * Sets focus on the checkbox.
     */
    async setFocus() {
        var _a;
        (_a = this.checkboxEl) === null || _a === void 0 ? void 0 : _a.focus();
    }
    render() {
        const { additionalFieldDisplay, checked, disabled, displayIndeterminate, dynamicText, el, form, groupLabel, handleClick, hideLabel, label, name, size, theme, value, } = this;
        const id = `ic-checkbox-${label}-${groupLabel}`.replace(/ /g, "-");
        const isDynamicAdditionalField = additionalFieldDisplay === "dynamic";
        checked
            ? renderHiddenInput(el, value, name, disabled)
            : removeHiddenInput(el);
        return (h(Host, { key: '0d58d68ec535b1c9e0157aff61052cefa02a21c8', class: {
                "ic-checkbox-disabled": disabled,
                [`ic-checkbox-${size}`]: !!size,
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, h("div", { key: 'b86da60abffa74001b84db5159ff8b0e2afd4aaa', class: "container" }, displayIndeterminate ? (h("div", { class: "indeterminate-symbol" })) : (checked && (h("svg", { class: "checkmark", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", null, "checkmark icon"), h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" })))), h("input", { key: '6d3e3805f3e9dcee22fab04e8a8bace142de8df8', role: "checkbox", class: {
                checkbox: true,
                checked,
                indeterminate: displayIndeterminate,
            }, ref: (el) => (this.checkboxEl = el), type: "checkbox", name: name, id: id, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: handleClick, form: form, "aria-label": hideLabel ? label : undefined }), !hideLabel && (h("ic-typography", { key: '5f6303736627c301bcc855dc5376c26f7edfa1af', class: "checkbox-label", variant: "body" }, h("label", { key: 'aaad8092830165c169d26461d523d61fea02c859', htmlFor: id }, label)))), isSlotUsed(el, "additional-field") && (h("div", { key: '64a75739762fb8bb082983408eb97fae99ec616a', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && h("div", { key: 'ec3d2e0518c07747e33ac3ede567f3246e07852f', class: "branch-corner" }), h("div", { key: '348ef60f64d5ae8cbe208910c30a3c45e9b115d7' }, isDynamicAdditionalField && (h("ic-typography", { key: 'e4942c3cdb030693a90da2b8f38da3fe6f7b5fe4', variant: "caption" }, h("p", { key: '925c10247c2b2532755c1306f69ec5c4cf7537bd', class: "dynamic-text", "aria-live": "polite" }, dynamicText))), h("div", { key: '0cf7e06e8e06aa2830c1040069f00e2dca6844f2', class: {
                "additional-field-wrapper": !isDynamicAdditionalField,
            } }, h("slot", { key: 'f7b465d8706b73a608e1df76f0119f0ea3d08343', name: "additional-field" })))))));
    }
    static get is() { return "ic-checkbox"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-checkbox.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-checkbox.css"]
        };
    }
    static get properties() {
        return {
            "additionalFieldDisplay": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcAdditionalFieldTypes",
                    "resolved": "\"dynamic\" | \"static\"",
                    "references": {
                        "IcAdditionalFieldTypes": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcAdditionalFieldTypes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The style of additionalField that will be displayed if used."
                },
                "getter": false,
                "setter": false,
                "attribute": "additional-field-display",
                "reflect": true,
                "defaultValue": "\"static\""
            },
            "checked": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked."
                },
                "getter": false,
                "setter": false,
                "attribute": "checked",
                "reflect": true,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the checkbox will be set to the disabled state."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "dynamicText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The text to be displayed when dynamic."
                },
                "getter": false,
                "setter": false,
                "attribute": "dynamic-text",
                "reflect": false,
                "defaultValue": "\"This selection requires additional answers\""
            },
            "form": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The <form> element to associate the checkbox with."
                },
                "getter": false,
                "setter": false,
                "attribute": "form",
                "reflect": false
            },
            "groupLabel": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The group label for the checkbox."
                },
                "getter": false,
                "setter": false,
                "attribute": "group-label",
                "reflect": false
            },
            "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"
            },
            "indeterminate": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the indeterminate state will be displayed when checked."
                },
                "getter": false,
                "setter": false,
                "attribute": "indeterminate",
                "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."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "name": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name."
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false
            },
            "nativeIndeterminateBehaviour": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state."
                },
                "getter": false,
                "setter": false,
                "attribute": "native-indeterminate-behaviour",
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "IcSizes",
                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                    "references": {
                        "IcSizes": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcSizes"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group."
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false
            },
            "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\""
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value for the checkbox."
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": false,
                "defaultValue": "\"\""
            }
        };
    }
    static get states() {
        return {
            "initiallyChecked": {},
            "displayIndeterminate": {}
        };
    }
    static get events() {
        return [{
                "method": "icCheck",
                "name": "icCheck",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a checkbox has been checked."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the checkbox.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "watchDisabledHandler"
            }, {
                "propName": "indeterminate",
                "methodName": "watchIndeterminateHandler"
            }];
    }
}
//# sourceMappingURL=ic-checkbox.js.map
