import { h, Host } from "@stencil/core";
import { makeEnterClickable, removeEnterClickable, } from "../../util/make-enter-clickable";
import { createRandomString } from "../../util/random-string";
import { getIconName, getIconTitle } from "../icon/get-icon-props";
/**
 * @exampleComponent limel-example-icon-button-basic
 * @exampleComponent limel-example-icon-button-disabled
 * @exampleComponent limel-example-icon-button-elevated
 * @exampleComponent limel-example-icon-button-toggle-state
 * @exampleComponent limel-example-icon-button-icon
 * @exampleComponent limel-example-icon-button-composite
 */
export class IconButton {
    constructor() {
        /**
         * Set to `true` to give the button our standard "elevated" look, lifting
         * it off the flat layout.
         */
        this.elevated = false;
        /**
         * Set to `true` to disable the button.
         */
        this.disabled = false;
        this.tooltipId = createRandomString();
        this.filterClickWhenDisabled = (e) => {
            if (this.disabled) {
                e.preventDefault();
            }
        };
    }
    connectedCallback() {
        this.initialize();
    }
    componentWillLoad() {
        makeEnterClickable(this.host);
    }
    disconnectedCallback() {
        removeEnterClickable(this.host);
    }
    componentDidLoad() {
        this.initialize();
    }
    initialize() {
        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');
        if (!element) {
            return;
        }
    }
    render() {
        const buttonAttributes = {};
        if (this.host.hasAttribute('tabindex')) {
            buttonAttributes.tabindex = this.host.getAttribute('tabindex');
        }
        return (h(Host, { key: '9405f3e395bf097253da6a24e0a6ab06dd85dc4b', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: 'd0c646ad1b57fd65a12ebb56bdfaa72b267632aa', disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
    }
    renderIcon() {
        var _a, _b;
        const icon = getIconName(this.icon);
        const title = getIconTitle(this.icon);
        return (h("limel-icon", { name: icon, "aria-label": title, "aria-hidden": title ? null : 'true', style: {
                color: `${(_a = this.icon) === null || _a === void 0 ? void 0 : _a.color}`,
                '--icon-background-color': `${(_b = this.icon) === null || _b === void 0 ? void 0 : _b.backgroundColor}`,
            } }));
    }
    renderTooltip(tooltipId) {
        if (this.label) {
            return h("limel-tooltip", { elementId: tooltipId, label: this.label });
        }
    }
    static get is() { return "limel-icon-button"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["icon-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["icon-button.css"]
        };
    }
    static get properties() {
        return {
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | Icon",
                    "resolved": "Icon | string",
                    "references": {
                        "Icon": {
                            "location": "import",
                            "path": "../../global/shared-types/icon.types",
                            "id": "src/global/shared-types/icon.types.ts::Icon",
                            "referenceLocation": "Icon"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The icon to display."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "elevated": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to give the button our standard \"elevated\" look, lifting\nit off the flat layout."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "elevated",
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The text to show to screenreaders and other assistive tech."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "label"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to disable the button."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "host"; }
}
