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

const buttonCss = () => `@charset "UTF-8";@keyframes reduced-presence{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.7)}}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded){animation:reduced-presence 0.3s ease forwards;transition:padding 0.3s ease, min-width 0.3s ease;transition-delay:0.3s;padding:0;min-width:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .label{transition:font-size 0.8s ease;transition-delay:0.3s;font-size:0;opacity:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-icon,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-spinner,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .icon{transition:all 0.3s ease;transition-delay:0.3s;opacity:0;width:0;height:0}:host{display:inline-block}: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.mdc-button{font-family:inherit}button{display:flex;align-items:center;justify-content:center;gap:0.125rem;border:none;border-radius:0.4rem;padding-top:0;padding-right:var(--button-padding-right, 0.5rem);padding-bottom:0;padding-left:var(--button-padding-left, 0.5rem);min-height:2.25rem;width:100%}button:disabled{cursor:not-allowed}button:disabled.outlined{border-color:rgba(var(--contrast-1700), 0.2)}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(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}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.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);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)}:host(limel-button[primary]) button:not(:disabled){color:var(--lime-on-primary-color, var(--limel-theme-on-primary-color));background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-button[primary]) button:disabled{background-color:rgba(var(--contrast-1700), 0.15)}:host(limel-button:not([primary])) button:not(:disabled){color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-button:not([primary])) button:disabled{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1)}.label{font-size:var(--limel-theme-default-font-size);font-weight:600;letter-spacing:0.03125rem;padding:0 0.25rem}limel-spinner{position:absolute}limel-icon{width:1.25rem;flex-shrink:0;vertical-align:top}svg{height:1.875rem;opacity:0;pointer-events:none;position:absolute;width:1.875rem}svg line{stroke:rgb(var(--contrast-600));stroke-width:2}limel-icon,.label,limel-spinner,svg{transition:opacity 300ms ease-in-out}.loading limel-icon,.loading .label{opacity:0}.loading limel-spinner{opacity:1}.just-loaded limel-icon,.just-loaded .label,.just-failed limel-icon,.just-failed .label{opacity:0}.just-loaded svg,.just-failed svg{opacity:1}.just-failed{background-color:var(--limel-theme-error-color) !important;animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.outlined{border:1px solid;border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}@keyframes shake{10%,90%{transform:translate3d(-0.0625rem, 0, 0)}20%,80%{transform:translate3d(0.125rem, 0, 0)}30%,50%,70%{transform:translate3d(-0.1875rem, 0, 0)}40%,60%{transform:translate3d(0.1875rem, 0, 0)}}`;

const Button = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Set to `true` to make the button primary.
         */
        this.primary = false;
        /**
         * Set to `true` to make the button outlined.
         */
        this.outlined = false;
        /**
         * Set to `true` to disable the button.
         */
        this.disabled = false;
        /**
         * Set to `true` to put the button in the `loading` state.
         * This also disables the button.
         */
        this.loading = false;
        /**
         * Set to `true` to indicate failure instead of success when the button is
         * no longer in the `loading` state.
         */
        this.loadingFailed = false;
        this.justLoaded = false;
        this.filterClickWhenDisabled = (e) => {
            if (this.disabled) {
                e.preventDefault();
            }
        };
    }
    componentWillLoad() {
        makeEnterClickable(this.host);
    }
    disconnectedCallback() {
        removeEnterClickable(this.host);
    }
    render() {
        return (h(Host, { key: '426168cd8aca55bd6dbefb8e00a0890bbb292477', onClick: this.filterClickWhenDisabled }, h("button", { key: '30981d02852f9f6495e5fa36e3590ce04dcd957d', class: {
                loading: this.loading,
                'just-loaded': this.justLoaded && !this.loadingFailed,
                'just-failed': this.justLoaded && this.loadingFailed,
                outlined: this.outlined,
            }, disabled: this.disabled || this.loading, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite" }, this.renderIcon(this.icon), this.renderLabel(), this.renderSpinner(), h("svg", { key: '0fc71b8f9aae8569b0112c3c92da2c2da8d79738', viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
    }
    loadingWatcher(newValue, oldValue) {
        const hasFinishedLoading = this.hasFinishedLoading(newValue, oldValue);
        if (hasFinishedLoading) {
            this.handleLoadingFinished();
        }
        else if (newValue) {
            this.handleLoadingStarted();
        }
    }
    hasFinishedLoading(newValue, oldValue) {
        return oldValue && !newValue;
    }
    handleLoadingFinished() {
        this.justLoaded = true;
        const TIMEOUT = 2000;
        this.justLoadedTimeout = window.setTimeout(() => {
            this.justLoaded = false;
        }, TIMEOUT);
    }
    handleLoadingStarted() {
        this.justLoaded = false;
        window.clearTimeout(this.justLoadedTimeout);
    }
    renderLoadingIcons() {
        if (this.loadingFailed) {
            return [
                h("line", { x1: "9", y1: "9", x2: "21", y2: "21" }),
                h("line", { x1: "21", y1: "9", x2: "9", y2: "21" }),
            ];
        }
        return [
            h("line", { x1: "8", y1: "14", x2: "15", y2: "20" }),
            h("line", { x1: "23", y1: "9", x2: "14", y2: "20" }),
        ];
    }
    renderIcon(icon) {
        const iconName = getIconName(icon);
        if (!iconName) {
            return;
        }
        const title = getIconTitle(icon);
        if (!this.label && !title) {
            const WARNING_MESSAGE = '⚠️ Accessibility warning: `limel-button` has no `label` and its `icon` has no `title`. ' +
                'This creates an inaccessible button for screen reader users. ' +
                'Please add either a `label`, a `title` to the `icon`, or use a `limel-tooltip`. ' +
                'See https://lundalogik.github.io/lime-elements/versions/latest/#/component/limel-button/ ' +
                'for more information.';
            console.warn(WARNING_MESSAGE);
        }
        let iconColor;
        if (typeof icon === 'object') {
            iconColor = icon.color;
        }
        const iconProps = {
            role: 'presentation',
            name: iconName,
            'aria-label': title,
            'aria-hidden': title ? null : 'true', // Use null instead of 'false' to remove attribute
            style: {
                color: iconColor,
            },
        };
        return h("limel-icon", Object.assign({}, iconProps));
    }
    renderLabel() {
        if (!this.label) {
            return;
        }
        return h("span", { class: "label" }, this.label);
    }
    renderSpinner() {
        if (!this.loading) {
            return;
        }
        return h("limel-spinner", { limeBranded: false });
    }
    static get delegatesFocus() { return true; }
    get host() { return getElement(this); }
    static get watchers() { return {
        "loading": [{
                "loadingWatcher": 0
            }]
    }; }
};
Button.style = buttonCss();

export { Button as limel_button };
