@postnord/pn-marketweb-components 4.2.5 → 4.3.1

package/components/pn-marketweb-header-shared.js

@@ -0,0 +1,192 @@
+import { h } from '@stencil/core/internal/client';
+
+/**
+ * Builds the list of language options that should actually be shown.
+ *
+ * What it does:
+ * - Reads the backend-provided language selector model
+ * - Checks page <link rel="alternate" hreflang="..."> tags
+ * - If hreflang tags exist, only languages with matching tags are shown
+ * - If no hreflang tags exist, all backend-provided languages are shown
+ */
+function getLanguageOptions(languageSelector) {
+    if (!languageSelector?.languages?.length) {
+        return [];
+    }
+    const hrefLangTags = Array.from(document.querySelectorAll('link[rel="alternate"][hreflang]'));
+    const hrefLangs = hrefLangTags.map(tag => {
+        let value = tag.getAttribute('hreflang') ?? '';
+        if (value.indexOf('en-') !== -1 || value.indexOf('en_') !== -1) {
+            value = value.substring(0, 2);
+        }
+        return value;
+    });
+    if (!hrefLangs.length) {
+        return [...languageSelector.languages];
+    }
+    return languageSelector.languages.filter(option => hrefLangs.includes(option.twoLetterISOLanguageName));
+}
+/**
+ * Resolves the URL for a given language option.
+ *
+ * What it does:
+ * - Returns null in SPA mode so language switching can be handled by events only
+ * - Uses an existing hreflang alternate URL if one exists in the document
+ * - Otherwise falls back to generating a language URL from the site definition
+ */
+function getLanguageVersionUrl(item, siteDefinition, spaMode) {
+    if (spaMode) {
+        return null;
+    }
+    const alternativeTag = document.querySelector(`link[rel="alternate"][hreflang="${item.twoLetterISOLanguageName}"]`);
+    if (alternativeTag) {
+        return alternativeTag.getAttribute('href');
+    }
+    const siteUrl = siteDefinition?.url ?? '/';
+    return siteUrl + (siteUrl.lastIndexOf('/') !== siteUrl.length - 1 ? '/' : '') + item.twoLetterISOLanguageName;
+}
+
+function getLastMenuItem(menuItems) {
+    return menuItems.length > 0
+        ? menuItems[menuItems.length - 1]
+        : null;
+}
+function getModeRoots(menuItems) {
+    if (menuItems.length <= 1) {
+        return [];
+    }
+    return menuItems.slice(0, -1);
+}
+/**
+ * Header menu mode utilities.
+ *
+ * Purpose
+ * -------
+ * Interprets the backend top-level menu structure used for header menu
+ * switching.
+ *
+ * Expected top-level order:
+ * - all items except the last = switchable root menus
+ * - last item = shared/common root
+ *
+ * Responsibilities
+ * ----------------
+ * - extract a structured representation of the switchable menu roots
+ * - resolve the active root for a selected mode
+ * - return grouped or flat visible items for rendering
+ */
+function extractToggleableMenuStructure(menuItems) {
+    const sharedRoot = getLastMenuItem(menuItems);
+    const modeRoots = getModeRoots(menuItems);
+    const menuModeOptions = modeRoots.map((root, index) => ({
+        index,
+        label: root.name,
+        href: root.href || undefined,
+        root,
+    }));
+    return {
+        hasMenuSwitching: menuModeOptions.length > 0,
+        modeRoots,
+        menuModeOptions,
+        sharedRoot,
+        sharedItems: sharedRoot?.children ?? [],
+    };
+}
+/**
+ * Returns the active root item for the selected mode.
+ *
+ * Falls back to the first available mode root when the requested mode
+ * is out of bounds.
+ */
+function getToggleRootForMode(structure, mode) {
+    return structure.modeRoots[mode] ?? structure.modeRoots[0] ?? null;
+}
+/**
+ * Returns the active root item for the selected mode directly from raw menu items.
+ */
+function getToggleRootForMenuItems(menuItems, mode) {
+    const structure = extractToggleableMenuStructure(menuItems);
+    return getToggleRootForMode(structure, mode);
+}
+/**
+ * Returns grouped visible items for rendering.
+ *
+ * - primaryItems = children of the active root
+ * - sharedItems = children of the shared/common root
+ */
+function getMenuGroupsForMode(structure, mode) {
+    const activeRoot = getToggleRootForMode(structure, mode);
+    if (!activeRoot) {
+        return {
+            primaryItems: structure.sharedItems,
+            sharedItems: [],
+        };
+    }
+    return {
+        primaryItems: activeRoot?.children ?? [],
+        sharedItems: structure.sharedItems,
+    };
+}
+/**
+ * Returns grouped visible items directly from raw menu items.
+ */
+function getVisibleMenuGroupsForMode(menuItems, mode) {
+    const structure = extractToggleableMenuStructure(menuItems);
+    return getMenuGroupsForMode(structure, mode);
+}
+/**
+ * Builds a flat list of visible menu items for the selected mode.
+ *
+ * Useful for render paths that do not need grouped rendering.
+ */
+function buildMenuItemsForMode(structure, mode) {
+    const groups = getMenuGroupsForMode(structure, mode);
+    return [
+        ...groups.primaryItems,
+        ...groups.sharedItems,
+    ];
+}
+
+function renderHeaderMenuSwitcher(props) {
+    const structure = extractToggleableMenuStructure(props.vm.rawMenuItems);
+    if (!structure.hasMenuSwitching) {
+        return null;
+    }
+    const options = structure.menuModeOptions.map(option => ({
+        ...option,
+        href: props.navigateOnMenuToggle ? option.href : undefined,
+    }));
+    return (h("pn-marketweb-header-toggle", { value: props.activeMenuMode, options: options, onToggleChange: props.onMenuToggleChange }));
+}
+function renderHeaderLogo(props) {
+    const homePageLink = props.homePageLink ?? '/';
+    return (h("div", { class: "siteheader-logocontainer" },
+        h("a", { href: homePageLink, title: props.homeLabel, "aria-label": props.homeLabel, class: "siteheader-logolink" },
+            h("slot", { name: "logo" },
+                h("svg", { class: "siteheader-logo", xmlns: "http://www.w3.org/2000/svg", width: "12.7rem", height: "2.4rem", viewBox: "0 0 141.73 26.65", role: "img", "aria-label": "PostNord" },
+                    h("path", { d: "M108.84,13.35c0,6.34-5.17,9-10,9S89,19.76,89,13.63c0-6.28,5.08-9,10-9S108.84,7.25,108.84,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.29,3.29,0,0,0,3.42,3.41A3.24,3.24,0,0,0,102.28,13.54Zm-83,0c0,4.83-3.32,8.82-8.49,8.82a6.54,6.54,0,0,1-4.65-1.57v5.86H0V5.16H6.17V6.8a6.43,6.43,0,0,1,5.11-2.18C16.41,4.62,19.31,8.58,19.31,13.54Zm-6.53,0A3.27,3.27,0,0,0,9.4,10,3.28,3.28,0,0,0,6,13.54,3.29,3.29,0,0,0,9.4,16.95,3.24,3.24,0,0,0,12.78,13.54Zm103.69,0.27c0-2.54,1.54-3.32,3.6-3.32a6.56,6.56,0,0,1,2.08.3L122.3,5.1a3.92,3.92,0,0,0-1.45-.18c-3.45,0-4.38,2.18-4.38,2.18V5.16H110.3V21.84h6.17v-8ZM141.73,0V21.84h-6.16V20.21a6.43,6.43,0,0,1-5.11,2.18c-5.14,0-8-4-8-8.91s3.32-8.82,8.49-8.82a6.54,6.54,0,0,1,4.65,1.57v-5Zm-6,13.48a3.28,3.28,0,0,0-3.41-3.41A3.24,3.24,0,0,0,129,13.47,3.4,3.4,0,1,0,135.75,13.47ZM81.35,4.62c-3.6,0-4.9,2.18-4.9,2.18V5.16H70.29V21.84h6.16V13.29c0-2.11.79-3.08,2.69-3.08s2.18,1.57,2.18,3.57v8.07h6.22V11.6C87.55,7,85.34,4.62,81.35,4.62ZM64.07,1.42H57.9V21.84h6.16V10.36H67l2.81-5.2H64.07V1.42ZM50.26,11.21c-2-.3-2.87-0.3-2.87-1.09s0.81-.94,2.42-0.94a16.15,16.15,0,0,1,5.11.91L56,5.41a24.56,24.56,0,0,0-6.13-.75c-5.89,0-9,2.27-9,5.89,0,2.81,1.66,4.47,6.53,5.11,2.06,0.27,2.81.39,2.81,1.15s-0.82,1-2.24,1a16.67,16.67,0,0,1-6-1.3L40.77,21.3a22.14,22.14,0,0,0,6.68,1c6.35,0,9.28-2.24,9.28-5.89C56.72,13.54,55.15,12,50.26,11.21ZM40.19,13.35c0,6.34-5.17,9-10,9s-9.82-2.6-9.82-8.73c0-6.28,5.08-9,10-9S40.19,7.25,40.19,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.28,3.28,0,0,0,3.41,3.41A3.24,3.24,0,0,0,33.63,13.54Z", fill: "currentColor", transform: "translate(0 0)" }))))));
+}
+function renderHeaderLogin(props) {
+    if (!props.vm.loginDialog || props.hideLogin) {
+        return null;
+    }
+    return (h("pn-marketweb-siteheader-login", { token: props.userToken, siteUrl: props.vm.siteDefinition?.url, fullname: props.userFullname, loggedin: props.userLoggedin, loginDialog: props.vm.loginDialog, endpoint: props.endpoint ?? '', i18n: props.i18n, showProfileSelection: props.showProfileSelection, showUnifiedLogin: props.showUnifiedLogin, "check-user-logged-in-state-interval": props.checkUserLoggedInStateInterval, useMarketwebLogin: props.useMarketwebLogin, environment: props.environment, appearance: props.appearance }));
+}
+function renderHeaderLanguageSelector(props) {
+    if (!props.vm.languageOptions.length || props.hideLanguageSelector) {
+        return null;
+    }
+    return (h("pn-language-selector", { value: props.language, appearance: props.appearance }, props.vm.languageOptions.map(language => (h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: getLanguageVersionUrl(language, props.vm.siteDefinition, props.spaMode) })))));
+}
+function renderHeaderSiteSelector(props) {
+    if (!props.vm.siteSelector || props.hideSiteSelector) {
+        return null;
+    }
+    return (h("pn-site-selector", { language: props.language, buttontext: props.buttonText, appearance: props.appearance },
+        props.vm.siteSelector.currentSiteTitle && (h("pn-site-selector-item", { heading: props.vm.siteSelector.currentSiteTitle, description: props.vm.siteSelector.currentSiteDescription })),
+        (props.vm.siteSelector.siteSelections ?? []).map(site => (h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: props.adjustSiteSelectorUrl(site.href ?? site.pageLink ?? ''), newwindow: site.openInNewWindow })))));
+}
+
+export { getToggleRootForMenuItems as a, buildMenuItemsForMode as b, getVisibleMenuGroupsForMode as c, renderHeaderLanguageSelector as d, extractToggleableMenuStructure as e, renderHeaderSiteSelector as f, getLanguageOptions as g, renderHeaderLogo as h, renderHeaderMenuSwitcher as i, renderHeaderLogin as r };
+
+//# sourceMappingURL=pn-marketweb-header-shared.js.map

