import { h } from "@stencil/core";
import Carousel from "@ecl/carousel";
export class EclCarousel {
    constructor() {
        this.styleClass = '';
        this.noScript = false;
        this.fullWidth = false;
        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() {
        const styleClasses = [
            `ecl-carousel`,
            this.styleClass
        ];
        if (this.colorMode) {
            styleClasses.push(`ecl-color-mode--${this.colorMode}`);
        }
        if (this.fullWidth) {
            styleClasses.push('ecl-carousel--full-width');
        }
        return styleClasses.join(' ');
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    componentDidRender() {
        const slides = this.el.querySelectorAll('.ecl-carousel__slide');
        slides.forEach((slide) => {
            slide.classList.add(`sc-ecl-carousel-${this.theme}`);
        });
        if (!this.noScript) {
            ;
            window.ECL = window.ECL || {};
            ECL.Carousel = Carousel;
            const carousel = new Carousel(this.el.firstElementChild);
            carousel.init();
        }
    }
    render() {
        return (h("div", { key: 'a579fda4887058e1910f5e4dc2fabe68dca8a5d3', class: this.getClass(), "data-ecl-carosuel": true }, h("div", { key: '40150bd5d9c734934a0aa473c9a11d14759b81df', class: "ecl-carousel__controls" }, h("div", { key: '1793d52f9383af807862b4bf42e190366d1fdbfd', class: "ecl-container" }, h("div", { key: 'ef35a4e7051c7506b92e99c0c04a544c6cb033da', class: "ecl-carousel__autoplay" }, h("ecl-button", { key: '95c8437be30bf14f1d53a75d54b396f89af84198', type: "button", variant: "tertiary", buttonStyle: "neutral", styleClass: `ecl-carousel__play sc-ecl-carousel-${this.theme}`, hideLabel: true }, h("ecl-icon", { key: 'b9942422555e672475087f38bab07772429d50e5', icon: "play-outline", size: "m", slot: "icon-after", "style-class": `ecl-carousel__icon-default sc-ecl-carousel-${this.theme}` }), this.srPlay), h("ecl-button", { key: 'd885e74e4499b3e796ec46a9a09ac41855279fe3', type: "button", styleClass: `ecl-carousel__pause sc-ecl-carousel-${this.theme}`, hideLabel: true, buttonStyle: "neutral", variant: "tertiary" }, h("ecl-icon", { key: '36c61ea9c4b4ee760e552bc4614b26e18c3a3b99', icon: "pause-outline", size: "m", slot: "icon-after", "style-class": `ecl-carousel__icon-default sc-ecl-carousel-${this.theme}` }), this.srPause)), h("div", { key: '971887c03bb40d8c23ff5f2bddba7489c6fd362b', class: "ecl-carousel__navigation", role: "tablist" }, [...Array(this.slidesNumber)].map((_, i) => h("ecl-button", { type: "button", variant: "tertiary", buttonStyle: "neutral", styleClass: `ecl-carousel__navigation-item sc-ecl-carousel-${this.theme}` }, i + 1))))), h("div", { key: 'dca65f353613de995dc4a5c90167ea20ed95427a', class: "ecl-carousel__container" }, h("div", { key: 'c787faae7c8ea0ee1a6a74585903a4fbed4a3f3a', class: "ecl-carousel__slides", id: this.carouselId }, h("slot", { key: 'a1261b9a8d48017c0e374b45c3d2f1b471ff7d1d' })))));
    }
    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 properties() {
        return {
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "style-class",
                "defaultValue": "''"
            },
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme"
            },
            "noScript": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-script",
                "defaultValue": "false"
            },
            "carouselId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "carousel-id"
            },
            "colorMode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color-mode"
            },
            "slidesNumber": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "slides-number"
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "full-width",
                "defaultValue": "false"
            },
            "counterLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "counter-label",
                "defaultValue": "'of'"
            },
            "srNavigation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sr-navigation",
                "defaultValue": "'Go to slide %d'"
            },
            "srPrevious": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sr-previous",
                "defaultValue": "'Prev slides'"
            },
            "srNext": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sr-next",
                "defaultValue": "'Next slides'"
            },
            "srPause": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sr-pause",
                "defaultValue": "'Pause carousel'"
            },
            "srPlay": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sr-play",
                "defaultValue": "'Play carousel'"
            }
        };
    }
    static get elementRef() { return "el"; }
}
