@postnord/pn-marketweb-components 4.2.5 → 4.3.1

package/types/components/layout-components/pn-marketweb-header/pn-marketweb-header.stories.d.ts

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import type { HeaderApiEnvelope, HeaderMenuMode } from './types/pn-marketweb-header.types';
+/**
+ * Story args for pn-marketweb-header.
+ *
+ * This story:
+ * - renders the real pn-marketweb-header
+ * - can optionally intercept its backend fetch call
+ * - returns a mocked backend envelope when mocking is enabled
+ * - lets the actual header component render and control its own menu switcher
+ */
+interface StoryArgs {
+    market: string;
+    language: string;
+    initialActiveMenuMode: HeaderMenuMode;
+    menuThemes?: string;
+    environment: 'production' | 'preproduction' | 'integration' | 'localhost';
+    endpoint: string;
+    pageId: string;
+    siteid: string;
+    userToken: string;
+    userFullname: string;
+    userLoggedin: boolean;
+    hideSiteSelector: boolean;
+    hideHomeMenuItem: boolean;
+    hideLanguageSelector: boolean;
+    hideSearch: boolean;
+    hideLogin: boolean;
+    showProfileSelection: boolean;
+    showUnifiedLogin: boolean;
+    siteDomainInUrls: boolean;
+    autocompleteEndpoint: string;
+    sessionForward: boolean;
+    cache: boolean;
+    searchPlaceholder: string;
+    spaMode: boolean;
+    checkUserLoggedInStateInterval: number;
+    useMarketwebLogin: boolean;
+    navigateOnMenuToggle: boolean;
+    /**
+     * Mocked backend response envelope.
+     *
+     * This should match the real backend response shape.
+     */
+    mockedResponse: HeaderApiEnvelope;
+    /**
+     * When true, Storybook intercepts the header fetch and returns mockedResponse.
+     * When false, the real endpoint is used.
+     */
+    useMockedResponse: boolean;
+}
+declare const meta: Meta<StoryArgs>;
+export default meta;
+type Story = StoryObj<StoryArgs>;
+/**
+ * Baseline story:
+ * - 2 switchable roots
+ * - 1 shared root
+ */
+export declare const TwoModesWithShared: Story;
+/**
+ * Verifies that more than 2 switchable roots are supported.
+ */
+export declare const ThreeModesWithShared: Story;
+/**
+ * Only one mode root + shared.
+ * The header should not render the menu switcher.
+ */
+export declare const OneModeWithShared: Story;
+/**
+ * Shared-only structure.
+ * Useful for verifying fallback rendering when no switchable roots exist.
+ */
+export declare const SharedOnly: Story;
+/**
+ * Same baseline structure, but start on the second mode.
+ */
+export declare const StartOnSecondMode: Story;
+/**
+ * Same baseline structure, but allow real navigation hrefs on mode change.
+ * Mostly useful for checking rendered links rather than interacting in Storybook.
+ */
+export declare const NavigationEnabled: Story;
+/**
+ * Smaller layout story while still using mocked data.
+ */
+export declare const Minimal: Story;
+/**
+ * Menu items contain nested sub-menu items.
+ */
+export declare const NestedSubmenuItems: Story;
+/**
+ * Uses the real local CMS instead of Storybook fetch mocking.
+ */
+export declare const LocalCms: Story;
+/**
+ * Uses the real integration CMS instead of Storybook fetch mocking. //FIXME: getting cors-safe data at the moment
+ */
+export declare const IntegrationCms: Story;

package/types/components/layout-components/pn-marketweb-header/services/pn-marketweb-header.service.d.ts

