import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { s as state } from './pn-mainnav-store.js';
import { b as bars } from './bars.js';
import { c as close } from './close.js';

const translations = {
    'sv': {
        menuHomeButton: 'Hem',
        menuGoBackButton: 'Gå tillbaka',
        mainMenuButton: 'Meny',
        menuStartButton: 'Start',
        navLabel: 'Huvudnavigation',
    },
    'en': {
        menuHomeButton: 'Home',
        menuGoBackButton: 'Go back',
        mainMenuButton: 'Menu',
        menuStartButton: 'Start',
        navLabel: 'Main navigation',
    },
    'da': {
        menuHomeButton: 'Hjem',
        menuGoBackButton: 'Gå tilbage',
        mainMenuButton: 'Menu',
        menuStartButton: 'Start',
        navLabel: 'Hovednavigation',
    },
    'no': {
        menuHomeButton: 'Hjem',
        menuGoBackButton: 'Gå tilbake',
        mainMenuButton: 'Meny',
        menuStartButton: 'Start',
        navLabel: 'Hovednavigasjon',
    },
    'de': {
        menuHomeButton: 'Home',
        menuGoBackButton: 'Geh zurück',
        mainMenuButton: 'Menü',
        menuStartButton: 'Start',
        navLabel: 'Hauptnavigation',
    },
    'zh': {
        menuHomeButton: 'Home',
        menuGoBackButton: 'Go back',
        mainMenuButton: 'Menu',
        menuStartButton: 'Start',
        navLabel: 'Main navigation',
    },
    'it': {
        menuHomeButton: 'Home',
        menuGoBackButton: 'Go back',
        mainMenuButton: 'Menu',
        menuStartButton: 'Start',
        navLabel: 'Main navigation',
    },
    'nl': {
        menuHomeButton: 'Home',
        menuGoBackButton: 'Go back',
        mainMenuButton: 'Menu',
        menuStartButton: 'Start',
        navLabel: 'Main navigation',
    },
    'tr': {
        menuHomeButton: 'Anasayfa',
        menuGoBackButton: 'Geri git',
        mainMenuButton: 'Menü',
        menuStartButton: 'Başlat',
        navLabel: 'Ana gezinme',
    },
    'pt': {
        menuHomeButton: 'Página inicial',
        menuGoBackButton: 'Go back',
        mainMenuButton: 'Menu',
        menuStartButton: 'Start',
        navLabel: 'Main navigation',
    },
    'pl': {
        menuHomeButton: 'Strona główna',
        menuGoBackButton: 'Powrót',
        mainMenuButton: 'Menu',
        menuStartButton: 'Początek',
        navLabel: 'Menu główne systemu',
    },
    'pt-BR': {
        menuHomeButton: 'Página inicial',
        menuGoBackButton: 'Voltar',
        mainMenuButton: 'Menu',
        menuStartButton: 'Iniciar',
        navLabel: 'Navegação principal',
    },
};

const pnMainnavCss = "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{--mainnav-nav-background-color:#ffffff;--mainnav-toggle-background-color:#005d92;--mainnav-toggle-text-color:#ffffff;--mainnav-toggle-border-radius:2.4rem;--mainnav-toggle-padding:0.6rem 1.6rem;--mainnav-toggle-font-size:1.6rem;--mainnav-top-position:var(--siteheader-mainnav-top-position-mobile,3em)}pn-mainnav{display:flex;flex-flow:row-reverse;position:relative;width:100%;min-height:5.1rem}@media screen and (min-width: 48em){pn-mainnav{flex-flow:row}}@media screen and (min-width: 64em){pn-mainnav{flex-flow:column}}@media screen and (min-width: 64em){pn-mainnav [slot=footer]{display:none}}pn-mainnav>nav{display:flex;flex-flow:column;position:fixed;top:var(--mainnav-top-position);bottom:0;left:0;width:100vw;height:auto;background-color:var(--mainnav-nav-background-color);z-index:2;visibility:hidden;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility}@media screen and (min-width: 48em){pn-mainnav>nav{top:6.5em}}@media screen and (min-width: 64em){pn-mainnav>nav{flex-flow:row-reverse;position:static;top:0;width:100%;height:auto;justify-content:space-between;visibility:visible;transform:translateX(0)}}pn-mainnav>nav a{text-decoration:none}pn-mainnav>nav button{cursor:pointer}.mainnav-toggle{display:flex;align-items:center;align-self:center}@media screen and (min-width: 64em){.mainnav-toggle{display:none}}.mainnav-toggle>button{display:flex;align-items:center;background-color:var(--mainnav-toggle-background-color);color:var(--mainnav-toggle-text-color);border:none;border-radius:var(--mainnav-toggle-border-radius);padding:var(--mainnav-toggle-padding);cursor:pointer;font-size:var(--mainnav-toggle-font-size)}.mainnav-toggle>button:focus{outline:0}.mainnav-toggle>button pn-icon{display:block;margin-left:0.8rem}.mainnav-toggle>button svg{display:block;margin:-0.2rem -0.5rem -0.2rem 0;width:1.9rem;height:1.9rem}pn-mainnav>nav[data-menu-open=true]{visibility:visible;transform:translateX(0)}";
const PnMainnavStyle0 = pnMainnavCss;

