@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-2714248e.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;cursor:pointer}.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(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );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):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", 7);
    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();
      }
    };
    this.label = undefined;
    this.primary = false;
    this.icon = undefined;
    this.disabled = false;
    this.loading = false;
    this.loadingFailed = false;
    this.items = [];
  }
  render() {
    return (h(Host, { class: {
        'has-menu': this.items.length > 0,
      }, onClick: this.filterClickWhenDisabled }, h("limel-button", { 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 };

//# sourceMappingURL=limel-split-button.entry.js.map