@@ -0,0 +1,108 @@
+import { FetchHelper } from '../../../../globals/FetchHelper';
+import type { EnvironmentName, MarketName } from '../../../../services/pn-refined-marketweb-context/pn-refined-marketweb-context.types';
+import type { SiteHeaderI18N } from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';
+import type { HeaderApiPayload, HeaderContext, HeaderMenuMode, HeaderViewModel } from '../types/pn-marketweb-header.types';
+/**
+ * Input used when resolving/fetching/building header state.
+ */
+export interface LoadHeaderStateInput {
+    market?: MarketName | null;
+    language?: string | null;
+    environment?: EnvironmentName | null;
+    endpoint?: string | null;
+    pageId?: string;
+    cache?: boolean;
+    hideHomeMenuItem: boolean;
+    siteDomainInUrls: boolean;
+    autocompleteEndpoint: string;
+    searchPlaceholder: string;
+}
+/**
+ * Result returned from service orchestration methods.
+ */
+export interface HeaderStateResult {
+    context: HeaderContext;
+    rawHeaderData: HeaderApiPayload | null;
+    vm: HeaderViewModel | null;
+    i18n: SiteHeaderI18N;
+    status: 'ready' | 'error';
+    /**
+     * The currently active menu mode used by the wrapper component.
+     *
+     * This is preserved by the service during remaps, but the effective initial
+     * value is resolved by the component layer.
+     */
+    activeMenuMode: HeaderMenuMode;
+}
+/**
+ * Service responsible for:
+ * - resolving the effective header context
+ * - building the fetch URL for the header endpoint
+ * - loading header data from the backend
+ * - mapping backend data into a renderable header state
+ *
+ * This service uses the refined context service as the source of truth
+ * for market/language/environment resolution.
+ */
+export declare class PnMarketwebHeaderService {
+    private fetchHelper;
+    private href;
+    private doc;
+    /**
+     * Fixed backend path for loading header data.
+     * This is appended to the resolved endpoint domain.
+     */
+    private endpointPath;
+    constructor(fetchHelper: FetchHelper, href?: string, doc?: Document);
+    /**
+     * Resolves the effective header context.
+     *
+     * What it does:
+     * - uses the RefinedMarketWebContextService to resolve context from the current URL/document
+     * - lets explicit input values override resolved values when provided
+     * - resolves endpoint from environment + market when endpoint is not explicitly passed in
+     * - keeps pageId as part of the final header request context
+     */
+    private resolveContext;
+    /**
+     * Builds the final request URL used to fetch header JSON.
+     *
+     * What it does:
+     * - removes a trailing slash from the endpoint base if needed
+     * - appends the fixed header endpoint path
+     * - adds query parameters for market, language and current page
+     */
+    private buildFetchUrl;
+    /**
+     * Fetches header data from the backend.
+     *
+     * Returns null when required context is missing.
+     */
+    private fetchHeaderData;
+    /**
+     * Builds i18n for the current language + presentation overrides.
+     */
+    private resolveI18n;
+    /**
+     * Maps raw header data into the current UI view model.
+     */
+    private mapViewModel;
+    /**
+     * Resolves context, fetches backend data and builds the final header state.
+     */
+    loadHeaderState(input: LoadHeaderStateInput): Promise<HeaderStateResult>;
+    /**
+     * Rebuilds the UI state from already-fetched raw backend data.
+     * Use this when presentation-only inputs change and a refetch is not needed.
+     */
+    remapHeaderState(input: {
+        context: HeaderContext;
+        rawHeaderData: HeaderApiPayload | null;
+        language?: string | null;
+        hideHomeMenuItem: boolean;
+        siteDomainInUrls: boolean;
+        autocompleteEndpoint: string;
+        searchPlaceholder: string;
+        currentActiveMenuMode: HeaderMenuMode;
+    }): HeaderStateResult;
+}

package/types/components/layout-components/pn-marketweb-header/types/pn-marketweb-header.types.d.ts

