import { h, Host } from "@stencil/core";
import state from "./pn-mainnav-store";
import { angle_small_down, arrow_right, open_in_new } from "pn-design-assets/pn-assets/icons.js";
export class PnMainnavLink {
    constructor() {
        this.name = '';
        this.href = '';
        this.target = '';
        this.linkid = '';
        this.levelId = '';
        this.open = false;
        this.hasChildren = false;
    }
    hostElement;
    componentWillLoad() {
        this.hasChildren = this.hostElement.querySelectorAll('pn-mainnav-level').length > 0;
        if (this.hasChildren && this.name) {
            const safeLevelName = this.name.toLowerCase().replace(/\W/gi, '_');
            this.levelId = `mainnav-lvl${2}-${safeLevelName}`;
        }
    }
    setOpenMenuLevel() {
        state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;
    }
    render() {
        return (h(Host, { key: '76a15bd12ee14e7d774661d578445facd3722004', role: "listitem", name: this.name, href: this.href, linkid: this.linkid }, this.hasChildren ? (h("button", { onClick: this.setOpenMenuLevel.bind(this), "aria-controls": this.levelId, "aria-expanded": (state.openLevel + '' === this.levelId + '') + '', "aria-haspopup": "true" }, this.name, h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" }), h("pn-icon", { class: "first-level_arrow", icon: arrow_right, color: "blue700" }))) : (h("a", { href: this.href, ...(this.target ? { target: this.target } : {}), ...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {}), ...(this.linkid ? { id: this.linkid } : {}) }, this.name, this.target === '_blank' ? h("pn-icon", { icon: open_in_new, color: "blue700" }) : null)), h("slot", { key: '6d2e33590d65706ea811fdcb963c48950517bc61' })));
    }
    static get is() { return "pn-mainnav-link"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-mainnav-link.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-mainnav-link.css"]
        };
    }
    static get properties() {
        return {
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Name"
                },
                "attribute": "name",
                "reflect": false,
                "defaultValue": "''"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Href"
                },
                "attribute": "href",
                "reflect": false,
                "defaultValue": "''"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Target"
                },
                "attribute": "target",
                "reflect": false,
                "defaultValue": "''"
            },
            "linkid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Link id"
                },
                "attribute": "linkid",
                "reflect": false,
                "defaultValue": "''"
            }
        };
    }
    static get states() {
        return {
            "levelId": {},
            "open": {},
            "hasChildren": {}
        };
    }
    static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-mainnav-link.js.map
