import { h } from "@stencil/core";
import Menu from "@ecl/menu";
export class EclMenu {
    constructor() {
        this.noScript = false;
        this.maxLines = 2;
    }
    getClass() {
        const styleClasses = [
            'ecl-menu',
            `sc-ecl-menu-${this.theme}`,
            this.styleClass
        ];
        return styleClasses.join(' ');
    }
    componentDidLoad() {
        if (!this.noScript) {
            ;
            window.ECL = window.ECL || {};
            ECL.Menu = Menu;
            const menu = new Menu(this.el.firstElementChild);
            menu.init();
        }
    }
    componentDidRender() {
        if (this.menuId) {
            const items = this.el.querySelectorAll('.ecl-menu__item');
            if (items) {
                items.forEach((item, i) => {
                    item.id = `ecl-menu-item-${this.menuId}-${i}`;
                });
            }
        }
    }
    getAttrs() {
        const attrs = {
            'data-expanded': 'false',
            'data-ecl-menu': true,
            'aria-label': this.ariaLabel,
            'data-ecl-menu-max-lines': this.maxLines,
            'role': 'navigation',
        };
        return attrs;
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    render() {
        return (h("nav", Object.assign({ key: '389a0cb906c229a175b7d78b2844eed9e0f7d8e5', class: this.getClass() }, this.getAttrs()), h("div", { key: '4a983d164da24fba67ac53b1365c207daf670f9a', class: "ecl-menu__overlay", "data-ecl-menu-overlay": true }), h("div", { key: '8a346c171fbd7232a10c54018f77852fcba04407', class: "ecl-container ecl-menu__container" }, h("ecl-button", { key: '2e60bd6ea867efdd1eda21faa43d87107d921c82', styleClass: `ecl-menu__open sc-ecl-menu-${this.theme}`, "data-ecl-menu-open": true, "hide-label": true, buttonStyle: "neutral", variant: "tertiary" }, h("ecl-icon", { key: 'e3e089d77da72df119cd02d289ea7b6e4334e35c', icon: "hamburger", size: "m", slot: "icon-before", styleClass: `sc-ecl-menu-${this.theme}` }), this.menuTitle, h("ecl-icon", { key: 'cdfc87c499bb2c5ad1191e287f1ae522de4b1584', icon: "close", size: "m", slot: "icon-after", styleClass: `sc-ecl-menu-${this.theme} ecl-menu__close-switch` })), h("section", { key: 'd0d0de295f962a87aef4aa30998e3ee56c21e459', class: "ecl-menu__inner", "aria-label": this.menuTitle, "data-ecl-menu-inner": true }, h("header", { key: 'd898627a355fd9a714d4b04e28a37aef80ac92f0', class: "ecl-menu__inner-header" }, h("ecl-button", { key: '05f858e9fcbc02acefc16a56baabf663c3dbe4ac', styleClass: `ecl-menu__close sc-ecl-menu-${this.theme}`, type: "submit", "data-ecl-menu-close": true, variant: "tertiary" }, h("ecl-icon", { key: 'b83d7eee1c652bcba68a96028ac1f993fdd8653f', icon: "close", size: "s", slot: "icon-before", styleClass: `ecl-button__icon ecl-button__icon--before sc-ecl-menu-${this.theme}` }), this.closeLabel), h("div", { key: '61ad42dbbaa55e932882716f69ccb6a1e12c0e23', class: "ecl-menu__title" }, this.menuTitle), h("ecl-button", { key: 'cd4f04c6eb7776bf51c9bf7aac9ecefaed95c20c', "data-ecl-menu-back": true, type: "submit", variant: "tertiary", styleClass: `ecl-menu__back sc-ecl-menu-${this.theme}`, containerExtraClasses: `sc-ecl-menu-${this.theme}` }, h("ecl-icon", { key: '2ddca3a344f56e8b64cd8f46b5add4ecbb3a51a7', icon: "corner-arrow", rotate: "270", size: "xs", slot: "icon-before", styleClass: `sc-ecl-menu-${this.theme}` }), this.backLabel)), h("ecl-button", { key: '357cd06d302b2310564b81a704f9b968502ff2b1', theme: this.theme, type: "button", variant: "tertiary", hideLabel: true, styleClass: `ecl-menu__item ecl-menu__items-previous sc-ecl-menu-${this.theme}`, "data-ecl-menu-items-previous": true, tabindex: "-1" }, h("ecl-icon", { key: 'bac75bd0e7cf2fc1d832a8b0cb19a93e945ea8f7', slot: "icon-before", icon: "corner-arrow", rotate: "270", size: "s" }), this.previousLabel), h("ecl-button", { key: '8a633bb26dd32d98bc8ae3815cb59b0accbb7fb5', theme: this.theme, type: "button", variant: "tertiary", hideLabel: true, styleClass: `ecl-menu__item ecl-menu__items-next sc-ecl-menu-${this.theme}`, "data-ecl-menu-items-next": true, tabindex: "-1" }, h("ecl-icon", { key: '92621cb8b48e8d732e0e81417652fa6d99561be6', slot: "icon-before", icon: "corner-arrow", rotate: "270", size: "s" }), this.nextLabel), h("ul", { key: 'cc1ac3206814f94f7bd964bfa19edd0542e8b60f', class: "ecl-menu__list", "data-ecl-menu-list": true }, h("slot", { key: '06fd28c0365f66404f421c951a625e985cb1ed13' }))))));
    }
    static get is() { return "ecl-menu"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-menu-ec.css"],
            "eu": ["./build/styles/ecl-menu-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-menu-ec.css"],
            "eu": ["build/styles/ecl-menu-eu.css"]
        };
    }
    static get properties() {
        return {
            "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"
            },
            "menuId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "menu-id"
            },
            "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"
            },
            "maxLines": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max-lines",
                "defaultValue": "2"
            },
            "menuTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "menu-title"
            },
            "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"
            },
            "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"
            },
            "backLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "back-label"
            },
            "siteName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "site-name"
            },
            "previousLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "previous-label"
            },
            "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"
            }
        };
    }
    static get elementRef() { return "el"; }
}
