@postnord/pn-marketweb-components 4.2.4 → 4.3.0

package/collection/components/layout-components/pn-marketweb-header/utils/header-toggle-menu.js

@@ -0,0 +1,101 @@
+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
+ */
+export 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.
+ */
+export 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.
+ */
+export 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
+ */
+export 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.
+ */
+export 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.
+ */
+export function buildMenuItemsForMode(structure, mode) {
+    const groups = getMenuGroupsForMode(structure, mode);
+    return [
+        ...groups.primaryItems,
+        ...groups.sharedItems,
+    ];
+}
+//# sourceMappingURL=header-toggle-menu.js.map

package/collection/components/layout-components/pn-marketweb-header/utils/header-toggle-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-toggle-menu.js","sourceRoot":"","sources":["../../../../../src/components/layout-components/pn-marketweb-header/utils/header-toggle-menu.ts"],"names":[],"mappings":"AAUA,SAAS,eAAe,CAAC,SAAqB;IAC1C,OAAO,SAAS,CAAC,MAAM,GAAG,CAAC;QACvB,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;QACjC,CAAC,CAAC,IAAI,CAAC;AACf,CAAC;AAED,SAAS,YAAY,CAAC,SAAqB;IACvC,IAAI,SAAS,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;QACxB,OAAO,EAAE,CAAC;IACd,CAAC;IAED,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAClC,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,8BAA8B,CAC1C,SAAqB;IAErB,MAAM,UAAU,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAE1C,MAAM,eAAe,GAA2B,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5E,KAAK;QACL,KAAK,EAAE,IAAI,CAAC,IAAI;QAChB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS;QAC5B,IAAI;KACP,CAAC,CAAC,CAAC;IAEJ,OAAO;QACH,gBAAgB,EAAE,eAAe,CAAC,MAAM,GAAG,CAAC;QAC5C,SAAS;QACT,eAAe;QACf,UAAU;QACV,WAAW,EAAE,UAAU,EAAE,QAAQ,IAAI,EAAE;KAC1C,CAAC;AACN,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAChC,SAA8B,EAC9B,IAAoB;IAEpB,OAAO,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;AACvE,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,yBAAyB,CACrC,SAAqB,EACrB,IAAoB;IAEpB,MAAM,SAAS,GAAG,8BAA8B,CAAC,SAAS,CAAC,CAAC;IAC5D,OAAO,oBAAoB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AACjD,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAChC,SAA8B,EAC9B,IAAoB;IAEpB,MAAM,UAAU,GAAG,oBAAoB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IAEzD,IAAI,CAAC,UAAU,EAAE,CAAC;QACd,OAAO;YACH,YAAY,EAAE,SAAS,CAAC,WAAW;YACnC,WAAW,EAAE,EAAE;SAClB,CAAC;IACN,CAAC;IAED,OAAO;QACH,YAAY,EAAE,UAAU,EAAE,QAAQ,IAAI,EAAE;QACxC,WAAW,EAAE,SAAS,CAAC,WAAW;KACrC,CAAC;AACN,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,2BAA2B,CACvC,SAAqB,EACrB,IAAoB;IAEpB,MAAM,SAAS,GAAG,8BAA8B,CAAC,SAAS,CAAC,CAAC;IAC5D,OAAO,oBAAoB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AACjD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CACjC,SAA8B,EAC9B,IAAoB;IAEpB,MAAM,MAAM,GAAG,oBAAoB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IAErD,OAAO;QACH,GAAG,MAAM,CAAC,YAAY;QACtB,GAAG,MAAM,CAAC,WAAW;KACxB,CAAC;AACN,CAAC","sourcesContent":["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}"]}

package/collection/components/layout-components/pn-marketweb-header/utils/header-toggle-menu.storage.js

