import { Host, h, } from "@stencil/core";
import { isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, isSlottedInGroup, } from "../../utils/helpers";
/**
 * @slot icon - Content will be displayed alongside the toggle button label.
 * @slot badge - Badge component overlaying the top right of the toggle button.
 */
export class ToggleButton {
    constructor() {
        /**
         * If `true`, the toggle button will be in a checked state.
         */
        this.checked = false;
        /**
         * If `true`, the toggle button will be in disabled state.
         */
        this.disabled = false;
        /**
         * If `true`, the toggle button will fill the width of the container.
         */
        this.fullWidth = false;
        /**
         * The placement of the icon in relation to the toggle button label.
         */
        this.iconPlacement = "left";
        /**
         * If `true`, the toggle button will be in loading state.
         */
        this.loading = false;
        /**
         * If `true`, the toggle button will display as black in the light theme, and white in dark theme.
         */
        this.monochrome = false;
        /**
         * The size of the toggle button to be displayed.
         */
        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 position of the tooltip in relation to the toggle button.
         */
        this.tooltipPlacement = "bottom";
        /**
         * The variant of the toggle button.
         */
        this.variant = "default";
        this.loopAttributes = () => {
            var _a;
            const trackedAttributes = [
                "loading",
                "disabled",
                "full-width",
                "icon-placement",
                "variant",
                "size",
                "theme",
                "monochrome",
            ];
            const parentAttributes = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.attributes;
            for (let i = 0; i < trackedAttributes.length; i++) {
                if (parentAttributes &&
                    parentAttributes.getNamedItem(trackedAttributes[i]) !== null) {
                    const attribute = parentAttributes.getNamedItem(trackedAttributes[i]);
                    if (attribute) {
                        switch (attribute.name) {
                            case trackedAttributes[0]:
                                this.loading = attribute.value !== "false";
                                break;
                            case trackedAttributes[1]:
                                this.disabled = attribute.value !== "false";
                                break;
                            case trackedAttributes[2]:
                                this.fullWidth = attribute.value !== "false";
                                break;
                            case trackedAttributes[3]:
                                this.iconPlacement = attribute.value;
                                break;
                            case trackedAttributes[4]:
                                this.variant = attribute.value;
                                break;
                            case trackedAttributes[5]:
                                this.size = attribute.value;
                                break;
                            case trackedAttributes[6]:
                                this.theme = attribute.value;
                                break;
                            case trackedAttributes[7]:
                                this.monochrome = attribute.value !== "false";
                                break;
                        }
                    }
                }
            }
        };
        this.handleFocus = (ev) => {
            ev.stopImmediatePropagation();
        };
        this.handleClick = () => {
            !this.loading &&
                !this.disabled &&
                this.icToggleChecked.emit({
                    checked: this.checked,
                });
        };
    }
    watchDisabledHandler() {
        removeDisabledFalse(this.disabled, this.el);
    }
    componentWillLoad() {
        removeDisabledFalse(this.disabled, this.el);
        if (isSlottedInGroup(this.el)) {
            this.loopAttributes();
        }
    }
    componentDidLoad() {
        onComponentRequiredPropUndefined([
            {
                prop: this.variant === "icon" ? this.accessibleLabel : this.label,
                propName: this.variant === "icon" ? "accessible-label" : "label",
            },
        ], "Toggle button");
    }
    handleHostClick(e) {
        if (this.disabled) {
            e.stopImmediatePropagation();
        }
        else if (!this.loading) {
            this.checked = !this.checked;
        }
    }
    render() {
        return (h(Host, { key: 'c2130c0d6effca56347c9f898018b9125caa04e0', class: {
                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
                ["ic-toggle-button-disabled"]: !!this.disabled,
                ["ic-toggle-button-checked"]: !!this.checked,
                ["ic-toggle-button-icon"]: this.variant === "icon",
                [`ic-toggle-button-${this.size}`]: true,
                ["ic-toggle-button-loading"]: !!this.loading,
                ["ic-toggle-button-monochrome"]: !!this.monochrome,
                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
            }, onFocus: this.handleFocus }, h("ic-button", { key: '99bad5b60f57cbecc96c02beff4ab248592abe5d', "aria-pressed": this.checked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.checked ? "ticked" : "unticked"}`, disabled: this.disabled, size: this.size, fullWidth: this.fullWidth, loading: this.loading, tooltipPlacement: this.tooltipPlacement }, this.variant !== "icon" && this.label, h("slot", { key: '449862b1dca9d441f3b37f4992d02c9666bc5fce' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '7822805ee7c57ddddbab7ae2e1f881ea410a4c7d', name: "icon", slot: `${this.iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: 'c41f62db8ed4a6ab62e0af047c27be442c7aacfb', name: "badge", slot: "badge" })))));
    }
    static get is() { return "ic-toggle-button"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-toggle-button.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-toggle-button.css"]
        };
    }
    static get properties() {
        return {
            "accessibleLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons."
                },
                "getter": false,
                "setter": false,
                "attribute": "accessible-label",
                "reflect": false
            },
            "checked": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the toggle button will be in a checked state."
                },
                "getter": false,
                "setter": false,
                "attribute": "checked",
                "reflect": true,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the toggle button will be in disabled state."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the toggle button will fill the width of the container."
                },
                "getter": false,
                "setter": false,
                "attribute": "full-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "iconPlacement": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcIconPlacementOptions",
                    "resolved": "\"left\" | \"right\" | \"top\" | undefined",
                    "references": {
                        "IcIconPlacementOptions": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcIconPlacementOptions"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The placement of the icon in relation to the toggle button label."
                },
                "getter": false,
                "setter": false,
                "attribute": "icon-placement",
                "reflect": false,
                "defaultValue": "\"left\""
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The label to display in the toggle button. This is required for the default variant of toggle buttons."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "loading": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the toggle button will be in loading state."
                },
                "getter": false,
                "setter": false,
                "attribute": "loading",
                "reflect": false,
                "defaultValue": "false"
            },
            "monochrome": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the toggle button will display as black in the light theme, and white in dark theme."
                },
                "getter": false,
                "setter": false,
                "attribute": "monochrome",
                "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 toggle button to be displayed."
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "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\""
            },
            "tooltipPlacement": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcButtonTooltipPlacement",
                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
                    "references": {
                        "IcButtonTooltipPlacement": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcButtonTooltipPlacement"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The position of the tooltip in relation to the toggle button."
                },
                "getter": false,
                "setter": false,
                "attribute": "tooltip-placement",
                "reflect": false,
                "defaultValue": "\"bottom\""
            },
            "variant": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "\"default\" | \"icon\"",
                    "resolved": "\"default\" | \"icon\" | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The variant of the toggle button."
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": true,
                "defaultValue": "\"default\""
            }
        };
    }
    static get events() {
        return [{
                "method": "icToggleChecked",
                "name": "icToggleChecked",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the user clicks a toggle button."
                },
                "complexType": {
                    "original": "{\n    checked: boolean;\n  }",
                    "resolved": "{ checked: boolean; }",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "watchDisabledHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "click",
                "method": "handleHostClick",
                "target": undefined,
                "capture": true,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-toggle-button.js.map
