'use strict';

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

const index = require('./index-bae2a754.js');
const icons = require('./icons-b8a2231a.js');

const collapsibleCss = "collapsible{}";

const SparkleMenuCollapsible = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.isOpen = true; // default open
  }
  hostData() {
    return {
      class: 'sparkle-menu-collapsible--status-open',
      role: 'button',
      tabindex: '0',
      'aria-label': 'Collapsible Menu'
    };
  }
  toggle() {
    this.isOpen = !this.isOpen;
    removeClassThatStartWith(this.el, 'sparkle-menu-collapsible--status-');
    this.el.classList.add(`sparkle-menu-collapsible--status-${this.isOpen ? 'open' : 'closed'}`);
  }
  __stencil_render() {
    return [
      index.h("a", { onClick: () => this.toggle(), class: `sparkle-menu-collapsible__title` }, this.heading, index.h(icons.DownArrow, null)),
      index.h("div", { class: "sparkle-menu-collapsible__contents" }, index.h("slot", null))
    ];
  }
  get el() { return index.getElement(this); }
  render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
};
const removeClassThatStartWith = (el, classStart) => {
  el.classList.forEach(className => {
    if (className.startsWith(classStart)) {
      el.classList.remove(className);
    }
  });
};
SparkleMenuCollapsible.style = collapsibleCss;

exports.sparkle_menu_collapsible = SparkleMenuCollapsible;
