import { h } from "@stencil/core";
import PageHeaderExpandable from "@ecl/page-header";
export class EclPageHeader {
    constructor() {
        this.noScript = false;
        this.styleClass = '';
        this.fontSize = 'm';
        this.descriptionPosition = 'top';
        this.expandable = false;
        this.expandableContent = false;
        this.expandableLabel = `toggle panel's visibility`;
        this.expandablePanelId = `ecl-page-header-expandable-panel-${Math.random().toString(36).slice(2, 10)}`;
    }
    getClass() {
        const styleClasses = [
            `ecl-page-header`,
            this.styleClass
        ];
        if (this.image) {
            styleClasses.push('ecl-page-header--image');
        }
        if (this.variant) {
            styleClasses.push(`ecl-page-header--${this.variant}`);
        }
        if (!this.headerTitle) {
            styleClasses.push('ecl-page-header__info--no-margin');
        }
        if (this.fontSize === 'l') {
            styleClasses.push(`ecl-page-header--font-${this.fontSize}`);
        }
        if (this.descriptionPosition === 'bottom') {
            styleClasses.push('ecl-page-header--description-bottom');
        }
        return styleClasses.join(' ');
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    componentDidRender() {
        if (this.el.querySelector('.ecl-breadcrumb')) {
            this.el.querySelector('.ecl-breadcrumb').classList.add(`ecl-page-header__breadcrumb`, `sc-ecl-page-header-${this.theme}`);
            this.el.querySelector('.ecl-breadcrumb__container').classList.add(`sc-ecl-page-header-${this.theme}`);
            this.el.querySelectorAll('.ecl-breadcrumb__segment').forEach((segment) => {
                segment.classList.add(`sc-ecl-page-header-${this.theme}`);
            });
        }
        if (this.withMeta) {
            const items = this.el.querySelectorAll('ecl-page-header-meta-item');
            if (items) {
                items.forEach((item) => {
                    item.replaceWith(item.firstElementChild);
                });
            }
        }
        if (!this.noScript && this.expandable && this.expandableContent) {
            ;
            window.ECL = window.ECL || {};
            ECL.PageHeaderExpandable = PageHeaderExpandable;
            const expandable = new PageHeaderExpandable(this.el.firstElementChild);
            expandable.init();
        }
    }
    ;
    getPicture() {
        if (this.image) {
            return h("div", { class: "ecl-page-header__background-container" }, h("ecl-picture", { styleClass: `ecl-page-header__picture-background sc-ecl-page-header-${this.theme}`, image: this.image, imgClass: `ecl-page-header__background sc-ecl-page-header-${this.theme}` }, h("slot", { name: "sources" })));
        }
    }
    getTitle() {
        if (this.headerTitle) {
            return h("h1", { class: "ecl-page-header__title" }, this.headerTitle);
        }
    }
    getMeta() {
        if (this.withMeta) {
            return h("ul", { class: "ecl-page-header__meta" }, h("slot", { name: "meta" }));
        }
    }
    getDescription() {
        return h("div", { class: "ecl-page-header__description-container" }, this.thumbnail &&
            h("ecl-picture", { "style-class": `ecl-page-header__picture-thumbnail sc-ecl-page-header-${this.theme}`, image: this.thumbnail, imageAlt: this.thumbnailAlt, imgClass: `ecl-page-header__description-thumbnail sc-ecl-page-header-${this.theme}` }), h("p", { class: "ecl-page-header__description" }, h("slot", null)));
    }
    render() {
        return (h("div", { key: '0d1dc24f450c421d1d5bfdb5f1ea89d44412d016', class: this.getClass() }, this.expandable &&
            h("div", { key: '12af3f1537a97a52f6763a135c176b64ec941efe', class: "ecl-page-header-expandable" }, h("div", { key: 'd6607e703c0905ccd874c52321c44cf1e168ee41', class: "ecl-page-header-expandable__header" }, h("div", { key: 'd82a8f78e0daae3e6e1af05a946897a3beb21ea0', class: "ecl-container ecl-page-header-expandable__container" }, h("div", { key: 'a242434c7d8d1625a128f070814c677492806242', class: "ecl-page-header-expandable__header-text" }, h("slot", { key: '9532248e5cdc82dc79b6f5d2b476a0993b4ec7ce', name: "expandable-header" })), this.expandableContent &&
                h("ecl-button", { key: '2641497a9cf0dd856e217377ceb5554183bdd54b', styleClass: `ecl-page-header-expandable__toggle sc-ecl-page-header-${this.theme}`, variant: "tertiary", type: "submit", "aria-controls": this.expandablePanelId, "aria-expanded": "false", "hide-label": true, "data-ecl-page-header-expandable-toggle": true }, this.expandableLabel, h("ecl-icon", { key: 'abf3411d102cab1638e5874f6ff158a8a6abda47', slot: "icon-after", size: "m", flip: "vertical", icon: "corner-arrow", styleClass: `sc-ecl-page-header-${this.theme}` })))), this.expandableContent &&
                h("div", { key: '67dd25d10e86d1c12b732c336ae0d15737fd6545', class: "ecl-page-header-expandable__panel", id: this.expandablePanelId, hidden: true }, h("div", { key: 'af8c87a8a1fe6878356b52e19703a934f67d2d13', class: "ecl-container ecl-page-header-expandable__container" }, h("slot", { key: 'e84135f3c42b4b40ff89097eae3e4eb509ee8e0e', name: "expandable-content" })))), this.variant === 'news' &&
            h("div", { key: '67bf0eea35307bddcc0b70e886c5150d682a2dfb', class: "ecl-container ecl-page-header__container" }, h("slot", { key: 'f041b288ed8b68ce65219c2f6bd6ed1b81c98faf', name: "breadcrumb" }), this.getTitle(), this.getMeta(), this.getPicture()), this.variant === 'news' &&
            h("div", { key: 'c5a57dd9c91cdb9c2586f7d8fa9aca6038946013', class: "ecl-page-header__section-description" }, h("div", { key: '78c18117a598893a68101d8c1f3be7b1d484467f', class: "ecl-container" }, this.getDescription())), this.variant === '50-50' &&
            h("div", { key: '5bfcbe38cf49c0597d1fd2f905f67eb3f0125c0f', class: "ecl-page-header__container" }, this.getPicture(), h("div", { key: '87d7e5d2b4cf368ac6377c5a4dabfc3078e16830', class: "ecl-page-header__section-info ecl-container" }, h("slot", { key: 'd223c122789c8f024d6fbeeb2b156c2a192c4214', name: "breadcrumb" }), h("div", { key: '22187f4f65ce5d47346ede3fac979f4cd2e4c064', class: "ecl-page-header__content-info" }, this.getTitle(), h("div", { key: 'd4ca85381e779bca53165f023bf1fbdab8f78391', class: "ecl-page-header__description-info" }, this.descriptionPosition === 'bottom' ? '' : this.getDescription())), this.getMeta())), this.variant === '50-50' &&
            h("div", { key: 'fb1be688c9e7c2768b4be567dd9d77472c78a856', class: "ecl-page-header__section-description" }, h("div", { key: '2d41dadd0473ed2d6e7e1bad25e1b2b6c269fd08', class: "ecl-container" }, this.getDescription())), !this.variant ? this.getPicture() : '', !this.variant &&
            h("div", { key: '35d11c0dbe1cad8c3d7a43b1cefd3bfafcb3f2fb', class: "ecl-container ecl-page-header__container" }, h("slot", { key: 'a03922ac8d5e2bc0f085a7377531e234e83b9c02', name: "breadcrumb" }), this.getTitle(), this.getDescription(), this.getMeta())));
    }
    static get is() { return "ecl-page-header"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-page-header-ec.css"],
            "eu": ["./build/styles/ecl-page-header-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-page-header-ec.css"],
            "eu": ["build/styles/ecl-page-header-eu.css"]
        };
    }
    static get properties() {
        return {
            "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"
            },
            "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"
            },
            "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"
            },
            "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"
            },
            "withMeta": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "with-meta"
            },
            "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'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant"
            },
            "descriptionPosition": {
                "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-position",
                "defaultValue": "'top'"
            },
            "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": "false"
            },
            "expandableContent": {
                "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-content",
                "defaultValue": "false"
            },
            "expandableLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "expandable-label",
                "defaultValue": "`toggle panel's visibility`"
            },
            "expandablePanelId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "expandable-panel-id",
                "defaultValue": "`ecl-page-header-expandable-panel-${Math.random().toString(36).slice(2, 10)}`"
            },
            "headerTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "header-title"
            },
            "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"
            },
            "thumbnailAlt": {
                "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-alt"
            },
            "overlay": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "overlay"
            }
        };
    }
    static get elementRef() { return "el"; }
}
