import { Host, h } from '@stencil/core';
const ArrowIndicator = props => (h("bs-icon", { class: `arrow-indicator arrow-indicator-${props.position} ${props.open ? 'open' : ''}`, icon: "fab fa-chevron-down", size: 16 }));
export class BsCollapse {
  constructor() {
    this.name = undefined;
    this.collapseId = 'content';
    this.arrowPosition = 'left';
    this.groupId = undefined;
    this.isOpen = false;
  }
  componentDidLoad() {
    if (this.isOpen) {
      this.showContent();
    }
  }
  collapseToggle() {
    this.isOpen = !this.isOpen;
    this.bsCollapseToggled.emit({
      isOpen: this.isOpen,
      name: this.name,
      groupId: this.groupId,
    });
    if (this.isOpen) {
      this.showContent();
    }
    else {
      this.hideContent();
    }
  }
  showContent() {
    const collapseContent = this.el.shadowRoot.querySelector(`#bs-collapse-${this.collapseId}`);
    const childrenContent = collapseContent.children[0];
    collapseContent.setAttribute('style', `max-height: ${childrenContent.scrollHeight + 20}px`);
  }
  hideContent() {
    const collapseContent = this.el.shadowRoot.querySelector(`#bs-collapse-${this.collapseId}`);
    collapseContent.setAttribute('style', `max-height: 0px`);
  }
  collapseOthers(event) {
    // only collapse others that are part of the same group when this collapse is opened
    if (!this.groupId || !this.isOpen) {
      return;
    }
    const collapseItem = this.el.shadowRoot.querySelector(`#bs-collapse-${this.collapseId}`);
    if (event.detail.name !== this.name && event.detail.groupId === this.groupId) {
      collapseItem.setAttribute('style', 'max-height: 0px');
      this.isOpen = !event.detail.isOpen;
    }
  }
  render() {
    return (h(Host, { class: "accordion" }, h("bs-card", null, h("bs-card-header", { class: `accordion-header ${this.isOpen ? 'open' : ''}`, onClick: this.collapseToggle.bind(this), "aria-controls": "collapse", "aria-expanded": this.isOpen }, h("div", { class: "d-flex justify-content-between" }, h("div", { class: "d-flex align-items-center" }, this.arrowPosition == 'left' && h(ArrowIndicator, { open: this.isOpen }), h("span", null, this.name), h("slot", { name: "header-left" })), h("div", { class: "d-flex align-items-center" }, h("slot", { name: "header-right" }), this.arrowPosition == 'right' && h(ArrowIndicator, { position: "right", open: this.isOpen })))), h("div", { id: `bs-collapse-${this.collapseId}`, class: "bs-collapse", role: "region", "aria-labelledby": "collapse-button", "aria-hidden": !this.isOpen }, h("bs-card-body", null, h("slot", null))))));
  }
  static get is() { return "bs-collapse"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-collapse.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-collapse.css"]
    };
  }
  static get properties() {
    return {
      "name": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "the accordion label which will show up on the accordion button"
        },
        "attribute": "name",
        "reflect": false
      },
      "collapseId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "collapse-id",
        "reflect": false,
        "defaultValue": "'content'"
      },
      "arrowPosition": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'left' | 'right' | ''",
          "resolved": "\"\" | \"left\" | \"right\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "where to show the visual indicator that the collapse is open or closed\npass an empty string to hide the arrow"
        },
        "attribute": "arrow-position",
        "reflect": false,
        "defaultValue": "'left'"
      },
      "groupId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Group identifier to group collapse"
        },
        "attribute": "group-id",
        "reflect": false
      },
      "isOpen": {
        "type": "boolean",
        "mutable": true,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The accordion default state"
        },
        "attribute": "is-open",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get events() {
    return [{
        "method": "bsCollapseToggled",
        "name": "bsCollapseToggled",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Collapse Event emitted"
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "el"; }
  static get listeners() {
    return [{
        "name": "bsCollapseToggled",
        "method": "collapseOthers",
        "target": "document",
        "capture": false,
        "passive": false
      }];
  }
}
//# sourceMappingURL=bs-collapse.js.map
