@postnord/pn-marketweb-components 4.2.4 → 4.3.0

package/collection/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-main-row.js

@@ -0,0 +1,658 @@
+import { h, } from "@stencil/core";
+import { promotedItemId } from "../utils/header-menu";
+import { renderHeaderLanguageSelector, renderHeaderLogin, renderHeaderLogo, renderHeaderMenuSwitcher, renderHeaderSiteSelector, } from "./shared/pn-marketweb-header-shared";
+export class PnMarketwebHeaderMainRow {
+    constructor() {
+        this.vm = undefined;
+        this.i18n = undefined;
+        this.market = undefined;
+        this.language = undefined;
+        this.siteid = undefined;
+        this.hideSearch = undefined;
+        this.hideLogin = undefined;
+        this.hideLanguageSelector = undefined;
+        this.hideSiteSelector = undefined;
+        this.minimizeSearch = undefined;
+        this.activeMenuMode = undefined;
+        this.navigateOnMenuToggle = undefined;
+        this.primaryItems = undefined;
+        this.sharedItems = undefined;
+        this.showMenuDivider = undefined;
+        this.userToken = undefined;
+        this.userFullname = undefined;
+        this.userLoggedin = undefined;
+        this.endpoint = undefined;
+        this.environment = undefined;
+        this.showProfileSelection = undefined;
+        this.showUnifiedLogin = undefined;
+        this.checkUserLoggedInStateInterval = undefined;
+        this.useMarketwebLogin = undefined;
+        this.spaMode = undefined;
+        this.theme = undefined;
+        this.logoUrl = undefined;
+        this.menuToggleChangeHandler = undefined;
+        this.mainNavRefHandler = undefined;
+        this.adjustSiteSelectorUrl = undefined;
+    }
+    renderMenuLink(item) {
+        return (h("pn-mainnav-link", { name: item.name, href: item.href, itemid: item.id, target: item.linkTarget ?? '_self', linkid: item.trackingId }, ((item.promotedMenuItems && item.promotedMenuItems.length > 0) || (item.children && item.children.length > 0)) && (h("pn-mainnav-level", { label: item.name }, !!item.children?.length && (h("pn-mainnav-list", { heading: item.navigationHeading ?? '' }, item.children.map(childitem => (h("pn-mainnav-link", { name: childitem.name, href: childitem.href, target: childitem.linkTarget ?? '_self', linkid: childitem.trackingId }))))), !!item.promotedMenuItems?.length && (h("pn-mainnav-list", { heading: item.promotedMenuItemsHeader }, item.promotedMenuItems.map((childitem) => (h("pn-mainnav-link", { href: childitem.href, name: childitem.linkText, target: childitem.openInNewWindow ? '_blank' : '_self', linkid: promotedItemId(childitem) + item.id })))))))));
+    }
+    renderMenuLinks(items) {
+        return items.map(item => this.renderMenuLink(item));
+    }
+    renderGroupedMenuLists(primaryItems, sharedItems) {
+        const hasPrimaryItems = primaryItems.length > 0;
+        const hasSharedItems = sharedItems.length > 0;
+        const hasDivider = hasPrimaryItems && hasSharedItems;
+        return h("div", { class: "siteheader-mainnav-groups" }, hasPrimaryItems ? (h("pn-mainnav-list", { class: "siteheader-mainnav-list siteheader-mainnav-list-primary" }, this.renderMenuLinks(primaryItems))) : null, hasDivider ? (h("div", { class: "siteheader-mainnav-divider", "aria-hidden": "true" })) : null, hasSharedItems ? (h("pn-mainnav-list", { class: "siteheader-mainnav-list siteheader-mainnav-list-shared" }, this.renderMenuLinks(sharedItems))) : null);
+    }
+    renderMenuFooter(appearance) {
+        return (h("div", { slot: "footer", class: "siteheader-menu-footer" }, h("slot", { name: "menu-footer-cta" }), renderHeaderLogin({
+            vm: this.vm,
+            hideLogin: this.hideLogin,
+            userToken: this.userToken,
+            userFullname: this.userFullname,
+            userLoggedin: this.userLoggedin,
+            endpoint: this.endpoint,
+            environment: this.environment,
+            i18n: this.i18n,
+            showProfileSelection: this.showProfileSelection,
+            showUnifiedLogin: this.showUnifiedLogin,
+            checkUserLoggedInStateInterval: this.checkUserLoggedInStateInterval,
+            useMarketwebLogin: this.useMarketwebLogin,
+            appearance
+        }), renderHeaderLanguageSelector({
+            vm: this.vm,
+            hideLanguageSelector: this.hideLanguageSelector,
+            language: this.language,
+            spaMode: this.spaMode,
+            appearance
+        }), renderHeaderSiteSelector({
+            vm: this.vm,
+            hideSiteSelector: this.hideSiteSelector,
+            language: this.language,
+            appearance,
+            adjustSiteSelectorUrl: this.adjustSiteSelectorUrl,
+        })));
+    }
+    render() {
+        // main row's subcomponent have light appearance even if business theme, since white bg
+        const appearance = 'light';
+        return (h("div", { key: 'b19e8188f8776a417d92b422e97af169073992d7', class: "siteheader-row siteheader-row-main" }, h("div", { key: 'ee3206293821a283e0db7231fb88f8c7c4ccaf9f', class: "siteheader-mobile-left" }, h("div", { key: 'f02ae43733ecbb7d9a58f2f2faa0422e67ab398f', class: "siteheader-mobile-logo" }, renderHeaderLogo({
+            homePageLink: this.logoUrl, //this.vm.homePageLink,
+            homeLabel: this.i18n.home,
+        })), this.vm.hasMenuSwitching && (h("div", { key: '7559d93cf6e65dd98d943cc0bd047597486c7562', class: "siteheader-mobile-menu-toggle" }, renderHeaderMenuSwitcher({
+            vm: this.vm,
+            activeMenuMode: this.activeMenuMode,
+            navigateOnMenuToggle: this.navigateOnMenuToggle,
+            onMenuToggleChange: this.menuToggleChangeHandler,
+        })))), h("div", { key: '25864e4241677776b8fffe41ba24cce1c3b5bc8f', class: "siteheader-mainnav-middle" }, h("pn-marketweb-siteheader-search", { key: '1ff81b6b404c473ed028a01115780f1837f78ec2', language: this.language, siteid: this.siteid, primary: true, search: this.vm.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n }), h("slot", { key: 'd650ca23a0fa02d7e4dacccea5020743a509c782', name: "header-bottom-button" })), h("div", { key: 'b72af48b90c18d82a80469297327518af35c142c', class: "siteheader-mainnav-menu" }, h("div", { key: 'fbcd12fab8d69e0181fcc81185dca22fd502df7d', class: "siteheader-menu" }, h("pn-mainnav", { key: '3980090469bd133fabc2576ac41a12ab98f3cbc5', ref: el => {
+                this.mainNavRefHandler(el);
+            }, market: this.market, language: this.language, onMenuOpenChange: e => {
+                document.body.setAttribute('data-siteheader-menuopen', String(e.detail));
+            } }, h("pn-mainnav-level", { key: '2c608f41f227e445808121d53abab276459cedc8' }, this.showMenuDivider ? (this.renderGroupedMenuLists(this.primaryItems, this.sharedItems)) : (h("pn-mainnav-list", null, this.renderMenuLinks(this.primaryItems))), this.renderMenuFooter(appearance), h("div", { key: 'f41ca4efbce5a71be65381199efb81f491c0ee0d', slot: "top", class: "siteheader-menu-top" }, h("pn-marketweb-siteheader-search", { key: 'bf04f67936996b8151a6ba14c64a5a7212d90ee4', language: this.language, siteid: this.siteid, search: this.vm.search, "hide-search": this.hideSearch, i18n: this.i18n }))))))));
+    }
+    static get is() { return "pn-marketweb-header-main-row"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-marketweb-header-main-row.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-marketweb-header-main-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "vm": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeaderViewModel",
+                    "resolved": "HeaderViewModel",
+                    "references": {
+                        "HeaderViewModel": {
+                            "location": "import",
+                            "path": "../types/pn-marketweb-header.types",
+                            "id": "src/components/layout-components/pn-marketweb-header/types/pn-marketweb-header.types.ts::HeaderViewModel"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "i18n": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SiteHeaderI18N",
+                    "resolved": "SiteHeaderI18N",
+                    "references": {
+                        "SiteHeaderI18N": {
+                            "location": "import",
+                            "path": "../../pn-marketweb-siteheader/pn-marketweb-siteheader-types",
+                            "id": "src/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-types.ts::SiteHeaderI18N"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "market": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "market",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": false
+            },
+            "siteid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "siteid",
+                "reflect": false
+            },
+            "hideSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-search",
+                "reflect": false
+            },
+            "hideLogin": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-login",
+                "reflect": false
+            },
+            "hideLanguageSelector": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-language-selector",
+                "reflect": false
+            },
+            "hideSiteSelector": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-site-selector",
+                "reflect": false
+            },
+            "minimizeSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "minimize-search",
+                "reflect": false
+            },
+            "activeMenuMode": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeaderMenuMode",
+                    "resolved": "number",
+                    "references": {
+                        "HeaderMenuMode": {
+                            "location": "import",
+                            "path": "../types/pn-marketweb-header.types",
+                            "id": "src/components/layout-components/pn-marketweb-header/types/pn-marketweb-header.types.ts::HeaderMenuMode"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active-menu-mode",
+                "reflect": false
+            },
+            "navigateOnMenuToggle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "navigate-on-menu-toggle",
+                "reflect": false
+            },
+            "primaryItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MenuItem[]",
+                    "resolved": "MenuItem[]",
+                    "references": {
+                        "MenuItem": {
+                            "location": "import",
+                            "path": "../../pn-marketweb-siteheader/pn-marketweb-siteheader-types",
+                            "id": "src/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-types.ts::MenuItem"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "sharedItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MenuItem[]",
+                    "resolved": "MenuItem[]",
+                    "references": {
+                        "MenuItem": {
+                            "location": "import",
+                            "path": "../../pn-marketweb-siteheader/pn-marketweb-siteheader-types",
+                            "id": "src/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-types.ts::MenuItem"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "showMenuDivider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-menu-divider",
+                "reflect": false
+            },
+            "userToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "user-token",
+                "reflect": false
+            },
+            "userFullname": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "user-fullname",
+                "reflect": false
+            },
+            "userLoggedin": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "user-loggedin",
+                "reflect": false
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint",
+                "reflect": false
+            },
+            "environment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "environment",
+                "reflect": false
+            },
+            "showProfileSelection": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-profile-selection",
+                "reflect": false
+            },
+            "showUnifiedLogin": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-unified-login",
+                "reflect": false
+            },
+            "checkUserLoggedInStateInterval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "check-user-logged-in-state-interval",
+                "reflect": false
+            },
+            "useMarketwebLogin": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "use-marketweb-login",
+                "reflect": false
+            },
+            "spaMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "spa-mode",
+                "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeaderTheme",
+                    "resolved": "\"business\" | \"private\"",
+                    "references": {
+                        "HeaderTheme": {
+                            "location": "import",
+                            "path": "../utils/header-theme",
+                            "id": "src/components/layout-components/pn-marketweb-header/utils/header-theme.ts::HeaderTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "theme",
+                "reflect": false
+            },
+            "logoUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "logo-url",
+                "reflect": false
+            },
+            "menuToggleChangeHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(e: CustomEvent<HeaderMenuMode>) => void",
+                    "resolved": "(e: CustomEvent<number>) => void",
+                    "references": {
+                        "CustomEvent": {
+                            "location": "global",
+                            "id": "global::CustomEvent"
+                        },
+                        "HeaderMenuMode": {
+                            "location": "import",
+                            "path": "../types/pn-marketweb-header.types",
+                            "id": "src/components/layout-components/pn-marketweb-header/types/pn-marketweb-header.types.ts::HeaderMenuMode"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "mainNavRefHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(el: HTMLElement | undefined) => void",
+                    "resolved": "(el: HTMLElement) => void",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "adjustSiteSelectorUrl": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(href: string) => string",
+                    "resolved": "(href: string) => string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=pn-marketweb-header-main-row.js.map