import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$3 } from './sc-form-control2.js';
import { d as defineCustomElement$2 } from './sc-tooltip2.js';

const scButtonGroupCss = ":host{display:inline-block;--gap:var(--sc-spacing-small)}.button-group{display:flex;flex-wrap:wrap}.button-group--separate{gap:var(--gap)}";

const ScButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
  }
  findButton(el) {
    return ['sc-button'].includes(el.tagName.toLowerCase()) ? el : el.querySelector(['sc-button'].join(','));
  }
  handleFocus(event) {
    const button = this.findButton(event.target);
    button === null || button === void 0 ? void 0 : button.classList.add('sc-button-group__button--focus');
  }
  handleBlur(event) {
    const button = this.findButton(event.target);
    button === null || button === void 0 ? void 0 : button.classList.remove('sc-button-group__button--focus');
  }
  handleMouseOver(event) {
    const button = this.findButton(event.target);
    button === null || button === void 0 ? void 0 : button.classList.add('sc-button-group__button--hover');
  }
  handleMouseOut(event) {
    const button = this.findButton(event.target);
    button === null || button === void 0 ? void 0 : button.classList.remove('sc-button-group__button--hover');
  }
  handleSlotChange() {
    if (this.separate)
      return;
    const slottedElements = this.el.shadowRoot.querySelector('slot').assignedElements({ flatten: true });
    slottedElements.forEach((el) => {
      const slotted = this.el.shadowRoot.querySelector('slot');
      const index = slotted.assignedNodes().indexOf(el);
      const button = this.findButton(el);
      if (button !== null || !this.separate) {
        button.classList.add('sc-button-group__button');
        button.classList.toggle('sc-button-group__button--first', index === 0);
        button.classList.toggle('sc-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
        button.classList.toggle('sc-button-group__button--last', index === slottedElements.length - 1);
      }
    });
  }
  render() {
    return (h("sc-form-control", { part: "base", class: {
        'button-group': true,
        'button-group--separate': this.separate,
      }, role: "group", "aria-label": this.label, onFocusout: e => this.handleBlur(e), onFocusin: e => this.handleFocus(e), onMouseOver: e => this.handleMouseOver(e), onMouseOut: e => this.handleMouseOut(e), label: this.label }, h("slot", { onSlotchange: () => this.handleSlotChange() })));
  }
  get el() { return this; }
  static get style() { return scButtonGroupCss; }
}, [1, "sc-button-group", {
    "label": [1],
    "separate": [4]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-button-group", "sc-form-control", "sc-tooltip"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-button-group":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScButtonGroup$1);
      }
      break;
    case "sc-form-control":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-tooltip":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const ScButtonGroup = ScButtonGroup$1;
const defineCustomElement = defineCustomElement$1;

export { ScButtonGroup, defineCustomElement };
