@limetech/lime-elements
Version:
57 lines (52 loc) • 4.83 kB
JavaScript
'use strict';
var index = require('./index-BjHIBY-I.js');
const splitButtonCss = () => ` "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) {
index.registerInstance(this, hostRef);
this.select = index.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 (index.h("limel-menu", { class: {
primary: this.primary,
}, disabled: this.disabled || this.loading, items: this.items, openDirection: "bottom" }, index.h("button", { class: "menu-trigger", slot: "trigger", disabled: this.disabled }, "\u22EE")));
};
this.filterClickWhenDisabled = (e) => {
if (this.disabled) {
e.preventDefault();
}
};
}
render() {
return (index.h(index.Host, { key: '4ddbc6a1d81d69c50340512ed8a7112b2288fa3e', class: {
'has-menu': this.items.length > 0,
}, onClick: this.filterClickWhenDisabled }, index.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();
exports.limel_split_button = SplitButton;