@limetech/lime-elements/dist/cjs/limel-icon-button.cjs.entry.js

Lime Elements

'use strict';

var index = require('./index-BjHIBY-I.js');
var makeEnterClickable = require('./make-enter-clickable-NuTMC9MU.js');
var randomString = require('./random-string-BTzDB2ee.js');
var getIconProps = require('./get-icon-props-CwpDdQDI.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) {
        index.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 = randomString.createRandomString();
        this.filterClickWhenDisabled = (e) => {
            if (this.disabled) {
                e.preventDefault();
            }
        };
    }
    connectedCallback() {
        this.initialize();
    }
    componentWillLoad() {
        makeEnterClickable.makeEnterClickable(this.host);
    }
    disconnectedCallback() {
        makeEnterClickable.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 (index.h(index.Host, { key: '0df3febef19dcdb72c7c7f3740090414b313be51', onClick: this.filterClickWhenDisabled }, index.h("button", Object.assign({ key: 'fd0d61e30789619c52cd6a71269602efc7065f8e', disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
    }
    renderIcon() {
        var _a, _b;
        const icon = getIconProps.getIconName(this.icon);
        const title = getIconProps.getIconTitle(this.icon);
        return (index.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 (index.h("limel-tooltip", { elementId: tooltipId, label: this.label, helperLabel: this.helperLabel }));
        }
    }
    static get delegatesFocus() { return true; }
    get host() { return index.getElement(this); }
};
IconButton.style = iconButtonCss();

exports.limel_icon_button = IconButton;