import { Host, h } from '@stencil/core';
import { genId } from '../../utils';
/**
 * A collapsible/expandable accordion component
 * @docsPage
 * @exSlot Pork strip steak pastrami alcatra. Ham hock picanha filet mignon, shankle alcatra beef ribs pancetta doner ribeye burgdoggen spare ribs fatback kielbasa pork loin tenderloin. Kevin drumstick burgdoggen kielbasa t-bone strip steak shoulder spare ribs bresaola andouille ball tip swine ground round cow. Turkey pork ham hock pork chop jowl brisket. Fatback kielbasa t-bone, drumstick pork chop jerky corned beef rump prosciutto cupim biltong landjaeger alcatra.

&t;Short loin spare ribs boudin tail. Frankfurter kielbasa spare ribs pastrami, jerky beef ham hock drumstick. Shank beef ribs andouille pork loin. Leberkas spare ribs pork loin pork. Tail cupim landjaeger, rump boudin pork chop tri-tip jowl burgdoggen short ribs andouille meatloaf ham hock venison. Sausage doner jowl, ham shoulder meatloaf tri-tip leberkas biltong burgdoggen sirloin beef ribs salami.
 */
export class BsAccordion {
  constructor() {
    this.controlled = false;
    this.icon = undefined;
    this.headerText = undefined;
    this.headingLevel = undefined;
    this.openItem = false;
    this.openItemId = undefined;
    this.stacked = false;
    this.isOpen = false;
  }
  componentWillLoad() {
    if (!this.hostEl.id)
      this.hostEl.id = genId();
    this.contentId = this.hostEl.id + '-content';
    this.headingId = this.hostEl.id + '-title';
  }
  handleToggled() {
    this.toggled.emit(this.hostEl.id);
    if (!this.controlled)
      this.isOpen = !this.isOpen;
  }
  get openItemMatch() {
    return this.openItemId === this.hostEl.id || this.openItem === true;
  }
  get showContent() {
    return this.controlled ? this.openItemMatch : this.isOpen;
  }
  // avoid unnecessary re-renders
  componentShouldUpdate(newValue, oldValue, propName) {
    if (newValue === oldValue)
      return false;
    if (propName === 'openItemId') {
      return newValue === this.hostEl.id || oldValue === this.hostEl.id;
    }
  }
  render() {
    const IconTag = this.icon ? `bs-icon-${this.icon}` : null;
    return (h(Host, { class: "bs-accordion", "data-stacked": this.stacked }, h("header", { part: "header", "data-open": this.showContent }, h("button", { "aria-controls": this.contentId, "aria-expanded": this.showContent, type: "button", onClick: () => this.handleToggled() }, IconTag && h(IconTag, { "data-position": "start" }), h("span", { id: this.headingId, "aria-level": this.headingLevel, role: "heading" }, this.headerText), h("bs-icon-caret-down", { "data-position": "end" }))), h("div", { "aria-labelledby": this.headingId, class: "bs-accordion-content", "data-open": this.showContent, id: this.contentId, part: "content", role: "region" }, h("div", { "data-slot": true }, h("slot", null)))));
  }
  static get is() { return "bs-accordion"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-accordion.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-accordion.css"]
    };
  }
  static get properties() {
    return {
      "controlled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Use with 'openItem' prop. Set to true when several accordions are grouped together and only one accordion should be open at a time."
        },
        "attribute": "controlled",
        "reflect": false,
        "defaultValue": "false"
      },
      "icon": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Pass in kebab-cased icon name to display an icon on the left; e.g., \"case-study\""
        },
        "attribute": "icon",
        "reflect": false
      },
      "headerText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "ex",
              "text": "Click to Toggle"
            }],
          "text": ""
        },
        "attribute": "header-text",
        "reflect": false
      },
      "headingLevel": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "2 | 3 | 4 | 5",
          "resolved": "2 | 3 | 4 | 5",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Optional heading level to assign to the panel title. 2 thru 5."
        },
        "attribute": "heading-level",
        "reflect": false
      },
      "openItem": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Use with 'controlled' prop. Pass in true when this accordion should open."
        },
        "attribute": "open-item",
        "reflect": false,
        "defaultValue": "false"
      },
      "openItemId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Use with 'controlled' prop. Pass in the active accordion id."
        },
        "attribute": "open-item-id",
        "reflect": false
      },
      "stacked": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Set to true when used in a stack of accordions bordering one another."
        },
        "attribute": "stacked",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get states() {
    return {
      "isOpen": {}
    };
  }
  static get events() {
    return [{
        "method": "toggled",
        "name": "toggled",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits a 'toggled' event when the panel is clicked.  If an id has been set, it will be included as the payload."
        },
        "complexType": {
          "original": "HTMLElement[\"id\"]",
          "resolved": "string",
          "references": {
            "HTMLElement": {
              "location": "global"
            }
          }
        }
      }];
  }
  static get elementRef() { return "hostEl"; }
}
//# sourceMappingURL=bs-accordion.js.map