package/components/pn-marketweb-header-shared.js.map

@@ -0,0 +1 @@
+{"file":"pn-marketweb-header-shared.js","mappings":"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","names":[],"sources":["src/components/layout-components/pn-marketweb-header/utils/header-language.ts","src/components/layout-components/pn-marketweb-header/utils/header-toggle-menu.ts","src/components/layout-components/pn-marketweb-header/components/shared/pn-marketweb-header-shared.tsx"],"sourcesContent":["import {\n    LanguageSelector,\n    LanguageSelectorItem,\n    MenuSiteDefinition,\n} from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';\n\n/**\n * Builds the list of language options that should actually be shown.\n *\n * What it does:\n * - Reads the backend-provided language selector model\n * - Checks page <link rel=\"alternate\" hreflang=\"...\"> tags\n * - If hreflang tags exist, only languages with matching tags are shown\n * - If no hreflang tags exist, all backend-provided languages are shown\n */\nexport function getLanguageOptions(languageSelector: LanguageSelector | null): LanguageSelectorItem[] {\n    if (!languageSelector?.languages?.length) {\n        return [];\n    }\n\n    const hrefLangTags = Array.from(document.querySelectorAll('link[rel=\"alternate\"][hreflang]'));\n    const hrefLangs = hrefLangTags.map(tag => {\n        let value = tag.getAttribute('hreflang') ?? '';\n        if (value.indexOf('en-') !== -1 || value.indexOf('en_') !== -1) {\n            value = value.substring(0, 2);\n        }\n        return value;\n    });\n\n    if (!hrefLangs.length) {\n        return [...languageSelector.languages];\n    }\n\n    return languageSelector.languages.filter(option =>\n        hrefLangs.includes(option.twoLetterISOLanguageName),\n    );\n}\n\n/**\n * Resolves the URL for a given language option.\n *\n * What it does:\n * - Returns null in SPA mode so language switching can be handled by events only\n * - Uses an existing hreflang alternate URL if one exists in the document\n * - Otherwise falls back to generating a language URL from the site definition\n */\nexport function getLanguageVersionUrl(\n    item: LanguageSelectorItem,\n    siteDefinition: MenuSiteDefinition | null,\n    spaMode: boolean,\n): string | null {\n    if (spaMode) {\n        return null;\n    }\n\n    const alternativeTag = document.querySelector(\n        `link[rel=\"alternate\"][hreflang=\"${item.twoLetterISOLanguageName}\"]`,\n    );\n\n    if (alternativeTag) {\n        return alternativeTag.getAttribute('href');\n    }\n\n    const siteUrl = siteDefinition?.url ?? '/';\n    return siteUrl + (siteUrl.lastIndexOf('/') !== siteUrl.length - 1 ? '/' : '') + item.twoLetterISOLanguageName;\n}","import type {\n    MenuItem,\n} from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';\nimport type {\n    HeaderMenuGroups,\n    HeaderMenuMode,\n    HeaderMenuModeOption,\n    HeaderMenuStructure,\n} from '../types/pn-marketweb-header.types';\n\nfunction getLastMenuItem(menuItems: MenuItem[]): MenuItem | null {\n    return menuItems.length > 0\n        ? menuItems[menuItems.length - 1]\n        : null;\n}\n\nfunction getModeRoots(menuItems: MenuItem[]): MenuItem[] {\n    if (menuItems.length <= 1) {\n        return [];\n    }\n\n    return menuItems.slice(0, -1);\n}\n\n/**\n * Header menu mode utilities.\n *\n * Purpose\n * -------\n * Interprets the backend top-level menu structure used for header menu\n * switching.\n *\n * Expected top-level order:\n * - all items except the last = switchable root menus\n * - last item = shared/common root\n *\n * Responsibilities\n * ----------------\n * - extract a structured representation of the switchable menu roots\n * - resolve the active root for a selected mode\n * - return grouped or flat visible items for rendering\n */\nexport function extractToggleableMenuStructure(\n    menuItems: MenuItem[],\n): HeaderMenuStructure {\n    const sharedRoot = getLastMenuItem(menuItems);\n    const modeRoots = getModeRoots(menuItems);\n\n    const menuModeOptions: HeaderMenuModeOption[] = modeRoots.map((root, index) => ({\n        index,\n        label: root.name,\n        href: root.href || undefined,\n        root,\n    }));\n\n    return {\n        hasMenuSwitching: menuModeOptions.length > 0,\n        modeRoots,\n        menuModeOptions,\n        sharedRoot,\n        sharedItems: sharedRoot?.children ?? [],\n    };\n}\n\n/**\n * Returns the active root item for the selected mode.\n *\n * Falls back to the first available mode root when the requested mode\n * is out of bounds.\n */\nexport function getToggleRootForMode(\n    structure: HeaderMenuStructure,\n    mode: HeaderMenuMode,\n): MenuItem | null {\n    return structure.modeRoots[mode] ?? structure.modeRoots[0] ?? null;\n}\n\n/**\n * Returns the active root item for the selected mode directly from raw menu items.\n */\nexport function getToggleRootForMenuItems(\n    menuItems: MenuItem[],\n    mode: HeaderMenuMode,\n): MenuItem | null {\n    const structure = extractToggleableMenuStructure(menuItems);\n    return getToggleRootForMode(structure, mode);\n}\n\n/**\n * Returns grouped visible items for rendering.\n *\n * - primaryItems = children of the active root\n * - sharedItems = children of the shared/common root\n */\nexport function getMenuGroupsForMode(\n    structure: HeaderMenuStructure,\n    mode: HeaderMenuMode,\n): HeaderMenuGroups {\n    const activeRoot = getToggleRootForMode(structure, mode);\n\n    if (!activeRoot) {\n        return {\n            primaryItems: structure.sharedItems,\n            sharedItems: [],\n        };\n    }\n\n    return {\n        primaryItems: activeRoot?.children ?? [],\n        sharedItems: structure.sharedItems,\n    };\n}\n\n/**\n * Returns grouped visible items directly from raw menu items.\n */\nexport function getVisibleMenuGroupsForMode(\n    menuItems: MenuItem[],\n    mode: HeaderMenuMode,\n): HeaderMenuGroups {\n    const structure = extractToggleableMenuStructure(menuItems);\n    return getMenuGroupsForMode(structure, mode);\n}\n\n/**\n * Builds a flat list of visible menu items for the selected mode.\n *\n * Useful for render paths that do not need grouped rendering.\n */\nexport function buildMenuItemsForMode(\n    structure: HeaderMenuStructure,\n    mode: HeaderMenuMode,\n): MenuItem[] {\n    const groups = getMenuGroupsForMode(structure, mode);\n\n    return [\n        ...groups.primaryItems,\n        ...groups.sharedItems,\n    ];\n}","import { h } from '@stencil/core';\n\nimport type {\n    SiteHeaderI18N,\n} from '../../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';\nimport type {\n    HeaderMenuMode,\n    HeaderViewModel,\n} from '../../types/pn-marketweb-header.types';\nimport { getLanguageVersionUrl } from '../../utils/header-language';\nimport { HeaderAppearance } from '../../utils/header-theme';\nimport { extractToggleableMenuStructure } from '../../utils/header-toggle-menu';\n\nexport interface HeaderLogoRenderProps {\n    homePageLink?: string;\n    homeLabel: string;\n}\n\nexport interface HeaderMenuToggleRenderProps {\n    vm: HeaderViewModel;\n    activeMenuMode: HeaderMenuMode;\n    navigateOnMenuToggle: boolean;\n    onMenuToggleChange: (e: CustomEvent<HeaderMenuMode>) => void;\n}\n\nexport interface HeaderLoginRenderProps {\n    vm: HeaderViewModel;\n    hideLogin: boolean;\n    userToken: string;\n    userFullname: string;\n    userLoggedin: boolean;\n    endpoint?: string;\n    environment?: string;\n    i18n: SiteHeaderI18N;\n    showProfileSelection: boolean;\n    showUnifiedLogin: boolean;\n    checkUserLoggedInStateInterval: number;\n    useMarketwebLogin: boolean;\n    appearance: HeaderAppearance;\n}\n\nexport interface HeaderLanguageSelectorRenderProps {\n    vm: HeaderViewModel;\n    hideLanguageSelector: boolean;\n    language?: string;\n    spaMode: boolean;\n    appearance: HeaderAppearance;\n}\n\nexport interface HeaderSiteSelectorRenderProps {\n    vm: HeaderViewModel;\n    hideSiteSelector: boolean;\n    language?: string;\n    buttonText?: string;\n    appearance: HeaderAppearance;\n    adjustSiteSelectorUrl: (href: string) => string;\n}\n\nexport function renderHeaderMenuSwitcher(props: HeaderMenuToggleRenderProps) {\n    const structure = extractToggleableMenuStructure(props.vm.rawMenuItems);\n\n    if (!structure.hasMenuSwitching) {\n        return null;\n    }\n\n    const options = structure.menuModeOptions.map(option => ({\n        ...option,\n        href: props.navigateOnMenuToggle ? option.href : undefined,\n    }));\n\n    return (\n        <pn-marketweb-header-toggle\n            value={props.activeMenuMode}\n            options={options}\n            onToggleChange={props.onMenuToggleChange}\n        />\n    );\n}\n\nexport function renderHeaderLogo(props: HeaderLogoRenderProps) {\n    const homePageLink = props.homePageLink ?? '/';\n\n    return (\n        <div class=\"siteheader-logocontainer\">\n            <a\n                href={homePageLink}\n                title={props.homeLabel}\n                aria-label={props.homeLabel}\n                class=\"siteheader-logolink\"\n            >\n                <slot name=\"logo\">\n                    <svg\n                        class=\"siteheader-logo\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        width=\"12.7rem\"\n                        height=\"2.4rem\"\n                        viewBox=\"0 0 141.73 26.65\"\n                        role=\"img\"\n                        aria-label=\"PostNord\"\n                    >\n                        <path\n                            d=\"M108.84,13.35c0,6.34-5.17,9-10,9S89,19.76,89,13.63c0-6.28,5.08-9,10-9S108.84,7.25,108.84,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.29,3.29,0,0,0,3.42,3.41A3.24,3.24,0,0,0,102.28,13.54Zm-83,0c0,4.83-3.32,8.82-8.49,8.82a6.54,6.54,0,0,1-4.65-1.57v5.86H0V5.16H6.17V6.8a6.43,6.43,0,0,1,5.11-2.18C16.41,4.62,19.31,8.58,19.31,13.54Zm-6.53,0A3.27,3.27,0,0,0,9.4,10,3.28,3.28,0,0,0,6,13.54,3.29,3.29,0,0,0,9.4,16.95,3.24,3.24,0,0,0,12.78,13.54Zm103.69,0.27c0-2.54,1.54-3.32,3.6-3.32a6.56,6.56,0,0,1,2.08.3L122.3,5.1a3.92,3.92,0,0,0-1.45-.18c-3.45,0-4.38,2.18-4.38,2.18V5.16H110.3V21.84h6.17v-8ZM141.73,0V21.84h-6.16V20.21a6.43,6.43,0,0,1-5.11,2.18c-5.14,0-8-4-8-8.91s3.32-8.82,8.49-8.82a6.54,6.54,0,0,1,4.65,1.57v-5Zm-6,13.48a3.28,3.28,0,0,0-3.41-3.41A3.24,3.24,0,0,0,129,13.47,3.4,3.4,0,1,0,135.75,13.47ZM81.35,4.62c-3.6,0-4.9,2.18-4.9,2.18V5.16H70.29V21.84h6.16V13.29c0-2.11.79-3.08,2.69-3.08s2.18,1.57,2.18,3.57v8.07h6.22V11.6C87.55,7,85.34,4.62,81.35,4.62ZM64.07,1.42H57.9V21.84h6.16V10.36H67l2.81-5.2H64.07V1.42ZM50.26,11.21c-2-.3-2.87-0.3-2.87-1.09s0.81-.94,2.42-0.94a16.15,16.15,0,0,1,5.11.91L56,5.41a24.56,24.56,0,0,0-6.13-.75c-5.89,0-9,2.27-9,5.89,0,2.81,1.66,4.47,6.53,5.11,2.06,0.27,2.81.39,2.81,1.15s-0.82,1-2.24,1a16.67,16.67,0,0,1-6-1.3L40.77,21.3a22.14,22.14,0,0,0,6.68,1c6.35,0,9.28-2.24,9.28-5.89C56.72,13.54,55.15,12,50.26,11.21ZM40.19,13.35c0,6.34-5.17,9-10,9s-9.82-2.6-9.82-8.73c0-6.28,5.08-9,10-9S40.19,7.25,40.19,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.28,3.28,0,0,0,3.41,3.41A3.24,3.24,0,0,0,33.63,13.54Z\"\n                            fill=\"currentColor\"\n                            transform=\"translate(0 0)\"\n                        ></path>\n                    </svg>\n                </slot>\n            </a>\n        </div>\n    );\n}\n\nexport function renderHeaderLogin(props: HeaderLoginRenderProps) {\n    if (!props.vm.loginDialog || props.hideLogin) {\n        return null;\n    }\n\n\n\n    return (\n        <pn-marketweb-siteheader-login\n            token={props.userToken}\n            siteUrl={props.vm.siteDefinition?.url}\n            fullname={props.userFullname}\n            loggedin={props.userLoggedin}\n            loginDialog={props.vm.loginDialog}\n            endpoint={props.endpoint ?? ''}\n            i18n={props.i18n}\n            showProfileSelection={props.showProfileSelection}\n            showUnifiedLogin={props.showUnifiedLogin}\n            check-user-logged-in-state-interval={props.checkUserLoggedInStateInterval}\n            useMarketwebLogin={props.useMarketwebLogin}\n            environment={props.environment}\n            appearance={props.appearance}\n        ></pn-marketweb-siteheader-login>\n    );\n}\n\nexport function renderHeaderLanguageSelector(props: HeaderLanguageSelectorRenderProps) {\n    if (!props.vm.languageOptions.length || props.hideLanguageSelector) {\n        return null;\n    }\n\n    return (\n        <pn-language-selector value={props.language} appearance={props.appearance}>\n            {props.vm.languageOptions.map(language => (\n                <pn-language-selector-option\n                    name={language.nativeName}\n                    code={language.twoLetterISOLanguageName}\n                    selected={language.isCurrent}\n                    url={getLanguageVersionUrl(language, props.vm.siteDefinition, props.spaMode)}\n                ></pn-language-selector-option>\n            ))}\n        </pn-language-selector>\n    );\n}\n\nexport function renderHeaderSiteSelector(props: HeaderSiteSelectorRenderProps) {\n    if (!props.vm.siteSelector || props.hideSiteSelector) {\n        return null;\n    }\n\n    return (\n        <pn-site-selector\n            language={props.language}\n            buttontext={props.buttonText}\n            appearance={props.appearance}\n        >\n            {props.vm.siteSelector.currentSiteTitle && (\n                <pn-site-selector-item\n                    heading={props.vm.siteSelector.currentSiteTitle}\n                    description={props.vm.siteSelector.currentSiteDescription}\n                ></pn-site-selector-item>\n            )}\n\n            {(props.vm.siteSelector.siteSelections ?? []).map(site => (\n                <pn-site-selector-item\n                    heading={site.linkText}\n                    description={site.linkDescription}\n                    url={props.adjustSiteSelectorUrl(site.href ?? site.pageLink ?? '')}\n                    newwindow={site.openInNewWindow}\n                ></pn-site-selector-item>\n            ))}\n        </pn-site-selector>\n    );\n}"],"version":3}