@@ -0,0 +1,63 @@
+const STORAGE_KEY = 'pn-marketweb-header:menu-mode';
+/**
+ * Returns the previously selected menu mode from localStorage.
+ *
+ * Returns null if:
+ * - nothing is stored
+ * - value is invalid
+ * - storage is unavailable
+ */
+export function getStoredHeaderMenuMode() {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    try {
+        const value = window.localStorage.getItem(STORAGE_KEY);
+        if (value == null) {
+            return null;
+        }
+        const parsed = Number(value);
+        if (Number.isInteger(parsed) && parsed >= 0) {
+            return parsed;
+        }
+    }
+    catch {
+        // intentionally ignored
+    }
+    return null;
+}
+/**
+ * Persists the selected menu mode in localStorage.
+ *
+ * Storage failures are intentionally ignored.
+ */
+export function storeHeaderMenuMode(mode) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    try {
+        window.localStorage.setItem(STORAGE_KEY, String(mode));
+    }
+    catch {
+        // intentionally ignored
+    }
+}
+/**
+ * Resolves the effective initial menu mode.
+ *
+ * Priority:
+ * 1. Stored user preference
+ * 2. Server-provided initial mode
+ * 3. Fallback to first mode (index 0)
+ */
+export function resolveInitialHeaderMenuMode(hasMenuSwitching, initialActiveMenuMode) {
+    if (!hasMenuSwitching) {
+        return 0;
+    }
+    const storedMode = getStoredHeaderMenuMode();
+    if (typeof storedMode === 'number') {
+        return storedMode;
+    }
+    return initialActiveMenuMode ?? 0;
+}
+//# sourceMappingURL=header-toggle-menu.storage.js.map

