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

const pnMarketwebHeaderToggleCss = "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}}:host{--toggle-color:var(--siteheader-toggle-color, #005d92);--toggle-hover-color:var(--siteheader-toggle-hover-color, #000000);--toggle-active-color:var(--siteheader-toggle-active-color, #000000);--toggle-active-underline-color:var(--siteheader-toggle-active-underline-color, #00a0d6);--toggle-after-visibility:hidden;display:inline-block}.marketweb-header-toggle{display:flex;align-items:center;gap:1.2rem}.marketweb-header-toggle-button{display:inline-block;position:relative;cursor:pointer;text-decoration:none;line-height:1;transition:color 0.2s ease;font-size:1.6rem;color:var(--toggle-color)}.marketweb-header-toggle-button:hover{color:var(--toggle-hover-color);--toggle-after-visibility:visible}.marketweb-header-toggle-button:focus-visible{outline:2px solid #007c89;outline-offset:2px}.marketweb-header-toggle-button--active{color:var(--toggle-active-color);font-weight:500}.marketweb-header-toggle-button--active::after{--toggle-after-visibility:visible}.marketweb-header-toggle-button::after{visibility:var(--toggle-after-visibility);content:\"\";position:absolute;bottom:-0.8rem;width:110%;left:-5%;height:2px;background:var(--toggle-active-underline-color);border-radius:8px}";
const PnMarketwebHeaderToggleStyle0 = pnMarketwebHeaderToggleCss;

const PnMarketwebHeaderToggle = /*@__PURE__*/ proxyCustomElement(class PnMarketwebHeaderToggle extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.toggleChange = createEvent(this, "toggleChange", 7);
        this.options = [];
        this.ariaLabel = 'Header mode';
        this.value = 0;
    }
    /** Emitted whenever the user selects a different mode. */
    toggleChange;
    onClick(event, option) {
        if (option.index !== this.value) {
            this.toggleChange.emit(option.index);
        }
        if (!option.href) {
            event.preventDefault();
        }
    }
    renderOption(option) {
        const isActive = option.index === this.value;
        return (h("a", { href: option.href ?? '#', class: {
                'marketweb-header-toggle-button': true,
                'marketweb-header-toggle-button--active': isActive,
            }, "aria-current": isActive ? 'page' : undefined, onClick: (event) => this.onClick(event, option) }, option.label));
    }
    render() {
        if (this.options.length === 0) {
            return h(Host, null);
        }
        return (h(Host, null, h("nav", { class: "marketweb-header-toggle", "aria-label": this.ariaLabel }, this.options.map(option => this.renderOption(option)))));
    }
    static get style() { return PnMarketwebHeaderToggleStyle0; }
}, [1, "pn-marketweb-header-toggle", {
        "options": [16],
        "ariaLabel": [1, "aria-label"],
        "value": [514]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-marketweb-header-toggle"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-marketweb-header-toggle":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnMarketwebHeaderToggle);
            }
            break;
    } });
}

export { PnMarketwebHeaderToggle as P, defineCustomElement as d };

//# sourceMappingURL=pn-marketweb-header-toggle2.js.map