package/components/pn-marketweb-header-skeleton-loader.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnMarketwebHeaderSkeletonLoader extends Components.PnMarketwebHeaderSkeletonLoader, HTMLElement {}
+export const PnMarketwebHeaderSkeletonLoader: {
+    prototype: PnMarketwebHeaderSkeletonLoader;
+    new (): PnMarketwebHeaderSkeletonLoader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-marketweb-header-skeleton-loader.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnMarketwebHeaderSkeletonLoaderCss = ":host{display:block;width:100%;--header-skeleton-bg:var(--siteheader-skeleton-bg, #e8edf2);--header-skeleton-shine:var(--siteheader-skeleton-shine,\n          rgba(255, 255, 255, 0.65));--header-skeleton-radius:var(--siteheader-skeleton-radius, 0.4rem);--header-skeleton-gap:var(--siteheader-skeleton-gap, 1.2rem);--header-skeleton-padding-x:var(--siteheader-skeleton-padding-x, 1.6rem);--header-skeleton-padding-y:var(--siteheader-skeleton-padding-y, 1.2rem);--header-skeleton-border-color:var(--siteheader-skeleton-border-color,\n          #d9e1e8);--header-skeleton-mobile-height:var(--siteheader-skeleton-mobile-height,\n          6.4rem);--header-skeleton-top-row-height:var(--siteheader-skeleton-top-row-height,\n          7.2rem);--header-skeleton-bottom-row-height:var(--siteheader-skeleton-bottom-row-height,\n          6.4rem)}.header-skeleton{width:100%;box-sizing:border-box;border-bottom:0.1rem solid var(--header-skeleton-border-color);background:var(--siteheader-skeleton-background, #fff)}.mobile-layout,.tablet-desktop-layout{width:100%;box-sizing:border-box}.mobile-row,.top-row,.bottom-row{display:flex;align-items:center;width:100%;box-sizing:border-box;padding-left:var(--header-skeleton-padding-x);padding-right:var(--header-skeleton-padding-x)}.skel{position:relative;overflow:hidden;flex:0 0 auto;background:var(--header-skeleton-bg)}.skel::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent, var(--header-skeleton-shine), transparent);animation:header-skeleton-shimmer 1.4s infinite}.skel-logo{width:11.2rem;height:2.8rem;border-radius:var(--header-skeleton-radius)}.skel-icon-button{width:4rem;height:4rem;border-radius:50%}.skel-chip{width:10rem;height:3.6rem;border-radius:1.8rem}.skel-pill{width:7.2rem;height:3.6rem;border-radius:1.8rem}.skel-menu-button{width:12rem;height:4rem;border-radius:0.4rem}.skel-search{width:min(100%, 36rem);height:4rem;border-radius:2rem}.mobile-layout{display:block}.mobile-row{justify-content:space-between;min-height:var(--header-skeleton-mobile-height);padding-top:var(--header-skeleton-padding-y);padding-bottom:var(--header-skeleton-padding-y)}.tablet-desktop-layout{display:none}.top-row{min-height:var(--header-skeleton-top-row-height);padding-top:var(--header-skeleton-padding-y);padding-bottom:var(--header-skeleton-padding-y);display:grid;grid-template-columns:1fr auto 1fr;column-gap:var(--header-skeleton-gap);align-items:center}.top-row-left,.top-row-center,.top-row-right,.bottom-row-left,.bottom-row-right{display:flex;align-items:center}.top-row-left{justify-content:flex-start;gap:var(--header-skeleton-gap);min-width:0}.top-row-center{justify-content:center}.top-row-right{justify-content:flex-end;gap:var(--header-skeleton-gap);min-width:0}.bottom-row{min-height:var(--header-skeleton-bottom-row-height);justify-content:space-between;gap:var(--header-skeleton-gap);padding-top:0.8rem;padding-bottom:1.2rem}.bottom-row-left{justify-content:flex-start;flex:0 0 auto}.bottom-row-right{justify-content:flex-end;flex:1 1 auto;min-width:0}.bottom-row-right .skel-search{margin-left:auto}@media screen and (min-width: 768px){.mobile-layout{display:none}.tablet-desktop-layout{display:block}}@media screen and (min-width: 1200px){:host{--header-skeleton-padding-x:var(--siteheader-skeleton-padding-x-desktop, 2.4rem);--header-skeleton-top-row-height:var(--siteheader-skeleton-top-row-height-desktop,\n            8rem);--header-skeleton-bottom-row-height:var(--siteheader-skeleton-bottom-row-height-desktop,\n            6.8rem)}.skel-logo{width:13rem;height:3rem}.skel-search{width:min(100%, 42rem)}}@keyframes header-skeleton-shimmer{100%{transform:translateX(100%)}}@media (prefers-reduced-motion: reduce){.skel::after{animation:none}}";
+const PnMarketwebHeaderSkeletonLoaderStyle0 = pnMarketwebHeaderSkeletonLoaderCss;
+
+const PnMarketwebHeaderSkeletonLoader$1 = /*@__PURE__*/ proxyCustomElement(class PnMarketwebHeaderSkeletonLoader extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        console.log('Rendering PnMarketwebHeaderSkeletonLoader...');
+        return (h(Host, { key: 'df31cc237329e033c4ace683027a6458a3790ef1' }, h("header", { key: '51d25dc2af64660068fcabfa5f95cc0872d29cce', class: "header-skeleton", "aria-hidden": "true" }, h("div", { key: '1469d90c9ca66cc371257818dbf1aacbdc2c0b8c', class: "mobile-layout" }, h("div", { key: '591d0124da5d93e45809cf35f514b590c60d666f', class: "mobile-row" }, h("div", { key: '1e8ec053ab87561b5f3a6a5c6e45c4fbcbe66212', class: "skel skel-logo" }), h("div", { key: '83c7c0f633155348cb92e3370f16daf3c5d0e6c2', class: "skel skel-icon-button" }))), h("div", { key: '847b9bbe3de7c3a0aa5954e82167e99a5813fcd2', class: "tablet-desktop-layout" }, h("div", { key: '5b4f7867da490285dd1032fdf9b7387b705a51f2', class: "top-row" }, h("div", { key: '208485c9f664ef1008bf57eb5a98e6687ba70949', class: "top-row-left" }, h("div", { key: 'b2fdca97d9b576d20d16ca833e84a80191653e3f', class: "skel skel-chip" }), h("div", { key: 'ca6b630a8c38cd87c4e65ffd483e0e65e4774326', class: "skel skel-icon-button" })), h("div", { key: '0923c1a855f32159dd42dc49eb9e84b47a70a549', class: "top-row-center" }, h("div", { key: 'dda22514ffd4a1ceae80252dafe49597a63ec364', class: "skel skel-logo" })), h("div", { key: 'a6ec95a525889c8cc13b35ccc03a90c509a2c35c', class: "top-row-right" }, h("div", { key: '41d4a9998a8478423a2b1ce566568fe845c8767a', class: "skel skel-icon-button" }), h("div", { key: '0fb5f413dad85ffab8e8038c7720f3828fb24b72', class: "skel skel-icon-button" }), h("div", { key: 'b53f8b517499a89c30ee3c46179ffed6cc7e12b4', class: "skel skel-pill" }))), h("div", { key: 'e7c90c573556c1599f25bf99761d437e7ed3e7c8', class: "bottom-row" }, h("div", { key: '0c9d2b72369a256efa2daf8eafd8f938369601a0', class: "bottom-row-left" }, h("div", { key: '9835aa30019d52084f98c362e0e8a255fc747d46', class: "skel skel-menu-button" })), h("div", { key: '4cc96d47f41114dbe08ce67b62106664b2f8deee', class: "bottom-row-right" }, h("div", { key: '5bcab9e4e0f36f838b7467e3dcf130d4b95faa85', class: "skel skel-search" })))))));
+    }
+    static get style() { return PnMarketwebHeaderSkeletonLoaderStyle0; }
+}, [1, "pn-marketweb-header-skeleton-loader"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pn-marketweb-header-skeleton-loader"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pn-marketweb-header-skeleton-loader":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PnMarketwebHeaderSkeletonLoader$1);
+            }
+            break;
+    } });
+}
+
+const PnMarketwebHeaderSkeletonLoader = PnMarketwebHeaderSkeletonLoader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnMarketwebHeaderSkeletonLoader, defineCustomElement };
+
+//# sourceMappingURL=pn-marketweb-header-skeleton-loader.js.map