@@ -0,0 +1,103 @@
+import { EnvironmentName, MarketName } from '../../../../services/pn-refined-marketweb-context/pn-refined-marketweb-context.types';
+import { LanguageSelector, LanguageSelectorItem, LoginDialog, MenuItem, MenuSiteDefinition, SiteHeaderI18N, SiteHeaderSearch, SiteSelector } from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';
+export type HeaderMenuMode = number;
+export interface HeaderMenuModeOption {
+    index: number;
+    label: string;
+    href?: string;
+    root: MenuItem;
+}
+export interface HeaderMenuStructure {
+    hasMenuSwitching: boolean;
+    modeRoots: MenuItem[];
+    menuModeOptions: HeaderMenuModeOption[];
+    sharedRoot: MenuItem | null;
+    sharedItems: MenuItem[];
+}
+export interface HeaderMenuGroups {
+    primaryItems: MenuItem[];
+    sharedItems: MenuItem[];
+}
+/**
+ * Resolved runtime context used when loading header data.
+ * These values may come from explicit props, URL parsing, or environment resolution.
+ */
+export interface HeaderContext {
+    market: MarketName;
+    language: string;
+    environment: EnvironmentName;
+    endpoint: string;
+    pageId?: string;
+}
+export interface HeaderApiPayload {
+    sitedefinition: MenuSiteDefinition;
+    search: SiteHeaderSearch;
+    languageSelectorViewModel: LanguageSelector | null;
+    siteSelectorViewModel: SiteSelector | null;
+    loginViewModel: LoginDialog | null;
+    mainMenu: {
+        menuItems: MenuItem[];
+    };
+}
+/**
+ * The raw API response shape returned by /api/navigation/header.
+ * This stays close to the backend structure.
+ */
+export interface HeaderApiEnvelope {
+    value: HeaderApiPayload;
+    formatters?: unknown[];
+    contentTypes?: unknown[];
+    declaredType?: unknown;
+    statusCode?: number;
+}
+export interface HeaderViewModel {
+    siteDefinition: MenuSiteDefinition | null;
+    menuItems: MenuItem[];
+    search: SiteHeaderSearch | null;
+    siteSelector: SiteSelector | null;
+    languageSelector: LanguageSelector | null;
+    languageOptions: LanguageSelectorItem[];
+    loginDialog: LoginDialog | null;
+    homePageLink: string;
+    /**
+     * Whether the fetched structure supports switching between multiple top-level menu roots.
+     *
+     * When true:
+     * - all top-level menu items except the last are treated as switchable roots
+     * - the last top-level item is treated as the shared/common root
+     */
+    hasMenuSwitching: boolean;
+    /**
+     * Visible labels for the toggle component.
+     */
+    menuModeOptions: HeaderMenuModeOption[];
+    /**
+     * Default active menu mode index.
+     *
+     * This index refers to `menuModeOptions` and the corresponding switchable
+     * top-level root menu.
+     */
+    defaultMenuMode: number;
+    /**
+     * Original normalized top-level menu structure from the backend.
+     *
+     * Semantics:
+     * - all items except the last are switchable root menus
+     * - the last item is the shared/common root
+     *
+     * This is preserved so the wrapper can rebuild visible menu items when the
+     * active menu mode changes.
+     */
+    rawMenuItems: MenuItem[];
+}
+/**
+ * Options used when mapping raw API data into a renderable view model.
+ * These mostly come from component props or derived i18n values.
+ */
+export interface HeaderMapperOptions {
+    language: string;
+    hideHomeMenuItem: boolean;
+    siteDomainInUrls: boolean;
+    autocompleteEndpoint?: string;
+    i18n: SiteHeaderI18N;
+}

package/types/components/layout-components/pn-marketweb-header/utils/header-i18n.d.ts

@@ -0,0 +1,16 @@
+import { SiteHeaderI18N } from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';
+/**
+ * Safe fallback i18n object used before translations have been resolved,
+ * or if a language is missing from the translation table.
+ */
+export declare const defaultHeaderI18n: SiteHeaderI18N;
+/**
+ * Resolves the i18n object for the current language and applies overrides.
+ *
+ * What it does:
+ * - Looks up translation values for the selected language
+ * - Falls back to a safe default object if the language is missing
+ * - Allows the search placeholder to be overridden by a prop
+ * - Ensures "home" always has a non-empty fallback value
+ */
+export declare function resolveHeaderTranslations(language?: string, searchPlaceholder?: string): SiteHeaderI18N;

package/types/components/layout-components/pn-marketweb-header/utils/header-language.d.ts

@@ -0,0 +1,20 @@
+import { LanguageSelector, LanguageSelectorItem, MenuSiteDefinition } from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';
+/**
+ * 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
+ */
+export declare function getLanguageOptions(languageSelector: LanguageSelector | null): LanguageSelectorItem[];
+/**
+ * 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
+ */
+export declare function getLanguageVersionUrl(item: LanguageSelectorItem, siteDefinition: MenuSiteDefinition | null, spaMode: boolean): string | null;

package/types/components/layout-components/pn-marketweb-header/utils/header-menu.d.ts

