import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';

const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.252 10A8 8 0 0 0 4 12c0 .69.088 1.36.252 2h3.166a13.8 13.8 0 0 1 0-4zm.818-2h2.795a13.6 13.6 0 0 1 1.719-3.629A8.02 8.02 0 0 0 5.07 8M12 4.48A11.7 11.7 0 0 0 9.972 8h4.056A11.7 11.7 0 0 0 12 4.48M14.557 10H9.443a11.8 11.8 0 0 0 0 4h5.114a11.8 11.8 0 0 0 0-4m2.025 4a13.8 13.8 0 0 0 0-4h3.166c.165.64.252 1.31.252 2s-.087 1.36-.252 2zm-2.554 2H9.972A11.7 11.7 0 0 0 12 19.52 11.7 11.7 0 0 0 14.028 16m-4.444 3.629A13.6 13.6 0 0 1 7.864 16H5.07a8.02 8.02 0 0 0 4.514 3.629m4.832 0A13.6 13.6 0 0 0 16.136 16h2.794a8.02 8.02 0 0 1-4.514 3.629M18.93 8h-2.795a13.6 13.6 0 0 0-1.719-3.629A8.02 8.02 0 0 1 18.93 8M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12" clip-rule="evenodd"/></svg>';
const globe = icon;

const translations = {
    'sv': {
        heading: 'Språk',
    },
    'en': {
        heading: 'Language',
    },
    'da': {
        heading: 'Sprog',
    },
    'no': {
        heading: 'Språk',
    },
    'fi': {
        heading: 'Kieli',
    },
    'de': {
        heading: 'Sprache',
    },
    'zh': {
        heading: '语言',
    },
    'fr': {
        heading: 'Langue',
    },
    'es': {
        heading: 'Idioma',
    },
    'nl': {
        heading: 'Spraak',
    },
    'it': {
        heading: 'Idioma',
    },
    'tr': {
        heading: 'Dil',
    },
    'pl': {
        heading: 'Język',
    },
    'pt': {
        heading: 'Linguagem',
    },
    'pt-BR': {
        heading: 'Linguagem',
    },
};

const pnLanguageSelectorCss = "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-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-language-selector{--languageselector-toggle-color:#005d92;--languageselector-toggle-hover-color:#0d234b;--languageselector-toggle-background-color:#ffffff;--languageselector-title-color:#2d2013}pn-language-selector{max-height:5.2rem}.languageselector{position:relative}.languageselector-togglebtn{cursor:pointer;border:0;padding:0.64rem 0;background-color:var(--languageselector-toggle-background-color);color:var(--languageselector-toggle-color);font-size:1.6rem}.languageselector-togglebtn:hover,.languageselector-togglebtn:focus,.languageselector-togglebtn:active{color:var(--languageselector-toggle-hover-color);text-decoration:underline}.languageselector-togglebtn svg{width:1.9rem;height:1.9rem}.languageselector-title{display:flex;align-items:center;padding:0.8rem 1.6rem;color:var(--languageselector-title-color)}.languageselector-list{list-style:none;margin:0;padding:0}pn-language-selector[appearance=dark] button:hover pn-icon svg path{fill:#000000}";
const PnLanguageSelectorStyle0 = pnLanguageSelectorCss;

const PnlanguageSelector = /*@__PURE__*/ proxyCustomElement(class PnlanguageSelector extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.setLanguage = createEvent(this, "setLanguage", 7);
        this.value = '';
        this.appearance = 'light';
        this.selectedLanguageName = '';
        this.options = [];
        this.i18n = undefined;
    }
    get hostElement() { return this; }
    // Events
    setLanguage;
    componentWillLoad() {
        this.setInitialSelectedLanguageName();
        this.setTranslations();
    }
    componentDidLoad() {
        this.initialize();
    }
    initialize() {
        this.setSelectedLanguageName();
        this.addEventBindingsToOptions();
    }
    setInitialSelectedLanguageName() {
        if (!window.Intl || !this.value) {
            return;
        }
        const langs = new Intl.DisplayNames([this.value], { type: 'language' });
        if (!langs) {
            return;
        }
        const languageName = langs.of(this.value);
        if (!languageName) {
            return;
        }
        this.selectedLanguageName = languageName.charAt(0).toUpperCase() + languageName.slice(1);
    }
    addEventBindingsToOptions() {
        const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option'));
        options.map((option) => {
            option.removeEventListener('setCurrentLanguage', (event) => {
                this.onSetCurrentLanguage(event.detail);
            });
            // Bind event listener for when a user change language
            option.addEventListener('setCurrentLanguage', (event) => {
                this.onSetCurrentLanguage(event.detail);
            });
        });
    }
    setSelectedLanguageName() {
        const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option'));
        options.map((option) => {
            // Set current label of language selector
            if (option.getAttribute('code') == this.value) {
                //  || option.getAttribute("selected") == "true"
                this.selectedLanguageName = option.getAttribute('name');
            }
        });
    }
    onSetCurrentLanguage(option) {
        this.value = option.code;
        this.selectedLanguageName = option.name;
        this.setLanguage.emit(this.value);
    }
    setTranslations() {
        if (translations[this.value]) {
            this.i18n = translations[this.value];
        }
    }
    onValueChange() {
        const components = this.hostElement.querySelectorAll('pn-language-selector-option') ?? [];
        components.forEach(component => {
            // Pass values as props into slotted components
            // component.setAttribute("current-language", this.value);
            const isSelected = (component.getAttribute('code') === this.value) + '';
            if (component.getAttribute('selected') + '' !== isSelected) {
                component.setAttribute('selected', isSelected);
            }
        });
    }
    render() {
        return (h(Host, { key: '30445c2ff5bc5cbf527afb34675dd448715486bc', value: this.value }, h("pn-button-dropdown", { key: '380b212f804b6a2fd37e4c734be306907f42f84f', label: this.selectedLanguageName, icon: globe, appearance: this.appearance, variant: "borderless", "aria-label": this.i18n.heading }, h("div", { key: '13b1715497c0031cb3465bb04364f20ad0794b6a', class: "languageselector-nav" }, h("strong", { key: '8a1492197591798fc7e51399a898ef618296ff4a', class: "languageselector-title" }, this.i18n.heading), h("div", { key: 'd6a6bd4dc29bfd413febce5e5bdefa136b02a495', class: "languageselector-list", role: "list" }, h("slot", { key: '5bbb0a7d8c5ff178663bf578d0ee8fa10c456819' }))))));
    }
    static get watchers() { return {
        "value": ["setSelectedLanguageName", "setTranslations", "onValueChange"]
    }; }
    static get style() { return PnLanguageSelectorStyle0; }
}, [4, "pn-language-selector", {
        "value": [1537],
        "appearance": [1537],
        "selectedLanguageName": [32],
        "options": [32],
        "i18n": [32]
    }, undefined, {
        "value": ["setSelectedLanguageName", "setTranslations", "onValueChange"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-language-selector"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-language-selector":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnlanguageSelector);
            }
            break;
    } });
}

export { PnlanguageSelector as P, defineCustomElement as d };

//# sourceMappingURL=pn-language-selector2.js.map