import { h } from "@stencil/core";
import Banner from "@ecl/banner";
export class EclBanner {
    constructor() {
        this.colorMode = '';
        this.external = false;
        this.fullWidth = false;
        this.noScript = false;
        this.boxBackground = 'light';
        this.horizontal = 'left';
        this.vertical = 'center';
        this.fontColor = 'dark';
        this.fontSize = 'm';
        this.size = 'm';
        this.ctaClicked = false;
    }
    getClass() {
        const styleClasses = [
            `ecl-banner`,
            `ecl-banner--${this.size}`,
            `ecl-banner--box-bg-${this.boxBackground}`,
            `ecl-banner--h-${this.horizontal}`,
            `ecl-banner--v-${this.vertical}`,
            `ecl-banner--font-${this.fontSize}`,
            this.styleClass
        ];
        if (this.fullWidth) {
            styleClasses.push('ecl-banner--full-width');
        }
        if (this.colorMode) {
            styleClasses.push(`ecl-color-mode--${this.colorMode}`);
        }
        if (!this.image && !this.sources && !this.tracks) {
            styleClasses.push('ecl-banner--no-media');
        }
        if (this.image || this.sources || this.tracks) {
            styleClasses.push(`ecl-banner--color-${this.fontColor}`);
        }
        return styleClasses.join(' ');
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
        if (this.boxBackground === 'dark') {
            this.fontColor = 'light';
        }
    }
    componentDidLoad() {
        if (this.sources || this.tracks) {
            const video = this.el.querySelector('video');
            if (video) {
                video.setAttribute('data-ecl-banner-video', '');
            }
        }
        if (!this.noScript) {
            ;
            window.ECL = window.ECL || {};
            ECL.Banner = Banner;
            const banner = new Banner(this.el.firstElementChild);
            banner.init();
        }
    }
    componentDidRender() {
        if (this.el.querySelector('.ecl-banner__cta')) {
            this.el.querySelector('.ecl-banner__cta').addEventListener('click', () => {
                this.ctaClicked = true;
            });
        }
    }
    render() {
        const sources = this.sources ? JSON.parse(this.sources) : '';
        const tracks = this.tracks ? JSON.parse(this.tracks) : '';
        const videoSources = sources ? sources.map((source) => (h("source", { type: source.type, src: source.src }))) : '';
        const videoTracks = tracks ? tracks.map((track) => (h("track", { kind: track.kind, label: track.label, src: track.src, srclang: track.src_lang }))) : '';
        return (h("section", { key: 'ea54998b6bd32e7484cd7368d312d286c8820eb3', class: this.getClass() }, this.image && !this.sources && !this.tracks &&
            h("figure", { key: '34cee776e67e7967f5e9ed9c202af886c3d016cb', class: "ecl-banner__picture-container" }, h("ecl-picture", { key: 'd622106aadf6d171065da26222dd2b76b4062358', styleClass: `ecl-banner__picture sc-ecl-banner-${this.theme}`, image: this.image, imageAlt: this.imageAlt, imgClass: `ecl-banner__image sc-ecl-banner-${this.theme}`, "data-ecl-banner-image": true }, h("slot", { key: '2ee5a012ab938ddeee9d382372ec68f0df2e7643', name: "sources" })), this.credit &&
                h("footer", { key: '42d38a6d55119d25e09107d867fdfd9c8a046a4e', class: "ecl-banner__credit", "data-ecl-banner-footer": true }, h("div", { key: '36cc7050428867b9dfb68163721c795aa4603953', class: "ecl-container" }, this.credit))), (this.sources || this.tracks) &&
            h("div", { key: '9892e072ed12cd569d4268c3f7e08a0b33f1656e', class: "ecl-banner__video-container" }, h("ecl-video", { key: 'd4dacfed230e8245aabc31be844c751fc1e34a5c', autoplay: true, loop: true, poster: this.image, muted: true, controls: false, styleClass: `ecl-banner__video sc-ecl-banner-${this.theme}` }, ...videoSources, ...videoTracks), this.credit &&
                h("div", { key: '9f247a2152adba6e1795fd993de8676b41168c62', class: "ecl-banner__credit", "data-ecl-banner-footer": true }, h("div", { key: '1ce8991ed82ed441919f694d4b352dcc02686fe6', class: "ecl-container" }, this.credit)), h("ecl-button", { key: '99a43f8c36c8af416744992298402ed7ee4ae1a6', styleClass: `ecl-banner__play sc-ecl-banner-${this.theme}`, hideLabel: true, type: "button", variant: "tertiary", buttonStyle: "neutral", "data-ecl-banner-play": true, containerExtraClasses: `sc-ecl-banner-${this.theme}` }, this.srPlay, h("ecl-icon", { key: 'f999559f6b71cd878692b1bfab40f6a789bc174b', styleClass: `sc-ecl-banner-${this.theme}`, slot: "icon-after", icon: "play-outline", size: "m" })), h("ecl-button", { key: '58c5d26c36d8e15578596ecdff4f4a0cda75351b', styleClass: `ecl-banner__pause sc-ecl-banner-${this.theme}`, hideLabel: true, type: "button", variant: "tertiary", buttonStyle: "neutral", "data-ecl-banner-pause": true, containerExtraClasses: `sc-ecl-banner-${this.theme}` }, this.srPause, h("ecl-icon", { key: 'e9b3262d16fac83fe390913eb76812e92ce8987b', styleClass: `sc-ecl-banner-${this.theme}`, slot: "icon-after", icon: "pause-outline", size: "m" }))), h("div", { key: 'a81dd4735e46ce63aa0245542b1d03d41bfe738f', class: "ecl-container ecl-banner__info" }, h("div", { key: '5d5a5e022e92e1fc9795db7bd1b02fcef18fda39', class: "ecl-banner__container", "data-ecl-banner-container": true }, h("div", { key: '4ab64455b3947e503d2ebf1310eec9077d758545', class: "ecl-banner__content" }, this.bannerTitle &&
            h("div", { key: '6ae42fd8bb811b8efb89e139ed3fbd832310a1c1', class: "ecl-banner__title" }, h("span", { key: '5b6196ce0aa981faf39caf16280b1f655b9d3880', class: "ecl-banner__title-text" }, this.bannerTitleLink ?
                h("ecl-link", { path: this.bannerTitleLink, "style-class": `ecl-banner__title-link sc-ecl-banner-${this.theme}` }, this.bannerTitle) : this.bannerTitle)), h("p", { key: '99720191a3422b70d3b225c15398677a53d8ba4b', class: "ecl-banner__description" }, h("span", { key: '655aec1a456d47db74f65d771196009a78ef81f6', class: "ecl-banner__description-text" }, this.descriptionLink ?
            h("ecl-link", { path: this.descriptionLink, "style-class": `ecl-banner__description-link sc-ecl-banner-${this.theme}` }, " ", h("slot", null))
            : h("slot", null))), this.ctaLabel && this.ctaLink ?
            h("div", { class: "ecl-banner__cta" }, h("ecl-link", { theme: this.theme, variant: "primary-highlight", path: this.ctaLink, "style-class": `ecl-banner__link-cta sc-ecl-banner-${this.theme}` }, this.ctaLabel, h("ecl-icon", { icon: "corner-arrow", slot: "icon-after", rotate: "90" })))
            : '')))));
    }
    static get is() { return "ecl-banner"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-banner-ec.css"],
            "eu": ["./build/styles/ecl-banner-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-banner-ec.css"],
            "eu": ["build/styles/ecl-banner-eu.css"]
        };
    }
    static get assetsDirs() { return ["build"]; }
    static get properties() {
        return {
            "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",
                "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"
            },
            "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"
            },
            "external": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "external",
                "defaultValue": "false"
            },
            "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"
            },
            "bannerTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "banner-title"
            },
            "bannerTitleLink": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "banner-title-link"
            },
            "descriptionLink": {
                "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-link"
            },
            "image": {
                "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"
            },
            "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"
            },
            "sources": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sources"
            },
            "tracks": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tracks"
            },
            "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"
            },
            "ctaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "cta-label"
            },
            "ctaLink": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "cta-link"
            },
            "boxBackground": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "box-background",
                "defaultValue": "'light'"
            },
            "horizontal": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "horizontal",
                "defaultValue": "'left'"
            },
            "vertical": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "vertical",
                "defaultValue": "'center'"
            },
            "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"
            },
            "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"
            },
            "fontColor": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "font-color",
                "defaultValue": "'dark'"
            },
            "fontSize": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "font-size",
                "defaultValue": "'m'"
            },
            "credit": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "credit"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "'m'"
            },
            "ctaClicked": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "cta-clicked",
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "el"; }
}
