@postnord/pn-marketweb-components 4.2.4 → 4.3.0

package/collection/components/layout-components/pn-marketweb-header/mapper/pn-marketweb-header.mapper.js

@@ -0,0 +1,109 @@
+import { getLanguageOptions } from "../utils/header-language";
+import { prependHomeMenuItem } from "../utils/header-menu";
+import { buildMenuItemsForMode, extractToggleableMenuStructure, } from "../utils/header-toggle-menu";
+import { adjustLoginDialogUrls, adjustMenuItemUrls, } from "../utils/header-url";
+/**
+ * Maps backend header data into the internal renderable view model.
+ *
+ * This mapper is the normalization boundary between the backend header payload
+ * and the UI-facing header view model.
+ *
+ * Top-level menu interpretation:
+ * - all items except the last = switchable root menus
+ * - last item = shared/common root
+ *
+ * These semantics are inferred by position, not by stable backend identifiers.
+ *
+ * Responsibilities
+ * ----------------
+ * - normalize top-level backend payload sections
+ * - optionally adjust relative URLs against the site domain
+ * - detect whether the backend menu supports menu switching
+ * - preserve the raw normalized menu structure for the wrapper component
+ * - prepare a flat `menuItems` list for simpler rendering paths
+ *
+ * Important
+ * ---------
+ * - The switchable root items themselves are not intended to be rendered as
+ *   visible main navigation entries
+ * - Visible navigation is derived from:
+ *   - active root children
+ *   - plus shared/common root children
+ * - If only a shared/common root exists, its children are rendered flat
+ * - The wrapper component may choose either:
+ *   - `menuItems` for flat rendering
+ *   - or `rawMenuItems` + menu helpers for grouped rendering
+ */
+export function mapHeaderDataToViewModel(data, options) {
+    if (!data || typeof data !== 'object') {
+        return {
+            siteDefinition: null,
+            menuItems: [],
+            search: null,
+            siteSelector: null,
+            languageSelector: null,
+            languageOptions: [],
+            loginDialog: null,
+            homePageLink: '/',
+            hasMenuSwitching: false,
+            menuModeOptions: [],
+            defaultMenuMode: 0,
+            rawMenuItems: [],
+        };
+    }
+    const siteDefinition = data.sitedefinition ?? null;
+    /**
+     * Keep a normalized copy of the backend menu structure.
+     *
+     * This raw structure is preserved because the wrapper component may need the
+     * original top-level roots in order to:
+     * - switch active menu mode
+     * - render grouped navigation
+     * - resolve mode navigation targets
+     *
+     * Top-level semantics are positional:
+     * - all items except the last = switchable root menus
+     * - last item = shared/common root
+     */
+    const rawMenuItems = (data.mainMenu?.menuItems ?? []).map(item => options.siteDomainInUrls
+        ? adjustMenuItemUrls(item, siteDefinition, options.language)
+        : { ...item });
+    const toggleStructure = extractToggleableMenuStructure(rawMenuItems);
+    /**
+     * `menuItems` is kept as a flat convenience list for render paths that do
+     * not need to reason about root menus explicitly.
+     *
+     * This flat list contains:
+     * - active-mode primary items when switchable roots exist
+     * - plus shared/common items
+     *
+     * If only a shared/common root exists, its children are rendered flat.
+     */
+    let menuItems = buildMenuItemsForMode(toggleStructure, 0);
+    menuItems = prependHomeMenuItem(menuItems, options.i18n, siteDefinition?.url ?? '/', options.hideHomeMenuItem);
+    const search = {
+        ...(data.search ?? {}),
+        AutocompleteEndpoint: options.autocompleteEndpoint ?? '',
+    };
+    const siteSelector = data.siteSelectorViewModel ?? null;
+    const languageSelector = data.languageSelectorViewModel ?? null;
+    const languageOptions = getLanguageOptions(languageSelector);
+    const loginDialog = options.siteDomainInUrls
+        ? adjustLoginDialogUrls(data.loginViewModel ?? null, siteDefinition, options.language)
+        : data.loginViewModel ?? null;
+    return {
+        siteDefinition,
+        menuItems,
+        search,
+        siteSelector,
+        languageSelector,
+        languageOptions,
+        loginDialog,
+        homePageLink: siteDefinition?.url ?? document.location.hostname,
+        hasMenuSwitching: toggleStructure.hasMenuSwitching,
+        menuModeOptions: toggleStructure.menuModeOptions,
+        defaultMenuMode: 0,
+        rawMenuItems,
+    };
+}
+//# sourceMappingURL=pn-marketweb-header.mapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pn-marketweb-header.mapper.js","sourceRoot":"","sources":["../../../../../src/components/layout-components/pn-marketweb-header/mapper/pn-marketweb-header.mapper.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,8BAA8B,GACjC,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACH,qBAAqB,EACrB,kBAAkB,GACrB,MAAM,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,wBAAwB,CACpC,IAAsB,EACtB,OAA4B;IAE5B,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QACpC,OAAO;YACH,cAAc,EAAE,IAAI;YACpB,SAAS,EAAE,EAAE;YACb,MAAM,EAAE,IAAI;YACZ,YAAY,EAAE,IAAI;YAClB,gBAAgB,EAAE,IAAI;YACtB,eAAe,EAAE,EAAE;YACnB,WAAW,EAAE,IAAI;YACjB,YAAY,EAAE,GAAG;YACjB,gBAAgB,EAAE,KAAK;YACvB,eAAe,EAAE,EAAE;YACnB,eAAe,EAAE,CAAC;YAClB,YAAY,EAAE,EAAE;SACnB,CAAC;IACN,CAAC;IAED,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC;IAEnD;;;;;;;;;;;;OAYG;IACH,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,SAAS,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC7D,OAAO,CAAC,gBAAgB;QACpB,CAAC,CAAC,kBAAkB,CAAC,IAAI,EAAE,cAAc,EAAE,OAAO,CAAC,QAAQ,CAAC;QAC5D,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CACpB,CAAC;IAEF,MAAM,eAAe,GAAG,8BAA8B,CAAC,YAAY,CAAC,CAAC;IAErE;;;;;;;;;OASG;IACH,IAAI,SAAS,GAAG,qBAAqB,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC;IAE1D,SAAS,GAAG,mBAAmB,CAC3B,SAAS,EACT,OAAO,CAAC,IAAI,EACZ,cAAc,EAAE,GAAG,IAAI,GAAG,EAC1B,OAAO,CAAC,gBAAgB,CAC3B,CAAC;IAEF,MAAM,MAAM,GAAG;QACX,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC;QACtB,oBAAoB,EAAE,OAAO,CAAC,oBAAoB,IAAI,EAAE;KAC3D,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC;IACxD,MAAM,gBAAgB,GAAG,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC;IAChE,MAAM,eAAe,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,OAAO,CAAC,gBAAgB;QACxC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE,cAAc,EAAE,OAAO,CAAC,QAAQ,CAAC;QACtF,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC;IAElC,OAAO;QACH,cAAc;QACd,SAAS;QACT,MAAM;QACN,YAAY;QACZ,gBAAgB;QAChB,eAAe;QACf,WAAW;QACX,YAAY,EAAE,cAAc,EAAE,GAAG,IAAI,QAAQ,CAAC,QAAQ,CAAC,QAAQ;QAC/D,gBAAgB,EAAE,eAAe,CAAC,gBAAgB;QAClD,eAAe,EAAE,eAAe,CAAC,eAAe;QAChD,eAAe,EAAE,CAAC;QAClB,YAAY;KACf,CAAC;AACN,CAAC","sourcesContent":["import {\n    HeaderApiPayload,\n    HeaderMapperOptions,\n    HeaderViewModel,\n} from '../types/pn-marketweb-header.types';\nimport { getLanguageOptions } from '../utils/header-language';\nimport { prependHomeMenuItem } from '../utils/header-menu';\nimport {\n    buildMenuItemsForMode,\n    extractToggleableMenuStructure,\n} from '../utils/header-toggle-menu';\nimport {\n    adjustLoginDialogUrls,\n    adjustMenuItemUrls,\n} from '../utils/header-url';\n\n/**\n * Maps backend header data into the internal renderable view model.\n *\n * This mapper is the normalization boundary between the backend header payload\n * and the UI-facing header view model.\n *\n * Top-level menu interpretation:\n * - all items except the last = switchable root menus\n * - last item = shared/common root\n *\n * These semantics are inferred by position, not by stable backend identifiers.\n *\n * Responsibilities\n * ----------------\n * - normalize top-level backend payload sections\n * - optionally adjust relative URLs against the site domain\n * - detect whether the backend menu supports menu switching\n * - preserve the raw normalized menu structure for the wrapper component\n * - prepare a flat `menuItems` list for simpler rendering paths\n *\n * Important\n * ---------\n * - The switchable root items themselves are not intended to be rendered as\n *   visible main navigation entries\n * - Visible navigation is derived from:\n *   - active root children\n *   - plus shared/common root children\n * - If only a shared/common root exists, its children are rendered flat\n * - The wrapper component may choose either:\n *   - `menuItems` for flat rendering\n *   - or `rawMenuItems` + menu helpers for grouped rendering\n */\nexport function mapHeaderDataToViewModel(\n    data: HeaderApiPayload,\n    options: HeaderMapperOptions,\n): HeaderViewModel {\n    if (!data || typeof data !== 'object') {\n        return {\n            siteDefinition: null,\n            menuItems: [],\n            search: null,\n            siteSelector: null,\n            languageSelector: null,\n            languageOptions: [],\n            loginDialog: null,\n            homePageLink: '/',\n            hasMenuSwitching: false,\n            menuModeOptions: [],\n            defaultMenuMode: 0,\n            rawMenuItems: [],\n        };\n    }\n\n    const siteDefinition = data.sitedefinition ?? null;\n\n    /**\n     * Keep a normalized copy of the backend menu structure.\n     *\n     * This raw structure is preserved because the wrapper component may need the\n     * original top-level roots in order to:\n     * - switch active menu mode\n     * - render grouped navigation\n     * - resolve mode navigation targets\n     *\n     * Top-level semantics are positional:\n     * - all items except the last = switchable root menus\n     * - last item = shared/common root\n     */\n    const rawMenuItems = (data.mainMenu?.menuItems ?? []).map(item =>\n        options.siteDomainInUrls\n            ? adjustMenuItemUrls(item, siteDefinition, options.language)\n            : { ...item },\n    );\n\n    const toggleStructure = extractToggleableMenuStructure(rawMenuItems);\n\n    /**\n     * `menuItems` is kept as a flat convenience list for render paths that do\n     * not need to reason about root menus explicitly.\n     *\n     * This flat list contains:\n     * - active-mode primary items when switchable roots exist\n     * - plus shared/common items\n     *\n     * If only a shared/common root exists, its children are rendered flat.\n     */\n    let menuItems = buildMenuItemsForMode(toggleStructure, 0);\n\n    menuItems = prependHomeMenuItem(\n        menuItems,\n        options.i18n,\n        siteDefinition?.url ?? '/',\n        options.hideHomeMenuItem,\n    );\n\n    const search = {\n        ...(data.search ?? {}),\n        AutocompleteEndpoint: options.autocompleteEndpoint ?? '',\n    };\n\n    const siteSelector = data.siteSelectorViewModel ?? null;\n    const languageSelector = data.languageSelectorViewModel ?? null;\n    const languageOptions = getLanguageOptions(languageSelector);\n\n    const loginDialog = options.siteDomainInUrls\n        ? adjustLoginDialogUrls(data.loginViewModel ?? null, siteDefinition, options.language)\n        : data.loginViewModel ?? null;\n\n    return {\n        siteDefinition,\n        menuItems,\n        search,\n        siteSelector,\n        languageSelector,\n        languageOptions,\n        loginDialog,\n        homePageLink: siteDefinition?.url ?? document.location.hostname,\n        hasMenuSwitching: toggleStructure.hasMenuSwitching,\n        menuModeOptions: toggleStructure.menuModeOptions,\n        defaultMenuMode: 0,\n        rawMenuItems,\n    };\n}"]}

