import { h } from "@stencil/core";
import getAssetPath from "../../utils/assetPath";
export class EclContentBlock {
    constructor() {
        this.styleClass = '';
        this.theme = 'ec';
        this.hasDescription = undefined;
        this.eclScript = false;
        this.hasTitle = undefined;
        this.hasLabels = undefined;
        this.hasLinks = undefined;
        this.hasSecondaryLinks = undefined;
        this.hasLists = undefined;
        this.metaPrimary = undefined;
        this.metaSecondary = undefined;
    }
    getClass() {
        return [
            `ecl-content-block`,
            this.styleClass
        ].join(' ');
    }
    componentDidRender() {
        if (this.hasLabels) {
            const labelsContainer = this.el.querySelector('.ecl-content-block__label-container');
            const labels = this.el.querySelectorAll('.ecl-label');
            if (labels) {
                labelsContainer.innerHTML = '';
                labels.forEach((label) => {
                    label.classList.add(`sc-ecl-content-block-${this.theme}`);
                    const listEl = document.createElement('li');
                    listEl.classList.add('ecl-content-block__label-item', `sc-ecl-content-block-${this.theme}`);
                    listEl.appendChild(label);
                    labelsContainer.appendChild(listEl);
                });
            }
        }
        if (this.hasLinks) {
            const linksContainers = this.el.querySelectorAll('.ecl-content-block__link-list');
            linksContainers.forEach((linkList) => {
                const thisLinks = linkList.querySelectorAll('.ecl-link');
                if (thisLinks) {
                    linkList.innerHTML = '';
                    thisLinks.forEach((link) => {
                        link.classList.add(`sc-ecl-content-block-${this.theme}`);
                        const listEl = document.createElement('li');
                        listEl.classList.add('ecl-content-block__link-item', `sc-ecl-content-block-${this.theme}`);
                        listEl.appendChild(link);
                        linkList.appendChild(listEl);
                    });
                }
            });
        }
        if (this.hasLists) {
            const list = this.el.querySelector('.ecl-content-block__list-container .ecl-description-list');
            if (list) {
                list.classList.add('ecl-content-block__list', `sc-ecl-content-block-${this.theme}`);
            }
        }
        if (this.eclScript) {
            // Load the ECL vanilla js if not already present.
            const src = getAssetPath('./build/scripts/ecl-content-block-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 contentBlock = new ECL.ContentBlock(this.el);
                contentBlock.init();
            };
            document.body.appendChild(script);
        }
    }
    render() {
        const metaPrimaryArray = this.metaPrimary ? JSON.parse(this.metaPrimary) : '';
        const metaSecondaryArray = this.metaSecondary ? JSON.parse(this.metaSecondary) : '';
        return (h("div", { class: this.getClass() }, this.hasLabels ?
            h("ul", { class: "ecl-content-block__label-container" }, h("slot", { name: "labels" })) : '', metaPrimaryArray ?
            h("ul", { class: "ecl-content-block__primary-meta-container" }, metaPrimaryArray.map((meta) => (h("li", { class: "ecl-content-block__primary-meta-item" }, meta)))) : '', this.hasTitle ?
            h("h1", { class: "ecl-content-block__title" }, h("slot", { name: "title" })) : '', this.hasDescription ?
            h("div", { class: "ecl-content-block__description" }, h("slot", { name: "description" })) : '', metaSecondaryArray ?
            h("ul", { class: "ecl-content-block__secondary-meta-container" }, metaSecondaryArray.map((meta) => (h("li", { class: "ecl-content-block__secondary-meta-item" }, meta.icon ?
                h("ecl-icon", { theme: this.theme, icon: meta.icon, size: "s", "style-class": `ecl-content-block__secondary-meta-icon sc-ecl-content-block-${this.theme}` }) : '', meta.label ?
                h("span", { class: "ecl-content-block__secondary-meta-label" }, meta.label) : '')))) : '', this.hasLinks ?
            h("div", { class: "ecl-content-block__link-container" }, h("ul", { class: "ecl-content-block__link-list" }, h("slot", { name: "links" })), this.hasSecondaryLinks ?
                h("ul", { class: "ecl-content-block__link-list" }, h("slot", { name: "links-secondary" })) : '') : '', this.hasLists ?
            h("div", { class: "ecl-content-block__list-container" }, h("slot", { name: "lists" })) : ''));
    }
    static get is() { return "ecl-content-block"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-content-block-ec.css"],
            "eu": ["./build/styles/ecl-content-block-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-content-block-ec.css"],
            "eu": ["build/styles/ecl-content-block-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'"
            },
            "hasDescription": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "has-description",
                "reflect": false
            },
            "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"
            },
            "hasTitle": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "has-title",
                "reflect": false
            },
            "hasLabels": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "has-labels",
                "reflect": false
            },
            "hasLinks": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "has-links",
                "reflect": false
            },
            "hasSecondaryLinks": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "has-secondary-links",
                "reflect": false
            },
            "hasLists": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "has-lists",
                "reflect": false
            },
            "metaPrimary": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "meta-primary",
                "reflect": false
            },
            "metaSecondary": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "meta-secondary",
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=ecl-content-block.js.map
