@swisspost/internet-header 1.9.1 → 1.10.0

package/dist/collection/components/post-internet-breadcrumbs/post-internet-breadcrumbs.js

@@ -1,10 +1,10 @@
 import { Host, h } from '@stencil/core';
 import { debounce } from 'throttle-debounce';
-import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import { SvgIcon } from '../../utils/svg-icon.component';
 import { state } from '../../data/store';
 import { OverlayComponent } from './components/overlay.component';
-import iframeResizer from 'iframe-resizer/js/iframeResizer';
+import { iframeResizer } from 'iframe-resizer';
 import { SvgSprite } from '../../utils/svg-sprite.component';
 import { BreadcrumbList } from './components/breadcrumb-list.component';
 import { prefersReducedMotion } from '../../utils/utils';
@@ -17,6 +17,20 @@ export class PostInternetBreadcrumbs {
     this.dropdownOpen = false;
     this.refsReady = false;
   }
+  /**
+   * Toggle an overlay associated with a button.
+   * @param {IBreadcrumbOverlay['id']} overlayId
+   */
+  async toggleOverlayById(overlayId) {
+    var _a, _b;
+    const buttons = (_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.breadcrumb.buttons;
+    const overlay = (_b = buttons === null || buttons === void 0 ? void 0 : buttons.find(button => button.overlay.id === overlayId)) === null || _b === void 0 ? void 0 : _b.overlay;
+    if (!overlay) {
+      console.warn(`Internet Header: Failed to toggle overlay with id #${overlayId} as it was not found in the breadcrumb buttons config.`);
+      return;
+    }
+    this.toggleOverlay(overlay);
+  }
   connectedCallback() {
     this.debouncedResize = debounce(200, this.handleResize.bind(this));
     window.addEventListener('resize', this.debouncedResize, { passive: true });
@@ -42,7 +56,7 @@ export class PostInternetBreadcrumbs {
       this.handleResize();
     });
   }
