import { h } from "@stencil/core";
import getAssetPath from "../../utils/assetPath";
export class EclMenu {
    constructor() {
        this.theme = 'ec';
        this.menuId = undefined;
        this.eclScript = false;
        this.styleClass = undefined;
        this.group = 'group1';
        this.maxLines = 2;
        this.menuTitle = undefined;
        this.closeLabel = undefined;
        this.backLabel = undefined;
        this.menuLink = undefined;
        this.siteName = undefined;
        this.previousLabel = undefined;
        this.nextLabel = undefined;
    }
    getClass() {
        const styleClasses = [
            'ecl-menu',
            `sc-ecl-menu-${this.theme}`,
            this.styleClass
        ];
        return styleClasses.join(' ');
    }
    componentDidLoad() {
        if (this.eclScript) {
            const src = getAssetPath('./build/scripts/ecl-menu-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 menu = new ECL.Menu(this.el.firstElementChild);
                menu.init();
            };
            document.body.appendChild(script);
        }
    }
    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 = {
            'aria-expanded': 'false',
            'data-ecl-menu-max-lines': this.maxLines,
            'role': 'navigation',
        };
        return attrs;
    }
    render() {
        return (h("nav", Object.assign({ class: this.getClass() }, this.getAttrs()), h("div", { class: "ecl-menu__overlay", "data-ecl-menu-overlay": true }), h("div", { class: "ecl-container ecl-menu__container" }, h("a", { class: "ecl-link ecl-link--standalone ecl-menu__open", href: this.menuLink, "data-ecl-menu-open": true }, h("ecl-icon", { icon: "hamburger", theme: this.theme, size: "s", styleClass: `sc-ecl-menu-${this.theme}` }), this.menuTitle), h("section", { class: "ecl-menu__inner", "data-ecl-menu-inner": true, role: "application", "aria-label": this.menuTitle }, h("header", { class: "ecl-menu__inner-header" }, h("button", { class: "ecl-menu__close ecl-button ecl-button--text", type: "submit", "data-ecl-menu-close": true }, h("span", { class: "ecl-menu__close-container ecl-button__container" }, h("ecl-icon", { icon: "close-filled", theme: this.theme, size: "s", styleClass: `ecl-button__icon ecl-button__icon--before sc-ecl-menu-${this.theme}` }), h("span", { class: "ecl-button__label", "data-ecl-label": "true" }, this.closeLabel))), h("div", { class: "ecl-menu__title" }, this.menuTitle), h("button", { "data-ecl-menu-back": true, type: "submit", class: "ecl-menu__back ecl-button ecl-button--text" }, h("span", { class: "ecl-button__container" }, h("ecl-icon", { icon: "corner-arrow", transform: "rotate-270", size: "xs", styleClass: `ecl-button__icon ecl-button__icon--before sc-ecl-menu-${this.theme}` }), h("span", { class: "ecl-button__label", "data-ecl-label": true }, this.backLabel)))), h("ecl-button", { theme: this.theme, type: "button", variant: "ghost", 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", { theme: this.theme, slot: "icon-before", icon: "corner-arrow", transform: "rotate-270", size: "s" }), this.previousLabel), h("ecl-button", { theme: this.theme, type: "button", variant: "ghost", 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", { theme: this.theme, slot: "icon-before", icon: "corner-arrow", transform: "rotate-270", size: "s" }), this.nextLabel), h("ul", { class: "ecl-menu__list", "data-ecl-menu-list": true }, h("slot", null))))));
    }
    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 assetsDirs() { return ["build"]; }
    static get properties() {
        return {
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "'ec'"
            },
            "menuId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "menu-id",
                "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"
            },
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "style-class",
                "reflect": false
            },
            "group": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "group",
                "reflect": false,
                "defaultValue": "'group1'"
            },
            "maxLines": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "max-lines",
                "reflect": false,
                "defaultValue": "2"
            },
            "menuTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "menu-title",
                "reflect": false
            },
            "closeLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "close-label",
                "reflect": false
            },
            "backLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "back-label",
                "reflect": false
            },
            "menuLink": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "menu-link",
                "reflect": false
            },
            "siteName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "site-name",
                "reflect": false
            },
            "previousLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "previous-label",
                "reflect": false
            },
            "nextLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "next-label",
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=ecl-menu.js.map
