@swisspost/internet-header 1.5.0-beta.2 → 1.5.1

package/dist/esm/post-main-navigation.entry.js.map

@@ -1 +1 @@
-{"file":"post-main-navigation.entry.js","mappings":"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","names":[],"sources":["./src/components/post-main-navigation/components/level-one-action.component.tsx","./src/components/post-main-navigation/post-main-navigation.scss?tag=post-main-navigation&encapsulation=shadow","./src/components/post-main-navigation/post-main-navigation.tsx"],"sourcesContent":["import { h } from '@stencil/core';\r\nimport { NavMainEntity } from '../../../models/header.model';\r\n\r\nexport const LevelOneAction = (props: {\r\n  level: NavMainEntity;\r\n  isOpen: boolean;\r\n  onTouchEnd: (e: any) => void;\r\n  onKeyDown: (e: any) => void;\r\n  onClick: (e: any) => void;\r\n}) => {\r\n  const TagName = props.level.url ? 'a' : 'button';\r\n\r\n  return (\r\n    <TagName\r\n      class={{\r\n        'main-link': true,\r\n        'active': !!props.level.isActiveOverride,\r\n        'focus': props.isOpen,\r\n      }}\r\n      href={props.level.url}\r\n      title={\r\n        props.level.title?.trim() && props.level.title?.trim() !== props.level.text?.trim()\r\n          ? props.level.title\r\n          : undefined\r\n      }\r\n      tabindex={props.level.url ? undefined : 0}\r\n      aria-haspopup={!props.level.noFlyout + ''}\r\n      aria-expanded={props.level.noFlyout ? null : props.isOpen + ''}\r\n      onTouchEnd={e => props.onTouchEnd(e)}\r\n      onKeyDown={e => props.onKeyDown(e)}\r\n      onClick={e => props.onClick(e)}\r\n    >\r\n      <span>{props.level.text}</span>\r\n      <svg aria-hidden=\"true\">\r\n        <use href=\"#pi-pointy-arrow-right\" />\r\n      </svg>\r\n    </TagName>\r\n  );\r\n};\r\n","@use '@swisspost/design-system-styles/variables/color';\r\n@use '@swisspost/design-system-styles/placeholders/text';\r\n@use '@swisspost/design-system-styles/functions';\r\n@use '../../utils/utils.scss';\r\n@use '../../utils/mixins.scss';\r\n\r\n:host {\r\n  --host-window-height: var(--window-height, 100vh);\r\n  --calculated-header-height: calc(var(--header-height) + 1px);\r\n\r\n  display: block;\r\n  min-width: 0;\r\n  height: var(--header-height);\r\n}\r\n\r\n:host(.no-animation) {\r\n  * {\r\n    animation: none !important;\r\n    transition: none !important;\r\n  }\r\n}\r\n\r\n.main-navigation,\r\n.main-container,\r\n.main-container li,\r\n.main-link {\r\n  @include mixins.min(lg) {\r\n    height: 100%;\r\n  }\r\n}\r\n\r\n.main-navigation {\r\n  font-size: functions.px-to-rem(18px);\r\n\r\n  @include mixins.min(lg) {\r\n    font-size: functions.px-to-rem(16px);\r\n  }\r\n\r\n  @include mixins.min(xl) {\r\n    margin: 0 0.75rem;\r\n    font-size: functions.px-to-rem(18px);\r\n  }\r\n\r\n  @include mixins.min(xxl) {\r\n    font-size: functions.px-to-rem(20px);\r\n  }\r\n\r\n  @include mixins.max(lg) {\r\n    position: absolute;\r\n    top: var(--calculated-header-height);\r\n    left: 0;\r\n    background: white;\r\n    height: calc(var(--host-window-height) - var(--calculated-header-height));\r\n    width: 100%;\r\n    margin: 0;\r\n    overflow: hidden scroll;\r\n    -webkit-overflow-scrolling: touch;\r\n    overscroll-behavior: contain;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    z-index: -1;\r\n    visibility: hidden;\r\n    transform: translateY(-100%);\r\n    transition: transform 0.35s, visibility 0.35s;\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition: none;\r\n    }\r\n\r\n    &.open {\r\n      transform: translateY(0);\r\n      visibility: visible;\r\n    }\r\n  }\r\n}\r\n\r\n.main-container {\r\n  @extend %no-list;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n\r\n  @include mixins.max(lg) {\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n    justify-content: flex-start;\r\n    padding-top: 2.5rem;\r\n    padding-bottom: 2.5rem;\r\n\r\n    > li + li {\r\n      border-top: 1px solid color.$gray-10;\r\n    }\r\n  }\r\n\r\n  @include mixins.min(lg) {\r\n    padding-right: 0;\r\n    padding-left: 0;\r\n  }\r\n\r\n  > li {\r\n    flex: 0 1 auto;\r\n    min-width: 0;\r\n  }\r\n}\r\n\r\n.main-link {\r\n  @extend %nav-link;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  padding-right: 0.75rem;\r\n  padding-left: 0.75rem;\r\n  text-align: left;\r\n  cursor: pointer;\r\n  width: 100%;\r\n\r\n  @include mixins.min(lg) {\r\n    svg {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  @include mixins.max(lg) {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    font-weight: 300;\r\n    padding: 0.625rem 0;\r\n    width: 100%;\r\n    text-align: left;\r\n\r\n    svg {\r\n      width: 1.5rem;\r\n      height: 1.5rem;\r\n    }\r\n  }\r\n\r\n  span {\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n  }\r\n}\r\n\r\n.main-link,\r\n.flyout-link {\r\n  position: relative;\r\n  color: black;\r\n\r\n  &::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: -1px;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 4px;\r\n    background-color: transparent;\r\n    opacity: 0;\r\n    transform: scaleX(0.8);\r\n    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\r\n      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  &:hover,\r\n  &.focus {\r\n    &::after {\r\n      background-color: color.$gray-20;\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n  }\r\n\r\n  &.active {\r\n    font-weight: 700;\r\n\r\n    &::after {\r\n      background-color: color.$yellow;\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n  }\r\n}\r\n\r\n.flyout {\r\n  left: 0;\r\n  width: 100%;\r\n  background: white;\r\n  padding-bottom: 3rem;\r\n  overflow: auto;\r\n  overscroll-behavior: contain;\r\n  visibility: hidden;\r\n\r\n  @include mixins.min(lg) {\r\n    position: absolute;\r\n    top: 100%;\r\n    max-height: calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);\r\n    z-index: -1;\r\n    box-shadow: 0 0 1px 0 rgb(0 0 0 / 40%);\r\n    transform: translateY(-100%);\r\n\r\n    &.open {\r\n      box-shadow: 0 0 8px 0 rgb(0 0 0 / 40%);\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n\r\n  @include mixins.max(lg) {\r\n    position: fixed;\r\n    top: 0;\r\n    height: 100%;\r\n    z-index: 1;\r\n    transform: translateX(100%);\r\n\r\n    &.open {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n\r\n  &.open {\r\n    visibility: visible;\r\n  }\r\n\r\n  &.animate {\r\n    transition: transform 0.35s, visibility 0.35s, box-shadow 0.35s;\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\n.flyout-nav {\r\n  @extend %font-curve-small;\r\n\r\n  display: flex;\r\n  justify-content: space-between;\r\n  min-height: 3.5rem;\r\n\r\n  // Change box-sizing to content-box to add 1px border width to flyout-nav hight.\r\n  // This ensures flyout-nav has same hight as main-navigation-container.\r\n  box-sizing: content-box;\r\n}\r\n\r\n.flyout-row {\r\n  display: flex;\r\n  gap: 1.5rem;\r\n\r\n  @include mixins.max(lg) {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n  }\r\n\r\n  @include mixins.max(rg) {\r\n    grid-template-columns: 1fr;\r\n  }\r\n}\r\n\r\n.flyout-column {\r\n  flex: 1;\r\n  max-width: 25%;\r\n\r\n  @include mixins.max(lg) {\r\n    max-width: none;\r\n  }\r\n\r\n  h3 {\r\n    @extend %font-curve-small;\r\n    margin-top: 0;\r\n  }\r\n}\r\n\r\n.flyout-back-button {\r\n  @include mixins.container-padding();\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  font-size: functions.px-to-rem(16px);\r\n  font-weight: 400;\r\n  cursor: pointer;\r\n\r\n  svg {\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n  }\r\n\r\n  @include mixins.min(lg) {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.flyout-close-button {\r\n  @extend %nav-link;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  margin-left: auto;\r\n  padding: 0 1.5rem;\r\n  cursor: pointer;\r\n\r\n  svg {\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n  }\r\n\r\n  @include mixins.max(lg) {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.flyout-linklist {\r\n  @extend %no-list;\r\n\r\n  li {\r\n    border-top: 1px solid color.$gray-10;\r\n  }\r\n\r\n  &:first-child > li {\r\n    border-top-color: transparent;\r\n  }\r\n}\r\n\r\n.flyout-link {\r\n  @extend %nav-link;\r\n\r\n  display: block;\r\n  padding: 0.75rem 0;\r\n}\r\n\r\n.flyout-title {\r\n  @extend %font-curve-bigger-regular;\r\n\r\n  margin: 2.5rem 0 1.5rem 0;\r\n\r\n  @include mixins.min(lg) {\r\n    display: none;\r\n  }\r\n}\r\n","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"],"version":3}
+{"file":"post-main-navigation.entry.js","mappings":"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","names":[],"sources":["./src/components/post-main-navigation/components/level-one-action.component.tsx","./src/components/post-main-navigation/post-main-navigation.scss?tag=post-main-navigation&encapsulation=shadow","./src/components/post-main-navigation/post-main-navigation.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { NavMainEntity } from '../../../models/header.model';\n\nexport const LevelOneAction = (props: {\n  level: NavMainEntity;\n  isOpen: boolean;\n  onTouchEnd: (e: any) => void;\n  onKeyDown: (e: any) => void;\n  onClick: (e: any) => void;\n}) => {\n  const TagName = props.level.url ? 'a' : 'button';\n\n  return (\n    <TagName\n      class={{\n        'main-link': true,\n        'active': !!props.level.isActiveOverride,\n        'focus': props.isOpen,\n      }}\n      href={props.level.url}\n      title={\n        props.level.title?.trim() && props.level.title?.trim() !== props.level.text?.trim()\n          ? props.level.title\n          : undefined\n      }\n      tabindex={props.level.url ? undefined : 0}\n      aria-haspopup={!props.level.noFlyout + ''}\n      aria-expanded={props.level.noFlyout ? null : props.isOpen + ''}\n      onTouchEnd={e => props.onTouchEnd(e)}\n      onKeyDown={e => props.onKeyDown(e)}\n      onClick={e => props.onClick(e)}\n    >\n      <span>{props.level.text}</span>\n      <svg aria-hidden=\"true\">\n        <use href=\"#pi-pointy-arrow-right\" />\n      </svg>\n    </TagName>\n  );\n};\n","@use '@swisspost/design-system-styles/variables/color';\n@use '@swisspost/design-system-styles/placeholders/text';\n@use '@swisspost/design-system-styles/functions';\n@use '../../utils/utils.scss';\n@use '../../utils/mixins.scss';\n\n:host {\n  --host-window-height: var(--window-height, 100vh);\n  --calculated-header-height: calc(var(--header-height) + 1px);\n\n  display: block;\n  min-width: 0;\n  height: var(--header-height);\n}\n\n:host(.no-animation) {\n  * {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n\n.main-navigation,\n.main-container,\n.main-container li,\n.main-link {\n  @include mixins.min(lg) {\n    height: 100%;\n  }\n}\n\n.main-navigation {\n  font-size: functions.px-to-rem(18px);\n\n  @include mixins.min(lg) {\n    font-size: functions.px-to-rem(16px);\n    margin: 0 0.75rem;\n  }\n\n  @include mixins.min(xl) {\n    font-size: functions.px-to-rem(18px);\n  }\n\n  @include mixins.min(xxl) {\n    font-size: functions.px-to-rem(20px);\n  }\n\n  @include mixins.max(lg) {\n    position: absolute;\n    top: var(--calculated-header-height);\n    left: 0;\n    background: white;\n    height: calc(var(--host-window-height) - var(--calculated-header-height));\n    width: 100%;\n    margin: 0;\n    overflow: hidden scroll;\n    -webkit-overflow-scrolling: touch;\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    z-index: -1;\n    visibility: hidden;\n    transform: translateY(-100%);\n    transition: transform 0.35s, visibility 0.35s;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &.open {\n      transform: translateY(0);\n      visibility: visible;\n    }\n  }\n}\n\n.main-container {\n  @extend %no-list;\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  @include mixins.max(lg) {\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: flex-start;\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n\n    > li + li {\n      border-top: 1px solid color.$gray-10;\n    }\n  }\n\n  @include mixins.min(lg) {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  > li {\n    flex: 0 1 auto;\n    min-width: 0;\n  }\n}\n\n.main-link {\n  @extend %nav-link;\n\n  display: flex;\n  align-items: center;\n  padding-right: 0.75rem;\n  padding-left: 0.75rem;\n  text-align: left;\n  cursor: pointer;\n  width: 100%;\n\n  @include mixins.min(lg) {\n    svg {\n      display: none;\n    }\n  }\n\n  @include mixins.max(lg) {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-weight: 300;\n    padding: 0.625rem 0;\n    width: 100%;\n    text-align: left;\n\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n  }\n\n  span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n.main-link,\n.flyout-link {\n  position: relative;\n  color: black;\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background-color: transparent;\n    opacity: 0;\n    transform: scaleX(0.8);\n    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &:hover,\n  &.focus {\n    &::after {\n      background-color: color.$gray-20;\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  &.active {\n    font-weight: 700;\n\n    &::after {\n      background-color: color.$yellow;\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n}\n\n.flyout {\n  left: 0;\n  width: 100%;\n  background: white;\n  padding-bottom: 3rem;\n  overflow: auto;\n  overscroll-behavior: contain;\n  visibility: hidden;\n\n  @include mixins.min(lg) {\n    position: absolute;\n    top: 100%;\n    max-height: calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);\n    z-index: -1;\n    box-shadow: 0 0 1px 0 rgb(0 0 0 / 40%);\n    transform: translateY(-100%);\n\n    &.open {\n      box-shadow: 0 0 8px 0 rgb(0 0 0 / 40%);\n      transform: translateY(0);\n    }\n  }\n\n  @include mixins.max(lg) {\n    position: fixed;\n    top: 0;\n    height: 100%;\n    z-index: 1;\n    transform: translateX(100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n\n  &.open {\n    visibility: visible;\n  }\n\n  &.animate {\n    transition: transform 0.35s, visibility 0.35s, box-shadow 0.35s;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n}\n\n.flyout-nav {\n  @extend %font-curve-small;\n\n  display: flex;\n  justify-content: space-between;\n  min-height: 3.5rem;\n\n  // Change box-sizing to content-box to add 1px border width to flyout-nav hight.\n  // This ensures flyout-nav has same hight as main-navigation-container.\n  box-sizing: content-box;\n}\n\n.flyout-row {\n  display: flex;\n  gap: 1.5rem;\n\n  @include mixins.max(lg) {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @include mixins.max(rg) {\n    grid-template-columns: 1fr;\n  }\n}\n\n.flyout-column {\n  flex: 1;\n  max-width: 25%;\n\n  @include mixins.max(lg) {\n    max-width: none;\n  }\n\n  h3 {\n    @extend %font-curve-small;\n    margin-top: 0;\n  }\n}\n\n.flyout-back-button {\n  @include mixins.container-padding();\n\n  display: flex;\n  align-items: center;\n  font-size: functions.px-to-rem(16px);\n  font-weight: 400;\n  cursor: pointer;\n\n  svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n\n  @include mixins.min(lg) {\n    display: none;\n  }\n}\n\n.flyout-close-button {\n  @extend %nav-link;\n\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  padding: 0 1.5rem;\n  cursor: pointer;\n\n  svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n\n  @include mixins.max(lg) {\n    display: none;\n  }\n}\n\n.flyout-linklist {\n  @extend %no-list;\n\n  li {\n    border-top: 1px solid color.$gray-10;\n  }\n\n  &:first-child > li {\n    border-top-color: transparent;\n  }\n}\n\n.flyout-link {\n  @extend %nav-link;\n\n  display: block;\n  padding: 0.75rem 0;\n}\n\n.flyout-title {\n  @extend %font-curve-bigger-regular;\n\n  margin: 2.5rem 0 1.5rem 0;\n\n  @include mixins.min(lg) {\n    display: none;\n  }\n}\n","import { Component, Host, h, State, Method, Event, Element, EventEmitter } from '@stencil/core';\nimport { throttle } from 'throttle-debounce';\nimport { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';\nimport { state } from '../../data/store';\nimport {\n  DropdownElement,\n  DropdownEvent,\n  HasDropdown,\n  IsFocusable,\n  NavMainEntity,\n} from '../../models/header.model';\nimport { userPrefersReducedMotion } from '../../services/ui.service';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { LevelOneAction } from './components/level-one-action.component';\n\n@Component({\n  tag: 'post-main-navigation',\n  styleUrl: 'post-main-navigation.scss',\n  shadow: true,\n})\nexport class PostMainNavigation implements HasDropdown, IsFocusable {\n  @State() activeFlyout: string | null;\n  @State() mobileMenuOpen: boolean;\n  @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n  @Event() flyoutToggled: EventEmitter<string | null>;\n  @Element() host: DropdownElement;\n  private throttledResize: throttle<() => void>;\n  private resizeTimer: number | null = null;\n  private mouseLeaveTimer: number | null = null;\n  private mouseEnterTimer: number | null = null;\n  private flyoutElement: HTMLElement | undefined;\n\n  connectedCallback() {\n    this.throttledResize = throttle(300, () => this.handleResize());\n    window.addEventListener('resize', this.throttledResize, { passive: true });\n    this.setWindowHeight();\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.throttledResize);\n    clearAllBodyScrollLocks();\n    if (this.mouseEnterTimer !== null) window.clearTimeout(this.mouseEnterTimer);\n    if (this.mouseLeaveTimer !== null) window.clearTimeout(this.mouseLeaveTimer);\n  }\n\n  handleResize() {\n    // Suspend all animations and transitions on window resize\n    this.host.classList.add('no-animation');\n    if (this.resizeTimer !== null) window.clearTimeout(this.resizeTimer);\n    this.resizeTimer = window.setTimeout(() => {\n      this.host.classList.remove('no-animation');\n    }, 300);\n\n    this.setWindowHeight();\n  }\n\n  // Update window height var\n  setWindowHeight() {\n    if (!this.host) {\n      return;\n    }\n    this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n\n    // Safari might or might not show a blank bar at the bottom where the browser\n    // controls should be. This timeout waits for this bar to appear before resetting the available height\n    window.setTimeout(() => {\n      this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n    }, 100);\n  }\n\n  openFlyout(id: string) {\n    const flyout = this.host.shadowRoot?.getElementById(id);\n\n    if (flyout && this.activeFlyout !== '') {\n      // Add flyout animation if there's no flyout open\n      this.addFlyoutAnimation(flyout);\n    }\n\n    this.activeFlyout = id;\n    this.flyoutToggled.emit(id);\n    this.setWindowHeight();\n\n    if (this.mouseLeaveTimer !== null) {\n      window.clearTimeout(this.mouseLeaveTimer);\n      this.mouseLeaveTimer = null;\n    }\n  }\n\n  closeFlyout(id?: string) {\n    if (id === undefined) return;\n    const flyout = this.host.shadowRoot?.getElementById(id);\n\n    if (flyout) {\n      // Add flyout animation for close action\n      this.addFlyoutAnimation(flyout);\n    }\n\n    this.activeFlyout = null;\n    this.flyoutToggled.emit();\n  }\n\n  addFlyoutAnimation(flyout: HTMLElement) {\n    // Check if user prefers to see animations or not\n    if (!userPrefersReducedMotion()) {\n      flyout.classList.add('animate');\n\n      // Remove flyout animation after transition ended\n      flyout.addEventListener('transitionend', () => this.removeFlyoutAnimation(flyout), {\n        once: true,\n      });\n    }\n  }\n\n  removeFlyoutAnimation(flyout: HTMLElement) {\n    flyout.classList.remove('animate');\n  }\n\n  isActiveFlyout(id?: string) {\n    return id === this.activeFlyout;\n  }\n\n  handleMouseEnter(level: NavMainEntity) {\n    // Cancel opening the flyout if there already is one scheduled to open\n    if (this.mouseEnterTimer !== null) {\n      window.clearTimeout(this.mouseEnterTimer);\n      this.mouseEnterTimer = null;\n    }\n\n    // Cancel closing if we enter again\n    if (this.mouseLeaveTimer && this.activeFlyout === level.id) {\n      window.clearTimeout(this.mouseLeaveTimer);\n      this.mouseLeaveTimer = null;\n    }\n\n    if (window.innerWidth >= 1024 && level.flyout.length > 0 && this.activeFlyout !== level.id) {\n      // Delay opening the flyout for a moment to give users a chance to move the mouse over the navigation without triggering the flyout\n      this.mouseEnterTimer = window.setTimeout(() => {\n        this.mouseEnterTimer = null;\n        if (level.id !== undefined) this.openFlyout(level.id);\n      }, 200);\n    }\n  }\n\n  handleMouseLeave(level: NavMainEntity) {\n    // Cancel opening the flyout if a mouseleave event happens before the flyout opened\n    if (this.mouseEnterTimer !== null) {\n      window.clearTimeout(this.mouseEnterTimer);\n    }\n\n    // Don't close an open flyout if the mouseleave is from another mainnav entry\n    if (this.activeFlyout && this.activeFlyout !== level.id) {\n      return;\n    }\n\n    if (window.innerWidth >= 1024 && level.flyout.length > 0) {\n      // Allow the pointer to shortly leave the flyout without closing it. This\n      // allows for user mistakes and makes the experience less nervous\n      this.mouseLeaveTimer = window.setTimeout(() => {\n        this.closeFlyout(level.id);\n      }, 300);\n    }\n  }\n\n  handleTouchEnd(event: TouchEvent, level: NavMainEntity) {\n    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first touchstart and has a flyout, prevent link activation and open the flyout\n      if (event.cancelable) event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  handleKeyPress(event: KeyboardEvent, level: NavMainEntity) {\n    if (event.key === 'Enter' && !this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first enter keypress and has a flyout, prevent link activation and open the flyout\n      event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  handleClick(event: MouseEvent, level: NavMainEntity) {\n    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first click, always open the flyout, never the link\n      // This is relevant for desktop with active screenreader which\n      // translates an enter keypress to a click\n      event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  /**\n   * Disable or re-enable body scrolling, depending on whether mobile menu is open or closed\n   */\n  setBodyScroll() {\n    if (this.mobileMenuOpen) {\n      disableBodyScroll(this.flyoutElement);\n    } else {\n      enableBodyScroll(this.flyoutElement);\n    }\n  }\n\n  /**\n   * Toggle the main navigation (only visible on mobile)\n   * @param force Force a state\n   * @returns Boolean indicating new state\n   */\n  @Method()\n  async toggleDropdown(force?: boolean) {\n    this.mobileMenuOpen = force === undefined ? !this.mobileMenuOpen : force;\n    this.dropdownToggled.emit({ open: this.mobileMenuOpen, element: this.host });\n\n    if (force === false) {\n      this.closeFlyout();\n    }\n\n    this.setBodyScroll();\n    this.setWindowHeight();\n\n    return this.mobileMenuOpen;\n  }\n\n  /**\n   * Focus the main navigation toggle button\n   */\n  @Method()\n  async setFocus() {\n    const firstLink = this.host.shadowRoot?.querySelector<HTMLElement>('.main-link');\n    if (firstLink) {\n      firstLink.focus();\n    }\n  }\n\n  /**\n   * Open a specific flyout\n   * @param id Flyout ID\n   */\n  @Method()\n  async setActiveFlyout(id: string | null) {\n    this.activeFlyout = id;\n    this.flyoutToggled.emit(this.activeFlyout);\n  }\n\n  render() {\n    if (state.localizedConfig?.header === undefined) return;\n    const headerConfig = state.localizedConfig.header;\n\n    return (\n      <Host>\n        <SvgSprite />\n        <nav\n          id=\"post-internet-header-main-navigation\"\n          class={{ 'main-navigation': true, 'open': this.mobileMenuOpen }}\n          ref={el => (this.flyoutElement = el)}\n        >\n          <h2 class=\"visually-hidden\">{headerConfig.translations.navMainAriaLabel}</h2>\n          <ul class=\"main-container container\">\n            {headerConfig.navMain.map(levelOne => (\n              <li\n                key={levelOne.text}\n                onMouseLeave={() => this.handleMouseLeave(levelOne)}\n                onMouseEnter={() => this.handleMouseEnter(levelOne)}\n              >\n                <LevelOneAction\n                  level={levelOne}\n                  isOpen={this.isActiveFlyout(levelOne.id)}\n                  onTouchEnd={e => this.handleTouchEnd(e, levelOne)}\n                  onKeyDown={e => this.handleKeyPress(e, levelOne)}\n                  onClick={e => this.handleClick(e, levelOne)}\n                />\n                {!levelOne.noFlyout ? (\n                  <div\n                    id={levelOne.id}\n                    class={{ flyout: true, open: this.isActiveFlyout(levelOne.id) }}\n                  >\n                    <div class=\"wide-container\">\n                      <div class=\"flyout-nav\">\n                        <button\n                          class=\"nav-link flyout-back-button\"\n                          onClick={() => this.closeFlyout(levelOne.id)}\n                        >\n                          <SvgIcon name=\"pi-pointy-arrow-right\" classNames=\"mirrored\" />\n                          <span>{headerConfig.translations.backButtonText}</span>\n                        </button>\n                        <button\n                          class=\"flyout-close-button\"\n                          onClick={() => this.closeFlyout(levelOne.id)}\n                        >\n                          <span class=\"visually-hidden\">\n                            {headerConfig.translations.mobileNavToggleClose}\n                          </span>\n                          <SvgIcon name=\"pi-close\" />\n                        </button>\n                      </div>\n                      <h2 class=\"flyout-title container\">\n                        <a href={levelOne.url} class=\"nav-link\">\n                          {levelOne.text}\n                        </a>\n                      </h2>\n                      <div class=\"flyout-row container\">\n                        {levelOne.flyout.map(flyout => (\n                          <div key={flyout.title} class=\"flyout-column\">\n                            {flyout.title ? <h3>{flyout.title}</h3> : null}\n                            <ul class=\"flyout-linklist\">\n                              {flyout.linkList.map(link => (\n                                <li key={link.url}>\n                                  <a\n                                    class={{\n                                      'flyout-link': true,\n                                      'active': !!link?.isActiveOverride,\n                                    }}\n                                    href={link.url}\n                                    target={link.target}\n                                  >\n                                    {link.title}\n                                  </a>\n                                </li>\n                              ))}\n                            </ul>\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n                  </div>\n                ) : null}\n              </li>\n            ))}\n          </ul>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/post-meta-navigation.entry.js

@@ -1,22 +1,22 @@
 import { r as registerInstance, h, H as Host } from './index-066666f4.js';
-import { s as state } from './store-d495dc07.js';
+import { s as state } from './store-837c3490.js';
 
 const postMetaNavigationCss = "@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{-webkit-box-sizing:border-box;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);-webkit-transition:color 200ms;transition:color 200ms;background-color:transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;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;-ms-flex-negative:0;flex-shrink:0}.meta-link>span,.nav-link>span{-ms-flex-negative:1;flex-shrink:1}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align: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:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;min-height:3rem}@media (min-width: 1441px){.meta-container:not(.full-width){margin:0 auto;max-width:1440px}}.meta-container.vertical{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;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:-ms-flexbox;display:flex}.vertical .meta-list{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.meta-link{font-size:0.875rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;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}";
 
-const PostMetaNavigation = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.orientation = undefined;
-    this.fullWidth = false;
-  }
-  render() {
-    var _a;
-    if (((_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header.navMeta) === undefined)
-      return;
-    const { navMeta } = state.localizedConfig.header;
-    return (h(Host, null, h("div", { class: `meta-container ${this.orientation}${this.fullWidth ? ' full-width' : ''}` }, h("nav", { class: "meta-navigation" }, h("ul", { class: "meta-list" }, navMeta === null || navMeta === void 0 ? void 0 : navMeta.filter(meta => !meta.isHomeLink).map(meta => (h("li", { key: meta.url }, h("a", { class: { 'active': meta.isActive, 'meta-link': true }, target: meta.target, href: meta.url }, h("span", { "aria-hidden": "true" }, meta.text))))))), h("slot", null))));
-  }
-};
+const PostMetaNavigation = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.orientation = undefined;
+    this.fullWidth = false;
+  }
+  render() {
+    var _a;
+    if (((_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header.navMeta) === undefined)
+      return;
+    const { navMeta } = state.localizedConfig.header;
+    return (h(Host, null, h("div", { class: `meta-container ${this.orientation}${this.fullWidth ? ' full-width' : ''}` }, h("nav", { class: "meta-navigation" }, h("ul", { class: "meta-list" }, navMeta === null || navMeta === void 0 ? void 0 : navMeta.filter(meta => !meta.isHomeLink).map(meta => (h("li", { key: meta.url }, h("a", { class: { 'active': meta.isActive, 'meta-link': true }, target: meta.target, href: meta.url }, h("span", { "aria-hidden": "true" }, meta.text))))))), h("slot", null))));
+  }
+};
 PostMetaNavigation.style = postMetaNavigationCss;
 
 export { PostMetaNavigation as post_meta_navigation };

