@oiz/stzh-components 3.3.0-beta4 → 3.3.0-beta5

package/dist/stzh-components/p-e9933daa.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhPopoverCss","ANIMATION_SHOW_DURATION","ANIMATION_HIDE_DURATION","ANIMATION_SHOW_DURATION_SMALL","ANIMATION_HIDE_DURATION_SMALL","animationContentWrapperShow","isSmall","media","matches","keyframes","opacity","options","duration","easing","animationContentWrapperHide","animationDialogShow","transform","animationDialogHide","keyCode","ESC","CLASS_BODY_OPEN","popoverCounter","StzhPopover","this","initialTouchX","initialTouchY","mediaChangeHandler","isStzhHeaderStuck","document","documentElement","style","getPropertyValue","isHeaderStuckAndViewportMicro","hasStzhHeaderParent","open","isBranchedOutToBody","branchInFromBody","handleKeydown","event","hide","onClickTrigger","toggle","computePosition","async","middleware","offset","mainAxis","distance","crossAxis","skidding","flip","padding","shift","variant","push","arrow","element","arrowElement","x","y","strategy","placement","middlewareData","triggerFirstElement","dialogElement","computedPlacement","Object","assign","position","left","top","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","isYSwipe","Math","abs","isInDropdown","target","closest","init","trigger","_a","triggerElement","firstElementChild","defaultSlot","Array","from","children","find","child","hasAttribute","addEventListener","show","branchOutToBody","toggledByMethod","waitForEvent","update","handleOutsideClick","isClickOutside","contains","isClickTrigger","openWatcher","newValue","stzhOpen","emit","component","animationShow","animationShowDialog","Promise","all","stopAnimations","contentWrapperElement","contentElement","willChange","hidden","animateTo","stzhOpened","stzhClose","animationHide","animationHideDialog","stzhClosed","distanceWatcher","setStzhHeaderParent","parent","parentElement","tagName","toLowerCase","body","append","parentNode","appendChild","rootElement","prepend","componentWillLoad","id","localization","window","stzhComponents","utils","fetchTranslations","popoverShown","classList","add","isStzh","isStzhElement","setAttribute","trap","activate","popoverHidden","remove","deactivate","componentDidRender","getAttribute","label","componentDidUpdate","updateContainerElements","componentDidLoad","autoUpdateCleanup","autoUpdate","createFocusTrap","fallbackFocus","clickOutsideDeactivates","returnFocusOnDeactivate","connectedCallback","addMediaChangeListener","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","removeMediaChangeListener","disconnect","removeEventListener","render","classes","fullwidth","size","h","Host","class","onTouchStart","onTouchEnd","ref","el","role","tabindex","onKeyDown","innerHTML","Arrow","name","onClick","type","close","stzhTextCss","StzhText","lead","font","curve","sizeSmall","sizeMedium","sizeLarge","sizeUltra"],"sources":["src/components/stzh-popover/stzh-popover.scss?tag=stzh-popover&encapsulation=scoped","src/components/stzh-popover/stzh-popover.tsx","src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\n * @prop --width: Width of popover above small breakpoint\n * @prop --min-width: Minimum width of popover above small breakpoint\n * @prop --max-width: Maximum width of popover above small breakpoint\n * @prop --padding: Padding of popover\n * @prop --content-padding: Padding of popover content\n * @prop --border-radius: Border radius of popover\n * @prop --backdrop-opacity: Opacity of popover backdrop (used on mikro breakpoint)\n *\n * @prop --stzh-popover-width: **Global**: Width of popover above small breakpoint (default `223px`)\n * @prop --stzh-popover-min-width: **Global**: Minimum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-max-width: **Global**: Maximum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-padding: **Global**: Padding of popover (default `0px`)\n * @prop --stzh-popover-content-padding: **Global**: Padding of popover content (default `8px 0px`)\n * @prop --stzh-popover-border-radius: **Global**: Border radius of popover above small breakpoint (default `3px`)\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  display: contents;\n\n  --color: #{$colorBlack};\n  --width: #{$popoverWidth};\n  --min-width: #{$popoverMinWidth};\n  --max-width: #{$popoverMaxWidth};\n  --height: auto;\n  --min-height: initial;\n  --max-height: initial;\n  --padding: #{$popoverPadding};\n  --content-padding: #{$popoverContentPadding};\n  --border-radius: #{$popoverBorderRadius};\n  --background-color: #{$popoverBackgroundColor};\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  &[size=\"large\"] {\n    --content-padding: #{$popoverLargeContentPadding};\n  }\n\n  &[variant=\"secondary\"] {\n    --background-color: #{$colorSecondary20};\n  }\n\n  &[variant=\"tooltip\"] {\n    --width: #{$tooltipWidth};\n    --min-width: #{$tooltipMinWidth};\n    --max-width: #{$tooltipMaxWidth};\n    --content-padding: #{space('small')} #{space('large')};\n    --border-radius: #{$tooltipBorderRadius};\n\n    @include mq($from: small) {\n      --content-padding: #{$tooltipPadding};\n      --color: #{$colorWhite};\n      --link-color: #{$colorWhite};\n      --hover-link-color: #{$colorWhite70op};\n      --background-color: #{$colorCoolgrey60};\n    }\n  }\n}\n\n.stzh-popover {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content-wrapper {\n    // position: absolute;\n    // width: 100%;\n    // height: 100%;\n    // pointer-events: none;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: $zIndexDialog;\n      display: flex;\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      align-items: stretch;\n      justify-content: stretch;\n    }\n  }\n\n  &__backdrop {\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 1;\n      position: absolute;\n      display: block;\n      top: 0px;\n      left: 0px;\n      width: 100%;\n      height: 100%;\n      overflow-x: hidden;\n      overflow-y: auto;\n      text-align: center;\n      background-color: var(--backdrop-background-color);\n      opacity: var(--backdrop-opacity);\n    }\n  }\n\n  &__content {\n    // pointer-events: all;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 2;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      flex-grow: 1;\n      overflow: auto;\n    }\n  }\n\n  &__dialog {\n    margin-top: auto;\n    width: 100%;\n    overflow: visible;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n    background-color: var(--background-color);\n    touch-action: none;\n    outline: none;\n    border-bottom: 2px solid $colorOldGrey13;\n    color: var(--color);\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    // TODO: check with designer\n    --stzh-link-hover-color: var(--hover-link-color);\n\n    @include mq($from: small) {\n      z-index: $zIndexPopover;\n      position: absolute;\n      display: flex;\n      width: var(--width);\n      min-width: var(--min-width);\n      max-width: var(--max-width);\n      // max-width: calc(100vw - var(--stzh-scrollbar-width) - #{space('small')});\n      height: var(--height);\n      min-height: var(--min-height);\n      max-height: var(--max-height);\n      left: auto;\n      right: auto;\n      bottom: auto;\n      border-radius: var(--border-radius);\n      box-shadow: $boxShadowPopover;\n      border: none;\n    }\n  }\n\n  &__content-inner,\n  &__content-slot-wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  &__content-slot-wrapper {\n    padding: var(--padding);\n  }\n\n  &__content-slot {\n    overflow-y: auto;\n    overflow-x: hidden;\n    overflow-scrolling: touch;\n    padding: var(--content-padding);\n  }\n\n  &__action-slot {\n    display: flex;\n    flex-direction: column;\n\n    // &:not(:empty) {\n    //   margin: space('xsmall') space('small');\n    //   margin-bottom: space('medium');\n    // }\n  }\n\n  &__label-wrapper {\n    display: flex;\n    align-items: center;\n    padding: space('small') space('large');\n    padding-right: space('medium');\n    border-bottom: 1px solid $baseBorderColor;\n    color: $colorOldGrey70;\n\n    @include mq($from: small) {\n      padding: 0;\n      border-bottom: 0;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontCurve('p2');\n    margin: 0;\n    margin-right: space('small');\n\n    @include mq($from: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__close {\n    visibility: $popoverCloseVisibility;\n    cursor: pointer;\n    display: flex;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    margin-left: auto;\n    border-radius: 50%;\n    color: $baseLeadColor;\n    padding: space('xxsmall');\n  }\n\n  &__icon {\n    --size: #{iconSize('xsmall')};\n  }\n\n  &__arrow {\n    position: absolute;\n    display: none;\n\n    @include mq($from: small) {\n      display: flex;\n    }\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  /* Only non tooltip variants */\n\n  &--default &__close,\n  &--secondary &__close {\n    &:focus {\n      box-shadow: 0 0 0 1px $colorPrimary;\n    }\n\n    @include mq($from: small) {\n      @include visuallyhiddenFocusable;\n      position: absolute;\n      top: 0;\n      right: 0;\n      transform: translate(30%, -30%);\n      background-color: $colorOldGrey5;\n    }\n  }\n\n  /* Tooltip variant */\n\n  &--tooltip &__content-inner {\n    @include mq($from: small) {\n      flex-direction: row-reverse;\n      align-items: flex-start;\n    }\n  }\n\n  &--tooltip &__close {\n    visibility: visible;\n\n    @include mq($from: small) {\n      @include tooltip__close;\n    }\n  }\n\n  &--tooltip &__icon {\n    @include mq($from: small) {\n      @include tooltip__icon;\n    }\n  }\n\n  &--tooltip &__dialog {\n    @include mq($from: small) {\n      @include tooltip-dropshadow;\n    }\n  }\n\n  &--tooltip &__content-slot {\n    @include mq($from: small) {\n      @include tooltip-fontsize;\n    }\n  }\n\n  /* Has fullwidth popover */\n\n  &--popover-fullwidth-horizontal &__dialog {\n    @include mq($from: small) {\n      left: 0 !important;\n      right: 0 !important;\n      width: 100%;\n    }\n  }\n\n  &--popover-fullwidth-vertical &__dialog {\n    @include mq($from: small) {\n      top: 0 !important;\n      bottom: 0 !important;\n      height: 100%;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhPopoverClosedEvent,\n  StzhPopoverCloseEvent,\n  StzhPopoverOpenedEvent,\n  StzhPopoverOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhPopoverLocalizedText } from \"./stzh-popover.localization\";\n\nimport Arrow from \"../stzh-tooltip/assets/arrow.svg\";\n\nconst ANIMATION_SHOW_DURATION = 200;\nconst ANIMATION_HIDE_DURATION = 300;\nconst ANIMATION_SHOW_DURATION_SMALL = 100;\nconst ANIMATION_HIDE_DURATION_SMALL = 200;\n\nfunction animationContentWrapperShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationContentWrapperHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationDialogShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }, { transform: \"translateY(0px)\" }],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationDialogHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ transform: \"translateY(0px)\" }, { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nconst keyCode = {\n  ESC: 27,\n};\n\nconst CLASS_BODY_OPEN = \"stzh-popover-open\";\n\nlet popoverCounter = 0;\n\n/**\n * @slot - Trigger element for popover\n * @slot content - Any element used as popover content\n * @slot action - `stzh-button` element\n * @slot label - Label for mobile view (alternative for label property)\n */\n@Component({\n  tag: \"stzh-popover\",\n  styleUrl: \"stzh-popover.scss\",\n  scoped: true,\n})\nexport class StzhPopover {\n  /** Whether popover should be open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Default placement of popover relative to trigger element */\n  @Prop({ reflect: true }) placement: Placement = \"bottom\";\n\n  /** Whether to stretch popover to fullwith of parent */\n  @Prop({ reflect: true }) fullwidth: \"horizontal\" | \"vertical\" | \"\" = \"\";\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"tooltip\" = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"large\" = \"default\";\n\n  /** Shifting of popover content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from popover content to trigger. \"8\" when default variant, \"16\" when tooltip variant, arrow height (8px) + spacing (4px) = 12. */\n  @Prop() distance: number;\n\n  /** Label for mobile view (use label slot as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Translation strings. */\n  @Prop() localization: StzhPopoverLocalizedText;\n\n  @Element() element: HTMLStzhPopoverElement;\n\n  /** Popover open event */\n  @Event() stzhOpen: EventEmitter<StzhPopoverOpenEvent>;\n\n  /** Popover opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhPopoverOpenedEvent>;\n\n  /** Popover close event */\n  @Event() stzhClose: EventEmitter<StzhPopoverCloseEvent>;\n\n  /** Popover closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhPopoverClosedEvent>;\n\n  private parentNode: Node;\n\n  /** Show popover content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.mediaChangeHandler();\n    if (this.isHeaderStuckAndViewportMicro) {\n      this.branchOutToBody();\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide popover content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n\n    await waitForEvent(this.element, \"stzhClosed\");\n\n    this.mediaChangeHandler();\n    if (this.isHeaderStuckAndViewportMicro) {\n      this.branchInFromBody();\n    }\n\n    return true;\n  }\n\n  /** Toggle popover content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.dialogElement && this.dialogElement.contains(event.target as HTMLElement) === false;\n\n    const isClickTrigger =\n      event.target === this.triggerElement || this.triggerElement.contains(event.target as HTMLElement);\n\n    if (isClickOutside && !isClickTrigger) {\n      this.hide();\n    }\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.dialogElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationShow = animationContentWrapperShow();\n      const animationShowDialog = animationDialogShow();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement),\n      ]);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.dialogElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentWrapperElement.hidden = false;\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationShow.keyframes,\n          animationShow.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationShowDialog.keyframes,\n          animationShowDialog.options\n        ),\n      ]);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-popover\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationHide = animationContentWrapperHide();\n      const animationHideDialog = animationDialogHide();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement),\n      ]);\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationHide.keyframes,\n          animationHide.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationHideDialog.keyframes,\n          animationHideDialog.options\n        ),\n      ]);\n\n      this.contentWrapperElement.hidden = true;\n      this.dialogElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-popover\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"distance\")\n  distanceWatcher(newValue: number) {\n    if (typeof newValue === \"number\") {\n      this.distance = newValue;\n    } else {\n      this.distance = this.variant === \"tooltip\" ? 12 : 8;\n    }\n  }\n\n  @State() computedPlacement: Placement;\n  @State() isHeaderStuckAndViewportMicro: boolean;\n  @State() isBranchedOutToBody: boolean;\n  @State() hasStzhHeaderParent: boolean;\n\n  private observer: MutationObserver;\n\n  private contentWrapperElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private rootElement: HTMLElement;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private dialogElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private id: string;\n  private trap: FocusTrap;\n  private toggledByMethod: boolean;\n\n  private setStzhHeaderParent(): boolean {\n    let parent = this.element.parentElement;\n    while (parent) {\n      if (parent.tagName && parent.tagName.toLowerCase() === \"stzh-header\") {\n        return true;\n      }\n      parent = parent.parentElement;\n    }\n    return false;\n  }\n\n  private mediaChangeHandler = () => {\n    const isStzhHeaderStuck = document.documentElement.style.getPropertyValue(\"--stzh-header-is-stuck\");\n    this.isHeaderStuckAndViewportMicro =\n      !media(\"small\").matches && isStzhHeaderStuck === \"1\" && this.hasStzhHeaderParent;\n\n    if (this.open && this.isBranchedOutToBody && !this.isHeaderStuckAndViewportMicro) {\n      this.branchInFromBody();\n    }\n  };\n\n  private branchOutToBody() {\n    document.body.append(this.element);\n    this.parentNode.appendChild(this.triggerElement);\n    this.isBranchedOutToBody = true;\n  }\n\n  private branchInFromBody() {\n    this.parentNode.appendChild(this.element);\n    this.rootElement.prepend(this.triggerElement);\n    this.isBranchedOutToBody = false;\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide();\n    }\n  };\n\n  private onClickTrigger = () => {\n    this.toggle();\n  };\n\n  private computePosition = async () => {\n    if (media(\"small\").matches) {\n      const middleware = [\n        offset({\n          mainAxis: this.distance,\n          crossAxis: this.skidding,\n        }),\n        flip({\n          padding: 5,\n        }),\n        shift({\n          padding: 5,\n        }),\n      ];\n\n      if (this.variant === \"tooltip\") {\n        middleware.push(\n          arrow({\n            element: this.arrowElement,\n            padding: 5,\n          })\n        );\n      }\n\n      const {\n        x = 0,\n        y = 0,\n        strategy = \"absolute\",\n        placement,\n        middlewareData,\n      } = await computePosition(this.triggerFirstElement, this.dialogElement, {\n        strategy: this.strategy,\n        placement: this.placement,\n        middleware,\n      });\n\n      this.computedPlacement = placement;\n\n      Object.assign(this.dialogElement.style, {\n        position: strategy,\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n          top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n        });\n      }\n    } else {\n      Object.assign(this.dialogElement.style, {\n        position: null,\n        left: null,\n        top: null,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: null,\n          top: null,\n        });\n      }\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  // private handleTouchMove = (event: TouchEvent) => {\n  //   event.preventDefault()\n  // }\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    const isYSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold;\n\n    if (isYSwipe) {\n      const isInDropdown = (event.target as HTMLElement).closest('.stzh-dropdown') !== null;\n      if (!isInDropdown){\n        this.hide();\n      }\n    }\n\n    this.initialTouchY = null;\n    this.initialTouchX = null;\n  };\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute(\"slot\")) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger;\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  };\n\n  async componentWillLoad() {\n    this.id = `stzh-popover-${popoverCounter++}`;\n    this.parentNode = this.element.parentNode;\n    this.hasStzhHeaderParent = this.setStzhHeaderParent();\n\n    this.distanceWatcher(this.distance);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"popover\");\n    }\n  }\n\n  private popoverShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"true\");\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private popoverHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"false\");\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  componentDidRender() {\n    this.computePosition();\n    this.mediaChangeHandler();\n    this.open ? this.popoverShown() : this.popoverHidden();\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (\n      (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n      (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n    ) {\n      this.triggerFirstElement.setAttribute(\n        isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n        `${this.id}-trigger-description`\n      );\n    }\n\n    if (\n      (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) ||\n      (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n    ) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n    }\n\n    if (\n      (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) ||\n      (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n    ) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n    }\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.dialogElement);\n  }\n\n  componentDidLoad() {\n    this.autoUpdateCleanup = autoUpdate(this.triggerFirstElement, this.dialogElement, this.computePosition);\n\n    this.contentWrapperElement.hidden = !this.open;\n\n    this.trap = createFocusTrap(this.dialogElement, {\n      fallbackFocus: this.dialogElement,\n      clickOutsideDeactivates: true,\n      returnFocusOnDeactivate: true,\n    });\n\n    if (this.open) {\n      this.popoverShown();\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-popover\": true,\n      [`stzh-popover--open`]: this.open,\n      [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n      [`stzh-popover--fullwidth-${this.fullwidth}`]: !!this.fullwidth,\n      [`stzh-popover--${this.size}`]: !!this.size,\n      [`stzh-popover--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div\n          class={classes}\n          onTouchStart={this.handleTouchStart}\n          onTouchEnd={this.handleTouchEnd}\n          ref={el => (this.rootElement = el as HTMLDivElement)}\n        >\n          <div ref={el => (this.triggerElement = el as HTMLDivElement)} class=\"stzh-popover__trigger\">\n            <slot></slot>\n          </div>\n          <div class=\"stzh-popover__vhidden\" id={`${this.id}-trigger-description`}>\n            {this.localization.open}\n          </div>\n          <div ref={el => (this.contentWrapperElement = el as HTMLDivElement)} class=\"stzh-popover__content-wrapper\">\n            <div class=\"stzh-popover__backdrop\"></div>\n            <div ref={el => (this.contentElement = el as HTMLDivElement)} class=\"stzh-popover__content\">\n              <div\n                ref={el => (this.dialogElement = el as HTMLDivElement)}\n                class=\"stzh-popover__dialog\"\n                role=\"dialog\"\n                tabindex=\"-1\"\n                aria-modal=\"true\"\n                aria-labelledby={this.label ? `${this.id}-label` : null}\n                aria-hidden={this.open ? \"false\" : \"true\"}\n                onKeyDown={this.handleKeydown}\n              >\n                {this.variant === \"tooltip\" && (\n                  <div\n                    class=\"stzh-popover__arrow\"\n                    ref={el => (this.arrowElement = el as HTMLDivElement)}\n                    innerHTML={Arrow}\n                  ></div>\n                )}\n                <div class=\"stzh-popover__content-inner\">\n                  <div class=\"stzh-popover__label-wrapper\">\n                    <h2 id={`${this.id}-label`} class=\"stzh-popover__label\">\n                      {this.label ? this.label : <slot name=\"label\"></slot>}\n                    </h2>\n                    <button class=\"stzh-popover__close\" onClick={() => this.hide()} type=\"button\">\n                      <stzh-icon name=\"close\" class=\"stzh-popover__icon\"></stzh-icon>\n                      <span class=\"stzh-popover__vhidden\">{this.localization.close}</span>\n                    </button>\n                  </div>\n                  <div class=\"stzh-popover__content-slot-wrapper\">\n                    <div class=\"stzh-popover__content-slot\">\n                      <slot name=\"content\"></slot>\n                    </div>\n                    <div class=\"stzh-popover__action-slot\">\n                      <slot name=\"action\"></slot>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n *\n * @prop --stzh-base-color: **Global**: Text color\n * @prop --stzh-base-lead-color: **Global**: Lead text color\n */\n\n:host {\n  --icon-size: 1.25em;\n  --icon-vertical-align: text-bottom;\n  --color: #{$baseColor};\n  --display: var(--stzh-text-display, block);\n\n  width: 100%;\n  color: var(--color);\n\n  --grid-template-areas: var(\n    --stzh-text-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-text-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-text-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n    }\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n\n  ::slotted(b),\n  ::slotted(strong),\n  ::slotted(* b),\n  ::slotted(* strong) {\n    @include font('heavy');\n  }\n\n  ::slotted(i),\n  ::slotted(em),\n  ::slotted(* i),\n  ::slotted(* em) {\n    @include font;\n  }\n\n  &[lead]:not([lead=\"false\"]) {\n    --color: #{$baseLeadColor};\n  }\n\n  &[color=\"primary\"] {\n    --color: #{$colorPrimary70};\n  }\n\n  &[color=\"secondary\"] {\n    --color: #{$colorSecondary60};\n  }\n\n  &[color=\"info\"] {\n    --color: #{$textInfoColor};\n  }\n\n  &[color=\"inherit\"] {\n    --color: initial;\n  }\n}\n\n.stzh-text {\n  --stzh-icon-size: var(--icon-size);\n  --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n  --stzh-list-font-size: \"\";\n  --stzh-list-line-height: \"\";\n  --stzh-list-letter-spacing: \"\";\n\n  // default font styling without attributes\n  @include fontCurve($textFontCurveDefault);\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  color: var(--color);\n\n  &__text {\n    grid-area: text;\n    display: flex;\n  }\n\n  &__icon {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: 0.25em;\n    }\n  }\n\n  &__text-inner {\n    flex-grow: 1;\n  }\n\n  /* Lead variant */\n\n  &--is-lead {\n    @include font('heavy');\n    @include fontCurve('lead', 'lead');\n  }\n\n  /* Font variants */\n\n  @each $font, $value in $fonts {\n    &--font-#{$font} {\n      @include font($font);\n    }\n  }\n\n  /* Curve variants */\n\n  &--curve-none {\n    font-size: inherit;\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName);\n    }\n  }\n\n  /* Size variants when consumer wants to overwrite predefined font curves */\n\n  @each $size, $value in $fontSizes {\n    &--size-#{$size} {\n      @include fontSize($size);\n    }\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $size, $value in $fontSizes {\n      &--size-#{$breakpoint}-#{$size} {\n        @include mq($from: $breakpoint) {\n          @include fontSize($size);\n        }\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n */\n@Component({\n  tag: \"stzh-text\",\n  styleUrl: \"stzh-text.scss\",\n  scoped: true\n})\nexport class StzhText {\n  /** Font used */\n  @Prop() font: Font.Fonts = \"default\";\n\n  /** Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n  /** Whether if text is lead text */\n  @Prop({ reflect: true }) lead: boolean = false;\n\n  /** Color used */\n  @Prop({ reflect: true }) color: \"default\" | \"primary\" | \"secondary\" | \"info\" | \"inherit\" = \"default\";\n\n  /** Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() size: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeSmall: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeMedium: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeLarge: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeUltra: Font.Sizes | \"inherit\" = \"inherit\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-text\": true,\n            \"stzh-text--is-lead\": this.lead,\n            [`stzh-text--font-${this.font}`]: !!this.font,\n            [`stzh-text--curve-${this.curve}`]: !!this.curve,\n            [`stzh-text--size-${this.size}`]: !!this.size,\n            [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n            [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n            [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n            [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n          }}\n        >\n          <div class=\"stzh-text__text\">\n            <div class=\"stzh-text__icon\">\n              <slot name=\"icon\"></slot>\n            </div>\n            <div class=\"stzh-text__text-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-f42f6787.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as n,a as e,g as s}from"./p-c7bfac7a.js";const i=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--stzh-app-nav-background-color:var(--stzh-color-coolgrey10);--stzh-app-nav-color:var(--stzh-color-coolgrey90);--stzh-app-nav-color-active:var(--stzh-color-primary70)}.stzh-app-nav{background-color:var(--stzh-app-nav-background-color)}.stzh-app-nav__links{display:flex;flex-direction:row;justify-content:space-between;padding:var(--stzh-space-medium) var(--stzh-space-large) var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-app-nav__links{padding:0;align-items:center}}.stzh-app-nav__link{--text-decoration-line:none;--hover-text-decoration-line:none;--color:var(--stzh-app-nav-color)}@media screen and (min-width: 900px){.stzh-app-nav__link{margin-right:var(--stzh-space-xlarge)}}.stzh-app-nav__link::last-child{margin-right:0}.stzh-app-nav .stzh-link--is-active{text-decoration:none;--color:var(--stzh-app-nav-color-active)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link--is-active{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}}.stzh-app-nav .stzh-link__inner{flex-direction:column}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__inner{flex-direction:row}}.stzh-app-nav .stzh-link__text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__text{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-weight:var(--stzh-font-weight-medium)}}.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-left:0}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xsmall);margin-top:0}}";const a=class{constructor(n){t(this,n);this.localization=undefined;this.items=[]}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"appnav")}}render(){const t={"stzh-app-nav":true};return n(e,null,n("nav",{role:"navigation",class:t,"aria-label":this.localization.title},n("div",{class:"stzh-app-nav__links",role:"list"},this.items.map((t=>n("stzh-link",{class:"stzh-app-nav__link",active:t.active,role:"listitem","a11y-current":t.a11yCurrent,href:t.href,badge:t.badge,badgeType:t.badgeType,icon:t.icon},t.text))))))}get element(){return s(this)}};a.style=i;export{a as stzh_app_nav};
-//# sourceMappingURL=p-f42f6787.entry.js.map

