'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7f52f1a2.js');

const balAccordionCss = "@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.sc-bal-accordion-h{display:block}span.trigger-label.sc-bal-accordion{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}span.trigger-label.sc-bal-accordion span.label.sc-bal-accordion{margin-bottom:2px}bal-icon.sc-bal-accordion{height:24px;margin-right:2px}.accordion-content.is-info.sc-bal-accordion{border-top:1px solid #d3dbeb}.is-fullwidth.sc-bal-accordion{width:100%}";

const Accordion = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.balCollapse = index.createEvent(this, "balCollapse", 7);
    /**
     * 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 (index.h(index.Host, { class: "accordion" }, index.h("bal-button", { expanded: true, light: true, inverted: true, type: this.type, onClick: () => this.toggle() }, index.h("span", { class: "trigger-label", style: this.isActive && { display: 'none' } }, index.h("bal-icon", { name: this.openIcon }), index.h("span", { class: "label" }, this.openLabel)), index.h("span", { class: "trigger-label", style: !this.isActive && { display: 'none' } }, index.h("bal-icon", { name: this.closeIcon }), index.h("span", { class: "label" }, this.closeLabel))), index.h("div", { class: ['accordion-content', this.type].join(' '), style: !this.isActive && { display: 'none' } }, index.h("slot", null))));
  }
};
Accordion.style = balAccordionCss;

exports.bal_accordion = Accordion;