@@ -0,0 +1,16 @@
+import { MenuItem, PromotedMenuItem, SiteHeaderI18N } from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';
+/**
+ * Adds a Home item at the beginning of the main menu when needed.
+ *
+ * What it does:
+ * - Returns the input untouched when hideHomeMenuItem is true
+ * - Avoids adding a duplicate Home item if one already exists first in the list
+ * - Otherwise prepends a synthetic Home item using the translated label
+ */
+export declare function prependHomeMenuItem(items: MenuItem[], i18n: SiteHeaderI18N, homeUrl: string, hideHomeMenuItem: boolean): MenuItem[];
+/**
+ * Creates a stable-ish tracking id for promoted menu items.
+ *
+ * This mirrors the old wrapper behavior and is used when rendering promoted links.
+ */
+export declare function promotedItemId(item: PromotedMenuItem): string;

package/types/components/layout-components/pn-marketweb-header/utils/header-theme.d.ts

@@ -0,0 +1,6 @@
+import type { HeaderMenuModeOption } from '../types/pn-marketweb-header.types';
+export type HeaderTheme = 'business' | 'private';
+export type HeaderAppearance = 'light' | 'dark';
+export declare function normalizeHeaderTheme(theme: HeaderTheme): HeaderTheme;
+export declare function getAppearanceForTheme(theme: HeaderTheme): HeaderAppearance;
+export declare function resolveHeaderMenuThemes(menuThemes: string | undefined, menuModeOptions: HeaderMenuModeOption[] | undefined): HeaderTheme[];

package/types/components/layout-components/pn-marketweb-header/utils/header-toggle-menu.d.ts

@@ -0,0 +1,49 @@
+import type { MenuItem } from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';
+import type { HeaderMenuGroups, HeaderMenuMode, HeaderMenuStructure } from '../types/pn-marketweb-header.types';
+/**
+ * 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 declare function extractToggleableMenuStructure(menuItems: MenuItem[]): HeaderMenuStructure;
+/**
+ * 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 declare function getToggleRootForMode(structure: HeaderMenuStructure, mode: HeaderMenuMode): MenuItem | null;
+/**
+ * Returns the active root item for the selected mode directly from raw menu items.
+ */
+export declare function getToggleRootForMenuItems(menuItems: MenuItem[], mode: HeaderMenuMode): MenuItem | null;
+/**
+ * Returns grouped visible items for rendering.
+ *
+ * - primaryItems = children of the active root
+ * - sharedItems = children of the shared/common root
+ */
+export declare function getMenuGroupsForMode(structure: HeaderMenuStructure, mode: HeaderMenuMode): HeaderMenuGroups;
+/**
+ * Returns grouped visible items directly from raw menu items.
+ */
+export declare function getVisibleMenuGroupsForMode(menuItems: MenuItem[], mode: HeaderMenuMode): HeaderMenuGroups;
+/**
+ * Builds a flat list of visible menu items for the selected mode.
+ *
+ * Useful for render paths that do not need grouped rendering.
+ */
+export declare function buildMenuItemsForMode(structure: HeaderMenuStructure, mode: HeaderMenuMode): MenuItem[];

package/types/components/layout-components/pn-marketweb-header/utils/header-toggle-menu.storage.d.ts

@@ -0,0 +1,25 @@
+import type { HeaderMenuMode } from '../types/pn-marketweb-header.types';
+/**
+ * Returns the previously selected menu mode from localStorage.
+ *
+ * Returns null if:
+ * - nothing is stored
+ * - value is invalid
+ * - storage is unavailable
+ */
+export declare function getStoredHeaderMenuMode(): HeaderMenuMode | null;
+/**
+ * Persists the selected menu mode in localStorage.
+ *
+ * Storage failures are intentionally ignored.
+ */
+export declare function storeHeaderMenuMode(mode: HeaderMenuMode): void;
+/**
+ * Resolves the effective initial menu mode.
+ *
+ * Priority:
+ * 1. Stored user preference
+ * 2. Server-provided initial mode
+ * 3. Fallback to first mode (index 0)
+ */
+export declare function resolveInitialHeaderMenuMode(hasMenuSwitching: boolean, initialActiveMenuMode?: HeaderMenuMode | null): HeaderMenuMode;

package/types/components/layout-components/pn-marketweb-header/utils/header-url.d.ts