package/components/pn-marketweb-header-skeleton-loader.js.map

@@ -0,0 +1 @@
+{"file":"pn-marketweb-header-skeleton-loader.js","mappings":";;AAAA,MAAM,kCAAkC,GAAG,msHAAmsH,CAAC;AAC/uH,8CAAe,kCAAkC;;MCUpCA,iCAA+B;;;;;;IACxC,MAAM;QAEF,OAAO,CAAC,GAAG,CAAC,8CAA8C,CAAC,CAAC;QAC5D,QACI,EAAC,IAAI,uDACD,+DAAQ,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAE9C,4DAAK,KAAK,EAAC,eAAe,IACtB,4DAAK,KAAK,EAAC,YAAY,IACnB,4DAAK,KAAK,EAAC,gBAAgB,GAAG,EAC9B,4DAAK,KAAK,EAAC,uBAAuB,GAAG,CACnC,CACJ,EAGN,4DAAK,KAAK,EAAC,uBAAuB,IAC9B,4DAAK,KAAK,EAAC,SAAS,IAChB,4DAAK,KAAK,EAAC,cAAc,IACrB,4DAAK,KAAK,EAAC,gBAAgB,GAAG,EAC9B,4DAAK,KAAK,EAAC,uBAAuB,GAAG,CACnC,EAEN,4DAAK,KAAK,EAAC,gBAAgB,IACvB,4DAAK,KAAK,EAAC,gBAAgB,GAAG,CAC5B,EAEN,4DAAK,KAAK,EAAC,eAAe,IACtB,4DAAK,KAAK,EAAC,uBAAuB,GAAG,EACrC,4DAAK,KAAK,EAAC,uBAAuB,GAAG,EACrC,4DAAK,KAAK,EAAC,gBAAgB,GAAG,CAC5B,CACJ,EAEN,4DAAK,KAAK,EAAC,YAAY,IACnB,4DAAK,KAAK,EAAC,iBAAiB,IACxB,4DAAK,KAAK,EAAC,uBAAuB,GAAG,CACnC,EAEN,4DAAK,KAAK,EAAC,kBAAkB,IACzB,4DAAK,KAAK,EAAC,kBAAkB,GAAG,CAC9B,CACJ,CACJ,CACD,CACN,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;","names":["PnMarketwebHeaderSkeletonLoader"],"sources":["src/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-skeleton-loader.scss?tag=pn-marketweb-header-skeleton-loader&encapsulation=shadow","src/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-skeleton-loader.tsx"],"sourcesContent":[":host {\n    display: block;\n    width: 100%;\n    --header-skeleton-bg: var(--siteheader-skeleton-bg, #e8edf2);\n    --header-skeleton-shine: var(--siteheader-skeleton-shine,\n            rgba(255, 255, 255, 0.65));\n    --header-skeleton-radius: var(--siteheader-skeleton-radius, 0.4rem);\n    --header-skeleton-gap: var(--siteheader-skeleton-gap, 1.2rem);\n    --header-skeleton-padding-x: var(--siteheader-skeleton-padding-x, 1.6rem);\n    --header-skeleton-padding-y: var(--siteheader-skeleton-padding-y, 1.2rem);\n    --header-skeleton-border-color: var(--siteheader-skeleton-border-color,\n            #d9e1e8);\n    --header-skeleton-mobile-height: var(--siteheader-skeleton-mobile-height,\n            6.4rem);\n    --header-skeleton-top-row-height: var(--siteheader-skeleton-top-row-height,\n            7.2rem);\n    --header-skeleton-bottom-row-height: var(--siteheader-skeleton-bottom-row-height,\n            6.4rem);\n}\n\n.header-skeleton {\n    width: 100%;\n    box-sizing: border-box;\n    border-bottom: 0.1rem solid var(--header-skeleton-border-color);\n    background: var(--siteheader-skeleton-background, #fff);\n}\n\n.mobile-layout,\n.tablet-desktop-layout {\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.mobile-row,\n.top-row,\n.bottom-row {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    box-sizing: border-box;\n    padding-left: var(--header-skeleton-padding-x);\n    padding-right: var(--header-skeleton-padding-x);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Skeleton blocks                                                            */\n/* -------------------------------------------------------------------------- */\n\n.skel {\n    position: relative;\n    overflow: hidden;\n    flex: 0 0 auto;\n    background: var(--header-skeleton-bg);\n}\n\n.skel::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    transform: translateX(-100%);\n    background: linear-gradient(90deg,\n            transparent,\n            var(--header-skeleton-shine),\n            transparent);\n    animation: header-skeleton-shimmer 1.4s infinite;\n}\n\n.skel-logo {\n    width: 11.2rem;\n    height: 2.8rem;\n    border-radius: var(--header-skeleton-radius);\n}\n\n.skel-icon-button {\n    width: 4rem;\n    height: 4rem;\n    border-radius: 50%;\n}\n\n.skel-chip {\n    width: 10rem;\n    height: 3.6rem;\n    border-radius: 1.8rem;\n}\n\n.skel-pill {\n    width: 7.2rem;\n    height: 3.6rem;\n    border-radius: 1.8rem;\n}\n\n.skel-menu-button {\n    width: 12rem;\n    height: 4rem;\n    border-radius: 0.4rem;\n}\n\n.skel-search {\n    width: min(100%, 36rem);\n    height: 4rem;\n    border-radius: 2rem;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Mobile                                                                     */\n/* -------------------------------------------------------------------------- */\n\n.mobile-layout {\n    display: block;\n}\n\n.mobile-row {\n    justify-content: space-between;\n    min-height: var(--header-skeleton-mobile-height);\n    padding-top: var(--header-skeleton-padding-y);\n    padding-bottom: var(--header-skeleton-padding-y);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Tablet / Desktop                                                           */\n/* -------------------------------------------------------------------------- */\n\n.tablet-desktop-layout {\n    display: none;\n}\n\n.top-row {\n    min-height: var(--header-skeleton-top-row-height);\n    padding-top: var(--header-skeleton-padding-y);\n    padding-bottom: var(--header-skeleton-padding-y);\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n    column-gap: var(--header-skeleton-gap);\n    align-items: center;\n}\n\n.top-row-left,\n.top-row-center,\n.top-row-right,\n.bottom-row-left,\n.bottom-row-right {\n    display: flex;\n    align-items: center;\n}\n\n.top-row-left {\n    justify-content: flex-start;\n    gap: var(--header-skeleton-gap);\n    min-width: 0;\n}\n\n.top-row-center {\n    justify-content: center;\n}\n\n.top-row-right {\n    justify-content: flex-end;\n    gap: var(--header-skeleton-gap);\n    min-width: 0;\n}\n\n.bottom-row {\n    min-height: var(--header-skeleton-bottom-row-height);\n    justify-content: space-between;\n    gap: var(--header-skeleton-gap);\n    padding-top: 0.8rem;\n    padding-bottom: 1.2rem;\n}\n\n.bottom-row-left {\n    justify-content: flex-start;\n    flex: 0 0 auto;\n}\n\n.bottom-row-right {\n    justify-content: flex-end;\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.bottom-row-right .skel-search {\n    margin-left: auto;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Breakpoints                                                                */\n/* -------------------------------------------------------------------------- */\n\n/* Tablet and up */\n@media screen and (min-width: 768px) {\n    .mobile-layout {\n        display: none;\n    }\n\n    .tablet-desktop-layout {\n        display: block;\n    }\n}\n\n/* Desktop */\n@media screen and (min-width: 1200px) {\n    :host {\n        --header-skeleton-padding-x: var(--siteheader-skeleton-padding-x-desktop, 2.4rem);\n        --header-skeleton-top-row-height: var(--siteheader-skeleton-top-row-height-desktop,\n                8rem);\n        --header-skeleton-bottom-row-height: var(--siteheader-skeleton-bottom-row-height-desktop,\n                6.8rem);\n    }\n\n    .skel-logo {\n        width: 13rem;\n        height: 3rem;\n    }\n\n    .skel-search {\n        width: min(100%, 42rem);\n    }\n}\n\n@keyframes header-skeleton-shimmer {\n    100% {\n        transform: translateX(100%);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .skel::after {\n        animation: none;\n    }\n}","import {\n    Component,\n    h,\n    Host,\n} from '@stencil/core';\n\n@Component({\n    tag: 'pn-marketweb-header-skeleton-loader',\n    styleUrl: 'pn-marketweb-header-skeleton-loader.scss',\n    shadow: true,\n})\nexport class PnMarketwebHeaderSkeletonLoader {\n    render() {\n\n        console.log('Rendering PnMarketwebHeaderSkeletonLoader...');\n        return (\n            <Host>\n                <header class=\"header-skeleton\" aria-hidden=\"true\">\n                    {/* Mobile */}\n                    <div class=\"mobile-layout\">\n                        <div class=\"mobile-row\">\n                            <div class=\"skel skel-logo\" />\n                            <div class=\"skel skel-icon-button\" />\n                        </div>\n                    </div>\n\n                    {/* Tablet / Desktop */}\n                    <div class=\"tablet-desktop-layout\">\n                        <div class=\"top-row\">\n                            <div class=\"top-row-left\">\n                                <div class=\"skel skel-chip\" />\n                                <div class=\"skel skel-icon-button\" />\n                            </div>\n\n                            <div class=\"top-row-center\">\n                                <div class=\"skel skel-logo\" />\n                            </div>\n\n                            <div class=\"top-row-right\">\n                                <div class=\"skel skel-icon-button\" />\n                                <div class=\"skel skel-icon-button\" />\n                                <div class=\"skel skel-pill\" />\n                            </div>\n                        </div>\n\n                        <div class=\"bottom-row\">\n                            <div class=\"bottom-row-left\">\n                                <div class=\"skel skel-menu-button\" />\n                            </div>\n\n                            <div class=\"bottom-row-right\">\n                                <div class=\"skel skel-search\" />\n                            </div>\n                        </div>\n                    </div>\n                </header>\n            </Host>\n        );\n    }\n}"],"version":3}

