12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- import {
- T,
- e,
- h,
- n,
- o,
- r
- } from "./chunk.5PIDMFOE.js";
- import {
- __decorateClass
- } from "./chunk.IHGPZX35.js";
- // _uyihdawu1:/Users/claviska/Projects/shoelace/src/components/button-group/button-group.scss
- var button_group_default = ":host {\n position: relative;\n box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n box-sizing: inherit;\n}\n\n[hidden] {\n display: none !important;\n}\n\n:host {\n display: inline-block;\n}\n\n.button-group {\n display: flex;\n flex-wrap: nowrap;\n}";
- // src/components/button-group/button-group.ts
- var SlButtonGroup = class extends h {
- constructor() {
- super(...arguments);
- 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.map((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);
- }
- });
- }
- render() {
- return T`
- <div
- part="base"
- class="button-group"
- role="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 = r(button_group_default);
- __decorateClass([
- o("slot")
- ], SlButtonGroup.prototype, "defaultSlot", 2);
- __decorateClass([
- e()
- ], SlButtonGroup.prototype, "label", 2);
- SlButtonGroup = __decorateClass([
- n("sl-button-group")
- ], SlButtonGroup);
- var button_group_default2 = SlButtonGroup;
- function findButton(el) {
- return el.tagName.toLowerCase() === "sl-button" ? el : el.querySelector("sl-button");
- }
- export {
- button_group_default2 as button_group_default
- };
|