import { Host, h, } from "@stencil/core";
import { isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, isSlottedInGroup, } from "../../utils/helpers";
const TRACKED_ATTRIBUTES = [
    "loading",
    "disabled",
    "full-width",
    "icon-placement",
    "variant",
    "size",
    "theme",
    "monochrome",
    "outline",
];
/**
 * @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;
        /**
         * If `true`, the toggle button will display with an outline.
         */
        this.outline = true;
        /**
         * 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.handleFocus = (ev) => {
            ev.stopImmediatePropagation();
        };
        this.handleClick = () => {
            if (!this.loading && !this.disabled) {
                this.icToggleChecked.emit({
                    checked: this.checked,
                });
            }
        };
    }
    watchDisabledHandler() {
        this.syncPropsFromToggleButtonGroup();
    }
    componentWillLoad() {
        this.syncPropsFromToggleButtonGroup();
    }
    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;
        }
    }
    syncPropsFromToggleButtonGroup() {
        var _a;
        let groupDisabled = false;
        if (isSlottedInGroup(this.el)) {
            const parentAttributes = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.attributes;
            if (parentAttributes) {
                const groupDisabledAttr = parentAttributes.getNamedItem("disabled");
                if (groupDisabledAttr && groupDisabledAttr.value !== "false") {
                    groupDisabled = true;
                }
                for (let i = 0; i < TRACKED_ATTRIBUTES.length; i++) {
                    const attribute = parentAttributes.getNamedItem(TRACKED_ATTRIBUTES[i]);
                    if (!attribute)
                        continue;
                    switch (attribute.name) {
                        case TRACKED_ATTRIBUTES[0]:
                            this.loading = attribute.value !== "false";
                            break;
                        case TRACKED_ATTRIBUTES[1]:
                            this.disabled = groupDisabled
                                ? true
                                : attribute.value !== "false";
                            break;
                        case TRACKED_ATTRIBUTES[2]:
                            this.fullWidth = attribute.value !== "false";
                            break;
                        case TRACKED_ATTRIBUTES[3]:
                            this.iconPlacement = attribute.value;
                            break;
                        case TRACKED_ATTRIBUTES[4]:
                            this.variant = attribute.value;
                            break;
                        case TRACKED_ATTRIBUTES[5]:
                            this.size = attribute.value;
                            break;
                        case TRACKED_ATTRIBUTES[6]:
                            this.theme = attribute.value;
                            break;
                        case TRACKED_ATTRIBUTES[7]:
                            this.monochrome = attribute.value !== "false";
                            break;
                        case TRACKED_ATTRIBUTES[8]:
                            this.outline = attribute.value !== "false";
                            break;
                    }
                }
                if (groupDisabled) {
                    this.disabled = true;
                }
            }
        }
        removeDisabledFalse(this.disabled, this.el);
    }
    render() {
        const { accessibleLabel, checked, disabled, fullWidth, iconPlacement, monochrome, label, loading, outline, size, theme, tooltipPlacement, variant, } = this;
        const iconVariant = variant === "icon";
        return (h(Host, { key: '40cd81ec38848d6b7b68707348ae0a2b7ee5a976', class: {
                "ic-toggle-button-checked": checked,
                "ic-toggle-button-disabled": disabled,
                "ic-toggle-button-icon": iconVariant,
                "ic-toggle-button-loading": loading,
                "ic-toggle-button-monochrome": monochrome,
                "ic-toggle-button-full-width": fullWidth,
                "ic-toggle-button-hide-outline": !outline,
                [`ic-toggle-button-${size}`]: true,
                [`ic-theme-${theme}`]: theme !== "inherit",
            }, onFocus: this.handleFocus }, h("ic-button", { key: 'ba600a5f546ef45e668800e9f26226f6f7e4985a', "aria-pressed": `${checked}`, variant: iconVariant ? "icon-tertiary" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: '881f7a3d2789ee1d5ba98851380c7dd8527a5ae2' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '2ef62044db8f5c13f280b74cfcadcf6dcec7859e', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: '6fcb625790392bc0602cd58a2ce669aa55073e57', 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",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "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",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "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",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "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\"",
                    "references": {
                        "IcIconPlacementOptions": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcIconPlacementOptions"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "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",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "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",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "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"
            },
            "outline": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the toggle button will display with an outline."
                },
                "getter": false,
                "setter": false,
                "attribute": "outline",
                "reflect": false,
                "defaultValue": "true"
            },
            "size": {
                "type": "string",
                "mutable": true,
                "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 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\"",
                    "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\""
            },
            "tooltipPlacement": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcButtonTooltipPlacement",
                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
                    "references": {
                        "IcButtonTooltipPlacement": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcButtonTooltipPlacement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "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\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "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