-  handleCustomConfigChage(newValue) {
+  handleCustomConfigChange(newValue) {
     try {
       this.customBreadcrumbItems = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
     }
@@ -73,7 +87,7 @@ export class PostInternetBreadcrumbs {
     var _a;
     const newVisibility = force !== null && force !== void 0 ? force : !this.overlayVisible;
     if (newVisibility) {
-      // Will trigger overlayRef() once the HTLM is rendered
+      // Will trigger overlayRef() once the HTML is rendered
       this.overlayVisible = newVisibility;
       this.currentOverlay = overlay;
       this.setBodyScroll(overlay);
@@ -99,9 +113,11 @@ export class PostInternetBreadcrumbs {
    */
   setBodyScroll(overlay) {
     if (this.overlayVisible) {
+      // @ts-ignore
       disableBodyScroll(overlay, { reserveScrollBarGap: true });
     }
     else {
+      // @ts-ignore
       enableBodyScroll(overlay);
     }
   }
@@ -173,6 +189,7 @@ export class PostInternetBreadcrumbs {
   }
   render() {
     // There is something wrong entirely
+    // eslint-disable-next-line @stencil/strict-boolean-conditions
     if (!state) {
       console.warn(`Internet Breadcrumbs: Could not load config. Please make sure that you included the <swisspost-internet-header></swisspost-internet-header> component.`);
       return null;
@@ -182,6 +199,7 @@ export class PostInternetBreadcrumbs {
       return null;
     }
     // Config has loaded but there is no breadcrumbs config
+    // eslint-disable-next-line @stencil/strict-boolean-conditions
     if (!state.localizedConfig.breadcrumb) {
       console.warn(`Internet Header: Current project "${state.projectId}" does not include a breadcrumb config. The breadcrumbs will not be rendered. Remove `, document.querySelector('swisspost-internet-breadcrumbs'), `from your markup or configure the breadcrumbs in your portal config to stop seeing this warning.`);
       return null;
@@ -193,7 +211,7 @@ export class PostInternetBreadcrumbs {
     return (h(Host, null, h(SvgSprite, null), h("div", { class: "breadcrumbs" }, h("div", { class: "hidden-control-breadcrumbs", "aria-hidden": "true", tabindex: "-1" }, h("nav", { class: "breadcrumbs-nav", ref: e => e !== undefined && this.handleControlNavRef(e) }, h(BreadcrumbList, { items: items, focusable: false, clickHandler: () => { } }))), h("nav", { "aria-label": breadcrumbConfig.a11yLabel, ref: e => e !== undefined && this.handleVisibleNavRef(e), class: {
         'breadcrumbs-nav': true,
         'visually-hidden': !this.refsReady,
-      } }, h(BreadcrumbList, { items: items, dropdownOpen: this.dropdownOpen, isConcatenated: this.isConcatenated, clickHandler: () => this.handleToggleDropdown() })), h("div", { class: "breadcrumb-buttons" }, breadcrumbConfig.buttons.map(button => (h("button", { class: "btn btn-secondary btn-icon", key: button.text, "aria-expanded": `${!!this.overlayVisible && this.currentOverlay === button.overlay}`, onClick: () => this.toggleOverlay(button.overlay, true) }, h(SvgIcon, { name: button.svgIcon.name }), h("span", { class: "visually-hidden" }, button.text))))), this.overlayVisible && (h(OverlayComponent, { overlayRef: e => e !== undefined && this.overlayRef(e), iFrameRef: e => e !== undefined && this.registerIFrameResizer(e), overlay: this.currentOverlay, onClick: () => this.handleToggleOverlay(), onKeyDown: (e) => this.handleKeyDown(e), closeButtonText: state.localizedConfig.header.translations.closeButtonText }))), h("slot", null)));
+      } }, h(BreadcrumbList, { items: items, dropdownOpen: this.dropdownOpen, isConcatenated: this.isConcatenated, clickHandler: () => this.handleToggleDropdown() })), h("div", { class: "breadcrumb-buttons" }, breadcrumbConfig.buttons.map(button => (h("button", { class: "btn btn-secondary btn-icon", key: button.text, "aria-expanded": `${this.overlayVisible && this.currentOverlay === button.overlay}`, onClick: () => this.toggleOverlay(button.overlay, true) }, h(SvgIcon, { name: button.svgIcon.name }), h("span", { class: "visually-hidden" }, button.text))))), this.overlayVisible && (h(OverlayComponent, { overlayRef: e => e !== undefined && this.overlayRef(e), iFrameRef: e => e !== undefined && this.registerIFrameResizer(e), overlay: this.currentOverlay, onClick: () => this.handleToggleOverlay(), onKeyDown: (e) => this.handleKeyDown(e), closeButtonText: state.localizedConfig.header.translations.closeButtonText }))), h("slot", null)));
   }
   static get is() { return "swisspost-internet-breadcrumbs"; }
   static get encapsulation() { return "shadow"; }
@@ -242,11 +260,44 @@ export class PostInternetBreadcrumbs {
       "refsReady": {}
     };
   }
+  static get methods() {
+    return {
+      "toggleOverlayById": {
+        "complexType": {
+          "signature": "(overlayId: IBreadcrumbOverlay['id']) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "overlayId"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IBreadcrumbOverlay": {
+              "location": "import",
+              "path": "../../models/breadcrumbs.model"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle an overlay associated with a button.",
+          "tags": [{
+              "name": "param",
+              "text": "overlayId"
+            }]
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{
         "propName": "customItems",
-        "methodName": "handleCustomConfigChage"
+        "methodName": "handleCustomConfigChange"
       }];
   }
 }

package/dist/collection/components/post-internet-breadcrumbs/post-internet-breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-internet-breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { debounce } from 'throttle-debounce';\nimport { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { state } from '../../data/store';\nimport { OverlayComponent } from './components/overlay.component';\nimport iframeResizer from 'iframe-resizer/js/iframeResizer';\nimport { IBreadcrumbOverlay, IBreadcrumbItem } from '../../models/breadcrumbs.model';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { BreadcrumbList } from './components/breadcrumb-list.component';\nimport { prefersReducedMotion } from '../../utils/utils';\n\n@Component({\n  tag: 'swisspost-internet-breadcrumbs',\n  styleUrl: 'post-internet-breadcrumbs.scss',\n  shadow: true,\n})\nexport class PostInternetBreadcrumbs {\n  @Prop() customItems?: string | IBreadcrumbItem[];\n  @State() customBreadcrumbItems?: IBreadcrumbItem[];\n  @State() overlayVisible: boolean;\n  @State() isConcatenated: boolean; // Don't set an initial value, this has to be calculated first, otherwise reactivity problems ensue\n  @State() dropdownOpen: boolean = false;\n  @State() refsReady: boolean = false;\n  @Element() host: Element;\n\n  private controlNavRef?: HTMLElement;\n  private visibleNavRef?: HTMLElement;\n  private currentOverlay: IBreadcrumbOverlay;\n  private debouncedResize: debounce<() => void>;\n  private lastWindowWidth: number;\n  private openAnimation: Animation;\n  private loadedAnimation: Animation | undefined;\n\n  connectedCallback() {\n    this.debouncedResize = debounce(200, this.handleResize.bind(this));\n    window.addEventListener('resize', this.debouncedResize, { passive: true });\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.debouncedResize);\n    window.removeEventListener('click', this.handleWindowClick);\n    clearAllBodyScrollLocks();\n  }\n\n  async componentWillLoad() {\n    // Wait for the config to arrive, then render the header\n    try {\n      this.customBreadcrumbItems =\n        typeof this.customItems === 'string' ? JSON.parse(this.customItems) : this.customItems;\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  componentDidLoad() {\n    // Initially check if breadcrumb items are concatenated\n    window.requestAnimationFrame(() => {\n      this.handleResize();\n    });\n  }\n\n  @Watch('customItems')\n  handleCustomConfigChage(newValue: string | IBreadcrumbItem[]) {\n    try {\n      this.customBreadcrumbItems = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  handleResize() {\n    // Catch and exclude vertical resize events, e.g. scrolling in iPhone\n    if (window.innerWidth === this.lastWindowWidth) {\n      return;\n    }\n    this.lastWindowWidth = window.innerWidth;\n    this.checkConcatenation();\n  }\n\n  checkConcatenation() {\n    if (this.controlNavRef && this.visibleNavRef) {\n      this.refsReady = true;\n\n      // Delay the check\n      window.requestAnimationFrame(() => {\n        if (this.controlNavRef && this.visibleNavRef) {\n          this.isConcatenated = this.controlNavRef.clientWidth > this.visibleNavRef.clientWidth;\n        }\n      });\n    }\n  }\n\n  toggleOverlay(overlay: IBreadcrumbOverlay, force?: boolean) {\n    const newVisibility = force ?? !this.overlayVisible;\n\n    if (newVisibility) {\n      // Will trigger overlayRef() once the HTLM is rendered\n      this.overlayVisible = newVisibility;\n      this.currentOverlay = overlay;\n      this.setBodyScroll(overlay);\n    } else {\n      const activeToggler = this.host.shadowRoot?.querySelector<HTMLElement>(\n        '.breadcrumb-buttons [aria-expanded=\"true\"]',\n      );\n\n      if (this.openAnimation && this.loadedAnimation) {\n        this.openAnimation.reverse();\n        this.loadedAnimation.reverse();\n\n        // Delay hiding overlay until after the animation finishes\n        Promise.all([this.openAnimation.finished, this.loadedAnimation.finished]).then(() => {\n          if (activeToggler) {\n            activeToggler.focus();\n          }\n          this.overlayVisible = newVisibility;\n          this.setBodyScroll(overlay);\n        });\n      }\n    }\n  }\n\n  /**\n   * Disable or re-enable body scrolling, depending on whether overlay is visible or not\n   */\n  setBodyScroll(overlay: IBreadcrumbOverlay) {\n    if (this.overlayVisible) {\n      disableBodyScroll(overlay, { reserveScrollBarGap: true });\n    } else {\n      enableBodyScroll(overlay);\n    }\n  }\n\n  toggleDropdown(force?: boolean) {\n    this.dropdownOpen = force ?? !this.dropdownOpen;\n\n    if (this.dropdownOpen) {\n      requestAnimationFrame(() => {\n        document.addEventListener('click', this.handleWindowClick.bind(this), { once: true });\n      });\n    }\n  }\n\n  handleWindowClick() {\n    this.toggleDropdown(false);\n  }\n\n  registerIFrameResizer(iFrame: HTMLIFrameElement) {\n    if (!iFrame) {\n      return;\n    }\n\n    iFrame.addEventListener('load', () => {\n      iframeResizer(\n        {\n          heightCalculationMethod: 'taggedElement',\n          scrolling: true,\n          checkOrigin: false,\n        },\n        iFrame,\n      );\n      const duration = prefersReducedMotion ? 0 : 300;\n      this.loadedAnimation = iFrame.parentElement?.animate(\n        [{ opacity: 1, visibility: 'visible', transform: 'translateY(0px)' }],\n        { duration, fill: 'forwards' },\n      );\n      iFrame.parentElement?.classList.add('loaded');\n      this.loadedAnimation?.finished.then(() => {\n        iFrame.parentElement?.focus();\n      });\n    });\n  }\n\n  /**\n   * Reference function for the overlay element got called. It is either null (overlay closed)\n   * or contains the overlay element as parameter.\n   * @param e Overlay element or null\n   * @returns void\n   */\n  overlayRef(e: HTMLElement | undefined) {\n    if (!e) {\n      return;\n    }\n\n    const duration = prefersReducedMotion ? 0 : 500;\n    this.openAnimation = e.animate([{ opacity: 1, visibility: 'visible' }], {\n      duration,\n      fill: 'forwards',\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key.toLowerCase() === 'escape') {\n      this.toggleOverlay(this.currentOverlay, false);\n    }\n  }\n\n  private handleToggleDropdown() {\n    this.toggleDropdown();\n  }\n\n  private handleToggleOverlay() {\n    this.toggleOverlay(this.currentOverlay, false);\n  }\n\n  private handleControlNavRef(element: HTMLElement) {\n    this.controlNavRef = element;\n    this.checkConcatenation();\n  }\n\n  private handleVisibleNavRef(element: HTMLElement) {\n    this.visibleNavRef = element;\n    this.checkConcatenation();\n  }\n\n  render() {\n    // There is something wrong entirely\n    if (!state) {\n      console.warn(\n        `Internet Breadcrumbs: Could not load config. Please make sure that you included the <swisspost-internet-header></swisspost-internet-header> component.`,\n      );\n      return null;\n    }\n\n    // Config is not loaded yet\n    if (!state.localizedConfig) {\n      return null;\n    }\n\n    // Config has loaded but there is no breadcrumbs config\n    if (!state.localizedConfig.breadcrumb) {\n      console.warn(\n        `Internet Header: Current project \"${state.projectId}\" does not include a breadcrumb config. The breadcrumbs will not be rendered. Remove `,\n        document.querySelector('swisspost-internet-breadcrumbs'),\n        `from your markup or configure the breadcrumbs in your portal config to stop seeing this warning.`,\n      );\n      return null;\n    }\n\n    const breadcrumbConfig = state.localizedConfig.breadcrumb;\n    const items =\n      this.customBreadcrumbItems !== undefined\n        ? [...breadcrumbConfig.items, ...this.customBreadcrumbItems]\n        : breadcrumbConfig.items;\n\n    return (\n      <Host>\n        <SvgSprite />\n        <div class=\"breadcrumbs\">\n          <div class=\"hidden-control-breadcrumbs\" aria-hidden=\"true\" tabindex=\"-1\">\n            <nav class=\"breadcrumbs-nav\" ref={e => e !== undefined && this.handleControlNavRef(e)}>\n              <BreadcrumbList\n                items={items}\n                focusable={false}\n                clickHandler={() => {}}\n              ></BreadcrumbList>\n            </nav>\n          </div>\n          <nav\n            aria-label={breadcrumbConfig.a11yLabel}\n            ref={e => e !== undefined && this.handleVisibleNavRef(e)}\n            class={{\n              'breadcrumbs-nav': true,\n              'visually-hidden': !this.refsReady,\n            }}\n          >\n            <BreadcrumbList\n              items={items}\n              dropdownOpen={this.dropdownOpen}\n              isConcatenated={this.isConcatenated}\n              clickHandler={() => this.handleToggleDropdown()}\n            ></BreadcrumbList>\n          </nav>\n          <div class=\"breadcrumb-buttons\">\n            {breadcrumbConfig.buttons.map(button => (\n              <button\n                class=\"btn btn-secondary btn-icon\"\n                key={button.text}\n                aria-expanded={`${!!this.overlayVisible && this.currentOverlay === button.overlay}`}\n                onClick={() => this.toggleOverlay(button.overlay, true)}\n              >\n                <SvgIcon name={button.svgIcon.name}></SvgIcon>\n                <span class=\"visually-hidden\">{button.text}</span>\n              </button>\n            ))}\n          </div>\n          {this.overlayVisible && (\n            <OverlayComponent\n              overlayRef={e => e !== undefined && this.overlayRef(e)}\n              iFrameRef={e => e !== undefined && this.registerIFrameResizer(e)}\n              overlay={this.currentOverlay}\n              onClick={() => this.handleToggleOverlay()}\n              onKeyDown={(e: KeyboardEvent) => this.handleKeyDown(e)}\n              closeButtonText={state.localizedConfig.header.translations.closeButtonText}\n            ></OverlayComponent>\n          )}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"post-internet-breadcrumbs.js","sourceRoot":"","sources":["../../../../src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAOzD,MAAM,OAAO,uBAAuB;;;;;;wBAKD,KAAK;qBACR,KAAK;;EAInC;;;KAGG;EAEH,KAAK,CAAC,iBAAiB,CAAC,SAAmC;;IACzD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,UAAU,CAAC,OAAO,CAAC;IAC1D,MAAM,OAAO,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,KAAK,SAAS,CAAC,0CAAE,OAAO,CAAC;IAElF,IAAG,CAAC,OAAO,EAAC;MACV,OAAO,CAAC,IAAI,CACV,sDAAsD,SAAS,wDAAwD,CACxH,CAAC;MACF,OAAO;KACR;IAED,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;EAC7B,CAAC;EAUD,iBAAiB;IACf,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACnE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;EAC7E,CAAC;EAED,oBAAoB;IAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAC3D,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC5D,uBAAuB,EAAE,CAAC;EAC5B,CAAC;EAED,KAAK,CAAC,iBAAiB;IACrB,wDAAwD;IACxD,IAAI;MACF,IAAI,CAAC,qBAAqB;QACxB,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;KAC1F;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACtB;EACH,CAAC;EAED,gBAAgB;IACd,uDAAuD;IACvD,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;MAChC,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC,CAAC,CAAC;EACL,CAAC;EAGD,wBAAwB,CAAC,QAAoC;IAC3D,IAAI;MACF,IAAI,CAAC,qBAAqB,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;KAC7F;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACtB;EACH,CAAC;EAED,YAAY;IACV,qEAAqE;IACrE,IAAI,MAAM,CAAC,UAAU,KAAK,IAAI,CAAC,eAAe,EAAE;MAC9C,OAAO;KACR;IACD,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;IACzC,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,EAAE;MAC5C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MAEtB,kBAAkB;MAClB,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;QAChC,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,EAAE;UAC5C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;SACvF;MACH,CAAC,CAAC,CAAC;KACJ;EACH,CAAC;EAED,aAAa,CAAC,OAA2B,EAAE,KAAe;;IACxD,MAAM,aAAa,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,IAAI,CAAC,cAAc,CAAC;IAEpD,IAAI,aAAa,EAAE;MACjB,sDAAsD;MACtD,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;MACpC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;MAC9B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KAC7B;SAAM;MACL,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CACvD,4CAA4C,CAC7C,CAAC;MAEF,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,eAAe,EAAE;QAC9C,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC;QAE/B,0DAA0D;QAC1D,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;UAClF,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,KAAK,EAAE,CAAC;WACvB;UACD,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;UACpC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;OACJ;KACF;EACH,CAAC;EAED;;KAEG;EACH,aAAa,CAAC,OAA2B;IACvC,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,aAAa;MACb,iBAAiB,CAAC,OAAO,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,CAAC;KAC3D;SAAM;MACL,aAAa;MACb,gBAAgB,CAAC,OAAO,CAAC,CAAC;KAC3B;EACH,CAAC;EAED,cAAc,CAAC,KAAe;IAC5B,IAAI,CAAC,YAAY,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,IAAI,CAAC,YAAY,CAAC;IAEhD,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,qBAAqB,CAAC,GAAG,EAAE;QACzB,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;MACxF,CAAC,CAAC,CAAC;KACJ;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAED,qBAAqB,CAAC,MAAqC;IACzD,IAAI,CAAC,MAAM,EAAE;MACX,OAAO;KACR;IAED,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;;MACnC,aAAa,CACX;QACE,uBAAuB,EAAE,eAAe;QACxC,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,KAAK;OACnB,EACD,MAAM,CACP,CAAC;MACF,MAAM,QAAQ,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;MAChD,IAAI,CAAC,eAAe,GAAG,MAAA,MAAM,CAAC,aAAa,0CAAE,OAAO,CAClD,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACrE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAC/B,CAAC;MACF,MAAA,MAAM,CAAC,aAAa,0CAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;MAC9C,MAAA,IAAI,CAAC,eAAe,0CAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE;;QACvC,MAAA,MAAM,CAAC,aAAa,0CAAE,KAAK,EAAE,CAAC;MAChC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC;EAED;;;;;KAKG;EACH,UAAU,CAAC,CAA0B;IACnC,IAAI,CAAC,CAAC,EAAE;MACN,OAAO;KACR;IAED,MAAM,QAAQ,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAChD,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,EAAE;MACtE,QAAQ;MACR,IAAI,EAAE,UAAU;KACjB,CAAC,CAAC;EACL,CAAC;EAEO,aAAa,CAAC,KAAoB;IACxC,IAAI,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,QAAQ,EAAE;MACxC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;KAChD;EACH,CAAC;EAEO,oBAAoB;IAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAEO,mBAAmB;IACzB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;EACjD,CAAC;EAEO,mBAAmB,CAAC,OAAoB;IAC9C,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;IAC7B,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAEO,mBAAmB,CAAC,OAAoB;IAC9C,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;IAC7B,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,oCAAoC;IACpC,8DAA8D;IAC9D,IAAI,CAAC,KAAK,EAAE;MACV,OAAO,CAAC,IAAI,CACV,wJAAwJ,CACzJ,CAAC;MACF,OAAO,IAAI,CAAC;KACb;IAED,2BAA2B;IAC3B,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE;MAC1B,OAAO,IAAI,CAAC;KACb;IAED,uDAAuD;IACvD,8DAA8D;IAC9D,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,UAAU,EAAE;MACrC,OAAO,CAAC,IAAI,CACV,qCAAqC,KAAK,CAAC,SAAS,uFAAuF,EAC3I,QAAQ,CAAC,aAAa,CAAC,gCAAgC,CAAC,EACxD,kGAAkG,CACnG,CAAC;MACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,gBAAgB,GAAG,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC;IAC1D,MAAM,KAAK,GACT,IAAI,CAAC,qBAAqB,KAAK,SAAS;MACtC,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,qBAAqB,CAAC;MAC5D,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;IAE7B,OAAO,CACL,EAAC,IAAI;MACH,EAAC,SAAS,OAAG;MACb,WAAK,KAAK,EAAC,aAAa;QACtB,WAAK,KAAK,EAAC,4BAA4B,iBAAa,MAAM,EAAC,QAAQ,EAAC,IAAI;UACtE,WAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;YACnF,EAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,KAAK,EAChB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC,GACN,CACd,CACF;QACN,yBACc,gBAAgB,CAAC,SAAS,EACtC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EACxD,KAAK,EAAE;YACL,iBAAiB,EAAE,IAAI;YACvB,iBAAiB,EAAE,CAAC,IAAI,CAAC,SAAS;WACnC;UAED,EAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,GAC/B,CACd;QACN,WAAK,KAAK,EAAC,oBAAoB,IAC5B,gBAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACtC,cACE,KAAK,EAAC,4BAA4B,EAClC,GAAG,EAAE,MAAM,CAAC,IAAI,mBACD,GAAG,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,OAAO,EAAE,EACjF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC;UAEvD,EAAC,OAAO,IAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,GAAY;UAC9C,YAAM,KAAK,EAAC,iBAAiB,IAAE,MAAM,CAAC,IAAI,CAAQ,CAC3C,CACV,CAAC,CACE;QACL,IAAI,CAAC,cAAc,IAAI,CACtB,EAAC,gBAAgB,IACf,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EACtD,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAChE,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,EACzC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EACtD,eAAe,EAAE,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,GACxD,CACrB,CACG;MACN,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Element, Watch, Method } from '@stencil/core';\nimport { debounce } from 'throttle-debounce';\nimport { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { state } from '../../data/store';\nimport { OverlayComponent } from './components/overlay.component';\nimport { iframeResizer } from 'iframe-resizer';\nimport { IBreadcrumbItem, IBreadcrumbOverlay } from '../../models/breadcrumbs.model';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { BreadcrumbList } from './components/breadcrumb-list.component';\nimport { prefersReducedMotion } from '../../utils/utils';\n\n@Component({\n  tag: 'swisspost-internet-breadcrumbs',\n  styleUrl: 'post-internet-breadcrumbs.scss',\n  shadow: true,\n})\nexport class PostInternetBreadcrumbs {\n  @Prop() customItems?: string | IBreadcrumbItem[];\n  @State() customBreadcrumbItems?: IBreadcrumbItem[];\n  @State() overlayVisible: boolean;\n  @State() isConcatenated: boolean; // Don't set an initial value, this has to be calculated first, otherwise reactivity problems ensue\n  @State() dropdownOpen: boolean = false;\n  @State() refsReady: boolean = false;\n  @Element() host: Element;\n\n\n  /**\n   * Toggle an overlay associated with a button.\n   * @param {IBreadcrumbOverlay['id']} overlayId\n   */\n  @Method()\n  async toggleOverlayById(overlayId: IBreadcrumbOverlay['id']): Promise<void> {\n    const buttons = state.localizedConfig?.breadcrumb.buttons;\n    const overlay = buttons?.find(button => button.overlay.id === overlayId)?.overlay;\n\n    if(!overlay){\n      console.warn(\n        `Internet Header: Failed to toggle overlay with id #${overlayId} as it was not found in the breadcrumb buttons config.`,\n      );\n      return;\n    }\n\n    this.toggleOverlay(overlay)\n  }\n\n  private controlNavRef?: HTMLElement;\n  private visibleNavRef?: HTMLElement;\n  private currentOverlay: IBreadcrumbOverlay;\n  private debouncedResize: debounce<() => void>;\n  private lastWindowWidth: number;\n  private openAnimation: Animation;\n  private loadedAnimation: Animation | undefined;\n\n  connectedCallback() {\n    this.debouncedResize = debounce(200, this.handleResize.bind(this));\n    window.addEventListener('resize', this.debouncedResize, { passive: true });\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.debouncedResize);\n    window.removeEventListener('click', this.handleWindowClick);\n    clearAllBodyScrollLocks();\n  }\n\n  async componentWillLoad() {\n    // Wait for the config to arrive, then render the header\n    try {\n      this.customBreadcrumbItems =\n        typeof this.customItems === 'string' ? JSON.parse(this.customItems) : this.customItems;\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  componentDidLoad() {\n    // Initially check if breadcrumb items are concatenated\n    window.requestAnimationFrame(() => {\n      this.handleResize();\n    });\n  }\n\n  @Watch('customItems')\n  handleCustomConfigChange(newValue: string | IBreadcrumbItem[]) {\n    try {\n      this.customBreadcrumbItems = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  handleResize() {\n    // Catch and exclude vertical resize events, e.g. scrolling in iPhone\n    if (window.innerWidth === this.lastWindowWidth) {\n      return;\n    }\n    this.lastWindowWidth = window.innerWidth;\n    this.checkConcatenation();\n  }\n\n  checkConcatenation() {\n    if (this.controlNavRef && this.visibleNavRef) {\n      this.refsReady = true;\n\n      // Delay the check\n      window.requestAnimationFrame(() => {\n        if (this.controlNavRef && this.visibleNavRef) {\n          this.isConcatenated = this.controlNavRef.clientWidth > this.visibleNavRef.clientWidth;\n        }\n      });\n    }\n  }\n\n  toggleOverlay(overlay: IBreadcrumbOverlay, force?: boolean) {\n    const newVisibility = force ?? !this.overlayVisible;\n\n    if (newVisibility) {\n      // Will trigger overlayRef() once the HTML is rendered\n      this.overlayVisible = newVisibility;\n      this.currentOverlay = overlay;\n      this.setBodyScroll(overlay);\n    } else {\n      const activeToggler = this.host.shadowRoot?.querySelector<HTMLElement>(\n        '.breadcrumb-buttons [aria-expanded=\"true\"]',\n      );\n\n      if (this.openAnimation && this.loadedAnimation) {\n        this.openAnimation.reverse();\n        this.loadedAnimation.reverse();\n\n        // Delay hiding overlay until after the animation finishes\n        Promise.all([this.openAnimation.finished, this.loadedAnimation.finished]).then(() => {\n          if (activeToggler) {\n            activeToggler.focus();\n          }\n          this.overlayVisible = newVisibility;\n          this.setBodyScroll(overlay);\n        });\n      }\n    }\n  }\n\n  /**\n   * Disable or re-enable body scrolling, depending on whether overlay is visible or not\n   */\n  setBodyScroll(overlay: IBreadcrumbOverlay) {\n    if (this.overlayVisible) {\n      // @ts-ignore\n      disableBodyScroll(overlay, { reserveScrollBarGap: true });\n    } else {\n      // @ts-ignore\n      enableBodyScroll(overlay);\n    }\n  }\n\n  toggleDropdown(force?: boolean) {\n    this.dropdownOpen = force ?? !this.dropdownOpen;\n\n    if (this.dropdownOpen) {\n      requestAnimationFrame(() => {\n        document.addEventListener('click', this.handleWindowClick.bind(this), { once: true });\n      });\n    }\n  }\n\n  handleWindowClick() {\n    this.toggleDropdown(false);\n  }\n\n  registerIFrameResizer(iFrame: HTMLIFrameElement | undefined) {\n    if (!iFrame) {\n      return;\n    }\n\n    iFrame.addEventListener('load', () => {\n      iframeResizer(\n        {\n          heightCalculationMethod: 'taggedElement',\n          scrolling: true,\n          checkOrigin: false,\n        },\n        iFrame,\n      );\n      const duration = prefersReducedMotion ? 0 : 300;\n      this.loadedAnimation = iFrame.parentElement?.animate(\n        [{ opacity: 1, visibility: 'visible', transform: 'translateY(0px)' }],\n        { duration, fill: 'forwards' },\n      );\n      iFrame.parentElement?.classList.add('loaded');\n      this.loadedAnimation?.finished.then(() => {\n        iFrame.parentElement?.focus();\n      });\n    });\n  }\n\n  /**\n   * Reference function for the overlay element got called. It is either null (overlay closed)\n   * or contains the overlay element as parameter.\n   * @param e Overlay element or null\n   * @returns void\n   */\n  overlayRef(e: HTMLElement | undefined) {\n    if (!e) {\n      return;\n    }\n\n    const duration = prefersReducedMotion ? 0 : 500;\n    this.openAnimation = e.animate([{ opacity: 1, visibility: 'visible' }], {\n      duration,\n      fill: 'forwards',\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key.toLowerCase() === 'escape') {\n      this.toggleOverlay(this.currentOverlay, false);\n    }\n  }\n\n  private handleToggleDropdown() {\n    this.toggleDropdown();\n  }\n\n  private handleToggleOverlay() {\n    this.toggleOverlay(this.currentOverlay, false);\n  }\n\n  private handleControlNavRef(element: HTMLElement) {\n    this.controlNavRef = element;\n    this.checkConcatenation();\n  }\n\n  private handleVisibleNavRef(element: HTMLElement) {\n    this.visibleNavRef = element;\n    this.checkConcatenation();\n  }\n\n  render() {\n    // There is something wrong entirely\n    // eslint-disable-next-line @stencil/strict-boolean-conditions\n    if (!state) {\n      console.warn(\n        `Internet Breadcrumbs: Could not load config. Please make sure that you included the <swisspost-internet-header></swisspost-internet-header> component.`,\n      );\n      return null;\n    }\n\n    // Config is not loaded yet\n    if (!state.localizedConfig) {\n      return null;\n    }\n\n    // Config has loaded but there is no breadcrumbs config\n    // eslint-disable-next-line @stencil/strict-boolean-conditions\n    if (!state.localizedConfig.breadcrumb) {\n      console.warn(\n        `Internet Header: Current project \"${state.projectId}\" does not include a breadcrumb config. The breadcrumbs will not be rendered. Remove `,\n        document.querySelector('swisspost-internet-breadcrumbs'),\n        `from your markup or configure the breadcrumbs in your portal config to stop seeing this warning.`,\n      );\n      return null;\n    }\n\n    const breadcrumbConfig = state.localizedConfig.breadcrumb;\n    const items =\n      this.customBreadcrumbItems !== undefined\n        ? [...breadcrumbConfig.items, ...this.customBreadcrumbItems]\n        : breadcrumbConfig.items;\n\n    return (\n      <Host>\n        <SvgSprite />\n        <div class=\"breadcrumbs\">\n          <div class=\"hidden-control-breadcrumbs\" aria-hidden=\"true\" tabindex=\"-1\">\n            <nav class=\"breadcrumbs-nav\" ref={e => e !== undefined && this.handleControlNavRef(e)}>\n              <BreadcrumbList\n                items={items}\n                focusable={false}\n                clickHandler={() => {}}\n              ></BreadcrumbList>\n            </nav>\n          </div>\n          <nav\n            aria-label={breadcrumbConfig.a11yLabel}\n            ref={e => e !== undefined && this.handleVisibleNavRef(e)}\n            class={{\n              'breadcrumbs-nav': true,\n              'visually-hidden': !this.refsReady,\n            }}\n          >\n            <BreadcrumbList\n              items={items}\n              dropdownOpen={this.dropdownOpen}\n              isConcatenated={this.isConcatenated}\n              clickHandler={() => this.handleToggleDropdown()}\n            ></BreadcrumbList>\n          </nav>\n          <div class=\"breadcrumb-buttons\">\n            {breadcrumbConfig.buttons.map(button => (\n              <button\n                class=\"btn btn-secondary btn-icon\"\n                key={button.text}\n                aria-expanded={`${this.overlayVisible && this.currentOverlay === button.overlay}`}\n                onClick={() => this.toggleOverlay(button.overlay, true)}\n              >\n                <SvgIcon name={button.svgIcon.name}></SvgIcon>\n                <span class=\"visually-hidden\">{button.text}</span>\n              </button>\n            ))}\n          </div>\n          {this.overlayVisible && (\n            <OverlayComponent\n              overlayRef={e => e !== undefined && this.overlayRef(e)}\n              iFrameRef={e => e !== undefined && this.registerIFrameResizer(e)}\n              overlay={this.currentOverlay}\n              onClick={() => this.handleToggleOverlay()}\n              onKeyDown={(e: KeyboardEvent) => this.handleKeyDown(e)}\n              closeButtonText={state.localizedConfig.header.translations.closeButtonText}\n            ></OverlayComponent>\n          )}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/post-internet-footer/post-internet-footer.css

@@ -43,6 +43,13 @@
  * will be available as sass-variables
  * but should not be used.
 */
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 400px;
@@ -92,7 +99,7 @@
 
 .row-cols-3 > * {
   flex: 0 0 auto;
-  width: 33.3333333333%;
+  width: 33.33333333%;
 }
 
 .row-cols-4 > * {
@@ -107,7 +114,7 @@
 
 .row-cols-6 > * {
   flex: 0 0 auto;
-  width: 16.6666666667%;
+  width: 16.66666667%;
 }
 
 .col-auto {
@@ -297,7 +304,7 @@
   }
   .row-cols-sm-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-sm-4 > * {
     flex: 0 0 auto;
@@ -309,7 +316,7 @@
   }
   .row-cols-sm-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-sm-auto {
     flex: 0 0 auto;
@@ -466,7 +473,7 @@
   }
   .row-cols-rg-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-rg-4 > * {
     flex: 0 0 auto;
@@ -478,7 +485,7 @@
   }
   .row-cols-rg-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-rg-auto {
     flex: 0 0 auto;
@@ -635,7 +642,7 @@
   }
   .row-cols-md-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-md-4 > * {
     flex: 0 0 auto;
@@ -647,7 +654,7 @@
   }
   .row-cols-md-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-md-auto {
     flex: 0 0 auto;
@@ -804,7 +811,7 @@
   }
   .row-cols-lg-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-lg-4 > * {
     flex: 0 0 auto;
@@ -816,7 +823,7 @@
   }
   .row-cols-lg-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-lg-auto {
     flex: 0 0 auto;
@@ -973,7 +980,7 @@
   }
   .row-cols-xl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xl-4 > * {
     flex: 0 0 auto;
@@ -985,7 +992,7 @@
   }
   .row-cols-xl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xl-auto {
     flex: 0 0 auto;
@@ -1142,7 +1149,7 @@
   }
   .row-cols-xxl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xxl-4 > * {
     flex: 0 0 auto;
@@ -1154,7 +1161,7 @@
   }
   .row-cols-xxl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xxl-auto {
     flex: 0 0 auto;
@@ -1507,9 +1514,6 @@
   }
 }
 
-/*!
- * Copyright 2021 by Swiss Post, Information Technology
- */
 /**
  * Generate responsive size properties for things like height, width, margin, padding, etc.
  * @param $curve-size One of the curve sizes predefined at https://www.experience-hub.ch/document/2307#/grundlagen-web/abstaende
@@ -1585,7 +1589,8 @@
 .btn:where(:not(.btn-link, .btn-tertiary)) {
   padding: 0 1rem;
 }
-.btn > .pi {
+.btn > .pi,
+.btn > post-icon {
   width: 1.25rem;
   height: 1.25rem;
 }
@@ -1728,7 +1733,8 @@
 .btn-sm:where(:not(.btn-link, .btn-tertiary)) {
   padding: 0 0.75rem;
 }
-.btn-sm > .pi {
+.btn-sm > .pi,
+.btn-sm > post-icon {
   width: 1rem;
   height: 1rem;
 }
@@ -1741,7 +1747,8 @@
 .btn-rg:where(:not(.btn-link, .btn-tertiary)) {
   padding: 0 0.875rem;
 }
-.btn-rg > .pi {
+.btn-rg > .pi,
+.btn-rg > post-icon {
   width: 1.125rem;
   height: 1.125rem;
 }
@@ -1754,7 +1761,8 @@
 .btn-lg:where(:not(.btn-link, .btn-tertiary)) {
   padding: 0 1.125rem;
 }
-.btn-lg > .pi {
+.btn-lg > .pi,
+.btn-lg > post-icon {
   width: 1.375rem;
   height: 1.375rem;
 }

package/dist/collection/components/post-internet-header/logo-animation/logo-animation.js

@@ -1,6 +1,8 @@
 import { debounce } from 'throttle-debounce';
 import { state } from '../../../data/store';
+import { getScrollParent } from '../../../utils/scrollparent';
 export const registerLogoAnimationObserver = (target, headerRef) => {
+  const scrollParent = getScrollParent(headerRef);
   /**
    * Set intersection ratio as CSS custom property
    */
@@ -9,7 +11,8 @@ export const registerLogoAnimationObserver = (target, headerRef) => {
     let scale = 1;
     // Minus 1px border at the bottom that the logo is not covering
     const adjustedHeaderHeight = headerRef.clientHeight - 1;
-    const scrollY = fullStickyness ? 0 : window.scrollY;
+    const scrollDistance = scrollParent instanceof Element ? scrollParent.scrollTop : scrollParent.documentElement.scrollTop;
+    const scrollY = fullStickyness ? 0 : scrollDistance;
     // If meta navigation is not visible (mobile, not configured), scale should just be 1
     if (target.clientHeight > 0) {
       scale = Math.max((adjustedHeaderHeight - Math.max(scrollY, 0)) /
@@ -25,13 +28,13 @@ export const registerLogoAnimationObserver = (target, headerRef) => {
   const observer = new IntersectionObserver(entries => {
     entries.forEach(entry => {
       if (entry.isIntersecting && entry.intersectionRatio > 0) {
-        window.addEventListener('scroll', handleScroll, { passive: true });
+        scrollParent.addEventListener('scroll', handleScroll, { passive: true });
         window.addEventListener('resize', debounced);
         // Ensure callback is called at least once in case main thread is too busy while scrolling up
         window.requestAnimationFrame(handleScroll);
       }
       else {
-        window.removeEventListener('scroll', handleScroll);
+        scrollParent.removeEventListener('scroll', handleScroll);
         window.removeEventListener('resize', debounced);
         window.requestAnimationFrame(handleScroll);
       }

package/dist/collection/components/post-internet-header/logo-animation/logo-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo-animation.js","sourceRoot":"","sources":["../../../../../src/components/post-internet-header/logo-animation/logo-animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,MAAmB,EACnB,SAA6C,EAC7C,EAAE;EACF;;KAEG;EACH,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,KAAK,MAAM,CAAC;IACnD,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,+DAA+D;IAC/D,MAAM,oBAAoB,GAAG,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;IAEpD,qFAAqF;IACrF,IAAI,MAAM,CAAC,YAAY,GAAG,CAAC,EAAE;MAC3B,KAAK,GAAG,IAAI,CAAC,GAAG,CACd,CAAC,oBAAoB,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC3C,CAAC,oBAAoB,GAAG,MAAM,CAAC,YAAY,CAAC,EAC9C,CAAC,CACF,CAAC;KACH;IACD,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;EAChE,CAAC,CAAC;EAEF,MAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;EAE9C;;;KAGG;EACH,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,OAAO,CAAC,EAAE;IACR,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MACtB,IAAI,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,iBAAiB,GAAG,CAAC,EAAE;QACvD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACnE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;QAE7C,6FAA6F;QAC7F,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;OAC5C;WAAM;QACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACnD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;QAChD,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;OAC5C;IACH,CAAC,CAAC,CAAC;EACL,CAAC,EACD;IACE,kFAAkF;IAClF,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC;GACtB,CACF,CAAC;EACF,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;EAEzB,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC","sourcesContent":["import { debounce } from 'throttle-debounce';\nimport { state } from '../../../data/store';\n\nexport const registerLogoAnimationObserver = (\n  target: HTMLElement,\n  headerRef: HTMLSwisspostInternetHeaderElement,\n) => {\n  /**\n   * Set intersection ratio as CSS custom property\n   */\n  const handleScroll = () => {\n    const fullStickyness = state.stickyness === 'full';\n    let scale = 1;\n    // Minus 1px border at the bottom that the logo is not covering\n    const adjustedHeaderHeight = headerRef.clientHeight - 1;\n    const scrollY = fullStickyness ? 0 : window.scrollY;\n\n    // If meta navigation is not visible (mobile, not configured), scale should just be 1\n    if (target.clientHeight > 0) {\n      scale = Math.max(\n        (adjustedHeaderHeight - Math.max(scrollY, 0)) /\n          (adjustedHeaderHeight - target.clientHeight),\n        1,\n      );\n    }\n    headerRef.style.setProperty('--logo-scale', scale.toString());\n  };\n\n  const debounced = debounce(150, handleScroll);\n\n  /**\n   * Observe the meta navigation in order to not track scroll events throughout the whole page.\n   * This ensures that the scroll listener is only active while the meta navigation is visible.\n   */\n  const observer = new IntersectionObserver(\n    entries => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting && entry.intersectionRatio > 0) {\n          window.addEventListener('scroll', handleScroll, { passive: true });\n          window.addEventListener('resize', debounced);\n\n          // Ensure callback is called at least once in case main thread is too busy while scrolling up\n          window.requestAnimationFrame(handleScroll);\n        } else {\n          window.removeEventListener('scroll', handleScroll);\n          window.removeEventListener('resize', debounced);\n          window.requestAnimationFrame(handleScroll);\n        }\n      });\n    },\n    {\n      // Fires when element leaves viewport (0) and when it just about enters it (0.001)\n      threshold: [0, 0.001],\n    },\n  );\n  observer.observe(target);\n\n  return handleScroll;\n};\n"]}
+{"version":3,"file":"logo-animation.js","sourceRoot":"","sources":["../../../../../src/components/post-internet-header/logo-animation/logo-animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,MAAmB,EACnB,SAA6C,EAC7C,EAAE;EACF,MAAM,YAAY,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;EAEhD;;KAEG;EACH,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,KAAK,MAAM,CAAC;IACnD,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,+DAA+D;IAC/D,MAAM,oBAAoB,GAAG,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,YAAY,YAAY,OAAO,CAAE,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,SAAS,CAAC;IAC1H,MAAM,OAAO,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;IAEpD,qFAAqF;IACrF,IAAI,MAAM,CAAC,YAAY,GAAG,CAAC,EAAE;MAC3B,KAAK,GAAG,IAAI,CAAC,GAAG,CACd,CAAC,oBAAoB,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC3C,CAAC,oBAAoB,GAAG,MAAM,CAAC,YAAY,CAAC,EAC9C,CAAC,CACF,CAAC;KACH;IACD,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;EAChE,CAAC,CAAC;EAEF,MAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;EAE9C;;;KAGG;EACH,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,OAAO,CAAC,EAAE;IACR,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MACtB,IAAI,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,iBAAiB,GAAG,CAAC,EAAE;QACvD,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;QAE7C,6FAA6F;QAC7F,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;OAC5C;WAAM;QACL,YAAY,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACzD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;QAChD,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;OAC5C;IACH,CAAC,CAAC,CAAC;EACL,CAAC,EACD;IACE,kFAAkF;IAClF,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC;GACtB,CACF,CAAC;EACF,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;EAEzB,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC","sourcesContent":["import { debounce } from 'throttle-debounce';\nimport { state } from '../../../data/store';\nimport { getScrollParent } from '../../../utils/scrollparent';\n\nexport const registerLogoAnimationObserver = (\n  target: HTMLElement,\n  headerRef: HTMLSwisspostInternetHeaderElement,\n) => {\n  const scrollParent = getScrollParent(headerRef);\n\n  /**\n   * Set intersection ratio as CSS custom property\n   */\n  const handleScroll = () => {\n    const fullStickyness = state.stickyness === 'full';\n    let scale = 1;\n    // Minus 1px border at the bottom that the logo is not covering\n    const adjustedHeaderHeight = headerRef.clientHeight - 1;\n    const scrollDistance = scrollParent instanceof Element  ? scrollParent.scrollTop : scrollParent.documentElement.scrollTop;\n    const scrollY = fullStickyness ? 0 : scrollDistance;\n\n    // If meta navigation is not visible (mobile, not configured), scale should just be 1\n    if (target.clientHeight > 0) {\n      scale = Math.max(\n        (adjustedHeaderHeight - Math.max(scrollY, 0)) /\n          (adjustedHeaderHeight - target.clientHeight),\n        1,\n      );\n    }\n    headerRef.style.setProperty('--logo-scale', scale.toString());\n  };\n\n  const debounced = debounce(150, handleScroll);\n\n  /**\n   * Observe the meta navigation in order to not track scroll events throughout the whole page.\n   * This ensures that the scroll listener is only active while the meta navigation is visible.\n   */\n  const observer = new IntersectionObserver(\n    entries => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting && entry.intersectionRatio > 0) {\n          scrollParent.addEventListener('scroll', handleScroll, { passive: true });\n          window.addEventListener('resize', debounced);\n\n          // Ensure callback is called at least once in case main thread is too busy while scrolling up\n          window.requestAnimationFrame(handleScroll);\n        } else {\n          scrollParent.removeEventListener('scroll', handleScroll);\n          window.removeEventListener('resize', debounced);\n          window.requestAnimationFrame(handleScroll);\n        }\n      });\n    },\n    {\n      // Fires when element leaves viewport (0) and when it just about enters it (0.001)\n      threshold: [0, 0.001],\n    },\n  );\n  observer.observe(target);\n\n  return handleScroll;\n};\n"]}

package/dist/collection/components/post-internet-header/post-internet-header.js

@@ -1,13 +1,14 @@
-import { Host, h, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { debounce, throttle } from 'throttle-debounce';
 import { getLocalizedConfig, getLocalizedCustomConfig, isValidProjectId, } from '../../services/config.service';
-import { state, dispose } from '../../data/store';
+import { dispose, state } from '../../data/store';
 import { SvgSprite } from '../../utils/svg-sprite.component';
 import { SvgIcon } from '../../utils/svg-icon.component';
-import { translate } from '../../services/language.service';
+import { getUserLang, translate } from '../../services/language.service';
 import { If } from '../../utils/if.component';
 import packageJson from '../../../package.json';
 import { registerLogoAnimationObserver } from './logo-animation/logo-animation';
+import { getScrollParent } from '../../utils/scrollparent';
 export class PostInternetHeader {
   /**
    * Get the currently set language as a two letter string ("de", "fr" "it" or "en")
@@ -46,16 +47,17 @@ export class PostInternetHeader {
   connectedCallback() {
     this.throttledScroll = throttle(300, () => this.handleScrollEvent());
     this.debouncedResize = debounce(200, () => this.handleResize());
-    window.addEventListener('scroll', this.throttledScroll, { passive: true });
-    window.addEventListener('resize', this.debouncedResize, { passive: true });
   }
   disconnectedCallback() {
-    window.removeEventListener('scroll', this.throttledScroll);
-    window.removeEventListener('resize', this.debouncedResize);
+    this.scrollParent.removeEventListener('scroll', this.throttledScroll);
+    this.scrollParent.removeEventListener('resize', this.debouncedResize);
     // Reset the store to its original state
     dispose();
   }
   async componentWillLoad() {
+    this.scrollParent = getScrollParent(this.host);
+    this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
+    this.scrollParent.addEventListener('resize', this.debouncedResize, { passive: true });
     // Wait for the config to arrive, then render the header
     try {
       state.projectId = this.project;
@@ -71,8 +73,10 @@ export class PostInternetHeader {
         typeof this.osFlyoutOverrides === 'string'
           ? JSON.parse(this.osFlyoutOverrides)
           : this.osFlyoutOverrides;
-      if (this.customConfig !== undefined && state.currentLanguage !== null) {
-        state.localizedCustomConfig = getLocalizedCustomConfig(this.customConfig, state.currentLanguage);
+      if (this.customConfig !== undefined) {
+        const langs = Object.keys(typeof this.customConfig === 'string' ? JSON.parse(this.customConfig) : this.customConfig);
+        const lang = state.currentLanguage || getUserLang(langs, this.language);
+        state.localizedCustomConfig = getLocalizedCustomConfig(this.customConfig, lang);
       }
       state.localizedConfig = await getLocalizedConfig({
         projectId: this.project,
@@ -116,7 +120,7 @@ export class PostInternetHeader {
     if (this.customConfig)
       state.localizedCustomConfig = getLocalizedCustomConfig(this.customConfig, newValue);
   }
-  handleAvailableLanguagesChage(newValue) {
+  handleAvailableLanguagesChange(newValue) {
     state.languageSwitchOverrides = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
   }
   async handleOsFlyoutOverrides(newValue) {
@@ -170,31 +174,34 @@ export class PostInternetHeader {
     state.meta = newValue;
   }
   handleLanguageChangeEvent(event) {
-    this.handleLanguageChange(event.detail);
+    void this.handleLanguageChange(event.detail);
   }
   handleStickynessChange(newValue) {
     state.stickyness = newValue;
-    this.updateLogoAnimation();
+    if (typeof this.updateLogoAnimation === 'function')
+      this.updateLogoAnimation();
   }
   handleClickOutside(event) {
     // Close active dropdown element on click outside of it
     if (this.activeDropdownElement && !event.composedPath().includes(this.activeDropdownElement)) {
-      this.activeDropdownElement.toggleDropdown(false);
+      void this.activeDropdownElement.toggleDropdown(false);
     }
   }
   handleKeyUp(event) {
     if (event.key === 'Escape') {
       if (this.activeDropdownElement) {
-        this.activeDropdownElement.toggleDropdown(false);
+        void this.activeDropdownElement.toggleDropdown(false);
       }
       if (this.activeFlyout !== null && this.mainNav) {
-        this.mainNav.toggleDropdown(false);
+        void this.mainNav.toggleDropdown(false);
       }
     }
   }
   handleScrollEvent() {
     // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
-    const st = window.scrollY || document.documentElement.scrollTop;
+    const st = this.scrollParent instanceof Document
+      ? this.scrollParent.documentElement.scrollTop
+      : this.scrollParent.scrollTop;
     // Toggle class without re-rendering the component if stickyness is minimal
     // the other stickyness modes do not need the class
     if (this.stickyness === 'minimal') {
@@ -223,13 +230,13 @@ export class PostInternetHeader {
       // a circle or an outdated state, we'll not handle this event
       return;
     }
-    if (event.detail.open === true) {
+    if (event.detail.open) {
       if (this.activeDropdownElement) {
-        this.activeDropdownElement.toggleDropdown(false);
+        void this.activeDropdownElement.toggleDropdown(false);
       }
       this.activeDropdownElement = event.detail.element;
       if (window.innerWidth >= 1024) {
-        // Add event listener to close active dropdown element on click outsite of it
+        // Add event listener to close active dropdown element on click outside of it
         // Also adds 10ms delay in case of an external interaction:
         //    Some button on the page calls toggleDropdown() -> dropdown opens
         //    Click event bubbles to the window, this.handleClickOutsideBound closes dropdown again
@@ -238,7 +245,7 @@ export class PostInternetHeader {
         }, 10);
       }
       if (this.activeFlyout !== null && this.mainNav) {
-        this.mainNav.setActiveFlyout(null);
+        void this.mainNav.setActiveFlyout(null);
       }
     }
     else {
@@ -254,7 +261,7 @@ export class PostInternetHeader {
   handleFlyoutToggled(event) {
     this.activeFlyout = event.detail;
     if (this.activeDropdownElement && event.detail && !this.isMainNavOpen()) {
-      this.activeDropdownElement.toggleDropdown(false);
+      void this.activeDropdownElement.toggleDropdown(false);
     }
   }
   toggleMobileDropdown() {
@@ -276,7 +283,7 @@ export class PostInternetHeader {
       ((_b = config.header.navMeta) === null || _b === void 0 ? void 0 : _b.filter(meta => !meta.isHomeLink).length) > 0;
     const renderLogin = ((_c = this.login) !== null && _c !== void 0 ? _c : !config.header.isLoginWidgetHidden) && config.header.loginWidgetOptions;
     const renderLanguageSwitch = config.header.navLang.length > 1;
-    return (h(Host, { class: `stickyness-${this.stickyness} ${this.activeDropdownElement || this.activeFlyout ? 'dropdown-open' : ''}`, "data-version": packageJson.version, onKeyup: (e) => this.handleKeyUp(e) }, h("header", { class: `post-internet-header${this.fullWidth ? ' full-width' : ''}` }, h(SvgSprite, null), h("h1", { class: "visually-hidden" }, translate('Navigate on post.ch')), h(If, { condition: this.skiplinks === true }, h("post-skiplinks", null)), h(If, { condition: renderMetaNavigation === true }, h("post-meta-navigation", { orientation: "horizontal", class: "hidden-lg", "full-width": this.fullWidth, ref: el => (this.metaNav = el) }, h(If, { condition: renderLanguageSwitch === true }, h("post-language-switch", { id: "post-language-switch-desktop", mode: "dropdown", onDropdownToggled: e => this.handleDropdownToggled(e) })))), h("div", { class: "main-navigation-container wide-container" }, h("post-logo", null), h("button", { class: "menu-button nav-link", onClick: () => this.toggleMobileDropdown(), "aria-haspopup": "menu", "aria-controls": "post-internet-header-main-navigation", "aria-expanded": this.activeDropdownElement ? 'true' : 'false' }, h("span", { class: "menu-button-text visually-hidden" }, config.header.mobileMenu.text), h(SvgIcon, { name: this.isMainNavOpen() ? 'pi-close' : 'pi-menu' })), h("post-main-navigation", { onDropdownToggled: e => this.handleDropdownToggled(e), onFlyoutToggled: e => this.handleFlyoutToggled(e), ref: el => (this.mainNav = el) }, h(If, { condition: renderMetaNavigation === true }, h("post-meta-navigation", { orientation: "vertical" }, h(If, { condition: renderLanguageSwitch === true }, h("post-language-switch", { id: "post-language-switch-mobile", mode: "list" }))))), h("div", { class: "main-navigation-controls" }, h(If, { condition: this.search !== false }, h("post-search", { onDropdownToggled: e => this.handleDropdownToggled(e) })), h(If, { condition: !!renderLogin }, h("post-klp-login-widget", null, h("slot", { name: "login-widget" }))), h(If, { condition: renderMetaNavigation === false && renderLanguageSwitch === true }, h("post-language-switch", { id: "post-language-switch-no-meta", onDropdownToggled: e => this.handleDropdownToggled(e), mode: "dropdown" })), h("slot", { name: "main" }))))));
+    return (h(Host, { class: `stickyness-${this.stickyness} ${Boolean(this.activeDropdownElement) || Boolean(this.activeFlyout) ? 'dropdown-open' : ''}`, "data-version": packageJson.version, onKeyup: (e) => this.handleKeyUp(e) }, h("header", { class: `post-internet-header${this.fullWidth ? ' full-width' : ''}` }, h(SvgSprite, null), h("h1", { class: "visually-hidden" }, translate('Navigate on post.ch')), h(If, { condition: this.skiplinks }, h("post-skiplinks", null)), h(If, { condition: renderMetaNavigation }, h("post-meta-navigation", { orientation: "horizontal", class: "hidden-lg", "full-width": this.fullWidth, ref: el => (this.metaNav = el) }, h(If, { condition: renderLanguageSwitch }, h("post-language-switch", { id: "post-language-switch-desktop", mode: "dropdown", onDropdownToggled: e => this.handleDropdownToggled(e) })))), h("div", { class: "main-navigation-container wide-container" }, h("post-logo", null), h("button", { class: "menu-button nav-link", onClick: () => this.toggleMobileDropdown(), "aria-haspopup": "menu", "aria-controls": "post-internet-header-main-navigation", "aria-expanded": this.activeDropdownElement ? 'true' : 'false' }, h("span", { class: "menu-button-text visually-hidden" }, config.header.mobileMenu.text), h(SvgIcon, { name: this.isMainNavOpen() ? 'pi-close' : 'pi-menu' })), h("post-main-navigation", { onDropdownToggled: e => this.handleDropdownToggled(e), onFlyoutToggled: e => this.handleFlyoutToggled(e), ref: el => (this.mainNav = el) }, h(If, { condition: renderMetaNavigation }, h("post-meta-navigation", { orientation: "vertical" }, h(If, { condition: renderLanguageSwitch }, h("post-language-switch", { id: "post-language-switch-mobile", mode: "list" }))))), h("div", { class: "main-navigation-controls" }, h(If, { condition: this.search }, h("post-search", { onDropdownToggled: e => this.handleDropdownToggled(e) })), h(If, { condition: !!renderLogin }, h("post-klp-login-widget", null, h("slot", { name: "login-widget" }))), h(If, { condition: !renderMetaNavigation && renderLanguageSwitch }, h("post-language-switch", { id: "post-language-switch-no-meta", onDropdownToggled: e => this.handleDropdownToggled(e), mode: "dropdown" })), h("slot", { name: "main" }))))));
   }
   static get is() { return "swisspost-internet-header"; }
   static get encapsulation() { return "shadow"; }
@@ -336,8 +343,8 @@ export class PostInternetHeader {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
+          "original": "'de' | 'fr' | 'it' | 'en'",
+          "resolved": "\"de\" | \"en\" | \"fr\" | \"it\" | undefined",
           "references": {}
         },
         "required": false,
@@ -478,7 +485,7 @@ export class PostInternetHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Override the language switch links with custom URLs. Helpful when your application contains sub-pages and you\nwould like to stay on subpages when the user changes language."
+          "text": "Override the language switch links with custom URLs. Helpful when your application contains sub-pages, and you\nwould like to stay on subpages when the user changes language."
         },
         "attribute": "language-switch-overrides",
         "reflect": false
@@ -654,7 +661,7 @@ export class PostInternetHeader {
         "methodName": "handleLanguageChange"
       }, {
         "propName": "languageSwitchOverrides",
-        "methodName": "handleAvailableLanguagesChage"
+        "methodName": "handleAvailableLanguagesChange"
       }, {
         "propName": "osFlyoutOverrides",
         "methodName": "handleOsFlyoutOverrides"