import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { o as onChange, s as state } from './pn-mainnav-store.js';
import { a as arrow_left } from './arrow_left.js';
import { d as defineCustomElement$1 } from './pn-mainnav-link2.js';

const pnMainnavLevelCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav-level{--mainnav-level-bg:#ffffff;--mainnav-level-link-color:#005d92;--mainnav-level-2-border-top-left-radius-desktop:var(--siteheader-mainnav-level-2-border-top-left-radius-desktop, 1rem);--mainnav-level-2-border-top-right-radius-desktop:var(--siteheader-mainnav-level-2-border-top-right-radius-desktop, 1rem);--mainnav-level-2-border-bottom-right-radius-desktop:var(--siteheader-mainnav-level-2-border-bottom-right-radius-desktop, 1rem);--mainnav-level-2-border-bottom-left-radius-desktop:var(--siteheader-mainnav-level-2-border-bottom-left-radius-desktop, 1rem);--mainnav-level-2-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);--mainnav-level-header-button-color:#005d92;--mainnav-level-header-link-font-size:2.4rem;--mainnav-level-header-icon-size:2.4rem}pn-mainnav-level{display:block}pn-mainnav-level:not(.hydrated){max-height:5.6rem;overflow:hidden}pn-mainnav-level[data-level=\"1\"]{width:100%;right:0;overflow-y:scroll;overflow-x:hidden;flex:1}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"1\"]{width:auto;overflow:initial}pn-mainnav-level[data-level=\"1\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"]{position:absolute;top:0;bottom:0;left:0;width:100vw;padding:0;background-color:var(--mainnav-level-bg);z-index:1;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility;overflow:scroll;visibility:hidden}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]{top:calc(100% + 1rem);bottom:auto;width:auto;height:auto;padding:1.6rem 1.6rem 0 1.6rem;border-top-left-radius:var(--mainnav-level-2-border-top-left-radius-desktop);border-top-right-radius:var(--mainnav-level-2-border-top-right-radius-desktop);border-bottom-right-radius:var(--mainnav-level-2-border-bottom-right-radius-desktop);border-bottom-left-radius:var(--mainnav-level-2-border-bottom-left-radius-desktop);display:none;z-index:3;box-shadow:var(--mainnav-level-2-shadow)}pn-mainnav-level[data-level=\"2\"][data-menuitem-rightaligned=true]{right:0;left:unset}}@media screen and (max-height: 33.125em){pn-mainnav-level[data-level=\"2\"]{-ms-overflow-style:none;scrollbar-width:none}pn-mainnav-level[data-level=\"2\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{transform:translateX(0);visibility:visible}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{display:block;overflow:visible}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]:not([data-level-listcount=\"1\"]){display:grid;grid-template-columns:minmax(12em, 20em) 1fr;grid-template-rows:auto auto;gap:0 1.6rem;grid-template-areas:\"top top\" \"left right\"}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=left]{right:0;left:unset}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=center]{left:50%;transform:translateX(-50%)}}pn-mainnav-level[data-level=\"2\"] a{color:var(--mainnav-level-link-color);text-decoration:none}pn-mainnav-level [slot=top]{display:flex}@media screen and (min-width: 48em){pn-mainnav-level [slot=top]{display:none}}[data-menu-currentlevel=\"2\"] pn-mainnav-level [slot=footer]{display:none;overscroll-behavior:contain}.mainnav-level-header{grid-area:top}.mainnav-level-header>label{position:absolute;width:0.1rem;height:0.1rem;padding:0;margin:-0.1rem;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;white-space:nowrap}.mainnav-level-header>button{display:block;position:relative;width:100%;padding:2.4rem 0 2.4rem 6.2rem;border:none;background-color:transparent;color:var(--mainnav-level-header-button-color);text-align:left}@media screen and (min-width: 64em){.mainnav-level-header>button{display:none;speak:none}}.mainnav-level-header>button>pn-icon{speak:none;position:absolute;top:50%;left:3rem;width:var(--mainnav-level-header-icon-size);height:var(--mainnav-level-header-icon-size);transform:translateY(-50%)}[data-level=\"2\"] .mainnav-level-header>pn-mainnav-link>a{font-size:var(--mainnav-level-header-link-font-size)}";
const PnMainnavLevelStyle0 = pnMainnavLevelCss;

const PnMainnavLevel = /*@__PURE__*/ proxyCustomElement(class PnMainnavLevel extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.label = '';
        this.level = 1;
        this.levelId = '';
        this.isOpen = false;
        this.parentName = '';
        this.parentHref = '';
        this.parentLinkId = '';
        this.listCount = 0;
        this.alignment = 'right';
    }
    get hostElement() { return this; }
    async componentWillLoad() {
        this.setState();
        onChange('openLevel', () => {
            this.onChangeOpenLevel();
        });
    }
    setState() {
        this.listCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-list').length;
        const parentElm = this.hostElement.parentElement;
        if (parentElm.tagName.toLowerCase() !== 'nav') {
            this.level = 2;
        }
        if (parentElm.tagName.toLowerCase() === 'pn-mainnav-link') {
            this.parentName = parentElm.getAttribute('name') + '';
            if ((!this.label && this.parentName) || this.label !== this.parentName) {
                this.label = this.parentName;
            }
            this.parentHref = parentElm.getAttribute('href') + '';
            this.parentLinkId = parentElm.getAttribute('linkid') + '';
            const parentLinkName = this.parentName.toLowerCase().replace(/\W/gi, '_');
            this.levelId = `mainnav-lvl${this.level}-${parentLinkName}`;
        }
    }
    onOpen() {
        if (this.level === 2) {
            requestAnimationFrame(() => {
                const levelClientRect = this.hostElement.getClientRects()[0];
                if (!levelClientRect) {
                    return;
                }
                const navElm = this.hostElement.parentElement.parentElement.parentElement.parentElement;
                if (navElm && navElm.tagName.toLowerCase() === 'nav') {
                    const navClientRect = navElm.getClientRects()[0];
                    if (!navClientRect) {
                        return;
                    }
                    if (levelClientRect.right > window.innerWidth) {
                        const levelParentRect = this.hostElement.parentElement.getClientRects()[0];
                        if (levelParentRect.left - levelClientRect.width < 0) {
                            this.alignment = 'center';
                        }
                        else {
                            this.alignment = 'left';
                        }
                    }
                }
            });
        }
    }
    onChangeOpenLevel() {
        this.isOpen = state.openLevel === this.levelId;
        state.currentLevel = this.level;
    }
    render() {
        return (h(Host, { key: '1717f62604a0b8a245bc26eb0cf55b72192b5592', ...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {}), "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '', ...(this.levelId ? { id: this.levelId } : {}) }, this.level > 1 ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
                state.openLevel = '';
                state.currentLevel = 1;
            }, "aria-expanded": (state.openLevel === this.levelId) + '' }, h("pn-icon", { icon: arrow_left, color: "blue700" }), state.i18n.menuStartButton), this.parentHref && this.label ? h("pn-mainnav-link", { href: this.parentHref, name: this.label, linkid: this.parentLinkId }) : null)) : null, h("slot", { key: '582cdd7a6bc61e25e6a196fc17c43bce3907033a', name: "top" }), h("slot", { key: '2b076344434db3b9b844423f4a797e793deba873' }), h("slot", { key: 'd45c6146209b2eed25166a38285f06aa5ae66a53', name: "additional" }), h("slot", { key: '5f29d378a41d9e8eee471cb131fac87bf5767572', name: "footer" })));
    }
    static get watchers() { return {
        "label": ["setState"],
        "isOpen": ["onOpen"]
    }; }
    static get style() { return PnMainnavLevelStyle0; }
}, [4, "pn-mainnav-level", {
        "label": [1537],
        "level": [32],
        "levelId": [32],
        "isOpen": [32],
        "parentName": [32],
        "parentHref": [32],
        "parentLinkId": [32],
        "listCount": [32],
        "alignment": [32]
    }, undefined, {
        "label": ["setState"],
        "isOpen": ["onOpen"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-mainnav-level", "pn-mainnav-link"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-mainnav-level":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnMainnavLevel);
            }
            break;
        case "pn-mainnav-link":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { PnMainnavLevel as P, defineCustomElement as d };

//# sourceMappingURL=pn-mainnav-level2.js.map