package/collection/components/layout-components/pn-marketweb-header/utils/header-toggle-menu.storage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-toggle-menu.storage.js","sourceRoot":"","sources":["../../../../../src/components/layout-components/pn-marketweb-header/utils/header-toggle-menu.storage.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG,+BAA+B,CAAC;AAEpD;;;;;;;GAOG;AACH,MAAM,UAAU,uBAAuB;IACnC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAChC,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,CAAC;QACD,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAEvD,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7B,IAAI,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,MAAM,IAAI,CAAC,EAAE,CAAC;YAC1C,OAAO,MAAM,CAAC;QAClB,CAAC;IACL,CAAC;IAAC,MAAM,CAAC;QACL,wBAAwB;IAC5B,CAAC;IAED,OAAO,IAAI,CAAC;AAChB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAAoB;IACpD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAChC,OAAO;IACX,CAAC;IAED,IAAI,CAAC;QACD,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3D,CAAC;IAAC,MAAM,CAAC;QACL,wBAAwB;IAC5B,CAAC;AACL,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,4BAA4B,CACxC,gBAAyB,EACzB,qBAA6C;IAE7C,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACpB,OAAO,CAAC,CAAC;IACb,CAAC;IAED,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE,CAAC;QACjC,OAAO,UAAU,CAAC;IACtB,CAAC;IAED,OAAO,qBAAqB,IAAI,CAAC,CAAC;AACtC,CAAC","sourcesContent":["import type { HeaderMenuMode } from '../types/pn-marketweb-header.types';\n\nconst STORAGE_KEY = 'pn-marketweb-header:menu-mode';\n\n/**\n * Returns the previously selected menu mode from localStorage.\n *\n * Returns null if:\n * - nothing is stored\n * - value is invalid\n * - storage is unavailable\n */\nexport function getStoredHeaderMenuMode(): HeaderMenuMode | null {\n    if (typeof window === 'undefined') {\n        return null;\n    }\n\n    try {\n        const value = window.localStorage.getItem(STORAGE_KEY);\n\n        if (value == null) {\n            return null;\n        }\n\n        const parsed = Number(value);\n        if (Number.isInteger(parsed) && parsed >= 0) {\n            return parsed;\n        }\n    } catch {\n        // intentionally ignored\n    }\n\n    return null;\n}\n\n/**\n * Persists the selected menu mode in localStorage.\n *\n * Storage failures are intentionally ignored.\n */\nexport function storeHeaderMenuMode(mode: HeaderMenuMode): void {\n    if (typeof window === 'undefined') {\n        return;\n    }\n\n    try {\n        window.localStorage.setItem(STORAGE_KEY, String(mode));\n    } catch {\n        // intentionally ignored\n    }\n}\n\n/**\n * Resolves the effective initial menu mode.\n *\n * Priority:\n * 1. Stored user preference\n * 2. Server-provided initial mode\n * 3. Fallback to first mode (index 0)\n */\nexport function resolveInitialHeaderMenuMode(\n    hasMenuSwitching: boolean,\n    initialActiveMenuMode?: HeaderMenuMode | null,\n): HeaderMenuMode {\n    if (!hasMenuSwitching) {\n        return 0;\n    }\n\n    const storedMode = getStoredHeaderMenuMode();\n    if (typeof storedMode === 'number') {\n        return storedMode;\n    }\n\n    return initialActiveMenuMode ?? 0;\n}"]}

package/collection/components/layout-components/pn-marketweb-header/utils/header-url.js

@@ -0,0 +1,91 @@
+/**
+ * Removes duplicated language segments from generated URLs.
+ *
+ * Example:
+ * /sv/sv/page -> /sv/page
+ *
+ * This protects against incorrectly concatenated site-domain-based URLs.
+ */
+export function removeDoubleLanguage(url, language) {
+    if (!language) {
+        return url;
+    }
+    const languageSegment = language.toLowerCase() + '/';
+    const doubleLanguageSegment = '/' + languageSegment + languageSegment;
+    if (url.includes(doubleLanguageSegment)) {
+        return url.replace(doubleLanguageSegment, '/' + languageSegment);
+    }
+    return url;
+}
+/**
+ * Resolves a menu/login href to an absolute site-relative URL when needed.
+ *
+ * What it does:
+ * - Leaves fully-qualified http/https URLs unchanged
+ * - Prefixes relative URLs with the current site definition domain
+ * - Cleans up accidental double language segments
+ */
+export function adjustHref(href, siteDefinition, language) {
+    if (!href) {
+        return href;
+    }
+    if (href.indexOf('http') === 0) {
+        return href;
+    }
+    const siteUrl = siteDefinition?.url ?? '';
+    const domainUrl = siteUrl.lastIndexOf('/') === siteUrl.length - 1
+        ? siteUrl.substring(0, siteUrl.length - 1)
+        : siteUrl;
+    return removeDoubleLanguage(domainUrl + href, language);
+}
+/**
+ * Recursively adjusts a menu item and all child menu items so that
+ * relative URLs become site-domain-aware absolute URLs.
+ *
+ * This returns a new object rather than mutating the original API item.
+ */
+export function adjustMenuItemUrls(item, siteDefinition, language) {
+    return {
+        ...item,
+        href: adjustHref(item.href, siteDefinition, language),
+        children: (item.children ?? []).map(child => adjustMenuItemUrls(child, siteDefinition, language)),
+    };
+}
+/**
+ * Adjusts login dialog links so that relative URLs are resolved against
+ * the active site domain.
+ *
+ * This is used when siteDomainInUrls is enabled.
+ */
+export function adjustLoginDialogUrls(loginDialog, siteDefinition, language) {
+    if (!loginDialog) {
+        return null;
+    }
+    return {
+        ...loginDialog,
+        loggedInLinks: (loginDialog.loggedInLinks ?? []).map(item => ({
+            ...item,
+            href: adjustHref(item.href, siteDefinition, language),
+        })),
+        loginMenuLinks: (loginDialog.loginMenuLinks ?? []).map(item => ({
+            ...item,
+            href: adjustHref(item.href, siteDefinition, language),
+        })),
+    };
+}
+/**
+ * Navigates to the provided href when available.
+ */
+export function navigateToHref(href) {
+    if (!href) {
+        return;
+    }
+    window.location.href = href;
+}
+/**
+ * Navigates to a menu item's href when available.
+ */
+export function navigateToMenuItem(item) {
+    navigateToHref(item?.href);
+}
+//# sourceMappingURL=header-url.js.map

package/collection/components/layout-components/pn-marketweb-header/utils/header-url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-url.js","sourceRoot":"","sources":["../../../../../src/components/layout-components/pn-marketweb-header/utils/header-url.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    LoginDialog,\n    MenuItem,\n    MenuSiteDefinition,\n} from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';\n\n/**\n * Removes duplicated language segments from generated URLs.\n *\n * Example:\n * /sv/sv/page -> /sv/page\n *\n * This protects against incorrectly concatenated site-domain-based URLs.\n */\nexport function removeDoubleLanguage(url: string, language: string): string {\n    if (!language) {\n        return url;\n    }\n\n    const languageSegment = language.toLowerCase() + '/';\n    const doubleLanguageSegment = '/' + languageSegment + languageSegment;\n\n    if (url.includes(doubleLanguageSegment)) {\n        return url.replace(doubleLanguageSegment, '/' + languageSegment);\n    }\n\n    return url;\n}\n\n/**\n * Resolves a menu/login href to an absolute site-relative URL when needed.\n *\n * What it does:\n * - Leaves fully-qualified http/https URLs unchanged\n * - Prefixes relative URLs with the current site definition domain\n * - Cleans up accidental double language segments\n */\nexport function adjustHref(href: string, siteDefinition: MenuSiteDefinition, language: string): string {\n    if (!href) {\n        return href;\n    }\n\n    if (href.indexOf('http') === 0) {\n        return href;\n    }\n\n    const siteUrl = siteDefinition?.url ?? '';\n    const domainUrl =\n        siteUrl.lastIndexOf('/') === siteUrl.length - 1\n            ? siteUrl.substring(0, siteUrl.length - 1)\n            : siteUrl;\n\n    return removeDoubleLanguage(domainUrl + href, language);\n}\n\n/**\n * Recursively adjusts a menu item and all child menu items so that\n * relative URLs become site-domain-aware absolute URLs.\n *\n * This returns a new object rather than mutating the original API item.\n */\nexport function adjustMenuItemUrls(\n    item: MenuItem,\n    siteDefinition: MenuSiteDefinition,\n    language: string,\n): MenuItem {\n    return {\n        ...item,\n        href: adjustHref(item.href, siteDefinition, language),\n        children: (item.children ?? []).map(child => adjustMenuItemUrls(child, siteDefinition, language)),\n    };\n}\n\n/**\n * Adjusts login dialog links so that relative URLs are resolved against\n * the active site domain.\n *\n * This is used when siteDomainInUrls is enabled.\n */\nexport function adjustLoginDialogUrls(\n    loginDialog: LoginDialog | null,\n    siteDefinition: MenuSiteDefinition,\n    language: string,\n): LoginDialog | null {\n    if (!loginDialog) {\n        return null;\n    }\n\n    return {\n        ...loginDialog,\n        loggedInLinks: (loginDialog.loggedInLinks ?? []).map(item => ({\n            ...item,\n            href: adjustHref(item.href, siteDefinition, language),\n        })),\n        loginMenuLinks: (loginDialog.loginMenuLinks ?? []).map(item => ({\n            ...item,\n            href: adjustHref(item.href, siteDefinition, language),\n        })),\n    };\n}\n\n/**\n * Navigates to the provided href when available.\n */\nexport function navigateToHref(href?: string | null): void {\n    if (!href) {\n        return;\n    }\n\n    window.location.href = href;\n}\n\n/**\n * Navigates to a menu item's href when available.\n */\nexport function navigateToMenuItem(item: MenuItem | null): void {\n    navigateToHref(item?.href);\n}"]}

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-button.js

@@ -16,7 +16,7 @@ export class PnMarketwebSiteheaderLoginButton {
         return navigationUrl;
     }
     render() {
-        return (h(Host, { key: '9851d49c77b44d630cddd1bbb32bbb9a8d79a99f' }, h("pn-button", { key: '48e7f40c6633213f5ba1ae5a56d93addc668ea75', href: this.nagivateToLoginUrl() }, this.label)));
+        return (h(Host, { key: '0cffb1a2af16a85f88b3a5dbe992c65c2cfda95f' }, h("pn-button", { key: 'bc5fd64d3f2d12a253cd725cbbb710466fdca6ab', href: this.nagivateToLoginUrl() }, this.label)));
     }
     static get is() { return "pn-marketweb-siteheader-login-button"; }
     static get originalStyleUrls() {

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-linklist.css

@@ -27,48 +27,70 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   }
 }
 
