89 lines
2.7 KiB
JavaScript
89 lines
2.7 KiB
JavaScript
import {
|
|
button_group_styles_default
|
|
} from "./chunk.BXLMMPI7.js";
|
|
import {
|
|
ShoelaceElement,
|
|
e,
|
|
n,
|
|
r
|
|
} from "./chunk.SEXBCYCU.js";
|
|
import {
|
|
x
|
|
} from "./chunk.CXZZ2LVK.js";
|
|
import {
|
|
__decorateClass
|
|
} from "./chunk.KIILAQWQ.js";
|
|
|
|
// src/components/button-group/button-group.component.ts
|
|
var SlButtonGroup = class extends ShoelaceElement {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.disableRole = false;
|
|
this.label = "";
|
|
}
|
|
handleFocus(event) {
|
|
const button = findButton(event.target);
|
|
button == null ? void 0 : button.classList.add("sl-button-group__button--focus");
|
|
}
|
|
handleBlur(event) {
|
|
const button = findButton(event.target);
|
|
button == null ? void 0 : button.classList.remove("sl-button-group__button--focus");
|
|
}
|
|
handleMouseOver(event) {
|
|
const button = findButton(event.target);
|
|
button == null ? void 0 : button.classList.add("sl-button-group__button--hover");
|
|
}
|
|
handleMouseOut(event) {
|
|
const button = findButton(event.target);
|
|
button == null ? void 0 : button.classList.remove("sl-button-group__button--hover");
|
|
}
|
|
handleSlotChange() {
|
|
const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
|
|
slottedElements.forEach((el) => {
|
|
const index = slottedElements.indexOf(el);
|
|
const button = findButton(el);
|
|
if (button) {
|
|
button.classList.add("sl-button-group__button");
|
|
button.classList.toggle("sl-button-group__button--first", index === 0);
|
|
button.classList.toggle("sl-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
|
|
button.classList.toggle("sl-button-group__button--last", index === slottedElements.length - 1);
|
|
button.classList.toggle("sl-button-group__button--radio", button.tagName.toLowerCase() === "sl-radio-button");
|
|
}
|
|
});
|
|
}
|
|
render() {
|
|
return x`
|
|
<div
|
|
part="base"
|
|
class="button-group"
|
|
role="${this.disableRole ? "presentation" : "group"}"
|
|
aria-label=${this.label}
|
|
@focusout=${this.handleBlur}
|
|
@focusin=${this.handleFocus}
|
|
@mouseover=${this.handleMouseOver}
|
|
@mouseout=${this.handleMouseOut}
|
|
>
|
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
};
|
|
SlButtonGroup.styles = button_group_styles_default;
|
|
__decorateClass([
|
|
e("slot")
|
|
], SlButtonGroup.prototype, "defaultSlot", 2);
|
|
__decorateClass([
|
|
r()
|
|
], SlButtonGroup.prototype, "disableRole", 2);
|
|
__decorateClass([
|
|
n()
|
|
], SlButtonGroup.prototype, "label", 2);
|
|
function findButton(el) {
|
|
var _a;
|
|
const selector = "sl-button, sl-radio-button";
|
|
return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
|
|
}
|
|
|
|
export {
|
|
SlButtonGroup
|
|
};
|