import { h } from "@stencil/core";
import getAssetPath from "../../utils/assetPath";
export class EclGallery {
    constructor() {
        this.styleClass = '';
        this.theme = 'ec';
        this.eclScript = false;
        this.slidesNumber = undefined;
        this.counterLabel = undefined;
        this.counterSeparator = undefined;
        this.description = undefined;
        this.meta = undefined;
        this.nextLabel = undefined;
        this.prevLabel = undefined;
        this.closeLabel = undefined;
        this.shareLabel = undefined;
        this.footerLinkPath = undefined;
        this.footerLinkLabel = undefined;
        this.visibleItems = 8;
        this.fullWidth = false;
        this.viewAllLabel = undefined;
        this.viewAllExpandedLabel = undefined;
        this.expandable = true;
        this.fullScreenLabel = '';
        this.noOverlay = false;
        this.ariaLabel = undefined;
    }
    getClass() {
        const styleClasses = [
            `ecl-gallery`,
            this.styleClass
        ];
        if (this.fullWidth) {
            styleClasses.push('ecl-gallery--full-width');
        }
        return styleClasses.join(' ');
    }
    componentDidRender() {
        const items = this.el.querySelectorAll('.ecl-gallery__item');
        this.el.querySelector('.ecl-gallery__list').innerHTML = '';
        this.el.querySelector('.ecl-gallery__list').append(...items);
        if (this.eclScript) {
            const src = getAssetPath('./build/scripts/ecl-gallery-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 gallery = new ECL.Gallery(this.el.firstElementChild);
                gallery.init();
            };
            document.body.appendChild(script);
        }
    }
    render() {
        return (h("section", Object.assign({ class: this.getClass(), "data-ecl-gallery": true, "data-ecl-gallery-visible-items": this.visibleItems }, !this.expandable && ({ 'data-ecl-gallery-not-expandable': true }), this.noOverlay && ({ 'data-ecl-gallery-no-overlay': true })), h("ul", { class: "ecl-gallery__list" }, h("slot", null)), h("div", { class: "ecl-gallery__footer" }, this.expandable ? (h("div", { class: "ecl-gallery__info" }, h("strong", { class: "ecl-gallery__info-total", "data-ecl-gallery-count": true }, "0"), this.counterLabel, ",", this.viewAllLabel || this.viewAllExpandedLabel ? (h("ecl-button", { styleClass: `ecl-gallery__view-all sc-ecl-gallery-${this.theme}`, variant: "ghost", "data-ecl-gallery-collapsed-label": this.viewAllLabel, "data-ecl-gallery-expanded-label": this.viewAllExpandedLabel, "data-ecl-gallery-all": true }, this.viewAllLabel)) : null)) : null, h("hr", { class: "ecl-gallery__footer-divider" }), this.footerLinkPath && this.footerLinkLabel ? (h("div", { class: "ecl-gallery__footer-link" }, h("ecl-link", { path: this.footerLinkPath, variant: "standalone", styleClass: `sc-ecl-gallery-${this.theme}` }, this.footerLinkLabel))) : null), h("dialog", { class: "ecl-gallery__overlay", "data-ecl-gallery-overlay": true, "aria-label": this.ariaLabel || null }, h("header", { class: "ecl-gallery__close", "data-ecl-gallery-overlay-header": true }, h("ecl-button", { theme: this.theme, "style-class": `ecl-gallery__close-button sc-ecl-gallery-${this.theme}`, variant: "ghost", "data-ecl-gallery-close": true }, this.closeLabel, h("ecl-icon", { theme: this.theme, "style-class": `sc-ecl-gallery-${this.theme}`, icon: "close-filled", size: "s", slot: "icon-after" }))), h("section", { class: "ecl-gallery__slider" }, h("div", { class: "ecl-gallery__slider-media-container", "data-ecl-gallery-overlay-media": true })), h("footer", { class: "ecl-gallery__detail", "data-ecl-gallery-overlay-footer": true }, h("div", { class: "ecl-container" }, h("div", { class: "ecl-gallery__detail-actions" }, h("ecl-link", { theme: this.theme, "style-class": `ecl-gallery__download sc-ecl-gallery-${this.theme}`, "data-ecl-gallery-overlay-download": true, variant: "standalone", path: "", target: "blank" }, this.fullScreenLabel, h("ecl-icon", { theme: this.theme, icon: "fullscreen", size: "fluid", slot: "icon-after" })), this.shareLabel ?
            h("ecl-link", { theme: this.theme, "style-class": `ecl-gallery__share sc-ecl-gallery-${this.theme}`, "data-ecl-gallery-overlay-share": true, variant: "standalone", path: "" }, this.shareLabel, h("ecl-icon", { theme: this.theme, icon: "share", size: "fluid", slot: "icon-after" })) : ''), h("div", { class: "ecl-gallery__detail-description", "data-ecl-gallery-overlay-description": true }), h("div", { class: "ecl-gallery__detail-meta", "data-ecl-gallery-overlay-meta": true }), h("div", { class: "ecl-gallery__pager" }, h("ecl-button", { theme: this.theme, "style-class": `ecl-gallery__slider-previous sc-ecl-gallery-${this.theme}`, "data-ecl-gallery-overlay-previous": true, variant: "ghost", type: "button", "hide-label": true }, h("ecl-icon", { theme: this.theme, "style-class": `sc-ecl-gallery-${this.theme}`, slot: "icon-before", size: "s", transform: "rotate-270", icon: "corner-arrow" }), this.prevLabel), h("div", { class: "ecl-gallery__detail-counter" }, h("span", { "data-ecl-gallery-overlay-counter-current": true }, "0"), ` ${this.counterSeparator} `, h("span", { "data-ecl-gallery-overlay-counter-max": true }, "0")), h("ecl-button", { theme: this.theme, "style-class": `ecl-gallery__slider-next sc-ecl-gallery-${this.theme}`, "data-ecl-gallery-overlay-next": true, variant: "ghost", type: "button", "hide-label": true }, this.nextLabel, h("ecl-icon", { theme: this.theme, "style-class": `sc-ecl-gallery-${this.theme}`, slot: "icon-after", size: "s", transform: "rotate-90", icon: "corner-arrow" }))))))));
    }
    static get is() { return "ecl-gallery"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-gallery-ec.css"],
            "eu": ["./build/styles/ecl-gallery-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-gallery-ec.css"],
            "eu": ["build/styles/ecl-gallery-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"
            },
            "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
            },
            "counterSeparator": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "counter-separator",
                "reflect": false
            },
            "description": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "description",
                "reflect": false
            },
            "meta": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "meta",
                "reflect": false
            },
            "nextLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "next-label",
                "reflect": false
            },
            "prevLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "prev-label",
                "reflect": false
            },
            "closeLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "close-label",
                "reflect": false
            },
            "shareLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "share-label",
                "reflect": false
            },
            "footerLinkPath": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "footer-link-path",
                "reflect": false
            },
            "footerLinkLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "footer-link-label",
                "reflect": false
            },
            "visibleItems": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "visible-items",
                "reflect": false,
                "defaultValue": "8"
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "full-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "viewAllLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "view-all-label",
                "reflect": false
            },
            "viewAllExpandedLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "view-all-expanded-label",
                "reflect": false
            },
            "expandable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "expandable",
                "reflect": false,
                "defaultValue": "true"
            },
            "fullScreenLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "full-screen-label",
                "reflect": false,
                "defaultValue": "''"
            },
            "noOverlay": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "no-overlay",
                "reflect": false,
                "defaultValue": "false"
            },
            "ariaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "aria-label",
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=ecl-gallery.js.map
