@synergy-design-system/components/dist/chunks/chunk.SO27NEQX.js

import {
  button_group_styles_default
} from "./chunk.FCRRZQGL.js";
import {
  enableDefaultSettings
} from "./chunk.WYMKPLYK.js";
import {
  component_styles_default
} from "./chunk.2NT3B5WJ.js";
import {
  SynergyElement
} from "./chunk.L2IYPRPF.js";
import {
  __decorateClass
} from "./chunk.VK2FVWOF.js";

// src/components/button-group/button-group.component.ts
import { html } from "lit";
import { property, query, state } from "lit/decorators.js";
function findButton(el) {
  var _a;
  const selector = "syn-button, syn-radio-button";
  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
}
var SynButtonGroup = class extends SynergyElement {
  constructor() {
    super(...arguments);
    this.disableRole = false;
    this.label = "";
    this.size = "medium";
    this.variant = "outline";
  }
  // eslint-disable-next-line class-methods-use-this
  handleFocus(event) {
    const button = findButton(event.target);
    button == null ? void 0 : button.toggleAttribute("data-syn-button-group__button--focus", true);
  }
  // eslint-disable-next-line class-methods-use-this
  handleBlur(event) {
    const button = findButton(event.target);
    button == null ? void 0 : button.toggleAttribute("data-syn-button-group__button--focus", false);
  }
  // eslint-disable-next-line class-methods-use-this
  handleMouseOver(event) {
    const button = findButton(event.target);
    button == null ? void 0 : button.toggleAttribute("data-syn-button-group__button--hover", true);
  }
  // eslint-disable-next-line class-methods-use-this
  handleMouseOut(event) {
    const button = findButton(event.target);
    button == null ? void 0 : button.toggleAttribute("data-syn-button-group__button--hover", false);
  }
  handleSlotChange() {
    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
    slottedElements.forEach((el) => {
      const index = slottedElements.indexOf(el);
      const button = findButton(el);
      if (button) {
        button.size = this.size;
        if (button.tagName.toLowerCase() === "syn-button") {
          button.variant = this.variant;
        }
        button.toggleAttribute("data-syn-button-group__button", true);
        button.toggleAttribute("data-syn-button-group__button--first", index === 0);
        button.toggleAttribute("data-syn-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
        button.toggleAttribute("data-syn-button-group__button--last", index === slottedElements.length - 1);
        button.toggleAttribute(
          "data-syn-button-group__button--radio",
          button.tagName.toLowerCase() === "syn-radio-button"
        );
      }
    });
  }
  firstUpdated() {
    const startObserving = () => {
      this.mutationObserver.observe(this, {
        attributeFilter: ["size", "variant"],
        attributes: true,
        subtree: true
      });
    };
    this.mutationObserver = new MutationObserver((entries) => {
      this.mutationObserver.disconnect();
      const buttonGroupChanged = entries.some((entry) => entry.target === this);
      const childrenChanged = entries.some((entry) => entry.target !== this);
      if (childrenChanged) {
        entries.filter((entry) => entry.target !== this).forEach((entry) => {
          const target = entry.target;
          const button = findButton(target);
          if (button) {
            button.size = void 0;
            if (button.tagName.toLowerCase() === "syn-button") {
              button.variant = void 0;
            }
          }
        });
      }
      if (buttonGroupChanged || childrenChanged) {
        this.handleSlotChange();
      }
      this.updateComplete.then(() => {
        startObserving();
      });
    });
    startObserving();
  }
  disconnectedCallback() {
    var _a;
    super.disconnectedCallback();
    (_a = this.mutationObserver) == null ? void 0 : _a.disconnect();
  }
  render() {
    return html`
      <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>
    `;
  }
};
SynButtonGroup.styles = [component_styles_default, button_group_styles_default];
__decorateClass([
  query("slot")
], SynButtonGroup.prototype, "defaultSlot", 2);
__decorateClass([
  state()
], SynButtonGroup.prototype, "disableRole", 2);
__decorateClass([
  property()
], SynButtonGroup.prototype, "label", 2);
__decorateClass([
  property({ reflect: true })
], SynButtonGroup.prototype, "size", 2);
__decorateClass([
  property({ reflect: true })
], SynButtonGroup.prototype, "variant", 2);
SynButtonGroup = __decorateClass([
  enableDefaultSettings("SynButtonGroup")
], SynButtonGroup);

export {
  SynButtonGroup
};
//# sourceMappingURL=chunk.SO27NEQX.js.map