package/dist/esm/post-meta-navigation.entry.js.map

@@ -1 +1 @@
-{"file":"post-meta-navigation.entry.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,66IAA66I;;MCQ97I,kBAAkB;;;;qBAEC,KAAK;;EAEnC,MAAM;;IACJ,IAAI,CAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,CAAC,OAAO,MAAK,SAAS;MAAE,OAAO;IAChE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC;IAEjD,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,GAAG,aAAa,GAAG,EAAE,EAAE,IACpF,WAAK,KAAK,EAAC,iBAAiB,IAC1B,UAAI,KAAK,EAAC,WAAW,IAClB,OAAO,aAAP,OAAO,uBAAP,OAAO,CACJ,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAChC,GAAG,CAAC,IAAI,KACP,UAAI,GAAG,EAAE,IAAI,CAAC,GAAG,IACf,SACE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,EACrD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,GAAG,IAEd,2BAAkB,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACzC,CACD,CACN,CAAC,CACD,CACD,EACN,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/post-meta-navigation/post-meta-navigation.scss?tag=post-meta-navigation&encapsulation=shadow","./src/components/post-meta-navigation/post-meta-navigation.tsx"],"sourcesContent":["@use \"@swisspost/design-system-styles/variables/color\";\r\n@use \"@swisspost/design-system-styles/functions\";\r\n@use \"../../utils/utils.scss\";\r\n@use \"../../utils/mixins.scss\";\r\n\r\n:host {\r\n  display: block;\r\n  background: color.$gray-background-light;\r\n  font-size: functions.px-to-rem(14px);\r\n}\r\n\r\n.meta-container {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  min-height: functions.px-to-rem(48px);\r\n\r\n  @media (min-width: 1441px) {\r\n    &:not(.full-width) {\r\n      margin: 0 auto;\r\n      max-width: 1440px;\r\n    }\r\n  }\r\n\r\n  &.vertical {\r\n    @include mixins.container-padding();\r\n\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    padding-top: 2.5rem;\r\n    padding-bottom: 2.5rem;\r\n\r\n    @include mixins.min(lg) {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  &.horizontal {\r\n    ::slotted(*) {\r\n      --separator-display: block;\r\n      --separator-height: #{functions.px-to-rem(34px)};\r\n    }\r\n  }\r\n}\r\n\r\n.meta-navigation {\r\n  .horizontal & {\r\n    padding-right: 1rem;\r\n  }\r\n}\r\n\r\n.meta-list {\r\n  @extend %no-list;\r\n  display: flex;\r\n\r\n  .vertical & {\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n  }\r\n}\r\n\r\n.meta-link {\r\n  @extend %nav-link;\r\n\r\n  font-size: functions.px-to-rem(14px);\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 0.5rem;\r\n  min-height: functions.px-to-rem(34px);\r\n  border-radius: 3px;\r\n\r\n  &.active {\r\n    background: color.$yellow;\r\n    color: black;\r\n  }\r\n\r\n  .vertical & {\r\n    color: black;\r\n    padding: 0;\r\n\r\n    &.active {\r\n      padding: 0 0.5rem;\r\n      margin-left: -0.5rem;\r\n    }\r\n  }\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\nimport { state } from '../../data/store';\r\n\r\n@Component({\r\n  tag: 'post-meta-navigation',\r\n  styleUrl: 'post-meta-navigation.scss',\r\n  shadow: true,\r\n})\r\nexport class PostMetaNavigation {\r\n  @Prop() orientation: 'horizontal' | 'vertical';\r\n  @Prop() fullWidth?: boolean = false;\r\n\r\n  render() {\r\n    if (state.localizedConfig?.header.navMeta === undefined) return;\r\n    const { navMeta } = state.localizedConfig.header;\r\n\r\n    return (\r\n      <Host>\r\n        <div class={`meta-container ${this.orientation}${this.fullWidth ? ' full-width' : ''}`}>\r\n          <nav class=\"meta-navigation\">\r\n            <ul class=\"meta-list\">\r\n              {navMeta\r\n                ?.filter(meta => !meta.isHomeLink)\r\n                .map(meta => (\r\n                  <li key={meta.url}>\r\n                    <a\r\n                      class={{ 'active': meta.isActive, 'meta-link': true }}\r\n                      target={meta.target}\r\n                      href={meta.url}\r\n                    >\r\n                      <span aria-hidden=\"true\">{meta.text}</span>\r\n                    </a>\r\n                  </li>\r\n                ))}\r\n            </ul>\r\n          </nav>\r\n          <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"post-meta-navigation.entry.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,66IAA66I;;MCQ97I,kBAAkB;;;;qBAEC,KAAK;;EAEnC,MAAM;;IACJ,IAAI,CAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,CAAC,OAAO,MAAK,SAAS;MAAE,OAAO;IAChE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC;IAEjD,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,GAAG,aAAa,GAAG,EAAE,EAAE,IACpF,WAAK,KAAK,EAAC,iBAAiB,IAC1B,UAAI,KAAK,EAAC,WAAW,IAClB,OAAO,aAAP,OAAO,uBAAP,OAAO,CACJ,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAChC,GAAG,CAAC,IAAI,KACP,UAAI,GAAG,EAAE,IAAI,CAAC,GAAG,IACf,SACE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,EACrD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,GAAG,IAEd,2BAAkB,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACzC,CACD,CACN,CAAC,CACD,CACD,EACN,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/post-meta-navigation/post-meta-navigation.scss?tag=post-meta-navigation&encapsulation=shadow","./src/components/post-meta-navigation/post-meta-navigation.tsx"],"sourcesContent":["@use \"@swisspost/design-system-styles/variables/color\";\n@use \"@swisspost/design-system-styles/functions\";\n@use \"../../utils/utils.scss\";\n@use \"../../utils/mixins.scss\";\n\n:host {\n  display: block;\n  background: color.$gray-background-light;\n  font-size: functions.px-to-rem(14px);\n}\n\n.meta-container {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  min-height: functions.px-to-rem(48px);\n\n  @media (min-width: 1441px) {\n    &:not(.full-width) {\n      margin: 0 auto;\n      max-width: 1440px;\n    }\n  }\n\n  &.vertical {\n    @include mixins.container-padding();\n\n    flex-direction: column;\n    align-items: flex-start;\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n\n    @include mixins.min(lg) {\n      display: none;\n    }\n  }\n\n  &.horizontal {\n    ::slotted(*) {\n      --separator-display: block;\n      --separator-height: #{functions.px-to-rem(34px)};\n    }\n  }\n}\n\n.meta-navigation {\n  .horizontal & {\n    padding-right: 1rem;\n  }\n}\n\n.meta-list {\n  @extend %no-list;\n  display: flex;\n\n  .vertical & {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n}\n\n.meta-link {\n  @extend %nav-link;\n\n  font-size: functions.px-to-rem(14px);\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  min-height: functions.px-to-rem(34px);\n  border-radius: 3px;\n\n  &.active {\n    background: color.$yellow;\n    color: black;\n  }\n\n  .vertical & {\n    color: black;\n    padding: 0;\n\n    &.active {\n      padding: 0 0.5rem;\n      margin-left: -0.5rem;\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { state } from '../../data/store';\n\n@Component({\n  tag: 'post-meta-navigation',\n  styleUrl: 'post-meta-navigation.scss',\n  shadow: true,\n})\nexport class PostMetaNavigation {\n  @Prop() orientation: 'horizontal' | 'vertical';\n  @Prop() fullWidth?: boolean = false;\n\n  render() {\n    if (state.localizedConfig?.header.navMeta === undefined) return;\n    const { navMeta } = state.localizedConfig.header;\n\n    return (\n      <Host>\n        <div class={`meta-container ${this.orientation}${this.fullWidth ? ' full-width' : ''}`}>\n          <nav class=\"meta-navigation\">\n            <ul class=\"meta-list\">\n              {navMeta\n                ?.filter(meta => !meta.isHomeLink)\n                .map(meta => (\n                  <li key={meta.url}>\n                    <a\n                      class={{ 'active': meta.isActive, 'meta-link': true }}\n                      target={meta.target}\n                      href={meta.url}\n                    >\n                      <span aria-hidden=\"true\">{meta.text}</span>\n                    </a>\n                  </li>\n                ))}\n            </ul>\n          </nav>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}