package/components/pn-marketweb-header-toggle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnMarketwebHeaderToggle extends Components.PnMarketwebHeaderToggle, HTMLElement {}
+export const PnMarketwebHeaderToggle: {
+    prototype: PnMarketwebHeaderToggle;
+    new (): PnMarketwebHeaderToggle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-marketweb-header-toggle.js

@@ -0,0 +1,8 @@
+import { P as PnMarketwebHeaderToggle$1, d as defineCustomElement$1 } from './pn-marketweb-header-toggle2.js';
+
+const PnMarketwebHeaderToggle = PnMarketwebHeaderToggle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnMarketwebHeaderToggle, defineCustomElement };
+
+//# sourceMappingURL=pn-marketweb-header-toggle.js.map

package/components/pn-marketweb-header-toggle.js.map

@@ -0,0 +1 @@
+{"file":"pn-marketweb-header-toggle.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/pn-marketweb-header-toggle2.js

@@ -0,0 +1,61 @@
+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

package/components/pn-marketweb-header-toggle2.js.map

@@ -0,0 +1 @@
+{"file":"pn-marketweb-header-toggle2.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,8jDAA8jD,CAAC;AAClmD,sCAAe,0BAA0B;;MC4B5B,uBAAuB;;;;;;uBACQ,EAAE;yBAGhB,aAAa;qBAGQ,CAAC;;;IAIzC,YAAY,CAA+B;IAE5C,OAAO,CACb,KAAiB,EACjB,MAA4B;QAE5B,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;YAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SACtC;QAED,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAChB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAEO,YAAY,CAAC,MAA4B;QAC/C,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAC7C,QACE,SACE,IAAI,EACF,MAAM,CAAC,IAAI,IAAI,GAAG,EAEpB,KAAK,EAAE;gBACL,gCAAgC,EAAE,IAAI;gBACtC,wCAAwC,EAAE,QAAQ;aACnD,kBACa,QAAQ,GAAG,MAAM,GAAG,SAAS,EAC3C,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,IAE9C,MAAM,CAAC,KAAK,CACX,EACJ;KACH;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7B,OAAO,EAAC,IAAI,OAAQ,CAAC;SACtB;QAED,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,yBAAyB,gBAAa,IAAI,CAAC,SAAS,IAC5D,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAClD,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-marketweb-header-toggle/pn-marketweb-header-toggle.scss?tag=pn-marketweb-header-toggle&encapsulation=shadow","src/components/navigation/pn-marketweb-header-toggle/pn-marketweb-header-toggle.tsx"],"sourcesContent":["@import \"../../../globals/main.scss\";\n\n// -----------------------------------------------------------------------------\n// Component token defaults\n// Styling API\n// -----------------------------------------------------------------------------\n:host {\n  --toggle-color: var(--siteheader-toggle-color, #{$blue700});\n  --toggle-hover-color: var(--siteheader-toggle-hover-color, #{$black});\n  --toggle-active-color: var(--siteheader-toggle-active-color, #{$black});\n  --toggle-active-underline-color: var(--siteheader-toggle-active-underline-color, #{$blue400});\n\n  --toggle-after-visibility: hidden;  \n\n  display: inline-block;\n}\n\n// -----------------------------------------------------------------------------\n// Host shell / layout\n// -----------------------------------------------------------------------------\n.marketweb-header-toggle {\n  display: flex;\n  align-items: center;\n  gap: 1.2rem;\n}\n\n// -----------------------------------------------------------------------------\n// Internal elements\n// -----------------------------------------------------------------------------\n.marketweb-header-toggle-button {\n  display: inline-block;\n  position: relative;\n  cursor: pointer;\n  text-decoration: none;\n  line-height: 1;\n  transition: color 0.2s ease;\n\n  font-size: 1.6rem;  \n  color: var(--toggle-color);\n\n  &:hover {\n    color: var(--toggle-hover-color);   \n    --toggle-after-visibility:visible;\n  }\n  \n\n  &:focus-visible {\n    outline: 2px solid #007c89;\n    outline-offset: 2px;\n  }\n\n  &--active {\n    color: var(--toggle-active-color);\n    font-weight: 500;\n\n    &::after {\n      --toggle-after-visibility:visible;\n    }\n  }\n\n  \n  &::after {    \n    visibility:var(--toggle-after-visibility);\n    content: '';\n    position: absolute;    \n    bottom: rem16(-8px);\n    width: 110%;\n    left:-5%;\n    height: 2px;\n    background: var(--toggle-active-underline-color);\n    border-radius: 8px;\n  }\n}","import {\n  HeaderMenuMode,\n  HeaderMenuModeOption,\n} from '@/components/layout-components/pn-marketweb-header/types/pn-marketweb-header.types';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n/**\n * Small segmented toggle used for switching between Private and Business menu modes.\n *\n * Responsibilities:\n * - render two selectable links\n * - reflect current active mode\n * - emit the selected mode when changed\n *\n * This component is intentionally presentation-only.\n * The parent header decides what switching mode actually means.\n */\n@Component({\n  tag: 'pn-marketweb-header-toggle',\n  styleUrl: 'pn-marketweb-header-toggle.scss',\n  shadow: true,\n})\nexport class PnMarketwebHeaderToggle {\n  @Prop() options: HeaderMenuModeOption[] = [];\n\n  /** Accessible label for the toggle group. */\n  @Prop() ariaLabel: string = 'Header mode';\n\n  /** Currently active mode. */\n  @Prop({ reflect: true }) value: HeaderMenuMode = 0;\n\n\n  /** Emitted whenever the user selects a different mode. */\n  @Event() toggleChange: EventEmitter<HeaderMenuMode>;\n\n  private onClick(\n    event: MouseEvent,\n    option: HeaderMenuModeOption,\n  ) {\n    if (option.index !== this.value) {\n      this.toggleChange.emit(option.index);\n    }\n\n    if (!option.href) {\n      event.preventDefault();\n    }\n  }\n\n  private renderOption(option: HeaderMenuModeOption) {\n    const isActive = option.index === this.value;\n    return (\n      <a\n        href={\n          option.href ?? '#'\n        }\n        class={{\n          'marketweb-header-toggle-button': true,\n          'marketweb-header-toggle-button--active': isActive,\n        }}        \n        aria-current={isActive ? 'page' : undefined}        \n        onClick={(event) => this.onClick(event, option)}\n      >\n        {option.label}\n      </a>\n    );\n  }\n\n  render() {\n    if (this.options.length === 0) {\n      return <Host></Host>;\n    }\n\n    return (\n      <Host>\n        <nav class=\"marketweb-header-toggle\" aria-label={this.ariaLabel}>\n          {this.options.map(option => this.renderOption(option))}\n        </nav>\n      </Host>\n    );\n  }\n}"],"version":3}

package/components/pn-marketweb-header-top-row.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnMarketwebHeaderTopRow extends Components.PnMarketwebHeaderTopRow, HTMLElement {}
+export const PnMarketwebHeaderTopRow: {
+    prototype: PnMarketwebHeaderTopRow;
+    new (): PnMarketwebHeaderTopRow;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-marketweb-header-top-row.js

@@ -0,0 +1,8 @@
+import { P as PnMarketwebHeaderTopRow$1, d as defineCustomElement$1 } from './pn-marketweb-header-top-row2.js';
+
+const PnMarketwebHeaderTopRow = PnMarketwebHeaderTopRow$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnMarketwebHeaderTopRow, defineCustomElement };
+
+//# sourceMappingURL=pn-marketweb-header-top-row.js.map

package/components/pn-marketweb-header-top-row.js.map

@@ -0,0 +1 @@
+{"file":"pn-marketweb-header-top-row.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}