import { Component, Host, h, Prop, Method, Event } from '@stencil/core';
export class Accordion {
  constructor() {
    /**
     * Type defines the theme of the accordion toggle
     */
    this.type = 'is-primary';
    /**
     * Controls if the accordion is collapsed or not
     */
    this.isActive = false;
    /**
     * Label of the open trigger button
     */
    this.openLabel = '';
    /**
     * Bal-Icon of the open trigger button
     */
    this.openIcon = 'plus';
    /**
     * Label of the close trigger button
     */
    this.closeLabel = '';
    /**
     * Bal-Icon of the close trigger button
     */
    this.closeIcon = 'minus';
  }
  /**
   * Open the accordion
   */
  async open() {
    this.isActive = true;
    this.balCollapse.emit(this.isActive);
  }
  /**
   * Close the accordion
   */
  async close() {
    this.isActive = false;
    this.balCollapse.emit(this.isActive);
  }
  /**
   * Triggers the accordion
   */
  async toggle() {
    this.isActive = !this.isActive;
    this.balCollapse.emit(this.isActive);
  }
  render() {
    return (h(Host, { class: "accordion" },
      h("bal-button", { expanded: true, light: true, inverted: true, type: this.type, onClick: () => this.toggle() },
        h("span", { class: "trigger-label", style: this.isActive && { display: 'none' } },
          h("bal-icon", { name: this.openIcon }),
          h("span", { class: "label" }, this.openLabel)),
        h("span", { class: "trigger-label", style: !this.isActive && { display: 'none' } },
          h("bal-icon", { name: this.closeIcon }),
          h("span", { class: "label" }, this.closeLabel))),
      h("div", { class: ['accordion-content', this.type].join(' '), style: !this.isActive && { display: 'none' } },
        h("slot", null))));
  }
  static get is() { return "bal-accordion"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["bal-accordion.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["bal-accordion.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'is-primary' | 'is-info'",
        "resolved": "\"is-info\" | \"is-primary\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Type defines the theme of the accordion toggle"
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'is-primary'"
    },
    "isActive": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Controls if the accordion is collapsed or not"
      },
      "attribute": "is-active",
      "reflect": true,
      "defaultValue": "false"
    },
    "openLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Label of the open trigger button"
      },
      "attribute": "open-label",
      "reflect": false,
      "defaultValue": "''"
    },
    "openIcon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Bal-Icon of the open trigger button"
      },
      "attribute": "open-icon",
      "reflect": false,
      "defaultValue": "'plus'"
    },
    "closeLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Label of the close trigger button"
      },
      "attribute": "close-label",
      "reflect": false,
      "defaultValue": "''"
    },
    "closeIcon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Bal-Icon of the close trigger button"
      },
      "attribute": "close-icon",
      "reflect": false,
      "defaultValue": "'minus'"
    }
  }; }
  static get events() { return [{
      "method": "balCollapse",
      "name": "balCollapse",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emmited when the accordion has changed"
      },
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "open": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Open the accordion",
        "tags": []
      }
    },
    "close": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Close the accordion",
        "tags": []
      }
    },
    "toggle": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Triggers the accordion",
        "tags": []
      }
    }
  }; }
}
