@postnord/pn-marketweb-components 4.2.5 → 4.3.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"pn-marketweb-header-main-row.js","sourceRoot":"","sources":["../../../../../src/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-main-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    h,\n    Prop,\n} from '@stencil/core';\n\nimport type {\n    MenuItem,\n    PromotedMenuItem,\n    SiteHeaderI18N,\n} from '../../pn-marketweb-siteheader/pn-marketweb-siteheader-types';\nimport type {\n    HeaderMenuMode,\n    HeaderViewModel,\n} from '../types/pn-marketweb-header.types';\nimport { promotedItemId } from '../utils/header-menu';\nimport {\n    HeaderAppearance,\n    HeaderTheme,\n} from '../utils/header-theme';\nimport {\n    renderHeaderLanguageSelector,\n    renderHeaderLogin,\n    renderHeaderLogo,\n    renderHeaderMenuSwitcher,\n    renderHeaderSiteSelector,\n} from './shared/pn-marketweb-header-shared';\n\n@Component({\n    tag: 'pn-marketweb-header-main-row',\n    styleUrl: 'pn-marketweb-header-main-row.scss',\n})\nexport class PnMarketwebHeaderMainRow {\n    @Prop() vm!: HeaderViewModel;\n    @Prop() i18n!: SiteHeaderI18N;\n\n    @Prop() market?: string;\n    @Prop() language?: string;\n    @Prop() siteid?: string;\n\n    @Prop() hideSearch!: boolean;\n    @Prop() hideLogin!: boolean;\n    @Prop() hideLanguageSelector!: boolean;\n    @Prop() hideSiteSelector!: boolean;\n\n    @Prop() minimizeSearch!: boolean;\n\n    @Prop() activeMenuMode!: HeaderMenuMode;\n    @Prop() navigateOnMenuToggle!: boolean;\n\n    @Prop() primaryItems!: MenuItem[];\n    @Prop() sharedItems!: MenuItem[];\n    @Prop() showMenuDivider!: boolean;\n\n    @Prop() userToken!: string;\n    @Prop() userFullname!: string;\n    @Prop() userLoggedin!: boolean;\n    @Prop() endpoint?: string;\n    @Prop() environment?: string;\n    @Prop() showProfileSelection!: boolean;\n    @Prop() showUnifiedLogin!: boolean;\n    @Prop() checkUserLoggedInStateInterval!: number;\n    @Prop() useMarketwebLogin!: boolean;\n    @Prop() spaMode!: boolean;\n\n    @Prop() theme: HeaderTheme;\n    @Prop() logoUrl:string;\n\n    @Prop() menuToggleChangeHandler!: (e: CustomEvent<HeaderMenuMode>) => void;\n    @Prop() mainNavRefHandler!: (el: HTMLElement | undefined) => void;\n    @Prop() adjustSiteSelectorUrl!: (href: string) => string;\n\n    private renderMenuLink(item: MenuItem) {\n        return (\n            <pn-mainnav-link\n                name={item.name}\n                href={item.href}\n                itemid={item.id}\n                target={item.linkTarget ?? '_self'}\n                linkid={item.trackingId}\n            >\n                {((item.promotedMenuItems && item.promotedMenuItems.length > 0) || (item.children && item.children.length > 0)) && (\n                    <pn-mainnav-level label={item.name}>\n                        {!!item.children?.length && (\n                            <pn-mainnav-list heading={item.navigationHeading ?? ''}>\n                                {item.children.map(childitem => (\n                                    <pn-mainnav-link\n                                        name={childitem.name}\n                                        href={childitem.href}\n                                        target={childitem.linkTarget ?? '_self'}\n                                        linkid={childitem.trackingId}\n                                    ></pn-mainnav-link>\n                                ))}\n                            </pn-mainnav-list>\n                        )}\n\n                        {!!item.promotedMenuItems?.length && (\n                            <pn-mainnav-list heading={item.promotedMenuItemsHeader}>\n                                {item.promotedMenuItems.map((childitem: PromotedMenuItem) => (\n                                    <pn-mainnav-link\n                                        href={childitem.href}\n                                        name={childitem.linkText}\n                                        target={childitem.openInNewWindow ? '_blank' : '_self'}\n                                        linkid={promotedItemId(childitem) + item.id}\n                                    ></pn-mainnav-link>\n                                ))}\n                            </pn-mainnav-list>\n                        )}\n                    </pn-mainnav-level>\n                )}\n            </pn-mainnav-link>\n        );\n    }\n\n    private renderMenuLinks(items: MenuItem[]) {\n        return items.map(item => this.renderMenuLink(item));\n    }\n\n    private renderGroupedMenuLists(primaryItems: MenuItem[], sharedItems: MenuItem[]) {\n        const hasPrimaryItems = primaryItems.length > 0;\n        const hasSharedItems = sharedItems.length > 0;\n        const hasDivider = hasPrimaryItems && hasSharedItems;\n\n        return <div class=\"siteheader-mainnav-groups\">\n            {hasPrimaryItems ? (\n                <pn-mainnav-list class=\"siteheader-mainnav-list siteheader-mainnav-list-primary\">\n                    {this.renderMenuLinks(primaryItems)}\n                </pn-mainnav-list>\n            ) : null}\n\n            {hasDivider ? (\n                <div class=\"siteheader-mainnav-divider\" aria-hidden=\"true\"></div>\n            ) : null}\n\n            {hasSharedItems ? (\n                <pn-mainnav-list class=\"siteheader-mainnav-list siteheader-mainnav-list-shared\">\n                    {this.renderMenuLinks(sharedItems)}\n                </pn-mainnav-list>\n            ) : null}\n        </div>\n    }\n\n    private renderMenuFooter(appearance: HeaderAppearance) {\n        return (\n            <div slot=\"footer\" class=\"siteheader-menu-footer\">\n                <slot name=\"menu-footer-cta\"></slot>\n\n                {renderHeaderLogin({\n                    vm: this.vm,\n                    hideLogin: this.hideLogin,\n                    userToken: this.userToken,\n                    userFullname: this.userFullname,\n                    userLoggedin: this.userLoggedin,\n                    endpoint: this.endpoint,\n                    environment: this.environment,\n                    i18n: this.i18n,\n                    showProfileSelection: this.showProfileSelection,\n                    showUnifiedLogin: this.showUnifiedLogin,\n                    checkUserLoggedInStateInterval: this.checkUserLoggedInStateInterval,\n                    useMarketwebLogin: this.useMarketwebLogin,\n                    appearance\n                })}\n\n                {renderHeaderLanguageSelector({\n                    vm: this.vm,\n                    hideLanguageSelector: this.hideLanguageSelector,\n                    language: this.language,\n                    spaMode: this.spaMode,\n                    appearance\n                })}\n\n                {renderHeaderSiteSelector({\n                    vm: this.vm,\n                    hideSiteSelector: this.hideSiteSelector,\n                    language: this.language,\n                    appearance,\n                    adjustSiteSelectorUrl: this.adjustSiteSelectorUrl,\n                })}\n            </div>\n        );\n    }\n\n    render() {\n        // main row's subcomponent have light appearance even if business theme, since white bg\n        const appearance: HeaderAppearance = 'light';               \n        return (\n            <div class=\"siteheader-row siteheader-row-main\">\n                <div class=\"siteheader-mobile-left\">\n                    <div class=\"siteheader-mobile-logo\">\n                        {renderHeaderLogo({\n                            homePageLink: this.logoUrl, //this.vm.homePageLink,\n                            homeLabel: this.i18n.home,\n                        })}\n                    </div>\n\n                    {this.vm.hasMenuSwitching && (\n                        <div class=\"siteheader-mobile-menu-toggle\">\n                            {renderHeaderMenuSwitcher({\n                                vm: this.vm,\n                                activeMenuMode: this.activeMenuMode,\n                                navigateOnMenuToggle: this.navigateOnMenuToggle,\n                                onMenuToggleChange: this.menuToggleChangeHandler,\n                            })}\n                        </div>\n                    )}\n                </div>\n\n                <div class=\"siteheader-mainnav-middle\">\n                    <pn-marketweb-siteheader-search\n                        language={this.language}\n                        siteid={this.siteid}\n                        primary={true}\n                        search={this.vm.search}\n                        hide-search={this.hideSearch}\n                        show-only-link={this.minimizeSearch}\n                        i18n={this.i18n}\n                    ></pn-marketweb-siteheader-search>\n\n                    <slot name=\"header-bottom-button\"></slot>\n                </div>\n\n                <div class=\"siteheader-mainnav-menu\">\n                    <div class=\"siteheader-menu\">\n                        <pn-mainnav\n                            ref={el => {\n                                this.mainNavRefHandler(el as HTMLElement | undefined);\n                            }}\n                            market={this.market}\n                            language={this.language}\n                            onMenuOpenChange={e => {\n                                document.body.setAttribute('data-siteheader-menuopen', String(e.detail));\n                            }}\n                        >\n                            <pn-mainnav-level>\n                                {this.showMenuDivider ? (\n                                    this.renderGroupedMenuLists(this.primaryItems, this.sharedItems)\n                                ) : (\n                                    <pn-mainnav-list>{this.renderMenuLinks(this.primaryItems)}</pn-mainnav-list>\n                                )}\n\n                                {this.renderMenuFooter(appearance)}\n\n                                <div slot=\"top\" class=\"siteheader-menu-top\">\n                                    <pn-marketweb-siteheader-search\n                                        language={this.language}\n                                        siteid={this.siteid}\n                                        search={this.vm.search}\n                                        hide-search={this.hideSearch}\n                                        i18n={this.i18n}\n                                    ></pn-marketweb-siteheader-search>\n                                </div>\n                            </pn-mainnav-level>\n                        </pn-mainnav>\n                    </div>\n                </div>\n            </div>\n        );\n    }\n}"]}

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

