@swisspost/internet-header 1.5.0-beta.0

package/dist/collection/components/post-main-navigation/post-main-navigation.js

@@ -0,0 +1,347 @@
+import { Host, h } from '@stencil/core';
+import { throttle } from 'throttle-debounce';
+import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+import { state } from '../../data/store';
+import { userPrefersReducedMotion } from '../../services/ui.service';
+import { SvgSprite } from '../../utils/svg-sprite.component';
+import { SvgIcon } from '../../utils/svg-icon.component';
+import { LevelOneAction } from './components/level-one-action.component';
+export class PostMainNavigation {
+  constructor() {
+    this.resizeTimer = null;
+    this.mouseLeaveTimer = null;
+    this.mouseEnterTimer = null;
+    this.activeFlyout = undefined;
+    this.mobileMenuOpen = undefined;
+  }
+  connectedCallback() {
+    this.throttledResize = throttle(300, () => this.handleResize());
+    window.addEventListener('resize', this.throttledResize, { passive: true });
+    this.setWindowHeight();
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.throttledResize);
+    clearAllBodyScrollLocks();
+    if (this.mouseEnterTimer !== null)
+      window.clearTimeout(this.mouseEnterTimer);
+    if (this.mouseLeaveTimer !== null)
+      window.clearTimeout(this.mouseLeaveTimer);
+  }
+  handleResize() {
+    // Suspend all animations and transitions on window resize
+    this.host.classList.add('no-animation');
+    if (this.resizeTimer !== null)
+      window.clearTimeout(this.resizeTimer);
+    this.resizeTimer = window.setTimeout(() => {
+      this.host.classList.remove('no-animation');
+    }, 300);
+    this.setWindowHeight();
+  }
+  // Update window height var
+  setWindowHeight() {
+    if (!this.host) {
+      return;
+    }
+    this.host.style.setProperty('--window-height', `${window.innerHeight}px`);
+    // Safari might or might not show a blank bar at the bottom where the browser
+    // controls should be. This timeout waits for this bar to appear before resetting the available height
+    window.setTimeout(() => {
+      this.host.style.setProperty('--window-height', `${window.innerHeight}px`);
+    }, 100);
+  }
+  openFlyout(id) {
+    var _a;
+    const flyout = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(id);
+    if (flyout && this.activeFlyout !== '') {
+      // Add flyout animation if there's no flyout open
+      this.addFlyoutAnimation(flyout);
+    }
+    this.activeFlyout = id;
+    this.flyoutToggled.emit(id);
+    this.setWindowHeight();
+    if (this.mouseLeaveTimer !== null) {
+      window.clearTimeout(this.mouseLeaveTimer);
+      this.mouseLeaveTimer = null;
+    }
+  }
+  closeFlyout(id) {
+    var _a;
+    if (id === undefined)
+      return;
+    const flyout = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(id);
+    if (flyout) {
+      // Add flyout animation for close action
+      this.addFlyoutAnimation(flyout);
+    }
+    this.activeFlyout = null;
+    this.flyoutToggled.emit();
+  }
+  addFlyoutAnimation(flyout) {
+    // Check if user prefers to see animations or not
+    if (!userPrefersReducedMotion()) {
+      flyout.classList.add('animate');
+      // Remove flyout animation after transition ended
+      flyout.addEventListener('transitionend', () => this.removeFlyoutAnimation(flyout), {
+        once: true,
+      });
+    }
+  }
+  removeFlyoutAnimation(flyout) {
+    flyout.classList.remove('animate');
+  }
+  isActiveFlyout(id) {
+    return id === this.activeFlyout;
+  }
+  handleMouseEnter(level) {
+    // Cancel opening the flyout if there already is one scheduled to open
+    if (this.mouseEnterTimer !== null) {
+      window.clearTimeout(this.mouseEnterTimer);
+      this.mouseEnterTimer = null;
+    }
+    // Cancel closing if we enter again
+    if (this.mouseLeaveTimer && this.activeFlyout === level.id) {
+      window.clearTimeout(this.mouseLeaveTimer);
+      this.mouseLeaveTimer = null;
+    }
+    if (window.innerWidth >= 1024 && level.flyout.length > 0 && this.activeFlyout !== level.id) {
+      // Delay opening the flyout for a moment to give users a chance to move the mouse over the navigation without triggering the flyout
+      this.mouseEnterTimer = window.setTimeout(() => {
+        this.mouseEnterTimer = null;
+        if (level.id !== undefined)
+          this.openFlyout(level.id);
+      }, 200);
+    }
+  }
+  handleMouseLeave(level) {
+    // Cancel opening the flyout if a mouseleave event happens before the flyout opened
+    if (this.mouseEnterTimer !== null) {
+      window.clearTimeout(this.mouseEnterTimer);
+    }
+    // Don't close an open flyout if the mouseleave is from another mainnav entry
+    if (this.activeFlyout && this.activeFlyout !== level.id) {
+      return;
+    }
+    if (window.innerWidth >= 1024 && level.flyout.length > 0) {
+      // Allow the pointer to shortly leave the flyout without closing it. This
+      // allows for user mistakes and makes the experience less nervous
+      this.mouseLeaveTimer = window.setTimeout(() => {
+        this.closeFlyout(level.id);
+      }, 300);
+    }
+  }
+  handleTouchEnd(event, level) {
+    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {
+      // It's the first touchstart and has a flyout, prevent link activation and open the flyout
+      if (event.cancelable)
+        event.preventDefault();
+      if (level.id)
+        this.openFlyout(level.id);
+    }
+  }
+  handleKeyPress(event, level) {
+    if (event.key === 'Enter' && !this.isActiveFlyout(level.id) && !level.noFlyout) {
+      // It's the first enter keypress and has a flyout, prevent link activation and open the flyout
+      event.preventDefault();
+      if (level.id)
+        this.openFlyout(level.id);
+    }
+  }
+  handleClick(event, level) {
+    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {
+      // It's the first click, always open the flyout, never the link
+      // This is relevant for desktop with active screenreader which
+      // translates an enter keypress to a click
+      event.preventDefault();
+      if (level.id)
+        this.openFlyout(level.id);
+    }
+  }
+  /**
+   * Disable or re-enable body scrolling, depending on whether mobile menu is open or closed
+   */
+  setBodyScroll() {
+    if (this.mobileMenuOpen) {
+      disableBodyScroll(this.flyoutElement);
+    }
+    else {
+      enableBodyScroll(this.flyoutElement);
+    }
+  }
+  /**
+   * Toggle the main navigation (only visible on mobile)
+   * @param force Force a state
+   * @returns Boolean indicating new state
+   */
+  async toggleDropdown(force) {
+    this.mobileMenuOpen = force === undefined ? !this.mobileMenuOpen : force;
+    this.dropdownToggled.emit({ open: this.mobileMenuOpen, element: this.host });
+    if (force === false) {
+      this.closeFlyout();
+    }
+    this.setBodyScroll();
+    this.setWindowHeight();
+    return this.mobileMenuOpen;
+  }
+  /**
+   * Focus the main navigation toggle button
+   */
+  async setFocus() {
+    var _a;
+    const firstLink = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.main-link');
+    if (firstLink) {
+      firstLink.focus();
+    }
+  }
+  /**
+   * Open a specific flyout
+   * @param id Flyout ID
+   */
+  async setActiveFlyout(id) {
+    this.activeFlyout = id;
+    this.flyoutToggled.emit(this.activeFlyout);
+  }
+  render() {
+    var _a;
+    if (((_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header) === undefined)
+      return;
+    const headerConfig = state.localizedConfig.header;
+    return (h(Host, null, h(SvgSprite, null), h("nav", { id: "post-internet-header-main-navigation", class: { 'main-navigation': true, 'open': this.mobileMenuOpen }, ref: el => (this.flyoutElement = el) }, h("h2", { class: "visually-hidden" }, headerConfig.translations.navMainAriaLabel), h("ul", { class: "main-container container" }, headerConfig.navMain.map(levelOne => (h("li", { key: levelOne.text, onMouseLeave: () => this.handleMouseLeave(levelOne), onMouseEnter: () => this.handleMouseEnter(levelOne) }, h(LevelOneAction, { level: levelOne, isOpen: this.isActiveFlyout(levelOne.id), onTouchEnd: e => this.handleTouchEnd(e, levelOne), onKeyDown: e => this.handleKeyPress(e, levelOne), onClick: e => this.handleClick(e, levelOne) }), !levelOne.noFlyout ? (h("div", { id: levelOne.id, class: { flyout: true, open: this.isActiveFlyout(levelOne.id) } }, h("div", { class: "wide-container" }, h("div", { class: "flyout-nav" }, h("button", { class: "nav-link flyout-back-button", onClick: () => this.closeFlyout(levelOne.id) }, h(SvgIcon, { name: "pi-pointy-arrow-right", classNames: "mirrored" }), h("span", null, headerConfig.translations.backButtonText)), h("button", { class: "flyout-close-button", onClick: () => this.closeFlyout(levelOne.id) }, h("span", { class: "visually-hidden" }, headerConfig.translations.mobileNavToggleClose), h(SvgIcon, { name: "pi-close" }))), h("h2", { class: "flyout-title container" }, h("a", { href: levelOne.url, class: "nav-link" }, levelOne.text)), h("div", { class: "flyout-row container" }, levelOne.flyout.map(flyout => (h("div", { key: flyout.title, class: "flyout-column" }, flyout.title ? h("h3", null, flyout.title) : null, h("ul", { class: "flyout-linklist" }, flyout.linkList.map(link => (h("li", { key: link.url }, h("a", { class: {
+        'flyout-link': true,
+        'active': !!(link === null || link === void 0 ? void 0 : link.isActiveOverride),
+      }, href: link.url, target: link.target }, link.title)))))))))))) : null)))), h("slot", null))));
+  }
+  static get is() { return "post-main-navigation"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-main-navigation.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-main-navigation.css"]
+    };
+  }
+  static get states() {
+    return {
+      "activeFlyout": {},
+      "mobileMenuOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dropdownToggled",
+        "name": "dropdownToggled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "DropdownEvent",
+          "resolved": "{ open: boolean; element: DropdownElement; }",
+          "references": {
+            "DropdownEvent": {
+              "location": "import",
+              "path": "../../models/header.model"
+            }
+          }
+        }
+      }, {
+        "method": "flyoutToggled",
+        "name": "flyoutToggled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string | null",
+          "resolved": "null | string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "toggleDropdown": {
+        "complexType": {
+          "signature": "(force?: boolean) => Promise<boolean>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "force Force a state"
+                }],
+              "text": "Force a state"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Toggle the main navigation (only visible on mobile)",
+          "tags": [{
+              "name": "param",
+              "text": "force Force a state"
+            }, {
+              "name": "returns",
+              "text": "Boolean indicating new state"
+            }]
+        }
+      },
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Focus the main navigation toggle button",
+          "tags": []
+        }
+      },
+      "setActiveFlyout": {
+        "complexType": {
+          "signature": "(id: string | null) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "id Flyout ID"
+                }],
+              "text": "Flyout ID"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Open a specific flyout",
+          "tags": [{
+              "name": "param",
+              "text": "id Flyout ID"
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=post-main-navigation.js.map

package/dist/collection/components/post-main-navigation/post-main-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-main-navigation.js","sourceRoot":"","sources":["../../../../src/components/post-main-navigation/post-main-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State, Method, Event, Element, EventEmitter } from '@stencil/core';\r\nimport { throttle } from 'throttle-debounce';\r\nimport { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';\r\nimport { state } from '../../data/store';\r\nimport {\r\n  DropdownElement,\r\n  DropdownEvent,\r\n  HasDropdown,\r\n  IsFocusable,\r\n  NavMainEntity,\r\n} from '../../models/header.model';\r\nimport { userPrefersReducedMotion } from '../../services/ui.service';\r\nimport { SvgSprite } from '../../utils/svg-sprite.component';\r\nimport { SvgIcon } from '../../utils/svg-icon.component';\r\nimport { LevelOneAction } from './components/level-one-action.component';\r\n\r\n@Component({\r\n  tag: 'post-main-navigation',\r\n  styleUrl: 'post-main-navigation.scss',\r\n  shadow: true,\r\n})\r\nexport class PostMainNavigation implements HasDropdown, IsFocusable {\r\n  @State() activeFlyout: string | null;\r\n  @State() mobileMenuOpen: boolean;\r\n  @Event() dropdownToggled: EventEmitter<DropdownEvent>;\r\n  @Event() flyoutToggled: EventEmitter<string | null>;\r\n  @Element() host: DropdownElement;\r\n  private throttledResize: throttle<() => void>;\r\n  private resizeTimer: number | null = null;\r\n  private mouseLeaveTimer: number | null = null;\r\n  private mouseEnterTimer: number | null = null;\r\n  private flyoutElement: HTMLElement | undefined;\r\n\r\n  connectedCallback() {\r\n    this.throttledResize = throttle(300, () => this.handleResize());\r\n    window.addEventListener('resize', this.throttledResize, { passive: true });\r\n    this.setWindowHeight();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener('resize', this.throttledResize);\r\n    clearAllBodyScrollLocks();\r\n    if (this.mouseEnterTimer !== null) window.clearTimeout(this.mouseEnterTimer);\r\n    if (this.mouseLeaveTimer !== null) window.clearTimeout(this.mouseLeaveTimer);\r\n  }\r\n\r\n  handleResize() {\r\n    // Suspend all animations and transitions on window resize\r\n    this.host.classList.add('no-animation');\r\n    if (this.resizeTimer !== null) window.clearTimeout(this.resizeTimer);\r\n    this.resizeTimer = window.setTimeout(() => {\r\n      this.host.classList.remove('no-animation');\r\n    }, 300);\r\n\r\n    this.setWindowHeight();\r\n  }\r\n\r\n  // Update window height var\r\n  setWindowHeight() {\r\n    if (!this.host) {\r\n      return;\r\n    }\r\n    this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\r\n\r\n    // Safari might or might not show a blank bar at the bottom where the browser\r\n    // controls should be. This timeout waits for this bar to appear before resetting the available height\r\n    window.setTimeout(() => {\r\n      this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\r\n    }, 100);\r\n  }\r\n\r\n  openFlyout(id: string) {\r\n    const flyout = this.host.shadowRoot?.getElementById(id);\r\n\r\n    if (flyout && this.activeFlyout !== '') {\r\n      // Add flyout animation if there's no flyout open\r\n      this.addFlyoutAnimation(flyout);\r\n    }\r\n\r\n    this.activeFlyout = id;\r\n    this.flyoutToggled.emit(id);\r\n    this.setWindowHeight();\r\n\r\n    if (this.mouseLeaveTimer !== null) {\r\n      window.clearTimeout(this.mouseLeaveTimer);\r\n      this.mouseLeaveTimer = null;\r\n    }\r\n  }\r\n\r\n  closeFlyout(id?: string) {\r\n    if (id === undefined) return;\r\n    const flyout = this.host.shadowRoot?.getElementById(id);\r\n\r\n    if (flyout) {\r\n      // Add flyout animation for close action\r\n      this.addFlyoutAnimation(flyout);\r\n    }\r\n\r\n    this.activeFlyout = null;\r\n    this.flyoutToggled.emit();\r\n  }\r\n\r\n  addFlyoutAnimation(flyout: HTMLElement) {\r\n    // Check if user prefers to see animations or not\r\n    if (!userPrefersReducedMotion()) {\r\n      flyout.classList.add('animate');\r\n\r\n      // Remove flyout animation after transition ended\r\n      flyout.addEventListener('transitionend', () => this.removeFlyoutAnimation(flyout), {\r\n        once: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  removeFlyoutAnimation(flyout: HTMLElement) {\r\n    flyout.classList.remove('animate');\r\n  }\r\n\r\n  isActiveFlyout(id?: string) {\r\n    return id === this.activeFlyout;\r\n  }\r\n\r\n  handleMouseEnter(level: NavMainEntity) {\r\n    // Cancel opening the flyout if there already is one scheduled to open\r\n    if (this.mouseEnterTimer !== null) {\r\n      window.clearTimeout(this.mouseEnterTimer);\r\n      this.mouseEnterTimer = null;\r\n    }\r\n\r\n    // Cancel closing if we enter again\r\n    if (this.mouseLeaveTimer && this.activeFlyout === level.id) {\r\n      window.clearTimeout(this.mouseLeaveTimer);\r\n      this.mouseLeaveTimer = null;\r\n    }\r\n\r\n    if (window.innerWidth >= 1024 && level.flyout.length > 0 && this.activeFlyout !== level.id) {\r\n      // Delay opening the flyout for a moment to give users a chance to move the mouse over the navigation without triggering the flyout\r\n      this.mouseEnterTimer = window.setTimeout(() => {\r\n        this.mouseEnterTimer = null;\r\n        if (level.id !== undefined) this.openFlyout(level.id);\r\n      }, 200);\r\n    }\r\n  }\r\n\r\n  handleMouseLeave(level: NavMainEntity) {\r\n    // Cancel opening the flyout if a mouseleave event happens before the flyout opened\r\n    if (this.mouseEnterTimer !== null) {\r\n      window.clearTimeout(this.mouseEnterTimer);\r\n    }\r\n\r\n    // Don't close an open flyout if the mouseleave is from another mainnav entry\r\n    if (this.activeFlyout && this.activeFlyout !== level.id) {\r\n      return;\r\n    }\r\n\r\n    if (window.innerWidth >= 1024 && level.flyout.length > 0) {\r\n      // Allow the pointer to shortly leave the flyout without closing it. This\r\n      // allows for user mistakes and makes the experience less nervous\r\n      this.mouseLeaveTimer = window.setTimeout(() => {\r\n        this.closeFlyout(level.id);\r\n      }, 300);\r\n    }\r\n  }\r\n\r\n  handleTouchEnd(event: TouchEvent, level: NavMainEntity) {\r\n    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\r\n      // It's the first touchstart and has a flyout, prevent link activation and open the flyout\r\n      if (event.cancelable) event.preventDefault();\r\n      if (level.id) this.openFlyout(level.id);\r\n    }\r\n  }\r\n\r\n  handleKeyPress(event: KeyboardEvent, level: NavMainEntity) {\r\n    if (event.key === 'Enter' && !this.isActiveFlyout(level.id) && !level.noFlyout) {\r\n      // It's the first enter keypress and has a flyout, prevent link activation and open the flyout\r\n      event.preventDefault();\r\n      if (level.id) this.openFlyout(level.id);\r\n    }\r\n  }\r\n\r\n  handleClick(event: MouseEvent, level: NavMainEntity) {\r\n    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\r\n      // It's the first click, always open the flyout, never the link\r\n      // This is relevant for desktop with active screenreader which\r\n      // translates an enter keypress to a click\r\n      event.preventDefault();\r\n      if (level.id) this.openFlyout(level.id);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Disable or re-enable body scrolling, depending on whether mobile menu is open or closed\r\n   */\r\n  setBodyScroll() {\r\n    if (this.mobileMenuOpen) {\r\n      disableBodyScroll(this.flyoutElement);\r\n    } else {\r\n      enableBodyScroll(this.flyoutElement);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Toggle the main navigation (only visible on mobile)\r\n   * @param force Force a state\r\n   * @returns Boolean indicating new state\r\n   */\r\n  @Method()\r\n  async toggleDropdown(force?: boolean) {\r\n    this.mobileMenuOpen = force === undefined ? !this.mobileMenuOpen : force;\r\n    this.dropdownToggled.emit({ open: this.mobileMenuOpen, element: this.host });\r\n\r\n    if (force === false) {\r\n      this.closeFlyout();\r\n    }\r\n\r\n    this.setBodyScroll();\r\n    this.setWindowHeight();\r\n\r\n    return this.mobileMenuOpen;\r\n  }\r\n\r\n  /**\r\n   * Focus the main navigation toggle button\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    const firstLink = this.host.shadowRoot?.querySelector<HTMLElement>('.main-link');\r\n    if (firstLink) {\r\n      firstLink.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Open a specific flyout\r\n   * @param id Flyout ID\r\n   */\r\n  @Method()\r\n  async setActiveFlyout(id: string | null) {\r\n    this.activeFlyout = id;\r\n    this.flyoutToggled.emit(this.activeFlyout);\r\n  }\r\n\r\n  render() {\r\n    if (state.localizedConfig?.header === undefined) return;\r\n    const headerConfig = state.localizedConfig.header;\r\n\r\n    return (\r\n      <Host>\r\n        <SvgSprite />\r\n        <nav\r\n          id=\"post-internet-header-main-navigation\"\r\n          class={{ 'main-navigation': true, 'open': this.mobileMenuOpen }}\r\n          ref={el => (this.flyoutElement = el)}\r\n        >\r\n          <h2 class=\"visually-hidden\">{headerConfig.translations.navMainAriaLabel}</h2>\r\n          <ul class=\"main-container container\">\r\n            {headerConfig.navMain.map(levelOne => (\r\n              <li\r\n                key={levelOne.text}\r\n                onMouseLeave={() => this.handleMouseLeave(levelOne)}\r\n                onMouseEnter={() => this.handleMouseEnter(levelOne)}\r\n              >\r\n                <LevelOneAction\r\n                  level={levelOne}\r\n                  isOpen={this.isActiveFlyout(levelOne.id)}\r\n                  onTouchEnd={e => this.handleTouchEnd(e, levelOne)}\r\n                  onKeyDown={e => this.handleKeyPress(e, levelOne)}\r\n                  onClick={e => this.handleClick(e, levelOne)}\r\n                />\r\n                {!levelOne.noFlyout ? (\r\n                  <div\r\n                    id={levelOne.id}\r\n                    class={{ flyout: true, open: this.isActiveFlyout(levelOne.id) }}\r\n                  >\r\n                    <div class=\"wide-container\">\r\n                      <div class=\"flyout-nav\">\r\n                        <button\r\n                          class=\"nav-link flyout-back-button\"\r\n                          onClick={() => this.closeFlyout(levelOne.id)}\r\n                        >\r\n                          <SvgIcon name=\"pi-pointy-arrow-right\" classNames=\"mirrored\" />\r\n                          <span>{headerConfig.translations.backButtonText}</span>\r\n                        </button>\r\n                        <button\r\n                          class=\"flyout-close-button\"\r\n                          onClick={() => this.closeFlyout(levelOne.id)}\r\n                        >\r\n                          <span class=\"visually-hidden\">\r\n                            {headerConfig.translations.mobileNavToggleClose}\r\n                          </span>\r\n                          <SvgIcon name=\"pi-close\" />\r\n                        </button>\r\n                      </div>\r\n                      <h2 class=\"flyout-title container\">\r\n                        <a href={levelOne.url} class=\"nav-link\">\r\n                          {levelOne.text}\r\n                        </a>\r\n                      </h2>\r\n                      <div class=\"flyout-row container\">\r\n                        {levelOne.flyout.map(flyout => (\r\n                          <div key={flyout.title} class=\"flyout-column\">\r\n                            {flyout.title ? <h3>{flyout.title}</h3> : null}\r\n                            <ul class=\"flyout-linklist\">\r\n                              {flyout.linkList.map(link => (\r\n                                <li key={link.url}>\r\n                                  <a\r\n                                    class={{\r\n                                      'flyout-link': true,\r\n                                      'active': !!link?.isActiveOverride,\r\n                                    }}\r\n                                    href={link.url}\r\n                                    target={link.target}\r\n                                  >\r\n                                    {link.title}\r\n                                  </a>\r\n                                </li>\r\n                              ))}\r\n                            </ul>\r\n                          </div>\r\n                        ))}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                ) : null}\r\n              </li>\r\n            ))}\r\n          </ul>\r\n          <slot></slot>\r\n        </nav>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/post-meta-navigation/post-meta-navigation.css

@@ -0,0 +1,290 @@
+/**
+ * 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
+ */
+@font-face {
+  font-display: swap;
+  font-family: "Frutiger Neue For Post";
+  font-weight: 700;
+  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff") format("woff");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Frutiger Neue For Post";
+  font-weight: 400;
+  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff");
+}
+@font-face {
+  font-display: swap;
+  font-family: "Frutiger Neue For Post";
+  font-weight: 300;
+  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff");
+}
+*,
+:host,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
+}
+
+button {
+  font: inherit;
+  padding: 0;
+}
+
+img,
+svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+@media (forced-colors: active) {
+  svg {
+    color: white;
+  }
+}
+
+.meta-list, .no-list {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.btn-blank {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+}
+
+.meta-link, .nav-link {
+  text-decoration: none;
+  color: rgba(0, 0, 0, 0.8);
+  transition: color 200ms;
+  background-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  border: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.meta-link:hover, .nav-link:hover, .meta-link:focus, .nav-link:focus {
+  color: black;
+}
+.meta-link > svg, .nav-link > svg {
+  width: 1.4em;
+  height: 1.4em;
+  flex-shrink: 0;
+}
+.meta-link > span, .nav-link > span {
+  flex-shrink: 1;
+}
+
+.box > *:first-child {
+  margin-top: 0;
+}
+.box > *:last-child {
+  margin-bottom: 0;
+}
+
+.mirrored {
+  transform: scaleX(-1);
+}
+
+.rotate-270 {
+  transform: rotate(270deg);
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.light {
+  font-weight: 300;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.d-inline-flex {
+  display: inline-flex;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+@media (min-width: 1441px) {
+  .wide-container {
+    margin: 0 auto;
+    max-width: 1440px;
+  }
+}
+
+@media (max-width: 599.98px) {
+  .container {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+}
+@media (min-width: 600px) and (max-width: 1023.98px) {
+  .container {
+    padding-right: 32px;
+    padding-left: 32px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  border: 0;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+
+@media (max-width: -0.02px) {
+  .hidden-xs {
+    display: none;
+  }
+}
+
+@media (max-width: 399.98px) {
+  .hidden-sm {
+    display: none;
+  }
+}
+
+@media (max-width: 599.98px) {
+  .hidden-rg {
+    display: none;
+  }
+}
+
+@media (max-width: 779.98px) {
+  .hidden-md {
+    display: none;
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .hidden-lg {
+    display: none;
+  }
+}
+
+@media (max-width: 1279.98px) {
+  .hidden-xl {
+    display: none;
+  }
+}
+
+@media (max-width: 1440.98px) {
+  .hidden-xxl {
+    display: none;
+  }
+}
+
+:host {
+  display: block;
+  background: #faf9f8;
+  font-size: 0.875rem;
+}
+
+.meta-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  min-height: 3rem;
+}
+@media (min-width: 1441px) {
+  .meta-container:not(.full-width) {
+    margin: 0 auto;
+    max-width: 1440px;
+  }
+}
+.meta-container.vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+@media (max-width: 599.98px) {
+  .meta-container.vertical {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+}
+@media (min-width: 600px) and (max-width: 1023.98px) {
+  .meta-container.vertical {
+    padding-right: 32px;
+    padding-left: 32px;
+  }
+}
+@media (min-width: 1024px) {
+  .meta-container.vertical {
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+}
+@media (min-width: 1024px) {
+  .meta-container.vertical {
+    display: none;
+  }
+}
+.meta-container.horizontal ::slotted(*) {
+  --separator-display: block;
+  --separator-height: 2.125rem;
+}
+
+.horizontal .meta-navigation {
+  padding-right: 1rem;
+}
+
+.meta-list {
+  display: flex;
+}
+.vertical .meta-list {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.meta-link {
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  min-height: 2.125rem;
+  border-radius: 3px;
+}
+.meta-link.active {
+  background: #fc0;
+  color: black;
+}
+.vertical .meta-link {
+  color: black;
+  padding: 0;
+}
+.vertical .meta-link.active {
+  padding: 0 0.5rem;
+  margin-left: -0.5rem;
+}