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

const pnLanguageSelectorOptionCss = "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-option{--languageselector-option-background-color:#ffffff;--languageselector-option-color:#005d92;--languageselector-option-hover-background-color:#f3f2f2;--languageselector-option-hover-color:#005d92;--languageselector-option-radio-outer-background-color:#ffffff;--languageselector-option-radio-outer-border-color:#d3cecb;--languageselector-option-radio-outer-hover-background-color:#e0f8ff;--languageselector-option-radio-outer-hover-border-color:#005d92;--languageselector-option-radio-outer-selected-border-color:#005d92;--languageselector-option-radio-inner-background-color:#005d92;--languageselector-option-radio-focus-ring-color:#005d92}pn-language-selector-option{margin:0;padding:0;list-style:none}.languageselector-button,.languageselector-link{width:100%;padding:1.1rem 1.6rem 1.1rem 1.4rem;display:flex;align-items:center;position:relative;text-decoration:none;border:0;cursor:pointer;background-color:var(--languageselector-option-background-color);color:var(--languageselector-option-color);font-size:1.6rem;font-weight:bold;border-radius:0}.languageselector-button:hover,.languageselector-button:focus,.languageselector-button:active,.languageselector-link:hover,.languageselector-link:focus,.languageselector-link:active{text-decoration:underline;box-shadow:none;background-color:var(--languageselector-option-hover-background-color);color:var(--languageselector-option-hover-color);outline:none}.languageselector-itemtext{display:inline-block;margin-left:1rem}.languageselector-radio-outer{background:var(--languageselector-option-radio-outer-background-color);border:0.1em solid var(--languageselector-option-radio-outer-border-color);border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;cursor:pointer}.languageselector-radio-outer:focus>.languageselector-radio-outer,.languageselector-radio-outer:active>.languageselector-radio-outer{box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem var(--languageselector-option-radio-focus-ring-color)}.languageselector-radio-outer:hover>.languageselector-radio-outer{border:0.1rem solid var(--languageselector-option-radio-outer-hover-border-color);background:var(--languageselector-option-radio-outer-hover-background-color)}[selected=true] .languageselector-radio-outer{border:0.1rem solid var(--languageselector-option-radio-outer-selected-border-color)}.languageselector-radio-inner{transform:scale(0);height:1em;width:1em;background-color:var(--languageselector-option-radio-inner-background-color);border-radius:50%;transform-origin:center center;transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[selected=true] .languageselector-radio-inner{transform:scale(1)}";
const PnLanguageSelectorOptionStyle0 = pnLanguageSelectorOptionCss;

const PnlanguageSelectorOption = /*@__PURE__*/ proxyCustomElement(class PnlanguageSelectorOption extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.setCurrentLanguage = createEvent(this, "setCurrentLanguage", 7);
        this.name = '';
        this.code = '';
        this.url = '';
        this.selected = false;
        this.currentLanguage = undefined;
    }
    spanEl;
    setCurrentLanguage;
    onOptionClick() {
        const currentlanguage = {
            name: this.name,
            code: this.code,
            url: this.url,
            current: true,
        };
        this.setCurrentLanguage.emit(currentlanguage);
    }
    componentDidLoad() {
        if (this.spanEl) {
            this.spanEl.setAttribute("xml:lang", this.code);
        }
    }
    render() {
        return (h(Host, { key: '120a44817be4b93b3032a3ad9594490ad08c71ab', role: "listitem", selected: this.selected + '', code: this.code, name: this.name }, !this.url ? (h("button", { class: "languageselector-button", "data-langcode": this.code, onClick: this.onOptionClick.bind(this) }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code))) : (h("a", { href: this.url, target: "_self", class: "languageselector-link", "data-langcode": this.code }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code)))));
    }
    static get style() { return PnLanguageSelectorOptionStyle0; }
}, [0, "pn-language-selector-option", {
        "name": [1],
        "code": [1],
        "url": [1],
        "selected": [4],
        "currentLanguage": [1, "current-language"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-language-selector-option"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-language-selector-option":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnlanguageSelectorOption);
            }
            break;
    } });
}

export { PnlanguageSelectorOption as P, defineCustomElement as d };

//# sourceMappingURL=pn-language-selector-option2.js.map