package/dist/stzh-components/p-f42f6787.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhAppNavCss","StzhAppNav","componentWillLoad","this","localization","window","stzhComponents","utils","fetchTranslations","element","render","classes","h","Host","role","class","title","items","map","item","active","a11yCurrent","href","badge","badgeType","icon","text"],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav&encapsulation=shadow","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":["/**\n * @prop --stzh-app-nav-background-color: Background color of app nav links.\n * @prop --stzh-app-nav-color: Text and icon color of app nav links.\n * @prop --stzh-app-nav-color-active: Text and icon color of active app nav links.\n */\n\n:host {\n  --stzh-app-nav-background-color: var(--stzh-color-coolgrey10);\n  --stzh-app-nav-color: var(--stzh-color-coolgrey90);\n  --stzh-app-nav-color-active: var(--stzh-color-primary70);\n}\n\n.stzh-app-nav {\n  background-color: var(--stzh-app-nav-background-color);\n\n  &__links {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: space('medium') space('large') space('xlarge');\n\n    @include mq($from: medium) {\n      padding: 0;\n      align-items: center;\n    }\n  }\n\n  &__link {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    --color: var(--stzh-app-nav-color);\n\n    @include mq($from: medium) {\n      margin-right: space('xlarge');\n    }\n\n    &::last-child {\n      margin-right: 0;\n    }\n  }\n\n  .stzh-link--is-active {\n    text-decoration: none;\n    --color: var(--stzh-app-nav-color-active);\n\n    @include mq($from: medium) {\n      @include font('heavy');\n    }\n  }\n\n  .stzh-link__inner {\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  .stzh-link__text {\n    @include font('medium');\n    @include fontSize('pico');\n\n    @include mq($from: medium) {\n      @include fontSize('milli');\n      font-weight: var(--stzh-font-weight-medium);\n    }\n  }\n\n  .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) + .stzh-link__text.sc-stzh-link:not(:empty), .stzh-link__text.sc-stzh-link:not(:empty) + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n    margin-top: space('xxsmall');\n    margin-left: 0;\n\n    @include mq($from: medium) {\n      margin-left: space('xsmall');\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Element } from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport { StzhAppNavItem } from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n  shadow: true,\n})\n\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** App-nav items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav role=\"navigation\" class={classes} aria-label={this.localization.title}>\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n          {this.items.map((item) => (\n            <stzh-link\n              class=\"stzh-app-nav__link\"\n              active={item.active}\n              role=\"listitem\"\n              a11y-current={item.a11yCurrent}\n              href={item.href}\n              badge={item.badge}\n              badgeType={item.badgeType}\n              icon={item.icon}\n              >{item.text}\n            </stzh-link>\n          ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,gtG,MCYTC,EAAU,M,gEAKa,E,CAIlC,uBAAMC,GACJ,IAAKC,KAAKC,aAAc,CACtBD,KAAKC,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBL,KAAKM,QAAS,S,EAI1F,MAAAC,GACE,MAAMC,EAAU,CACd,eAAgB,MAGlB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,KAAK,aAAaC,MAAOJ,EAAO,aAAcR,KAAKC,aAAaY,OACnEJ,EAAA,OAAKG,MAAM,sBAAsBD,KAAK,QACrCX,KAAKc,MAAMC,KAAKC,GACfP,EAAA,aACEG,MAAM,qBACNK,OAAQD,EAAKC,OACbN,KAAK,WAAU,eACDK,EAAKE,YACnBC,KAAMH,EAAKG,KACXC,MAAOJ,EAAKI,MACZC,UAAWL,EAAKK,UAChBC,KAAMN,EAAKM,MACTN,EAAKO,U"}