@@ -0,0 +1,41 @@
+import { LoginDialog, MenuItem, MenuSiteDefinition } from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';
+/**
+ * Removes duplicated language segments from generated URLs.
+ *
+ * Example:
+ * /sv/sv/page -> /sv/page
+ *
+ * This protects against incorrectly concatenated site-domain-based URLs.
+ */
+export declare function removeDoubleLanguage(url: string, language: string): string;
+/**
+ * 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 declare function adjustHref(href: string, siteDefinition: MenuSiteDefinition, language: string): string;
+/**
+ * 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 declare function adjustMenuItemUrls(item: MenuItem, siteDefinition: MenuSiteDefinition, language: string): MenuItem;
+/**
+ * Adjusts login dialog links so that relative URLs are resolved against
+ * the active site domain.
+ *
+ * This is used when siteDomainInUrls is enabled.
+ */
+export declare function adjustLoginDialogUrls(loginDialog: LoginDialog | null, siteDefinition: MenuSiteDefinition, language: string): LoginDialog | null;
+/**
+ * Navigates to the provided href when available.
+ */
+export declare function navigateToHref(href?: string | null): void;
+/**
+ * Navigates to a menu item's href when available.
+ */
+export declare function navigateToMenuItem(item: MenuItem | null): void;

package/types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+import { HeaderAppearance } from '../pn-marketweb-header/utils/header-theme';
 import { LoginDialog, SiteHeaderI18N } from './pn-marketweb-siteheader-types';
 export declare class PnMarketwebSiteheaderLogin {
     hostElement: HTMLElement;
@@ -20,6 +21,7 @@ export declare class PnMarketwebSiteheaderLogin {
     /** Continiously check if a user is logged in **/
     checkUserLoggedInStateInterval: number;
     environment?: string;
+    appearance?: HeaderAppearance;
     loginLinks: [];
     toggleButtonText: string;
     username: string;

package/types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-types.d.ts

@@ -96,6 +96,7 @@ export interface MenuItem {
     promotedMenuItems: PromotedMenuItem[];
     linkTarget: string;
     trackingId: string;
+    toggleTheme?: string;
 }
 export interface PromotedMenuItem {
     linkText: string;

package/types/components/navigation/pn-language-selector/pn-language-selector.d.ts

@@ -3,6 +3,7 @@ import { LanguageSelectori18n, LanguageSelectorOption } from './pn-language-sele
 export declare class PnlanguageSelector {
     hostElement: HTMLElement;
     value: string;
+    appearance?: 'light' | 'dark';
     selectedLanguageName: string;
     options: LanguageSelectorOption[];
     i18n: LanguageSelectori18n;

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

@@ -0,0 +1,25 @@
+import { HeaderMenuMode, HeaderMenuModeOption } from "../../layout-components/pn-marketweb-header/types/pn-marketweb-header.types";
+import { EventEmitter } from '../../../stencil-public-runtime';
+/**
+ * Small segmented toggle used for switching between Private and Business menu modes.
+ *
+ * Responsibilities:
+ * - render two selectable links
+ * - reflect current active mode
+ * - emit the selected mode when changed
+ *
+ * This component is intentionally presentation-only.
+ * The parent header decides what switching mode actually means.
+ */
+export declare class PnMarketwebHeaderToggle {
+    options: HeaderMenuModeOption[];
+    /** Accessible label for the toggle group. */
+    ariaLabel: string;
+    /** Currently active mode. */
+    value: HeaderMenuMode;
+    /** Emitted whenever the user selects a different mode. */
+    toggleChange: EventEmitter<HeaderMenuMode>;
+    private onClick;
+    private renderOption;
+    render(): any;
+}

package/types/components/navigation/pn-site-selector/pn-site-selector.d.ts

@@ -5,6 +5,7 @@ export declare class PnSiteSelector {
     heading: string;
     /** Specifies which language we want to show navigation in (sv,da,fi,no,en) */
     language: string;
+    appearance?: 'light' | 'dark';
     i18n: SiteSelectori18n;
     componentWillLoad(): void;
     setLanguage(): void;

package/types/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.d.ts

@@ -21,7 +21,7 @@ export declare class PnProxioPricegroup {
     getPriceString(product: ProxioProduct): string;
     getProductLink(product: ProxioProduct, productWeightGroupList: ProductWeightGroupListItem[]): string;
     isActive(index: number): boolean;
-    getCarouselPosition(index: number): 1 | 0 | 2 | -1 | -2 | "outside";
+    getCarouselPosition(index: number): 0 | 1 | 2 | -1 | -2 | "outside";
     getContainerPosition(): "default" | "end50" | "end75" | "start75" | "start50";
     render(): any;
 }