@postnord/pn-marketweb-components 3.5.2 → 3.5.3

package/umd/modules/@postnord/web-components/components/pn-action-menu.js.map

@@ -1 +1 @@
-{"file":"pn-action-menu.js","mappings":"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","names":["PnActionMenu"],"sources":["src/components/buttons/pn-action-menu/translation.ts","src/components/buttons/pn-action-menu/pn-action-menu.scss?tag=pn-action-menu","src/components/buttons/pn-action-menu/pn-action-menu.tsx"],"sourcesContent":["export const translations = {\n  BACK: {\n    sv: 'Tillbaka',\n    en: 'Back',\n    da: 'Tilbage',\n    fi: 'Takaisin',\n    no: 'Tilbake',\n  },\n};\n\nexport type PnMenuTextProp = keyof typeof translations;\n","@use 'src/globals/main';\n\npn-action-menu {\n  --pn-menu-height: unset;\n  display: inline-block;\n  position: relative;\n}\n\npn-action-menu .pn-action-menu {\n  position: relative;\n\n  &-container {\n    --pn-action-menu-offset: 0;\n\n    scroll-behavior: smooth;\n    list-style: none;\n    text-align: left;\n\n    position: absolute;\n    z-index: 100;\n\n    top: calc(100% + 0.5em);\n    left: var(--pn-action-menu-offset);\n    right: 0;\n\n    background-color: main.$white;\n    box-shadow:\n      0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1),\n      0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);\n\n    border-radius: main.$border-radius;\n    margin: 0;\n    padding: 0;\n    width: 16em;\n\n    visibility: hidden;\n    overflow: hidden;\n\n    &[data-open] {\n      visibility: visible;\n      overflow: unset;\n    }\n\n    &[data-left] {\n      right: 0;\n      left: unset;\n    }\n\n    &[data-upwards] {\n      top: unset;\n      bottom: calc(100% + 0.5em);\n      transform-origin: bottom left;\n    }\n\n    &[data-moving] {\n      overflow: hidden;\n      visibility: visible;\n      pointer-events: none;\n    }\n\n    /** Special rules for the small menu */\n    &[data-small] {\n      .pn-action-menu-list {\n        border-radius: 0.5em;\n        visibility: hidden;\n        @include main.pn-transition('visibility');\n        transition-delay: main.$timing;\n        &[data-current] {\n          overflow-x: auto;\n          visibility: visible;\n          transition-delay: 0s;\n        }\n      }\n\n      &[data-moving] > .pn-action-menu-list {\n        visibility: visible;\n      }\n\n      .pn-action-menu-item {\n        position: unset;\n      }\n\n      .pn-action-menu-sub {\n        left: 0;\n        height: 100%;\n        box-shadow: unset;\n        transform: translateX(0);\n        visibility: hidden;\n        &[data-current] {\n          visibility: visible;\n          overflow-x: auto;\n        }\n      }\n    }\n\n    @include main.pn-scrollbar();\n  }\n\n  &-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    height: var(--pn-menu-height);\n    @include main.pn-scrollbar();\n  }\n\n  &-group {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    &-label {\n      display: block;\n      color: main.$gray900;\n      font-weight: 700;\n      font-size: 0.875em;\n      padding: 1em 1em 0.5em;\n    }\n    &-helpertext {\n      display: block;\n      color: main.$gray700;\n      font-weight: 400;\n      margin: 0.25em 0 0;\n    }\n  }\n\n  &-sub {\n    z-index: 110;\n    position: absolute;\n    top: 0;\n\n    width: 100%;\n    min-width: 12em;\n\n    margin: 0;\n    padding: 0;\n\n    list-style: none;\n    background: main.$white;\n    border-radius: main.$border-radius;\n    box-shadow:\n      0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1),\n      0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);\n\n    transform: translateX(-0.5em);\n    opacity: 0;\n    visibility: hidden;\n\n    @include main.pn-scrollbar();\n    @include main.pn-transition('transform, opacity, visibility');\n    transition-delay: 0s, 0s, main.$timing;\n\n    &[data-open='true'] {\n      transform: translateX(0);\n      opacity: 1;\n      visibility: visible;\n      transition-delay: 0s, 0s, 0s;\n    }\n\n    &[data-open='false'] {\n      pointer-events: none;\n    }\n\n    &[data-x='left'] {\n      left: -100%;\n    }\n\n    &[data-x='center'] {\n      left: 0;\n    }\n\n    &[data-x='right'] {\n      left: 100%;\n    }\n\n    &[data-y='top'] {\n      top: unset;\n      bottom: 0;\n    }\n\n    &[data-y='bottom'] {\n      top: 0;\n    }\n  }\n\n  &-item {\n    position: relative;\n\n    &:first-child > .pn-action-menu-item-content > .pn-action-menu-button {\n      border-top-left-radius: 0.5em;\n      border-top-right-radius: 0.5em;\n    }\n    &:last-child > .pn-action-menu-item-content > .pn-action-menu-button {\n      border-bottom-right-radius: 0.5em;\n      border-bottom-left-radius: 0.5em;\n    }\n\n    &-text {\n      display: flex;\n      flex-direction: column;\n      margin-right: auto;\n    }\n\n    &-label {\n      color: main.$blue700;\n      font-weight: 500;\n      text-decoration: none;\n    }\n\n    &-suffix {\n      margin-left: auto;\n      font-weight: 400;\n      color: main.$gray700;\n    }\n\n    &-helpertext {\n      color: main.$gray700;\n      font-weight: 400;\n    }\n\n    &-content {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n      flex: 1 1 100%;\n      gap: 0.5em;\n      position: relative;\n\n      &[data-close] {\n        border-bottom: 0.0625em solid main.$gray200;\n      }\n\n      > pn-icon {\n        padding: 0 0.25em;\n      }\n    }\n\n    &[data-group],\n    &[data-sub] {\n      flex-direction: column;\n    }\n  }\n\n  &-button {\n    cursor: pointer;\n    position: relative;\n    -webkit-tap-highlight-color: transparent;\n\n    line-height: 1.5;\n    padding: 0.75em 1em;\n    border: 0;\n    width: 100%;\n    text-align: left;\n    text-decoration-color: transparent;\n\n    overflow: hidden;\n\n    display: flex;\n    align-items: center;\n    flex: 1 1 100%;\n    gap: 0.5em;\n\n    font-size: 1em;\n    min-height: 1.5em;\n    background-color: main.$white;\n\n    @include main.pn-transition('background-color, color, outline-color, text-decoration-color');\n    @include main.pn-ripple(main.$blue900);\n    @include main.pn-focus();\n    outline-offset: -0.2rem;\n\n    > pn-icon {\n      .pn-icon-svg > path {\n        transform-origin: center;\n        transform: rotate(0deg);\n        @include main.pn-transition('transform');\n      }\n\n      &[data-suffix][data-active] > .pn-icon-svg > path {\n        transform: rotate(180deg);\n      }\n\n      &:last-child {\n        margin-left: auto;\n      }\n    }\n\n    &:disabled {\n      pointer-events: none;\n      color: main.$gray700;\n      background-color: main.$gray50;\n    }\n\n    &:hover {\n      background-color: main.$blue25;\n    }\n\n    &:focus {\n      background-color: main.$blue50;\n    }\n\n    &[href] {\n      &:hover,\n      &:focus {\n        text-decoration-color: main.$blue700;\n      }\n    }\n\n    /*\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 0.25em;\n      height: 100%;\n      background-color: transparent;\n      @include main.pn-transition('background-color');\n    }\n\n    &[aria-expanded='true']::before {\n      background-color: main.$blue700;\n    }\n    */\n  }\n\n  &-checkbox {\n    background-color: main.$white;\n    flex: 0 0 1.5em;\n    width: 1.5em;\n    height: 1.5em;\n    border: 0.0625em solid main.$gray400;\n    border-radius: 0.25em;\n    margin-left: auto;\n\n    @include main.pn-focus-base;\n    @include main.pn-transition('background-color, border-color, outline-color');\n\n    svg polyline {\n      stroke: main.$white;\n      stroke-linecap: round;\n      stroke-dasharray: 23;\n      @include main.pn-transition('stroke-dashoffset');\n      transition-delay: 0s;\n\n      &.pn-action-menu-checkbox-checkmark-path {\n        stroke-dashoffset: 23;\n      }\n    }\n  }\n\n  &-radio {\n    display: flex;\n    gap: 0.75em;\n    padding: 0;\n    margin-left: auto;\n\n    &-outer {\n      background-color: main.$input-background;\n      border: main.$input-border;\n      border-radius: 50%;\n      height: 1.5em;\n      width: 1.5em;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      @include main.pn-focus-base;\n      @include main.pn-transition('border-color, background-color, outline-color');\n    }\n\n    &-inner {\n      transform: scale(0);\n      height: 0.75em;\n      width: 0.75em;\n      background-color: main.$input-button-background-box-active;\n      border-radius: 50%;\n      transform-origin: center center;\n      @include main.pn-transition('background-color, transform');\n    }\n  }\n\n  &-input {\n    position: absolute;\n    z-index: 10;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    left: 0;\n    margin: 0;\n    opacity: 0;\n    -webkit-tap-highlight-color: transparent;\n\n    &:checked {\n      + .pn-action-menu-button {\n        background-color: main.$blue25;\n        .pn-action-menu-checkbox {\n          border-color: main.$blue700;\n          background-color: main.$blue700;\n          polyline.pn-action-menu-checkbox-checkmark-path {\n            transition-delay: main.$timing;\n            stroke-dashoffset: 0;\n          }\n        }\n        .pn-action-menu-radio {\n          &-outer {\n            border-color: main.$border-color-default-active;\n          }\n          &-inner {\n            transform: scale(1);\n            background-color: main.$input-button-background-box-active;\n          }\n        }\n      }\n\n      &:hover {\n        background-color: main.$blue50;\n      }\n    }\n\n    &:focus-visible + .pn-action-menu-button {\n      background-color: main.$blue50;\n    }\n\n    &:disabled {\n      pointer-events: none;\n      + .pn-action-menu-button {\n        pointer-events: none;\n        color: main.$gray700;\n        background-color: main.$gray50;\n\n        .pn-action-menu-item-label {\n          color: main.$gray700;\n        }\n        .pn-action-menu-checkbox {\n          background-color: main.$gray50;\n        }\n        .pn-action-menu-radio-outer {\n          border-color: main.$gray400;\n          background-color: main.$gray50;\n        }\n        .pn-icon-svg path {\n          fill: main.$gray700;\n        }\n      }\n\n      &:checked + .pn-action-menu-button {\n        .pn-action-menu-radio-inner {\n          background-color: main.$gray400;\n        }\n        .pn-action-menu-checkbox {\n          border-color: main.$gray400;\n          background-color: main.$gray400;\n        }\n      }\n    }\n\n    &:hover + .pn-action-menu-button {\n      background-color: main.$blue50;\n      .pn-action-menu-radio-outer {\n        border-color: main.$input-button-background-box-active;\n        background-color: main.$input-button-background-hover;\n      }\n    }\n\n    &:focus-visible + .pn-action-menu-button {\n      background-color: main.$blue50;\n      .pn-action-menu-checkbox,\n      .pn-action-menu-radio .pn-action-menu-radio-outer {\n        @include main.pn-focus-visible();\n      }\n    }\n  }\n\n  &-p {\n    margin: 0;\n  }\n\n  > pn-button[data-default-icon] .pn-button {\n    &[aria-expanded='true'] .pn-icon-svg {\n      transform: rotate(180deg);\n      transition-delay: 0s;\n    }\n    .pn-icon-svg {\n      transform: rotate(0deg);\n      transition-delay: main.$timing;\n      @include main.pn-transition('transform');\n    }\n  }\n}\n","import { Component, Prop, State, Watch, Element, h, Host, Event, EventEmitter, Listen } from '@stencil/core';\n\nimport {\n  awaitTopbar,\n  en,\n  getMenuWidth,\n  getTotalHeightOffset,\n  isSmallScreen,\n  reduceMotion,\n  ripple,\n  uuidv4,\n} from '@/index';\nimport type {\n  PnLanguages,\n  PnActionMenuItem,\n  Components,\n  PnActionMenuInput,\n  PnActionMenuGroup,\n  PnMeasurements,\n} from '@/index';\n\nimport { translations, PnMenuTextProp } from './translation';\n\nimport { angle_down, angle_left, angle_right, open_in_new } from 'pn-design-assets/pn-assets/icons.js';\n\n/**\n * Create a list of actions in an accessible way.\n *\n * Option types include:\n *\n * - Regular button, click and it will collapse the menu,\n * - Checkbox/radio, toggle the option on/off\n * - Link, behaves like a regular `a[href]` element.\n *\n * You can group these actions in groups and/or sub menus.\n *\n * - `group`, an array of options. The label will act as a title for the items.\n * - `options`, an array of options. These items will appear in a sub-menu that can be toggled.\n *\n * @see {@link PnActionMenuItem}\n */\n@Component({\n  tag: 'pn-action-menu',\n  styleUrl: 'pn-action-menu.scss',\n})\nexport class PnActionMenu {\n  private readonly id: string = `pn-action-menu-${uuidv4()}`;\n\n  private menuButtonId: string = `${this.id}-button`;\n  private menuListId: string = `${this.id}-list`;\n\n  private menuTrigger: HTMLPnButtonElement;\n  private menuContainer: HTMLDivElement;\n  private menuList: HTMLMenuElement;\n\n  private animation: Animation;\n  private readonly duration: number = 400;\n  private animationDuration: number = this.duration;\n\n  private timeout: NodeJS.Timeout;\n\n  /** 16em */\n  private readonly menuWidth: number = 256;\n\n  @Element() private hostElement: HTMLElement;\n\n  @State() private smallMenu: boolean = null;\n  @State() private upwards: boolean = false;\n\n  @State() private activeSubmenu: PnActionMenuItem['value'][] = [];\n\n  @State() private isClosing = false;\n  @State() private isExpanding = false;\n\n  /** Array of action menu options. @see {@link PnActionMenuItem} */\n  @Prop() options: PnActionMenuItem[] = [];\n  /** Set any prop from the `pn-button` component here. @see {@link Components.PnButton} */\n  @Prop() button: Components.PnButton;\n\n  /** Set a custom ID for the menu. */\n  @Prop() menuId?: string = this.id;\n  /** Manually set the language. */\n  @Prop({ mutable: true }) language?: PnLanguages = null;\n\n  /** Open/close the action menu manually. @category Features */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /** Prefer that the menu open upwards, if there is enough space. @category Features */\n  @Prop() menuUp?: boolean = false;\n  /** Prefer that the submenus opens to the left, if there is enough space. @category Features */\n  @Prop() menuLeft?: boolean = false;\n\n  /** Emitted when the menu is opened or closed. */\n  @Event() private menuToggle: EventEmitter<{ open: boolean }>;\n  /** Emitted when the menu is fully hidden/visible after the animation has played. */\n  @Event() private menuVisible: EventEmitter<{ visible: boolean }>;\n  /** Emitted when an option is clicked (button, link, input or submenus). */\n  @Event() private menuOption: EventEmitter<{\n    /** Which type of menu item was clicked. */\n    type: 'button' | 'link' | 'input' | 'submenu';\n    /** If its an `input` type (checkbox/radio), it will be a generic `Event` (ChangeEvent) instead of `MouseEvent`. */\n    click: MouseEvent | Event;\n    /** The full {@link PnActionMenuItem} object. */\n    option: PnActionMenuItem;\n    /** If the submenu is open/closed. */\n    open?: Boolean;\n  }>;\n\n  @Watch('options')\n  handleOptions() {\n    this.setMenuLayout();\n  }\n\n  @Watch('open')\n  openHandler() {\n    this.setAnimationDuration();\n\n    requestAnimationFrame(() => {\n      if (this.open && !(this.isClosing || this.isExpanding)) {\n        this.setOffset();\n        this.setMenuLayout();\n      }\n\n      this.gridHandler();\n\n      this.menuToggle.emit({ open: this.open });\n\n      clearTimeout(this.timeout);\n      this.timeout = setTimeout(() => {\n        if (!this.open) {\n          this.activeSubmenu = [];\n          const subMenus = this.hostElement.querySelectorAll<HTMLUListElement>('[data-x]');\n          Array.from(subMenus).forEach(el => {\n            el.removeAttribute('data-x');\n            el.removeAttribute('data-y');\n          });\n        }\n\n        this.menuVisible.emit({ visible: this.open });\n      }, this.animationDuration);\n    });\n  }\n\n  @Watch('menuId')\n  handleMenuId() {\n    this.menuButtonId = `${this.menuId}-button`;\n    this.menuListId = `${this.menuId}-list`;\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    if (this.open) this.toggleActionMenu(false);\n  }\n\n  async componentWillLoad() {\n    if (!this.options.length) console.warn(`${this.hostElement.localName}: No options set.`);\n\n    this.handleMenuId();\n    this.setAnimationDuration();\n\n    if (this.language !== null) await awaitTopbar(this.hostElement);\n  }\n\n  componentDidLoad() {\n    this.setOffset();\n\n    if (this.open) this.gridHandler();\n  }\n\n  private translate(prop: PnMenuTextProp) {\n    return translations[prop][this.language || en];\n  }\n\n  /** Open/close the action menu. */\n  private toggleActionMenu(state?: boolean) {\n    this.open = state ?? !this.open;\n  }\n\n  private setMenuLayout() {\n    if (!this.menuContainer) return;\n\n    if (!(this.isClosing || this.isExpanding)) this.resetMaxHeight();\n\n    const measurements = this.getMenuMeasurements();\n\n    this.setDirection(measurements);\n    this.setMenuSize(measurements);\n    this.setMaxHeight(measurements);\n  }\n\n  private setDirection({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n    const fitsUpwards = sUp > hUp;\n    const fitsDownards = sDown > hDown;\n    const moreSpaceDown = sDown > sUp;\n    this.upwards = (this.menuUp && fitsUpwards) || (!fitsDownards && !moreSpaceDown);\n  }\n\n  private setMenuSize({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n    const isWidthSmall = isSmallScreen();\n    const menuFits = this.upwards ? sUp > hUp : sDown > hDown;\n    const isSmall = isWidthSmall || !menuFits;\n\n    if (isSmall !== this.smallMenu) {\n      this.smallMenu = isSmall;\n    }\n  }\n\n  private setMaxHeight({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n    if (this.smallMenu) {\n      const heightUp = hUp > sUp ? hUp - 16 : hUp;\n      const heightDown = hDown > sDown ? hDown - 8 : hDown;\n      this.hostElement.style.setProperty('--pn-menu-height', `${this.upwards ? heightUp : heightDown}px`);\n    } else this.resetMaxHeight();\n  }\n\n  private resetMaxHeight() {\n    this.hostElement.style.setProperty('--pn-menu-height', 'unset');\n  }\n\n  private setAnimationDuration() {\n    if (reduceMotion()) this.animationDuration = 0;\n    else this.animationDuration = this.duration;\n  }\n\n  private getRect(element: HTMLElement): DOMRect {\n    return element.getBoundingClientRect();\n  }\n\n  private getMenuMeasurements(): PnMeasurements {\n    const allLists = Array.from(this.menuContainer.querySelectorAll('menu'));\n    const maxHeight = Math.max(...allLists.map(el => el.scrollHeight));\n\n    const rectButton = this.getRect(this.menuTrigger);\n    const rectMenu = this.getRect(this.menuContainer);\n\n    /** Measurements upwards. */\n    const sUp = rectButton.top - getTotalHeightOffset();\n    const hUp = sUp > maxHeight ? maxHeight : sUp;\n\n    /** Measurements downwards. */\n    const sDown = innerHeight - rectMenu.top;\n    const hDown = sDown > maxHeight ? maxHeight : sDown;\n\n    return {\n      hUp,\n      hDown,\n      sUp,\n      sDown,\n    };\n  }\n\n  private setOffset() {\n    const data = this.getRect(this.hostElement);\n    const fullWidth = data.left - getMenuWidth() + this.menuWidth;\n    const isWide = fullWidth > innerWidth;\n    const offset = isWide ? fullWidth - innerWidth + 16 : 0;\n\n    if (this.menuContainer) this.menuContainer.style.setProperty('--pn-action-menu-offset', `-${offset}px`);\n  }\n\n  private getListId(option: PnActionMenuItem) {\n    return `pn-menu-${option.value}-list`;\n  }\n\n  private getButtonId(option: PnActionMenuItem) {\n    return `pn-menu-${option.value}-button`;\n  }\n\n  private getTriggerIcon() {\n    if (this.button?.icon) return;\n    return angle_down;\n  }\n\n  /** Set the path of open sub menus. */\n  private getSubMenuPath(options: PnActionMenuItem[], value: string, path = []): string[] {\n    for (const item of options) {\n      const newPath = [...path, item.value];\n      if (item.value === value) return newPath;\n\n      if (item.options || item.group) {\n        const result = this.getSubMenuPath(item.options || item.group, value, newPath);\n        if (result) return result;\n      }\n    }\n    return null;\n  }\n\n  private closeEachSubMenu() {\n    this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });\n\n    const interval = setInterval(() => {\n      if (this.smallMenu || this.activeSubmenu.length === 0) {\n        clearInterval(interval);\n        this.toggleActionMenu(false);\n      } else {\n        this.activeSubmenu.pop();\n        this.activeSubmenu = [...this.activeSubmenu];\n      }\n    }, 150);\n  }\n\n  private escButton(event: KeyboardEvent, option: PnActionMenuItem) {\n    const { key } = event;\n\n    if (key === 'Escape') {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n\n      this.isSubmenuActive(option.value) ? this.toggleSub(option) : this.toggleActionMenu();\n    }\n  }\n\n  // Animation Start\n\n  private gridHandler() {\n    if (this.open) this.openGrid();\n    else this.closeGrid();\n  }\n\n  private openGrid() {\n    const list = this.getRect(this.menuList);\n\n    const { clientHeight } = this.menuContainer;\n    const height = this.isClosing ? clientHeight : 0;\n    this.menuContainer.style.height = `${list.height}px`;\n\n    this.isExpanding = true;\n    this.animateGrid(true, `${height}px`, `${list.height}px`);\n  }\n\n  private closeGrid() {\n    const list = this.getRect(this.menuList);\n\n    const { clientHeight } = this.menuContainer;\n    const height = this.isExpanding ? clientHeight : list.height;\n    this.menuContainer.style.height = `0px`;\n\n    this.isClosing = true;\n    this.animateGrid(false, `${height}px`, `0px`);\n  }\n\n  private animateGrid(open: boolean, startHeight: string, endHeight: string) {\n    this.cancelAnimations();\n    this.animation = this.menuContainer.animate(\n      {\n        height: [startHeight, endHeight],\n      },\n      {\n        duration: this.animationDuration,\n        easing: 'cubic-bezier(0.6, 0, 0.2, 1)',\n      },\n    );\n    this.animation.onfinish = () => this.animationFinish();\n    this.animation.oncancel = () => (open ? (this.isExpanding = false) : (this.isClosing = false));\n  }\n\n  private animationFinish() {\n    this.cancelAnimations();\n    this.menuContainer.style.height = this.isClosing ? '0px' : '';\n    this.isClosing = false;\n    this.isExpanding = false;\n  }\n\n  private cancelAnimations() {\n    if (this.animation) this.animation.cancel();\n  }\n\n  // Animation end\n\n  private async optionSelect(option: PnActionMenuItem, click: MouseEvent | Event) {\n    const type = option?.options?.length ? 'submenu' : !!option.input ? 'input' : option.href ? 'link' : 'button';\n    const isSubMenu = type === 'submenu';\n\n    if (isSubMenu) this.toggleSub(option);\n    else if (type === 'button') this.closeEachSubMenu();\n    else if (type === 'input') option.checked = (click.target as HTMLInputElement).checked;\n\n    this.menuOption.emit({\n      option,\n      type,\n      click,\n      open: isSubMenu ? this.isSubmenuActive(option.value) : null,\n    });\n\n    const target = click.target as HTMLElement;\n    const element =\n      target.localName === 'input'\n        ? (target.nextElementSibling as HTMLElement)\n        : target.className === 'pn-action-menu-button'\n          ? target\n          : target.closest<HTMLElement>('.pn-action-menu-button');\n\n    const { x, width, y, top } = this.getRect(element as HTMLElement);\n    const clientCor = { clientX: x + width - 24, clientY: y - top };\n\n    ripple(click.type === 'click' ? (click as MouseEvent) : clientCor, element);\n\n    this.menuContainer.scrollTo({ top: 0 });\n  }\n\n  /** Toggle individual sub-menus inside the action menu by using the `option['value']`. */\n  private toggleSub(option: PnActionMenuItem) {\n    const { value } = option;\n\n    const path = this.getSubMenuPath(this.options, value);\n    const isActive = this.activeSubmenu.includes(value);\n    isActive && path.splice(this.activeSubmenu.indexOf(value), 1);\n\n    const item = this.hostElement.querySelector<HTMLElement>(`#${this.getListId(option)}`);\n    const data = this.getRect(item);\n\n    const spaceLeft = data.left;\n    const spaceRight = innerWidth - data.right - 8;\n\n    const fitsLeft = spaceLeft > data.width;\n    const fitsRight = spaceRight > data.width;\n\n    const climbUp = this.menuUp && data.top - data.height > 0;\n    const yDirection = climbUp ? 'top' : 'bottom';\n\n    if (!isActive && !item.dataset.x)\n      item.setAttribute(\n        'data-x',\n        this.menuLeft && fitsLeft ? 'left' : fitsRight ? 'right' : fitsLeft ? 'left' : 'center',\n      );\n    if (!isActive && !item.dataset.y) item.setAttribute('data-y', yDirection);\n\n    if (JSON.stringify(path) === JSON.stringify(this.activeSubmenu))\n      this.activeSubmenu = this.activeSubmenu.filter(item => item !== value);\n    else this.activeSubmenu = [...path];\n  }\n\n  /** Check if a sub-menu is active. */\n  private isSubmenuActive(value: string): boolean {\n    return this.activeSubmenu.includes(value);\n  }\n\n  private isMenuActive() {\n    const isRootSubInsideGroup = this.options.find(({ value }) => this.activeSubmenu.every(val => val === value));\n    return this.smallMenu && (this.activeSubmenu?.length === 0 || isRootSubInsideGroup);\n  }\n\n  private isCurrentSubMenu(value: string) {\n    return Boolean(this.activeSubmenu[this.activeSubmenu.length - 1] === value);\n  }\n\n  private getOptionTrailing(option: PnActionMenuItem) {\n    const useButtonIcon = option.options?.length && angle_right;\n    const useTrailingIcon = option.trailingIcon;\n    const useLinkIcon = option.target === '_blank' && open_in_new;\n\n    /** If the user has defined a trialing icon, use it first. */\n    const icon = useButtonIcon || useTrailingIcon || useLinkIcon;\n\n    if (icon) {\n      return <pn-icon icon={icon} color=\"blue700\" data-suffix data-active={this.isSubmenuActive(option.value)} />;\n    }\n    if (option.suffix) {\n      return <span class=\"pn-action-menu-item-suffix\">{option.suffix}</span>;\n    }\n  }\n\n  private renderCheckbox(option: PnActionMenuInput) {\n    const id = `pn-menu-${option.value}-label`;\n    const idHelper = `pn-menu-${option.value}-helpertext`;\n    return (\n      <div class=\"pn-action-menu-item-content\">\n        <input\n          type={option.input}\n          id={id}\n          class=\"pn-action-menu-input\"\n          name={option.name}\n          value={option.value}\n          checked={option.checked}\n          disabled={option.disabled}\n          aria-describedby={option.helpertext ? idHelper : null}\n          onInput={event => this.optionSelect(option, event)}\n          tabIndex={this.open ? null : -1}\n        />\n\n        <div class=\"pn-action-menu-button\">\n          {!!option.icon && <pn-icon icon={option.icon} color=\"blue700\" />}\n\n          <div class=\"pn-action-menu-item-text\">\n            <label htmlFor={id} class=\"pn-action-menu-item-label\">\n              {option.label}\n            </label>\n            {option.helpertext && (\n              <p id={idHelper} class=\"pn-action-menu-item-helpertext\">\n                <span>{option.helpertext}</span>\n              </p>\n            )}\n          </div>\n          {option.input === 'checkbox' ? (\n            <div class=\"pn-action-menu-checkbox\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <polyline class=\"pn-action-menu-checkbox-checkmark-path\" points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n              </svg>\n            </div>\n          ) : (\n            <div class=\"pn-action-menu-radio\">\n              <div class=\"pn-action-menu-radio-outer\">\n                <div class=\"pn-action-menu-radio-inner\" />\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private renderButton(option: PnActionMenuItem) {\n    const isCloseButton = option.label === 'BACK';\n    const isSub = !!option?.options?.length;\n    const isGroup = !!option?.group?.length;\n    const isLink = !!option.href && !isSub && !isGroup;\n\n    const appendedId = isCloseButton ? '-close' : '';\n    const hasIcon = isCloseButton || !!option.icon;\n\n    const trailingObject = isCloseButton ? null : this.getOptionTrailing(option);\n    const open = this.isSubmenuActive(option.value);\n    const subMenuAttrs = isSub\n      ? {\n          'aria-haspopup': 'true',\n          'aria-controls': open ? this.getListId(option) : null,\n          'aria-expanded': open?.toString(),\n        }\n      : {};\n\n    const attrs = isLink\n      ? {\n          href: option.href,\n          target: option.target,\n        }\n      : {\n          disabled: option.disabled,\n        };\n\n    const Tag = isLink ? 'a' : 'button';\n\n    return isGroup ? (\n      <div class=\"pn-action-menu-group-label\">\n        <p class=\"pn-action-menu-p\">{option.label}</p>\n        {option.helpertext && <p class=\"pn-action-menu-group-helpertext\">{option.helpertext}</p>}\n      </div>\n    ) : (\n      <div class=\"pn-action-menu-item-content\" data-close={isCloseButton}>\n        <Tag\n          id={this.getButtonId(option) + appendedId}\n          class=\"pn-action-menu-button\"\n          {...subMenuAttrs}\n          {...attrs}\n          tabIndex={this.open ? null : -1}\n          onClick={event => this.optionSelect(option, event)}\n          onKeyDown={(event: KeyboardEvent) => this.escButton(event, option)}\n        >\n          {hasIcon && <pn-icon icon={isCloseButton ? angle_left : option.icon} color=\"blue700\" />}\n          <div class=\"pn-action-menu-item-text\">\n            <span class=\"pn-action-menu-item-label\">{isCloseButton ? this.translate('BACK') : option.label}</span>\n            {option.helpertext && !isLink && <span class=\"pn-action-menu-item-helpertext\">{option.helpertext}</span>}\n          </div>\n          {trailingObject}\n        </Tag>\n      </div>\n    );\n  }\n\n  private renderSub(option: PnActionMenuItem) {\n    return (\n      <menu\n        id={this.getListId(option)}\n        aria-labelledby={this.getButtonId(option)}\n        class=\"pn-action-menu-sub\"\n        data-open={this.isSubmenuActive(option.value)?.toString()}\n        data-current={this.isCurrentSubMenu(option.value)}\n      >\n        {this.smallMenu && (\n          <li class=\"pn-action-menu-item\">\n            {this.renderButton({\n              label: 'BACK',\n              value: option.value,\n              options: option.options,\n            })}\n          </li>\n        )}\n        {option.options.map(item => this.renderMenuItem(item))}\n      </menu>\n    );\n  }\n\n  private renderGroup(option: PnActionMenuGroup) {\n    return <menu class=\"pn-action-menu-group\">{option.group.map(item => this.renderMenuItem(item))}</menu>;\n  }\n\n  private renderMenuItem(option: PnActionMenuItem) {\n    const isSub = !!option?.options?.length;\n    const isGroup = !isSub && !!option?.group?.length;\n\n    const isCheckbox = !!option.input && !isSub && !isGroup;\n\n    return (\n      <li class=\"pn-action-menu-item\" data-group={isGroup} data-sub={isSub}>\n        {isCheckbox ? this.renderCheckbox(option) : this.renderButton(option)}\n        {isSub ? this.renderSub(option) : isGroup && this.renderGroup(option)}\n      </li>\n    );\n  }\n\n  private renderMenu() {\n    return (\n      <div\n        id={this.menuListId}\n        class=\"pn-action-menu-container\"\n        role=\"region\"\n        aria-labelledby={this.menuButtonId}\n        data-open={this.open}\n        data-moving={this.isClosing || this.isExpanding}\n        data-upwards={this.upwards}\n        data-small={this.smallMenu}\n        style={{ height: '0px' }}\n        ref={el => (this.menuContainer = el)}\n      >\n        <menu class=\"pn-action-menu-list\" ref={el => (this.menuList = el)} data-current={this.isMenuActive()}>\n          {this.options?.map(option => this.renderMenuItem(option))}\n        </menu>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id={this.menuId !== this.id ? this.menuId : null} class=\"pn-action-menu\">\n          <pn-button\n            icon={this.getTriggerIcon()}\n            {...this.button}\n            buttonId={this.menuButtonId}\n            tooltipUp={!this.upwards}\n            ariahaspopup=\"true\"\n            ariacontrols={this.open ? this.menuListId : null}\n            ariaexpanded={this.open.toString()}\n            data-default-icon={!this.button?.icon}\n            onPnClick={() => this.toggleActionMenu()}\n            ref={el => (this.menuTrigger = el)}\n          />\n          {this.renderMenu()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-action-menu.js","mappings":";;;;;;;;;;;;;AAAO,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE;QACJ,EAAE,EAAE,UAAU;QACd,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,UAAU;QACd,EAAE,EAAE,SAAS;KACd;CACF;;ACRD,MAAM,eAAe,GAAG,yzaAAyza,CAAC;AACl1a,2BAAe,eAAe;;MC4CjBA,cAAY;;;;;;;yBAqBe,IAAI;uBACN,KAAK;6BAEqB,EAAE;yBAEnC,KAAK;2BACH,KAAK;uBAGE,EAAE;;sBAKd,IAAI,CAAC,EAAE;wBAEiB,IAAI;oBAGG,KAAK;sBAEnC,KAAK;wBAEH,KAAK;;IA3CjB,EAAE,GAAW,kBAAkB,MAAM,EAAE,EAAE,CAAC;IAEnD,YAAY,GAAW,GAAG,IAAI,CAAC,EAAE,SAAS,CAAC;IAC3C,UAAU,GAAW,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC;IAEvC,WAAW,CAAsB;IACjC,aAAa,CAAiB;IAC9B,QAAQ,CAAkB;IAE1B,SAAS,CAAY;IACZ,QAAQ,GAAW,GAAG,CAAC;IAChC,iBAAiB,GAAW,IAAI,CAAC,QAAQ,CAAC;IAE1C,OAAO,CAAiB;;IAGf,SAAS,GAAW,GAAG,CAAC;;;IA8BxB,UAAU,CAAkC;;IAE5C,WAAW,CAAqC;;IAEhD,UAAU,CASxB;IAGH,aAAa;QACX,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAGD,WAAW;QACT,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,qBAAqB,CAAC;YACpB,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE;gBACtD,IAAI,CAAC,SAAS,EAAE,CAAC;gBACjB,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;YAED,IAAI,CAAC,WAAW,EAAE,CAAC;YAEnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;YAE1C,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;gBACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;oBACd,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;oBACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAmB,UAAU,CAAC,CAAC;oBACjF,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE;wBAC7B,EAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;wBAC7B,EAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;qBAC9B,CAAC,CAAC;iBACJ;gBAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;aAC/C,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC5B,CAAC,CAAC;KACJ;IAGD,YAAY;QACV,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,MAAM,SAAS,CAAC;QAC5C,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,MAAM,OAAO,CAAC;KACzC;IAGD,YAAY;QACV,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KAC7C;IAED,MAAM,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;YAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,mBAAmB,CAAC,CAAC;QAEzF,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI;YAAE,MAAM,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACjE;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,EAAE,CAAC;QAEjB,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,WAAW,EAAE,CAAC;KACnC;IAEO,SAAS,CAAC,IAAoB;QACpC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;KAChD;IAEO,YAAY,GAAG,CAAC,KAAmC;QACzD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,kBAAkB,GAAG,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QACvE,IAAI,CAAC,kBAAkB;YAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;KACtD,CAAC;IAEM,uBAAuB;QAC7B,MAAM,IAAI,GAAa,IAAI,CAAC,WAAW,CAAC,WAAW,EAAc,CAAC;QAElE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KACnD;IAEO,0BAA0B;QAChC,MAAM,IAAI,GAAa,IAAI,CAAC,WAAW,CAAC,WAAW,EAAc,CAAC;QAElE,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KACtD;;IAGO,gBAAgB,CAAC,KAAe;QACtC,IAAI,CAAC,IAAI,GAAG,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;KACjC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;QAEhC,IAAI,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC;YAAE,IAAI,CAAC,cAAc,EAAE,CAAC;QAEjE,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAEhD,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAChC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAC/B,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;KACjC;IAEO,YAAY,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAkB;QAC7D,MAAM,WAAW,GAAG,GAAG,GAAG,GAAG,CAAC;QAC9B,MAAM,YAAY,GAAG,KAAK,GAAG,KAAK,CAAC;QACnC,MAAM,aAAa,GAAG,KAAK,GAAG,GAAG,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,WAAW,MAAM,CAAC,YAAY,IAAI,CAAC,aAAa,CAAC,CAAC;KAClF;IAEO,WAAW,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAkB;QAC5D,MAAM,YAAY,GAAG,aAAa,EAAE,CAAC;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,CAAC;QAC1D,MAAM,OAAO,GAAG,YAAY,IAAI,CAAC,QAAQ,CAAC;QAE1C,IAAI,OAAO,KAAK,IAAI,CAAC,SAAS,EAAE;YAC9B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;SAC1B;KACF;IAEO,YAAY,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAkB;QAC7D,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,CAAC;YAC5C,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC;YACrD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,kBAAkB,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,CAAC,CAAC;SACrG;;YAAM,IAAI,CAAC,cAAc,EAAE,CAAC;KAC9B;IAEO,cAAc;QACpB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC;KACjE;IAEO,oBAAoB;QAC1B,IAAI,YAAY,EAAE;YAAE,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC;;YAC1C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC;KAC7C;IAEO,OAAO,CAAC,OAAoB;QAClC,OAAO,OAAO,CAAC,qBAAqB,EAAE,CAAC;KACxC;IAEO,mBAAmB;QACzB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC;QACzE,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;QAEnE,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAClD,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;QAGlD,MAAM,GAAG,GAAG,UAAU,CAAC,GAAG,GAAG,oBAAoB,EAAE,CAAC;QACpD,MAAM,GAAG,GAAG,GAAG,GAAG,SAAS,GAAG,SAAS,GAAG,GAAG,CAAC;;QAG9C,MAAM,KAAK,GAAG,WAAW,GAAG,QAAQ,CAAC,GAAG,CAAC;QACzC,MAAM,KAAK,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC;QAEpD,OAAO;YACL,GAAG;YACH,KAAK;YACL,GAAG;YACH,KAAK;SACN,CAAC;KACH;IAEO,SAAS;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5C,MAAM,aAAa,GAAG,YAAY,EAAE,CAAC;;QAGrC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;QAC3B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;;QAG7C,MAAM,YAAY,GAAG,aAAa,GAAG,EAAE,CAAC;QACxC,MAAM,aAAa,GAAG,UAAU,GAAG,EAAE,CAAC;QAEtC,IAAI,MAAM,GAAG,CAAC,CAAC;;QAGf,IAAI,QAAQ,GAAG,YAAY,EAAE;YAC3B,MAAM,GAAG,YAAY,GAAG,QAAQ,CAAC;SAClC;;aAEI,IAAI,SAAS,GAAG,aAAa,EAAE;YAClC,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;SACpC;QAED,IAAI,IAAI,CAAC,aAAa;YAAE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,MAAM,IAAI,CAAC,CAAC;KACxG;IAEO,SAAS,CAAC,MAAwB;QACxC,OAAO,WAAW,MAAM,CAAC,KAAK,OAAO,CAAC;KACvC;IAEO,WAAW,CAAC,MAAwB;QAC1C,OAAO,WAAW,MAAM,CAAC,KAAK,SAAS,CAAC;KACzC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,MAAM,EAAE,IAAI;YAAE,OAAO;QAC9B,OAAO,YAAY,CAAC;KACrB;;IAGO,cAAc,CAAC,OAA2B,EAAE,KAAa,EAAE,IAAI,GAAG,EAAE;QAC1E,KAAK,MAAM,IAAI,IAAI,OAAO,EAAE;YAC1B,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK;gBAAE,OAAO,OAAO,CAAC;YAEzC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,EAAE;gBAC9B,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;gBAC/E,IAAI,MAAM;oBAAE,OAAO,MAAM,CAAC;aAC3B;SACF;QACD,OAAO,IAAI,CAAC;KACb;IAEO,gBAAgB,CAAC,eAAwB,KAAK;QACpD,IAAI,CAAC,YAAY;YAAE,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAE7F,MAAM,QAAQ,GAAG,WAAW,CAAC;YAC3B,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBACrD,aAAa,CAAC,QAAQ,CAAC,CAAC;gBACxB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;aAC9B;iBAAM;gBACL,IAAI,CAAC,aAAa,CAAC,GAAG,EAAE,CAAC;gBACzB,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;aAC9C;SACF,EAAE,GAAG,CAAC,CAAC;KACT;IAEO,SAAS,CAAC,KAAoB,EAAE,MAAwB;QAC9D,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;QAEtB,IAAI,GAAG,KAAK,QAAQ,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACvF;KACF;;IAIO,WAAW;QACjB,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;;YAC1B,IAAI,CAAC,SAAS,EAAE,CAAC;KACvB;IAEO,QAAQ;QACd,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEzC,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC;QAC5C,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC;QAErD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,GAAG,MAAM,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC;KAC3D;IAEO,SAAS;QACf,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAElC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEzC,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC;QAC5C,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,GAAG,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC;QAC7D,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;QAExC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,GAAG,MAAM,IAAI,EAAE,KAAK,CAAC,CAAC;KAC/C;IAEO,WAAW,CAAC,IAAa,EAAE,WAAmB,EAAE,SAAiB;QACvE,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CACzC;YACE,MAAM,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC;SACjC,EACD;YACE,QAAQ,EAAE,IAAI,CAAC,iBAAiB;YAChC,MAAM,EAAE,8BAA8B;SACvC,CACF,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;QACvD,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,OAAO,IAAI,IAAI,IAAI,CAAC,WAAW,GAAG,KAAK,KAAK,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC;KAChG;IAEO,eAAe;QACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,GAAG,EAAE,CAAC;QAC9D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;KAC1B;IAEO,gBAAgB;QACtB,IAAI,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;KAC7C;;IAIO,MAAM,YAAY,CAAC,MAAwB,EAAE,KAAyB;QAC5E,MAAM,IAAI,GAAG,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;QAC9G,MAAM,SAAS,GAAG,IAAI,KAAK,SAAS,CAAC;QAErC,IAAI,SAAS;YAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;aACjC,IAAI,IAAI,KAAK,QAAQ;YAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;aAC/C,IAAI,IAAI,KAAK,OAAO;YAAE,MAAM,CAAC,OAAO,GAAI,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC;QAEvF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,MAAM;YACN,IAAI;YACJ,KAAK;YACL,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI;SAC5D,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,OAAO,GACX,MAAM,CAAC,SAAS,KAAK,OAAO;cACvB,MAAM,CAAC,kBAAkC;cAC1C,MAAM,CAAC,SAAS,KAAK,uBAAuB;kBAC1C,MAAM;kBACN,MAAM,CAAC,OAAO,CAAc,wBAAwB,CAAC,CAAC;QAE9D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,OAAsB,CAAC,CAAC;QAClE,MAAM,SAAS,GAAG,EAAE,OAAO,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC;QAEhE,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,GAAI,KAAoB,GAAG,SAAS,EAAE,OAAO,CAAC,CAAC;QAE5E,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;KACzC;;IAGO,SAAS,CAAC,MAAwB;QACxC,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;QAEzB,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACtD,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACpD,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;QAE9D,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAc,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACvF,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEhC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5B,MAAM,UAAU,GAAG,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAE/C,MAAM,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;QACxC,MAAM,SAAS,GAAG,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;QAE1C,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1D,MAAM,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;QAE9C,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC9B,IAAI,CAAC,YAAY,CACf,QAAQ,EACR,IAAI,CAAC,QAAQ,IAAI,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CACxF,CAAC;QACJ,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QAE1E,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;YAC7D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,KAAK,KAAK,CAAC,CAAC;;YACpE,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;KACrC;;IAGO,eAAe,CAAC,KAAa;QACnC,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KAC3C;IAEO,YAAY;QAClB,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC;QAC9G,OAAO,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,aAAa,EAAE,MAAM,KAAK,CAAC,IAAI,oBAAoB,CAAC,CAAC;KACrF;IAEO,gBAAgB,CAAC,KAAa;QACpC,OAAO,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;KAC7E;IAEO,iBAAiB,CAAC,MAAwB;QAChD,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,EAAE,MAAM,IAAI,aAAa,CAAC;QAC9D,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC;QAC5C,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,KAAK,QAAQ,IAAI,WAAW,CAAC;;QAG9D,MAAM,IAAI,GAAG,aAAa,IAAI,eAAe,IAAI,WAAW,CAAC;QAE7D,IAAI,IAAI,EAAE;YACR,OAAO,eAAS,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,SAAS,sCAA0B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,CAAC;SAC7G;QACD,IAAI,MAAM,CAAC,MAAM,EAAE;YACjB,OAAO,YAAM,KAAK,EAAC,4BAA4B,IAAE,MAAM,CAAC,MAAM,CAAQ,CAAC;SACxE;KACF;IAEO,cAAc,CAAC,MAAyB;QAC9C,MAAM,EAAE,GAAG,WAAW,MAAM,CAAC,KAAK,QAAQ,CAAC;QAC3C,MAAM,QAAQ,GAAG,WAAW,MAAM,CAAC,KAAK,aAAa,CAAC;QACtD,QACE,WAAK,KAAK,EAAC,6BAA6B,IACtC,aACE,IAAI,EAAE,MAAM,CAAC,KAAK,EAClB,EAAE,EAAE,EAAE,EACN,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ,sBACP,MAAM,CAAC,UAAU,GAAG,QAAQ,GAAG,IAAI,EACrD,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,EAClD,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,GAC/B,EAEF,WAAK,KAAK,EAAC,uBAAuB,IAC/B,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,eAAS,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAC,SAAS,GAAG,EAEhE,WAAK,KAAK,EAAC,0BAA0B,IACnC,aAAO,OAAO,EAAE,EAAE,EAAE,KAAK,EAAC,2BAA2B,IAClD,MAAM,CAAC,KAAK,CACP,EACP,MAAM,CAAC,UAAU,KAChB,SAAG,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAC,gCAAgC,IACrD,gBAAO,MAAM,CAAC,UAAU,CAAQ,CAC9B,CACL,CACG,EACL,MAAM,CAAC,KAAK,KAAK,UAAU,IAC1B,WAAK,KAAK,EAAC,yBAAyB,IAClC,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,IACrE,gBAAU,KAAK,EAAC,wCAAwC,EAAC,MAAM,EAAC,gBAAgB,kBAAc,GAAG,GAAG,CAChG,CACF,KAEN,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,4BAA4B,IACrC,WAAK,KAAK,EAAC,4BAA4B,GAAG,CACtC,CACF,CACP,CACG,CACF,EACN;KACH;IAEO,YAAY,CAAC,MAAwB;QAC3C,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC;QAC9C,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC;QACxC,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;QACxC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC;QAEnD,MAAM,UAAU,GAAG,aAAa,GAAG,QAAQ,GAAG,EAAE,CAAC;QACjD,MAAM,OAAO,GAAG,aAAa,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QAE/C,MAAM,cAAc,GAAG,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAC7E,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAChD,MAAM,YAAY,GAAG,KAAK;cACtB;gBACE,eAAe,EAAE,MAAM;gBACvB,eAAe,EAAE,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI;gBACrD,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE;aAClC;cACD,EAAE,CAAC;QAEP,MAAM,KAAK,GAAG,MAAM;cAChB;gBACE,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,MAAM,EAAE,MAAM,CAAC,MAAM;aACtB;cACD;gBACE,QAAQ,EAAE,MAAM,CAAC,QAAQ;aAC1B,CAAC;QAEN,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC;QAEpC,OAAO,OAAO,IACZ,WAAK,KAAK,EAAC,4BAA4B,IACrC,SAAG,KAAK,EAAC,kBAAkB,IAAE,MAAM,CAAC,KAAK,CAAK,EAC7C,MAAM,CAAC,UAAU,IAAI,SAAG,KAAK,EAAC,iCAAiC,IAAE,MAAM,CAAC,UAAU,CAAK,CACpF,KAEN,WAAK,KAAK,EAAC,6BAA6B,gBAAa,aAAa,IAChE,EAAC,GAAG,IACF,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,UAAU,EACzC,KAAK,EAAC,uBAAuB,KACzB,YAAY,KACZ,KAAK,EACT,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,EAC/B,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,EAClD,SAAS,EAAE,CAAC,KAAoB,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,IAEjE,OAAO,IAAI,eAAS,IAAI,EAAE,aAAa,GAAG,YAAY,GAAG,MAAM,CAAC,IAAI,EAAE,KAAK,EAAC,SAAS,GAAG,EACzF,WAAK,KAAK,EAAC,0BAA0B,IACnC,YAAM,KAAK,EAAC,2BAA2B,IAAE,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAQ,EACrG,MAAM,CAAC,UAAU,IAAI,CAAC,MAAM,IAAI,YAAM,KAAK,EAAC,gCAAgC,IAAE,MAAM,CAAC,UAAU,CAAQ,CACpG,EACL,cAAc,CACX,CACF,CACP,CAAC;KACH;IAEO,SAAS,CAAC,MAAwB;QACxC,QACE,YACE,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,qBACT,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EACzC,KAAK,EAAC,oBAAoB,eACf,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,kBAC3C,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,IAEhD,IAAI,CAAC,SAAS,KACb,UAAI,KAAK,EAAC,qBAAqB,IAC5B,IAAI,CAAC,YAAY,CAAC;YACjB,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,OAAO,EAAE,MAAM,CAAC,OAAO;SACxB,CAAC,CACC,CACN,EACA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CACjD,EACP;KACH;IAEO,WAAW,CAAC,MAAyB;QAC3C,OAAO,YAAM,KAAK,EAAC,sBAAsB,IAAE,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAQ,CAAC;KACxG;IAEO,cAAc,CAAC,MAAwB;QAC7C,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC;QACxC,MAAM,OAAO,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;QAElD,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC;QAExD,QACE,UAAI,KAAK,EAAC,qBAAqB,gBAAa,OAAO,cAAY,KAAK,IACjE,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EACpE,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAClE,EACL;KACH;IAEO,UAAU;QAChB,QACE,WACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,QAAQ,qBACI,IAAI,CAAC,YAAY,eACvB,IAAI,CAAC,IAAI,iBACP,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,kBACjC,IAAI,CAAC,OAAO,gBACd,IAAI,CAAC,SAAS,EAC1B,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EACxB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,IAEpC,YAAM,KAAK,EAAC,qBAAqB,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,kBAAgB,IAAI,CAAC,YAAY,EAAE,IACjG,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CACpD,CACH,EACN;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,EAAE,EAAE,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,KAAK,EAAC,gBAAgB,IAC3E,kEACE,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,KACvB,IAAI,CAAC,MAAM,EACf,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAE,CAAC,IAAI,CAAC,OAAO,EACxB,YAAY,EAAC,MAAM,EACnB,YAAY,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,EAChD,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,uBACf,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EACrC,SAAS,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EACxC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,GAClC,EACD,IAAI,CAAC,UAAU,EAAE,CACd,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnActionMenu"],"sources":["src/components/buttons/pn-action-menu/translation.ts","src/components/buttons/pn-action-menu/pn-action-menu.scss?tag=pn-action-menu","src/components/buttons/pn-action-menu/pn-action-menu.tsx"],"sourcesContent":["export const translations = {\n  BACK: {\n    sv: 'Tillbaka',\n    en: 'Back',\n    da: 'Tilbage',\n    fi: 'Takaisin',\n    no: 'Tilbake',\n  },\n};\n\nexport type PnMenuTextProp = keyof typeof translations;\n","@use 'src/globals/main';\n\npn-action-menu {\n  --pn-menu-height: unset;\n  display: inline-block;\n  position: relative;\n}\n\npn-action-menu .pn-action-menu {\n  position: relative;\n\n  &-container {\n    --pn-action-menu-offset: 0;\n\n    scroll-behavior: smooth;\n    list-style: none;\n    text-align: left;\n\n    position: absolute;\n    z-index: 100;\n\n    top: calc(100% + 0.5em);\n    left: var(--pn-action-menu-offset);\n    right: 0;\n\n    background-color: main.$white;\n    box-shadow:\n      0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1),\n      0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);\n\n    border-radius: main.$border-radius;\n    margin: 0;\n    padding: 0;\n    width: 16em;\n\n    visibility: hidden;\n    overflow: hidden;\n\n    &[data-open] {\n      visibility: visible;\n      overflow: unset;\n    }\n\n    &[data-left] {\n      right: 0;\n      left: unset;\n    }\n\n    &[data-upwards] {\n      top: unset;\n      bottom: calc(100% + 0.5em);\n      transform-origin: bottom left;\n    }\n\n    &[data-moving] {\n      overflow: hidden;\n      visibility: visible;\n      pointer-events: none;\n    }\n\n    /** Special rules for the small menu */\n    &[data-small] {\n      .pn-action-menu-list {\n        border-radius: 0.5em;\n        visibility: hidden;\n        @include main.pn-transition('visibility');\n        transition-delay: main.$timing;\n        &[data-current] {\n          overflow-x: auto;\n          visibility: visible;\n          transition-delay: 0s;\n        }\n      }\n\n      &[data-moving] > .pn-action-menu-list {\n        visibility: visible;\n      }\n\n      .pn-action-menu-item {\n        position: unset;\n      }\n\n      .pn-action-menu-sub {\n        left: 0;\n        height: 100%;\n        box-shadow: unset;\n        transform: translateX(0);\n        visibility: hidden;\n        &[data-current] {\n          visibility: visible;\n          overflow-x: auto;\n        }\n      }\n    }\n\n    @include main.pn-scrollbar();\n  }\n\n  &-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    height: var(--pn-menu-height);\n    @include main.pn-scrollbar();\n  }\n\n  &-group {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    &-label {\n      display: block;\n      color: main.$gray900;\n      font-weight: 700;\n      font-size: 0.875em;\n      padding: 1em 1em 0.5em;\n    }\n    &-helpertext {\n      display: block;\n      color: main.$gray700;\n      font-weight: 400;\n      margin: 0.25em 0 0;\n    }\n  }\n\n  &-sub {\n    z-index: 110;\n    position: absolute;\n    top: 0;\n\n    width: 100%;\n    min-width: 12em;\n\n    margin: 0;\n    padding: 0;\n\n    list-style: none;\n    background: main.$white;\n    border-radius: main.$border-radius;\n    box-shadow:\n      0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1),\n      0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);\n\n    transform: translateX(-0.5em);\n    opacity: 0;\n    visibility: hidden;\n\n    @include main.pn-scrollbar();\n    @include main.pn-transition('transform, opacity, visibility');\n    transition-delay: 0s, 0s, main.$timing;\n\n    &[data-open='true'] {\n      transform: translateX(0);\n      opacity: 1;\n      visibility: visible;\n      transition-delay: 0s, 0s, 0s;\n    }\n\n    &[data-open='false'] {\n      pointer-events: none;\n    }\n\n    &[data-x='left'] {\n      left: -100%;\n    }\n\n    &[data-x='center'] {\n      left: 0;\n    }\n\n    &[data-x='right'] {\n      left: 100%;\n    }\n\n    &[data-y='top'] {\n      top: unset;\n      bottom: 0;\n    }\n\n    &[data-y='bottom'] {\n      top: 0;\n    }\n  }\n\n  &-item {\n    position: relative;\n\n    &:first-child > .pn-action-menu-item-content > .pn-action-menu-button {\n      border-top-left-radius: 0.5em;\n      border-top-right-radius: 0.5em;\n    }\n    &:last-child > .pn-action-menu-item-content > .pn-action-menu-button {\n      border-bottom-right-radius: 0.5em;\n      border-bottom-left-radius: 0.5em;\n    }\n\n    &-text {\n      display: flex;\n      flex-direction: column;\n      margin-right: auto;\n    }\n\n    &-label {\n      color: main.$blue700;\n      font-weight: 500;\n      text-decoration: none;\n    }\n\n    &-suffix {\n      margin-left: auto;\n      font-weight: 400;\n      color: main.$gray700;\n    }\n\n    &-helpertext {\n      color: main.$gray700;\n      font-weight: 400;\n    }\n\n    &-content {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n      flex: 1 1 100%;\n      gap: 0.5em;\n      position: relative;\n\n      &[data-close] {\n        border-bottom: 0.0625em solid main.$gray200;\n      }\n\n      > pn-icon {\n        padding: 0 0.25em;\n      }\n    }\n\n    &[data-group],\n    &[data-sub] {\n      flex-direction: column;\n    }\n  }\n\n  &-button {\n    cursor: pointer;\n    position: relative;\n    -webkit-tap-highlight-color: transparent;\n\n    line-height: 1.5;\n    padding: 0.75em 1em;\n    border: 0;\n    width: 100%;\n    text-align: left;\n    text-decoration-color: transparent;\n\n    overflow: hidden;\n\n    display: flex;\n    align-items: center;\n    flex: 1 1 100%;\n    gap: 0.5em;\n\n    font-size: 1em;\n    min-height: 1.5em;\n    background-color: main.$white;\n\n    @include main.pn-transition('background-color, color, outline-color, text-decoration-color');\n    @include main.pn-ripple(main.$blue900);\n    @include main.pn-focus();\n    outline-offset: -0.2rem;\n\n    > pn-icon {\n      .pn-icon-svg > path {\n        transform-origin: center;\n        transform: rotate(0deg);\n        @include main.pn-transition('transform');\n      }\n\n      &[data-suffix][data-active] > .pn-icon-svg > path {\n        transform: rotate(180deg);\n      }\n\n      &:last-child {\n        margin-left: auto;\n      }\n    }\n\n    &:disabled {\n      pointer-events: none;\n      color: main.$gray700;\n      background-color: main.$gray50;\n    }\n\n    &:hover {\n      background-color: main.$blue25;\n    }\n\n    &:focus {\n      background-color: main.$blue50;\n    }\n\n    &[href] {\n      &:hover,\n      &:focus {\n        text-decoration-color: main.$blue700;\n      }\n    }\n\n    /*\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 0.25em;\n      height: 100%;\n      background-color: transparent;\n      @include main.pn-transition('background-color');\n    }\n\n    &[aria-expanded='true']::before {\n      background-color: main.$blue700;\n    }\n    */\n  }\n\n  &-checkbox {\n    background-color: main.$white;\n    flex: 0 0 1.5em;\n    width: 1.5em;\n    height: 1.5em;\n    border: 0.0625em solid main.$gray400;\n    border-radius: 0.25em;\n    margin-left: auto;\n\n    @include main.pn-focus-base;\n    @include main.pn-transition('background-color, border-color, outline-color');\n\n    svg polyline {\n      stroke: main.$white;\n      stroke-linecap: round;\n      stroke-dasharray: 23;\n      @include main.pn-transition('stroke-dashoffset');\n      transition-delay: 0s;\n\n      &.pn-action-menu-checkbox-checkmark-path {\n        stroke-dashoffset: 23;\n      }\n    }\n  }\n\n  &-radio {\n    display: flex;\n    gap: 0.75em;\n    padding: 0;\n    margin-left: auto;\n\n    &-outer {\n      background-color: main.$input-background;\n      border: main.$input-border;\n      border-radius: 50%;\n      height: 1.5em;\n      width: 1.5em;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      @include main.pn-focus-base;\n      @include main.pn-transition('border-color, background-color, outline-color');\n    }\n\n    &-inner {\n      transform: scale(0);\n      height: 0.75em;\n      width: 0.75em;\n      background-color: main.$input-button-background-box-active;\n      border-radius: 50%;\n      transform-origin: center center;\n      @include main.pn-transition('background-color, transform');\n    }\n  }\n\n  &-input {\n    position: absolute;\n    z-index: 10;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    left: 0;\n    margin: 0;\n    opacity: 0;\n    -webkit-tap-highlight-color: transparent;\n\n    &:checked {\n      + .pn-action-menu-button {\n        background-color: main.$blue25;\n        .pn-action-menu-checkbox {\n          border-color: main.$blue700;\n          background-color: main.$blue700;\n          polyline.pn-action-menu-checkbox-checkmark-path {\n            transition-delay: main.$timing;\n            stroke-dashoffset: 0;\n          }\n        }\n        .pn-action-menu-radio {\n          &-outer {\n            border-color: main.$border-color-default-active;\n          }\n          &-inner {\n            transform: scale(1);\n            background-color: main.$input-button-background-box-active;\n          }\n        }\n      }\n\n      &:hover {\n        background-color: main.$blue50;\n      }\n    }\n\n    &:focus-visible + .pn-action-menu-button {\n      background-color: main.$blue50;\n    }\n\n    &:disabled {\n      pointer-events: none;\n      + .pn-action-menu-button {\n        pointer-events: none;\n        color: main.$gray700;\n        background-color: main.$gray50;\n\n        .pn-action-menu-item-label {\n          color: main.$gray700;\n        }\n        .pn-action-menu-checkbox {\n          background-color: main.$gray50;\n        }\n        .pn-action-menu-radio-outer {\n          border-color: main.$gray400;\n          background-color: main.$gray50;\n        }\n        .pn-icon-svg path {\n          fill: main.$gray700;\n        }\n      }\n\n      &:checked + .pn-action-menu-button {\n        .pn-action-menu-radio-inner {\n          background-color: main.$gray400;\n        }\n        .pn-action-menu-checkbox {\n          border-color: main.$gray400;\n          background-color: main.$gray400;\n        }\n      }\n    }\n\n    &:hover + .pn-action-menu-button {\n      background-color: main.$blue50;\n      .pn-action-menu-radio-outer {\n        border-color: main.$input-button-background-box-active;\n        background-color: main.$input-button-background-hover;\n      }\n    }\n\n    &:focus-visible + .pn-action-menu-button {\n      background-color: main.$blue50;\n      .pn-action-menu-checkbox,\n      .pn-action-menu-radio .pn-action-menu-radio-outer {\n        @include main.pn-focus-visible();\n      }\n    }\n  }\n\n  &-p {\n    margin: 0;\n  }\n\n  > pn-button[data-default-icon] .pn-button {\n    &[aria-expanded='true'] .pn-icon-svg {\n      transform: rotate(180deg);\n      transition-delay: 0s;\n    }\n    .pn-icon-svg {\n      transform: rotate(0deg);\n      transition-delay: main.$timing;\n      @include main.pn-transition('transform');\n    }\n  }\n}\n","import { Component, Prop, State, Watch, Element, h, Host, Event, EventEmitter, Listen } from '@stencil/core';\n\nimport {\n  awaitTopbar,\n  en,\n  getMenuWidth,\n  getTotalHeightOffset,\n  isSmallScreen,\n  reduceMotion,\n  ripple,\n  uuidv4,\n} from '@/index';\nimport type {\n  PnLanguages,\n  PnActionMenuItem,\n  Components,\n  PnActionMenuInput,\n  PnActionMenuGroup,\n  PnMeasurements,\n} from '@/index';\n\nimport { translations, PnMenuTextProp } from './translation';\n\nimport { chevron_down, chevron_left, chevron_right, open_in_new } from 'pn-design-assets/pn-assets/icons.js';\n\n/**\n * Create a list of actions in an accessible way.\n *\n * Option types include:\n *\n * - Regular button, click and it will collapse the menu,\n * - Checkbox/radio, toggle the option on/off\n * - Link, behaves like a regular `a[href]` element.\n *\n * You can group these actions in groups and/or sub menus.\n *\n * - `group`, an array of options. The label will act as a title for the items.\n * - `options`, an array of options. These items will appear in a sub-menu that can be toggled.\n *\n * @see {@link PnActionMenuItem}\n */\n@Component({\n  tag: 'pn-action-menu',\n  styleUrl: 'pn-action-menu.scss',\n})\nexport class PnActionMenu {\n  private readonly id: string = `pn-action-menu-${uuidv4()}`;\n\n  private menuButtonId: string = `${this.id}-button`;\n  private menuListId: string = `${this.id}-list`;\n\n  private menuTrigger: HTMLPnButtonElement;\n  private menuContainer: HTMLDivElement;\n  private menuList: HTMLMenuElement;\n\n  private animation: Animation;\n  private readonly duration: number = 400;\n  private animationDuration: number = this.duration;\n\n  private timeout: NodeJS.Timeout;\n\n  /** 16em */\n  private readonly menuWidth: number = 256;\n\n  @Element() private hostElement: HTMLElement;\n\n  @State() private smallMenu: boolean = null;\n  @State() private upwards: boolean = false;\n\n  @State() private activeSubmenu: PnActionMenuItem['value'][] = [];\n\n  @State() private isClosing = false;\n  @State() private isExpanding = false;\n\n  /** Array of action menu options. @see {@link PnActionMenuItem} */\n  @Prop() options: PnActionMenuItem[] = [];\n  /** Set any prop from the `pn-button` component here. @see {@link Components.PnButton} */\n  @Prop() button: Components.PnButton;\n\n  /** Set a custom ID for the menu. */\n  @Prop() menuId?: string = this.id;\n  /** Manually set the language. */\n  @Prop({ mutable: true }) language?: PnLanguages = null;\n\n  /** Open/close the action menu manually. @category Features */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /** Prefer that the menu open upwards, if there is enough space. @category Features */\n  @Prop() menuUp?: boolean = false;\n  /** Prefer that the submenus opens to the left, if there is enough space. @category Features */\n  @Prop() menuLeft?: boolean = false;\n\n  /** Emitted when the menu is opened or closed. */\n  @Event() private menuToggle: EventEmitter<{ open: boolean }>;\n  /** Emitted when the menu is fully hidden/visible after the animation has played. */\n  @Event() private menuVisible: EventEmitter<{ visible: boolean }>;\n  /** Emitted when an option is clicked (button, link, input or submenus). */\n  @Event() private menuOption: EventEmitter<{\n    /** Which type of menu item was clicked. */\n    type: 'button' | 'link' | 'input' | 'submenu';\n    /** If its an `input` type (checkbox/radio), it will be a generic `Event` (ChangeEvent) instead of `MouseEvent`. */\n    click: MouseEvent | Event;\n    /** The full {@link PnActionMenuItem} object. */\n    option: PnActionMenuItem;\n    /** If the submenu is open/closed. */\n    open?: Boolean;\n  }>;\n\n  @Watch('options')\n  handleOptions() {\n    this.setMenuLayout();\n  }\n\n  @Watch('open')\n  openHandler() {\n    this.setAnimationDuration();\n\n    requestAnimationFrame(() => {\n      if (this.open && !(this.isClosing || this.isExpanding)) {\n        this.setOffset();\n        this.setMenuLayout();\n      }\n\n      this.gridHandler();\n\n      this.menuToggle.emit({ open: this.open });\n\n      clearTimeout(this.timeout);\n      this.timeout = setTimeout(() => {\n        if (!this.open) {\n          this.activeSubmenu = [];\n          const subMenus = this.hostElement.querySelectorAll<HTMLUListElement>('[data-x]');\n          Array.from(subMenus).forEach(el => {\n            el.removeAttribute('data-x');\n            el.removeAttribute('data-y');\n          });\n        }\n\n        this.menuVisible.emit({ visible: this.open });\n      }, this.animationDuration);\n    });\n  }\n\n  @Watch('menuId')\n  handleMenuId() {\n    this.menuButtonId = `${this.menuId}-button`;\n    this.menuListId = `${this.menuId}-list`;\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    if (this.open) this.toggleActionMenu(false);\n  }\n\n  async componentWillLoad() {\n    if (!this.options.length) console.warn(`${this.hostElement.localName}: No options set.`);\n\n    this.handleMenuId();\n    this.setAnimationDuration();\n\n    if (this.language !== null) await awaitTopbar(this.hostElement);\n  }\n\n  componentDidLoad() {\n    this.setOffset();\n\n    if (this.open) this.gridHandler();\n  }\n\n  private translate(prop: PnMenuTextProp) {\n    return translations[prop][this.language || en];\n  }\n\n  private globalEvents = (event: PointerEvent | KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const isWithinActionMenu = target?.closest(this.hostElement.localName);\n    if (!isWithinActionMenu) this.closeEachSubMenu(true);\n  };\n\n  private addGlobalEventListeners() {\n    const root: Document = this.hostElement.getRootNode() as Document;\n\n    root.addEventListener('click', this.globalEvents);\n  }\n\n  private removeGlobalEventListeners() {\n    const root: Document = this.hostElement.getRootNode() as Document;\n\n    root.removeEventListener('click', this.globalEvents);\n  }\n\n  /** Open/close the action menu. */\n  private toggleActionMenu(state?: boolean) {\n    this.open = state ?? !this.open;\n  }\n\n  private setMenuLayout() {\n    if (!this.menuContainer) return;\n\n    if (!(this.isClosing || this.isExpanding)) this.resetMaxHeight();\n\n    const measurements = this.getMenuMeasurements();\n\n    this.setDirection(measurements);\n    this.setMenuSize(measurements);\n    this.setMaxHeight(measurements);\n  }\n\n  private setDirection({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n    const fitsUpwards = sUp > hUp;\n    const fitsDownards = sDown > hDown;\n    const moreSpaceDown = sDown > sUp;\n    this.upwards = (this.menuUp && fitsUpwards) || (!fitsDownards && !moreSpaceDown);\n  }\n\n  private setMenuSize({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n    const isWidthSmall = isSmallScreen();\n    const menuFits = this.upwards ? sUp > hUp : sDown > hDown;\n    const isSmall = isWidthSmall || !menuFits;\n\n    if (isSmall !== this.smallMenu) {\n      this.smallMenu = isSmall;\n    }\n  }\n\n  private setMaxHeight({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n    if (this.smallMenu) {\n      const heightUp = hUp > sUp ? hUp - 16 : hUp;\n      const heightDown = hDown > sDown ? hDown - 8 : hDown;\n      this.hostElement.style.setProperty('--pn-menu-height', `${this.upwards ? heightUp : heightDown}px`);\n    } else this.resetMaxHeight();\n  }\n\n  private resetMaxHeight() {\n    this.hostElement.style.setProperty('--pn-menu-height', 'unset');\n  }\n\n  private setAnimationDuration() {\n    if (reduceMotion()) this.animationDuration = 0;\n    else this.animationDuration = this.duration;\n  }\n\n  private getRect(element: HTMLElement): DOMRect {\n    return element.getBoundingClientRect();\n  }\n\n  private getMenuMeasurements(): PnMeasurements {\n    const allLists = Array.from(this.menuContainer.querySelectorAll('menu'));\n    const maxHeight = Math.max(...allLists.map(el => el.scrollHeight));\n\n    const rectButton = this.getRect(this.menuTrigger);\n    const rectMenu = this.getRect(this.menuContainer);\n\n    /** Measurements upwards. */\n    const sUp = rectButton.top - getTotalHeightOffset();\n    const hUp = sUp > maxHeight ? maxHeight : sUp;\n\n    /** Measurements downwards. */\n    const sDown = innerHeight - rectMenu.top;\n    const hDown = sDown > maxHeight ? maxHeight : sDown;\n\n    return {\n      hUp,\n      hDown,\n      sUp,\n      sDown,\n    };\n  }\n\n  private setOffset() {\n    const data = this.getRect(this.hostElement);\n    const sideMenuWidth = getMenuWidth();\n\n    // Calculate potential menu position\n    const menuLeft = data.left;\n    const menuRight = data.left + this.menuWidth;\n\n    // Define boundaries\n    const leftBoundary = sideMenuWidth + 16; // Left menu + buffer\n    const rightBoundary = innerWidth - 16; // Right edge - buffer\n\n    let offset = 0;\n\n    // Check if menu would overlap left menu or go off left edge\n    if (menuLeft < leftBoundary) {\n      offset = leftBoundary - menuLeft;\n    }\n    // Check if menu would go off right edge\n    else if (menuRight > rightBoundary) {\n      offset = rightBoundary - menuRight;\n    }\n\n    if (this.menuContainer) this.menuContainer.style.setProperty('--pn-action-menu-offset', `${offset}px`);\n  }\n\n  private getListId(option: PnActionMenuItem) {\n    return `pn-menu-${option.value}-list`;\n  }\n\n  private getButtonId(option: PnActionMenuItem) {\n    return `pn-menu-${option.value}-button`;\n  }\n\n  private getTriggerIcon() {\n    if (this.button?.icon) return;\n    return chevron_down;\n  }\n\n  /** Set the path of open sub menus. */\n  private getSubMenuPath(options: PnActionMenuItem[], value: string, path = []): string[] {\n    for (const item of options) {\n      const newPath = [...path, item.value];\n      if (item.value === value) return newPath;\n\n      if (item.options || item.group) {\n        const result = this.getSubMenuPath(item.options || item.group, value, newPath);\n        if (result) return result;\n      }\n    }\n    return null;\n  }\n\n  private closeEachSubMenu(preventFocus: boolean = false) {\n    if (!preventFocus) this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });\n\n    const interval = setInterval(() => {\n      if (this.smallMenu || this.activeSubmenu.length === 0) {\n        clearInterval(interval);\n        this.toggleActionMenu(false);\n      } else {\n        this.activeSubmenu.pop();\n        this.activeSubmenu = [...this.activeSubmenu];\n      }\n    }, 150);\n  }\n\n  private escButton(event: KeyboardEvent, option: PnActionMenuItem) {\n    const { key } = event;\n\n    if (key === 'Escape') {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n\n      this.isSubmenuActive(option.value) ? this.toggleSub(option) : this.toggleActionMenu();\n    }\n  }\n\n  // Animation Start\n\n  private gridHandler() {\n    if (this.open) this.openGrid();\n    else this.closeGrid();\n  }\n\n  private openGrid() {\n    this.addGlobalEventListeners();\n\n    const list = this.getRect(this.menuList);\n\n    const { clientHeight } = this.menuContainer;\n    const height = this.isClosing ? clientHeight : 0;\n    this.menuContainer.style.height = `${list.height}px`;\n\n    this.isExpanding = true;\n    this.animateGrid(true, `${height}px`, `${list.height}px`);\n  }\n\n  private closeGrid() {\n    this.removeGlobalEventListeners();\n\n    const list = this.getRect(this.menuList);\n\n    const { clientHeight } = this.menuContainer;\n    const height = this.isExpanding ? clientHeight : list.height;\n    this.menuContainer.style.height = `0px`;\n\n    this.isClosing = true;\n    this.animateGrid(false, `${height}px`, `0px`);\n  }\n\n  private animateGrid(open: boolean, startHeight: string, endHeight: string) {\n    this.cancelAnimations();\n    this.animation = this.menuContainer.animate(\n      {\n        height: [startHeight, endHeight],\n      },\n      {\n        duration: this.animationDuration,\n        easing: 'cubic-bezier(0.6, 0, 0.2, 1)',\n      },\n    );\n    this.animation.onfinish = () => this.animationFinish();\n    this.animation.oncancel = () => (open ? (this.isExpanding = false) : (this.isClosing = false));\n  }\n\n  private animationFinish() {\n    this.cancelAnimations();\n    this.menuContainer.style.height = this.isClosing ? '0px' : '';\n    this.isClosing = false;\n    this.isExpanding = false;\n  }\n\n  private cancelAnimations() {\n    if (this.animation) this.animation.cancel();\n  }\n\n  // Animation end\n\n  private async optionSelect(option: PnActionMenuItem, click: MouseEvent | Event) {\n    const type = option?.options?.length ? 'submenu' : !!option.input ? 'input' : option.href ? 'link' : 'button';\n    const isSubMenu = type === 'submenu';\n\n    if (isSubMenu) this.toggleSub(option);\n    else if (type === 'button') this.closeEachSubMenu();\n    else if (type === 'input') option.checked = (click.target as HTMLInputElement).checked;\n\n    this.menuOption.emit({\n      option,\n      type,\n      click,\n      open: isSubMenu ? this.isSubmenuActive(option.value) : null,\n    });\n\n    const target = click.target as HTMLElement;\n    const element =\n      target.localName === 'input'\n        ? (target.nextElementSibling as HTMLElement)\n        : target.className === 'pn-action-menu-button'\n          ? target\n          : target.closest<HTMLElement>('.pn-action-menu-button');\n\n    const { x, width, y, top } = this.getRect(element as HTMLElement);\n    const clientCor = { clientX: x + width - 24, clientY: y - top };\n\n    ripple(click.type === 'click' ? (click as MouseEvent) : clientCor, element);\n\n    this.menuContainer.scrollTo({ top: 0 });\n  }\n\n  /** Toggle individual sub-menus inside the action menu by using the `option['value']`. */\n  private toggleSub(option: PnActionMenuItem) {\n    const { value } = option;\n\n    const path = this.getSubMenuPath(this.options, value);\n    const isActive = this.activeSubmenu.includes(value);\n    isActive && path.splice(this.activeSubmenu.indexOf(value), 1);\n\n    const item = this.hostElement.querySelector<HTMLElement>(`#${this.getListId(option)}`);\n    const data = this.getRect(item);\n\n    const spaceLeft = data.left;\n    const spaceRight = innerWidth - data.right - 8;\n\n    const fitsLeft = spaceLeft > data.width;\n    const fitsRight = spaceRight > data.width;\n\n    const climbUp = this.menuUp && data.top - data.height > 0;\n    const yDirection = climbUp ? 'top' : 'bottom';\n\n    if (!isActive && !item.dataset.x)\n      item.setAttribute(\n        'data-x',\n        this.menuLeft && fitsLeft ? 'left' : fitsRight ? 'right' : fitsLeft ? 'left' : 'center',\n      );\n    if (!isActive && !item.dataset.y) item.setAttribute('data-y', yDirection);\n\n    if (JSON.stringify(path) === JSON.stringify(this.activeSubmenu))\n      this.activeSubmenu = this.activeSubmenu.filter(item => item !== value);\n    else this.activeSubmenu = [...path];\n  }\n\n  /** Check if a sub-menu is active. */\n  private isSubmenuActive(value: string): boolean {\n    return this.activeSubmenu.includes(value);\n  }\n\n  private isMenuActive() {\n    const isRootSubInsideGroup = this.options.find(({ value }) => this.activeSubmenu.every(val => val === value));\n    return this.smallMenu && (this.activeSubmenu?.length === 0 || isRootSubInsideGroup);\n  }\n\n  private isCurrentSubMenu(value: string) {\n    return Boolean(this.activeSubmenu[this.activeSubmenu.length - 1] === value);\n  }\n\n  private getOptionTrailing(option: PnActionMenuItem) {\n    const useButtonIcon = option.options?.length && chevron_right;\n    const useTrailingIcon = option.trailingIcon;\n    const useLinkIcon = option.target === '_blank' && open_in_new;\n\n    /** If the user has defined a trialing icon, use it first. */\n    const icon = useButtonIcon || useTrailingIcon || useLinkIcon;\n\n    if (icon) {\n      return <pn-icon icon={icon} color=\"blue700\" data-suffix data-active={this.isSubmenuActive(option.value)} />;\n    }\n    if (option.suffix) {\n      return <span class=\"pn-action-menu-item-suffix\">{option.suffix}</span>;\n    }\n  }\n\n  private renderCheckbox(option: PnActionMenuInput) {\n    const id = `pn-menu-${option.value}-label`;\n    const idHelper = `pn-menu-${option.value}-helpertext`;\n    return (\n      <div class=\"pn-action-menu-item-content\">\n        <input\n          type={option.input}\n          id={id}\n          class=\"pn-action-menu-input\"\n          name={option.name}\n          value={option.value}\n          checked={option.checked}\n          disabled={option.disabled}\n          aria-describedby={option.helpertext ? idHelper : null}\n          onInput={event => this.optionSelect(option, event)}\n          tabIndex={this.open ? null : -1}\n        />\n\n        <div class=\"pn-action-menu-button\">\n          {!!option.icon && <pn-icon icon={option.icon} color=\"blue700\" />}\n\n          <div class=\"pn-action-menu-item-text\">\n            <label htmlFor={id} class=\"pn-action-menu-item-label\">\n              {option.label}\n            </label>\n            {option.helpertext && (\n              <p id={idHelper} class=\"pn-action-menu-item-helpertext\">\n                <span>{option.helpertext}</span>\n              </p>\n            )}\n          </div>\n          {option.input === 'checkbox' ? (\n            <div class=\"pn-action-menu-checkbox\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <polyline class=\"pn-action-menu-checkbox-checkmark-path\" points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n              </svg>\n            </div>\n          ) : (\n            <div class=\"pn-action-menu-radio\">\n              <div class=\"pn-action-menu-radio-outer\">\n                <div class=\"pn-action-menu-radio-inner\" />\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private renderButton(option: PnActionMenuItem) {\n    const isCloseButton = option.label === 'BACK';\n    const isSub = !!option?.options?.length;\n    const isGroup = !!option?.group?.length;\n    const isLink = !!option.href && !isSub && !isGroup;\n\n    const appendedId = isCloseButton ? '-close' : '';\n    const hasIcon = isCloseButton || !!option.icon;\n\n    const trailingObject = isCloseButton ? null : this.getOptionTrailing(option);\n    const open = this.isSubmenuActive(option.value);\n    const subMenuAttrs = isSub\n      ? {\n          'aria-haspopup': 'true',\n          'aria-controls': open ? this.getListId(option) : null,\n          'aria-expanded': open?.toString(),\n        }\n      : {};\n\n    const attrs = isLink\n      ? {\n          href: option.href,\n          target: option.target,\n        }\n      : {\n          disabled: option.disabled,\n        };\n\n    const Tag = isLink ? 'a' : 'button';\n\n    return isGroup ? (\n      <div class=\"pn-action-menu-group-label\">\n        <p class=\"pn-action-menu-p\">{option.label}</p>\n        {option.helpertext && <p class=\"pn-action-menu-group-helpertext\">{option.helpertext}</p>}\n      </div>\n    ) : (\n      <div class=\"pn-action-menu-item-content\" data-close={isCloseButton}>\n        <Tag\n          id={this.getButtonId(option) + appendedId}\n          class=\"pn-action-menu-button\"\n          {...subMenuAttrs}\n          {...attrs}\n          tabIndex={this.open ? null : -1}\n          onClick={event => this.optionSelect(option, event)}\n          onKeyDown={(event: KeyboardEvent) => this.escButton(event, option)}\n        >\n          {hasIcon && <pn-icon icon={isCloseButton ? chevron_left : option.icon} color=\"blue700\" />}\n          <div class=\"pn-action-menu-item-text\">\n            <span class=\"pn-action-menu-item-label\">{isCloseButton ? this.translate('BACK') : option.label}</span>\n            {option.helpertext && !isLink && <span class=\"pn-action-menu-item-helpertext\">{option.helpertext}</span>}\n          </div>\n          {trailingObject}\n        </Tag>\n      </div>\n    );\n  }\n\n  private renderSub(option: PnActionMenuItem) {\n    return (\n      <menu\n        id={this.getListId(option)}\n        aria-labelledby={this.getButtonId(option)}\n        class=\"pn-action-menu-sub\"\n        data-open={this.isSubmenuActive(option.value)?.toString()}\n        data-current={this.isCurrentSubMenu(option.value)}\n      >\n        {this.smallMenu && (\n          <li class=\"pn-action-menu-item\">\n            {this.renderButton({\n              label: 'BACK',\n              value: option.value,\n              options: option.options,\n            })}\n          </li>\n        )}\n        {option.options.map(item => this.renderMenuItem(item))}\n      </menu>\n    );\n  }\n\n  private renderGroup(option: PnActionMenuGroup) {\n    return <menu class=\"pn-action-menu-group\">{option.group.map(item => this.renderMenuItem(item))}</menu>;\n  }\n\n  private renderMenuItem(option: PnActionMenuItem) {\n    const isSub = !!option?.options?.length;\n    const isGroup = !isSub && !!option?.group?.length;\n\n    const isCheckbox = !!option.input && !isSub && !isGroup;\n\n    return (\n      <li class=\"pn-action-menu-item\" data-group={isGroup} data-sub={isSub}>\n        {isCheckbox ? this.renderCheckbox(option) : this.renderButton(option)}\n        {isSub ? this.renderSub(option) : isGroup && this.renderGroup(option)}\n      </li>\n    );\n  }\n\n  private renderMenu() {\n    return (\n      <div\n        id={this.menuListId}\n        class=\"pn-action-menu-container\"\n        role=\"region\"\n        aria-labelledby={this.menuButtonId}\n        data-open={this.open}\n        data-moving={this.isClosing || this.isExpanding}\n        data-upwards={this.upwards}\n        data-small={this.smallMenu}\n        style={{ height: '0px' }}\n        ref={el => (this.menuContainer = el)}\n      >\n        <menu class=\"pn-action-menu-list\" ref={el => (this.menuList = el)} data-current={this.isMenuActive()}>\n          {this.options?.map(option => this.renderMenuItem(option))}\n        </menu>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id={this.menuId !== this.id ? this.menuId : null} class=\"pn-action-menu\">\n          <pn-button\n            icon={this.getTriggerIcon()}\n            {...this.button}\n            buttonId={this.menuButtonId}\n            tooltipUp={!this.upwards}\n            ariahaspopup=\"true\"\n            ariacontrols={this.open ? this.menuListId : null}\n            ariaexpanded={this.open.toString()}\n            data-default-icon={!this.button?.icon}\n            onPnClick={() => this.toggleActionMenu()}\n            ref={el => (this.menuTrigger = el)}\n          />\n          {this.renderMenu()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/umd/modules/@postnord/web-components/components/pn-card.js

@@ -76,7 +76,7 @@ const PnCard$1 = /*@__PURE__*/ proxyCustomElement(class PnCard extends HTMLEleme
     }
     render() {
         const TitleTag = this.getHeadingTag();
-        return (h(Host, { key: '4c1a897e5b6fd69663aa076de44231cbde9b85b1' }, h("article", { key: 'a93fb7255cd352eed29814f010f0111eebcf0d46', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, h("div", { key: '1861f3a85267df00d8d974ed2f014fb097288d4c', class: "pn-card-image" }, h("picture", { key: 'd0acfe747efd63762ddb0dd7cbe67baadb7ad4e1', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, h("slot", { key: 'e8360ba8b54d5ad376b549189102eb6412fb6a3e', name: "image" }))), h("div", { key: '1b613813ac38d257cd2c64cb3e7f053950b8d58a', class: "pn-card-content" }, h("header", { key: '4048f0f93b62c71f3caa553ba0f217064f1f8b80', class: "pn-card-header" }, h("div", { key: '071f1f13e492909e27aa4fb860c8ba3a9e88efc4', class: "pn-card-tags" }, h("slot", { key: 'bb4ad165fc8443b55784fcad35d8733f89e34b55', name: "tags" })), !!this.overline && h("p", { key: 'c75cfc0045739d7dfa4c2c6aef79dd57d64ccbc1', class: "pn-card-label-overline" }, this.overline), !!this.label && (h(TitleTag, { key: 'e65289e4307c08f8c92e9b83b3981cd8413a63d4', id: this.getTitleId(), class: "pn-card-label" }, this.label)), h("slot", { key: 'd901c192ed2e029f9b2a0a7df421d6c008f80ea6', name: "header" })), h("section", { key: 'da99e7c8a01924e670a9cbee424ac899870c1a8f', class: "pn-card-section" }, !!this.text && h("p", { key: 'c27938d4704111825dca3ab621133bdd99e401f0', class: "pn-card-section-paragraph" }, this.text), h("slot", { key: '6dfd91ac2b404b23522812c22247d01c5da6a557' })), h("nav", { key: '10252f1454848d360a727c2a85b9ab5461d73b0b', class: "pn-card-navigation" }, this.showHref() && (h("a", { key: '82640b1972e9f740694a5c135857e8b3c87e7a2b', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, h("pn-icon", { key: '50d3021b2f7f2722426f5299fea249b596e8f28b', color: "blue700", icon: this.getIcon() }))), h("slot", { key: 'be97f6fc934ccd5f55fb577028c52757ada6c128', name: "navigation" }))))));
+        return (h(Host, { key: '821cee3f202421ab0e60bbba012b8ad8dbb05793' }, h("article", { key: '41ff1c612af9e2be99b446b549088e5892771fb2', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, h("div", { key: '780140151f04b678c9c74bb722a9b45447f66645', class: "pn-card-image" }, h("picture", { key: '94f932a7b6bf22e6f13789c1bae776cbcf99291d', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, h("slot", { key: 'ccb5f90249e4f5cd73924a15fcd86ccb1ce08f87', name: "image" }))), h("div", { key: '2cc59cc4c75444be12802a3bc723f59c225b4336', class: "pn-card-content" }, h("header", { key: '4f5824bad2bff67c416c177138703ec6b2e9baeb', class: "pn-card-header" }, h("div", { key: 'cef69f9a720f8cd69df4f5dbc34973b3ebc2750a', class: "pn-card-tags" }, h("slot", { key: 'c6b93db08c9b0bcd268b6d9faaf9f4a8d9cd86c6', name: "tags" })), !!this.overline && h("p", { key: 'ca27f600423daf37e77cfefec9e8ab9710998d98', class: "pn-card-label-overline" }, this.overline), !!this.label && (h(TitleTag, { key: 'c6c4803f194c727c9bc3f0bf6592a4ea77e99a4a', id: this.getTitleId(), class: "pn-card-label" }, this.label)), h("slot", { key: 'cb5757f5575590542047bd07282481601c5f399f', name: "header" })), h("section", { key: '19c80b379dff1a6c3f734498b6b32a0a486d0183', class: "pn-card-section" }, !!this.text && h("p", { key: 'b807218d4d0554ea65462caf013e0208dcfd340d', class: "pn-card-section-paragraph" }, this.text), h("slot", { key: '15638a8de80d16b8779415aa2d23cdf0a56e08c9' })), h("nav", { key: 'ff50a2c165936be2feff4cb0f1f821c60e6da204', class: "pn-card-navigation" }, this.showHref() && (h("a", { key: '7994139742f0a623e0e9ce17a8cd3f1088f9753d', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, h("pn-icon", { key: 'bfac7739393db47a446b987a631143601ca33ceb', color: "blue700", icon: this.getIcon() }))), h("slot", { key: '3fab25b3c69c45c6b09536a6454f20a0735f80e2', name: "navigation" }))))));
     }
     static get watchers() { return {
         "cardId": ["watchCardId"]

package/umd/modules/@postnord/web-components/components/pn-checkbox.js

@@ -39,7 +39,7 @@ const PnCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class PnCheckbox extends H
         this.handleId();
     }
     render() {
-        return (h(Host, { key: 'f0639bf5c45347c39ef933b7f4967be10e671e46' }, h("input", { key: '560e64e32b38b40a847b3b7283255dc9e9f36f72', type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.invalid?.toString(), "aria-describedby": this.helpertext && this.idHelpertext }), h("div", { key: 'ac86d6c2bd460ce3b29fe8862b9a7b64ca23e2dd', class: "pn-checkbox", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: '6df97a9582503dc04946f3e590dff276bf87d885', class: "pn-checkbox-outer" }, h("svg", { key: '37d8212ac1b0088ebcbe28cd02d5cc6e59352e63', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'b19a548634e5fe186291a0d24c4c3f81efe8eab1', class: "pn-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '040639fc42060dff6db8fab45dc713ccf81631bf', class: "pn-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" }))), (!!this.label || !!this.helpertext) && (h("p", { key: '3006b0ba0826003608453423259914a3b9622168', class: "pn-checkbox-content" }, !!this.label && (h("label", { key: '2de986fd9df0d639e5b398c24b4aa95e6e416c5d', htmlFor: this.checkboxid, class: "pn-checkbox-label" }, this.label)), !!this.helpertext && (h("span", { key: '13c417fef46e456a1e036a22c9655da2fa19de24', id: this.idHelpertext, class: "pn-checkbox-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '204b119d1bf7da4ce2fb90d1f53114b6a5ada7dd', icon: this.icon, color: "gray900" }))));
+        return (h(Host, { key: 'c3bcdee583919c5f6f11f2e21cb5362f96ac1633' }, h("input", { key: '10e34d60ff748c2d99c9e3740c69a17016ca3223', type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.invalid?.toString(), "aria-describedby": this.helpertext && this.idHelpertext }), h("div", { key: '15e4f62557b23b99ab344f32dcfa2103c395b9ed', class: "pn-checkbox", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: '98e4eb05092b3fe4d9e30b748e89d3bd104925ff', class: "pn-checkbox-outer" }, h("svg", { key: 'a39edd1e675ba5b131059f1bd8b0d7f6fea9370b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'a355d7729c12497f133cde364c7ff9601f9940db', class: "pn-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '18c274c70036a5a3aae8b333c513d053061945cf', class: "pn-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" }))), (!!this.label || !!this.helpertext) && (h("p", { key: '1499f1e5d14dc15cc5691429fd8565c1e16b4fda', class: "pn-checkbox-content" }, !!this.label && (h("label", { key: '87ca925b4af005c6cbec279a3209fcd5d92a4ae8', htmlFor: this.checkboxid, class: "pn-checkbox-label" }, this.label)), !!this.helpertext && (h("span", { key: '6808421c4151d5ad4711477d165e0d8a9bdaceae', id: this.idHelpertext, class: "pn-checkbox-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '0f182a49401f04adf6944a82490d838bd114f38b', icon: this.icon, color: "gray900" }))));
     }
     static get watchers() { return {
         "checkboxid": ["handleId"]

package/umd/modules/@postnord/web-components/components/pn-choice-chip.js

@@ -29,7 +29,7 @@ const PnChoiceChip$1 = /*@__PURE__*/ proxyCustomElement(class PnChoiceChip exten
     }
     get hostElement() { return this; }
     render() {
-        return (h(Host, { key: '5ff90532fb75531aa8fcb23fd4dd0ae0dfc7d33a' }, h("div", { key: '500cb322689763c229ac303d1d62643a620c74ed', class: "pn-choice-chip" }, h("input", { key: '88feb0c54e20951c8c6e9d761323e1806e4583bd', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: 'd1ed91ded7233f9229bdbde4f9c40b5c86a67fba', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: '29f8378c640a6553416507e2ca0454bca47c557c', class: "pn-choice-chip-icon" }, h("pn-icon", { key: 'f70f7191ade89323265b312cc881141edffc4296', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '87d85e74effe1b65d949b0735a50f5b4a56acf25', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: '772f0726fcaada44af2c10ab922bb3eb151886b7', class: "pn-choice-chip-label", htmlFor: this.choiceid }, h("span", { key: '7c5bf78b2811a70308663bfb1be95420ce7ca30d' }, this.label), h("slot", { key: '6fd6ee5beb63f38285b273f0a73d41e5895cc8e6' }))))));
+        return (h(Host, { key: '163abbbcca43588ea04866d4826bd7b30b88324d' }, h("div", { key: '2af33c1a26f70b59d22db00a943c09b43eaf3523', class: "pn-choice-chip" }, h("input", { key: '23dbbfe5102e681efbf6d08c30e64fb6f8761300', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: 'c57f848d0458880a41f030691e9fa6bef497bf18', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: '2978e8c81a0f4057a70e1cb29d94768040ecfd95', class: "pn-choice-chip-icon" }, h("pn-icon", { key: '62101eaa67f7351df8657b4df56e145d54ca4468', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '06c50dad1d7e2b78a36d4c923878633d489b0d55', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: '502b02b9c9e30d56a39aa425af8b6c9bf755b8c9', class: "pn-choice-chip-label", htmlFor: this.choiceid }, h("span", { key: '79f7c5b812fbd06c54af2d14f08d2e0a7ae1f520' }, this.label), h("slot", { key: 'f90c14659d035a662fca81e4045e7523b60f8a46' }))))));
     }
     static get style() { return PnChoiceChipStyle0; }
 }, [4, "pn-choice-chip", {

package/umd/modules/@postnord/web-components/components/pn-counter.js

@@ -214,7 +214,7 @@ const PnCounter$1 = /*@__PURE__*/ proxyCustomElement(class PnCounter extends HTM
             this.counterElement.style.setProperty('--pn-counter-ch', '0ch');
     }
     render() {
-        return (h(Host, { key: '2fe59aa7c06e3005cd3f9c8b633bf3ee3c85833b' }, h("div", { key: '206308ce9ff21a303013164a3ec4015074d494b2', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, h("label", { key: '6843e23ed0c46cf33aaa6b83c9c7304775dba549', htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel }, h("span", { key: 'cbc609092923ef8806d7b5e77beb26021b490d44' }, this.label)), h("div", { key: 'df51b364dc11c020d390f3bed823caf7063a9c94', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, h("pn-button", { key: '52413b869322b9398eddfb81713609205594d59f', "data-decrease": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: minus, iconOnly: true, arialabel: this.labelDecrease || this.translate('DECREASE'), onClick: () => this.decreaseAmount() }), h("input", { key: '8c9dd73dba29a17df0515758a48be4f4f8798bbf', id: this.counterid, class: "pn-counter-input", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), h("pn-button", { key: 'c10fc2e4f25708ed81dc95b8ea07c0c07803df1f', "data-increase": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: plus, iconOnly: true, arialabel: this.labelIncrease || this.translate('INCREASE'), onClick: () => this.increaseAmount() })), !!this.getTextMessage() && (h("p", { key: 'e01ab71ae17a042681b5c3a87766bac914c6be10', id: this.idText, class: "pn-counter-helpertext" }, h("span", { key: 'd51a1a0e851e7a6afe79a3c384167324c906939a' }, this.getTextMessage()))), h("p", { key: 'c89af26fd950c7166cec80b08feb1651feb54bba', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
+        return (h(Host, { key: 'ae9451959e2ebc720b69af2942deaa5d94e36565' }, h("div", { key: 'f631dd7d8c7acbb4a459b46da53ea3445ae96480', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, h("label", { key: '2538568f65666aedc3a0f9e2f3f681b4b9647cd6', htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel }, h("span", { key: '73abf4ec6f185201f95799910a70518f61f85577' }, this.label)), h("div", { key: '8e99e77f67aae105b90052ed74ba6c3a438e22ca', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, h("pn-button", { key: '8d6f5c4af2a524bb43a3023c130b2a6e1814c53d', "data-decrease": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: minus, iconOnly: true, arialabel: this.labelDecrease || this.translate('DECREASE'), onClick: () => this.decreaseAmount() }), h("input", { key: '93ab63799f90cdecdbf3694ca56dfe92a5fe9e80', id: this.counterid, class: "pn-counter-input", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), h("pn-button", { key: 'a39f90c5ace631d8973a700f72d57a2490cad342', "data-increase": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: plus, iconOnly: true, arialabel: this.labelIncrease || this.translate('INCREASE'), onClick: () => this.increaseAmount() })), !!this.getTextMessage() && (h("p", { key: '0ed6cc20cb56637faa7d70c6fe903a5e412fff0e', id: this.idText, class: "pn-counter-helpertext" }, h("span", { key: 'def00a454a70d4ebc952cdfbfdb5b11eece74452' }, this.getTextMessage()))), h("p", { key: 'eef2cf6b2f193779d616e09c32a9fc0ece4c5104', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
     }
     static get watchers() { return {
         "value": ["watchValue"],

package/umd/modules/@postnord/web-components/components/pn-date-picker.js

@@ -3,7 +3,7 @@
  * By PostNord.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4, j as getTotalHeightOffset, k as awaitTopbar, r as reduceMotion, e as en$1 } from './helpers.js';
+import { u as uuidv4, j as getTotalHeightOffset, h as getMenuWidth, k as awaitTopbar, r as reduceMotion, e as en$1 } from './helpers.js';
 import { a as arrow_left } from './arrow_left.js';
 import { a as arrow_right } from './arrow_right.js';
 import { d as defineCustomElement$4 } from './pn-button2.js';
@@ -399,7 +399,7 @@ function getCode(code) {
     };
 }
 
-const pnDatePickerCss = "/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-date-picker {\n  position: relative;\n  display: block;\n}\n\npn-date-picker .pn-date-picker {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25em;\n  container-type: inline-size;\n  /** The calendar dropdown */\n  /* Month list */\n}\n@container (max-width: 24em) {\n  pn-date-picker .pn-date-picker .pn-date-picker-container {\n    flex: 1 1 20em;\n  }\n  pn-date-picker .pn-date-picker .pn-date-picker-range-icon {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-container {\n  display: block;\n  flex: 1 1 11em;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-label {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input {\n  border-color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:hover {\n  border-color: #500715;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:focus-visible {\n  background-color: #ffffff;\n  border-color: #a70707;\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-label {\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  font-weight: 400;\n  color: #2d2013;\n  margin: 0 0 0.25em 0;\n  gap: 0.5em;\n  -webkit-tap-highlight-color: transparent;\n  transition-property: color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-label {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-label > span {\n  font-size: 0.875em;\n}\npn-date-picker .pn-date-picker-field {\n  position: relative;\n  display: flex;\n}\npn-date-picker .pn-date-picker-input {\n  color: #2d2013;\n  background-color: #ffffff;\n  border: 0.0625em solid #969087;\n  border-radius: 0.5em;\n  padding: 0.75em;\n  font-family: inherit;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5em;\n  -webkit-font-smoothing: antialiased;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n  transition-property: outline-color, background-color, border-color, color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  padding-right: 3em;\n  flex: auto;\n  width: 100%;\n}\npn-date-picker .pn-date-picker-input:-webkit-autofill, pn-date-picker .pn-date-picker-input:-webkit-autofill:hover, pn-date-picker .pn-date-picker-input:-webkit-autofill:focus, pn-date-picker .pn-date-picker-input:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 10em #e0f8ff inset;\n  -webkit-text-fill-color: #2d2013;\n}\npn-date-picker .pn-date-picker-input:focus-visible {\n  outline-color: #005d92;\n  background-color: #ffffff;\n  border-color: #005d92;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-input {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-input::placeholder {\n  color: #5e554a;\n  font-weight: normal;\n}\npn-date-picker .pn-date-picker-input:hover {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:disabled {\n  color: #5e554a;\n  background-color: #f3f2f2;\n  border-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-input::-webkit-calendar-picker-indicator {\n  visibility: hidden;\n  inline-size: 0;\n}\npn-date-picker .pn-date-picker-input::-webkit-textfield-decoration-container, pn-date-picker .pn-date-picker-input::-webkit-search-cancel-button, pn-date-picker .pn-date-picker-input::-webkit-inner-spin-button, pn-date-picker .pn-date-picker-input::-webkit-outer-spin-button, pn-date-picker .pn-date-picker-input::-webkit-search-decoration {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\npn-date-picker .pn-date-picker-input[data-active] {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:read-only {\n  border-color: #ffffff;\n}\npn-date-picker .pn-date-picker-range-icon {\n  width: 1.5em;\n  margin-bottom: 0.8125em;\n  align-self: end;\n}\npn-date-picker .pn-date-picker-helpertext, pn-date-picker .pn-date-picker-error {\n  color: #5e554a;\n  font-size: 0.875em;\n  font-weight: 400;\n  margin: 0.25em 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25em;\n  text-align: left;\n}\npn-date-picker .pn-date-picker-helpertext[hidden], pn-date-picker .pn-date-picker-error[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-error {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-toggle {\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-button {\n  cursor: pointer;\n  font-size: 1em;\n  background-color: transparent;\n  border: 0.0625em solid #969087;\n  border-color: transparent;\n  padding: 0.25em;\n  margin: 0;\n  flex: auto;\n  border-radius: 3em;\n  transition-property: outline-color, background-color, border-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\npn-date-picker .pn-date-picker-button:first-child, pn-date-picker .pn-date-picker-button:last-child {\n  flex: 0 0 auto;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-button {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-button:focus {\n  background-color: #ffffff;\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:hover {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-button[data-active], pn-date-picker .pn-date-picker-button[data-range] {\n  background-color: #e0f8ff;\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:disabled {\n  cursor: not-allowed;\n}\npn-date-picker .pn-date-picker-button:disabled:hover {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-month {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-month[data-full] {\n  display: none;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-full] {\n    display: inline;\n  }\n}\npn-date-picker .pn-date-picker-month[data-abbr] {\n  display: inline;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-abbr] {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-sr-only {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  margin: -1px;\n  white-space: nowrap;\n}\npn-date-picker .pn-date-picker-calendar {\n  position: absolute;\n  z-index: 4;\n  top: calc(100% + 0.5em);\n  left: var(--pn-calendar-offset-left);\n  width: clamp(100%, 95vw, 20em);\n  max-width: 20em;\n  text-align: center;\n  border-radius: 0.5em;\n  background-color: #ffffff;\n  overflow: hidden;\n  visibility: hidden;\n  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);\n}\npn-date-picker .pn-date-picker-calendar[data-range] {\n  width: 100%;\n  max-width: unset;\n}\npn-date-picker .pn-date-picker-calendar[data-open], pn-date-picker .pn-date-picker-calendar[data-moving] {\n  visibility: visible;\n}\npn-date-picker .pn-date-picker-calendar[data-direction=top] {\n  top: unset;\n  bottom: calc(100% + 0.5em);\n  transform-origin: bottom left;\n}\npn-date-picker .pn-date-picker-calendar pn-button[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-calendar pn-button span {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-wrapper {\n  padding: 0.5em;\n}\npn-date-picker .pn-date-picker-title {\n  margin: 0.5em auto 0;\n  font-size: 0.875em;\n  font-weight: 500;\n  color: #2d2013;\n}\npn-date-picker .pn-date-picker-nav {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 1em;\n}\npn-date-picker .pn-date-picker-table {\n  width: 100%;\n  table-layout: fixed;\n  border-spacing: 0;\n  border: 0;\n  margin: 0 0 0.5em;\n}\npn-date-picker .pn-date-picker-th {\n  font-size: 0.75em;\n  font-weight: 500;\n  color: #5e554a;\n  padding: 0.25em;\n  border: 0;\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-td {\n  cursor: pointer;\n  position: relative;\n  padding: 0.25em;\n  outline: 0;\n  border: 0;\n  line-height: 0;\n  width: 2em;\n  height: 2em;\n  -webkit-tap-highlight-color: transparent;\n}\npn-date-picker .pn-date-picker-td-text {\n  position: relative;\n  display: block;\n  line-height: 1.5em;\n  border-radius: 0.5em;\n  color: #2d2013;\n  padding: 0.25em;\n  transition-property: color, background-color, outline-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td-text {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[data-blank] {\n  cursor: auto;\n}\npn-date-picker .pn-date-picker-td[data-blank] .pn-date-picker-td-text {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-td-week {\n  font-size: 0.75em;\n  color: #5e554a;\n  display: block;\n}\npn-date-picker .pn-date-picker-td:before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0.25em;\n  height: calc(100% - 0.5em);\n  width: 100%;\n  background-color: transparent;\n  border: 0.0625em solid transparent;\n  border-radius: 0.5em;\n  transition-property: border-color, background-color, width, transform, left;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td:before {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] {\n  cursor: not-allowed;\n  pointer-events: none;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] > .pn-date-picker-td-text {\n  color: #5e554a;\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:hover > .pn-date-picker-td-text, pn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true] .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true]:before {\n  border-color: #005d92;\n  background-color: #effbff;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-single]:before {\n  width: 2em;\n  left: 50%;\n  transform: translateX(-50%);\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range]:before {\n  border-radius: 0;\n  border-left: 0;\n  border-right: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-from]:before {\n  border-radius: 0.5em 0 0 0.5em;\n  border-right-width: 0;\n  border-left-width: 0.0625em;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-to]:before {\n  border-radius: 0 0.5em 0.5em 0;\n  border-right-width: 0.0625em;\n  border-left-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:before {\n  border-color: #a70707;\n  background-color: #fdefee;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true] > .pn-date-picker-td-text {\n  background-color: unset;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=false]:hover > .pn-date-picker-td-text {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text:after {\n  bottom: 0.15em;\n}\npn-date-picker .pn-date-picker-td[data-active][data-today] > .pn-date-picker-td-text:after {\n  background-color: #005d92;\n}\npn-date-picker .pn-date-picker-td:focus-visible > .pn-date-picker-td-text {\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-list {\n  margin: 0 0 1em;\n  padding: 0;\n  list-style: none;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 0.5em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button {\n  display: block;\n  width: 100%;\n  border-radius: 0.5em;\n  padding: 0.5em 0.25em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today] {\n  position: relative;\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today]::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips] {\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  gap: 0.5em;\n  margin-bottom: 0.5em;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips]:empty {\n  display: none;\n}\npn-date-picker .pn-date-picker-bottom {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-date-picker .pn-date-picker-bottom[hidden] {\n  display: none;\n}";
+const pnDatePickerCss = "/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-date-picker {\n  position: relative;\n  display: block;\n}\n\npn-date-picker .pn-date-picker {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25em;\n  container-type: inline-size;\n  /** The calendar dropdown */\n  /* Month list */\n}\n@container (max-width: 24em) {\n  pn-date-picker .pn-date-picker .pn-date-picker-container {\n    flex: 1 1 20em;\n  }\n  pn-date-picker .pn-date-picker .pn-date-picker-range-icon {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-container {\n  display: block;\n  flex: 1 1 11em;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-label {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input {\n  border-color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:hover {\n  border-color: #500715;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:focus-visible {\n  background-color: #ffffff;\n  border-color: #a70707;\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-label {\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  font-weight: 400;\n  color: #2d2013;\n  margin: 0 0 0.25em 0;\n  gap: 0.5em;\n  -webkit-tap-highlight-color: transparent;\n  transition-property: color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-label {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-label > span {\n  font-size: 0.875em;\n}\npn-date-picker .pn-date-picker-field {\n  position: relative;\n  display: flex;\n}\npn-date-picker .pn-date-picker-input {\n  color: #2d2013;\n  background-color: #ffffff;\n  border: 0.0625em solid #969087;\n  border-radius: 0.5em;\n  padding: 0.75em;\n  font-family: inherit;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5em;\n  -webkit-font-smoothing: antialiased;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n  transition-property: outline-color, background-color, border-color, color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  padding-right: 3em;\n  flex: auto;\n  width: 100%;\n}\npn-date-picker .pn-date-picker-input:-webkit-autofill, pn-date-picker .pn-date-picker-input:-webkit-autofill:hover, pn-date-picker .pn-date-picker-input:-webkit-autofill:focus, pn-date-picker .pn-date-picker-input:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 10em #e0f8ff inset;\n  -webkit-text-fill-color: #2d2013;\n}\npn-date-picker .pn-date-picker-input:focus-visible {\n  outline-color: #005d92;\n  background-color: #ffffff;\n  border-color: #005d92;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-input {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-input::placeholder {\n  color: #5e554a;\n  font-weight: normal;\n}\npn-date-picker .pn-date-picker-input:hover {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:disabled {\n  color: #5e554a;\n  background-color: #f3f2f2;\n  border-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-input::-webkit-calendar-picker-indicator {\n  visibility: hidden;\n  inline-size: 0;\n}\npn-date-picker .pn-date-picker-input::-webkit-textfield-decoration-container, pn-date-picker .pn-date-picker-input::-webkit-search-cancel-button, pn-date-picker .pn-date-picker-input::-webkit-inner-spin-button, pn-date-picker .pn-date-picker-input::-webkit-outer-spin-button, pn-date-picker .pn-date-picker-input::-webkit-search-decoration {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\npn-date-picker .pn-date-picker-input[data-active] {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:read-only {\n  border-color: #ffffff;\n}\npn-date-picker .pn-date-picker-range-icon {\n  width: 1.5em;\n  margin-bottom: 0.8125em;\n  align-self: end;\n}\npn-date-picker .pn-date-picker-helpertext, pn-date-picker .pn-date-picker-error {\n  color: #5e554a;\n  font-size: 0.875em;\n  font-weight: 400;\n  margin: 0.25em 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25em;\n  text-align: left;\n}\npn-date-picker .pn-date-picker-helpertext[hidden], pn-date-picker .pn-date-picker-error[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-error {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-toggle {\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-button {\n  cursor: pointer;\n  font-size: 1em;\n  background-color: transparent;\n  border: 0.0625em solid #969087;\n  border-color: transparent;\n  padding: 0.25em;\n  margin: 0;\n  flex: auto;\n  border-radius: 3em;\n  transition-property: outline-color, background-color, border-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\npn-date-picker .pn-date-picker-button:first-child, pn-date-picker .pn-date-picker-button:last-child {\n  flex: 0 0 auto;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-button {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-button:focus {\n  background-color: #ffffff;\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:hover {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-button[data-active], pn-date-picker .pn-date-picker-button[data-range] {\n  background-color: #e0f8ff;\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:disabled {\n  cursor: not-allowed;\n}\npn-date-picker .pn-date-picker-button:disabled:hover {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-month {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-month[data-full] {\n  display: none;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-full] {\n    display: inline;\n  }\n}\npn-date-picker .pn-date-picker-month[data-abbr] {\n  display: inline;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-abbr] {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-sr-only {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  margin: -1px;\n  white-space: nowrap;\n}\npn-date-picker .pn-date-picker-calendar {\n  position: absolute;\n  z-index: 4;\n  top: calc(100% + 0.5em);\n  left: var(--pn-calendar-offset-left);\n  width: clamp(100%, 95vw, 20em);\n  max-width: 20em;\n  text-align: center;\n  border-radius: 0.5em;\n  background-color: #ffffff;\n  overflow: hidden;\n  visibility: hidden;\n  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);\n}\npn-date-picker .pn-date-picker-calendar[data-range] {\n  max-width: unset;\n}\npn-date-picker .pn-date-picker-calendar[data-open], pn-date-picker .pn-date-picker-calendar[data-moving] {\n  visibility: visible;\n}\npn-date-picker .pn-date-picker-calendar[data-direction=top] {\n  top: unset;\n  bottom: calc(100% + 0.5em);\n  transform-origin: bottom left;\n}\npn-date-picker .pn-date-picker-calendar pn-button[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-calendar pn-button span {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-wrapper {\n  padding: 0.5em;\n}\npn-date-picker .pn-date-picker-title {\n  margin: 0.5em auto 0;\n  font-size: 0.875em;\n  font-weight: 500;\n  color: #2d2013;\n}\npn-date-picker .pn-date-picker-nav {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 1em;\n}\npn-date-picker .pn-date-picker-table {\n  width: 100%;\n  table-layout: fixed;\n  border-spacing: 0;\n  border: 0;\n  margin: 0 0 0.5em;\n}\npn-date-picker .pn-date-picker-th {\n  font-size: 0.75em;\n  font-weight: 500;\n  color: #5e554a;\n  padding: 0.25em;\n  border: 0;\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-td {\n  cursor: pointer;\n  position: relative;\n  padding: 0.25em;\n  outline: 0;\n  border: 0;\n  line-height: 0;\n  width: 2em;\n  height: 2em;\n  -webkit-tap-highlight-color: transparent;\n}\npn-date-picker .pn-date-picker-td-text {\n  position: relative;\n  display: block;\n  line-height: 1.5em;\n  border-radius: 0.5em;\n  color: #2d2013;\n  padding: 0.25em;\n  transition-property: color, background-color, outline-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td-text {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[data-blank] {\n  cursor: auto;\n}\npn-date-picker .pn-date-picker-td[data-blank] .pn-date-picker-td-text {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-td-week {\n  font-size: 0.75em;\n  color: #5e554a;\n  display: block;\n}\npn-date-picker .pn-date-picker-td:before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0.25em;\n  height: calc(100% - 0.5em);\n  width: 100%;\n  background-color: transparent;\n  border: 0.0625em solid transparent;\n  border-radius: 0.5em;\n  transition-property: border-color, background-color, width, transform, left;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td:before {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] {\n  cursor: not-allowed;\n  pointer-events: none;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] > .pn-date-picker-td-text {\n  color: #5e554a;\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:hover > .pn-date-picker-td-text, pn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true] .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true]:before {\n  border-color: #005d92;\n  background-color: #effbff;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-single]:before {\n  width: 2em;\n  left: 50%;\n  transform: translateX(-50%);\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range]:before {\n  border-radius: 0;\n  border-left-width: 0;\n  border-right-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-from]:before {\n  border-radius: 0.5em 0 0 0.5em;\n  border-right-width: 0;\n  border-left-width: 0.0625em;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-to]:before {\n  border-radius: 0 0.5em 0.5em 0;\n  border-right-width: 0.0625em;\n  border-left-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:before {\n  border-color: #a70707;\n  background-color: #fdefee;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true] > .pn-date-picker-td-text {\n  background-color: unset;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=false]:hover > .pn-date-picker-td-text {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text:after {\n  bottom: 0.15em;\n}\npn-date-picker .pn-date-picker-td[data-active][data-today] > .pn-date-picker-td-text:after {\n  background-color: #005d92;\n}\npn-date-picker .pn-date-picker-td:focus-visible > .pn-date-picker-td-text {\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-list {\n  margin: 0 0 1em;\n  padding: 0;\n  list-style: none;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 0.5em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button {\n  display: block;\n  width: 100%;\n  border-radius: 0.5em;\n  padding: 0.5em 0.25em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today] {\n  position: relative;\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today]::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips] {\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  gap: 0.5em;\n  margin-bottom: 0.5em;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips]:empty {\n  display: none;\n}\npn-date-picker .pn-date-picker-bottom {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-date-picker .pn-date-picker-bottom[hidden] {\n  display: none;\n}";
 const PnDatePickerStyle0 = pnDatePickerCss;
 
 const PnDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class PnDatePicker extends HTMLElement {
@@ -553,11 +553,27 @@ const PnDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class PnDatePicker exten
             const fitDownwards = spaceDownwards > scrollHeight;
             const openTop = (this.openUp && (fitUpwards || spaceUpwards > spaceDownwards)) || (!fitDownwards && fitUpwards);
             this.openUp = openTop;
-            // Calc y-axis
+            // Calc horizontal positioning - center calendar relative to host element
             const rectCal = this.getRect(this.calendarElement);
-            const widthMinusRight = innerWidth - rectCal.right;
-            const offset = 0 > widthMinusRight ? widthMinusRight - 8 : 0;
-            this.calendarElement.style.setProperty('--pn-calendar-offset-left', `${Math.floor(offset)}px`);
+            const menuWidth = getMenuWidth();
+            // Calculate center position: host center minus half of calendar width
+            const hostCenterX = rectHost.x + rectHost.width / 2;
+            const calendarHalfWidth = rectCal.width / 2;
+            const idealCenterOffset = hostCenterX - calendarHalfWidth - rectCal.x;
+            // Check boundaries, accounting for menu width on the left
+            const calendarLeftEdge = rectCal.x + idealCenterOffset;
+            const calendarRightEdge = calendarLeftEdge + rectCal.width;
+            const leftBoundary = menuWidth + 16; // Menu width + buffer
+            let finalOffset = idealCenterOffset;
+            // Adjust if calendar would go beyond left edge of viewport or over the menu
+            if (calendarLeftEdge < leftBoundary) {
+                finalOffset = leftBoundary - rectCal.x;
+            }
+            // Adjust if calendar would go beyond right edge of viewport
+            else if (calendarRightEdge > innerWidth - 16) {
+                finalOffset = innerWidth - 16 - rectCal.width - rectCal.x;
+            }
+            this.calendarElement.style.setProperty('--pn-calendar-offset-left', `${Math.floor(finalOffset)}px`);
         });
     }
     handleMessage() {
@@ -1050,7 +1066,7 @@ const PnDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class PnDatePicker exten
         return (h("div", { class: "pn-date-picker-container", "data-error": this.hasError() }, h("label", { class: "pn-date-picker-label", htmlFor: id }, h("span", null, label)), h("div", { class: "pn-date-picker-field" }, h("input", { type: "text", id: id, class: "pn-date-picker-input", name: this.name, placeholder: placeholder, autocomplete: this.autocomplete, maxlength: this.disableMaxLength ? null : this.format.length, list: list, pattern: this.pattern, value: value, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError()?.toString(), onInput: e => this.inputHandler(e, to), "data-active": editing }), showButton && (h("pn-button", { class: "pn-date-picker-toggle", buttonId: idButton, icon: calendar, iconOnly: true, appearance: "light", arialabel: textButton, ariaexpanded: this.open.toString(), ariacontrols: this.idCalendar, "data-active": this.open, "data-input": true, small: true, onPnClick: () => this.toggleGrid(null, to), onKeyDown: e => this.handleButtonBlur(e) })))));
     }
     render() {
-        return (h(Host, { key: '6122e6224b4aa8570a714522dc323088074f5185' }, h("div", { key: 'd7d3c86378c680d3ddd14d9f3cb073f4bb42e2cf', class: "pn-date-picker" }, this.renderInput(), this.range && (h("div", { key: '3f02b31a0e03aef31b84777d6047d1b328ff633d', class: "pn-date-picker-range-icon test" }, h("pn-icon", { key: 'ad328bd870726dea04b2496d2059a67de218ceac', icon: arrow_right }))), this.range && this.renderInput({ to: this.range })), h("div", { key: '71c8518c6500591a4c0d7dc72681d9bcad264641', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-moving": this.isClosing || this.isExpanding, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, h("div", { key: '277f45e3372d096521889fa4bca4c1971346f0d3', class: "pn-date-picker-wrapper" }, h("nav", { key: '06336288e1d9a65ba4aa796328b09003cb79271d', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, h("pn-button", { key: '6361907855287330a3e9c537ce02bd948baccaa4', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), h("pn-button", { key: '21ae6b846df3bd12b314cb6b40f6d60dc8a0cc02', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, h("span", { key: '9f555bfea7f07abb32d8e96e6d84b547b4946899', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), h("span", { key: '0a434038cb6ceb7fb52e89161408da00c8f3e0e3', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), h("h2", { key: 'c63bfdcb83caf9fe9aec34416060d4ffe6ae6b08', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), h("pn-button", { key: '502e44a09ca6194365542c1223e3e994e2fbe9d0', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, h("span", { key: 'e0e9bbe7234ae0ce544fc3b89c94c798f3a60123' }, this.dateViewYear)), h("pn-button", { key: 'f93f7301ab9b61cd386dcdb19df482a7b1f4a15d', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), h("aside", { key: '3473b9b53b3d0007828a367f05dcbb6fb3959e7e', class: "pn-date-picker-chips" }, h("slot", { key: '94e47d8d7feb1caa5db4fd24d97500258e1c4f98', name: "chips" })), h("nav", { key: '2245cab78f67e9ecf3932bda19075b13cfa27d61', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, h("pn-button", { key: 'e8163e75c8197331f7ab77ed6a2fb94fde445131', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, h("span", { key: '3a9028867b88cb831ef4cfc35039a10299c8fdeb' }, this.translate('GO_CALENDAR')))))), h("p", { key: 'dd4412fdfff7ef9c1c254a09c38831908c10c010', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: 'd61ee102ecb131c481e220c073fe268b9228ebbb' }, this.helpertext), h("slot", { key: '3d54b17455d0e7a2a72564856978eee3e3f8ef45', name: "helpertext" })), h("p", { key: 'f42fd4bdff5c0ad22c3de99725bf1dbedd5788c8', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '69d7fd68b1157960d095ace9a423a1a3a08702fc' }, this.error), h("slot", { key: 'd2676dccff19ee3a22fe62b077f44c509500f267', name: "error" }))));
+        return (h(Host, { key: '683125ae4363ce235cc3aec68a1d4003593425d1' }, h("div", { key: 'cf4cf8baae7d387533013fe59722bb4401431dbd', class: "pn-date-picker" }, this.renderInput(), this.range && (h("div", { key: 'fae36c22bd631fde3313c2240cd33e6f871ff405', class: "pn-date-picker-range-icon test" }, h("pn-icon", { key: 'd0f18d8a7ff81248471b27975eb24242fc8b5157', icon: arrow_right }))), this.range && this.renderInput({ to: this.range })), h("div", { key: '6f4f250edc36dd15d4a5a330bf5d8c5125289a09', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-moving": this.isClosing || this.isExpanding, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, h("div", { key: 'a8821cca04a6301bd148c3dbfee28bf86c94e543', class: "pn-date-picker-wrapper" }, h("nav", { key: '38f404ea6187d754ac44160bcda2291e0739610d', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, h("pn-button", { key: '923845f5df9f35ff74ffeb2ed63c903696a4399d', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), h("pn-button", { key: '32e6f337bc1b82adcf11b2668974c0c4b9f2c730', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, h("span", { key: 'e1bcc4e89726d5c25e94d87b283b543987674f2d', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), h("span", { key: 'b93becc6c92ef4693f158e08276aa21e496d10c3', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), h("h2", { key: '1aa3fc4c553858c947205610a4958fc153f63527', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), h("pn-button", { key: '16fdeb8efb9744d9fb5db3b41eea172ad9b49c32', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, h("span", { key: '491246d413dd42fe794d155720f847d9339bf81f' }, this.dateViewYear)), h("pn-button", { key: '8a2acfd530f049d13972125dd6e6fc8120020b18', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), h("aside", { key: '7905780579fdbea9ff9bc03c05208c6714a1b690', class: "pn-date-picker-chips" }, h("slot", { key: '3aacde33dde852b97b75327c378248395bf74b03', name: "chips" })), h("nav", { key: '37bf1f4447f480986bf905375149d40d42318374', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, h("pn-button", { key: '0ba2954cf4f994e5befcf0546e45333b1a0030c2', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, h("span", { key: 'f6af5dbb4dff963d6b07147f1573f22797abd4e4' }, this.translate('GO_CALENDAR')))))), h("p", { key: '4ceaeea86eeeb3e6cafa2b09343ee1b3ff7fada8', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: 'b40445ded778af04b0313e84645226fe59e0bc9a' }, this.helpertext), h("slot", { key: '0cf4aee251e8aaf33618c9f318451069b6bfe22f', name: "helpertext" })), h("p", { key: 'dbcc74e7fdea8f7b1053226448cbc419ebaf9498', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '9cc3055b8389abadd3f7d2303cc755b71cc238b3' }, this.error), h("slot", { key: '4c1eef7f48dba08b33f05b836f55abcc39b5abe3', name: "error" }))));
     }
     static get watchers() { return {
         "minDate": ["watchMin"],