import { h } from "@stencil/core";
export class EclGalleryItem {
    constructor() {
        this.styleClass = '';
        this.thumbZoom = false;
        this.type = 'image';
    }
    getClass() {
        return [
            `ecl-gallery__item`,
            `sc-ecl-gallery-${this.theme}`,
            this.styleClass
        ].join(' ');
    }
    getThumbClass() {
        const thumbClass = [
            'ecl-gallery__thumbnail',
            `sc-ecl-gallery-${this.theme}`,
        ];
        if (this.thumbZoom) {
            thumbClass.push('ecl-picture--zoom');
        }
        return thumbClass.join(' ');
    }
    getLinkAttr() {
        const attrs = {
            'data-ecl-gallery-item': ''
        };
        if (this.mediaSharePath) {
            attrs['data-ecl-gallery-item-share'] = this.mediaSharePath;
        }
        if (this.mediaIframeHref) {
            attrs['data-ecl-gallery-item-embed-src'] = this.mediaIframeHref;
        }
        return attrs;
    }
    getId() {
        if (this.elId) {
            return this.elId;
        }
        const galleryId = this.el.closest('.ecl-gallery').id;
        const itemId = `${galleryId}-item-${Math.random().toString(36).slice(2, 10)}`;
        return itemId;
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    render() {
        return (h("li", { key: '5d29be910a03137fd9ffb4883bf85dcc1a361e40', class: this.getClass(), id: this.getId() }, h("a", Object.assign({ key: 'efe87c79ff285fd0ccfd7d62e495f9ce3d57cc18', href: this.mediaIframeHref ? this.mediaIframeHref : this.mediaHref, class: `ecl-gallery__item-link sc-ecl-gallery-${this.theme}` }, this.getLinkAttr()), h("figure", { key: 'a07feeccb7c3a350c67f87b660ae8a0566bd6823', class: `ecl-gallery__image-container sc-ecl-gallery-${this.theme}` }, this.thumbnail &&
            h("ecl-picture", { key: 'e3f2934e8a3a57bdf9d91da595b9252de8e30626', image: this.thumbnail, "style-class": this.getThumbClass(), "img-class": `ecl-gallery__image sc-ecl-gallery-${this.theme}` }, h("slot", { key: 'f527944436b02da13bf377fa38afe34d91c90b41', name: "thumbnail-sources" })), h("slot", { key: '7dbcd256328b9ce20b71cc85f1cc1a1c0752c27d', name: "video" }), this.type !== 'html-video' ?
            h("ecl-picture", { image: this.mediaHref, "image-alt": this.imageAlt, styleClass: `ecl-gallery__picture sc-ecl-gallery-${this.theme}`, "img-class": `ecl-gallery__image sc-ecl-gallery-${this.theme}`, lazy: true }, h("slot", { name: "sources" })) : '', this.type !== 'image' ?
            h("div", { class: `ecl-gallery__item-icon-wrapper sc-ecl-gallery-${this.theme}` }, h("ecl-icon", { "style-class": `ecl-gallery__item-icon sc-ecl-gallery-${this.theme}`, icon: "play-filled", size: "l", color: "inverted" })) : '', h("figcaption", { key: '028b2c83cdcec0dc1f09f1f037602fd52d98da81', class: `ecl-gallery__description sc-ecl-gallery-${this.theme}`, "data-ecl-gallery-description": true }, this.icon ?
            h("ecl-icon", { icon: this.icon, styleClass: "ecl-gallery__description-icon", size: "s" }) : '', h("div", { key: '140dca7873b1d7e5fef5d942ba7f7810f08c0b6a', class: "ecl-gallery__title", "data-ecl-gallery-title": true, id: `${this.getId()}-title` }, h("slot", { key: '78d2a40160102f802c2939ba1d991eee1fbe2b42' })), h("span", { key: '4a895cc138c66f382ca15f21a8b54a04c0c98fc3', class: `ecl-gallery__meta sc-ecl-gallery-${this.theme}`, "data-ecl-gallery-meta": true }, this.meta))))));
    }
    static get is() { return "ecl-gallery-item"; }
    static get originalStyleUrls() {
        return {
            "$": ["build/styles/ecl-gallery-item.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["build/styles/ecl-gallery-item.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"
            },
            "thumbnail": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "thumbnail"
            },
            "thumbZoom": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "thumb-zoom",
                "defaultValue": "false"
            },
            "imageAlt": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image-alt"
            },
            "mediaHref": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "media-href"
            },
            "mediaIframeHref": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "media-iframe-href"
            },
            "mediaSharePath": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "media-share-path"
            },
            "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"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "'image'"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "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"
            }
        };
    }
    static get elementRef() { return "el"; }
}