package/collection/components/layout-components/pn-marketweb-header/pn-marketweb-header.css

@@ -0,0 +1,225 @@
+pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
+  min-height: initial;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+pn-marketweb-header {
+  display: block;
+  background-color: var(--siteheader-bg, #ffffff);
+  color: var(--siteheader-text-color, #000000);
+  --siteheader-bg: #ffffff;
+  --siteheader-text-color: #000000;
+  --siteheader-shadow: 0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);
+  --siteheader-row-border-color: #f3f2f2;
+  --siteheader-row-padding-inline: 1.6rem;
+  --siteheader-row-min-height: 2em;
+  --siteheader-row-main-min-height: 5.6rem;
+  --siteheader-top-row-bg: transparent;
+  --siteheader-top-row-border-color: #f3f2f2;
+  --siteheader-top-text-color: #000000;
+  --siteheader-top-link-color: #000000;
+  --siteheader-top-icon-fill: currentColor;
+  --siteheader-main-row-bg-mobile: #ffffff;
+  --siteheader-main-row-bg-tablet: #ffffff;
+  --siteheader-logo-color: #00a0d6;
+  --siteheader-mainnav-top-position-mobile:3.5em;
+  --siteheader-mainnav-link-hover-effect-color: #e0f8ff;
+  --siteheader-button-font-weight: 400;
+  --siteheader-button-padding: 0.5rem;
+  --siteheader-button-radius: 0.8rem;
+  --siteheader-button-hover-bg: #e0f8ff;
+  --siteheader-button-hover-text-color: #000000;
+  --siteheader-toggle-color: #005d92;
+  --siteheader-toggle-hover-color: #000000;
+  --siteheader-toggle-active-color: #000000;
+  --siteheader-toggle-active-underline-color: #00a0d6;
+  --siteheader-mainnav-divider-color: #d3cecb;
+  --siteheader-search-max-width: 30rem;
+  --siteheader-search-min-width: 23.3rem;
+  --siteheader-search-input-bg: #ffffff;
+  --siteheader-search-input-color: #000000;
+  --siteheader-search-placeholder-color: #000000;
+  --siteheader-search-button-bg: #ffffff;
+  --siteheader-search-icon-fill: currentColor;
+}
+
+body[data-siteheader-menuopen=true] {
+  max-height: 100vh;
+  overflow: hidden;
+}
+
+@media screen and (min-width: 1024px) {
+  body[data-siteheader-menuopen=true] {
+    max-height: initial;
+    overflow: initial;
+  }
+}
+pn-marketweb-header header {
+  position: relative;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--siteheader-bg, #ffffff);
+  color: var(--siteheader-text-color, #000000);
+  box-shadow: var(--siteheader-shadow, 0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13));
+}
+pn-marketweb-header .siteheader-row {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  width: 100%;
+  min-height: var(--siteheader-row-min-height, 2em);
+  padding-inline: var(--siteheader-row-padding-inline, 1.6rem);
+}
+pn-marketweb-header .siteheader-row:not(:last-child) {
+  border-bottom: 0.1rem solid var(--siteheader-row-border-color, #f3f2f2);
+}
+pn-marketweb-header .siteheader-row-top {
+  display: none;
+}
+pn-marketweb-header .siteheader-row-main {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 100%;
+  min-height: var(--siteheader-row-main-min-height, 5.6rem);
+  padding-inline: var(--siteheader-row-padding-inline, 1.6rem);
+  overflow: visible;
+}
+pn-marketweb-header .siteheader-logocontainer {
+  display: flex;
+  align-items: center;
+  z-index: 1;
+}
+pn-marketweb-header .siteheader-logolink {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  max-height: 6.4rem;
+}
+pn-marketweb-header .siteheader-logolink:hover, pn-marketweb-header .siteheader-logolink:focus, pn-marketweb-header .siteheader-logolink:active {
+  box-shadow: none;
+  text-decoration: none;
+}
+pn-marketweb-header .siteheader-logo {
+  display: block;
+  color: var(--siteheader-logo-color);
+}
+pn-marketweb-header .siteheader-row > pn-marketweb-siteheader-search {
+  display: none;
+}
+pn-marketweb-header pn-spinner {
+  display: none;
+}
+pn-marketweb-header pn-button-dropdown:not(.hydrated) .pn-button-dropdown-container {
+  display: none;
+}
+
+pn-marketweb-header .siteheader-row pn-button button:hover {
+  color: var(--siteheader-button-hover-text-color, #000000);
+}
+pn-marketweb-header .siteheader-row pn-button button:hover .pn-button-bg,
+pn-marketweb-header .siteheader-row pn-button button:hover .pn-button-bg::after {
+  background-color: var(--siteheader-button-hover-bg, #e0f8ff);
+}
+pn-marketweb-header pn-button button {
+  font-weight: var(--siteheader-button-font-weight, 400) !important;
+  padding: var(--siteheader-button-padding, 0.5rem) !important;
+}
+pn-marketweb-header pn-button button .pn-button-bg::after {
+  border-radius: var(--siteheader-button-radius, 0.8rem) !important;
+}
+
+@media screen and (min-width: 769px) {
+  pn-marketweb-header {
+    --siteheader-row-min-height: 3.2em;
+    --siteheader-row-main-min-height: 3.2em;
+  }
+  pn-marketweb-header .siteheader-row {
+    justify-content: space-between;
+  }
+  pn-marketweb-header .siteheader-row-top {
+    display: flex;
+  }
+  pn-marketweb-header .siteheader-row > pn-marketweb-siteheader-search {
+    display: block;
+    width: 100%;
+    min-width: var(--siteheader-search-min-width, 23.3rem);
+    max-width: var(--siteheader-search-max-width, 30rem);
+  }
+}
+@media screen and (min-width: 1024px) {
+  pn-marketweb-header .siteheader-row-main {
+    margin-top: auto;
+    overflow: visible;
+  }
+}
+pn-marketweb-header[data-theme=business] {
+  --siteheader-bg: #0d234b;
+  --siteheader-text-color: #ffffff;
+  --siteheader-row-border-color: #0d234b;
+  --siteheader-top-row-bg: #0d234b;
+  --siteheader-top-row-border-color: #0d234b;
+  --siteheader-top-text-color: #ffffff;
+  --siteheader-top-link-color: #ffffff;
+  --siteheader-top-icon-fill: #ffffff;
+  --siteheader-main-row-bg-mobile: #0d234b;
+  --siteheader-main-row-bg-tablet: #ffffff;
+  --siteheader-button-hover-bg: #ffffff;
+  --siteheader-button-hover-text-color: #000000;
+  --siteheader-logo-color: #00a0d6;
+  --siteheader-cart-countindicator-color: #000000;
+  --siteheader-cart-icon-color: #ffffff;
+  --siteheader-cart-countindicator-background: #ffffff;
+  --siteheader-cart-link-color:#ffffff;
+  --siteheader-toggle-color: #ffffff;
+  --siteheader-toggle-hover-color: #ffffff;
+  --siteheader-toggle-active-color: #ffffff;
+  --siteheader-toggle-active-underline-color: #ffffff;
+  --siteheader-search-input-bg: #ffffff;
+  --siteheader-search-input-color: #0d234b;
+  --siteheader-search-placeholder-color: #0d234b;
+  --siteheader-search-button-bg: #ffffff;
+  --siteheader-search-icon-fill: #0d234b;
+  --siteheader-mainnav-list-heading-color: #000000;
+  --siteheader-mainnav-link-hover-effect-color: #0d234b;
+  --siteheader-mainnav-link-active-effect-color: #0d234b;
+  --siteheader-mainnav-level-2-border-top-left-radius-desktop: 0;
+  --siteheader-mainnav-level-2-border-top-right-radius-desktop: 0;
+  --siteheader-mainnav-link-active-desktop-color: #0d234b;
+  --siteheader-mainnav-link-level1-indicator-color: #0d234b;
+  --siteheader-mainnav-link-level1-indicator-active-color: #0d234b;
+  --siteheader-mainnav-link-level1-border-bottom: 0.1rem solid #e9e6e5;
+  --siteheader-mainnav-link-level2-border-bottom: 0.1rem solid #e9e6e5;
+  --siteheader-login-profileselection-heading-color: #000000;
+  --siteheader-login-profileselection-user-name-color: #000000;
+  --siteheader-login-profileselection-description-color: #5e554a;
+  --siteheader-login-profileselection-divider-background: #005d92;
+  --siteheader-login-profileselection-profileoption-link-background: #ffffff;
+  --siteheader-login-linklist-heading-color: #000000;
+}