import { h, getAssetPath } from '@stencil/core';
export class EclCarousel {
  constructor() {
    this.styleClass = '';
    this.theme = 'ec';
    this.eclScript = false;
    this.carouselId = undefined;
    this.slidesNumber = undefined;
    this.counterLabel = 'of';
    this.srNavigation = 'Go to slide %d';
    this.srPrevious = 'Prev slides';
    this.srNext = 'Next slides';
    this.srPause = 'Pause carousel';
    this.srPlay = 'Play carousel';
  }
  getClass() {
    return [
      `ecl-carousel`,
      this.styleClass
    ].join(' ');
  }
  componentDidRender() {
    if (this.eclScript) {
      const src = getAssetPath('./build/scripts/ecl-carousel-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 carousel = new ECL.Carousel(this.el.firstElementChild);
        carousel.init();
      };
      document.body.appendChild(script);
    }
  }
  render() {
    return (h("div", { class: this.getClass(), "data-ecl-carosuel": true }, h("div", { class: "ecl-carousel__container" }, h("div", { class: "ecl-carousel__slides", id: this.carouselId }, h("slot", null)), h("button", { class: "ecl-carousel__prev" }, h("ecl-icon", { icon: "corner-arrow", transform: "rotate-270", "style-class": "ecl-icon--inverted ecl-carousel__icon-default sc-ecl-carousel-ec" }), h("span", { class: "ecl-u-sr-only" }, this.srPrevious)), h("button", { class: "ecl-carousel__next" }, h("ecl-icon", { icon: "corner-arrow", transform: "rotate-90", "style-class": "ecl-icon--inverted ecl-carousel__icon-default sc-ecl-carousel-ec" }), h("span", { class: "ecl-u-sr-only" }, this.srNext))), h("div", { class: "ecl-carousel__controls" }, h("div", { class: "ecl-container" }, h("div", { class: "ecl-carousel__autoplay" }, h("button", { class: "ecl-carousel__play" }, h("ecl-icon", { icon: "play", size: "l", color: "inverted", "style-class": `ecl-carousel__icon-default sc-ecl-carousel-${this.theme}` }), h("ecl-icon", { icon: "play-filled", size: "l", color: "inverted", "style-class": `ecl-carousel__icon-active sc-ecl-carousel-${this.theme}` }), h("span", { class: "ecl-u-sr-only" }, this.srPlay)), h("button", { class: "ecl-carousel__pause" }, h("ecl-icon", { icon: "pause", size: "l", "style-class": "ecl-icon--inverted ecl-carousel__icon-default sc-ecl-carousel-ec" }), h("ecl-icon", { icon: "pause-filled", size: "l", color: "inverted", "style-class": `ecl-carousel__icon-active sc-ecl-carousel-${this.theme}` }), h("span", { class: "ecl-u-sr-only" }, this.srPause))), h("div", { class: "ecl-carousel__navigation" }, [...Array(this.slidesNumber)].map((i) => h("button", { class: "ecl-carousel__navigation-item" }, h("span", { class: "ecl-u-sr-only" }, this.srNavigation.replace('%d', i))))), h("div", { class: "ecl-carousel__pagination" }, h("span", { class: "ecl-carousel__current" }), " ", this.counterLabel, " ", h("span", { class: "ecl-carousel__max" }, this.slidesNumber))))));
  }
  static get is() { return "ecl-carousel"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() {
    return {
      "ec": ["./build/styles/ecl-carousel-ec.css"],
      "eu": ["./build/styles/ecl-carousel-eu.css"]
    };
  }
  static get styleUrls() {
    return {
      "ec": ["./build/styles/ecl-carousel-ec.css"],
      "eu": ["./build/styles/ecl-carousel-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": "''"
      },
      "theme": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "theme",
        "reflect": false,
        "defaultValue": "'ec'"
      },
      "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"
      },
      "carouselId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "carousel-id",
        "reflect": false
      },
      "slidesNumber": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "slides-number",
        "reflect": false
      },
      "counterLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "counter-label",
        "reflect": false,
        "defaultValue": "'of'"
      },
      "srNavigation": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "sr-navigation",
        "reflect": false,
        "defaultValue": "'Go to slide %d'"
      },
      "srPrevious": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "sr-previous",
        "reflect": false,
        "defaultValue": "'Prev slides'"
      },
      "srNext": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "sr-next",
        "reflect": false,
        "defaultValue": "'Next slides'"
      },
      "srPause": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "sr-pause",
        "reflect": false,
        "defaultValue": "'Pause carousel'"
      },
      "srPlay": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "sr-play",
        "reflect": false,
        "defaultValue": "'Play carousel'"
      }
    };
  }
  static get elementRef() { return "el"; }
}
//# sourceMappingURL=ecl-carousel.js.map