const PnMainnav = /*@__PURE__*/ proxyCustomElement(class PnMainnav extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.menuLanguageChange = createEvent(this, "menuLanguageChange", 7);
        this.marketChange = createEvent(this, "marketChange", 7);
        this.menuOpenChange = createEvent(this, "menuOpenChange", 7);
        this.market = 'se';
        this.language = 'sv';
        this.navigationId = 'mainnav';
        this.openMenu = false;
        this.navLabel = '';
    }
    get hostElement() { return this; }
    menuLanguageChange; // Could not use language change since it's a existing window event
    marketChange;
    menuOpenChange;
    componentWillLoad() {
        this.init();
        document.removeEventListener('mousedown', this._onClickOutside.bind(this));
        document.addEventListener('mousedown', this._onClickOutside.bind(this));
    }
    async init() {
        this.setLanguage();
        this.setMarket();
    }
    _onClickOutside(event) {
        const clickedOutside = !this.hostElement.contains(event.target);
        if (clickedOutside) {
            state.openLevel = '';
        }
    }
    setLanguage() {
        this.menuLanguageChange.emit(this.language);
    }
    setMarket() {
        this.marketChange.emit(this.market);
    }
    onLanguageChange(event) {
        if (translations[event.detail]) {
            state.i18n = translations[event.detail];
            if (!this.navLabel) {
                this.navLabel = state.i18n.navLabel;
            }
        }
    }
    setMenuOpenState() {
        state.openMenu = !state.openMenu;
        this.menuOpenChange.emit(state.openMenu);
    }
    onOpenMenuLevelChange(event) {
        state.openLevel = event.detail;
    }
    render() {
        return (h(Host, { key: '96a2de7d4e9c02a53cab673a533f16b31330e3d5' }, h("div", { key: 'bfc843c5e20af6edfba29a21a42fa78f6ae3dcec', class: "mainnav-toggle" }, h("button", { key: 'c830400cb0eb94ec7e43e40faf540dec5cf98cb3', "aria-controls": this.navigationId, "aria-expanded": state.openMenu + '', onClick: this.setMenuOpenState.bind(this) }, state.i18n.mainMenuButton, h("pn-icon", { key: 'fbcffba27203ef72cd790ffc8b956aa92d94ffed', icon: state.openMenu ? close : bars, color: "white" }))), h("nav", { key: 'b4e906e2e031ef66f83a5c2597d3f7cc3b2a2be1', class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', "data-menu-currentlevel": state.currentLevel, id: this.navigationId }, h("slot", { key: '2c9742cd1aaf860cc0e51a4d66e049a59976e7c8' }))));
    }
    static get style() { return PnMainnavStyle0; }
}, [4, "pn-mainnav", {
        "market": [1],
        "language": [1],
        "navigationId": [1, "navigation-id"],
        "openMenu": [1028, "open-menu"],
        "navLabel": [1, "nav-label"]
    }, [[0, "language", "setLanguage"], [0, "market", "setMarket"], [0, "menuLanguageChange", "onLanguageChange"], [0, "setmenuopenstate", "setMenuOpenState"], [0, "openMenuLevelChange", "onOpenMenuLevelChange"]]]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-mainnav"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-mainnav":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnMainnav);
            }
            break;
    } });
}

export { PnMainnav as P, defineCustomElement as d };

//# sourceMappingURL=pn-mainnav2.js.map