@postnord/pn-marketweb-components 3.5.2 → 3.5.3

package/umd/modules/@postnord/web-components/postnord-web-components/p-2615282e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["translations","CLOSE_MODAL","en","sv","da","fi","no","pnModalCss","PnModalStyle0","PnModal","mo","standardAnimationDuration","animationDuration","this","modalTimeout","modalElement","handleOpen","open","openModal","closeModal","close","emit","handleOverflow","clearTimeout","isClosing","reduceMotion","setTimeout","modalVisiblity","visible","handleMaxWidth","width","maxWidth","style","setProperty","modalToggle","connectedCallback","MutationObserver","forceUpdate","hostElement","observe","childList","subtree","disconnectedCallback","disconnect","componentWillLoad","language","awaitTopbar","componentDidLoad","translate","prop","allowOverflow","overflow","scrollHeight","innerHeight","isSameModal","target","isSameNode","handleKeyboard","event","key","preventDefault","stopImmediatePropagation","persistent","setModalClose","clickModalBackground","clientY","clientX","notInsideAnyModal","localName","notThisModal","top","left","height","getBoundingClientRect","isInModal","toggleOpen","showModal","state","render","h","Host","class","sheet","onClose","onCancel","onToggle","onKeyDown","onClick","ref","el","hideClose","small","icon","closeIcon","iconOnly","arialabel","appearance","variant","type","onPnClick","label","helpertext","name"],"sources":["src/components/feedback/pn-modal/translation.ts","src/components/feedback/pn-modal/pn-modal.scss?tag=pn-modal","src/components/feedback/pn-modal/pn-modal.tsx"],"sourcesContent":["export const translations = {\n  CLOSE_MODAL: {\n    en: 'Close dialog',\n    sv: 'Stäng dialogrutan',\n    da: 'Luk dialogboks',\n    fi: 'Sulje valintaikkuna',\n    no: 'Lukk dialogboksen',\n  },\n};\n\nexport type PnTranslations = keyof typeof translations;\n","@use 'sass:string';\n@use 'src/globals/main';\n\npn-modal .pn-modal {\n  --pn-modal-max-width: 45em;\n  --pn-modal-overflow: hidden auto;\n\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  margin: auto;\n\n  overflow: var(--pn-modal-overflow);\n\n  max-width: var(--pn-modal-max-width);\n  max-height: 85vh;\n  padding: clamp(1em, 5vw, 1.5em) 0;\n\n  border: 0.0625em solid main.$gray50;\n  border-radius: 0.5em;\n\n  flex-direction: column;\n  align-items: stretch;\n  gap: 0.75em;\n\n  box-shadow:\n    0 0.25em 0.875em rgba(0, 0, 0, 0.18),\n    0 1.625em 3.5em rgba(0, 0, 0, 0.22);\n  background-color: main.$white;\n\n  display: none;\n  opacity: 0;\n  transform: translate(0%, 20%);\n\n  @include main.pn-focus(main.$white);\n  @include main.pn-scrollbar;\n\n  @include main.pn-transition('opacity, overlay, display, transform, outline-color', main.$timing-layout);\n  transition-behavior: allow-discrete;\n\n  &[data-sheet] {\n    margin: 0 0 0 auto;\n    height: 100%;\n    max-height: unset;\n    border-radius: 0.5em 0 0 0.5em;\n    transform: translate(20%, 0%);\n  }\n\n  &[open] {\n    display: flex;\n    opacity: 1;\n    transform: translate(0%, 0%);\n\n    @starting-style {\n      display: flex;\n      opacity: 0;\n      transform: translate(0%, 20%);\n    }\n\n    &[data-sheet] {\n      transform: translate(0%, 0%);\n      @starting-style {\n        transform: translate(20%, 0%);\n      }\n    }\n  }\n\n  &::backdrop {\n    background-color: rgba(main.$black, 0);\n\n    @include main.pn-transition('opacity, background-color, overlay, display', main.$timing-layout);\n    transition-behavior: allow-discrete;\n  }\n\n  &[open]::backdrop {\n    background-color: rgba(main.$black, 0.55);\n    @starting-style {\n      background-color: rgba(main.$black, 0);\n    }\n  }\n\n  &-close-button {\n    position: absolute;\n    right: 0.5em;\n    top: 0.5em;\n  }\n\n  &-header {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5em;\n    padding: 0 clamp(1em, 5vw, 1.5em);\n  }\n\n  &-label {\n    line-height: 1.5;\n    padding-right: 1.5em;\n    margin: 0;\n  }\n\n  &-text {\n    margin: 0;\n  }\n\n  &-content {\n    padding: 0 clamp(1em, 5vw, 1.5em);\n  }\n\n  &-buttons {\n    background-color: main.$white;\n    border-top: 0.0625em solid main.$gray200;\n    padding: clamp(1em, 5vw, 1.5em) clamp(1em, 5vw, 1.5em) 0;\n    display: flex;\n    justify-content: flex-end;\n    gap: 0.5em;\n    [slot='buttons']:not(pn-button) {\n      display: flex;\n      justify-content: flex-end;\n      gap: 0.5em;\n    }\n    &:empty {\n      display: none;\n    }\n  }\n}\n\n@media (max-width: 30em) {\n  pn-modal .pn-modal {\n    width: 100%;\n    max-height: 95vh;\n    margin-bottom: 0;\n    bottom: 0;\n    transform: translate(0%, 20%);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch, Event, EventEmitter, forceUpdate, State } from '@stencil/core';\nimport { awaitTopbar, en, reduceMotion } from '@/index';\nimport type { PnLanguages } from '@/index';\n\nimport { close as closeIcon } from 'pn-design-assets/pn-assets/icons.js';\nimport { PnTranslations, translations } from './translation';\n\n/**\n * Present content in a modal that overlays everything on the current page.\n * Use the prop `open` to toggle the visiblity.\n * Use the event `modalToggle` to determine when the modal is being closed/opened by the user.\n *\n * @slot - The default slot, will be placed in the middle content area.\n * @slot header - Place the title + lead text in the header.\n * @slot buttons - Place buttons inside the modal at the bottom.\n */\n@Component({\n  tag: 'pn-modal',\n  styleUrl: 'pn-modal.scss',\n})\nexport class PnModal {\n  private mo: MutationObserver;\n\n  private readonly standardAnimationDuration = 400;\n  private animationDuration: number = this.standardAnimationDuration;\n\n  modalTimeout: NodeJS.Timeout;\n\n  private modalElement: HTMLDialogElement;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() isClosing: boolean = false;\n  @State() isOpening: boolean = false;\n\n  /** Set a label for the modal. */\n  @Prop() label?: string;\n  /** Set a descriptive text for the modal. */\n  @Prop() helpertext?: string;\n  /** Set the language. */\n  @Prop() language?: PnLanguages = null;\n\n  /** Bind to this property if you want to control the visibility of the modal from your own data. @category Features */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /** Prevent users from closing the modal by clicking on the backdrop or the `ESC` key. @category Features */\n  @Prop() persistent?: boolean = false;\n  /** Hide the close button. If you disable this, make sure you build your own cancel button. @category Features */\n  @Prop() hideClose?: boolean = false;\n  /**\n   * Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight.\n   * Do not use if you have a lot of conditional rendering inside the modal.\n   */\n  @Prop() allowOverflow?: boolean = false;\n\n  /** Use the `sheet` visual. Aligns the modal to the right. @category Visual */\n  @Prop() sheet?: boolean = false;\n  /** Define your own max width of the modal. Default is `45em`. @category Visual */\n  @Prop() maxWidth?: string = null;\n\n  @Watch('open')\n  handleOpen() {\n    if (this.open) this.openModal();\n    else {\n      this.closeModal();\n      /** In the next update, we can remove this one so you can finally stack modals. */\n      this.close.emit(true);\n    }\n\n    this.handleOverflow();\n\n    clearTimeout(this.modalTimeout);\n    this.isClosing = !this.open && true;\n\n    if (reduceMotion()) this.animationDuration = 0;\n    else this.animationDuration = this.standardAnimationDuration;\n\n    this.modalTimeout = setTimeout(() => {\n      this.isClosing = false;\n      this.modalVisiblity.emit({ visible: this.open });\n    }, this.animationDuration);\n  }\n\n  @Watch('maxWidth')\n  handleMaxWidth() {\n    const width = this.maxWidth || '45em';\n    this.modalElement.style.setProperty('--pn-modal-max-width', width);\n  }\n\n  /** This event is fired when the modal is toggled. */\n  @Event() modalToggle: EventEmitter<{ open: boolean }>;\n  /** This event is dispatched after the opening/closing animation has finished playing. */\n  @Event() modalVisiblity: EventEmitter<{ visible: boolean }>;\n  /**\n   * Event fired when the modal is closed, either by clicking on the dark background or by clicking on the close button.\n   * @deprecated Use the new `modalToggle` event instead.\n   */\n  @Event() close: EventEmitter<boolean>;\n\n  connectedCallback() {\n    this.mo = new MutationObserver(() => forceUpdate(this.hostElement));\n    this.mo.observe(this.hostElement, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  async componentWillLoad() {\n    if (this.language === null) await awaitTopbar(this.hostElement);\n  }\n\n  componentDidLoad() {\n    this.handleMaxWidth();\n    if (this.open) this.openModal();\n  }\n\n  private translate(prop: PnTranslations) {\n    return translations?.[prop]?.[this.language || en] || prop;\n  }\n\n  private handleOverflow() {\n    if (!this.allowOverflow) return;\n    const overflow = this.modalElement.scrollHeight > innerHeight * 0.85 ? 'hidden auto' : 'unset';\n    this.modalElement.style.setProperty('--pn-modal-overflow', overflow);\n  }\n\n  private isSameModal(target: HTMLElement) {\n    return this.modalElement.isSameNode(target);\n  }\n\n  private handleKeyboard(event: KeyboardEvent) {\n    if (event.key !== 'Escape') return;\n\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    if (!this.persistent) this.setModalClose();\n  }\n\n  private clickModalBackground(event: MouseEvent) {\n    const { clientY, clientX } = event;\n\n    const notInsideAnyModal = (event.target as HTMLDialogElement).localName !== this.modalElement.localName;\n    const notThisModal = !this.isSameModal(event.target as HTMLElement);\n\n    if (notInsideAnyModal || notThisModal) return;\n\n    const { top, left, height, width } = this.modalElement.getBoundingClientRect();\n    const isInModal = top <= clientY && clientY <= top + height && left <= clientX && clientX <= left + width;\n\n    if (!isInModal && !this.persistent) this.toggleOpen(false);\n  }\n\n  private setModalClose() {\n    this.toggleOpen(false);\n  }\n\n  private closeModal() {\n    this.modalElement.close();\n  }\n\n  private openModal() {\n    this.modalElement.showModal();\n  }\n\n  private toggleOpen(state?: boolean) {\n    this.open = state ?? !this.open;\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          class=\"pn-modal\"\n          data-closing={this.isClosing}\n          data-sheet={this.sheet}\n          onClose={() => this.setModalClose()}\n          onCancel={() => this.setModalClose()}\n          onToggle={() => this.modalToggle.emit({ open: this.open })}\n          onKeyDown={event => this.handleKeyboard(event)}\n          onClick={event => this.clickModalBackground(event)}\n          ref={el => (this.modalElement = el)}\n        >\n          {!this.hideClose && (\n            <pn-button\n              small\n              class=\"pn-modal-close-button\"\n              icon={closeIcon}\n              iconOnly={true}\n              arialabel={this.translate('CLOSE_MODAL')}\n              appearance=\"light\"\n              variant=\"borderless\"\n              type=\"button\"\n              onPnClick={() => this.setModalClose()}\n            />\n          )}\n\n          <header class=\"pn-modal-header\">\n            {this.label && <h2 class=\"pn-modal-label\">{this.label}</h2>}\n            {this.helpertext && <p class=\"pn-modal-text\">{this.helpertext}</p>}\n\n            <slot name=\"header\"></slot>\n          </header>\n\n          <section class=\"pn-modal-content\">\n            <slot></slot>\n          </section>\n\n          <nav class=\"pn-modal-buttons\">\n            <slot name=\"buttons\"></slot>\n          </nav>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/umd/modules/@postnord/web-components/postnord-web-components/p-3bd59ac8.entry.js

@@ -1,6 +0,0 @@
-/*!
- * Built with Stencil
- * By PostNord.
- */
-import{r as n,c as t,g as i,h as e,a as o}from"./p-43660913.js";import{u as a,k as s,e as c,r,j as u,h as p,o as m,i as l}from"./p-f64d17a6.js";import{a as d}from"./p-bf967b50.js";import{a as h,b}from"./p-c96ff403.js";import{o as f}from"./p-773aa70a.js";const g={BACK:{sv:"Tillbaka",en:"Back",da:"Tilbage",fi:"Takaisin",no:"Tilbake"}};const k="pn-action-menu{--pn-menu-height:unset;display:inline-block;position:relative}pn-action-menu .pn-action-menu{position:relative}pn-action-menu .pn-action-menu-container{--pn-action-menu-offset:0;scroll-behavior:smooth;list-style:none;text-align:left;position:absolute;z-index:100;top:calc(100% + 0.5em);left:var(--pn-action-menu-offset);right:0;background-color:#ffffff;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);border-radius:0.5em;margin:0;padding:0;width:16em;visibility:hidden;overflow:hidden;}pn-action-menu .pn-action-menu-container[data-open]{visibility:visible;overflow:unset}pn-action-menu .pn-action-menu-container[data-left]{right:0;left:unset}pn-action-menu .pn-action-menu-container[data-upwards]{top:unset;bottom:calc(100% + 0.5em);transform-origin:bottom left}pn-action-menu .pn-action-menu-container[data-moving]{overflow:hidden;visibility:visible;pointer-events:none}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-list{border-radius:0.5em;visibility:hidden;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0.2s}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-list{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-list[data-current]{overflow-x:auto;visibility:visible;transition-delay:0s}pn-action-menu .pn-action-menu-container[data-small][data-moving]>.pn-action-menu-list{visibility:visible}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-item{position:unset}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-sub{left:0;height:100%;box-shadow:unset;transform:translateX(0);visibility:hidden}pn-action-menu .pn-action-menu-container[data-small] .pn-action-menu-sub[data-current]{visibility:visible;overflow-x:auto}pn-action-menu .pn-action-menu-container::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-action-menu .pn-action-menu-container::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-action-menu .pn-action-menu-container::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-action-menu .pn-action-menu-container::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-action-menu .pn-action-menu-container::-webkit-scrollbar-corner,pn-action-menu .pn-action-menu-container::-webkit-scrollbar-button{display:none}pn-action-menu .pn-action-menu-list{margin:0;padding:0;list-style:none;height:var(--pn-menu-height)}pn-action-menu .pn-action-menu-list::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-action-menu .pn-action-menu-list::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-action-menu .pn-action-menu-list::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-action-menu .pn-action-menu-list::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-action-menu .pn-action-menu-list::-webkit-scrollbar-corner,pn-action-menu .pn-action-menu-list::-webkit-scrollbar-button{display:none}pn-action-menu .pn-action-menu-group{margin:0;padding:0;list-style:none}pn-action-menu .pn-action-menu-group-label{display:block;color:#2d2013;font-weight:700;font-size:0.875em;padding:1em 1em 0.5em}pn-action-menu .pn-action-menu-group-helpertext{display:block;color:#5e554a;font-weight:400;margin:0.25em 0 0}pn-action-menu .pn-action-menu-sub{z-index:110;position:absolute;top:0;width:100%;min-width:12em;margin:0;padding:0;list-style:none;background:#ffffff;border-radius:0.5em;box-shadow:0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1), 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);transform:translateX(-0.5em);opacity:0;visibility:hidden;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0s, 0s, 0.2s}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-corner,pn-action-menu .pn-action-menu-sub::-webkit-scrollbar-button{display:none}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-sub{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-sub[data-open=true]{transform:translateX(0);opacity:1;visibility:visible;transition-delay:0s, 0s, 0s}pn-action-menu .pn-action-menu-sub[data-open=false]{pointer-events:none}pn-action-menu .pn-action-menu-sub[data-x=left]{left:-100%}pn-action-menu .pn-action-menu-sub[data-x=center]{left:0}pn-action-menu .pn-action-menu-sub[data-x=right]{left:100%}pn-action-menu .pn-action-menu-sub[data-y=top]{top:unset;bottom:0}pn-action-menu .pn-action-menu-sub[data-y=bottom]{top:0}pn-action-menu .pn-action-menu-item{position:relative}pn-action-menu .pn-action-menu-item:first-child>.pn-action-menu-item-content>.pn-action-menu-button{border-top-left-radius:0.5em;border-top-right-radius:0.5em}pn-action-menu .pn-action-menu-item:last-child>.pn-action-menu-item-content>.pn-action-menu-button{border-bottom-right-radius:0.5em;border-bottom-left-radius:0.5em}pn-action-menu .pn-action-menu-item-text{display:flex;flex-direction:column;margin-right:auto}pn-action-menu .pn-action-menu-item-label{color:#005d92;font-weight:500;text-decoration:none}pn-action-menu .pn-action-menu-item-suffix{margin-left:auto;font-weight:400;color:#5e554a}pn-action-menu .pn-action-menu-item-helpertext{color:#5e554a;font-weight:400}pn-action-menu .pn-action-menu-item-content{display:flex;align-items:center;flex-direction:row;flex:1 1 100%;gap:0.5em;position:relative}pn-action-menu .pn-action-menu-item-content[data-close]{border-bottom:0.0625em solid #d3cecb}pn-action-menu .pn-action-menu-item-content>pn-icon{padding:0 0.25em}pn-action-menu .pn-action-menu-item[data-group],pn-action-menu .pn-action-menu-item[data-sub]{flex-direction:column}pn-action-menu .pn-action-menu-button{cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;line-height:1.5;padding:0.75em 1em;border:0;width:100%;text-align:left;text-decoration-color:transparent;overflow:hidden;display:flex;align-items:center;flex:1 1 100%;gap:0.5em;font-size:1em;min-height:1.5em;background-color:#ffffff;transition-property:background-color, color, outline-color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem;outline-offset:-0.2rem;}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-button{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-button .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#0d234b;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-action-menu .pn-action-menu-button:focus-visible{outline-color:#005d92}pn-action-menu .pn-action-menu-button>pn-icon .pn-icon-svg>path{transform-origin:center;transform:rotate(0deg);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-button>pn-icon .pn-icon-svg>path{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-button>pn-icon[data-suffix][data-active]>.pn-icon-svg>path{transform:rotate(180deg)}pn-action-menu .pn-action-menu-button>pn-icon:last-child{margin-left:auto}pn-action-menu .pn-action-menu-button:disabled{pointer-events:none;color:#5e554a;background-color:#f3f2f2}pn-action-menu .pn-action-menu-button:hover{background-color:#effbff}pn-action-menu .pn-action-menu-button:focus{background-color:#e0f8ff}pn-action-menu .pn-action-menu-button[href]:hover,pn-action-menu .pn-action-menu-button[href]:focus{text-decoration-color:#005d92}pn-action-menu .pn-action-menu-checkbox{background-color:#ffffff;flex:0 0 1.5em;width:1.5em;height:1.5em;border:0.0625em solid #969087;border-radius:0.25em;margin-left:auto;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, border-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-checkbox{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-checkbox svg polyline{stroke:#ffffff;stroke-linecap:round;stroke-dasharray:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0s}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-checkbox svg polyline{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-checkbox svg polyline.pn-action-menu-checkbox-checkmark-path{stroke-dashoffset:23}pn-action-menu .pn-action-menu-radio{display:flex;gap:0.75em;padding:0;margin-left:auto}pn-action-menu .pn-action-menu-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-radio-outer{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-radio-inner{transform:scale(0);height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu-radio-inner{transition-duration:0s;transition-delay:0s}}pn-action-menu .pn-action-menu-input{position:absolute;z-index:10;cursor:pointer;height:100%;width:100%;top:0;left:0;margin:0;opacity:0;-webkit-tap-highlight-color:transparent}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button{background-color:#effbff}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#005d92;background-color:#005d92}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-checkbox polyline.pn-action-menu-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92}pn-action-menu .pn-action-menu-input:checked+.pn-action-menu-button .pn-action-menu-radio-inner{transform:scale(1);background-color:#005d92}pn-action-menu .pn-action-menu-input:checked:hover{background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:disabled{pointer-events:none}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button{pointer-events:none;color:#5e554a;background-color:#f3f2f2}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-item-label{color:#5e554a}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-checkbox{background-color:#f3f2f2}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#969087;background-color:#f3f2f2}pn-action-menu .pn-action-menu-input:disabled+.pn-action-menu-button .pn-icon-svg path{fill:#5e554a}pn-action-menu .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-radio-inner{background-color:#969087}pn-action-menu .pn-action-menu-input:disabled:checked+.pn-action-menu-button .pn-action-menu-checkbox{border-color:#969087;background-color:#969087}pn-action-menu .pn-action-menu-input:hover+.pn-action-menu-button{background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:hover+.pn-action-menu-button .pn-action-menu-radio-outer{border-color:#005d92;background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:focus-visible+.pn-action-menu-button{background-color:#e0f8ff}pn-action-menu .pn-action-menu-input:focus-visible+.pn-action-menu-button .pn-action-menu-checkbox,pn-action-menu .pn-action-menu-input:focus-visible+.pn-action-menu-button .pn-action-menu-radio .pn-action-menu-radio-outer{outline-color:#005d92}pn-action-menu .pn-action-menu-p{margin:0}pn-action-menu .pn-action-menu>pn-button[data-default-icon] .pn-button[aria-expanded=true] .pn-icon-svg{transform:rotate(180deg);transition-delay:0s}pn-action-menu .pn-action-menu>pn-button[data-default-icon] .pn-button .pn-icon-svg{transform:rotate(0deg);transition-delay:0.2s;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-action-menu .pn-action-menu>pn-button[data-default-icon] .pn-button .pn-icon-svg{transition-duration:0s;transition-delay:0s}}";const v=k;const y=class{constructor(i){n(this,i);this.menuToggle=t(this,"menuToggle",7);this.menuVisible=t(this,"menuVisible",7);this.menuOption=t(this,"menuOption",7);this.smallMenu=null;this.upwards=false;this.activeSubmenu=[];this.isClosing=false;this.isExpanding=false;this.options=[];this.button=undefined;this.menuId=this.id;this.language=null;this.open=false;this.menuUp=false;this.menuLeft=false}id=`pn-action-menu-${a()}`;menuButtonId=`${this.id}-button`;menuListId=`${this.id}-list`;menuTrigger;menuContainer;menuList;animation;duration=400;animationDuration=this.duration;timeout;menuWidth=256;get hostElement(){return i(this)}menuToggle;menuVisible;menuOption;handleOptions(){this.setMenuLayout()}openHandler(){this.setAnimationDuration();requestAnimationFrame((()=>{if(this.open&&!(this.isClosing||this.isExpanding)){this.setOffset();this.setMenuLayout()}this.gridHandler();this.menuToggle.emit({open:this.open});clearTimeout(this.timeout);this.timeout=setTimeout((()=>{if(!this.open){this.activeSubmenu=[];const n=this.hostElement.querySelectorAll("[data-x]");Array.from(n).forEach((n=>{n.removeAttribute("data-x");n.removeAttribute("data-y")}))}this.menuVisible.emit({visible:this.open})}),this.animationDuration)}))}handleMenuId(){this.menuButtonId=`${this.menuId}-button`;this.menuListId=`${this.menuId}-list`}handleResize(){if(this.open)this.toggleActionMenu(false)}async componentWillLoad(){if(!this.options.length)console.warn(`${this.hostElement.localName}: No options set.`);this.handleMenuId();this.setAnimationDuration();if(this.language!==null)await s(this.hostElement)}componentDidLoad(){this.setOffset();if(this.open)this.gridHandler()}translate(n){return g[n][this.language||c]}toggleActionMenu(n){this.open=n??!this.open}setMenuLayout(){if(!this.menuContainer)return;if(!(this.isClosing||this.isExpanding))this.resetMaxHeight();const n=this.getMenuMeasurements();this.setDirection(n);this.setMenuSize(n);this.setMaxHeight(n)}setDirection({hUp:n,hDown:t,sUp:i,sDown:e}){const o=i>n;const a=e>t;const s=e>i;this.upwards=this.menuUp&&o||!a&&!s}setMenuSize({hUp:n,hDown:t,sUp:i,sDown:e}){const o=l();const a=this.upwards?i>n:e>t;const s=o||!a;if(s!==this.smallMenu){this.smallMenu=s}}setMaxHeight({hUp:n,hDown:t,sUp:i,sDown:e}){if(this.smallMenu){const o=n>i?n-16:n;const a=t>e?t-8:t;this.hostElement.style.setProperty("--pn-menu-height",`${this.upwards?o:a}px`)}else this.resetMaxHeight()}resetMaxHeight(){this.hostElement.style.setProperty("--pn-menu-height","unset")}setAnimationDuration(){if(r())this.animationDuration=0;else this.animationDuration=this.duration}getRect(n){return n.getBoundingClientRect()}getMenuMeasurements(){const n=Array.from(this.menuContainer.querySelectorAll("menu"));const t=Math.max(...n.map((n=>n.scrollHeight)));const i=this.getRect(this.menuTrigger);const e=this.getRect(this.menuContainer);const o=i.top-u();const a=o>t?t:o;const s=innerHeight-e.top;const c=s>t?t:s;return{hUp:a,hDown:c,sUp:o,sDown:s}}setOffset(){const n=this.getRect(this.hostElement);const t=n.left-p()+this.menuWidth;const i=t>innerWidth;const e=i?t-innerWidth+16:0;if(this.menuContainer)this.menuContainer.style.setProperty("--pn-action-menu-offset",`-${e}px`)}getListId(n){return`pn-menu-${n.value}-list`}getButtonId(n){return`pn-menu-${n.value}-button`}getTriggerIcon(){if(this.button?.icon)return;return d}getSubMenuPath(n,t,i=[]){for(const e of n){const n=[...i,e.value];if(e.value===t)return n;if(e.options||e.group){const i=this.getSubMenuPath(e.options||e.group,t,n);if(i)return i}}return null}closeEachSubMenu(){this.menuTrigger?.querySelector("button")?.focus({preventScroll:true});const n=setInterval((()=>{if(this.smallMenu||this.activeSubmenu.length===0){clearInterval(n);this.toggleActionMenu(false)}else{this.activeSubmenu.pop();this.activeSubmenu=[...this.activeSubmenu]}}),150)}escButton(n,t){const{key:i}=n;if(i==="Escape"){n.preventDefault();n.stopImmediatePropagation();this.isSubmenuActive(t.value)?this.toggleSub(t):this.toggleActionMenu()}}gridHandler(){if(this.open)this.openGrid();else this.closeGrid()}openGrid(){const n=this.getRect(this.menuList);const{clientHeight:t}=this.menuContainer;const i=this.isClosing?t:0;this.menuContainer.style.height=`${n.height}px`;this.isExpanding=true;this.animateGrid(true,`${i}px`,`${n.height}px`)}closeGrid(){const n=this.getRect(this.menuList);const{clientHeight:t}=this.menuContainer;const i=this.isExpanding?t:n.height;this.menuContainer.style.height=`0px`;this.isClosing=true;this.animateGrid(false,`${i}px`,`0px`)}animateGrid(n,t,i){this.cancelAnimations();this.animation=this.menuContainer.animate({height:[t,i]},{duration:this.animationDuration,easing:"cubic-bezier(0.6, 0, 0.2, 1)"});this.animation.onfinish=()=>this.animationFinish();this.animation.oncancel=()=>n?this.isExpanding=false:this.isClosing=false}animationFinish(){this.cancelAnimations();this.menuContainer.style.height=this.isClosing?"0px":"";this.isClosing=false;this.isExpanding=false}cancelAnimations(){if(this.animation)this.animation.cancel()}async optionSelect(n,t){const i=n?.options?.length?"submenu":!!n.input?"input":n.href?"link":"button";const e=i==="submenu";if(e)this.toggleSub(n);else if(i==="button")this.closeEachSubMenu();else if(i==="input")n.checked=t.target.checked;this.menuOption.emit({option:n,type:i,click:t,open:e?this.isSubmenuActive(n.value):null});const o=t.target;const a=o.localName==="input"?o.nextElementSibling:o.className==="pn-action-menu-button"?o:o.closest(".pn-action-menu-button");const{x:s,width:c,y:r,top:u}=this.getRect(a);const p={clientX:s+c-24,clientY:r-u};m(t.type==="click"?t:p,a);this.menuContainer.scrollTo({top:0})}toggleSub(n){const{value:t}=n;const i=this.getSubMenuPath(this.options,t);const e=this.activeSubmenu.includes(t);e&&i.splice(this.activeSubmenu.indexOf(t),1);const o=this.hostElement.querySelector(`#${this.getListId(n)}`);const a=this.getRect(o);const s=a.left;const c=innerWidth-a.right-8;const r=s>a.width;const u=c>a.width;const p=this.menuUp&&a.top-a.height>0;const m=p?"top":"bottom";if(!e&&!o.dataset.x)o.setAttribute("data-x",this.menuLeft&&r?"left":u?"right":r?"left":"center");if(!e&&!o.dataset.y)o.setAttribute("data-y",m);if(JSON.stringify(i)===JSON.stringify(this.activeSubmenu))this.activeSubmenu=this.activeSubmenu.filter((n=>n!==t));else this.activeSubmenu=[...i]}isSubmenuActive(n){return this.activeSubmenu.includes(n)}isMenuActive(){const n=this.options.find((({value:n})=>this.activeSubmenu.every((t=>t===n))));return this.smallMenu&&(this.activeSubmenu?.length===0||n)}isCurrentSubMenu(n){return Boolean(this.activeSubmenu[this.activeSubmenu.length-1]===n)}getOptionTrailing(n){const t=n.options?.length&&b;const i=n.trailingIcon;const o=n.target==="_blank"&&f;const a=t||i||o;if(a){return e("pn-icon",{icon:a,color:"blue700","data-suffix":true,"data-active":this.isSubmenuActive(n.value)})}if(n.suffix){return e("span",{class:"pn-action-menu-item-suffix"},n.suffix)}}renderCheckbox(n){const t=`pn-menu-${n.value}-label`;const i=`pn-menu-${n.value}-helpertext`;return e("div",{class:"pn-action-menu-item-content"},e("input",{type:n.input,id:t,class:"pn-action-menu-input",name:n.name,value:n.value,checked:n.checked,disabled:n.disabled,"aria-describedby":n.helpertext?i:null,onInput:t=>this.optionSelect(n,t),tabIndex:this.open?null:-1}),e("div",{class:"pn-action-menu-button"},!!n.icon&&e("pn-icon",{icon:n.icon,color:"blue700"}),e("div",{class:"pn-action-menu-item-text"},e("label",{htmlFor:t,class:"pn-action-menu-item-label"},n.label),n.helpertext&&e("p",{id:i,class:"pn-action-menu-item-helpertext"},e("span",null,n.helpertext))),n.input==="checkbox"?e("div",{class:"pn-action-menu-checkbox"},e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},e("polyline",{class:"pn-action-menu-checkbox-checkmark-path",points:"4,12 9,17 20,6","stroke-width":"3"}))):e("div",{class:"pn-action-menu-radio"},e("div",{class:"pn-action-menu-radio-outer"},e("div",{class:"pn-action-menu-radio-inner"})))))}renderButton(n){const t=n.label==="BACK";const i=!!n?.options?.length;const o=!!n?.group?.length;const a=!!n.href&&!i&&!o;const s=t?"-close":"";const c=t||!!n.icon;const r=t?null:this.getOptionTrailing(n);const u=this.isSubmenuActive(n.value);const p=i?{"aria-haspopup":"true","aria-controls":u?this.getListId(n):null,"aria-expanded":u?.toString()}:{};const m=a?{href:n.href,target:n.target}:{disabled:n.disabled};const l=a?"a":"button";return o?e("div",{class:"pn-action-menu-group-label"},e("p",{class:"pn-action-menu-p"},n.label),n.helpertext&&e("p",{class:"pn-action-menu-group-helpertext"},n.helpertext)):e("div",{class:"pn-action-menu-item-content","data-close":t},e(l,{id:this.getButtonId(n)+s,class:"pn-action-menu-button",...p,...m,tabIndex:this.open?null:-1,onClick:t=>this.optionSelect(n,t),onKeyDown:t=>this.escButton(t,n)},c&&e("pn-icon",{icon:t?h:n.icon,color:"blue700"}),e("div",{class:"pn-action-menu-item-text"},e("span",{class:"pn-action-menu-item-label"},t?this.translate("BACK"):n.label),n.helpertext&&!a&&e("span",{class:"pn-action-menu-item-helpertext"},n.helpertext)),r))}renderSub(n){return e("menu",{id:this.getListId(n),"aria-labelledby":this.getButtonId(n),class:"pn-action-menu-sub","data-open":this.isSubmenuActive(n.value)?.toString(),"data-current":this.isCurrentSubMenu(n.value)},this.smallMenu&&e("li",{class:"pn-action-menu-item"},this.renderButton({label:"BACK",value:n.value,options:n.options})),n.options.map((n=>this.renderMenuItem(n))))}renderGroup(n){return e("menu",{class:"pn-action-menu-group"},n.group.map((n=>this.renderMenuItem(n))))}renderMenuItem(n){const t=!!n?.options?.length;const i=!t&&!!n?.group?.length;const o=!!n.input&&!t&&!i;return e("li",{class:"pn-action-menu-item","data-group":i,"data-sub":t},o?this.renderCheckbox(n):this.renderButton(n),t?this.renderSub(n):i&&this.renderGroup(n))}renderMenu(){return e("div",{id:this.menuListId,class:"pn-action-menu-container",role:"region","aria-labelledby":this.menuButtonId,"data-open":this.open,"data-moving":this.isClosing||this.isExpanding,"data-upwards":this.upwards,"data-small":this.smallMenu,style:{height:"0px"},ref:n=>this.menuContainer=n},e("menu",{class:"pn-action-menu-list",ref:n=>this.menuList=n,"data-current":this.isMenuActive()},this.options?.map((n=>this.renderMenuItem(n)))))}render(){return e(o,{key:"5a1638b9b0f880ebd9f3ebe2571df19c6b852baf"},e("div",{key:"87bf62a943099ce0a556ade3ce3eb11eedb003b2",id:this.menuId!==this.id?this.menuId:null,class:"pn-action-menu"},e("pn-button",{key:"a3024016a2a5962d9eefc3c4d617f946a3575c23",icon:this.getTriggerIcon(),...this.button,buttonId:this.menuButtonId,tooltipUp:!this.upwards,ariahaspopup:"true",ariacontrols:this.open?this.menuListId:null,ariaexpanded:this.open.toString(),"data-default-icon":!this.button?.icon,onPnClick:()=>this.toggleActionMenu(),ref:n=>this.menuTrigger=n}),this.renderMenu()))}static get watchers(){return{options:["handleOptions"],open:["openHandler"],menuId:["handleMenuId"]}}};y.style=v;export{y as pn_action_menu};
-//# sourceMappingURL=p-3bd59ac8.entry.js.map

