import { h, getAssetPath } from '@stencil/core';
export class EclInpageNavigation {
  constructor() {
    this.theme = 'ec';
    this.styleClass = undefined;
    this.withUtils = false;
    this.eclScript = false;
    this.inpageTitle = undefined;
    this.inpageId = undefined;
  }
  getClass() {
    return [
      `ecl-inpage-navigation`,
      this.styleClass
    ].join(' ');
  }
  componentWillRender() {
    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);
    }
  }
  componentDidRender() {
    const items = this.el.querySelectorAll('.ecl-inpage-navigation__item');
    if (items) {
      items.forEach((item) => {
        const link = item.querySelector('.ecl-inpage-navigation__link');
        if (link) {
          link.setAttribute('data-ecl-inpage-navigation-link', 'data-ecl-inpage-navigation-link');
          item.innerHTML = '';
          item.appendChild(link);
        }
      });
      this.el.querySelector('.ecl-inpage-navigation__list').innerHTML = '';
      this.el.querySelector('.ecl-inpage-navigation__list').append(...items);
    }
    if (this.eclScript) {
      const src = getAssetPath('./build/scripts/ecl-inpage-navigation-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 inpageNavigation = new ECL.InpageNavigation(this.el.firstElementChild);
        inpageNavigation.init();
      };
      document.body.appendChild(script);
    }
  }
  render() {
    return (h("nav", { class: this.getClass(), "data-ecl-inpage-navigation": true, "aria-labelledby": this.inpageId }, h("div", { class: "ecl-inpage-navigation__title", id: this.inpageId }, this.inpageTitle), h("div", { class: "ecl-inpage-navigation__body" }, h("button", { class: `ecl-inpage-navigation__trigger sc-ecl-inpage-navigation-${this.theme}`, id: `${this.inpageId}-trigger`, "aria-expanded": "false", "aria-controls": "ecl-inpage-navigation-list", "data-ecl-inpage-navigation-trigger": true, "aria-label": "" }, h("span", { class: "ecl-inpage-navigation__trigger-current", "data-ecl-inpage-navigation-trigger-current": true }), h("ecl-icon", { icon: "corner-arrow", size: "s", transform: "rotate-180", "style-class": "ecl-inpage-navigation__trigger-icon" })), h("ul", { class: "ecl-inpage-navigation__list", "data-ecl-inpage-navigation-list": true, id: `${this.inpageId}-list` }, h("slot", null)))));
  }
  static get is() { return "ecl-inpage-navigation"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() {
    return {
      "ec": ["./build/styles/ecl-inpage-navigation-ec.css"],
      "eu": ["./build/styles/ecl-inpage-navigation-eu.css"]
    };
  }
  static get styleUrls() {
    return {
      "ec": ["./build/styles/ecl-inpage-navigation-ec.css"],
      "eu": ["./build/styles/ecl-inpage-navigation-eu.css"]
    };
  }
  static get assetsDirs() { return ["build"]; }
  static get properties() {
    return {
      "theme": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "theme",
        "reflect": false,
        "defaultValue": "'ec'"
      },
      "styleClass": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "style-class",
        "reflect": 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"
      },
      "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"
      },
      "inpageTitle": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "inpage-title",
        "reflect": false
      },
      "inpageId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "inpage-id",
        "reflect": false
      }
    };
  }
  static get elementRef() { return "el"; }
}
//# sourceMappingURL=ecl-inpage-navigation.js.map
