import { Component, Element, h, Listen, Prop, Watch } from '@stencil/core';
export class ScToggles {
  constructor() {
    /** 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(e) {
    if (e.target.tagName !== 'SC-TOGGLE')
      return;
    if (this.accordion) {
      this.getToggles().map(details => (details.open = e.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)));
  }
  static get is() { return "sc-toggles"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-toggles.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-toggles.css"]
  }; }
  static get properties() { return {
    "accordion": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Should this function as an accordion?"
      },
      "attribute": "accordion",
      "reflect": false,
      "defaultValue": "false"
    },
    "collapsible": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Are these collapsible?"
      },
      "attribute": "collapsible",
      "reflect": false,
      "defaultValue": "true"
    },
    "theme": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'default' | 'container'",
        "resolved": "\"container\" | \"default\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Theme for the toggles"
      },
      "attribute": "theme",
      "reflect": false,
      "defaultValue": "'default'"
    }
  }; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "collapsible",
      "methodName": "handleCollapibleChange"
    }]; }
  static get listeners() { return [{
      "name": "scShow",
      "method": "handleShowChange",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
