import { r as registerInstance, h, H as Host, a as getElement } from './index-xvTBZcD2.js';
import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-BgTwPGeH.js';
import { c as createRandomString } from './random-string-JbKhhoXs.js';
import { d as getIconTitle, g as getIconName } from './get-icon-props-CgNJbSP4.js';

const iconButtonCss = () => `@charset "UTF-8";:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button{all:unset}button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--icon-background-color, transparent)}button:not(:disabled):hover,button:not(:disabled):focus,button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}button:not(:disabled):hover,button:not(:disabled):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button:not(:disabled):hover{box-shadow:var(--button-shadow-hovered)}button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button:not(:disabled):hover,button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:50%}button:disabled{cursor:not-allowed;color:var(--limel-theme-text-disabled-on-background-color)}:host([elevated]) button:not(:hover):not(:active):not(:disabled):not(:focus-visible){box-shadow:var(--button-shadow-normal)}:host([elevated]) button:disabled{box-shadow:var(--button-shadow-normal)}limel-icon{padding:0.25rem;width:1.75rem}`;

const IconButton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * 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 delegatesFocus() { return true; }
    get host() { return getElement(this); }
};
IconButton.style = iconButtonCss();

export { IconButton as limel_icon_button };