package/umd/modules/@postnord/web-components/postnord-web-components/p-3bd59ac8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["translations","BACK","sv","en","da","fi","no","pnActionMenuCss","PnActionMenuStyle0","PnActionMenu","this","id","uuidv4","menuButtonId","menuListId","menuTrigger","menuContainer","menuList","animation","duration","animationDuration","timeout","menuWidth","menuToggle","menuVisible","menuOption","handleOptions","setMenuLayout","openHandler","setAnimationDuration","requestAnimationFrame","open","isClosing","isExpanding","setOffset","gridHandler","emit","clearTimeout","setTimeout","activeSubmenu","subMenus","hostElement","querySelectorAll","Array","from","forEach","el","removeAttribute","visible","handleMenuId","menuId","handleResize","toggleActionMenu","componentWillLoad","options","length","console","warn","localName","language","awaitTopbar","componentDidLoad","translate","prop","state","resetMaxHeight","measurements","getMenuMeasurements","setDirection","setMenuSize","setMaxHeight","hUp","hDown","sUp","sDown","fitsUpwards","fitsDownards","moreSpaceDown","upwards","menuUp","isWidthSmall","isSmallScreen","menuFits","isSmall","smallMenu","heightUp","heightDown","style","setProperty","reduceMotion","getRect","element","getBoundingClientRect","allLists","maxHeight","Math","max","map","scrollHeight","rectButton","rectMenu","top","getTotalHeightOffset","innerHeight","data","fullWidth","left","getMenuWidth","isWide","innerWidth","offset","getListId","option","value","getButtonId","getTriggerIcon","button","icon","angle_down","getSubMenuPath","path","item","newPath","group","result","closeEachSubMenu","querySelector","focus","preventScroll","interval","setInterval","clearInterval","pop","escButton","event","key","preventDefault","stopImmediatePropagation","isSubmenuActive","toggleSub","openGrid","closeGrid","list","clientHeight","height","animateGrid","startHeight","endHeight","cancelAnimations","animate","easing","onfinish","animationFinish","oncancel","cancel","optionSelect","click","type","input","href","isSubMenu","checked","target","nextElementSibling","className","closest","x","width","y","clientCor","clientX","clientY","ripple","scrollTo","isActive","includes","splice","indexOf","spaceLeft","spaceRight","right","fitsLeft","fitsRight","climbUp","yDirection","dataset","setAttribute","menuLeft","JSON","stringify","filter","isMenuActive","isRootSubInsideGroup","find","every","val","isCurrentSubMenu","Boolean","getOptionTrailing","useButtonIcon","angle_right","useTrailingIcon","trailingIcon","useLinkIcon","open_in_new","h","color","suffix","class","renderCheckbox","idHelper","name","disabled","helpertext","onInput","tabIndex","htmlFor","label","xmlns","viewBox","fill","points","renderButton","isCloseButton","isSub","isGroup","isLink","appendedId","hasIcon","trailingObject","subMenuAttrs","toString","attrs","Tag","onClick","onKeyDown","angle_left","renderSub","renderMenuItem","renderGroup","isCheckbox","renderMenu","role","ref","render","Host","buttonId","tooltipUp","ariahaspopup","ariacontrols","ariaexpanded","onPnClick"],"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"],"mappings":"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","ignoreList":[]}