@@ -0,0 +1,217 @@
+:host {
+  display: block;
+  width: 100%;
+  --header-skeleton-bg: var(--siteheader-skeleton-bg, #e8edf2);
+  --header-skeleton-shine: var(--siteheader-skeleton-shine,
+          rgba(255, 255, 255, 0.65));
+  --header-skeleton-radius: var(--siteheader-skeleton-radius, 0.4rem);
+  --header-skeleton-gap: var(--siteheader-skeleton-gap, 1.2rem);
+  --header-skeleton-padding-x: var(--siteheader-skeleton-padding-x, 1.6rem);
+  --header-skeleton-padding-y: var(--siteheader-skeleton-padding-y, 1.2rem);
+  --header-skeleton-border-color: var(--siteheader-skeleton-border-color,
+          #d9e1e8);
+  --header-skeleton-mobile-height: var(--siteheader-skeleton-mobile-height,
+          6.4rem);
+  --header-skeleton-top-row-height: var(--siteheader-skeleton-top-row-height,
+          7.2rem);
+  --header-skeleton-bottom-row-height: var(--siteheader-skeleton-bottom-row-height,
+          6.4rem);
+}
+
+.header-skeleton {
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 0.1rem solid var(--header-skeleton-border-color);
+  background: var(--siteheader-skeleton-background, #fff);
+}
+
+.mobile-layout,
+.tablet-desktop-layout {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.mobile-row,
+.top-row,
+.bottom-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: var(--header-skeleton-padding-x);
+  padding-right: var(--header-skeleton-padding-x);
+}
+
+/* -------------------------------------------------------------------------- */
+/* Skeleton blocks                                                            */
+/* -------------------------------------------------------------------------- */
+.skel {
+  position: relative;
+  overflow: hidden;
+  flex: 0 0 auto;
+  background: var(--header-skeleton-bg);
+}
+
+.skel::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, var(--header-skeleton-shine), transparent);
+  animation: header-skeleton-shimmer 1.4s infinite;
+}
+
+.skel-logo {
+  width: 11.2rem;
+  height: 2.8rem;
+  border-radius: var(--header-skeleton-radius);
+}
+
+.skel-icon-button {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+}
+
+.skel-chip {
+  width: 10rem;
+  height: 3.6rem;
+  border-radius: 1.8rem;
+}
+
+.skel-pill {
+  width: 7.2rem;
+  height: 3.6rem;
+  border-radius: 1.8rem;
+}
+
+.skel-menu-button {
+  width: 12rem;
+  height: 4rem;
+  border-radius: 0.4rem;
+}
+
+.skel-search {
+  width: min(100%, 36rem);
+  height: 4rem;
+  border-radius: 2rem;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Mobile                                                                     */
+/* -------------------------------------------------------------------------- */
+.mobile-layout {
+  display: block;
+}
+
+.mobile-row {
+  justify-content: space-between;
+  min-height: var(--header-skeleton-mobile-height);
+  padding-top: var(--header-skeleton-padding-y);
+  padding-bottom: var(--header-skeleton-padding-y);
+}
+
+/* -------------------------------------------------------------------------- */
+/* Tablet / Desktop                                                           */
+/* -------------------------------------------------------------------------- */
+.tablet-desktop-layout {
+  display: none;
+}
+
+.top-row {
+  min-height: var(--header-skeleton-top-row-height);
+  padding-top: var(--header-skeleton-padding-y);
+  padding-bottom: var(--header-skeleton-padding-y);
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  column-gap: var(--header-skeleton-gap);
+  align-items: center;
+}
+
+.top-row-left,
+.top-row-center,
+.top-row-right,
+.bottom-row-left,
+.bottom-row-right {
+  display: flex;
+  align-items: center;
+}
+
+.top-row-left {
+  justify-content: flex-start;
+  gap: var(--header-skeleton-gap);
+  min-width: 0;
+}
+
+.top-row-center {
+  justify-content: center;
+}
+
+.top-row-right {
+  justify-content: flex-end;
+  gap: var(--header-skeleton-gap);
+  min-width: 0;
+}
+
+.bottom-row {
+  min-height: var(--header-skeleton-bottom-row-height);
+  justify-content: space-between;
+  gap: var(--header-skeleton-gap);
+  padding-top: 0.8rem;
+  padding-bottom: 1.2rem;
+}
+
+.bottom-row-left {
+  justify-content: flex-start;
+  flex: 0 0 auto;
+}
+
+.bottom-row-right {
+  justify-content: flex-end;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.bottom-row-right .skel-search {
+  margin-left: auto;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Breakpoints                                                                */
+/* -------------------------------------------------------------------------- */
+/* Tablet and up */
+@media screen and (min-width: 768px) {
+  .mobile-layout {
+    display: none;
+  }
+  .tablet-desktop-layout {
+    display: block;
+  }
+}
+/* Desktop */
+@media screen and (min-width: 1200px) {
+  :host {
+    --header-skeleton-padding-x: var(--siteheader-skeleton-padding-x-desktop, 2.4rem);
+    --header-skeleton-top-row-height: var(--siteheader-skeleton-top-row-height-desktop,
+            8rem);
+    --header-skeleton-bottom-row-height: var(--siteheader-skeleton-bottom-row-height-desktop,
+            6.8rem);
+  }
+  .skel-logo {
+    width: 13rem;
+    height: 3rem;
+  }
+  .skel-search {
+    width: min(100%, 42rem);
+  }
+}
+@keyframes header-skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .skel::after {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,20 @@
+import { h, Host, } from "@stencil/core";
+export class PnMarketwebHeaderSkeletonLoader {
+    render() {
+        console.log('Rendering PnMarketwebHeaderSkeletonLoader...');
+        return (h(Host, { key: 'df31cc237329e033c4ace683027a6458a3790ef1' }, h("header", { key: '51d25dc2af64660068fcabfa5f95cc0872d29cce', class: "header-skeleton", "aria-hidden": "true" }, h("div", { key: '1469d90c9ca66cc371257818dbf1aacbdc2c0b8c', class: "mobile-layout" }, h("div", { key: '591d0124da5d93e45809cf35f514b590c60d666f', class: "mobile-row" }, h("div", { key: '1e8ec053ab87561b5f3a6a5c6e45c4fbcbe66212', class: "skel skel-logo" }), h("div", { key: '83c7c0f633155348cb92e3370f16daf3c5d0e6c2', class: "skel skel-icon-button" }))), h("div", { key: '847b9bbe3de7c3a0aa5954e82167e99a5813fcd2', class: "tablet-desktop-layout" }, h("div", { key: '5b4f7867da490285dd1032fdf9b7387b705a51f2', class: "top-row" }, h("div", { key: '208485c9f664ef1008bf57eb5a98e6687ba70949', class: "top-row-left" }, h("div", { key: 'b2fdca97d9b576d20d16ca833e84a80191653e3f', class: "skel skel-chip" }), h("div", { key: 'ca6b630a8c38cd87c4e65ffd483e0e65e4774326', class: "skel skel-icon-button" })), h("div", { key: '0923c1a855f32159dd42dc49eb9e84b47a70a549', class: "top-row-center" }, h("div", { key: 'dda22514ffd4a1ceae80252dafe49597a63ec364', class: "skel skel-logo" })), h("div", { key: 'a6ec95a525889c8cc13b35ccc03a90c509a2c35c', class: "top-row-right" }, h("div", { key: '41d4a9998a8478423a2b1ce566568fe845c8767a', class: "skel skel-icon-button" }), h("div", { key: '0fb5f413dad85ffab8e8038c7720f3828fb24b72', class: "skel skel-icon-button" }), h("div", { key: 'b53f8b517499a89c30ee3c46179ffed6cc7e12b4', class: "skel skel-pill" }))), h("div", { key: 'e7c90c573556c1599f25bf99761d437e7ed3e7c8', class: "bottom-row" }, h("div", { key: '0c9d2b72369a256efa2daf8eafd8f938369601a0', class: "bottom-row-left" }, h("div", { key: '9835aa30019d52084f98c362e0e8a255fc747d46', class: "skel skel-menu-button" })), h("div", { key: '4cc96d47f41114dbe08ce67b62106664b2f8deee', class: "bottom-row-right" }, h("div", { key: '5bcab9e4e0f36f838b7467e3dcf130d4b95faa85', class: "skel skel-search" })))))));
+    }
+    static get is() { return "pn-marketweb-header-skeleton-loader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-marketweb-header-skeleton-loader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-marketweb-header-skeleton-loader.css"]
+        };
+    }
+}
+//# sourceMappingURL=pn-marketweb-header-skeleton-loader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pn-marketweb-header-skeleton-loader.js","sourceRoot":"","sources":["../../../../../src/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-skeleton-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,CAAC,EACD,IAAI,GACP,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,+BAA+B;IACxC,MAAM;QAEF,OAAO,CAAC,GAAG,CAAC,8CAA8C,CAAC,CAAC;QAC5D,OAAO,CACH,EAAC,IAAI;YACD,+DAAQ,KAAK,EAAC,iBAAiB,iBAAa,MAAM;gBAE9C,4DAAK,KAAK,EAAC,eAAe;oBACtB,4DAAK,KAAK,EAAC,YAAY;wBACnB,4DAAK,KAAK,EAAC,gBAAgB,GAAG;wBAC9B,4DAAK,KAAK,EAAC,uBAAuB,GAAG,CACnC,CACJ;gBAGN,4DAAK,KAAK,EAAC,uBAAuB;oBAC9B,4DAAK,KAAK,EAAC,SAAS;wBAChB,4DAAK,KAAK,EAAC,cAAc;4BACrB,4DAAK,KAAK,EAAC,gBAAgB,GAAG;4BAC9B,4DAAK,KAAK,EAAC,uBAAuB,GAAG,CACnC;wBAEN,4DAAK,KAAK,EAAC,gBAAgB;4BACvB,4DAAK,KAAK,EAAC,gBAAgB,GAAG,CAC5B;wBAEN,4DAAK,KAAK,EAAC,eAAe;4BACtB,4DAAK,KAAK,EAAC,uBAAuB,GAAG;4BACrC,4DAAK,KAAK,EAAC,uBAAuB,GAAG;4BACrC,4DAAK,KAAK,EAAC,gBAAgB,GAAG,CAC5B,CACJ;oBAEN,4DAAK,KAAK,EAAC,YAAY;wBACnB,4DAAK,KAAK,EAAC,iBAAiB;4BACxB,4DAAK,KAAK,EAAC,uBAAuB,GAAG,CACnC;wBAEN,4DAAK,KAAK,EAAC,kBAAkB;4BACzB,4DAAK,KAAK,EAAC,kBAAkB,GAAG,CAC9B,CACJ,CACJ,CACD,CACN,CACV,CAAC;IACN,CAAC;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    h,\n    Host,\n} from '@stencil/core';\n\n@Component({\n    tag: 'pn-marketweb-header-skeleton-loader',\n    styleUrl: 'pn-marketweb-header-skeleton-loader.scss',\n    shadow: true,\n})\nexport class PnMarketwebHeaderSkeletonLoader {\n    render() {\n\n        console.log('Rendering PnMarketwebHeaderSkeletonLoader...');\n        return (\n            <Host>\n                <header class=\"header-skeleton\" aria-hidden=\"true\">\n                    {/* Mobile */}\n                    <div class=\"mobile-layout\">\n                        <div class=\"mobile-row\">\n                            <div class=\"skel skel-logo\" />\n                            <div class=\"skel skel-icon-button\" />\n                        </div>\n                    </div>\n\n                    {/* Tablet / Desktop */}\n                    <div class=\"tablet-desktop-layout\">\n                        <div class=\"top-row\">\n                            <div class=\"top-row-left\">\n                                <div class=\"skel skel-chip\" />\n                                <div class=\"skel skel-icon-button\" />\n                            </div>\n\n                            <div class=\"top-row-center\">\n                                <div class=\"skel skel-logo\" />\n                            </div>\n\n                            <div class=\"top-row-right\">\n                                <div class=\"skel skel-icon-button\" />\n                                <div class=\"skel skel-icon-button\" />\n                                <div class=\"skel skel-pill\" />\n                            </div>\n                        </div>\n\n                        <div class=\"bottom-row\">\n                            <div class=\"bottom-row-left\">\n                                <div class=\"skel skel-menu-button\" />\n                            </div>\n\n                            <div class=\"bottom-row-right\">\n                                <div class=\"skel skel-search\" />\n                            </div>\n                        </div>\n                    </div>\n                </header>\n            </Host>\n        );\n    }\n}"]}

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

@@ -0,0 +1,115 @@
+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-top-row {
+  display: contents;
+}
+pn-marketweb-header-top-row .siteheader-row-top {
+  border-bottom: 0.1rem solid var(--siteheader-top-row-border-color, #f3f2f2);
+  color: var(--siteheader-top-text-color, var(--siteheader-text-color, inherit));
+  background-color: var(--siteheader-top-row-bg, transparent);
+}
+pn-marketweb-header-top-row .siteheader-topleft {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 0.8rem;
+}
+pn-marketweb-header-top-row .siteheader-topleft pn-marketweb-header-toggle {
+  display: flex;
+  align-items: center;
+  margin-left: 1rem;
+}
+pn-marketweb-header-top-row .siteheader-topleft pn-site-selector {
+  display: none;
+  padding: 1rem 0;
+  margin-left: 0;
+}
+pn-marketweb-header-top-row .siteheader-topright {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+  margin-right: 0;
+}
+pn-marketweb-header-top-row .siteheader-topright > pn-language-selector,
+pn-marketweb-header-top-row .siteheader-topright > pn-marketweb-siteheader-login,
+pn-marketweb-header-top-row .siteheader-topright > a,
+pn-marketweb-header-top-row .siteheader-topright > button,
+pn-marketweb-header-top-row .siteheader-topright > [slot=header-top-right-start],
+pn-marketweb-header-top-row .siteheader-topright > [slot=toprightend] {
+  display: none;
+  align-self: center;
+  padding: 1rem 0;
+  margin-left: 0;
+  color: var(--siteheader-top-link-color, inherit);
+}
+pn-marketweb-header-top-row .siteheader-menu-top-search {
+  display: none;
+}
+
+@media screen and (min-width: 769px) {
+  pn-marketweb-header-top-row .siteheader-topleft pn-site-selector {
+    display: block;
+  }
+  pn-marketweb-header-top-row .siteheader-topright > pn-language-selector,
+  pn-marketweb-header-top-row .siteheader-topright > pn-marketweb-siteheader-login,
+  pn-marketweb-header-top-row .siteheader-topright > a,
+  pn-marketweb-header-top-row .siteheader-topright > button,
+  pn-marketweb-header-top-row .siteheader-topright > [slot=header-top-right-start],
+  pn-marketweb-header-top-row .siteheader-topright > [slot=toprightend] {
+    display: block;
+    margin-left: 1rem;
+  }
+}
+@media screen and (min-width: 1024px) {
+  pn-marketweb-header-top-row .siteheader-topleft pn-marketweb-header-toggle {
+    margin-left: 1.6rem;
+  }
+  pn-marketweb-header-top-row .siteheader-topleft pn-site-selector {
+    margin-left: 1.3rem;
+  }
+  pn-marketweb-header-top-row .siteheader-logocontainer {
+    min-height: 3em;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  pn-marketweb-header-top-row .siteheader-topright {
+    margin-right: 1.6rem;
+  }
+  pn-marketweb-header-top-row .siteheader-topright > pn-language-selector,
+  pn-marketweb-header-top-row .siteheader-topright > pn-marketweb-siteheader-login,
+  pn-marketweb-header-top-row .siteheader-topright > a,
+  pn-marketweb-header-top-row .siteheader-topright > button,
+  pn-marketweb-header-top-row .siteheader-topright > [slot=header-top-right-start],
+  pn-marketweb-header-top-row .siteheader-topright > [slot=toprightend] {
+    margin-left: 1.6rem;
+  }
+}