import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const scTogglesCss = ":host{display:block;--toggle-spacing:0}::slotted(*){margin-bottom:var(--toggle-spacing)}::slotted([borderless]:not(:last-child)){border-bottom:1px solid var(--sc-color-gray-200)}";

const ScToggles = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /** Should this function as an accordion? */
    this.accordion = false;
    /** Are these collapsible? */
    this.collapsible = true;
    /** Theme for the toggles */
    this.theme = 'default';
  }
  getToggles() {
    var _a, _b, _c;
    let slotted = this.el.shadowRoot.querySelector('slot');
    if (!slotted)
      return;
    return ((_c = (_b = (_a = slotted === null || slotted === void 0 ? void 0 : slotted.assignedNodes) === null || _a === void 0 ? void 0 : _a.call(slotted)) === null || _b === void 0 ? void 0 : _b.filter) === null || _c === void 0 ? void 0 : _c.call(_b, node => node.nodeName === 'SC-TOGGLE')) || [];
  }
  handleShowChange(event) {
    if (this.accordion) {
      this.getToggles().map(details => (details.open = event.target === details));
    }
  }
  handleCollapibleChange() {
    this.getToggles().map(details => (details.collapsible = this.collapsible));
  }
  componentDidLoad() {
    this.handleCollapibleChange();
    const toggles = this.getToggles();
    if ((toggles === null || toggles === void 0 ? void 0 : toggles.length) && !toggles.some(toggle => toggle.open)) {
      toggles[0].open = true;
    }
  }
  render() {
    const Tag = 'container' === this.theme ? 'sc-card' : 'div';
    return (h(Tag, { class: { toggles: true, [`toggles--theme-${this.theme}`]: true }, part: "base", "no-padding": true }, h("slot", null)));
  }
  get el() { return this; }
  static get watchers() { return {
    "collapsible": ["handleCollapibleChange"]
  }; }
  static get style() { return scTogglesCss; }
}, [1, "sc-toggles", {
    "accordion": [4],
    "collapsible": [4],
    "theme": [1]
  }, [[0, "scShow", "handleShowChange"]]]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-toggles"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-toggles":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScToggles);
      }
      break;
  } });
}
defineCustomElement();

export { ScToggles as S, defineCustomElement as d };
