import { Component, Element, h, Prop } from '@stencil/core';
export class ScButtonGroup {
  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() })));
  }
  static get is() { return "sc-button-group"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-button-group.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-button-group.css"]
  }; }
  static get properties() { return {
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "label",
      "reflect": false
    },
    "separate": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "separate",
      "reflect": false
    }
  }; }
  static get elementRef() { return "el"; }
}