package/umd/modules/@postnord/web-components/postnord-web-components/p-4f67fffa.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["translations","LEFT","sv","en","da","fi","no","RIGHT","pnTablistCss","PnTablistStyle0","PnTablist","mo","isMenu","isTabHovered","tabListEl","lineActive","lineHovered","tabElement","tabchange","setValue","tabs","Array","from","this","hostElement","querySelectorAll","forEach","tab","activeTab","value","scrollHandler","showScrollArrows","addEventListener","scrollIndicators","bind","removeEventListener","setActiveTabHandler","detail","el","requestAnimationFrame","activateTab","val","emit","querySelector","focus","rerender","handleEnter","e","styleLines","target","handleLeave","setTimeout","style","setProperty","componentWillLoad","slot","language","awaitTopbar","componentDidLoad","disconnect","MutationObserver","forceUpdate","observe","childList","subtree","componentDidRender","getRect","element","getBoundingClientRect","active","tabListCoords","scrollOffset","scrollLeft","line","width","offset","left","cssVar","prop","scrollWidth","clientWidth","arrowLeft","arrowRight","scroll","right","tabList","scrollAmount","scrollTo","behavior","translate","render","h","Host","key","class","role","label","stackedicons","small","ref","onClick","noTab","appearance","variant","icon","angle_left","iconOnly","arialabel","angle_right"],"sources":["src/components/navigation/pn-tablist/translations.ts","src/components/navigation/pn-tablist/pn-tablist.scss?tag=pn-tablist","src/components/navigation/pn-tablist/pn-tablist.tsx"],"sourcesContent":["export default {\n  LEFT: {\n    sv: 'Bläddra åt vänster',\n    en: 'Scroll to the left',\n    da: 'Rul til venstre',\n    fi: 'Vieritä vasemmalle',\n    no: 'Rull til venstre',\n  },\n  RIGHT: {\n    sv: 'Bläddra åt höger',\n    en: 'Scroll to the right',\n    da: 'Rul til højre',\n    fi: 'Vieritä oikealle',\n    no: 'Rull til høyre',\n  },\n};\n","@use 'src/globals/main';\n\npn-tablist {\n  width: 100%;\n  min-width: 0;\n  position: relative;\n  border-bottom: 0.0625em solid main.$gray200;\n  display: block;\n\n  .pn-tablist,\n  ol,\n  ul {\n    display: flex;\n    width: 100%;\n    flex-direction: row;\n    gap: 1em;\n    position: relative;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    &[data-stacked] .pn-tab {\n      margin: 0.5em 0.25em 0.75em;\n      gap: 0.25em;\n      flex-direction: column;\n    }\n    &[data-small] .pn-tab {\n      margin: 0.25em 0.25em 0.75em;\n      > *:not(pn-icon) {\n        font-size: 0.875em;\n      }\n    }\n    &[data-large] .pn-tab > *:not(pn-icon) {\n      font-size: 1.25em;\n    }\n    &[data-scroll] {\n      overflow-y: hidden;\n      overflow-x: auto;\n      scroll-snap-type: x mandatory;\n    }\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n\npn-tablist .pn-tablist {\n  &-line {\n    height: 0.25em;\n    position: absolute;\n    bottom: 0;\n\n    &-item {\n      position: absolute;\n      width: 100%;\n      height: inherit;\n      border-radius: 0.25em 0.25em 0 0;\n\n      transform-origin: left center;\n      opacity: 0;\n      @include main.pn-transition('transform, opacity, width', main.$timing-layout);\n    }\n\n    &-active {\n      z-index: 1;\n      background-color: main.$blue700;\n      width: var(--pn-active-width);\n      transform: translateX(var(--pn-active-offset));\n      opacity: var(--pn-active-opacity);\n    }\n\n    &-hovered {\n      background-color: main.$blue400;\n      width: var(--pn-hover-width);\n      transform: translateX(var(--pn-hover-offset));\n      opacity: var(--pn-hover-opacity);\n    }\n  }\n\n  &-scroll {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    right: 0;\n    pointer-events: none;\n    transform: translateY(-50%);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    z-index: 1;\n    height: 100%;\n  }\n\n  &-arrow {\n    pointer-events: all;\n\n    transform: scaleY(0);\n    opacity: 0;\n    visibility: hidden;\n\n    @include main.pn-transition('transform, opacity, visibility');\n\n    &[data-show] {\n      opacity: 1;\n      visibility: visible;\n      transform: scaleY(1);\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  h,\n  Host,\n  Watch,\n  forceUpdate,\n} from '@stencil/core';\nimport { angle_left, angle_right } from 'pn-design-assets/pn-assets/icons.js';\nimport translations from './translations';\nimport { awaitTopbar, en } from '@/globals/helpers';\nimport type { PnLanguages } from '@/globals/types';\n\n/**\n * @slot menu - Can only be used inside of a `pn-header`. Allows the `href` attribute on the `pn-tab` when active.\n */\n@Component({\n  tag: 'pn-tablist',\n  styleUrl: 'pn-tablist.scss',\n})\nexport class PnTablist {\n  private mo: MutationObserver;\n\n  private isMenu: boolean = false;\n  private isTabHovered: boolean = false;\n\n  private tabListEl: HTMLElement;\n  private lineActive: HTMLDivElement;\n  private lineHovered: HTMLDivElement;\n  private tabElement: HTMLPnTabElement;\n\n  @Element() hostElement: HTMLElement;\n\n  /** Display the scrolling arrows */\n  @State() private showScrollArrows: boolean = false;\n  /** Display the scroll arrow to the left */\n  @State() private arrowLeft: boolean = false;\n  /** Display the scroll arrow to the right */\n  @State() private arrowRight: boolean = false;\n\n  /** Give the tablist a name for screenreaders */\n  @Prop() label!: string;\n  /** The value of the tab that is currently active, each `<pn-tab value=\"example-value\">` also expects a unique value */\n  @Prop({ reflect: true, mutable: true }) value!: string;\n  /** Make the tablist smaller */\n  @Prop() small?: boolean;\n  /** Icons are stacked vertically instead of the default rows */\n  @Prop() stackedicons: boolean = false;\n  /** Manually set the language. */\n  @Prop() language?: PnLanguages = null;\n\n  /**\n   * This will emit when a tab is changed. The detail property of the event will contain the value of the selected tab.\n   * This is the event and value you listen to when you toggle the visibility among your tabpanels.\n   **/\n  @Event() tabchange: EventEmitter<string>;\n\n  @Watch('value')\n  setValue() {\n    const tabs = Array.from(this.hostElement.querySelectorAll('pn-tab'));\n\n    tabs.forEach(tab => {\n      tab.activeTab = this.value;\n    });\n  }\n\n  @Watch('showScrollArrows')\n  scrollHandler() {\n    if (this.showScrollArrows) {\n      this.tabListEl.addEventListener('scroll', this.scrollIndicators.bind(this));\n    } else {\n      this.tabListEl.removeEventListener('scroll', this.scrollIndicators);\n    }\n  }\n\n  @Listen('setActiveTab')\n  setActiveTabHandler({ detail }) {\n    this.tabElement = detail.el;\n    requestAnimationFrame(() => this.activateTab(detail.el));\n    if (this.value === detail.val) return;\n    this.value = detail.val;\n    this.tabchange.emit(this.value);\n    this.tabElement.querySelector(this.isMenu ? 'a' : 'button').focus();\n  }\n\n  @Listen('resize', { target: 'window' })\n  rerender() {\n    requestAnimationFrame(() => {\n      this.scrollIndicators();\n      this.isTabHovered = false;\n    });\n  }\n\n  @Listen('tabEnter')\n  handleEnter(e: { target: HTMLPnTabElement }) {\n    this.isTabHovered = true;\n    this.styleLines(e.target);\n  }\n\n  @Listen('tabLeave')\n  handleLeave() {\n    this.isTabHovered = false;\n    setTimeout(() => {\n      if (!this.isTabHovered) this.lineHovered.style.setProperty('--pn-hover-opacity', '0');\n    }, 500);\n  }\n\n  async componentWillLoad() {\n    this.isMenu = this.hostElement.slot === 'menu';\n\n    if (this.language === null) await awaitTopbar(this.hostElement);\n  }\n\n  componentDidLoad() {\n    if (this.mo) this.mo.disconnect();\n    this.mo = new MutationObserver(() => {\n      forceUpdate(this.hostElement);\n      this.rerender();\n    });\n\n    this.mo.observe(this.hostElement, { childList: true, subtree: true });\n  }\n\n  componentDidRender() {\n    this.rerender();\n    this.setValue();\n  }\n\n  private getRect(element: HTMLElement | HTMLPnTablistElement): DOMRect {\n    return element.getBoundingClientRect();\n  }\n\n  private activateTab(element: HTMLPnTabElement) {\n    this.styleLines(element, true);\n  }\n\n  private styleLines(element: HTMLElement, active: boolean = false) {\n    const tabListCoords = this.getRect(this.tabListEl);\n    const scrollOffset = this.tabListEl.scrollLeft;\n\n    const line = this.getRect(element);\n\n    const width = line.width;\n    const offset = line.left + scrollOffset - tabListCoords.left;\n\n    const cssVar = active ? 'active' : 'hover';\n    const prop = active ? 'lineActive' : 'lineHovered';\n\n    this[prop].style.setProperty(`--pn-${cssVar}-width`, `${width}px`);\n    this[prop].style.setProperty(`--pn-${cssVar}-offset`, `${offset}px`);\n    this[prop].style.setProperty(`--pn-${cssVar}-opacity`, '1');\n  }\n\n  private scrollIndicators() {\n    const { scrollWidth, scrollLeft } = this.tabListEl;\n\n    const { clientWidth } = this.hostElement;\n\n    this.showScrollArrows = scrollWidth > clientWidth;\n\n    this.arrowLeft = this.showScrollArrows && scrollLeft > 0;\n    this.arrowRight = this.showScrollArrows && clientWidth + 16 + scrollLeft < scrollWidth;\n  }\n\n  private scroll({ right = false }: { right?: boolean } = {}) {\n    const tabList = this.tabListEl;\n    const { scrollLeft, clientWidth } = tabList;\n\n    let left: number = scrollLeft;\n    // The width of the scroll arrow is 32px, so we remove that from this calculation so the scroll\n    const scrollAmount = clientWidth - 64;\n\n    if (right) left += scrollAmount;\n    else left -= scrollAmount;\n\n    tabList.scrollTo({\n      left,\n      behavior: 'smooth',\n    });\n  }\n\n  private translate(prop: string): string {\n    return translations?.[prop]?.[this.language || en];\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav\n          class=\"pn-tablist\"\n          role={this.isMenu ? null : 'tablist'}\n          aria-label={this.label}\n          data-stacked={this.stackedicons}\n          data-small={!this.isMenu && this.small}\n          data-large={this.isMenu}\n          data-scroll={this.showScrollArrows}\n          ref={el => (this.tabListEl = el)}\n        >\n          <slot />\n          <div class=\"pn-tablist-line\">\n            <div ref={el => (this.lineActive = el)} class=\"pn-tablist-line-item pn-tablist-line-active\" />\n            <div ref={el => (this.lineHovered = el)} class=\"pn-tablist-line-item pn-tablist-line-hovered\" />\n          </div>\n        </nav>\n\n        <div class=\"pn-tablist-scroll\">\n          <pn-button\n            class=\"pn-tablist-arrow\"\n            data-show={this.arrowLeft}\n            onClick={() => this.scroll()}\n            noTab={true}\n            appearance=\"light\"\n            variant=\"outlined\"\n            icon={angle_left}\n            iconOnly={true}\n            arialabel={this.translate('LEFT')}\n            small\n          />\n\n          <pn-button\n            class=\"pn-tablist-arrow\"\n            data-show={this.arrowRight}\n            onClick={() => this.scroll({ right: true })}\n            noTab={true}\n            appearance=\"light\"\n            variant=\"outlined\"\n            icon={angle_right}\n            iconOnly={true}\n            arialabel={this.translate('RIGHT')}\n            small\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/umd/modules/@postnord/web-components/postnord-web-components/p-514107a5.entry.js

@@ -1,6 +0,0 @@
-/*!
- * Built with Stencil
- * By PostNord.
- */
-import{r as t,c as a,g as s,h as e,a as o}from"./p-43660913.js";import{r as n,k as i,o as r,e as p}from"./p-f64d17a6.js";import{a as c}from"./p-9a18b612.js";import{a as l}from"./p-fc06684e.js";import{c as d}from"./p-ffa37a87.js";import{c as h}from"./p-92b0338a.js";const u='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.874 2.514a1 1 0 0 0-1.748 0l-10 18A1 1 0 0 0 2 22h20a1 1 0 0 0 .874-1.486zM12 5.06 20.3 20H3.7zm-1.375 4.936a1.38 1.38 0 1 1 2.75 0l-.292 3.509a1.087 1.087 0 0 1-2.166 0zM12 15.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/></svg>';const f=u;const b={HIDE:{sv:"Stäng meddelande",en:"Dismiss message",da:"Afvis besked",fi:"Hylkää viesti",no:"Avvis meldingen"}};const m="pn-toast{position:relative;display:block;overflow:hidden}pn-toast .pn-toast{position:relative;color:#2d2013;padding:1em;border-radius:0.5em;outline:none;font-size:1em;font-weight:400;background-color:#e0f8ff;border-color:#005d92;display:flex;align-items:center;gap:0.75em;visibility:visible;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast{transition-duration:0s;transition-delay:0s}}pn-toast .pn-toast .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-toast .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}pn-toast .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}pn-toast .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}pn-toast .pn-toast-text:last-child{margin-bottom:0}pn-toast .pn-toast-icon .pn-icon-svg path{fill:#2d2013}pn-toast .pn-toast-content{display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:0.25em;margin:0 auto 0 0}pn-toast .pn-toast-button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.25em;font-size:1em;display:flex;align-items:center;justify-content:center;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}@media (prefers-reduced-motion: reduce){pn-toast .pn-toast-button{transition-duration:0s;transition-delay:0s}}pn-toast .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}pn-toast .pn-toast-button:hover{background-color:#8eddf9}pn-toast .pn-toast[data-appearance=success]{background-color:#dcf6e7}pn-toast .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}pn-toast .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}pn-toast .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}pn-toast .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}pn-toast .pn-toast[data-appearance=warning]{background-color:#fff1e3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}pn-toast .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}pn-toast .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}pn-toast .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}pn-toast .pn-toast[data-appearance=error]{background-color:#fdefee}pn-toast .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}pn-toast .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}pn-toast .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}pn-toast .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}pn-toast .pn-toast[data-temporary]{border-style:solid;border-width:0.0625em;box-shadow:0 0.125em 0.25em rgba(0, 0, 0, 0.2)}";const g=m;const y=class{constructor(s){t(this,s);this.close=a(this,"close",7);this.hidden=a(this,"hidden",7);this.isClosing=false;this.isExpanding=false;this.hasSlottedContent=false;this.heading="";this.text="";this.toastId=undefined;this.appearance=undefined;this.temporary=false;this.icon=undefined;this.illustration=undefined;this.hide=false;this.closable=false;this.language=null}toast;button;duration=400;animationDuration=this.duration;animation;get hostElement(){return s(this)}handleHide(){if(n())this.animationDuration=0;else this.animationDuration=this.duration;if(this.hide)this.closeToast();else this.openToast()}close;hidden;async componentWillLoad(){if(this.hide)this.hostElement.style.height="0";if(this.language===null)await i(this.hostElement);this.hasSlottedContent=!!this.hostElement.textContent}componentDidLoad(){if(!!this.heading&&!this.text&&!this.hasSlottedContent)console.warn("The %s prop is only available if you use the %s prop or slotted content.","heading","text")}getRect(t){return t.getBoundingClientRect()}openToast(){requestAnimationFrame((()=>{const{scrollHeight:t}=this.hostElement;const{height:a}=this.getRect(this.hostElement);this.hostElement.style.height=`${a}px`;this.isExpanding=true;this.animateToast(true,`${a}px`,`${t}px`)}))}closeToast(){const{scrollHeight:t,clientHeight:a}=this.hostElement;const s=this.isExpanding?a:t;this.hostElement.style.height=`0px`;this.isClosing=true;this.animateToast(false,`${s}px`,`0px`)}animateToast(t,a,s){this.cancelAnimations();this.animation=this.hostElement.animate({height:[a,s]},{duration:this.animationDuration,easing:"cubic-bezier(0.6, 0, 0.2, 1)"});this.animation.onfinish=()=>this.animationFinish();this.animation.oncancel=()=>t?this.isExpanding=false:this.isClosing=false}animationFinish(){this.cancelAnimations();if(!this.hide)this.hostElement.style.height="";else this.hidden.emit(this.hide);this.isClosing=false;this.isExpanding=false}cancelAnimations(){if(this.animation)this.animation.cancel()}handleClick(t){this.hide=true;this.close.emit(this.hide);r(t,this.toast)}getIcon(){if(this.illustration)return"";if(this.icon)return this.icon;if(this.appearance==="success")return d;if(this.appearance==="warning")return f;if(this.appearance==="error")return c;return l}getRole(){return this.appearance==="error"?"alert":"status"}showIcon(){return!this.illustration}showIllustration(){return!this.showIcon()}showTitle(){return(this.hasSlottedContent||!!this.text)&&!!this.heading}translate(t){return b?.[t]?.[this.language||p]||t}hideToast(){return this.hide&&!(this.isClosing||this.isExpanding)}render(){return e(o,{key:"c735e200d6cf3061569c3e55caf583abed738725"},e("output",{key:"7911e4ca88367ea8130a20abda58449a1f7e3098",id:this.toastId,class:"pn-toast",role:this.getRole(),"data-appearance":this.appearance,"data-temporary":this.temporary,"data-hide":this.hideToast(),ref:t=>this.toast=t},this.showIcon()&&e("pn-icon",{key:"b064b710d21583eaba8d5ce1c3b162fb1c71f4e4",class:"pn-toast-icon",icon:this.getIcon()}),e("div",{key:"6e24b6771be924b56e2406ac92c5639f7da4b0b6",class:"pn-toast-content"},this.showTitle()&&e("h4",{key:"eb24bcbbd70b1b77e86c2598569f443bd7d1bdfb",class:"pn-toast-heading"},this.heading),this.text&&e("p",{key:"713b372860897ef9bc55f401282765bc5684b6f6",class:"pn-toast-text"},this.text),e("slot",{key:"e567f676f28d20370407fc481c52c92bc34a06e1"})),this.showIllustration()&&e("pn-illustration",{key:"6b0b4f9c1f588f71eb1154b6170994f59aaaae4a",illustration:this.illustration,width:"5.5em",height:"5.5em"}),this.closable&&e("button",{key:"4111381fb279dc2d5abe520188869133aa948246",class:"pn-toast-button",type:"button","aria-label":this.translate("HIDE"),onClick:t=>this.handleClick(t),ref:t=>this.button=t},e("pn-icon",{key:"020fe8b66ce1d955dcb5420c44b0b4b5b1845ab9",icon:h}))))}static get watchers(){return{hide:["handleHide"]}}};y.style=g;export{y as pn_toast};
-//# sourceMappingURL=p-514107a5.entry.js.map

package/umd/modules/@postnord/web-components/postnord-web-components/p-514107a5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icon","alert_exclamation_triangle","translations","HIDE","sv","en","da","fi","no","pnToastCss","PnToastStyle0","PnToast","toast","button","duration","animationDuration","this","animation","handleHide","reduceMotion","hide","closeToast","openToast","close","hidden","componentWillLoad","hostElement","style","height","language","awaitTopbar","hasSlottedContent","textContent","componentDidLoad","heading","text","console","warn","getRect","element","getBoundingClientRect","requestAnimationFrame","scrollHeight","isExpanding","animateToast","clientHeight","isClosing","open","startHeight","endHeight","cancelAnimations","animate","easing","onfinish","animationFinish","oncancel","emit","cancel","handleClick","event","ripple","getIcon","illustration","appearance","check_circle","alert_exclamation_circle","alert_info_circle","getRole","showIcon","showIllustration","showTitle","translate","prop","hideToast","render","h","Host","key","id","toastId","class","role","temporary","ref","el","width","closable","type","onClick"],"sources":["node_modules/pn-design-assets/pn-assets/icons/alert_exclamation_triangle.js","src/components/feedback/pn-toast/translation.ts","src/components/feedback/pn-toast/pn-toast.scss?tag=pn-toast","src/components/feedback/pn-toast/pn-toast.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M12.874 2.514a1 1 0 0 0-1.748 0l-10 18A1 1 0 0 0 2 22h20a1 1 0 0 0 .874-1.486zM12 5.06 20.3 20H3.7zm-1.375 4.936a1.38 1.38 0 1 1 2.75 0l-.292 3.509a1.087 1.087 0 0 1-2.166 0zM12 15.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3\" clip-rule=\"evenodd\"/></svg>';\nexport const alert_exclamation_triangle = icon;\nexport const alertExclamationTriangle = icon;\n","export const translations = {\n  HIDE: {\n    sv: 'Stäng meddelande',\n    en: 'Dismiss message',\n    da: 'Afvis besked',\n    fi: 'Hylkää viesti',\n    no: 'Avvis meldingen',\n  },\n};\n","@use 'src/globals/main';\n\npn-toast {\n  position: relative;\n  display: block;\n  overflow: hidden;\n}\n\npn-toast .pn-toast {\n  position: relative;\n\n  color: main.$gray900;\n  padding: 1em;\n  border-radius: 0.5em;\n\n  outline: none;\n  font-size: 1em;\n  font-weight: 400;\n  background-color: main.$blue50;\n  border-color: main.$blue700;\n\n  display: flex;\n  align-items: center;\n  gap: 0.75em;\n\n  visibility: visible;\n\n  @include main.pn-transition('visibility');\n\n  @include main.pn-ripple(main.$blue700);\n\n  &[data-hide] {\n    visibility: hidden;\n    transition-delay: main.$timing;\n  }\n\n  &-heading {\n    font-size: 1em;\n    font-style: normal;\n    font-weight: 500;\n    margin: 0;\n  }\n\n  &-text {\n    font-size: 1em;\n    font-style: normal;\n    font-weight: 400;\n    margin: 0 0 0.25em 0;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  &-icon .pn-icon-svg path {\n    fill: main.$gray900;\n  }\n\n  &-content {\n    display: flex;\n    flex-direction: column;\n    align-self: center;\n    align-items: flex-start;\n    gap: 0.25em;\n    margin: 0 auto 0 0;\n  }\n\n  &-button {\n    cursor: pointer;\n    border-radius: 50%;\n    border: none;\n    background: none;\n    padding: 0.25em;\n    font-size: 1em;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    @include main.pn-transition('background-color, outline-color');\n\n    @include main.pn-focus(main.$blue700, main.$blue200);\n\n    &:hover {\n      background-color: main.$blue200;\n    }\n  }\n\n  &[data-appearance='success'] {\n    background-color: main.$green50;\n\n    .pn-toast-button {\n      @include main.pn-focus(main.$green700, main.$green200);\n\n      &:hover {\n        background-color: main.$green200;\n      }\n    }\n\n    .pn-ripple {\n      background-color: main.$green700;\n    }\n\n    .pn-toast-icon .pn-icon-svg path {\n      fill: main.$green700;\n    }\n\n    &[data-temporary] {\n      border-color: main.$green700;\n    }\n  }\n\n  &[data-appearance='warning'] {\n    background-color: main.$orange50;\n\n    .pn-toast-button {\n      @include main.pn-focus(main.$orange700, main.$orange200);\n\n      &:hover {\n        background-color: main.$orange200;\n      }\n    }\n\n    .pn-ripple {\n      background-color: main.$orange700;\n    }\n\n    .pn-toast-icon .pn-icon-svg path {\n      fill: main.$orange700;\n    }\n\n    &[data-temporary] {\n      border-color: main.$orange500;\n    }\n  }\n\n  &[data-appearance='error'] {\n    background-color: main.$coral50;\n\n    .pn-toast-button {\n      @include main.pn-focus(main.$warning, main.$coral200);\n\n      &:hover {\n        background-color: main.$coral200;\n      }\n    }\n\n    .pn-ripple {\n      background-color: main.$warning;\n    }\n\n    .pn-toast-icon .pn-icon-svg path {\n      fill: main.$warning;\n    }\n\n    &[data-temporary] {\n      border-color: main.$warning;\n    }\n  }\n\n  &[data-temporary] {\n    border-style: solid;\n    border-width: 0.0625em;\n    box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.2);\n  }\n}\n","import type { PnLanguages } from '@/index';\nimport { awaitTopbar, en, ripple, reduceMotion } from '@/index';\nimport { Component, Host, Prop, h, Element, EventEmitter, Event, State, Watch } from '@stencil/core';\nimport {\n  alert_info_circle,\n  check_circle,\n  alert_exclamation_triangle,\n  alert_exclamation_circle,\n  close,\n} from 'pn-design-assets/pn-assets/icons.js';\nimport { translations } from './translation';\n\n/**\n * This component is able to fill many roles of a classic toast.\n * It has 4 different colors, a temporary state, hide button, icon and illustration support.\n *\n * The `pn-toast` will expand to its parent containers full width.\n * Either limit the parent width or set a CSS rule to your specific width if needed.\n */\n@Component({\n  tag: 'pn-toast',\n  styleUrl: 'pn-toast.scss',\n})\nexport class PnToast {\n  toast: HTMLOutputElement;\n  button: HTMLButtonElement;\n\n  private readonly duration: number = 400;\n  private animationDuration: number = this.duration;\n  private animation: Animation;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() isClosing = false;\n  @State() isExpanding = false;\n\n  @State() hasSlottedContent: boolean = false;\n\n  /**\n   * Set a title for the toast. Requires the `text` prop in order to work.\n   * @description Can be used together with slotted content.\n   */\n  @Prop() heading?: string = '';\n  /**\n   * Set a paragraph of text for the toast.\n   * @description Can be used together with slotted content.\n   */\n  @Prop() text?: string = '';\n  /** Give the toast a HTML ID. */\n  @Prop() toastId?: string;\n  /**\n   * Default color is blue, you also have the option of success (green), warning (orange) and error (red).\n   * @category Visual\n   */\n  @Prop() appearance?: '' | 'success' | 'warning' | 'error';\n  /**\n   * This will apply a shadow and border to the toast.\n   * @category Visual\n   */\n  @Prop() temporary: boolean = false;\n  /**\n   * Set an SVG icon.\n   * @category Visual\n   */\n  @Prop() icon?: string;\n  /**\n   * Set an SVG illustration.\n   * @category Visual\n   */\n  @Prop() illustration?: string;\n  /**\n   * Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own.\n   * @see {@link closable}\n   * @category Features\n   */\n  @Prop({ mutable: true, reflect: true }) hide: boolean = false;\n  /**\n   * Show close button.\n   * @category Features\n   */\n  @Prop() closable: boolean = false;\n  /**\n   * Manually set the language, only needed if the `closable` prop is enabled.\n   * @see {@link closable}\n   * @category Features\n   */\n  @Prop({ mutable: true }) language?: PnLanguages = null;\n\n  @Watch('hide')\n  handleHide() {\n    if (reduceMotion()) this.animationDuration = 0;\n    else this.animationDuration = this.duration;\n\n    if (this.hide) this.closeToast();\n    else this.openToast();\n  }\n\n  /** Event fired when the close button is pressed. */\n  @Event() close: EventEmitter<boolean>;\n  /**\n   * This event is fired when the toast is fully hidden after the animation is finished.\n   * Triggers from the close button or if the prop `hide` is set to true.\n   **/\n  @Event() hidden: EventEmitter<boolean>;\n\n  async componentWillLoad() {\n    if (this.hide) this.hostElement.style.height = '0';\n\n    if (this.language === null) await awaitTopbar(this.hostElement);\n    // Any text content at this stage means there is slotted content present.\n    this.hasSlottedContent = !!this.hostElement.textContent;\n  }\n\n  componentDidLoad() {\n    if (!!this.heading && !this.text && !this.hasSlottedContent)\n      console.warn('The %s prop is only available if you use the %s prop or slotted content.', 'heading', 'text');\n  }\n\n  private getRect(element: HTMLElement): DOMRect {\n    return element.getBoundingClientRect();\n  }\n\n  private openToast() {\n    requestAnimationFrame(() => {\n      const { scrollHeight } = this.hostElement;\n      const { height } = this.getRect(this.hostElement);\n\n      this.hostElement.style.height = `${height}px`;\n\n      this.isExpanding = true;\n      this.animateToast(true, `${height}px`, `${scrollHeight}px`);\n    });\n  }\n\n  private closeToast() {\n    const { scrollHeight, clientHeight } = this.hostElement;\n    const height = this.isExpanding ? clientHeight : scrollHeight;\n    this.hostElement.style.height = `0px`;\n\n    this.isClosing = true;\n    this.animateToast(false, `${height}px`, `0px`);\n  }\n\n  private animateToast(open: boolean, startHeight: string, endHeight: string) {\n    this.cancelAnimations();\n    this.animation = this.hostElement.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    if (!this.hide) this.hostElement.style.height = '';\n    else this.hidden.emit(this.hide);\n    this.isClosing = false;\n    this.isExpanding = false;\n  }\n\n  private cancelAnimations() {\n    if (this.animation) this.animation.cancel();\n  }\n\n  private handleClick(event: PointerEvent) {\n    this.hide = true;\n    this.close.emit(this.hide);\n    ripple(event, this.toast);\n  }\n\n  private getIcon(): string {\n    if (this.illustration) return '';\n    if (this.icon) return this.icon;\n    if (this.appearance === 'success') return check_circle;\n    if (this.appearance === 'warning') return alert_exclamation_triangle;\n    if (this.appearance === 'error') return alert_exclamation_circle;\n    return alert_info_circle;\n  }\n\n  private getRole(): string {\n    return this.appearance === 'error' ? 'alert' : 'status';\n  }\n\n  private showIcon(): boolean {\n    return !this.illustration;\n  }\n\n  private showIllustration(): boolean {\n    return !this.showIcon();\n  }\n\n  private showTitle(): boolean {\n    return (this.hasSlottedContent || !!this.text) && !!this.heading;\n  }\n\n  private translate(prop: string): string {\n    return translations?.[prop]?.[this.language || en] || prop;\n  }\n\n  private hideToast() {\n    return this.hide && !(this.isClosing || this.isExpanding);\n  }\n\n  render() {\n    return (\n      <Host>\n        <output\n          id={this.toastId}\n          class=\"pn-toast\"\n          role={this.getRole()}\n          data-appearance={this.appearance}\n          data-temporary={this.temporary}\n          data-hide={this.hideToast()}\n          ref={el => (this.toast = el)}\n        >\n          {this.showIcon() && <pn-icon class=\"pn-toast-icon\" icon={this.getIcon()} />}\n\n          <div class=\"pn-toast-content\">\n            {this.showTitle() && <h4 class=\"pn-toast-heading\">{this.heading}</h4>}\n            {this.text && <p class=\"pn-toast-text\">{this.text}</p>}\n            <slot />\n          </div>\n\n          {this.showIllustration() && <pn-illustration illustration={this.illustration} width=\"5.5em\" height=\"5.5em\" />}\n\n          {this.closable && (\n            <button\n              class=\"pn-toast-button\"\n              type=\"button\"\n              aria-label={this.translate('HIDE')}\n              onClick={(event: PointerEvent) => this.handleClick(event)}\n              ref={el => (this.button = el)}\n            >\n              <pn-icon icon={close} />\n            </button>\n          )}\n        </output>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/umd/modules/@postnord/web-components/postnord-web-components/p-6a30576b.entry.js

@@ -1,6 +0,0 @@
-/*!
- * Built with Stencil
- * By PostNord.
- */
-import{r as t,c as e,g as n,h as i,a as r}from"./p-43660913.js";import{u as a,j as s,k as d,r as o,e as c}from"./p-f64d17a6.js";import{a as u}from"./p-2e6481e5.js";import{a as h}from"./p-d82ef4a1.js";const p='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9 3.5a1 1 0 0 1 1 1V5h4v-.5a1 1 0 1 1 2 0V5h2a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h2v-.5a1 1 0 0 1 1-1M8 7H6a1 1 0 0 0-1 1v1.5h14V8a1 1 0 0 0-1-1h-2v.5a1 1 0 1 1-2 0V7h-4v.5a1 1 0 0 1-2 0zm11 4.5H5V17a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z" clip-rule="evenodd"/></svg>';const l=p;const f='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M11.707 21.707a1 1 0 0 0 0-1.414L8.414 17H11.5a7.5 7.5 0 0 0 0-15H11a1 1 0 1 0 0 2h.5a5.5 5.5 0 1 1 0 11H8.414l3.293-3.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414 0M7 3a1 1 0 0 0 1 1h.01a1 1 0 0 0 0-2H8a1 1 0 0 0-1 1" clip-rule="evenodd"/></svg>';const m=f;const k={CALENDAR_NAVIGATION:{en:"Calendar",sv:"Kalender",da:"Kalender",fi:"Kalenteri",no:"Kalender"},NEXT_YEAR:{en:"Scroll forward",sv:"Bläddra framåt",da:"Rul frem",fi:"Vieritä eteenpäin",no:"Rull fremover"},PREVIOUS_YEAR:{en:"Scroll backwards",sv:"Bläddra bakåt",da:"Rul baglæns",fi:"Vieritä taaksepäin",no:"Bla bakover"},NEXT_DATE:{en:"Next month",sv:"Nästa månad",da:"Næste måned",fi:"Ensi kuussa",no:"Neste måned"},PREVIOUS_DATE:{en:"Previous month",sv:"Föregående månad",da:"Forrige måned",fi:"Edellinen kuukausi",no:"Forrige måned"},SELECT_YEAR:{en:"Choose year",sv:"Välj år",da:"Vælg år",fi:"Valitse vuosi",no:"Velg år"},SELECT_MONTH:{en:"Choose month",sv:"Välj månad",da:"Vælg måned",fi:"Valitse kuukausi",no:"Velg måned"},SELECT_DATE:{en:"Choose date",sv:"Välj datum",da:"Vælg dato",fi:"Valitse päivämäärä",no:"Velg dato"},SELECTED_DATE:{en:"selected date is {date}.",sv:"valt datum är {date}.",da:"den valgte dato er {date}.",fi:"valittu päivämäärä on {date}.",no:"valgt dato er {date}."},SELECTED_START_DATE:{en:"selected start date is {date}.",sv:"valt startdatum är {date}.",da:"den valgte startdato er {date}.",fi:"valittu aloituspäivä on {date}.",no:"valgt startdato er {date}."},SELECTED_END_DATE:{en:"selected end date is {date}.",sv:"valt slutdatum är {date}.",da:"den valgte slutdato er {date}.",fi:"valittu lopetuspäivä on {date}.",no:"valgt sluttdato er {date}."},WEEK_NAME:{en:"Week",sv:"Vecka",da:"Uge",fi:"Viikko",no:"Uke"},GO_CALENDAR:{en:"Calendar view",sv:"Kalendervyn",da:"Kalendervisning",fi:"Kalenterinäkymä",no:"Kalendervisning"}};var b=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var _={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(b,(function(){var t=1e3,e=6e4,n=36e5,i="millisecond",r="second",a="minute",s="hour",d="day",o="week",c="month",u="quarter",h="year",p="date",l="Invalid Date",f=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,m=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,k={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return"["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},b=function(t,e,n){var i=String(t);return!i||i.length>=e?t:""+Array(e+1-i.length).join(n)+t},_={s:b,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),i=Math.floor(n/60),r=n%60;return(e<=0?"+":"-")+b(i,2,"0")+":"+b(r,2,"0")},m:function t(e,n){if(e.date()<n.date())return-t(n,e);var i=12*(n.year()-e.year())+(n.month()-e.month()),r=e.clone().add(i,c),a=n-r<0,s=e.clone().add(i+(a?-1:1),c);return+(-(i+(n-r)/(a?r-s:s-r))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return{M:c,y:h,w:o,d,D:p,h:s,m:a,s:r,ms:i,Q:u}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",y={};y[g]=k;var v="$isDayjsObject",w=function(t){return t instanceof x||!(!t||!t[v])},M=function t(e,n,i){var r;if(!e)return g;if("string"==typeof e){var a=e.toLowerCase();y[a]&&(r=a),n&&(y[a]=n,r=a);var s=e.split("-");if(!r&&s.length>1)return t(s[0])}else{var d=e.name;y[d]=e,r=d}return!i&&r&&(g=r),r||!i&&g},Y=function(t,e){if(w(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new x(n)},D=_;D.l=M,D.i=w,D.w=function(t,e){return Y(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var x=function(){function k(t){this.$L=M(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[v]=!0}var b=k.prototype;return b.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(D.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var i=e.match(f);if(i){var r=i[2]-1||0,a=(i[7]||"0").substring(0,3);return n?new Date(Date.UTC(i[1],r,i[3]||1,i[4]||0,i[5]||0,i[6]||0,a)):new Date(i[1],r,i[3]||1,i[4]||0,i[5]||0,i[6]||0,a)}}return new Date(e)}(t),this.init()},b.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},b.$utils=function(){return D},b.isValid=function(){return!(this.$d.toString()===l)},b.isSame=function(t,e){var n=Y(t);return this.startOf(e)<=n&&n<=this.endOf(e)},b.isAfter=function(t,e){return Y(t)<this.startOf(e)},b.isBefore=function(t,e){return this.endOf(e)<Y(t)},b.$g=function(t,e,n){return D.u(t)?this[e]:this.set(n,t)},b.unix=function(){return Math.floor(this.valueOf()/1e3)},b.valueOf=function(){return this.$d.getTime()},b.startOf=function(t,e){var n=this,i=!!D.u(e)||e,u=D.p(t),l=function(t,e){var r=D.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return i?r:r.endOf(d)},f=function(t,e){return D.w(n.toDate()[t].apply(n.toDate("s"),(i?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},m=this.$W,k=this.$M,b=this.$D,_="set"+(this.$u?"UTC":"");switch(u){case h:return i?l(1,0):l(31,11);case c:return i?l(1,k):l(0,k+1);case o:var g=this.$locale().weekStart||0,y=(m<g?m+7:m)-g;return l(i?b-y:b+(6-y),k);case d:case p:return f(_+"Hours",0);case s:return f(_+"Minutes",1);case a:return f(_+"Seconds",2);case r:return f(_+"Milliseconds",3);default:return this.clone()}},b.endOf=function(t){return this.startOf(t,!1)},b.$set=function(t,e){var n,o=D.p(t),u="set"+(this.$u?"UTC":""),l=(n={},n[d]=u+"Date",n[p]=u+"Date",n[c]=u+"Month",n[h]=u+"FullYear",n[s]=u+"Hours",n[a]=u+"Minutes",n[r]=u+"Seconds",n[i]=u+"Milliseconds",n)[o],f=o===d?this.$D+(e-this.$W):e;if(o===c||o===h){var m=this.clone().set(p,1);m.$d[l](f),m.init(),this.$d=m.set(p,Math.min(this.$D,m.daysInMonth())).$d}else l&&this.$d[l](f);return this.init(),this},b.set=function(t,e){return this.clone().$set(t,e)},b.get=function(t){return this[D.p(t)]()},b.add=function(i,u){var p,l=this;i=Number(i);var f=D.p(u),m=function(t){var e=Y(l);return D.w(e.date(e.date()+Math.round(t*i)),l)};if(f===c)return this.set(c,this.$M+i);if(f===h)return this.set(h,this.$y+i);if(f===d)return m(1);if(f===o)return m(7);var k=(p={},p[a]=e,p[s]=n,p[r]=t,p)[f]||1,b=this.$d.getTime()+i*k;return D.w(b,this)},b.subtract=function(t,e){return this.add(-1*t,e)},b.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var i=t||"YYYY-MM-DDTHH:mm:ssZ",r=D.z(this),a=this.$H,s=this.$m,d=this.$M,o=n.weekdays,c=n.months,u=n.meridiem,h=function(t,n,r,a){return t&&(t[n]||t(e,i))||r[n].slice(0,a)},p=function(t){return D.s(a%12||12,t,"0")},f=u||function(t,e,n){var i=t<12?"AM":"PM";return n?i.toLowerCase():i};return i.replace(m,(function(t,i){return i||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return D.s(e.$y,4,"0");case"M":return d+1;case"MM":return D.s(d+1,2,"0");case"MMM":return h(n.monthsShort,d,c,3);case"MMMM":return h(c,d);case"D":return e.$D;case"DD":return D.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(a);case"HH":return D.s(a,2,"0");case"h":return p(1);case"hh":return p(2);case"a":return f(a,s,!0);case"A":return f(a,s,!1);case"m":return String(s);case"mm":return D.s(s,2,"0");case"s":return String(e.$s);case"ss":return D.s(e.$s,2,"0");case"SSS":return D.s(e.$ms,3,"0");case"Z":return r}return null}(t)||r.replace(":","")}))},b.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},b.diff=function(i,p,l){var f,m=this,k=D.p(p),b=Y(i),_=(b.utcOffset()-this.utcOffset())*e,g=this-b,y=function(){return D.m(m,b)};switch(k){case h:f=y()/12;break;case c:f=y();break;case u:f=y()/3;break;case o:f=(g-_)/6048e5;break;case d:f=(g-_)/864e5;break;case s:f=g/n;break;case a:f=g/e;break;case r:f=g/t;break;default:f=g}return l?f:D.a(f)},b.daysInMonth=function(){return this.endOf(c).$D},b.$locale=function(){return y[this.$L]},b.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),i=M(t,e,!0);return i&&(n.$L=i),n},b.clone=function(){return D.w(this.$d,this)},b.toDate=function(){return new Date(this.valueOf())},b.toJSON=function(){return this.isValid()?this.toISOString():null},b.toISOString=function(){return this.$d.toISOString()},b.toString=function(){return this.$d.toUTCString()},k}(),L=x.prototype;return Y.prototype=L,[["$ms",i],["$s",r],["$m",a],["$H",s],["$W",d],["$M",c],["$y",h],["$D",p]].forEach((function(t){L[t[1]]=function(e){return this.$g(e,t[0],t[1])}})),Y.extend=function(t,e){return t.$i||(t(e,x,Y),t.$i=!0),Y},Y.locale=M,Y.isDayjs=w,Y.unix=function(t){return Y(1e3*t)},Y.en=y[g],Y.Ls=y,Y.p={},Y}))})(_);const g=_.exports;var y={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(b,(function(){var t="week",e="year";return function(n,i,r){var a=i.prototype;a.week=function(n){if(void 0===n&&(n=null),null!==n)return this.add(7*(n-this.week()),"day");var i=this.$locale().yearStart||1;if(11===this.month()&&this.date()>25){var a=r(this).startOf(e).add(1,e).date(i),s=r(this).endOf(t);if(a.isBefore(s))return 1}var d=r(this).startOf(e).date(i).startOf(t).subtract(1,"millisecond"),o=this.diff(d,t,!0);return o<0?r(this).startOf("week").week():Math.ceil(o)},a.weeks=function(t){return void 0===t&&(t=null),this.week(t)}}}))})(y);const v=y.exports;var w={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(b,(function(){var t={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"},e=/(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g,n=/\d/,i=/\d\d/,r=/\d\d?/,a=/\d*[^-_:/,()\s\d]+/,s={},d=function(t){return(t=+t)+(t>68?1900:2e3)};var o=function(t){return function(e){this[t]=+e}},c=[/[+-]\d\d:?(\d\d)?|Z/,function(t){(this.zone||(this.zone={})).offset=function(t){if(!t)return 0;if("Z"===t)return 0;var e=t.match(/([+-]|\d\d)/g),n=60*e[1]+(+e[2]||0);return 0===n?0:"+"===e[0]?-n:n}(t)}],u=function(t){var e=s[t];return e&&(e.indexOf?e:e.s.concat(e.f))},h=function(t,e){var n,i=s.meridiem;if(i){for(var r=1;r<=24;r+=1)if(t.indexOf(i(r,0,e))>-1){n=r>12;break}}else n=t===(e?"pm":"PM");return n},p={A:[a,function(t){this.afternoon=h(t,!1)}],a:[a,function(t){this.afternoon=h(t,!0)}],Q:[n,function(t){this.month=3*(t-1)+1}],S:[n,function(t){this.milliseconds=100*+t}],SS:[i,function(t){this.milliseconds=10*+t}],SSS:[/\d{3}/,function(t){this.milliseconds=+t}],s:[r,o("seconds")],ss:[r,o("seconds")],m:[r,o("minutes")],mm:[r,o("minutes")],H:[r,o("hours")],h:[r,o("hours")],HH:[r,o("hours")],hh:[r,o("hours")],D:[r,o("day")],DD:[i,o("day")],Do:[a,function(t){var e=s.ordinal,n=t.match(/\d+/);if(this.day=n[0],e)for(var i=1;i<=31;i+=1)e(i).replace(/\[|\]/g,"")===t&&(this.day=i)}],w:[r,o("week")],ww:[i,o("week")],M:[r,o("month")],MM:[i,o("month")],MMM:[a,function(t){var e=u("months"),n=(u("monthsShort")||e.map((function(t){return t.slice(0,3)}))).indexOf(t)+1;if(n<1)throw new Error;this.month=n%12||n}],MMMM:[a,function(t){var e=u("months").indexOf(t)+1;if(e<1)throw new Error;this.month=e%12||e}],Y:[/[+-]?\d+/,o("year")],YY:[i,function(t){this.year=d(t)}],YYYY:[/\d{4}/,o("year")],Z:c,ZZ:c};function l(n){var i,r;i=n,r=s&&s.formats;for(var a=(n=i.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(e,n,i){var a=i&&i.toUpperCase();return n||r[i]||t[i]||r[a].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(t,e,n){return e||n.slice(1)}))}))).match(e),d=a.length,o=0;o<d;o+=1){var c=a[o],u=p[c],h=u&&u[0],l=u&&u[1];a[o]=l?{regex:h,parser:l}:c.replace(/^\[|\]$/g,"")}return function(t){for(var e={},n=0,i=0;n<d;n+=1){var r=a[n];if("string"==typeof r)i+=r.length;else{var s=r.regex,o=r.parser,c=t.slice(i),u=s.exec(c)[0];o.call(e,u),t=t.replace(u,"")}}return function(t){var e=t.afternoon;if(void 0!==e){var n=t.hours;e?n<12&&(t.hours+=12):12===n&&(t.hours=0),delete t.afternoon}}(e),e}}return function(t,e,n){n.p.customParseFormat=!0,t&&t.parseTwoDigitYear&&(d=t.parseTwoDigitYear);var i=e.prototype,r=i.parse;i.parse=function(t){var e=t.date,i=t.utc,a=t.args;this.$u=i;var d=a[1];if("string"==typeof d){var o=!0===a[2],c=!0===a[3],u=o||c,h=a[2];c&&(h=a[2]),s=this.$locale(),!o&&h&&(s=n.Ls[h]),this.$d=function(t,e,n,i){try{if(["x","X"].indexOf(e)>-1)return new Date(("X"===e?1e3:1)*t);var r=l(e)(t),a=r.year,s=r.month,d=r.day,o=r.hours,c=r.minutes,u=r.seconds,h=r.milliseconds,p=r.zone,f=r.week,m=new Date,k=d||(a||s?1:m.getDate()),b=a||m.getFullYear(),_=0;a&&!s||(_=s>0?s-1:m.getMonth());var g,y=o||0,v=c||0,w=u||0,M=h||0;return p?new Date(Date.UTC(b,_,k,y,v,w,M+60*p.offset*1e3)):n?new Date(Date.UTC(b,_,k,y,v,w,M)):(g=new Date(b,_,k,y,v,w,M),f&&(g=i(g).week(f).toDate()),g)}catch(t){return new Date("")}}(e,d,i,n),this.init(),h&&!0!==h&&(this.$L=this.locale(h).$L),u&&e!=this.format(d)&&(this.$d=new Date("")),s={}}else if(d instanceof Array)for(var p=d.length,f=1;f<=p;f+=1){a[1]=d[f-1];var m=n.apply(this,a);if(m.isValid()){this.$d=m.$d,this.$L=m.$L,this.init();break}f===p&&(this.$d=new Date(""))}else r.call(this,t)}}}))})(w);const M=w.exports;var Y={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(b,(function(){return function(t,e){e.prototype.isSameOrBefore=function(t,e){return this.isSame(t,e)||this.isBefore(t,e)}}}))})(Y);const D=Y.exports;var x={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(b,(function(){return function(t,e){e.prototype.isSameOrAfter=function(t,e){return this.isSame(t,e)||this.isAfter(t,e)}}}))})(x);const L=x.exports;var S={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(b,(function(){return function(t,e){e.prototype.toObject=function(){return{years:this.$y,months:this.$M,date:this.$D,hours:this.$H,minutes:this.$m,seconds:this.$s,milliseconds:this.$ms}}}}))})(S);const E=S.exports;var H={exports:{}};(function(t,e){!function(e,n){t.exports=n(_.exports)}(b,(function(t){function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=e(t),i={name:"sv",weekdays:"söndag_måndag_tisdag_onsdag_torsdag_fredag_lördag".split("_"),weekdaysShort:"sön_mån_tis_ons_tor_fre_lör".split("_"),weekdaysMin:"sö_må_ti_on_to_fr_lö".split("_"),months:"januari_februari_mars_april_maj_juni_juli_augusti_september_oktober_november_december".split("_"),monthsShort:"jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec".split("_"),weekStart:1,yearStart:4,ordinal:function(t){var e=t%10;return"["+t+(1===e||2===e?"a":"e")+"]"},formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"YYYY-MM-DD",LL:"D MMMM YYYY",LLL:"D MMMM YYYY [kl.] HH:mm",LLLL:"dddd D MMMM YYYY [kl.] HH:mm",lll:"D MMM YYYY HH:mm",llll:"ddd D MMM YYYY HH:mm"},relativeTime:{future:"om %s",past:"för %s sedan",s:"några sekunder",m:"en minut",mm:"%d minuter",h:"en timme",hh:"%d timmar",d:"en dag",dd:"%d dagar",M:"en månad",MM:"%d månader",y:"ett år",yy:"%d år"}};return n.default.locale(i,null,!0),i}))})(H);var T={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(b,(function(){return{name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return"["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}}}))})(T);var A={exports:{}};(function(t,e){!function(e,n){t.exports=n(_.exports)}(b,(function(t){function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=e(t),i={name:"da",weekdays:"søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),weekdaysShort:"søn._man._tirs._ons._tors._fre._lør.".split("_"),weekdaysMin:"sø._ma._ti._on._to._fr._lø.".split("_"),months:"januar_februar_marts_april_maj_juni_juli_august_september_oktober_november_december".split("_"),monthsShort:"jan._feb._mar._apr._maj_juni_juli_aug._sept._okt._nov._dec.".split("_"),weekStart:1,yearStart:4,ordinal:function(t){return t+"."},formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD.MM.YYYY",LL:"D. MMMM YYYY",LLL:"D. MMMM YYYY HH:mm",LLLL:"dddd [d.] D. MMMM YYYY [kl.] HH:mm"},relativeTime:{future:"om %s",past:"%s siden",s:"få sekunder",m:"et minut",mm:"%d minutter",h:"en time",hh:"%d timer",d:"en dag",dd:"%d dage",M:"en måned",MM:"%d måneder",y:"et år",yy:"%d år"}};return n.default.locale(i,null,!0),i}))})(A);var $={exports:{}};(function(t,e){!function(e,n){t.exports=n(_.exports)}(b,(function(t){function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=e(t);function i(t,e,n,i){var r={s:"muutama sekunti",m:"minuutti",mm:"%d minuuttia",h:"tunti",hh:"%d tuntia",d:"päivä",dd:"%d päivää",M:"kuukausi",MM:"%d kuukautta",y:"vuosi",yy:"%d vuotta",numbers:"nolla_yksi_kaksi_kolme_neljä_viisi_kuusi_seitsemän_kahdeksan_yhdeksän".split("_")},a={s:"muutaman sekunnin",m:"minuutin",mm:"%d minuutin",h:"tunnin",hh:"%d tunnin",d:"päivän",dd:"%d päivän",M:"kuukauden",MM:"%d kuukauden",y:"vuoden",yy:"%d vuoden",numbers:"nollan_yhden_kahden_kolmen_neljän_viiden_kuuden_seitsemän_kahdeksan_yhdeksän".split("_")},s=i&&!e?a:r,d=s[n];return t<10?d.replace("%d",s.numbers[t]):d.replace("%d",t)}var r={name:"fi",weekdays:"sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai".split("_"),weekdaysShort:"su_ma_ti_ke_to_pe_la".split("_"),weekdaysMin:"su_ma_ti_ke_to_pe_la".split("_"),months:"tammikuu_helmikuu_maaliskuu_huhtikuu_toukokuu_kesäkuu_heinäkuu_elokuu_syyskuu_lokakuu_marraskuu_joulukuu".split("_"),monthsShort:"tammi_helmi_maalis_huhti_touko_kesä_heinä_elo_syys_loka_marras_joulu".split("_"),ordinal:function(t){return t+"."},weekStart:1,yearStart:4,relativeTime:{future:"%s päästä",past:"%s sitten",s:i,m:i,mm:i,h:i,hh:i,d:i,dd:i,M:i,MM:i,y:i,yy:i},formats:{LT:"HH.mm",LTS:"HH.mm.ss",L:"DD.MM.YYYY",LL:"D. MMMM[ta] YYYY",LLL:"D. MMMM[ta] YYYY, [klo] HH.mm",LLLL:"dddd, D. MMMM[ta] YYYY, [klo] HH.mm",l:"D.M.YYYY",ll:"D. MMM YYYY",lll:"D. MMM YYYY, [klo] HH.mm",llll:"ddd, D. MMM YYYY, [klo] HH.mm"}};return n.default.locale(r,null,!0),r}))})($);var V={exports:{}};(function(t,e){!function(e,n){t.exports=n(_.exports)}(b,(function(t){function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=e(t),i={name:"nb",weekdays:"søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),weekdaysShort:"sø._ma._ti._on._to._fr._lø.".split("_"),weekdaysMin:"sø_ma_ti_on_to_fr_lø".split("_"),months:"januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split("_"),monthsShort:"jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.".split("_"),ordinal:function(t){return t+"."},weekStart:1,yearStart:4,formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD.MM.YYYY",LL:"D. MMMM YYYY",LLL:"D. MMMM YYYY [kl.] HH:mm",LLLL:"dddd D. MMMM YYYY [kl.] HH:mm"},relativeTime:{future:"om %s",past:"%s siden",s:"noen sekunder",m:"ett minutt",mm:"%d minutter",h:"en time",hh:"%d timer",d:"en dag",dd:"%d dager",M:"en måned",MM:"%d måneder",y:"ett år",yy:"%d år"}};return n.default.locale(i,null,!0),i}))})(V);g.extend(v);g.extend(M);g.extend(D);g.extend(L);g.extend(E);const j="calendar";const C="months";const N="years";function z(){return g()}function R({year:t,month:e,date:n}){return g().set("year",t).set("month",e).set("date",n)}function F(t,e){if(!t)return false;const n=typeof t==="string"?t:R(t);return g(n,e,true).isValid()}function I(t,e){const n=typeof t==="string"?t:R(t);return g(n,e)}function O(t,e,n){const i=P(t);return i.locale(e==="no"?"nb":e).format(n)}function P({year:t,month:e,date:n,day:i}){const r=g().set("y",t).set("M",e).set("D",n);if(typeof i==="number")return r.set("d",i);return r}function G(t,e){const n=typeof t==="string"?I(t,e):t;const i=n.get("year");const r=n.get("month");const a=n.get("date");const s=n.get("day");return{year:i,month:r,date:a,day:s}}function K(t,e,n){const i=I(t,n);const r=I(e,n);return r.diff(i,"d")}function U(t,e,n,i){const r=I(t,n);const a=I(e,n);return r.isSameOrBefore(a,i)}function Z(t,e,n,i){const r=I(t,n);const a=I(e,n);return r.isSameOrAfter(a,i)}function B(t,e,n,i){if(!F(t,n)||!F(e,n))return false;let r=I(t,n);let a=I(e,n);if(i==="month"){r=r.set("year",2e3);a=a.set("year",2e3)}return r.isSame(a,i)}function W({data:t,amount:e=1,unit:n,minus:i,plus:r}){if(i)return t.subtract(e,n);if(r)return t.add(e,n);return t}function q({year:t,minus:e=false,plus:n=false}){const i=g().set("year",t);return W({data:i,unit:"y",plus:n,minus:e}).year()}function J({month:t,minus:e=false,plus:n=false}){const i=g().set("month",t);return W({data:i,unit:"M",plus:n,minus:e}).month()}function X(t,e,n,i){if(i==="date")return Q(t,e,n);return tt(t,e,i)}function Q(t,e,n){const i=R(e);const{space:r,enter:a,next:s,down:d,previous:o,upwards:c,pageDown:u,pageUp:h,end:p,home:l}=nt(t);if(r||a)return i;if(s||d)return i.add(s?1:7,"day");if(o||c)return i.subtract(o?1:7,"day");if(u)return i.add(1,"month");if(h)return i.subtract(1,"month");const f=i.get("day");const m=n?5:7;const k=f===0?-6:1;if(p&&f!==0)return i.set("day",m);if(l&&f!==1)return i.set("day",k);return i}function tt(t,e,n){const i=R(e);const r=t.match(/^(Enter|Space)$/);if(r)return i;const a=t==="ArrowRight";const s=t==="ArrowLeft";const d=t==="ArrowDown";const o=t==="ArrowUp";const c=a||s?1:3;const{years:u,months:h}=i.toObject();const p=n==="year"?u:h;const l=n==="year"?"month":"year";if(a||d)return i.set(n,p+c).set(l,e[l]);if(s||o)return i.set(n,p-c).set(l,e[l]);return i}function et(t,e){const n=[];const i=[];const r=g().set("year",t).set("month",e);const a=r.daysInMonth();for(let t=0;a>t;t++){const e=r.set("date",t);const i=e.week();n.push({week:i,day:e.day()+1,date:t+1})}const s=[...new Set(n.map((({week:t})=>t)))];s.forEach(((t,e)=>{const r=n.filter((e=>e.week===t));if(e===0&&r.length!==7){const e=7-r.length;for(let n=0;e>n;n++){r.unshift({week:t,blank:true})}}if(e+1===s.length&&r.length!==7){const e=7-r.length;for(let n=0;e>n;n++){r.push({week:t,blank:true})}}i.push({week:t,list:r})}));return i}function nt(t){const e=t==="Enter";const n=t==="Space";const i=t==="ArrowRight";const r=t==="ArrowLeft";const a=t==="ArrowDown";const s=t==="ArrowUp";const d=t==="PageDown";const o=t==="PageUp";const c=t==="End";const u=t==="Home";return{enter:e,space:n,next:i,previous:r,down:a,upwards:s,pageDown:d,pageUp:o,end:c,home:u}}const it='/* 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 rt=it;const at=class{constructor(n){t(this,n);this.dateselection=e(this,"dateselection",7);this.dateSelection=e(this,"dateSelection",7);this.dateInvalid=e(this,"dateInvalid",7);this.toggleCalendar=e(this,"toggleCalendar",7);this.currentView=e(this,"currentView",7);this.open=false;this.openUp=false;this.selectingTo=false;this.grid=undefined;this.viewYearStart=null;this.dateViewYear=undefined;this.dateViewMonth=undefined;this.dateViewDate=undefined;this.showHelperSlot=undefined;this.showErrorSlot=undefined;this.isClosing=false;this.isExpanding=false;this.labelFrom=undefined;this.labelTo=undefined;this.helpertext=undefined;this.start="";this.end="";this.format="YYYY-MM-DD";this.language=null;this.dateId=this.id;this.name=undefined;this.placeholder=this.format;this.endPlaceholder=this.format;this.autocomplete=undefined;this.list=undefined;this.listEnd=undefined;this.pattern=undefined;this.range=false;this.rangeLimit=undefined;this.view=j;this.calendarUp=false;this.weekNumbers=false;this.disableTypeAhead=false;this.disableWeekends=false;this.disabledDates=undefined;this.disableMaxLength=false;this.required=false;this.readonly=false;this.disabled=false;this.error=undefined;this.invalid=false;this.minDate=null;this.maxDate=null}id=`pn-date-picker-${a()}`;idFrom=`${this.id}-from`;idTo=`${this.id}-to`;idFromButton=`${this.id}-from-button`;idToButton=`${this.id}-to-button`;idHelper=`${this.id}-helper`;idError=`${this.id}-error`;idCalendar=`${this.id}-calendar`;calendarElement;today=z();animation;animationDurationDefault=400;animationDuration=this.animationDurationDefault;separators=[];separatorRegex=/[^a-zA-Z\d\s:]/g;listMonths=[0,1,2,3,4,5,6,7,8,9,10,11];listWeek=[1,2,3,4,5,6,0];get hostElement(){return n(this)}watchMin(){if(this.minDate===null)return;if(!F(this.minDate,this.format))this.minDate=null}watchMax(){if(this.maxDate===null)return;if(!F(this.maxDate,this.format))this.maxDate=null}watchValue(){if(!F(this.start,this.format))return this.dateInvalid.emit({start:this.start});const{year:t,month:e,date:n}=G(this.start,this.format);this.setViewYear({year:t});this.setViewMonth({month:e});this.setViewDate({date:n});if(this.range&&Z(this.start,this.end,this.format,"date")){this.end=""}this.emitSelection()}watchValueTo(){if(!this.range)return;if(!F(this.end,this.format))return this.dateInvalid.emit({end:this.end});const t=I(this.end,this.format);this.setViewYear({year:t.year()});this.setViewMonth({month:t.month()});this.setViewDate({date:t.date()});if(Z(this.start,this.end,this.format,"date")){const t=this.start;this.start=this.end;this.end=t}this.emitSelection()}handleFormat(){this.separators.length=0;this.format.split("").forEach(((t,e)=>this.separatorRegex.exec(t)&&this.separators.push({name:t,index:e})))}watchId(){this.idFrom=`${this.dateId}-from`;this.idTo=`${this.dateId}-to`;this.idFromButton=`${this.id}-from-button`;this.idToButton=`${this.id}-to-button`;this.idHelper=`${this.dateId}-helper`;this.idError=`${this.dateId}-error`;this.idCalendar=`${this.dateId}-calendar`}watchView(){const t=this.getCurrentDateObject();if(F(t,this.format))this.updateGrid()}watchOpen(){this.toggleCalendar.emit(this.open);this.gridHandler();if(this.open)this.addGlobalEventListeners();else return this.removeGlobalEventListeners();this.calendarElement.style.removeProperty("--pn-calendar-offset-left");this.openUp=this.calendarUp;requestAnimationFrame((()=>{const t=this.getRect(this.hostElement);const{scrollHeight:e}=this.calendarElement;const{innerHeight:n,innerWidth:i}=window;const r=s();const a=t.y-r;const d=n-t.bottom;const o=a>e;const c=d>e;const u=this.openUp&&(o||a>d)||!c&&o;this.openUp=u;const h=this.getRect(this.calendarElement);const p=i-h.right;const l=0>p?p-8:0;this.calendarElement.style.setProperty("--pn-calendar-offset-left",`${Math.floor(l)}px`)}))}handleMessage(){this.checkSlottedHelper();this.checkSlottedError()}handleView(){this.currentView.emit(this.view)}dateselection;dateSelection;emitSelection(){const t={start:this.start};if(this.range){const e=K(this.start,this.end,this.format);t.end=this.end;t.days=typeof e==="number"?e+1:null}this.dateSelection.emit(t);this.dateselection.emit(t)}dateInvalid;toggleCalendar;currentView;handleResize(){if(!this.open)return;this.toggleGrid(false)}async componentWillLoad(){this.watchMin();this.watchMax();this.watchId();this.handleFormat();this.handleMessage();const t=F(this.start||this.end,this.format);const e=t&&G(this.start||this.end,this.format);const{year:n,month:i,date:r}=G(this.today);this.setViewDate({date:e.date||r});this.setViewMonth({month:e.month||i});this.setViewYear({year:e.year||n});if(this.language===null)await d(this.hostElement)}gridHandler(){if(this.open)this.openGrid();else this.closeGrid()}openGrid(){requestAnimationFrame((()=>{const{clientHeight:t,scrollHeight:e}=this.calendarElement;const n=this.isClosing?t:0;this.calendarElement.style.height=`${e}px`;this.isExpanding=true;this.animateGrid(true,`${n}px`,`${this.calendarElement.scrollHeight}px`)}))}closeGrid(){const{scrollHeight:t,clientHeight:e}=this.calendarElement;const n=this.isExpanding?e:t;this.calendarElement.style.height=`0px`;this.isClosing=true;this.animateGrid(false,`${n}px`,`0px`)}animateGrid(t,e,n){this.cancelAnimations();if(o())this.animationDuration=0;else this.animationDuration=this.animationDurationDefault;this.animation=this.calendarElement.animate({height:[e,n]},{duration:this.animationDuration,easing:"cubic-bezier(0.6, 0, 0.2, 1)"});this.animation.onfinish=()=>this.animationFinish();this.animation.oncancel=()=>t?this.isExpanding=false:this.isClosing=false}animationFinish(){this.cancelAnimations();this.calendarElement.style.height=this.isClosing?"0px":"";this.isClosing=false;this.isExpanding=false}cancelAnimations(){if(this.animation)this.animation.cancel()}globalEvents=t=>{const e=t.target;const n=e?.closest(this.hostElement.localName);if(!n)this.toggleGrid(false)};addGlobalEventListeners(){const t=this.hostElement.getRootNode();t.addEventListener("click",this.globalEvents)}removeGlobalEventListeners(){const t=this.hostElement.getRootNode();t.removeEventListener("click",this.globalEvents)}translate(t){return k?.[t?.toUpperCase()]?.[this.language||c]||t?.toUpperCase()}translateDateText(t,e){return O({...this.getCurrentDateObject(),...t},this.language,e)}getRect(t){return t.getBoundingClientRect()}toggleGrid(t,e){this.open=t??!this.open;this.selectingTo=e}hasHelperText(){return this.helpertext?.length>0||this.showHelperSlot}hasErrorMessage(){return this.error?.length>0||this.showErrorSlot}hasError(){return this.hasErrorMessage()||this.invalid||this.showErrorSlot}checkSlottedHelper(){const t=this.hostElement.querySelector("[slot=helpertext]")?.textContent;this.showHelperSlot=!!t?.length}checkSlottedError(){const t=this.hostElement.querySelector("[slot=error]")?.textContent;this.showErrorSlot=!!t?.length}viewingCalendar(){return this.view===j}viewingMonth(){return this.view===C}viewingYears(){return this.view===N}viewType(){return this.viewingCalendar()?"date":this.viewingMonth()?"month":"year"}isBeforeMax(t){if(this.maxDate)return U(t,this.maxDate,this.format,this.viewType());return true}isAfterMin(t){if(this.minDate)return Z(t,this.minDate,this.format,this.viewType());return true}isDisabledWeekend(t){if(!this.viewingCalendar())return false;return this.disableWeekends?t>=6:false}isDisabledDate(t){if(!this.disabledDates?.length||!this.viewingCalendar())return false;const e=this.disabledDates.split(",");return!!e.find((e=>B(e,t,this.format,this.viewType())))}isDisabled(t){const e=!this.isBeforeMax(t);const n=!this.isAfterMin(t);const i=this.viewingCalendar()&&this.isDisabledWeekend(t.day);const r=this.isDisabledDate(t);const a=e||n||i||r;return{disabled:a,manualDisable:r,weekendDisable:i,minMaxDisable:e||n}}updateGrid(){this.grid=et(this.dateViewYear,this.dateViewMonth)}getCurrentViewDate(t=this.getCurrentDateObject()){return O(t,this.language,"MMMM YYYY")}isSelected(t,e=false){const n=e?this.end:this.start;return B(n,this.getCurrentDateObject(t),this.format,this.viewType())}isToday(t){return B(this.today.format(this.format),this.getCurrentDateObject(t),this.format,this.viewType())}getCurrentDateObject({year:t=this.dateViewYear,month:e=this.dateViewMonth,date:n=this.dateViewDate,day:i}={}){return{year:t,month:e,date:n,day:i}}calendarKeyboardNavigation(t,e,n=false){const i=["Enter","Space","ArrowRight","ArrowLeft","ArrowUp","ArrowDown","Home","End","PageDown","PageUp","Escape"];if(!i.includes(t.code))return;t.preventDefault();if(t.code==="Escape")return this.toggleGrid(false);const r=!n&&t.code.match(/^(Enter|Space)$/);if(r&&this.viewingYears())return this.setViewYear({year:e.year,reset:true});if(r&&this.viewingMonth())return this.setViewMonth({month:e.month,grid:true,reset:true});if(r&&this.viewingCalendar())return this.setValue(e.date);const a=this.navDirection(t,e);if(!a)return;const{year:s,month:d,date:o}=a;this.setViewYear({year:s});this.setViewMonth({month:d,grid:true});this.setViewDate({date:o});this.resetFocus()}navDirection(t,e){const{code:n}=t;const i=X(n,e,this.disableWeekends,this.viewType());const r=G(i);return r}getYearGrid(){const t=[];let e=this.viewYearStart-7;for(let n=0;15>n;n++){t.push(e++)}return t}setView(t){this.view=t;requestAnimationFrame((()=>this.focusCalendar()))}setNavView(t){if(this.viewingYears())return this.setViewYear({...t,grid:true});return this.setViewMonth(t)}setViewYear({year:t=this.dateViewYear,minus:e=false,plus:n=false,reset:i=false,grid:r=false}){const a=q({year:t,minus:e,plus:n});const s=this.viewYearStart;const d=s+7;const o=s-7;if(r){const t=this.viewYearStart-15;const n=this.viewYearStart+15;this.viewYearStart=e?t:n;this.dateViewYear=this.viewYearStart}else this.dateViewYear=a;if(s===null||a>d||o>a)this.viewYearStart=a;if(i)this.setView(j)}setViewMonth({month:t=this.dateViewMonth,minus:e=false,plus:n=false,reset:i=false,grid:r=false}){const a=J({month:t,minus:e,plus:n});this.dateViewMonth=a;if(!r&&t===0&&e)this.setViewYear({minus:true});if(!r&&t===11&&n)this.setViewYear({plus:true});if(i)this.setView(j)}setViewDate({date:t}){this.dateViewDate=t}handleSeparator(t){let e=t.target.value;const n=this.separators.find((({index:t})=>t===e.length));if(n?.name){e+=n.name}return e}inputHandler(t,e=false){const n=e?"end":"start";const i=this.disableTypeAhead?t.target.value:this.handleSeparator(t);this[n]=i}setValue(t){const e=O(this.getCurrentDateObject({date:t}),this.language,this.format);if(this.selectingTo)this.end=e;else this.start=e;this.setViewDate({date:t});if(!this.range||this.selectingTo){this.toggleGrid(false);this.focusToggleCalendarButton()}if(this.range&&!this.selectingTo)this.selectingTo=true}getDayAttributes(t,e){const n=this.getCurrentDateObject(t);const{disabled:i}=this.isDisabled(n);if(e)return{"data-blank":true};function r(t){return t.charAt(0).toUpperCase()+t.slice(1)}const a=this.viewType();const s=n[a];const d=a!=="date"?"disabled":"aria-disabled";const o=a!=="date"?"aria-pressed":"aria-selected";const c=this.isSelected(n);const u=this.isSelected(n,true);const h=c||u;const p=this.range&&Z(n,this.start,this.format,this.viewType());const l=this.range&&U(n,this.end,this.format,this.viewType());const f=p&&l;const m=i&&(a==="date"||!h);const k=this[`dateView${r(a)}`]===s;const b={onKeyDown:t=>this.calendarKeyboardNavigation(t,n,m),tabindex:k?"0":"-1",[o]:(h||f)?.toString(),"aria-current":this.isToday(n)?"date":null,"data-active":m?null:h,"data-today":this.isToday(n),"data-option":"true",[`data-${a}`]:s,[d]:m?"true":null};const _=B(this.start,this.end,this.format,"date");if(this.range&&!_){b["data-range"]=f;b["data-range-from"]=c&&this.end!=="";b["data-range-to"]=u&&this.start!==""}else{b["data-single"]=true}if(this.viewingCalendar())b.onClick=()=>this.setValue(n.date);if(this.viewingMonth())b.onClick=()=>this.setViewMonth({month:n.month,reset:true});if(this.viewingYears())b.onClick=()=>this.setViewYear({year:n.year,reset:true});if(m)delete b.onClick;return b}focusToggleCalendarButton(){requestAnimationFrame((()=>{const t=this.range?this.idToButton:this.idFromButton;this.hostElement.querySelector(`#${t}`).focus({preventScroll:true})}))}focusCalendar(){requestAnimationFrame((()=>{const t=this.calendarTabElement({first:true,grid:true});t?.focus({preventScroll:true})}))}resetFocus(){if(this.open)return this.focusCalendar();else this.focusToggleCalendarButton()}handleButtonBlur(t){if(t.code==="Escape"){t.preventDefault();t.stopImmediatePropagation()}if(this.open&&t.key==="Tab")return this.focusCalendar()}calendarTabElement({first:t,grid:e}){const n=':is(input, select, button:not([tabindex="-1"]), td[tabindex="0"])';const i=this.calendarElement.querySelectorAll(n);const r=Array.from(i).filter((({localName:t,offsetParent:e})=>n.includes(t)&&e!==null));const a=r.find((({dataset:t,tabIndex:e})=>t.option&&e===0));if(e&&a)return a;if(t)return r.shift();else return r.pop()}handleCalendarTabEsc(t){const e=t.target;const n=this.calendarTabElement({first:t.shiftKey});t.stopImmediatePropagation();if(t.code==="Escape"){t.preventDefault();this.toggleGrid(false);this.focusToggleCalendarButton();return}if(t.code==="Tab"&&e.isEqualNode(n)){t.preventDefault();this.calendarTabElement({first:!t.shiftKey}).focus({preventScroll:true})}}ariaDescribedby(){const t=[];if(this.hasErrorMessage())t.push(this.idError);else if(this.hasHelperText())t.push(this.idHelper);return t.length?t.join(" "):null}renderDateGrid(){return i("table",{role:"grid",class:"pn-date-picker-table","aria-multiselectable":this.range?"true":null},i("caption",{class:"pn-date-picker-sr-only",key:this.getCurrentViewDate()},this.getCurrentViewDate()),i("thead",{class:"pn-date-picker-thead"},i("tr",{class:"pn-date-picker-tr"},this.weekNumbers&&i("th",{class:"pn-date-picker-th",scope:"col","aria-hidden":"true"}),this.listWeek.map((t=>i("th",{class:"pn-date-picker-th",scope:"col",abbr:this.translateDateText({day:t},"dddd")},this.translateDateText({day:t},"ddd")))))),i("tbody",{class:"pn-date-picker-tbody"},this.grid?.map((({week:t,list:e})=>i("tr",{key:`${this.dateViewYear}-${t}`,class:"pn-date-picker-tr"},this.weekNumbers&&i("td",{class:"pn-date-picker-td","data-blank":true,"data-week":true,title:`${this.translate("WEEK_NAME")} ${t}`,"aria-hidden":"true"},i("span",{class:"pn-date-picker-td-week"},t)),e.map((({day:t,date:e,blank:n})=>i("td",{key:`${this.dateViewYear}-${this.dateViewMonth}-${e}`,class:"pn-date-picker-td",...this.getDayAttributes({date:e,day:t},n)},i("span",{class:"pn-date-picker-td-text"},e)))))))))}renderMonthGrid(){return i("ul",{class:"pn-date-picker-list"},this.listMonths.map((t=>i("li",{key:t,class:"pn-date-picker-item","data-item":"month"},i("button",{type:"button",class:"pn-date-picker-button",...this.getDayAttributes({month:t},false)},i("span",{class:"pn-date-picker-month","data-full":true},this.translateDateText({month:t},"MMMM")),i("span",{class:"pn-date-picker-month","data-abbr":true},this.translateDateText({month:t},"MMM")))))))}renderYearGrid(){return i("ul",{class:"pn-date-picker-list"},this.getYearGrid()?.map((t=>i("li",{key:t,class:"pn-date-picker-item","data-item":"year"},i("button",{type:"button",class:"pn-date-picker-button",...this.getDayAttributes({year:t},false)},i("span",null,t))))))}renderInput({to:t=false}={}){const e=t?this.idTo:this.idFrom;const n=t?this.idToButton:this.idFromButton;const r=t?this.labelTo:this.labelFrom;const a=t?this.end:this.start;const s=t?this.endPlaceholder:this.placeholder;const d=t?this.listEnd:this.list;const o=this.open?this.selectingTo?t:!t:false;const c=this.translate("SELECT_DATE");const u=this.range?t?"END_":"START_":"";const h=this.translate(`SELECTED_${u}DATE`);let p=c;if(a){p+=`, ${h.replace("{date}",a)}`}const f=!(this.disabled||this.readonly);return i("div",{class:"pn-date-picker-container","data-error":this.hasError()},i("label",{class:"pn-date-picker-label",htmlFor:e},i("span",null,r)),i("div",{class:"pn-date-picker-field"},i("input",{type:"text",id:e,class:"pn-date-picker-input",name:this.name,placeholder:s,autocomplete:this.autocomplete,maxlength:this.disableMaxLength?null:this.format.length,list:d,pattern:this.pattern,value:a,disabled:this.disabled,required:this.required,readonly:this.readonly,"aria-describedby":this.ariaDescribedby(),"aria-invalid":this.hasError()?.toString(),onInput:e=>this.inputHandler(e,t),"data-active":o}),f&&i("pn-button",{class:"pn-date-picker-toggle",buttonId:n,icon:l,iconOnly:true,appearance:"light",arialabel:p,ariaexpanded:this.open.toString(),ariacontrols:this.idCalendar,"data-active":this.open,"data-input":true,small:true,onPnClick:()=>this.toggleGrid(null,t),onKeyDown:t=>this.handleButtonBlur(t)})))}render(){return i(r,{key:"6122e6224b4aa8570a714522dc323088074f5185"},i("div",{key:"d7d3c86378c680d3ddd14d9f3cb073f4bb42e2cf",class:"pn-date-picker"},this.renderInput(),this.range&&i("div",{key:"3f02b31a0e03aef31b84777d6047d1b328ff633d",class:"pn-date-picker-range-icon test"},i("pn-icon",{key:"ad328bd870726dea04b2496d2059a67de218ceac",icon:h})),this.range&&this.renderInput({to:this.range})),i("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:t=>this.calendarElement=t,onKeyDown:t=>this.handleCalendarTabEsc(t)},i("div",{key:"277f45e3372d096521889fa4bca4c1971346f0d3",class:"pn-date-picker-wrapper"},i("nav",{key:"06336288e1d9a65ba4aa796328b09003cb79271d",class:"pn-date-picker-nav","aria-labelledby":this.idCalendar},i("pn-button",{key:"6361907855287330a3e9c537ce02bd948baccaa4",hidden:this.viewingMonth(),small:true,appearance:"light",arialabel:this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`),icon:u,iconOnly:true,onPnClick:()=>this.setNavView({minus:true})}),i("pn-button",{key:"21ae6b846df3bd12b314cb6b40f6d60dc8a0cc02",hidden:!this.viewingCalendar(),small:true,appearance:"light",onPnClick:()=>this.setView(C)},i("span",{key:"9f555bfea7f07abb32d8e96e6d84b547b4946899",class:"pn-date-picker-month","data-full":true},this.translateDateText({date:1},"MMMM")),i("span",{key:"0a434038cb6ceb7fb52e89161408da00c8f3e0e3",class:"pn-date-picker-month","data-abbr":true},this.translateDateText({date:1},"MMM"))),i("h2",{key:"c63bfdcb83caf9fe9aec34416060d4ffe6ae6b08",hidden:this.viewingCalendar(),class:"pn-date-picker-title"},this.translate(`SELECT_${this.viewType().toUpperCase()}`)),i("pn-button",{key:"502e44a09ca6194365542c1223e3e994e2fbe9d0",hidden:!this.viewingCalendar(),small:true,appearance:"light",onPnClick:()=>this.setView(N)},i("span",{key:"e0e9bbe7234ae0ce544fc3b89c94c798f3a60123"},this.dateViewYear)),i("pn-button",{key:"f93f7301ab9b61cd386dcdb19df482a7b1f4a15d",hidden:this.viewingMonth(),small:true,appearance:"light",arialabel:this.translate(`NEXT_${this.viewType().toUpperCase()}`),icon:h,iconOnly:true,onPnClick:()=>this.setNavView({plus:true})})),this.viewingYears()&&this.renderYearGrid(),this.viewingMonth()&&this.renderMonthGrid(),this.viewingCalendar()&&this.renderDateGrid(),i("aside",{key:"3473b9b53b3d0007828a367f05dcbb6fb3959e7e",class:"pn-date-picker-chips"},i("slot",{key:"94e47d8d7feb1caa5db4fd24d97500258e1c4f98",name:"chips"})),i("nav",{key:"2245cab78f67e9ecf3932bda19075b13cfa27d61",class:"pn-date-picker-bottom",hidden:this.viewingCalendar()},i("pn-button",{key:"e8163e75c8197331f7ab77ed6a2fb94fde445131",appearance:"light",variant:"outlined",small:true,icon:m,onPnClick:()=>this.setView(j)},i("span",{key:"3a9028867b88cb831ef4cfc35039a10299c8fdeb"},this.translate("GO_CALENDAR")))))),i("p",{key:"dd4412fdfff7ef9c1c254a09c38831908c10c010",id:this.idHelper,class:"pn-date-picker-helpertext",hidden:!this.hasHelperText()||this.hasError()},i("span",{key:"d61ee102ecb131c481e220c073fe268b9228ebbb"},this.helpertext),i("slot",{key:"3d54b17455d0e7a2a72564856978eee3e3f8ef45",name:"helpertext"})),i("p",{key:"f42fd4bdff5c0ad22c3de99725bf1dbedd5788c8",id:this.idError,class:"pn-date-picker-error",role:"alert",hidden:!this.hasErrorMessage()},i("span",{key:"69d7fd68b1157960d095ace9a423a1a3a08702fc"},this.error),i("slot",{key:"d2676dccff19ee3a22fe62b077f44c509500f267",name:"error"})))}static get watchers(){return{minDate:["watchMin"],maxDate:["watchMax"],start:["watchValue"],end:["watchValueTo"],format:["handleFormat"],id:["watchId"],dateViewYear:["watchView"],dateViewMonth:["watchView"],dateViewDate:["watchView"],open:["watchOpen"],helpertext:["handleMessage"],error:["handleMessage"],view:["handleView"]}}};at.style=rt;export{at as pn_date_picker};
-//# sourceMappingURL=p-6a30576b.entry.js.map