import { h, getAssetPath } from '@stencil/core';
export class EclExpandable {
  constructor() {
    this.styleClass = '';
    this.eclScript = false;
    this.withUtils = false;
    this.isExpanded = false;
    this.labelCollapsed = '';
    this.labelExpanded = '';
    this.theme = 'ec';
  }
  componentWillLoad() {
    const src = getAssetPath('./build/scripts/ecl-expandable-vanilla.js');
    if (document.querySelector(`script[src="${src}"]`)) {
      document.querySelector(`script[src="${src}"]`).remove();
    }
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => {
      const expandable = new ECL.Expandable(this.el);
      expandable.init();
    };
    document.body.appendChild(script);
    if (this.withUtils && !document.querySelector('#ecl-utils-styles')) {
      const style = document.createElement('link');
      style.rel = 'stylesheet';
      style.type = 'text/css';
      style.id = 'ecl-utils-styles';
      style.href = getAssetPath(`./build/styles/ecl-utilities-${this.theme}.css`);
      document.body.appendChild(style);
    }
  }
  getClass() {
    return [
      `ecl-expandable`,
      this.styleClass
    ].join(' ');
  }
  render() {
    return (h("div", { class: this.getClass() }, h("ecl-button", { variant: "secondary", "style-class": "ecl-expandable__toggle", type: "button", "aria-controls": `${this.el.id}-content`, "data-ecl-expandable-toggle": true, "data-ecl-label-expanded": this.labelExpanded, "data-ecl-label-collapsed": this.labelCollapsed }, h("span", { class: "ecl-button__label", "data-ecl-label": true }, this.labelCollapsed), h("ecl-icon", { slot: "icon-after", icon: "corner-arrow", size: "fluid", theme: this.theme, transform: "rotate-180", "style-class": `ecl-button__icon ecl-button__icon--after sc-ecl-button-${this.theme}` })), h("div", { class: "ecl-expandable__content", id: `${this.el.id}-content`, hidden: true }, h("slot", null))));
  }
  static get is() { return "ecl-expandable"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() {
    return {
      "ec": ["./build/styles/ecl-expandable-ec.css"],
      "eu": ["./build/styles/ecl-expandable-eu.css"]
    };
  }
  static get styleUrls() {
    return {
      "ec": ["./build/styles/ecl-expandable-ec.css"],
      "eu": ["./build/styles/ecl-expandable-eu.css"]
    };
  }
  static get assetsDirs() { return ["build"]; }
  static get properties() {
    return {
      "styleClass": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "style-class",
        "reflect": false,
        "defaultValue": "''"
      },
      "eclScript": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "ecl-script",
        "reflect": false,
        "defaultValue": "false"
      },
      "withUtils": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "with-utils",
        "reflect": false,
        "defaultValue": "false"
      },
      "isExpanded": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "is-expanded",
        "reflect": false,
        "defaultValue": "false"
      },
      "labelCollapsed": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label-collapsed",
        "reflect": false,
        "defaultValue": "''"
      },
      "labelExpanded": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label-expanded",
        "reflect": false,
        "defaultValue": "''"
      },
      "theme": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "theme",
        "reflect": false,
        "defaultValue": "'ec'"
      }
    };
  }
  static get elementRef() { return "el"; }
}
//# sourceMappingURL=ecl-expandable.js.map
