@limetech/lime-elements
Version:
94 lines (90 loc) • 6.76 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-DBTJNfo7.js';
import { c as createRandomString } from './random-string-JbKhhoXs.js';
const buttonGroupCss = () => ` "UTF-8";*,*:before,*:after{box-sizing:border-box}:host(limel-button-group){display:flex;box-sizing:border-box;align-items:center;border-radius:3.75rem;background-color:var(--button-group-background-color, rgb(var(--contrast-400)));width:max-content;max-width:100%;flex-wrap:nowrap}:host([disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}.button{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:transparent}.button:hover,.button:focus,.button:focus-visible{will-change:color, background-color, box-shadow, transform}.button:hover,.button:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.button:hover{box-shadow:var(--button-shadow-hovered)}.button:active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.button:hover,.button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.button:has(input[disabled]):hover{box-shadow:none;transform:none}.button{position:relative;display:inline-grid;grid-auto-flow:column;align-items:center;max-width:100%;min-width:2rem;height:2rem;padding:0 0.0625rem;margin:0.125rem;border-radius:1rem;font-size:var(--limel-theme-default-font-size);user-select:none}.button:not(:last-child):after{content:"";display:block;height:1rem;width:0.125rem;border-radius:0.25rem;background-color:var(--button-group-text-color, rgb(var(--contrast-1200)));opacity:0.1;position:absolute;right:-0.1875rem;top:0;bottom:0;margin:auto}.button label{cursor:pointer;transition:color 0.2s ease;display:flex;align-items:center;flex:1;height:100%;min-width:0}.button label:has(>limel-badge) .button__label{padding-right:0.25rem}.button input[type=radio]{position:absolute;width:0;opacity:0}.button input[type=radio]:focus-visible+label:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3.75rem;box-shadow:var(--shadow-depth-8-focused)}.button:focus-within{outline:none;color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button:only-child .button__label{padding-left:0.75rem}.button:first-child .button__label{padding-left:0.75rem}.button.button--selected{background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset);color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button.button--selected:active{box-shadow:var(--button-shadow-inset-pressed)}.button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-small-font-size);padding:0 0.75rem}.button__icon{border-radius:50%;vertical-align:middle}limel-badge{margin-right:0.25rem;pointer-events:none}.button:not(.button--selected){--badge-background-color:rgb(var(--contrast-200))}`;
const ButtonGroup = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.change = createEvent(this, "change");
/**
* List of buttons for the group
*/
this.value = [];
/**
* True if the button-group should be disabled
*/
this.disabled = false;
this.radioGroupName = createRandomString();
this.setSelectedButton = () => {
var _a;
this.selectedButtonId = (_a = this.value.find((button) => {
return button.selected;
})) === null || _a === void 0 ? void 0 : _a.id;
};
this.renderButton = this.renderButton.bind(this);
this.onChange = this.onChange.bind(this);
this.renderContent = this.renderContent.bind(this);
}
componentWillLoad() {
this.setSelectedButton();
}
render() {
return (h(Host, { key: '2295d3bf146ae9d3aa44c4a4c3281ce1b72d8a63', role: "radiogroup" }, this.value.map(this.renderButton)));
}
renderButton(button) {
// Prefix with 'b' because html IDs cannot start with a digit,
// and we need to differentiate from the ID on the limel-icon. /Ads
const buttonId = `b${button.id}`;
const classes = {
button: true,
'button--selected': this.isButtonChecked(button),
};
return (h("div", { class: classes }, h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), disabled: this.disabled, id: buttonId, onChange: this.onChange }), h("label", { htmlFor: buttonId }, this.renderContent(button), this.renderBadge(button))));
}
renderContent(button) {
if (button.icon) {
return this.renderIcon(button);
}
return this.renderLabel(button);
}
isButtonChecked(button) {
return button.id === this.selectedButtonId;
}
renderLabel(button) {
return h("span", { class: "button__label" }, button.title);
}
renderIcon(button) {
// Prefix with 'i' because html IDs cannot start with a digit,
// and we need to differentiate from the "buttonId". /Ads
const iconId = `i${button.id}`;
return [
h("limel-icon", { id: iconId, class: "button__icon", "aria-label": button.title, name: button.icon, size: "small", badge: true }),
h("limel-tooltip", { elementId: iconId, label: button.title }),
];
}
renderBadge(button) {
if (!button.badge) {
return;
}
return h("limel-badge", { label: button.badge });
}
onChange(event) {
event.stopPropagation();
const target = event.target;
// The ID is prefixed with `b` in the HTML, remember? /Ads
this.selectedButtonId = target.id.slice(1);
const button = this.value.find((item) => {
return item.id === this.selectedButtonId;
});
this.change.emit(button);
}
valueChanged() {
this.setSelectedButton();
}
static get watchers() { return {
"value": [{
"valueChanged": 0
}]
}; }
};
ButtonGroup.style = buttonGroupCss();
export { ButtonGroup as limel_button_group };