@limetech/lime-elements/dist/esm/limel-split-button.entry.js

Lime Elements

import { r as registerInstance, c as createEvent, h, H as Host } from './index-DBTJNfo7.js';

const splitButtonCss = () => `@charset "UTF-8";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:"";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--lime-primary-color, var(--limel-theme-primary-color))}limel-menu:not([disabled]).primary{color:var(--lime-on-primary-color, var(--limel-theme-on-primary-color))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger: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:"inherit";background-color:transparent}.menu-trigger:not(:disabled):hover,.menu-trigger:not(:disabled):focus,.menu-trigger:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}.menu-trigger:not(:disabled):hover,.menu-trigger:not(:disabled):focus-visible{transform:translate3d(0, 0.01rem, 0);color:"inherit";background-color:var(--lime-elevated-surface-background-color)}.menu-trigger:not(:disabled):hover{box-shadow:var(--button-shadow-hovered)}.menu-trigger: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)}.menu-trigger:not(:disabled):hover,.menu-trigger:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled){cursor:pointer}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger[aria-expanded]:not([aria-expanded=false]){box-shadow:var(--button-shadow-inset-pressed)}.menu-trigger:before{content:"";position:absolute;inset:-0.25rem;z-index:-1}`;

const SplitButton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.select = createEvent(this, "select");
        /**
         * Set to `true` to make the button primary.
         */
        this.primary = 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;
        /**
         * A list of items and separators to show in the menu.
         */
        this.items = [];
        this.renderMenu = () => {
            if (this.items.length === 0) {
                return;
            }
            return (h("limel-menu", { class: {
                    primary: this.primary,
                }, disabled: this.disabled || this.loading, items: this.items, openDirection: "bottom" }, h("button", { class: "menu-trigger", slot: "trigger", disabled: this.disabled }, "\u22EE")));
        };
        this.filterClickWhenDisabled = (e) => {
            if (this.disabled) {
                e.preventDefault();
            }
        };
    }
    render() {
        return (h(Host, { key: '4ddbc6a1d81d69c50340512ed8a7112b2288fa3e', class: {
                'has-menu': this.items.length > 0,
            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: '050586c28af81bc598021a602d4f274afd7a777b', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
    }
    static get delegatesFocus() { return true; }
};
SplitButton.style = splitButtonCss();

export { SplitButton as limel_split_button };