import { h } from "@stencil/core";
import Gallery from "@ecl/gallery";
export class EclGallery {
    constructor() {
        this.elId = `ecl-gallery-${Math.random().toString(36).slice(2, 10)}`;
        this.styleClass = '';
        this.noScript = false;
        this.grid = false;
        this.gridTemplate = 1;
        this.ratio = '3-2';
        this.visibleItems = 8;
        this.fullWidth = false;
        this.expandable = true;
        this.fullScreenLabel = '';
        this.noOverlay = false;
        this.disableOverlay = false;
    }
    addScopedClassToDetailActions() {
        setTimeout(() => {
            const elements = [
                ...document.querySelectorAll('.ecl-gallery__detail-actions-mobile'),
                ...document.querySelectorAll('.ecl-gallery__slider-embed'),
                ...document.querySelectorAll('.ecl-gallery__slider-embed-audio'),
                ...document.querySelectorAll('.ecl-gallery__slider-video'),
                ...document.querySelectorAll('.ecl-gallery__slider-image'),
            ];
            elements.forEach(el => {
                el.classList.add(`sc-ecl-gallery-${this.theme}`);
            });
        }, 0);
    }
    getClass() {
        const styleClasses = [
            `ecl-gallery`,
            this.styleClass
        ];
        if (this.fullWidth) {
            styleClasses.push('ecl-gallery--full-width');
        }
        if (this.grid) {
            styleClasses.push('ecl-gallery--grid', `ecl-gallery--template-${this.gridTemplate}`, `ecl-gallery--ratio-${this.ratio}`);
        }
        if (this.disableOverlay) {
            styleClasses.push('.ecl-gallery--no-overlay');
        }
        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 items = this.el.querySelectorAll('.ecl-gallery__item');
        this.el.querySelector('.ecl-gallery__list').innerHTML = '';
        this.el.querySelector('.ecl-gallery__list').append(...items);
        const images = [
            ...this.el.querySelectorAll('.ecl-gallery__image'),
            ...this.el.querySelectorAll('.ecl-gallery__slider-previous'),
            ...this.el.querySelectorAll('.ecl-gallery__slider-next'),
        ];
        images.forEach(img => {
            img.addEventListener('click', () => {
                this.addScopedClassToDetailActions();
            });
        });
        if (!this.noScript) {
            ;
            window.ECL = window.ECL || {};
            ECL.Gallery = Gallery;
            const gallery = new Gallery(this.el.firstElementChild);
            gallery.init();
        }
    }
    render() {
        return (h("section", Object.assign({ key: 'cbe2364ef737ca5e4cc6c0e052e5502bdbae7665', class: this.getClass(), id: this.elId, "data-ecl-gallery": true }, (!this.expandable
            ? { 'data-ecl-gallery-not-expandable': true }
            : { 'data-ecl-gallery-visible-items': this.visibleItems }), this.noOverlay && ({ 'data-ecl-gallery-no-overlay': true }), this.disableOverlay && ({ 'data-ecl-gallery-no-overlay': true }), (!this.expandable && this.srGalleryLabel) && ({ 'aria-label': this.srGalleryLabel })), h("ul", { key: 'deb15f1861804a6825c23ffae9dafdd1afb09a31', class: "ecl-gallery__list" }, h("slot", { key: 'd1a439e5f5ae52140010245a5170ceef7cc2d3db' })), h("div", { key: 'b82966cdad21f1e40404dd268048cb9c472d6b61', class: "ecl-gallery__footer" }, this.expandable ? (h("div", { class: "ecl-gallery__info" }, h("div", { class: "ecl-gallery__info-total" }, h("strong", { "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: "tertiary", "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", { key: 'cd21246ee4ceae9b036833810a359d4b064605eb', 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", { key: '588d47ea1ea6a62be6b0703c5b81a11707824ad1', class: "ecl-gallery__overlay", "data-ecl-gallery-overlay": true, "aria-label": this.ariaLabel || null }, h("header", { key: '9bb7183667964497470990c3337d812945c29ed8', class: "ecl-gallery__close", "data-ecl-gallery-overlay-header": true }, h("ecl-button", { key: 'ce8b66d27642f33f0bbdacb138ba6989e4c41880', theme: this.theme, "style-class": `ecl-gallery__close-button sc-ecl-gallery-${this.theme}`, variant: "tertiary", buttonStyle: "inverted", "hide-label": true, "data-ecl-gallery-close": true }, this.closeLabel, h("ecl-icon", { key: 'cec794fac8c64600b1d939357d96e1f869ebdb21', "style-class": `sc-ecl-gallery-${this.theme}`, icon: "close", size: "m", slot: "icon-after" }))), h("section", { key: '829e4ff2eb44d70e24ba336fcb08d812f7c68de5', class: "ecl-gallery__slider" }, h("div", { key: '99e617a633ed804906428d7dce4ee95b2c7d6b53', class: "ecl-gallery__slider-media-container", "data-ecl-gallery-overlay-media": true })), h("footer", { key: 'e0b621261faa64d8eb5e877d2298d639c6a81874', class: "ecl-gallery__detail", "data-ecl-gallery-overlay-footer": true }, h("div", { key: 'fb247a673663a5ce6aeded25d603d8cac7b0648a', class: "ecl-container" }, h("div", { key: '85e13bca39cafd0419806d9d6a49cacd1362a718', class: "ecl-gallery__detail-container" }, h("div", { key: '1ecdda77d15912a57f77e389cf15a9988c739f7e', class: "ecl-gallery__pager" }, h("div", { key: 'f21ed65232dbff21574905470c79af42ac375c4b', class: "ecl-gallery__detail-counter" }, h("span", { key: '7bc6fe8188480aea3327aab16c61edca6f5dd6d8', "data-ecl-gallery-overlay-counter-current": true }, "0"), ` ${this.counterSeparator} `, h("span", { key: '25706d21c807af1e807c23c2aeb82dce98c447dd', "data-ecl-gallery-overlay-counter-max": true }, "0")), h("div", { key: '2a1e2b63d8b4648987d9f61fceab4963bfeee289', class: "ecl-gallery__controls" }, h("ecl-button", { key: 'ee2545a58d7609ca5a78c96551c9719548c4a07b', theme: this.theme, "style-class": `ecl-gallery__slider-previous sc-ecl-gallery-${this.theme}`, "data-ecl-gallery-overlay-previous": true, variant: "tertiary", type: "button", "hide-label": true }, h("ecl-icon", { key: '8e47e6f458a3e348925661309a92f89c7be2dac1', "style-class": `sc-ecl-gallery-${this.theme}`, slot: "icon-before", size: "s", rotate: "270", icon: "corner-arrow" }), this.prevLabel)), h("ecl-button", { key: 'f924c7fc9d2f8a57278891427faacbb047282aac', theme: this.theme, "style-class": `ecl-gallery__slider-next sc-ecl-gallery-${this.theme}`, "data-ecl-gallery-overlay-next": true, variant: "tertiary", type: "button", "hide-label": true }, this.nextLabel, h("ecl-icon", { key: '518ce7ddbd8f4102046e72b917f4a2a691e4ebf9', "style-class": `sc-ecl-gallery-${this.theme}`, slot: "icon-after", size: "s", rotate: "90", icon: "corner-arrow" }))), h("div", { key: '0ef9db531a04198e215bbe619221df8831d5ae5e', class: "ecl-gallery__detail-actions" }, h("ecl-link", { key: 'f61b60996f4f5a69f9f5ba0d3d042d9f7eebed56', theme: this.theme, "style-class": `ecl-gallery__download sc-ecl-link-${this.theme} sc-ecl-gallery-${this.theme}`, "data-ecl-gallery-overlay-download": true, variant: "standalone", path: "", target: "blank" }, this.fullScreenLabel, h("ecl-icon", { key: '0e93e6db0e5369f6900c7d0f235d0a9adacf10c7', 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", { icon: "share", size: "fluid", slot: "icon-after" })) : '')), h("div", { key: 'd6269eba494bfa79cff92ac2d1c19e9102fbb150', class: "ecl-gallery__detail-description", "data-ecl-gallery-overlay-description": true }), h("div", { key: 'e7b5a34ea3b7fa24c01679974f764c3056a1b334', class: "ecl-gallery__detail-meta", "data-ecl-gallery-overlay-meta": true }))))));
    }
    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 properties() {
        return {
            "elId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "el-id",
                "defaultValue": "`ecl-gallery-${Math.random().toString(36).slice(2, 10)}`"
            },
            "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"
            },
            "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"
            },
            "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"
            },
            "counterSeparator": {
                "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-separator"
            },
            "description": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "description"
            },
            "meta": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "meta"
            },
            "grid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "grid",
                "defaultValue": "false"
            },
            "gridTemplate": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "grid-template",
                "defaultValue": "1"
            },
            "ratio": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "ratio",
                "defaultValue": "'3-2'"
            },
            "nextLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "next-label"
            },
            "prevLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "prev-label"
            },
            "closeLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "close-label"
            },
            "shareLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "share-label"
            },
            "footerLinkPath": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "footer-link-path"
            },
            "footerLinkLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "footer-link-label"
            },
            "visibleItems": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "visible-items",
                "defaultValue": "8"
            },
            "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"
            },
            "viewAllLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "view-all-label"
            },
            "viewAllExpandedLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "view-all-expanded-label"
            },
            "expandable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "expandable",
                "defaultValue": "true"
            },
            "fullScreenLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "full-screen-label",
                "defaultValue": "''"
            },
            "noOverlay": {
                "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-overlay",
                "defaultValue": "false"
            },
            "ariaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-label"
            },
            "disableOverlay": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disable-overlay",
                "defaultValue": "false"
            },
            "srGalleryLabel": {
                "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-gallery-label"
            }
        };
    }
    static get elementRef() { return "el"; }
}