+pn-marketweb-siteheader-login-linklist {
+  --login-linklist-heading-color: var(--siteheader-login-linklist-heading-color, inherit);
+  --login-linklist-link-color: var(--siteheader-login-linklist-link-color, #005d92);
+  --login-linklist-link-hover-color: var(--siteheader-login-linklist-link-hover-color, #0d234b);
+  --login-linklist-button-link-color: var(--siteheader-login-linklist-button-link-color, #ffffff);
+  --login-linklist-icon-color: var(--siteheader-login-linklist-icon-color, #005d92);
+  --login-linklist-icon-hover-color: var(--siteheader-login-linklist-icon-hover-color, #0d234b);
+}
+
 pn-marketweb-siteheader-login-linklist {
   display: flex;
   flex-direction: column;
 }
-pn-marketweb-siteheader-login-linklist .pn-marketweb-siteheader-login-linklist-heading {
+
+.pn-marketweb-siteheader-login-linklist-heading {
   font-weight: 500;
   font-size: 1.6rem;
   margin-bottom: 2.4rem;
+  color: var(--login-linklist-heading-color);
 }
+
 pn-marketweb-siteheader-login-linklist strong {
   margin-bottom: 2.4rem;
 }
+
 pn-marketweb-siteheader-login-linklist ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
 }
+
 pn-marketweb-siteheader-login-linklist ul > li {
   margin-bottom: 2.4rem;
 }
-pn-marketweb-siteheader-login-linklist ul > li a:not(.pn-button) {
-  color: #005d92;
+pn-marketweb-siteheader-login-linklist ul > li:last-of-type {
+  margin-bottom: 0;
 }
+
 pn-marketweb-siteheader-login-linklist ul > li a {
   text-decoration: none;
   font-size: 1.6rem;
   line-height: 1.5;
   font-weight: 500;
 }
+pn-marketweb-siteheader-login-linklist ul > li a:hover {
+  color: var(--login-linklist-button-link-color);
+}
+
+pn-marketweb-siteheader-login-linklist ul > li a:not(.pn-button) {
+  color: var(--login-linklist-link-color);
+}
+
+pn-marketweb-siteheader-login-linklist ul > li:hover a:not(.pn-button) {
+  color: var(--login-linklist-link-hover-color);
+  text-decoration: underline;
+}
+
 pn-marketweb-siteheader-login-linklist ul > li pn-icon {
   padding-left: 0.8rem;
 }
 pn-marketweb-siteheader-login-linklist ul > li pn-icon svg > path {
-  fill: #005d92 !important;
-}
-pn-marketweb-siteheader-login-linklist ul > li:hover a {
-  color: #0d234b;
-  text-decoration: underline;
+  fill: var(--login-linklist-icon-color) !important;
 }
+
 pn-marketweb-siteheader-login-linklist ul > li:hover pn-icon svg > path {
-  fill: #0d234b !important;
-}
-pn-marketweb-siteheader-login-linklist ul > li:last-of-type {
-  margin-bottom: 0;
+  fill: var(--login-linklist-icon-hover-color) !important;
 }

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-mypage-button.js

@@ -6,7 +6,7 @@ export class PnMarketwebSiteheaderLoginMypageButton {
     }
     hostElement;
     render() {
-        return (h(Host, { key: '35dc38e3b181c223a3b5325e8ad4408b078cf9c9' }, h("pn-button", { key: 'daeeac6b7da9a0ad3424cefe30614c83f638ac66', href: this.myPageUrl }, this.label)));
+        return (h(Host, { key: 'c124432d15ec5bdf0aa2bbeb4354f6ecf2bce080' }, h("pn-button", { key: 'a5dd43d7ed7d03ca1cbe6ac6ff467cb75da83082', href: this.myPageUrl }, this.label)));
     }
     static get is() { return "pn-marketweb-siteheader-login-mypage-button"; }
     static get originalStyleUrls() {

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-profileselection.css

@@ -27,9 +27,29 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   }
 }
 
+pn-marketweb-siteheader-login-profileselection {
+  --login-profileselection-heading-color: var(--siteheader-login-profileselection-heading-color,
+      inherit);
+  --login-profileselection-description-color: var(--siteheader-login-profileselection-description-color,
+      #5e554a);
+  --login-profileselection-user-name-color: var(--siteheader-login-profileselection-user-name-color,
+      inherit);
+  --login-profileselection-divider-background: var(--siteheader-login-profileselection-divider-background,
+      #00a0d6);
+  --login-profileselection-profileoption-link-background: var(--siteheader-login-profileselection-profileoption-link-background,
+      #ffffff);
+  --login-profileselection-profileoption-link-color: var(--siteheader-login-profileselection-profileoption-link-color,
+      #005d92);
+  --login-profileselection-profileoption-link-hover-background: var(--siteheader-login-profileselection-profileoption-link-hover-background,
+      #f3f2f2);
+  --login-profileselection-logout-link-color: var(--siteheader-login-profileselection-logout-link-color,
+      #005d92);
+}
+
 .pn-marketweb-siteheader-login-profileselection-heading {
   display: block;
   padding: 0.5rem 0 1rem;
+  color: var(--login-profileselection-heading-color);
 }
 
 .pn-marketweb-siteheader-login-profileselection-user,
@@ -41,6 +61,7 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
 .pn-marketweb-siteheader-login-profileselection-user-name,
 .pn-marketweb-siteheader-login-profileselection-currentprofile-name {
   line-height: 1;
+  color: var(--login-profileselection-user-name-color);
 }
 
 .pn-marketweb-siteheader-login-profileselection-user-description,
@@ -48,15 +69,15 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   font-weight: 400;
   white-space: normal;
   word-break: break-all;
-  color: #5e554a;
+  color: var(--login-profileselection-description-color);
   font-size: 0.75em;
 }
 
 .pn-marketweb-siteheader-login-profileselection-divider {
-  height: 1rem;
-  width: 100%;
-  background: #00a0d6;
   position: relative;
+  width: 100%;
+  height: 1rem;
+  background: var(--login-profileselection-divider-background);
   margin-left: -1em;
   margin-top: 1.6rem;
   margin-bottom: 1.6rem;
@@ -65,28 +86,28 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
 }
 .pn-marketweb-siteheader-login-profileselection-divider::after {
   content: "";
-  width: 0.6em;
-  height: 0.6em;
-  border-radius: 50%;
   position: absolute;
   right: 0;
   top: 0;
+  width: 0.6em;
+  height: 0.6em;
+  border-radius: 50%;
   background: inherit;
   transform: translateX(calc(100% + 0.2em));
 }
 
 .pn-marketweb-siteheader-login-profileselection-profileoption-link {
   display: flex;
-  background: #ffffff;
-  transition: background 0.15s ease-in-out;
+  align-items: center;
   margin: 0 -1em;
   padding: 0.6rem 1.6rem;
+  background: var(--login-profileselection-profileoption-link-background);
+  color: var(--login-profileselection-profileoption-link-color);
   text-decoration: none;
-  color: #005d92;
-  align-items: center;
+  transition: background 0.15s ease-in-out;
 }
 .pn-marketweb-siteheader-login-profileselection-profileoption-link:hover, .pn-marketweb-siteheader-login-profileselection-profileoption-link:focus, .pn-marketweb-siteheader-login-profileselection-profileoption-link:active {
-  background: #f3f2f2;
+  background: var(--login-profileselection-profileoption-link-hover-background);
 }
 
 .pn-marketweb-siteheader-login-profileselection-profileoption-content {
@@ -101,20 +122,20 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   font-weight: 400;
   white-space: normal;
   word-break: break-all;
-  color: #5e554a;
+  color: var(--login-profileselection-description-color);
   font-size: 0.75em;
 }
 
 .pn-marketweb-siteheader-login-profileselection-logout {
+  width: 100%;
   padding: 1.6rem;
   text-align: center;
-  width: 100%;
 }
 
 .pn-marketweb-siteheader-login-profileselection-logout-link {
   display: inline-block;
   font-weight: 500;
-  color: #005d92;
+  color: var(--login-profileselection-logout-link-color);
   text-decoration: none;
 }
 .pn-marketweb-siteheader-login-profileselection-logout-link:hover, .pn-marketweb-siteheader-login-profileselection-logout-link:focus, .pn-marketweb-siteheader-login-profileselection-logout-link:active {

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.css

@@ -28,10 +28,23 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
 }
 
 pn-marketweb-siteheader-login {
+  --login-dropdown-divider-background: var(--siteheader-login-dropdown-divider-background,
+    #f9f8f8);
+  --login-dropdown-text-color: var(--siteheader-login-dropdown-text-color,
+    #2d2013);
+  --login-dropdown-link-color: var(--siteheader-login-dropdown-link-color,
+    #005d92);
+  --login-dropdown-link-hover-decoration: var(--siteheader-login-dropdown-link-hover-decoration,
+      underline);
+  --login-dark-icon-hover-fill: var(--siteheader-login-dark-icon-hover-fill,
+    #000000);
   padding: 1rem 0;
   max-height: 5.2rem;
   position: relative;
 }
+pn-marketweb-siteheader-login pn-button-dropdown {
+  display: none;
+}
 pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content {
   max-width: 350px;
   display: flex;
@@ -45,36 +58,37 @@ pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .
 pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content pn-marketweb-siteheader-unified-login::after {
   display: block;
   content: "";
-  height: 2px;
-  background: #f9f8f8;
   width: 100%;
+  height: 2px;
   margin-top: 2.4rem;
+  background: var(--login-dropdown-divider-background);
+}
+pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content span {
+  font-size: 1.4rem;
+  color: var(--login-dropdown-text-color);
 }
 pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content span::before {
   display: block;
   content: "";
-  height: 2px;
-  background: #f9f8f8;
   width: 100%;
+  height: 2px;
   margin-bottom: 2.4rem;
-}
-pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content span {
-  font-size: 1.4rem;
-  color: #2d2013;
+  background: var(--login-dropdown-divider-background);
 }
 pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content span a {
   text-decoration: none;
-  color: #005d92;
+  color: var(--login-dropdown-link-color);
 }
 pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content span a:hover {
-  text-decoration: underline;
+  text-decoration: var(--login-dropdown-link-hover-decoration);
 }
 pn-marketweb-siteheader-login pn-button-dropdown .pn-button-dropdown-container .pn-button-dropdown-content span * {
   margin-bottom: 0;
 }
-pn-marketweb-siteheader-login pn-button-dropdown {
-  display: none;
-}
 pn-marketweb-siteheader-login.hydrated pn-button-dropdown {
   display: block;
+}
+
+pn-marketweb-siteheader-login[appearance=dark] button:hover pn-icon svg path {
+  fill: var(--login-dark-icon-hover-fill);
 }

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.js

@@ -1,7 +1,7 @@
-import { h, Host } from "@stencil/core";
-import { MarketWebLoginManager } from "../../../globals/MarketWebLoginManager";
-import { state as headerState } from "./pn-marketweb-siteheader-store";
 import { user } from "pn-design-assets/pn-assets/icons.js";
+import { h, Host, } from "@stencil/core";
+import { MarketWebLoginManager, } from "../../../globals/MarketWebLoginManager";
+import { state as headerState } from "./pn-marketweb-siteheader-store";
 export class PnMarketwebSiteheaderLogin {
     constructor() {
         this.endpoint = '';
@@ -27,6 +27,7 @@ export class PnMarketwebSiteheaderLogin {
         this.showUnifiedLogin = false;
         this.checkUserLoggedInStateInterval = 0;
         this.environment = undefined;
+        this.appearance = 'light';
         this.loginLinks = undefined;
         this.toggleButtonText = this.loginDialog?.loginMenuLinkText ? this.loginDialog.loginMenuLinkText : '';
         this.username = this.fullname;
@@ -155,7 +156,7 @@ export class PnMarketwebSiteheaderLogin {
             hostElementAttribute.username = this.username;
             hostElementAttribute.loggedin = this.loggedin + '';
         }
-        return (h(Host, { ...hostElementAttribute }, h("pn-button-dropdown", { label: this.toggleButtonText, icon: user, appearance: "light", variant: "borderless", class: "siteheader-logindialog" }, this.showUnifiedLogin && !this.loggedin && (h("pn-marketweb-siteheader-unified-login", { loggedIn: this.loggedin, logInLabel: this.i18n.unifiedLoginButton, useMarketwebLogin: this.useMarketwebLogin, environment: this.environment })), this.loggedin && this.showProfileSelection ? (h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })) : (h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username, showUnifiedLogin: this.showUnifiedLogin })), !this.loggedin && this.loginDialog?.loginInfo && (h("span", { innerHTML: `${this.loginDialog.loginInfo}` })))));
+        return (h(Host, { ...hostElementAttribute }, h("pn-button-dropdown", { label: this.toggleButtonText, icon: user, appearance: this.appearance, variant: "borderless", class: "siteheader-logindialog" }, this.showUnifiedLogin && !this.loggedin && (h("pn-marketweb-siteheader-unified-login", { loggedIn: this.loggedin, logInLabel: this.i18n.unifiedLoginButton, useMarketwebLogin: this.useMarketwebLogin, environment: this.environment })), this.loggedin && this.showProfileSelection ? (h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })) : (h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username, showUnifiedLogin: this.showUnifiedLogin })), !this.loggedin && this.loginDialog?.loginInfo && (h("span", { innerHTML: `${this.loginDialog.loginInfo}` })))));
     }
     static get is() { return "pn-marketweb-siteheader-login"; }
     static get originalStyleUrls() {
@@ -393,6 +394,30 @@ export class PnMarketwebSiteheaderLogin {
                 "attribute": "environment",
                 "reflect": false
             },
+            "appearance": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "HeaderAppearance",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "HeaderAppearance": {
+                            "location": "import",
+                            "path": "../pn-marketweb-header/utils/header-theme",
+                            "id": "src/components/layout-components/pn-marketweb-header/utils/header-theme.ts::HeaderAppearance"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "appearance",
+                "reflect": true,
+                "defaultValue": "'light'"
+            },
             "useMarketwebLogin": {
                 "type": "boolean",
                 "mutable": false,