chunk.X5ER35KO.js 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import {
  2. T,
  3. e,
  4. h,
  5. n,
  6. o,
  7. r
  8. } from "./chunk.5PIDMFOE.js";
  9. import {
  10. __decorateClass
  11. } from "./chunk.IHGPZX35.js";
  12. // _uyihdawu1:/Users/claviska/Projects/shoelace/src/components/button-group/button-group.scss
  13. 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}";
  14. // src/components/button-group/button-group.ts
  15. var SlButtonGroup = class extends h {
  16. constructor() {
  17. super(...arguments);
  18. this.label = "";
  19. }
  20. handleFocus(event) {
  21. const button = findButton(event.target);
  22. button == null ? void 0 : button.classList.add("sl-button-group__button--focus");
  23. }
  24. handleBlur(event) {
  25. const button = findButton(event.target);
  26. button == null ? void 0 : button.classList.remove("sl-button-group__button--focus");
  27. }
  28. handleMouseOver(event) {
  29. const button = findButton(event.target);
  30. button == null ? void 0 : button.classList.add("sl-button-group__button--hover");
  31. }
  32. handleMouseOut(event) {
  33. const button = findButton(event.target);
  34. button == null ? void 0 : button.classList.remove("sl-button-group__button--hover");
  35. }
  36. handleSlotChange() {
  37. const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
  38. slottedElements.map((el) => {
  39. const index = slottedElements.indexOf(el);
  40. const button = findButton(el);
  41. if (button) {
  42. button.classList.add("sl-button-group__button");
  43. button.classList.toggle("sl-button-group__button--first", index === 0);
  44. button.classList.toggle("sl-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
  45. button.classList.toggle("sl-button-group__button--last", index === slottedElements.length - 1);
  46. }
  47. });
  48. }
  49. render() {
  50. return T`
  51. <div
  52. part="base"
  53. class="button-group"
  54. role="group"
  55. aria-label=${this.label}
  56. @focusout=${this.handleBlur}
  57. @focusin=${this.handleFocus}
  58. @mouseover=${this.handleMouseOver}
  59. @mouseout=${this.handleMouseOut}
  60. >
  61. <slot @slotchange=${this.handleSlotChange}></slot>
  62. </div>
  63. `;
  64. }
  65. };
  66. SlButtonGroup.styles = r(button_group_default);
  67. __decorateClass([
  68. o("slot")
  69. ], SlButtonGroup.prototype, "defaultSlot", 2);
  70. __decorateClass([
  71. e()
  72. ], SlButtonGroup.prototype, "label", 2);
  73. SlButtonGroup = __decorateClass([
  74. n("sl-button-group")
  75. ], SlButtonGroup);
  76. var button_group_default2 = SlButtonGroup;
  77. function findButton(el) {
  78. return el.tagName.toLowerCase() === "sl-button" ? el : el.querySelector("sl-button");
  79. }
  80. export {
  81. button_group_default2 as button_group_default
  82. };