@postnord/pn-marketweb-components 3.5.3 → 4.0.0

package/umd/modules/@postnord/web-components/postnord-web-components/p-49a39ea1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["translations","STEP","da","en","fi","no","sv","pnProgressStepperCss","PnProgressStepperStyle0","PnProgressStepper","this","maxStep","minStep","id","uuidv4","stepWatchers","a","b","c","validate","calculateProgress","watchLanguage","builtInLabel","language","componentWillLoad","currentStep","totalSteps","awaitTopbar","hostElement","step","prop","componentName","localName","console","warn","progressValue","Math","floor","style","setProperty","error","message","getLabel","label","getId","progressStepperId","render","h","Host","key","htmlFor","class","dots","stepName","max","value","Array","map","_","i"],"sources":["src/components/feedback/pn-progress-stepper/translations.ts","src/components/feedback/pn-progress-stepper/pn-progress-stepper.scss?tag=pn-progress-stepper","src/components/feedback/pn-progress-stepper/pn-progress-stepper.tsx"],"sourcesContent":["export const translations = {\n  STEP: {\n    da: 'Trin',\n    en: 'Step',\n    fi: 'Vaihe',\n    no: 'Trinn',\n    sv: 'Steg',\n  },\n};\n","@use 'src/globals/main';\n\npn-progress-stepper {\n  display: block;\n}\n\npn-progress-stepper .pn-progress {\n  position: relative;\n\n  width: 100%;\n  background: main.$gray50;\n  height: 0.5em;\n  border-radius: 0.5em;\n  box-shadow: (0 0 0 0.0625em main.$gray400);\n\n  &-label {\n    display: block;\n    color: main.$gray900;\n    font-size: 1em;\n    margin-bottom: 0.5em;\n  }\n\n  &-value {\n    position: absolute;\n    top: -0.0625em;\n    left: -0.0625em;\n\n    height: 0.625em;\n    background-color: main.$blue700;\n    width: calc(var(--pn-progress-value) + 0.125em);\n    border-radius: 0.5em 0 0 0.5em;\n\n    @include main.pn-transition('width, border-radius', main.$timing-layout);\n\n    &[data-full] {\n      border-top-right-radius: 0.5em;\n      border-bottom-right-radius: 0.5em;\n    }\n  }\n\n  &-dots {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 1em;\n  }\n\n  &-dot {\n    width: 0.875em;\n    height: 0.875em;\n    background-color: main.$gray50;\n    border: 0.0625em solid main.$gray200;\n    border-radius: 50%;\n\n    transform: scale(1) translateY(0%);\n\n    @include main.pn-transition('background-color, border-color', main.$timing-layout);\n\n    // Default state - plays backwards animation when data-active is removed\n    animation: pnBackwards main.$timing main.$easing;\n    animation-fill-mode: forwards;\n\n    &[data-active] {\n      background-color: main.$blue700;\n      border-color: main.$blue700;\n      animation: pnForward main.$timing main.$easing;\n      animation-fill-mode: forwards;\n    }\n  }\n\n  @include main.pn-sr-only-class();\n}\n\n@keyframes pnForward {\n  0% {\n    transform: scale(1) translateY(0%);\n  }\n  50% {\n    transform: scale(1) translateY(20%);\n  }\n  75% {\n    transform: scale(1.1) translateY(10%);\n  }\n  100% {\n    transform: scale(1) translateY(0%);\n  }\n}\n\n@keyframes pnBackwards {\n  0% {\n    transform: scale(1) translateY(0%);\n  }\n  50% {\n    transform: scale(1) translateY(-20%);\n  }\n  75% {\n    transform: scale(0.9) translateY(-10%);\n  }\n  100% {\n    transform: scale(1) translateY(0%);\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { translations } from './translations';\nimport { en, awaitTopbar, uuidv4 } from '@/globals/helpers';\nimport type { PnLanguages, PnStepProps } from '@/globals/types';\n\n/**\n * The `pn-progress-stepper` is used to visualize the users progress through a flow (checkout/survey, etc...).\n **/\n@Component({\n  tag: 'pn-progress-stepper',\n  styleUrl: 'pn-progress-stepper.scss',\n})\nexport class PnProgressStepper {\n  private readonly id: string = `pn-progress-stepper-${uuidv4()}`;\n\n  private readonly minStep: 1 = 1;\n  private readonly maxStep: 7 = 7;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() private builtInLabel: string;\n  /** Percentage calculated with currentStep / totalSteps. */\n  @State() private progressValue: number = 0;\n\n  /** Set custom label for the stepper, default label is \"Step\". */\n  @Prop() label?: string = '';\n  /** Set a custom HTML id on the progress stepper element to associate progress bar with label. */\n  @Prop() progressStepperId?: string = '';\n  /**\n   * Set the language manually, only use this prop if the pnTopbar is not loaded.\n   * Will not overwrite the custom `label` prop if used.\n   **/\n  @Prop() language?: PnLanguages = null;\n\n  /** Set total amount of steps, maximum allowed is `7`. @category Steps */\n  @Prop({ mutable: true }) totalSteps: number = this.maxStep;\n  /** The current step of the progress stepper. @category Steps */\n  @Prop({ mutable: true }) currentStep: number = this.minStep;\n  /** You can add a custom optional string to the label if you need a name for the current step. @category Steps */\n  @Prop() stepName?: string;\n\n  /**\n   * Use the dots visual, instead of the bar.\n   *\n   * This will hide the label from view, but is still accessible to screenreaders.\n   *\n   * @category Visual\n   */\n  @Prop() dots: boolean = false;\n\n  @Watch('currentStep')\n  @Watch('totalSteps')\n  stepWatchers(a: number, b: number, c: 'currentStep' | 'totalSteps') {\n    if (c === 'currentStep') this.validate(a, 'currentStep');\n    if (c === 'totalSteps') this.validate(b, 'totalSteps');\n    this.calculateProgress();\n  }\n\n  @Watch('language')\n  watchLanguage() {\n    this.builtInLabel = translations.STEP[this.language || en];\n  }\n\n  async componentWillLoad() {\n    this.watchLanguage();\n\n    this.validate(this.currentStep, 'currentStep');\n    this.validate(this.totalSteps, 'totalSteps');\n\n    this.calculateProgress();\n\n    if (this.language === null) await awaitTopbar(this.hostElement);\n  }\n\n  private validate(step: number, prop: PnStepProps) {\n    const componentName = this.hostElement.localName;\n    if (step < this.minStep) {\n      console.warn(\n        `${componentName}: The ${prop} ${step} is below the minimum allowed steps of ${this.minStep}. ${prop} will default to ${this.minStep}.`,\n      );\n      this[prop] = this.minStep;\n    }\n    if (prop === 'currentStep' && step > this.totalSteps) {\n      console.warn(\n        `${componentName}: The ${prop} ${step} is above totalSteps ${this.totalSteps}, ${prop} will default to ${this.totalSteps}.`,\n      );\n      this[prop] = this.totalSteps;\n    }\n    if (step > this.maxStep) {\n      console.warn(\n        `${componentName}: The ${prop} ${step} is above the maximum allowed steps of ${this.maxStep}. ${prop} will default to ${this.maxStep}.`,\n      );\n      this[prop] = this.maxStep;\n    }\n  }\n\n  private calculateProgress() {\n    try {\n      this.progressValue = Math.floor((this.currentStep / this.totalSteps) * 100);\n      this.hostElement.style.setProperty('--pn-progress-value', `${this.progressValue}%`);\n    } catch (error) {\n      console.error(`${this.hostElement.localName}:`, error.message);\n    }\n  }\n\n  private getLabel() {\n    return this.label || this.builtInLabel;\n  }\n\n  private getId() {\n    return this.progressStepperId || this.id;\n  }\n\n  render() {\n    return (\n      <Host>\n        <label htmlFor={this.getId()} class={'pn-progress-label' + (this.dots ? ' pn-progress-sr-only' : '')}>\n          <span>\n            {this.getLabel()} {this.currentStep}/{this.totalSteps}\n          </span>\n          {this.stepName && <span> - {this.stepName}</span>}\n        </label>\n        <progress id={this.getId()} class=\"pn-progress-sr-only\" max=\"100\" value={this.progressValue} />\n\n        {this.dots ? (\n          <div class=\"pn-progress-dots\" aria-hidden=\"true\">\n            {[...Array(this.totalSteps)].map((_, i) => (\n              <div class=\"pn-progress-dot\" data-active={i + 1 <= this.currentStep} key={i} />\n            ))}\n          </div>\n        ) : (\n          <div aria-hidden=\"true\" class=\"pn-progress\">\n            <div class=\"pn-progress-value\" data-full={this.currentStep === this.totalSteps} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;2GAAO,MAAMA,EAAe,CAC1BC,KAAM,CACJC,GAAI,OACJC,GAAI,OACJC,GAAI,QACJC,GAAI,QACJC,GAAI,SCNR,MAAMC,EAAuB,2mEAC7B,MAAAC,EAAeD,E,MCWFE,EAAiB,M,wEAUa,E,WAGhB,G,uBAEY,G,cAKJ,K,gBAGaC,KAAKC,Q,iBAEJD,KAAKE,Q,kCAW5B,K,CAnCPC,GAAa,uBAAuBC,MAEpCF,QAAa,EACbD,QAAa,E,iCAoC9B,YAAAI,CAAaC,EAAWC,EAAWC,GACjC,GAAIA,IAAM,cAAeR,KAAKS,SAASH,EAAG,eAC1C,GAAIE,IAAM,aAAcR,KAAKS,SAASF,EAAG,cACzCP,KAAKU,mB,CAIP,aAAAC,GACEX,KAAKY,aAAetB,EAAaC,KAAKS,KAAKa,UAAYpB,E,CAGzD,uBAAMqB,GACJd,KAAKW,gBAELX,KAAKS,SAAST,KAAKe,YAAa,eAChCf,KAAKS,SAAST,KAAKgB,WAAY,cAE/BhB,KAAKU,oBAEL,GAAIV,KAAKa,WAAa,WAAYI,EAAYjB,KAAKkB,Y,CAG7C,QAAAT,CAASU,EAAcC,GAC7B,MAAMC,EAAgBrB,KAAKkB,YAAYI,UACvC,GAAIH,EAAOnB,KAAKE,QAAS,CACvBqB,QAAQC,KACN,GAAGH,UAAsBD,KAAQD,2CAA8CnB,KAAKE,YAAYkB,qBAAwBpB,KAAKE,YAE/HF,KAAKoB,GAAQpB,KAAKE,O,CAEpB,GAAIkB,IAAS,eAAiBD,EAAOnB,KAAKgB,WAAY,CACpDO,QAAQC,KACN,GAAGH,UAAsBD,KAAQD,yBAA4BnB,KAAKgB,eAAeI,qBAAwBpB,KAAKgB,eAEhHhB,KAAKoB,GAAQpB,KAAKgB,U,CAEpB,GAAIG,EAAOnB,KAAKC,QAAS,CACvBsB,QAAQC,KACN,GAAGH,UAAsBD,KAAQD,2CAA8CnB,KAAKC,YAAYmB,qBAAwBpB,KAAKC,YAE/HD,KAAKoB,GAAQpB,KAAKC,O,EAId,iBAAAS,GACN,IACEV,KAAKyB,cAAgBC,KAAKC,MAAO3B,KAAKe,YAAcf,KAAKgB,WAAc,KACvEhB,KAAKkB,YAAYU,MAAMC,YAAY,sBAAuB,GAAG7B,KAAKyB,iB,CAClE,MAAOK,GACPP,QAAQO,MAAM,GAAG9B,KAAKkB,YAAYI,aAAcQ,EAAMC,Q,EAIlD,QAAAC,GACN,OAAOhC,KAAKiC,OAASjC,KAAKY,Y,CAGpB,KAAAsB,GACN,OAAOlC,KAAKmC,mBAAqBnC,KAAKG,E,CAGxC,MAAAiC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,SAAAE,IAAA,2CAAOC,QAASxC,KAAKkC,QAASO,MAAO,qBAAuBzC,KAAK0C,KAAO,uBAAyB,KAC/FL,EAAA,QAAAE,IAAA,4CACGvC,KAAKgC,WAAU,IAAGhC,KAAKe,YAAW,IAAGf,KAAKgB,YAE5ChB,KAAK2C,UAAYN,EAAA,QAAAE,IAAA,kDAAUvC,KAAK2C,WAEnCN,EAAA,YAAAE,IAAA,2CAAUpC,GAAIH,KAAKkC,QAASO,MAAM,sBAAsBG,IAAI,MAAMC,MAAO7C,KAAKyB,gBAE7EzB,KAAK0C,KACJL,EAAA,OAAKI,MAAM,mBAAkB,cAAa,QACvC,IAAIK,MAAM9C,KAAKgB,aAAa+B,KAAI,CAACC,EAAGC,IACnCZ,EAAA,OAAKI,MAAM,kBAAiB,cAAcQ,EAAI,GAAKjD,KAAKe,YAAawB,IAAKU,OAI9EZ,EAAA,qBAAiB,OAAOI,MAAM,eAC5BJ,EAAA,OAAKI,MAAM,oBAAmB,YAAYzC,KAAKe,cAAgBf,KAAKgB,c","ignoreList":[]}

package/umd/modules/@postnord/web-components/postnord-web-components/p-49f5fdd2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pnPageNavCss","PnPageNavStyle0","PnPageNav","uuidv4","mo","navContainer","navWrapper","navItems","dropdownButton","dropdownEl","dropdownItems","dropdownEls","eventHandler","this","keyboardEvents","bind","globalEventHandler","globalEvents","activeBg","hoverBg","scrollRegistered","navchange","changeHandler","target","currentSelection","closest","value","dropdownOpen","handleResize","rerender","valueHandler","calcHighlight","emit","dropdownActive","isDropdownItemActive","dropdownHandler","requestAnimationFrame","addGlobalEventListeners","removeGlobalEventListeners","componentWillLoad","dropdown","Array","from","hostElement","querySelectorAll","length","initiateDropdown","componentDidLoad","disconnect","MutationObserver","forceUpdate","setActiveNavItem","observe","childList","subtree","querySelector","addEventListener","forEach","navItemEl","removeAttribute","dropdownLinks","map","el","i","setAttribute","scrollArrowRender","bgEl","classList","add","remove","elRect","getBoundingClientRect","left","hostLeft","navLeft","height","navHeight","width","navWidth","offset","scrollLeft","style","setProperty","scrollWidth","clientWidth","showScrollArrows","amountScrolled","Math","round","distanceToEnd","distanceToStart","showLeftArrow","showRightArrow","scroll","val","amount","behavior","scrollArrowClasses","classNames","addDropdownEventListeners","toggleDropdown","root","getRootNode","removeEventListener","e","composedPath","type","includes","code","focusNextDropdownItem","focus","focusPrevDropdownItem","contains","activeElement","index","parseInt","getAttribute","dropdownButtonClasses","dropdownClasses","render","h","Host","key","class","onClick","icon","chevron_down","color","small","role","tabindex","arrow_left","arrow_right","id","navid","name"],"sources":["src/components/navigation/pn-page-nav/menu/pn-page-nav.scss?tag=pn-page-nav","src/components/navigation/pn-page-nav/menu/pn-page-nav.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-page-nav {\n  display: block;\n  position: relative;\n  font-size: clamp(0.8em, 2vw, 1em);\n  z-index: 5;\n}\n\n.pn-page-nav-wrapper {\n  transform: translateZ(0);\n  font-size: inherit;\n  max-width: 100%;\n  overflow: hidden;\n  position: relative;\n  display: inline-flex;\n  border-radius: 3em;\n}\n\n.pn-page-nav {\n  display: flex;\n  align-items: center;\n  border-radius: 3em;\n  min-height: 3em;\n  background: main.$blue900;\n  border: 0.0625em solid main.$gray200;\n  position: relative;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.pn-page-nav ul.pn-page-nav-items {\n  display: flex;\n  list-style-type: none;\n  padding: 0.25em;\n  margin: 0;\n  position: relative;\n}\n\n.pn-page-nav-items > .pn-pn-bg {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  will-change: transform;\n  left: 0;\n  border-radius: 3em;\n  transition:\n    width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97),\n    transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97),\n    background 0.15s,\n    opacity 0.15s,\n    box-shadow 0.15s;\n\n  &.pn-pn-active {\n    box-shadow:\n      0px 0.3px 0.9px rgba(0, 0, 0, 0.1),\n      0px 1.6px 3.6px rgba(0, 0, 0, 0.13);\n    background: main.$blue700;\n    z-index: 1;\n  }\n\n  &.pn-pn-hover {\n    background: main.$white;\n    opacity: 0;\n    border: 0.0625em solid transparent;\n    z-index: 0;\n  }\n\n  &.hidden {\n    opacity: 0;\n  }\n}\n\n@media (hover: hover) {\n  ul.pn-page-nav-items:focus-within .pn-pn-hover,\n  ul.pn-page-nav-items:hover .pn-pn-hover {\n    opacity: 0.12;\n  }\n}\n\n/*---------------------------------------ARROWS-------------------------------------------*/\npn-page-nav .pn-pn-arrows {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 3;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  pointer-events: none;\n  padding: 0.125em 0.1em;\n\n  svg {\n    width: 1.5em;\n\n    &.pn-icon-svg path {\n      fill: main.$blue700;\n    }\n  }\n\n  > * {\n    transition:\n      transform 0.2s,\n      opacity 0.2s,\n      background 0.1s,\n      box-shadow 0.1s;\n    pointer-events: all;\n    height: 100%;\n    aspect-ratio: 1;\n    background: main.$white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    cursor: pointer;\n    opacity: 0;\n    will-change: transform;\n    -webkit-tap-highlight-color: transparent;\n    border-radius: 50%;\n    border: 0.0625em solid main.$blue900;\n\n    &.pn-pn-arrow-left {\n      transform: translateX(-100%);\n    }\n\n    &.pn-pn-arrow-right {\n      transform: translateX(100%);\n    }\n\n    @media screen and (max-width: 30em) {\n      border: none;\n\n      pn-icon .pn-icon-svg {\n        width: 100%;\n        height: 2em;\n        animation: arrow 0.6s ease-in-out alternate infinite;\n\n        path {\n          fill: main.$white;\n        }\n      }\n\n      &.pn-pn-arrow-left {\n        background: linear-gradient(to left, transparent, main.$blue900 60%);\n        border-radius: 50% 0 0 50%;\n      }\n\n      &.pn-pn-arrow-right {\n        background: linear-gradient(to right, transparent, main.$blue900 40%);\n        border-radius: 0 50% 50% 0;\n      }\n    }\n  }\n\n  &.pn-pn-left-visible .pn-pn-arrow-left,\n  &.pn-pn-right-visible .pn-pn-arrow-right {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes arrow {\n  to {\n    transform: translateX(10%);\n  }\n}\n/*---------------------------------------/ARROWS-------------------------------------------*/\n\n/*---------------------------------------DROPDOWN-------------------------------------------*/\nbutton.pn-page-nav-dropdown-button {\n  font-size: 1em;\n  border-radius: 3em 0 0 3em;\n  background: main.$blue900;\n  color: main.$white;\n  padding: 0.5em 1em 0.5em 1.5em;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  border: none;\n  transition: background 0.15s;\n  outline: none;\n  height: 100%;\n  position: relative;\n  margin: 0 0.5em 0 0;\n  font-weight: 500;\n\n  pn-icon {\n    margin-left: 0.5em;\n  }\n\n  &:hover,\n  &:focus {\n    background: #263655;\n  }\n\n  &:focus {\n    box-shadow:\n      inset 0 0 0 0.1em main.$blue700,\n      inset 0 0 0 0.2em main.$gray200;\n  }\n\n  &.pn-page-nav-dropdown-active {\n    background: main.$blue700;\n\n    &:hover,\n    &:focus {\n      background: main.$blue700;\n    }\n  }\n}\n\n.pn-page-nav-divider {\n  height: 60%;\n  background: main.$gray200;\n  width: 0.1em;\n  position: absolute;\n  right: 0;\n  transform: translateX(50%);\n}\n\nul.pn-page-nav-dropdown {\n  position: absolute;\n  left: 0;\n  top: 110%;\n  background: main.$blue900;\n  border-radius: 0.5em;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  box-shadow:\n    0px 6.400000095367432px 14.399999618530273px 0px #00000021,\n    0px 1.2000000476837158px 3.5999999046325684px 0px #0000001a;\n  font-size: inherit;\n  display: none;\n}\n\nul.pn-page-nav-dropdown.pn-page-nav-dropdown-open {\n  display: block;\n}\n/*---------------------------------------/DROPDOWN-------------------------------------------*/\n","import {\n  Component,\n  Element,\n  Prop,\n  h,\n  Host,\n  Listen,\n  State,\n  Watch,\n  forceUpdate,\n  EventEmitter,\n  Event,\n} from '@stencil/core';\nimport { uuidv4 } from '@/globals/helpers';\nimport { chevron_down, arrow_left, arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n/**\n * @deprecated This component will be removed in v8. Please use the `pn-tablist` instead.\n * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-navigation-tablist--docs} Use `pn-tablist` instead.\n *\n * @slot dropdown-item - Place your `pn-page-nav-dropdown-item` components here.\n */\n@Component({\n  tag: 'pn-page-nav',\n  styleUrl: 'pn-page-nav.scss',\n})\nexport class PnPageNav {\n  mo: MutationObserver;\n\n  navContainer: HTMLUListElement;\n  navWrapper: HTMLElement;\n  navItems: HTMLPnPageNavItemElement[] = [];\n\n  dropdownButton: HTMLElement;\n  dropdownEl: HTMLElement;\n  dropdownItems: HTMLPnPageNavItemElement[];\n  dropdownEls: HTMLPnPageNavDropdownItemElement[];\n\n  eventHandler = this.keyboardEvents.bind(this);\n  globalEventHandler = this.globalEvents.bind(this);\n\n  activeBg: HTMLDivElement;\n  hoverBg: HTMLDivElement;\n\n  scrollRegistered: boolean = false;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() currentSelection: HTMLElement;\n  @State() showScrollArrows: boolean = false;\n  @State() showLeftArrow: boolean = false;\n  @State() showRightArrow: boolean = false;\n  @State() dropdownOpen: boolean = false;\n  @State() dropdownLinks: Array<string> = [];\n  @State() dropdownActive: boolean = false;\n\n  /** Currently active menu item value */\n  @Prop({ mutable: true }) value: string;\n  /** Pass a string which will be the text on the dropdown button. */\n  @Prop() dropdown: string | boolean = false;\n  /** Set a unique HTML ID. */\n  @Prop() navid: string = `pn-page-nav-${uuidv4()}`;\n\n  /** Emits the value of the selected item. */\n  @Event() navchange: EventEmitter<string>;\n\n  @Listen('itemselection')\n  changeHandler({ target }) {\n    this.currentSelection = target.closest('pn-page-nav-item');\n    if (target.value) this.value = target.value;\n\n    if (this.dropdownOpen) this.dropdownOpen = false;\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.rerender();\n  }\n\n  @Watch('value')\n  valueHandler() {\n    if (!this.value) this.currentSelection = null;\n    this.calcHighlight(this.currentSelection, this.activeBg);\n\n    this.navchange.emit(this.value);\n\n    if (!this.dropdownActive) return;\n    this.isDropdownItemActive();\n  }\n\n  @Watch('dropdownOpen')\n  dropdownHandler() {\n    if (this.dropdownOpen) {\n      requestAnimationFrame(() => {\n        this.addGlobalEventListeners();\n      });\n\n      return;\n    }\n\n    this.removeGlobalEventListeners();\n  }\n\n  /* ---------------------------------------LIFECYCLE--------------------------------------- */\n  componentWillLoad() {\n    if (!this.dropdown) return;\n    this.dropdownEls = Array.from(this.hostElement.querySelectorAll('pn-page-nav-dropdown-item'));\n    if (this.dropdownEls.length) {\n      this.dropdownActive = true;\n      this.initiateDropdown();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.mo) this.mo.disconnect();\n    this.mo = new MutationObserver(() => {\n      forceUpdate(this.hostElement);\n      this.setActiveNavItem();\n      this.rerender();\n    });\n    this.mo.observe(this.hostElement, { childList: true, subtree: true });\n\n    this.navWrapper = this.hostElement.querySelector('.pn-page-nav');\n    this.navContainer = this.hostElement.querySelector('.pn-page-nav-items');\n    this.activeBg = this.hostElement.querySelector('.pn-pn-active');\n    this.hoverBg = this.hostElement.querySelector('.pn-pn-hover');\n\n    this.hostElement.addEventListener('mouseover', ({ target }) =>\n      this.calcHighlight(target as HTMLElement, this.hoverBg),\n    );\n\n    this.setActiveNavItem();\n    this.rerender();\n  }\n  /* ---------------------------------------/LIFECYCLE--------------------------------------- */\n\n  setActiveNavItem() {\n    this.navItems = Array.from(this.hostElement.querySelectorAll('pn-page-nav-item'));\n    this.navItems.forEach(navItemEl => {\n      if (this.value === navItemEl.value) {\n        this.currentSelection = navItemEl;\n      } else {\n        navItemEl.removeAttribute('selected');\n      }\n\n      navItemEl\n        .querySelector('a')\n        .addEventListener('focus', ({ target }) => this.calcHighlight(target as HTMLElement, this.hoverBg));\n    });\n\n    /* -----------------dropdown------------------ */\n    if (!this.dropdownActive) return;\n    this.dropdownItems = Array.from(this.hostElement.querySelectorAll('.pn-page-nav-dropdown-item'));\n\n    //Check active state on each item\n    this.isDropdownItemActive();\n\n    //Store all values to check if dropdown button should be active\n    this.dropdownLinks = this.dropdownItems.map((el, i) => {\n      el.setAttribute('data-index', `${i}`);\n      return (el.closest('pn-page-nav-dropdown-item') as any).value;\n    });\n    /* -----------------/dropdown------------------ */\n  }\n\n  rerender() {\n    requestAnimationFrame(() => {\n      this.calcHighlight(this.currentSelection, this.activeBg);\n      this.scrollArrowRender();\n    });\n  }\n\n  /*---------------------------------------HIGHLIGHT LOGIC-------------------------------------------*/\n  calcHighlight(el: HTMLElement, bgEl: HTMLElement) {\n    if (!el?.closest('pn-page-nav-item')) {\n      bgEl?.classList.add('hidden');\n      return;\n    }\n\n    if (bgEl) bgEl.classList.remove('hidden');\n\n    const elRect = el.closest('pn-page-nav-item').getBoundingClientRect();\n    const { left: hostLeft } = this.navContainer.getBoundingClientRect();\n    const { left: navLeft, height: navHeight, width: navWidth } = elRect;\n\n    const offset = navLeft - hostLeft + this.navContainer.scrollLeft;\n\n    bgEl.style.setProperty('transform', `translate(${offset}px, -50%`);\n    bgEl.style.setProperty('width', `${navWidth}px`);\n    bgEl.style.setProperty('height', `${navHeight}px`);\n  }\n  /*---------------------------------------/HIGHLIGHT LOGIC-------------------------------------------*/\n\n  /*---------------------------------------SCROLL ARROW LOGIC-------------------------------------------*/\n  scrollArrowRender() {\n    if (!this.navWrapper) return;\n    if (this.navWrapper.scrollWidth > this.navWrapper.clientWidth) {\n      this.showScrollArrows = true;\n\n      if (!this.scrollRegistered) {\n        this.navWrapper.addEventListener('scroll', this.scrollArrowRender.bind(this));\n        this.scrollRegistered = true;\n      }\n\n      const amountScrolled = Math.round(this.navWrapper.scrollWidth - this.navWrapper.scrollLeft);\n      const distanceToEnd = amountScrolled - this.navWrapper.clientWidth;\n      const distanceToStart = this.navWrapper.scrollLeft;\n\n      this.showLeftArrow = distanceToStart > 0;\n      this.showRightArrow = distanceToEnd > 0;\n\n      return;\n    }\n\n    this.showLeftArrow = false;\n    this.showRightArrow = false;\n    this.showScrollArrows = false;\n  }\n\n  scroll(val: number) {\n    let amount = this.navWrapper.scrollLeft + val;\n\n    this.navWrapper.scroll({\n      left: amount,\n      behavior: 'smooth',\n    });\n  }\n\n  scrollArrowClasses() {\n    let classNames = 'pn-pn-arrows ';\n\n    if (this.showLeftArrow) classNames += 'pn-pn-left-visible ';\n    if (this.showRightArrow) classNames += 'pn-pn-right-visible ';\n\n    return classNames;\n  }\n  /*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/\n\n  /* ---------------------------------------DROPDOWN LOGIC--------------------------------------- */\n\n  initiateDropdown() {\n    requestAnimationFrame(() => {\n      this.dropdownButton = this.hostElement.querySelector('.pn-page-nav-dropdown-button');\n      this.dropdownEl = this.hostElement.querySelector('.pn-page-nav-dropdown');\n\n      this.addDropdownEventListeners();\n    });\n  }\n\n  toggleDropdown() {\n    this.dropdownOpen = !this.dropdownOpen;\n  }\n\n  isDropdownItemActive() {\n    this.dropdownEls.forEach(el => {\n      if (el.value && this.value === el.value) {\n        el.setAttribute('active', 'true');\n        return;\n      }\n\n      el.removeAttribute('active');\n    });\n  }\n\n  /* -----------------events------------------ */\n  /* -----------------temporary events------------------ */\n  addDropdownEventListeners() {\n    this.hostElement.addEventListener('keydown', this.eventHandler);\n    this.hostElement.addEventListener('click', this.eventHandler);\n  }\n\n  addGlobalEventListeners() {\n    const root: Document = this.hostElement.getRootNode() as Document;\n\n    root.addEventListener('focusin', this.globalEventHandler);\n    root.addEventListener('keydown', this.globalEventHandler);\n    root.addEventListener('click', this.globalEventHandler);\n  }\n\n  removeGlobalEventListeners() {\n    const root: Document = this.hostElement.getRootNode() as Document;\n\n    root.removeEventListener('focusin', this.globalEventHandler);\n    root.removeEventListener('keydown', this.globalEventHandler);\n    root.removeEventListener('click', this.globalEventHandler);\n  }\n  /* -----------------/temporary events------------------ */\n\n  /* -----------------Open dropdown with keyboard------------------ */\n  keyboardEvents(e: KeyboardEvent) {\n    const target: Element = e.composedPath()[0] as Element;\n\n    // As long as the dropdown is closed, we only want it to react to keyboard input\n    // is the user has focus on the button\n    if (e.type === 'keydown') {\n      if (!this.dropdownOpen && target === this.dropdownButton && ['ArrowUp', 'ArrowDown'].includes(e.code)) {\n        this.dropdownOpen = true;\n\n        requestAnimationFrame(() => {\n          this.focusNextDropdownItem();\n        });\n      }\n    }\n  }\n  /* -----------------/Open dropdown with keyboard------------------ */\n\n  globalEvents(e) {\n    const target: Element = e.composedPath()[0] as Element;\n\n    if (e.type === 'keydown' && e.code === 'Escape') {\n      this.dropdownOpen = false;\n      this.dropdownButton.focus();\n    }\n\n    if (e.code === 'ArrowDown') this.focusNextDropdownItem();\n    if (e.code === 'ArrowUp') this.focusPrevDropdownItem();\n\n    if ((e.type === 'click' || e.type === 'focusin') && !this.dropdownEl.contains(target)) {\n      this.dropdownOpen = false;\n    }\n  }\n  /* -----------------/events------------------ */\n\n  /* -----------------focusing------------------ */\n  focusNextDropdownItem() {\n    const { activeElement }: Document = this.hostElement.getRootNode() as Document;\n\n    if (!activeElement.classList.contains('pn-page-nav-dropdown-item')) {\n      this.dropdownItems[0].focus();\n      return;\n    }\n\n    // focus next item\n    const index = parseInt(activeElement.getAttribute('data-index'));\n\n    if (index < this.dropdownItems.length - 1) {\n      this.dropdownItems[index + 1].focus();\n    }\n  }\n\n  focusPrevDropdownItem() {\n    const { activeElement }: Document = this.hostElement.getRootNode() as Document;\n\n    if (!activeElement.classList.contains('dropdown-item')) {\n      this.dropdownItems[this.dropdownItems.length - 1].focus();\n    }\n\n    // focus previous item\n    const index = parseInt(activeElement.getAttribute('data-index'));\n\n    if (index > 0) {\n      this.dropdownItems[index - 1].focus();\n      return;\n    }\n\n    this.dropdownButton.focus();\n  }\n  /* -----------------/focusing------------------ */\n\n  dropdownButtonClasses() {\n    let classList = 'pn-page-nav-dropdown-button ';\n    if (this.dropdownLinks.includes(this.value)) classList += 'pn-page-nav-dropdown-active ';\n\n    return classList;\n  }\n\n  dropdownClasses() {\n    let classList = 'pn-page-nav-dropdown ';\n\n    if (this.dropdownOpen) classList += 'pn-page-nav-dropdown-open ';\n\n    return classList;\n  }\n  /* ---------------------------------------/DROPDOWN LOGIC--------------------------------------- */\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-page-nav-wrapper\">\n          <nav class=\"pn-page-nav\">\n            {this.dropdownActive && (\n              <button\n                type=\"button\"\n                class={this.dropdownButtonClasses()}\n                onClick={() => this.toggleDropdown()}\n                aria-controls=\"page-nav-dropdown\"\n                aria-expanded={`${this.dropdownOpen}`}\n              >\n                {this.dropdown}\n                <pn-icon icon={chevron_down} color=\"white\" small></pn-icon>\n                <div class=\"pn-page-nav-divider\"></div>\n              </button>\n            )}\n\n            <ul class=\"pn-page-nav-items\">\n              <slot />\n              <li class=\"pn-pn-bg pn-pn-active\" role=\"presentation\"></li>\n              <li class=\"pn-pn-bg pn-pn-hover\" role=\"presentation\"></li>\n            </ul>\n          </nav>\n\n          {this.showScrollArrows && (\n            <div class={this.scrollArrowClasses()}>\n              <button class=\"pn-pn-arrow-left\" onClick={() => this.scroll(-120)} tabindex=\"-1\">\n                <pn-icon icon={arrow_left} color=\"white\"></pn-icon>\n              </button>\n\n              <button class=\"pn-pn-arrow-right\" onClick={() => this.scroll(120)} tabindex=\"-1\">\n                <pn-icon icon={arrow_right} color=\"blue700\"></pn-icon>\n              </button>\n            </div>\n          )}\n        </div>\n\n        {this.dropdownActive && (\n          <ul id={this.navid} class={this.dropdownClasses()}>\n            <slot name=\"dropdown-item\" />\n          </ul>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/umd/modules/@postnord/web-components/postnord-web-components/p-617a946d.entry.js

@@ -1,6 +0,0 @@
-/*!
- * Built with Stencil
- * By PostNord.
- */
-import{r as s,c as e,g as t,h as r}from"./p-43660913.js";const i=".pn-progress-indicator{display:flex;padding:2.8em 1em 0}";const o=i;const n=class{constructor(t){s(this,t);this.progresschange=e(this,"progresschange",7);this.activeStep=0}get hostElement(){return t(this)}progresschange;setActiveStepHandler({detail:s}){this.activeStep=s;this.progresschange.emit(this.activeStep)}componentWillLoad(){this.passPropsToChildren()}componentDidUpdate(){this.passPropsToChildren()}passPropsToChildren(){const s=Array.from(this.hostElement.querySelectorAll("pn-progress-indicator-step"));s.forEach(((s,e)=>{s.activeStep=this.activeStep;s.index=e}))}render(){return r("div",{key:"1108f70edf525c6e7e0e45d34a6d58e69c5b9ab2",class:"pn-progress-indicator"},r("slot",{key:"c4035cf9fadb46f4e573c0225bebb2f8f7187da6"}))}};n.style=o;export{n as pn_progress_indicator};
-//# sourceMappingURL=p-617a946d.entry.js.map

package/umd/modules/@postnord/web-components/postnord-web-components/p-617a946d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pnProgressIndicatorCss","PnProgressIndicatorStyle0","PnProgressIndicator","progresschange","setActiveStepHandler","detail","this","activeStep","emit","componentWillLoad","passPropsToChildren","componentDidUpdate","children","Array","from","hostElement","querySelectorAll","forEach","child","i","index","render","h","key","class"],"sources":["src/components/feedback/pn-progress-indicator/pn-progress-indicator.scss?tag=pn-progress-indicator","src/components/feedback/pn-progress-indicator/pn-progress-indicator.tsx"],"sourcesContent":[".pn-progress-indicator {\n  display: flex;\n  padding: 2.8em 1em 0;\n}\n","import { Component, Prop, Element, Listen, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead.\n * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.}\n */\n@Component({\n  tag: 'pn-progress-indicator',\n  styleUrl: 'pn-progress-indicator.scss',\n})\nexport class PnProgressIndicator {\n  @Element() hostElement: HTMLElement;\n\n  /** Takes the index of the active step */\n  @Prop({ mutable: true }) activeStep: number = 0;\n\n  /** This will emit when progress is changed and is the value you want to bind to your VM state */\n  @Event() progresschange: EventEmitter<number>;\n\n  @Listen('setactivestep')\n  setActiveStepHandler({ detail }) {\n    this.activeStep = detail;\n    this.progresschange.emit(this.activeStep);\n  }\n\n  componentWillLoad() {\n    this.passPropsToChildren();\n  }\n\n  componentDidUpdate() {\n    this.passPropsToChildren();\n  }\n\n  passPropsToChildren() {\n    const children = Array.from(\n      this.hostElement.querySelectorAll<HTMLPnProgressIndicatorStepElement>('pn-progress-indicator-step'),\n    );\n\n    children.forEach((child, i) => {\n      child.activeStep = this.activeStep;\n      child.index = i;\n    });\n  }\n\n  render() {\n    return (\n      <div class=\"pn-progress-indicator\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;yDAAA,MAAMA,EAAyB,2DAC/B,MAAAC,EAAeD,E,MCSFE,EAAmB,M,wFAIgB,C,kCAGrCC,eAGT,oBAAAC,EAAqBC,OAAEA,IACrBC,KAAKC,WAAaF,EAClBC,KAAKH,eAAeK,KAAKF,KAAKC,W,CAGhC,iBAAAE,GACEH,KAAKI,qB,CAGP,kBAAAC,GACEL,KAAKI,qB,CAGP,mBAAAA,GACE,MAAME,EAAWC,MAAMC,KACrBR,KAAKS,YAAYC,iBAAqD,+BAGxEJ,EAASK,SAAQ,CAACC,EAAOC,KACvBD,EAAMX,WAAaD,KAAKC,WACxBW,EAAME,MAAQD,CAAC,G,CAInB,MAAAE,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,yBACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/umd/modules/@postnord/web-components/postnord-web-components/p-65ae6360.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{c as d}from"./p-99600bc7.js";import{c as h,a as b}from"./p-2f7bb5e8.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]}globalEvents=n=>{const t=n.target;const i=t?.closest(this.hostElement.localName);if(!i)this.closeEachSubMenu(true)};addGlobalEventListeners(){const n=this.hostElement.getRootNode();n.addEventListener("click",this.globalEvents)}removeGlobalEventListeners(){const n=this.hostElement.getRootNode();n.removeEventListener("click",this.globalEvents)}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=p();const i=n.left;const e=n.left+this.menuWidth;const o=t+16;const a=innerWidth-16;let s=0;if(i<o){s=o-i}else if(e>a){s=a-e}if(this.menuContainer)this.menuContainer.style.setProperty("--pn-action-menu-offset",`${s}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(n=false){if(!n)this.menuTrigger?.querySelector("button")?.focus({preventScroll:true});const t=setInterval((()=>{if(this.smallMenu||this.activeSubmenu.length===0){clearInterval(t);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(){this.addGlobalEventListeners();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(){this.removeGlobalEventListeners();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:"474e0e58bfa5f3105b98e3bee9d2d0b39f450dac"},e("div",{key:"262f0895ad57b5edeffa360530cda0a7144cfe33",id:this.menuId!==this.id?this.menuId:null,class:"pn-action-menu"},e("pn-button",{key:"b77ec7bd057e59c795eea8a16db6cba68c5c527c",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-65ae6360.entry.js.map

package/umd/modules/@postnord/web-components/postnord-web-components/p-65ae6360.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","globalEvents","event","target","isWithinActionMenu","closest","closeEachSubMenu","addGlobalEventListeners","root","getRootNode","addEventListener","removeGlobalEventListeners","removeEventListener","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","sideMenuWidth","getMenuWidth","menuLeft","left","menuRight","leftBoundary","rightBoundary","innerWidth","offset","getListId","option","value","getButtonId","getTriggerIcon","button","icon","chevron_down","getSubMenuPath","path","item","newPath","group","result","preventFocus","querySelector","focus","preventScroll","interval","setInterval","clearInterval","pop","escButton","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","nextElementSibling","className","x","width","y","clientCor","clientX","clientY","ripple","scrollTo","isActive","includes","splice","indexOf","spaceLeft","spaceRight","right","fitsLeft","fitsRight","climbUp","yDirection","dataset","setAttribute","JSON","stringify","filter","isMenuActive","isRootSubInsideGroup","find","every","val","isCurrentSubMenu","Boolean","getOptionTrailing","useButtonIcon","chevron_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","chevron_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 { chevron_down, chevron_left, chevron_right, open_in_new } from 'pn-design-assets/pn-assets/icons.js';\n\n/**\n * Create a list of actions in an accessible way.\n *\n * Option types include:\n *\n * - Regular button, click and it will collapse the menu,\n * - Checkbox/radio, toggle the option on/off\n * - Link, behaves like a regular `a[href]` element.\n *\n * You can group these actions in groups and/or sub menus.\n *\n * - `group`, an array of options. The label will act as a title for the items.\n * - `options`, an array of options. These items will appear in a sub-menu that can be toggled.\n *\n * @see {@link PnActionMenuItem}\n */\n@Component({\n  tag: 'pn-action-menu',\n  styleUrl: 'pn-action-menu.scss',\n})\nexport class PnActionMenu {\n  private readonly id: string = `pn-action-menu-${uuidv4()}`;\n\n  private menuButtonId: string = `${this.id}-button`;\n  private menuListId: string = `${this.id}-list`;\n\n  private menuTrigger: HTMLPnButtonElement;\n  private menuContainer: HTMLDivElement;\n  private menuList: HTMLMenuElement;\n\n  private animation: Animation;\n  private readonly duration: number = 400;\n  private animationDuration: number = this.duration;\n\n  private timeout: NodeJS.Timeout;\n\n  /** 16em */\n  private readonly menuWidth: number = 256;\n\n  @Element() private hostElement: HTMLElement;\n\n  @State() private smallMenu: boolean = null;\n  @State() private upwards: boolean = false;\n\n  @State() private activeSubmenu: PnActionMenuItem['value'][] = [];\n\n  @State() private isClosing = false;\n  @State() private isExpanding = false;\n\n  /** Array of action menu options. @see {@link PnActionMenuItem} */\n  @Prop() options: PnActionMenuItem[] = [];\n  /** Set any prop from the `pn-button` component here. @see {@link Components.PnButton} */\n  @Prop() button: Components.PnButton;\n\n  /** Set a custom ID for the menu. */\n  @Prop() menuId?: string = this.id;\n  /** Manually set the language. */\n  @Prop({ mutable: true }) language?: PnLanguages = null;\n\n  /** Open/close the action menu manually. @category Features */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /** Prefer that the menu open upwards, if there is enough space. @category Features */\n  @Prop() menuUp?: boolean = false;\n  /** Prefer that the submenus opens to the left, if there is enough space. @category Features */\n  @Prop() menuLeft?: boolean = false;\n\n  /** Emitted when the menu is opened or closed. */\n  @Event() private menuToggle: EventEmitter<{ open: boolean }>;\n  /** Emitted when the menu is fully hidden/visible after the animation has played. */\n  @Event() private menuVisible: EventEmitter<{ visible: boolean }>;\n  /** Emitted when an option is clicked (button, link, input or submenus). */\n  @Event() private menuOption: EventEmitter<{\n    /** Which type of menu item was clicked. */\n    type: 'button' | 'link' | 'input' | 'submenu';\n    /** If its an `input` type (checkbox/radio), it will be a generic `Event` (ChangeEvent) instead of `MouseEvent`. */\n    click: MouseEvent | Event;\n    /** The full {@link PnActionMenuItem} object. */\n    option: PnActionMenuItem;\n    /** If the submenu is open/closed. */\n    open?: Boolean;\n  }>;\n\n  @Watch('options')\n  handleOptions() {\n    this.setMenuLayout();\n  }\n\n  @Watch('open')\n  openHandler() {\n    this.setAnimationDuration();\n\n    requestAnimationFrame(() => {\n      if (this.open && !(this.isClosing || this.isExpanding)) {\n        this.setOffset();\n        this.setMenuLayout();\n      }\n\n      this.gridHandler();\n\n      this.menuToggle.emit({ open: this.open });\n\n      clearTimeout(this.timeout);\n      this.timeout = setTimeout(() => {\n        if (!this.open) {\n          this.activeSubmenu = [];\n          const subMenus = this.hostElement.querySelectorAll<HTMLUListElement>('[data-x]');\n          Array.from(subMenus).forEach(el => {\n            el.removeAttribute('data-x');\n            el.removeAttribute('data-y');\n          });\n        }\n\n        this.menuVisible.emit({ visible: this.open });\n      }, this.animationDuration);\n    });\n  }\n\n  @Watch('menuId')\n  handleMenuId() {\n    this.menuButtonId = `${this.menuId}-button`;\n    this.menuListId = `${this.menuId}-list`;\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    if (this.open) this.toggleActionMenu(false);\n  }\n\n  async componentWillLoad() {\n    if (!this.options.length) console.warn(`${this.hostElement.localName}: No options set.`);\n\n    this.handleMenuId();\n    this.setAnimationDuration();\n\n    if (this.language !== null) await awaitTopbar(this.hostElement);\n  }\n\n  componentDidLoad() {\n    this.setOffset();\n\n    if (this.open) this.gridHandler();\n  }\n\n  private translate(prop: PnMenuTextProp) {\n    return translations[prop][this.language || en];\n  }\n\n  private globalEvents = (event: PointerEvent | KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const isWithinActionMenu = target?.closest(this.hostElement.localName);\n    if (!isWithinActionMenu) this.closeEachSubMenu(true);\n  };\n\n  private addGlobalEventListeners() {\n    const root: Document = this.hostElement.getRootNode() as Document;\n\n    root.addEventListener('click', this.globalEvents);\n  }\n\n  private removeGlobalEventListeners() {\n    const root: Document = this.hostElement.getRootNode() as Document;\n\n    root.removeEventListener('click', this.globalEvents);\n  }\n\n  /** Open/close the action menu. */\n  private toggleActionMenu(state?: boolean) {\n    this.open = state ?? !this.open;\n  }\n\n  private setMenuLayout() {\n    if (!this.menuContainer) return;\n\n    if (!(this.isClosing || this.isExpanding)) this.resetMaxHeight();\n\n    const measurements = this.getMenuMeasurements();\n\n    this.setDirection(measurements);\n    this.setMenuSize(measurements);\n    this.setMaxHeight(measurements);\n  }\n\n  private setDirection({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n    const fitsUpwards = sUp > hUp;\n    const fitsDownards = sDown > hDown;\n    const moreSpaceDown = sDown > sUp;\n    this.upwards = (this.menuUp && fitsUpwards) || (!fitsDownards && !moreSpaceDown);\n  }\n\n  private setMenuSize({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n    const isWidthSmall = isSmallScreen();\n    const menuFits = this.upwards ? sUp > hUp : sDown > hDown;\n    const isSmall = isWidthSmall || !menuFits;\n\n    if (isSmall !== this.smallMenu) {\n      this.smallMenu = isSmall;\n    }\n  }\n\n  private setMaxHeight({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n    if (this.smallMenu) {\n      const heightUp = hUp > sUp ? hUp - 16 : hUp;\n      const heightDown = hDown > sDown ? hDown - 8 : hDown;\n      this.hostElement.style.setProperty('--pn-menu-height', `${this.upwards ? heightUp : heightDown}px`);\n    } else this.resetMaxHeight();\n  }\n\n  private resetMaxHeight() {\n    this.hostElement.style.setProperty('--pn-menu-height', 'unset');\n  }\n\n  private setAnimationDuration() {\n    if (reduceMotion()) this.animationDuration = 0;\n    else this.animationDuration = this.duration;\n  }\n\n  private getRect(element: HTMLElement): DOMRect {\n    return element.getBoundingClientRect();\n  }\n\n  private getMenuMeasurements(): PnMeasurements {\n    const allLists = Array.from(this.menuContainer.querySelectorAll('menu'));\n    const maxHeight = Math.max(...allLists.map(el => el.scrollHeight));\n\n    const rectButton = this.getRect(this.menuTrigger);\n    const rectMenu = this.getRect(this.menuContainer);\n\n    /** Measurements upwards. */\n    const sUp = rectButton.top - getTotalHeightOffset();\n    const hUp = sUp > maxHeight ? maxHeight : sUp;\n\n    /** Measurements downwards. */\n    const sDown = innerHeight - rectMenu.top;\n    const hDown = sDown > maxHeight ? maxHeight : sDown;\n\n    return {\n      hUp,\n      hDown,\n      sUp,\n      sDown,\n    };\n  }\n\n  private setOffset() {\n    const data = this.getRect(this.hostElement);\n    const sideMenuWidth = getMenuWidth();\n\n    // Calculate potential menu position\n    const menuLeft = data.left;\n    const menuRight = data.left + this.menuWidth;\n\n    // Define boundaries\n    const leftBoundary = sideMenuWidth + 16; // Left menu + buffer\n    const rightBoundary = innerWidth - 16; // Right edge - buffer\n\n    let offset = 0;\n\n    // Check if menu would overlap left menu or go off left edge\n    if (menuLeft < leftBoundary) {\n      offset = leftBoundary - menuLeft;\n    }\n    // Check if menu would go off right edge\n    else if (menuRight > rightBoundary) {\n      offset = rightBoundary - menuRight;\n    }\n\n    if (this.menuContainer) this.menuContainer.style.setProperty('--pn-action-menu-offset', `${offset}px`);\n  }\n\n  private getListId(option: PnActionMenuItem) {\n    return `pn-menu-${option.value}-list`;\n  }\n\n  private getButtonId(option: PnActionMenuItem) {\n    return `pn-menu-${option.value}-button`;\n  }\n\n  private getTriggerIcon() {\n    if (this.button?.icon) return;\n    return chevron_down;\n  }\n\n  /** Set the path of open sub menus. */\n  private getSubMenuPath(options: PnActionMenuItem[], value: string, path = []): string[] {\n    for (const item of options) {\n      const newPath = [...path, item.value];\n      if (item.value === value) return newPath;\n\n      if (item.options || item.group) {\n        const result = this.getSubMenuPath(item.options || item.group, value, newPath);\n        if (result) return result;\n      }\n    }\n    return null;\n  }\n\n  private closeEachSubMenu(preventFocus: boolean = false) {\n    if (!preventFocus) this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });\n\n    const interval = setInterval(() => {\n      if (this.smallMenu || this.activeSubmenu.length === 0) {\n        clearInterval(interval);\n        this.toggleActionMenu(false);\n      } else {\n        this.activeSubmenu.pop();\n        this.activeSubmenu = [...this.activeSubmenu];\n      }\n    }, 150);\n  }\n\n  private escButton(event: KeyboardEvent, option: PnActionMenuItem) {\n    const { key } = event;\n\n    if (key === 'Escape') {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n\n      this.isSubmenuActive(option.value) ? this.toggleSub(option) : this.toggleActionMenu();\n    }\n  }\n\n  // Animation Start\n\n  private gridHandler() {\n    if (this.open) this.openGrid();\n    else this.closeGrid();\n  }\n\n  private openGrid() {\n    this.addGlobalEventListeners();\n\n    const list = this.getRect(this.menuList);\n\n    const { clientHeight } = this.menuContainer;\n    const height = this.isClosing ? clientHeight : 0;\n    this.menuContainer.style.height = `${list.height}px`;\n\n    this.isExpanding = true;\n    this.animateGrid(true, `${height}px`, `${list.height}px`);\n  }\n\n  private closeGrid() {\n    this.removeGlobalEventListeners();\n\n    const list = this.getRect(this.menuList);\n\n    const { clientHeight } = this.menuContainer;\n    const height = this.isExpanding ? clientHeight : list.height;\n    this.menuContainer.style.height = `0px`;\n\n    this.isClosing = true;\n    this.animateGrid(false, `${height}px`, `0px`);\n  }\n\n  private animateGrid(open: boolean, startHeight: string, endHeight: string) {\n    this.cancelAnimations();\n    this.animation = this.menuContainer.animate(\n      {\n        height: [startHeight, endHeight],\n      },\n      {\n        duration: this.animationDuration,\n        easing: 'cubic-bezier(0.6, 0, 0.2, 1)',\n      },\n    );\n    this.animation.onfinish = () => this.animationFinish();\n    this.animation.oncancel = () => (open ? (this.isExpanding = false) : (this.isClosing = false));\n  }\n\n  private animationFinish() {\n    this.cancelAnimations();\n    this.menuContainer.style.height = this.isClosing ? '0px' : '';\n    this.isClosing = false;\n    this.isExpanding = false;\n  }\n\n  private cancelAnimations() {\n    if (this.animation) this.animation.cancel();\n  }\n\n  // Animation end\n\n  private async optionSelect(option: PnActionMenuItem, click: MouseEvent | Event) {\n    const type = option?.options?.length ? 'submenu' : !!option.input ? 'input' : option.href ? 'link' : 'button';\n    const isSubMenu = type === 'submenu';\n\n    if (isSubMenu) this.toggleSub(option);\n    else if (type === 'button') this.closeEachSubMenu();\n    else if (type === 'input') option.checked = (click.target as HTMLInputElement).checked;\n\n    this.menuOption.emit({\n      option,\n      type,\n      click,\n      open: isSubMenu ? this.isSubmenuActive(option.value) : null,\n    });\n\n    const target = click.target as HTMLElement;\n    const element =\n      target.localName === 'input'\n        ? (target.nextElementSibling as HTMLElement)\n        : target.className === 'pn-action-menu-button'\n          ? target\n          : target.closest<HTMLElement>('.pn-action-menu-button');\n\n    const { x, width, y, top } = this.getRect(element as HTMLElement);\n    const clientCor = { clientX: x + width - 24, clientY: y - top };\n\n    ripple(click.type === 'click' ? (click as MouseEvent) : clientCor, element);\n\n    this.menuContainer.scrollTo({ top: 0 });\n  }\n\n  /** Toggle individual sub-menus inside the action menu by using the `option['value']`. */\n  private toggleSub(option: PnActionMenuItem) {\n    const { value } = option;\n\n    const path = this.getSubMenuPath(this.options, value);\n    const isActive = this.activeSubmenu.includes(value);\n    isActive && path.splice(this.activeSubmenu.indexOf(value), 1);\n\n    const item = this.hostElement.querySelector<HTMLElement>(`#${this.getListId(option)}`);\n    const data = this.getRect(item);\n\n    const spaceLeft = data.left;\n    const spaceRight = innerWidth - data.right - 8;\n\n    const fitsLeft = spaceLeft > data.width;\n    const fitsRight = spaceRight > data.width;\n\n    const climbUp = this.menuUp && data.top - data.height > 0;\n    const yDirection = climbUp ? 'top' : 'bottom';\n\n    if (!isActive && !item.dataset.x)\n      item.setAttribute(\n        'data-x',\n        this.menuLeft && fitsLeft ? 'left' : fitsRight ? 'right' : fitsLeft ? 'left' : 'center',\n      );\n    if (!isActive && !item.dataset.y) item.setAttribute('data-y', yDirection);\n\n    if (JSON.stringify(path) === JSON.stringify(this.activeSubmenu))\n      this.activeSubmenu = this.activeSubmenu.filter(item => item !== value);\n    else this.activeSubmenu = [...path];\n  }\n\n  /** Check if a sub-menu is active. */\n  private isSubmenuActive(value: string): boolean {\n    return this.activeSubmenu.includes(value);\n  }\n\n  private isMenuActive() {\n    const isRootSubInsideGroup = this.options.find(({ value }) => this.activeSubmenu.every(val => val === value));\n    return this.smallMenu && (this.activeSubmenu?.length === 0 || isRootSubInsideGroup);\n  }\n\n  private isCurrentSubMenu(value: string) {\n    return Boolean(this.activeSubmenu[this.activeSubmenu.length - 1] === value);\n  }\n\n  private getOptionTrailing(option: PnActionMenuItem) {\n    const useButtonIcon = option.options?.length && chevron_right;\n    const useTrailingIcon = option.trailingIcon;\n    const useLinkIcon = option.target === '_blank' && open_in_new;\n\n    /** If the user has defined a trialing icon, use it first. */\n    const icon = useButtonIcon || useTrailingIcon || useLinkIcon;\n\n    if (icon) {\n      return <pn-icon icon={icon} color=\"blue700\" data-suffix data-active={this.isSubmenuActive(option.value)} />;\n    }\n    if (option.suffix) {\n      return <span class=\"pn-action-menu-item-suffix\">{option.suffix}</span>;\n    }\n  }\n\n  private renderCheckbox(option: PnActionMenuInput) {\n    const id = `pn-menu-${option.value}-label`;\n    const idHelper = `pn-menu-${option.value}-helpertext`;\n    return (\n      <div class=\"pn-action-menu-item-content\">\n        <input\n          type={option.input}\n          id={id}\n          class=\"pn-action-menu-input\"\n          name={option.name}\n          value={option.value}\n          checked={option.checked}\n          disabled={option.disabled}\n          aria-describedby={option.helpertext ? idHelper : null}\n          onInput={event => this.optionSelect(option, event)}\n          tabIndex={this.open ? null : -1}\n        />\n\n        <div class=\"pn-action-menu-button\">\n          {!!option.icon && <pn-icon icon={option.icon} color=\"blue700\" />}\n\n          <div class=\"pn-action-menu-item-text\">\n            <label htmlFor={id} class=\"pn-action-menu-item-label\">\n              {option.label}\n            </label>\n            {option.helpertext && (\n              <p id={idHelper} class=\"pn-action-menu-item-helpertext\">\n                <span>{option.helpertext}</span>\n              </p>\n            )}\n          </div>\n          {option.input === 'checkbox' ? (\n            <div class=\"pn-action-menu-checkbox\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <polyline class=\"pn-action-menu-checkbox-checkmark-path\" points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n              </svg>\n            </div>\n          ) : (\n            <div class=\"pn-action-menu-radio\">\n              <div class=\"pn-action-menu-radio-outer\">\n                <div class=\"pn-action-menu-radio-inner\" />\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private renderButton(option: PnActionMenuItem) {\n    const isCloseButton = option.label === 'BACK';\n    const isSub = !!option?.options?.length;\n    const isGroup = !!option?.group?.length;\n    const isLink = !!option.href && !isSub && !isGroup;\n\n    const appendedId = isCloseButton ? '-close' : '';\n    const hasIcon = isCloseButton || !!option.icon;\n\n    const trailingObject = isCloseButton ? null : this.getOptionTrailing(option);\n    const open = this.isSubmenuActive(option.value);\n    const subMenuAttrs = isSub\n      ? {\n          'aria-haspopup': 'true',\n          'aria-controls': open ? this.getListId(option) : null,\n          'aria-expanded': open?.toString(),\n        }\n      : {};\n\n    const attrs = isLink\n      ? {\n          href: option.href,\n          target: option.target,\n        }\n      : {\n          disabled: option.disabled,\n        };\n\n    const Tag = isLink ? 'a' : 'button';\n\n    return isGroup ? (\n      <div class=\"pn-action-menu-group-label\">\n        <p class=\"pn-action-menu-p\">{option.label}</p>\n        {option.helpertext && <p class=\"pn-action-menu-group-helpertext\">{option.helpertext}</p>}\n      </div>\n    ) : (\n      <div class=\"pn-action-menu-item-content\" data-close={isCloseButton}>\n        <Tag\n          id={this.getButtonId(option) + appendedId}\n          class=\"pn-action-menu-button\"\n          {...subMenuAttrs}\n          {...attrs}\n          tabIndex={this.open ? null : -1}\n          onClick={event => this.optionSelect(option, event)}\n          onKeyDown={(event: KeyboardEvent) => this.escButton(event, option)}\n        >\n          {hasIcon && <pn-icon icon={isCloseButton ? chevron_left : option.icon} color=\"blue700\" />}\n          <div class=\"pn-action-menu-item-text\">\n            <span class=\"pn-action-menu-item-label\">{isCloseButton ? this.translate('BACK') : option.label}</span>\n            {option.helpertext && !isLink && <span class=\"pn-action-menu-item-helpertext\">{option.helpertext}</span>}\n          </div>\n          {trailingObject}\n        </Tag>\n      </div>\n    );\n  }\n\n  private renderSub(option: PnActionMenuItem) {\n    return (\n      <menu\n        id={this.getListId(option)}\n        aria-labelledby={this.getButtonId(option)}\n        class=\"pn-action-menu-sub\"\n        data-open={this.isSubmenuActive(option.value)?.toString()}\n        data-current={this.isCurrentSubMenu(option.value)}\n      >\n        {this.smallMenu && (\n          <li class=\"pn-action-menu-item\">\n            {this.renderButton({\n              label: 'BACK',\n              value: option.value,\n              options: option.options,\n            })}\n          </li>\n        )}\n        {option.options.map(item => this.renderMenuItem(item))}\n      </menu>\n    );\n  }\n\n  private renderGroup(option: PnActionMenuGroup) {\n    return <menu class=\"pn-action-menu-group\">{option.group.map(item => this.renderMenuItem(item))}</menu>;\n  }\n\n  private renderMenuItem(option: PnActionMenuItem) {\n    const isSub = !!option?.options?.length;\n    const isGroup = !isSub && !!option?.group?.length;\n\n    const isCheckbox = !!option.input && !isSub && !isGroup;\n\n    return (\n      <li class=\"pn-action-menu-item\" data-group={isGroup} data-sub={isSub}>\n        {isCheckbox ? this.renderCheckbox(option) : this.renderButton(option)}\n        {isSub ? this.renderSub(option) : isGroup && this.renderGroup(option)}\n      </li>\n    );\n  }\n\n  private renderMenu() {\n    return (\n      <div\n        id={this.menuListId}\n        class=\"pn-action-menu-container\"\n        role=\"region\"\n        aria-labelledby={this.menuButtonId}\n        data-open={this.open}\n        data-moving={this.isClosing || this.isExpanding}\n        data-upwards={this.upwards}\n        data-small={this.smallMenu}\n        style={{ height: '0px' }}\n        ref={el => (this.menuContainer = el)}\n      >\n        <menu class=\"pn-action-menu-list\" ref={el => (this.menuList = el)} data-current={this.isMenuActive()}>\n          {this.options?.map(option => this.renderMenuItem(option))}\n        </menu>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id={this.menuId !== this.id ? this.menuId : null} class=\"pn-action-menu\">\n          <pn-button\n            icon={this.getTriggerIcon()}\n            {...this.button}\n            buttonId={this.menuButtonId}\n            tooltipUp={!this.upwards}\n            ariahaspopup=\"true\"\n            ariacontrols={this.open ? this.menuListId : null}\n            ariaexpanded={this.open.toString()}\n            data-default-icon={!this.button?.icon}\n            onPnClick={() => this.toggleActionMenu()}\n            ref={el => (this.menuTrigger = el)}\n          />\n          {this.renderMenu()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/umd/modules/@postnord/web-components/postnord-web-components/p-75c5fb41.entry.js

@@ -1,6 +0,0 @@
-/*!
- * Built with Stencil
- * By PostNord.
- */
-import{r as n,c as a,g as t,f as o,h as e,a as i}from"./p-43660913.js";import{r as l,k as d,e as s,i as r}from"./p-f64d17a6.js";import{c as m}from"./p-92b0338a.js";const c={CLOSE_MODAL:{en:"Close dialog",sv:"Stäng dialogrutan",da:"Luk dialogboks",fi:"Sulje valintaikkuna",no:"Lukk dialogboksen"}};const p="/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-modal .pn-modal {\n  --pn-modal-max-width: 45em;\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  margin: auto;\n  padding: 0;\n  max-width: var(--pn-modal-max-width);\n  overflow: hidden;\n  border: 0;\n  border-radius: 1.5em;\n  box-shadow: 0 0.25em 0.875em rgba(0, 0, 0, 0.18), 0 1.625em 3.5em rgba(0, 0, 0, 0.22);\n  background-color: #ffffff;\n  display: none;\n  opacity: 0;\n  transform: translate(0%, 20%);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n  transition-property: opacity, overlay, display, transform, outline-color, border-radius;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  transition-behavior: allow-discrete;\n}\npn-modal .pn-modal:focus-visible {\n  outline-color: #ffffff;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-modal .pn-modal {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-modal .pn-modal[data-allow-overflow] {\n  overflow: unset;\n}\npn-modal .pn-modal[data-allow-overflow] .pn-modal-container {\n  overflow: unset;\n}\npn-modal .pn-modal[data-allow-overflow] .pn-modal-picture {\n  border-top-right-radius: 1.5em;\n}\npn-modal .pn-modal[data-image] {\n  padding-top: 0;\n}\npn-modal .pn-modal[data-sheet] {\n  margin: 0 0 0 auto;\n  height: 100%;\n  max-height: unset;\n  border-radius: 1.5em 0 0 1.5em;\n  transform: translate(20%, 0%);\n}\npn-modal .pn-modal[data-sheet] .pn-modal-container {\n  max-height: unset;\n}\npn-modal .pn-modal[open] {\n  display: flex;\n  opacity: 1;\n  transform: translate(0%, 0%);\n}\n@starting-style {\n  pn-modal .pn-modal[open] {\n    display: flex;\n    opacity: 0;\n    transform: translate(0%, 20%);\n  }\n}\npn-modal .pn-modal[open][data-sheet] {\n  transform: translate(0%, 0%);\n}\n@starting-style {\n  pn-modal .pn-modal[open][data-sheet] {\n    transform: translate(20%, 0%);\n  }\n}\npn-modal .pn-modal::backdrop {\n  background-color: rgba(0, 0, 0, 0);\n  transition-property: opacity, background-color, overlay, display;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  transition-behavior: allow-discrete;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-modal .pn-modal::backdrop {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-modal .pn-modal[open]::backdrop {\n  background-color: rgba(0, 0, 0, 0.55);\n}\n@starting-style {\n  pn-modal .pn-modal[open]::backdrop {\n    background-color: rgba(0, 0, 0, 0);\n  }\n}\npn-modal .pn-modal-container {\n  max-height: 85vh;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  height: 100%;\n  overflow: hidden auto;\n}\npn-modal .pn-modal-container::-webkit-scrollbar {\n  background-color: #ffffff;\n  width: 0.875em;\n  border-radius: 0.5em;\n}\npn-modal .pn-modal-container::-webkit-scrollbar-track {\n  background-color: #ffffff;\n  border-radius: 0.5em;\n}\npn-modal .pn-modal-container::-webkit-scrollbar-thumb {\n  cursor: pointer;\n  background-color: #969087;\n  border-radius: 1em;\n  border: 0.25em solid #ffffff;\n}\npn-modal .pn-modal-container::-webkit-scrollbar-thumb:hover {\n  background-color: #5e554a;\n}\npn-modal .pn-modal-container::-webkit-scrollbar-corner, pn-modal .pn-modal-container::-webkit-scrollbar-button {\n  display: none;\n}\npn-modal .pn-modal-close-button {\n  position: absolute;\n  z-index: 10;\n  right: 0.75em;\n  top: 0.75em;\n}\npn-modal .pn-modal-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n  padding: clamp(1em, 5vw, 1.5em);\n}\npn-modal .pn-modal-header[hidden] {\n  display: none;\n}\npn-modal .pn-modal-header:not([hidden]) + .pn-modal-content:not([hidden]) {\n  padding-top: 0;\n}\npn-modal .pn-modal-label {\n  line-height: 1.5;\n  padding-right: 1.5em;\n  margin: 0;\n}\npn-modal .pn-modal-text {\n  margin: 0;\n}\npn-modal .pn-modal-content {\n  padding: clamp(1em, 5vw, 1.5em);\n}\npn-modal .pn-modal-image {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\npn-modal .pn-modal-image[hidden] {\n  display: none;\n}\npn-modal .pn-modal-picture {\n  margin: 0;\n  padding: 0;\n  display: block;\n  overflow: hidden;\n  border-radius: 1.5em 0 0 0;\n}\npn-modal .pn-modal-picture > *[slot=image] {\n  display: block;\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n}\npn-modal .pn-modal-buttons {\n  background-color: #ffffff;\n  border-top: 0.0625em solid #d3cecb;\n  padding: clamp(1em, 5vw, 1.5em);\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n  border-radius: 0 0 1.5em 1.5em;\n}\npn-modal .pn-modal-buttons > [slot=buttons]:not(pn-button) {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-modal .pn-modal-buttons > [slot=buttons]:not(pn-button) > [data-left] {\n  margin-right: auto;\n}\npn-modal .pn-modal-buttons > [data-left] {\n  margin-right: auto;\n}\npn-modal .pn-modal-buttons:empty {\n  display: none;\n}\n\n@media (max-width: 55em) {\n  pn-modal .pn-modal {\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}";const h=p;const f=class{constructor(t){n(this,t);this.modalToggle=a(this,"modalToggle",7);this.modalVisiblity=a(this,"modalVisiblity",7);this.close=a(this,"close",7);this.isClosing=false;this.isOpening=false;this.removeOverflow=false;this.label=undefined;this.helpertext=undefined;this.language=null;this.open=false;this.persistent=false;this.hideClose=false;this.allowOverflow=false;this.sheet=false;this.maxWidth=null}mo;standardAnimationDuration=400;animationDuration=this.standardAnimationDuration;modalTimeout;modalElement;modalContainer;modalPicture;get hostElement(){return t(this)}handleOpen(){if(this.open)this.openModal();else{this.closeModal();this.close.emit(true)}this.handleOverflow();clearTimeout(this.modalTimeout);this.isClosing=!this.open&&true;if(l())this.animationDuration=0;else this.animationDuration=this.standardAnimationDuration;this.modalTimeout=setTimeout((()=>{this.isClosing=false;this.modalVisiblity.emit({visible:this.open})}),this.animationDuration)}handleMaxWidth(){const n=this.maxWidth||"45em";this.modalElement.style.setProperty("--pn-modal-max-width",n)}handleOverflow(){if(this.allowOverflow)this.setOverflow()}modalToggle;modalVisiblity;close;connectedCallback(){this.mo=new MutationObserver((()=>o(this.hostElement)));this.mo.observe(this.hostElement,{childList:true,subtree:true})}disconnectedCallback(){if(this.mo)this.mo.disconnect()}async componentWillLoad(){if(this.language===null)await d(this.hostElement)}componentDidLoad(){this.handleMaxWidth();if(this.open)this.openModal()}translate(n){return c?.[n]?.[this.language||s]||n}showImage(){return!!this.modalPicture?.innerHTML}showHeader(){return!!(this.label||this.helpertext||this.hostElement.querySelector('[slot="header"]')?.textContent)}setOverflow(){this.removeOverflow=!this.hasOverflow()}hasOverflow(){const n=r()?.95:.85;return this.modalContainer?.scrollHeight>innerHeight*n}isSameModal(n){return this.modalElement.isSameNode(n)}handleKeyboard(n){if(n.key!=="Escape")return;n.preventDefault();n.stopImmediatePropagation();if(!this.persistent)this.setModalClose()}clickModalBackground(n){const{clientY:a,clientX:t}=n;const o=n.target.localName!==this.modalElement.localName;const e=!this.isSameModal(n.target);if(o||e)return;const{top:i,left:l,height:d,width:s}=this.modalElement.getBoundingClientRect();const r=i<=a&&a<=i+d&&l<=t&&t<=l+s;if(!r&&!this.persistent)this.toggleOpen(false)}setModalClose(){this.toggleOpen(false)}closeModal(){this.modalElement.close()}openModal(){this.modalElement.showModal()}toggleOpen(n){this.open=n??!this.open}render(){return e(i,{key:"d24c1b43f9eebc2d2759e4b6b15982889c559c08"},e("dialog",{key:"4111d8ae6c9eb198cb74744dce15b37ec1a4157c",class:"pn-modal","data-closing":this.isClosing,"data-sheet":this.sheet,"data-image":this.showImage(),"data-allow-overflow":this.removeOverflow,onClose:()=>this.setModalClose(),onCancel:()=>this.setModalClose(),onToggle:()=>this.modalToggle.emit({open:this.open}),onKeyDown:n=>this.handleKeyboard(n),onClick:n=>this.clickModalBackground(n),ref:n=>this.modalElement=n},!this.hideClose&&e("pn-button",{key:"9411bdbf12899d1913f5094981d08e8161277408",small:true,class:"pn-modal-close-button",icon:m,iconOnly:true,arialabel:this.translate("CLOSE_MODAL"),appearance:"light",variant:"borderless",type:"button",onPnClick:()=>this.setModalClose()}),e("div",{key:"917803e1f7847c4b4609fd121391fc33919ea5d3",class:"pn-modal-container",ref:n=>this.modalContainer=n},e("div",{key:"3241e14d8647278032ecb4274c39ab6e3615cf6b",class:"pn-modal-image",hidden:!this.showImage()},e("picture",{key:"6a830c0e51a4c1a9870dd06509a3eaa5a06ce048",class:"pn-modal-picture",ref:n=>this.modalPicture=n},e("slot",{key:"098e962a7cc8ac57309ba74951e4a8b0c0aebf08",name:"image"}))),e("header",{key:"41697c436ba9431fe4fa2ae11ca270852f7db309",class:"pn-modal-header",hidden:!this.showHeader()},this.label&&e("h2",{key:"1fcb37a181cfcb6315f2e470eef006842b1ccf53",class:"pn-modal-label"},this.label),this.helpertext&&e("p",{key:"7907955b0d34a729eb142985be24a85fcf5b0c73",class:"pn-modal-text"},this.helpertext),e("slot",{key:"c4c8d17830001c3e8df504de9006bcc3cd448549",name:"header"})),e("section",{key:"266f424be0a181433d50cb08904133c9f2aaa67e",class:"pn-modal-content"},e("slot",{key:"030bb328e6fc00a14305b4134861b38a8fc8f426"})),e("nav",{key:"05d67c40c30af133a7037c3ed57a72b5e5b9de2f",class:"pn-modal-buttons"},e("slot",{key:"a12fd530166c6d08aa1a50f0393c4ca2b22b1fc0",name:"buttons"})))))}static get watchers(){return{open:["handleOpen"],maxWidth:["handleMaxWidth"]}}};f.style=h;export{f as pn_modal};
-//# sourceMappingURL=p-75c5fb41.entry.js.map

package/umd/modules/@postnord/web-components/postnord-web-components/p-75c5fb41.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","modalContainer","modalPicture","handleOpen","open","openModal","closeModal","close","emit","handleOverflow","clearTimeout","isClosing","reduceMotion","setTimeout","modalVisiblity","visible","handleMaxWidth","width","maxWidth","style","setProperty","allowOverflow","setOverflow","modalToggle","connectedCallback","MutationObserver","forceUpdate","hostElement","observe","childList","subtree","disconnectedCallback","disconnect","componentWillLoad","language","awaitTopbar","componentDidLoad","translate","prop","showImage","innerHTML","showHeader","label","helpertext","querySelector","textContent","removeOverflow","hasOverflow","multiplyWith","isSmallScreen","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","hidden","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\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n\n  inset-block-start: 0;\n  inset-block-end: 0;\n\n  margin: auto;\n  padding: 0;\n\n  max-width: var(--pn-modal-max-width);\n\n  overflow: hidden;\n  border: 0;\n  border-radius: 1.5em;\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\n  @include main.pn-transition(\n    'opacity, overlay, display, transform, outline-color, border-radius',\n    main.$timing-layout\n  );\n  transition-behavior: allow-discrete;\n\n  &[data-allow-overflow] {\n    overflow: unset;\n    .pn-modal-container {\n      overflow: unset;\n    }\n    .pn-modal-picture {\n      border-top-right-radius: 1.5em;\n    }\n  }\n\n  &[data-image] {\n    padding-top: 0;\n  }\n\n  &[data-sheet] {\n    margin: 0 0 0 auto;\n    height: 100%;\n    max-height: unset;\n    border-radius: 1.5em 0 0 1.5em;\n    transform: translate(20%, 0%);\n    .pn-modal-container {\n      max-height: unset;\n    }\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  &-container {\n    max-height: 85vh;\n\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n\n    height: 100%;\n    overflow: hidden auto;\n    @include main.pn-scrollbar;\n  }\n\n  &-close-button {\n    position: absolute;\n    z-index: 10;\n    right: 0.75em;\n    top: 0.75em;\n  }\n\n  &-header {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5em;\n    padding: clamp(1em, 5vw, 1.5em);\n    &[hidden] {\n      display: none;\n    }\n    &:not([hidden]) + .pn-modal-content:not([hidden]) {\n      padding-top: 0;\n    }\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: clamp(1em, 5vw, 1.5em);\n  }\n\n  &-image {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    &[hidden] {\n      display: none;\n    }\n  }\n\n  &-picture {\n    margin: 0;\n    padding: 0;\n    display: block;\n    overflow: hidden;\n    border-radius: 1.5em 0 0 0;\n    > *[slot='image'] {\n      display: block;\n      height: 100%;\n      width: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &-buttons {\n    background-color: main.$white;\n    border-top: 0.0625em solid main.$gray200;\n    padding: clamp(1em, 5vw, 1.5em);\n    display: flex;\n    justify-content: flex-end;\n    gap: 0.5em;\n    border-radius: 0 0 1.5em 1.5em;\n\n    > [slot='buttons']:not(pn-button) {\n      display: flex;\n      justify-content: flex-end;\n      gap: 0.5em;\n      > [data-left] {\n        margin-right: auto;\n      }\n    }\n\n    > [data-left] {\n      margin-right: auto;\n    }\n\n    &:empty {\n      display: none;\n    }\n  }\n}\n\n@media (max-width: 55em) {\n  pn-modal .pn-modal {\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 {\n  Component,\n  Element,\n  h,\n  Host,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  State,\n  Listen,\n} from '@stencil/core';\nimport { awaitTopbar, en, isSmallScreen, 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 image - Place an image or illustration at the top of the modal.\n * @slot header - Place the title + lead text in the header.\n * @slot buttons - Place buttons inside the modal at the bottom.\n * pn-buttons aligns automatically to the right, set the data-left attribute on the button you want to align to the left.\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  private modalTimeout: NodeJS.Timeout;\n\n  private modalElement: HTMLDialogElement;\n  private modalContainer: HTMLDivElement;\n  private modalPicture: HTMLPictureElement;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() isClosing: boolean = false;\n  @State() isOpening: boolean = false;\n\n  /** If true, the modal content will remove overflow CSS property. */\n  @State() removeOverflow: 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  @Listen('resize', { target: 'window' })\n  handleOverflow() {\n    if (this.allowOverflow) this.setOverflow();\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 showImage() {\n    return !!this.modalPicture?.innerHTML;\n  }\n\n  private showHeader() {\n    return !!(this.label || this.helpertext || this.hostElement.querySelector('[slot=\"header\"]')?.textContent);\n  }\n\n  private setOverflow() {\n    this.removeOverflow = !this.hasOverflow();\n  }\n\n  private hasOverflow(): boolean {\n    const multiplyWith = isSmallScreen() ? 0.95 : 0.85;\n    return this.modalContainer?.scrollHeight > innerHeight * multiplyWith;\n  }\n\n  private isSameModal(target: HTMLElement): boolean {\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          data-image={this.showImage()}\n          data-allow-overflow={this.removeOverflow}\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          <div class=\"pn-modal-container\" ref={el => (this.modalContainer = el)}>\n            <div class=\"pn-modal-image\" hidden={!this.showImage()}>\n              <picture class=\"pn-modal-picture\" ref={el => (this.modalPicture = el)}>\n                <slot name=\"image\"></slot>\n              </picture>\n            </div>\n            <header class=\"pn-modal-header\" hidden={!this.showHeader()}>\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            <section class=\"pn-modal-content\">\n              <slot></slot>\n            </section>\n            <nav class=\"pn-modal-buttons\">\n              <slot name=\"buttons\"></slot>\n            </nav>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/umd/modules/@postnord/web-components/postnord-web-components/p-99600bc7.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icon","chevron_down"],"sources":["node_modules/pn-design-assets/pn-assets/icons/chevron_down.js"],"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.707 16.707a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const chevron_down = icon;\nexport const chevronDown = icon;\n"],"mappings":";;;;AAAA,MAAMA,EAAO,6QACD,MAACC,EAAeD,S","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["pnSelectCss","PnSelectStyle0","PnSelect","this","id","uuidv4","idHelpertext","select","mo","componentDidLoad","disconnect","MutationObserver","forceUpdate","hostElement","observe","childList","subtree","hasError","invalid","error","hasMessage","helpertext","render","h","Host","key","class","label","htmlFor","selectId","icon","alert_exclamation_circle","color","name","form","autocomplete","toString","disabled","value","ref","el","chevron_down","role"],"sources":["src/components/input/pn-select/pn-select.scss?tag=pn-select","src/components/input/pn-select/pn-select.tsx"],"sourcesContent":["@use 'src/globals/main';\n\n$border: 0.0625em;\n$radius: 0.5em;\n\n$timing: 0.3s;\n\npn-select {\n  display: inline-block;\n}\n\npn-select .pn-select {\n  &-label {\n    @include main.pn-input-label;\n  }\n\n  &-input {\n    position: relative;\n  }\n\n  &-icon {\n    pointer-events: none;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 1.5em;\n    height: 1.5em;\n    border-radius: 50%;\n    background-color: transparent;\n    &[data-default] {\n      right: 0.75em;\n    }\n    &[data-custom] {\n      left: 0.75em;\n      ~ .pn-select-element {\n        padding-left: 3em;\n      }\n    }\n    &[data-error] {\n      right: 3em;\n      ~ .pn-select-element {\n        padding-right: 5em;\n      }\n    }\n\n    > .pn-icon-svg {\n      @include main.pn-transition('transform');\n    }\n  }\n\n  &-element {\n    cursor: pointer;\n\n    @include main.pn-input-field;\n    width: 100%;\n    padding-right: 3em;\n\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n\n    &:open + pn-icon .pn-icon-svg {\n      transform: rotate(180deg);\n    }\n\n    &:disabled {\n      @include main.pn-disabled;\n    }\n\n    &[data-placeholder] {\n      @include main.pn-placeholder;\n    }\n\n    &:hover {\n      color: main.$input-color;\n      background-color: main.$input-background-hover;\n    }\n  }\n\n  &-no-results {\n    margin: 0;\n    padding: 0.75em;\n  }\n\n  &-helper {\n    @include main.pn-input-helpertext;\n    &[role='alert'] {\n      color: main.$helpertext-color-error;\n    }\n  }\n\n  &[data-error] {\n    > .pn-select-label {\n      color: main.$warning;\n    }\n    > .pn-select-input > .pn-select-element {\n      @include main.pn-input-field-error;\n      &:hover {\n        background-color: main.$input-background-error-hover;\n      }\n    }\n  }\n}\n","import { Component, h, Host, Element, Prop, forceUpdate } from '@stencil/core';\nimport { alert_exclamation_circle, chevron_down } from 'pn-design-assets/pn-assets/icons.js';\nimport { uuidv4 } from '@/index';\n\n/**\n * The `pn-select` uses a native `select` element under the hood.\n * Use the slot to include `option` elements.\n *\n * Just like a regular `select`, you can use the `selected` prop on the nested option elements to preselect an option.\n *\n * @slot - This is the default slot, where the `option` elements go.\n *\n * @nativeChange Use the `change` event to listen to changes on the select element.\n */\n@Component({\n  tag: 'pn-select',\n  styleUrl: 'pn-select.scss',\n})\nexport class PnSelect {\n  id: string = `pn-select-${uuidv4()}`;\n  idHelpertext: string = `${this.id}-text`;\n\n  select: HTMLSelectElement;\n\n  mo: MutationObserver;\n\n  @Element() hostElement: HTMLElement;\n\n  /** Label placed above the select. */\n  @Prop() label!: string;\n  /** Display a helper text underneath the select. */\n  @Prop() helpertext?: string;\n  /** Select HTML id */\n  @Prop() selectId: string = this.id;\n  /** Display an icon to the left of the select input. */\n  @Prop() icon?: string;\n\n  /** HTML select name. @category HTML */\n  @Prop() name: string;\n  /** HTML form name. @category HTML */\n  @Prop() form: string;\n  /** HTML autocomplete. @category HTML */\n  @Prop() autocomplete: string;\n  /**\n   * Set the select as required.\n   * @category Validation\n   */\n  @Prop() required?: boolean = false;\n  /**\n   * Disable the select.\n   * @category Validation\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Trigger the invalid state.\n   * @category Validation\n   */\n  @Prop() invalid?: boolean = false;\n  /**\n   * Display an error message and trigger the invalid state.\n   * @category Validation\n   */\n  @Prop() error?: string;\n\n  componentDidLoad() {\n    if (this.mo) this.mo.disconnect();\n\n    this.mo = new MutationObserver(() => forceUpdate(this.hostElement));\n\n    this.mo.observe(this.hostElement, { childList: true, subtree: true });\n  }\n\n  hasError() {\n    return this.invalid || !!this.error;\n  }\n\n  hasMessage() {\n    return !!this.helpertext || !!this.error;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-select\" data-error={this.hasError()}>\n          {this.label && (\n            <label htmlFor={this.selectId} class=\"pn-select-label\">\n              <span>{this.label}</span>\n            </label>\n          )}\n          <div class=\"pn-select-input\">\n            {this.icon && <pn-icon class=\"pn-select-icon\" icon={this.icon} data-custom aria-hidden=\"true\" />}\n\n            {this.hasError() && (\n              <pn-icon\n                class=\"pn-select-icon\"\n                icon={alert_exclamation_circle}\n                color=\"warning\"\n                data-error\n                aria-hidden=\"true\"\n              />\n            )}\n\n            <select\n              id={this.selectId}\n              class=\"pn-select-element\"\n              name={this.name}\n              form={this.form}\n              autocomplete={this.autocomplete}\n              aria-describedby={this.hasMessage() && this.idHelpertext}\n              aria-invalid={this.hasError().toString()}\n              disabled={this.disabled}\n              data-placeholder={this.select?.value === ''}\n              ref={el => (this.select = el)}\n            >\n              <slot />\n            </select>\n\n            <pn-icon class=\"pn-select-icon\" icon={chevron_down} color=\"blue700\" data-default aria-hidden=\"true\" />\n          </div>\n\n          {this.hasMessage() && (\n            <p id={this.idHelpertext} class=\"pn-select-helper\" role={!!this.error ? 'alert' : null}>\n              <span>{this.error || this.helpertext}</span>\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;4KAAA,MAAMA,EAAc,0nHACpB,MAAAC,EAAeD,E,MCiBFE,EAAQ,M,sFAeQC,KAAKC,G,sGAcH,M,cAKA,M,aAKD,M,qBAtC5BA,GAAa,aAAaC,MAC1BC,aAAuB,GAAGH,KAAKC,UAE/BG,OAEAC,G,iCAwCA,gBAAAC,GACE,GAAIN,KAAKK,GAAIL,KAAKK,GAAGE,aAErBP,KAAKK,GAAK,IAAIG,kBAAiB,IAAMC,EAAYT,KAAKU,eAEtDV,KAAKK,GAAGM,QAAQX,KAAKU,YAAa,CAAEE,UAAW,KAAMC,QAAS,M,CAGhE,QAAAC,GACE,OAAOd,KAAKe,WAAaf,KAAKgB,K,CAGhC,UAAAC,GACE,QAASjB,KAAKkB,cAAgBlB,KAAKgB,K,CAGrC,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,YAAW,aAAavB,KAAKc,YACrCd,KAAKwB,OACJJ,EAAA,SAAAE,IAAA,2CAAOG,QAASzB,KAAK0B,SAAUH,MAAM,mBACnCH,EAAA,QAAAE,IAAA,4CAAOtB,KAAKwB,QAGhBJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACRvB,KAAK2B,MAAQP,EAAA,WAAAE,IAAA,2CAASC,MAAM,iBAAiBI,KAAM3B,KAAK2B,KAAI,iCAA0B,SAEtF3B,KAAKc,YACJM,EAAA,WAAAE,IAAA,2CACEC,MAAM,iBACNI,KAAMC,EACNC,MAAM,UAAS,gCAEH,SAIhBT,EAAA,UAAAE,IAAA,2CACErB,GAAID,KAAK0B,SACTH,MAAM,oBACNO,KAAM9B,KAAK8B,KACXC,KAAM/B,KAAK+B,KACXC,aAAchC,KAAKgC,aAAY,mBACbhC,KAAKiB,cAAgBjB,KAAKG,aAAY,eAC1CH,KAAKc,WAAWmB,WAC9BC,SAAUlC,KAAKkC,SAAQ,mBACLlC,KAAKI,QAAQ+B,QAAU,GACzCC,IAAKC,GAAOrC,KAAKI,OAASiC,GAE1BjB,EAAA,QAAAE,IAAA,8CAGFF,EAAA,WAAAE,IAAA,2CAASC,MAAM,iBAAiBI,KAAMW,EAAcT,MAAM,UAAS,kCAA0B,UAG9F7B,KAAKiB,cACJG,EAAA,KAAAE,IAAA,2CAAGrB,GAAID,KAAKG,aAAcoB,MAAM,mBAAmBgB,OAAQvC,KAAKgB,MAAQ,QAAU,MAChFI,EAAA,QAAAE,IAAA,4CAAOtB,KAAKgB,OAAShB,KAAKkB,c","ignoreList":[]}

package/umd/modules/@postnord/web-components/postnord-web-components/p-b83e6373.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,h as o,k as d,r as c,e as u}from"./p-f64d17a6.js";import{a as h}from"./p-2e6481e5.js";import{a as p}from"./p-d82ef4a1.js";const l='<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 f=l;const m='<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 k=m;const b={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 _=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var g={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(_,(function(){var t=1e3,e=6e4,n=36e5,i="millisecond",r="second",a="minute",s="hour",o="day",d="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:d,d:o,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 o=e.name;y[o]=e,r=o}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(o)},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 d:var g=this.$locale().weekStart||0,y=(m<g?m+7:m)-g;return l(i?b-y:b+(6-y),k);case o: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,d=D.p(t),u="set"+(this.$u?"UTC":""),l=(n={},n[o]=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)[d],f=d===o?this.$D+(e-this.$W):e;if(d===c||d===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===o)return m(1);if(f===d)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,o=this.$M,d=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 o+1;case"MM":return D.s(o+1,2,"0");case"MMM":return h(n.monthsShort,o,c,3);case"MMMM":return h(c,o);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,d,2);case"ddd":return h(n.weekdaysShort,e.$W,d,3);case"dddd":return d[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 d:f=(g-_)/6048e5;break;case o: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",o],["$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}))})(g);const y=g.exports;var v={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(_,(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 o=r(this).startOf(e).date(i).startOf(t).subtract(1,"millisecond"),d=this.diff(o,t,!0);return d<0?r(this).startOf("week").week():Math.ceil(d)},a.weeks=function(t){return void 0===t&&(t=null),this.week(t)}}}))})(v);const w=v.exports;var M={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(_,(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={},o=function(t){return(t=+t)+(t>68?1900:2e3)};var d=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,d("seconds")],ss:[r,d("seconds")],m:[r,d("minutes")],mm:[r,d("minutes")],H:[r,d("hours")],h:[r,d("hours")],HH:[r,d("hours")],hh:[r,d("hours")],D:[r,d("day")],DD:[i,d("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,d("week")],ww:[i,d("week")],M:[r,d("month")],MM:[i,d("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+/,d("year")],YY:[i,function(t){this.year=o(t)}],YYYY:[/\d{4}/,d("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),o=a.length,d=0;d<o;d+=1){var c=a[d],u=p[c],h=u&&u[0],l=u&&u[1];a[d]=l?{regex:h,parser:l}:c.replace(/^\[|\]$/g,"")}return function(t){for(var e={},n=0,i=0;n<o;n+=1){var r=a[n];if("string"==typeof r)i+=r.length;else{var s=r.regex,d=r.parser,c=t.slice(i),u=s.exec(c)[0];d.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&&(o=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 o=a[1];if("string"==typeof o){var d=!0===a[2],c=!0===a[3],u=d||c,h=a[2];c&&(h=a[2]),s=this.$locale(),!d&&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,o=r.day,d=r.hours,c=r.minutes,u=r.seconds,h=r.milliseconds,p=r.zone,f=r.week,m=new Date,k=o||(a||s?1:m.getDate()),b=a||m.getFullYear(),_=0;a&&!s||(_=s>0?s-1:m.getMonth());var g,y=d||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,o,i,n),this.init(),h&&!0!==h&&(this.$L=this.locale(h).$L),u&&e!=this.format(o)&&(this.$d=new Date("")),s={}}else if(o instanceof Array)for(var p=o.length,f=1;f<=p;f+=1){a[1]=o[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)}}}))})(M);const Y=M.exports;var D={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(_,(function(){return function(t,e){e.prototype.isSameOrBefore=function(t,e){return this.isSame(t,e)||this.isBefore(t,e)}}}))})(D);const x=D.exports;var L={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(_,(function(){return function(t,e){e.prototype.isSameOrAfter=function(t,e){return this.isSame(t,e)||this.isAfter(t,e)}}}))})(L);const S=L.exports;var E={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(_,(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}}}}))})(E);const H=E.exports;var T={exports:{}};(function(t,e){!function(e,n){t.exports=n(g.exports)}(_,(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}))})(T);var A={exports:{}};(function(t,e){!function(e,n){t.exports=n()}(_,(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])+"]"}}}))})(A);var $={exports:{}};(function(t,e){!function(e,n){t.exports=n(g.exports)}(_,(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}))})($);var V={exports:{}};(function(t,e){!function(e,n){t.exports=n(g.exports)}(_,(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,o=s[n];return t<10?o.replace("%d",s.numbers[t]):o.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}))})(V);var j={exports:{}};(function(t,e){!function(e,n){t.exports=n(g.exports)}(_,(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}))})(j);y.extend(w);y.extend(Y);y.extend(x);y.extend(S);y.extend(H);const C="calendar";const N="months";const z="years";function R(){return y()}function F({year:t,month:e,date:n}){return y().set("year",t).set("month",e).set("date",n)}function I(t,e){if(!t)return false;const n=typeof t==="string"?t:F(t);return y(n,e,true).isValid()}function O(t,e){const n=typeof t==="string"?t:F(t);return y(n,e)}function P(t,e,n){const i=G(t);return i.locale(e==="no"?"nb":e).format(n)}function G({year:t,month:e,date:n,day:i}){const r=y().set("y",t).set("M",e).set("D",n);if(typeof i==="number")return r.set("d",i);return r}function K(t,e){const n=typeof t==="string"?O(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 U(t,e,n){const i=O(t,n);const r=O(e,n);return r.diff(i,"d")}function Z(t,e,n,i){const r=O(t,n);const a=O(e,n);return r.isSameOrBefore(a,i)}function B(t,e,n,i){const r=O(t,n);const a=O(e,n);return r.isSameOrAfter(a,i)}function W(t,e,n,i){if(!I(t,n)||!I(e,n))return false;let r=O(t,n);let a=O(e,n);if(i==="month"){r=r.set("year",2e3);a=a.set("year",2e3)}return r.isSame(a,i)}function q({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 J({year:t,minus:e=false,plus:n=false}){const i=y().set("year",t);return q({data:i,unit:"y",plus:n,minus:e}).year()}function X({month:t,minus:e=false,plus:n=false}){const i=y().set("month",t);return q({data:i,unit:"M",plus:n,minus:e}).month()}function Q(t,e,n,i){if(i==="date")return tt(t,e,n);return et(t,e,i)}function tt(t,e,n){const i=F(e);const{space:r,enter:a,next:s,down:o,previous:d,upwards:c,pageDown:u,pageUp:h,end:p,home:l}=it(t);if(r||a)return i;if(s||o)return i.add(s?1:7,"day");if(d||c)return i.subtract(d?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 et(t,e,n){const i=F(e);const r=t.match(/^(Enter|Space)$/);if(r)return i;const a=t==="ArrowRight";const s=t==="ArrowLeft";const o=t==="ArrowDown";const d=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||o)return i.set(n,p+c).set(l,e[l]);if(s||d)return i.set(n,p-c).set(l,e[l]);return i}function nt(t,e){const n=[];const i=[];const r=y().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 it(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 o=t==="PageDown";const d=t==="PageUp";const c=t==="End";const u=t==="Home";return{enter:e,space:n,next:i,previous:r,down:a,upwards:s,pageDown:o,pageUp:d,end:c,home:u}}const rt='/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-date-picker {\n  position: relative;\n  display: block;\n}\n\npn-date-picker .pn-date-picker {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25em;\n  container-type: inline-size;\n  /** The calendar dropdown */\n  /* Month list */\n}\n@container (max-width: 24em) {\n  pn-date-picker .pn-date-picker .pn-date-picker-container {\n    flex: 1 1 20em;\n  }\n  pn-date-picker .pn-date-picker .pn-date-picker-range-icon {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-container {\n  display: block;\n  flex: 1 1 11em;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-label {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input {\n  border-color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:hover {\n  border-color: #500715;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:focus-visible {\n  background-color: #ffffff;\n  border-color: #a70707;\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-label {\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  font-weight: 400;\n  color: #2d2013;\n  margin: 0 0 0.25em 0;\n  gap: 0.5em;\n  -webkit-tap-highlight-color: transparent;\n  transition-property: color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-label {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-label > span {\n  font-size: 0.875em;\n}\npn-date-picker .pn-date-picker-field {\n  position: relative;\n  display: flex;\n}\npn-date-picker .pn-date-picker-input {\n  color: #2d2013;\n  background-color: #ffffff;\n  border: 0.0625em solid #969087;\n  border-radius: 0.5em;\n  padding: 0.75em;\n  font-family: inherit;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5em;\n  -webkit-font-smoothing: antialiased;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n  transition-property: outline-color, background-color, border-color, color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  padding-right: 3em;\n  flex: auto;\n  width: 100%;\n}\npn-date-picker .pn-date-picker-input:-webkit-autofill, pn-date-picker .pn-date-picker-input:-webkit-autofill:hover, pn-date-picker .pn-date-picker-input:-webkit-autofill:focus, pn-date-picker .pn-date-picker-input:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 10em #e0f8ff inset;\n  -webkit-text-fill-color: #2d2013;\n}\npn-date-picker .pn-date-picker-input:focus-visible {\n  outline-color: #005d92;\n  background-color: #ffffff;\n  border-color: #005d92;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-input {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-input::placeholder {\n  color: #5e554a;\n  font-weight: normal;\n}\npn-date-picker .pn-date-picker-input:hover {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:disabled {\n  color: #5e554a;\n  background-color: #f3f2f2;\n  border-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-input::-webkit-calendar-picker-indicator {\n  visibility: hidden;\n  inline-size: 0;\n}\npn-date-picker .pn-date-picker-input::-webkit-textfield-decoration-container, pn-date-picker .pn-date-picker-input::-webkit-search-cancel-button, pn-date-picker .pn-date-picker-input::-webkit-inner-spin-button, pn-date-picker .pn-date-picker-input::-webkit-outer-spin-button, pn-date-picker .pn-date-picker-input::-webkit-search-decoration {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\npn-date-picker .pn-date-picker-input[data-active] {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:read-only {\n  border-color: #ffffff;\n}\npn-date-picker .pn-date-picker-range-icon {\n  width: 1.5em;\n  margin-bottom: 0.8125em;\n  align-self: end;\n}\npn-date-picker .pn-date-picker-helpertext, pn-date-picker .pn-date-picker-error {\n  color: #5e554a;\n  font-size: 0.875em;\n  font-weight: 400;\n  margin: 0.25em 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25em;\n  text-align: left;\n}\npn-date-picker .pn-date-picker-helpertext[hidden], pn-date-picker .pn-date-picker-error[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-error {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-toggle {\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-button {\n  cursor: pointer;\n  font-size: 1em;\n  background-color: transparent;\n  border: 0.0625em solid #969087;\n  border-color: transparent;\n  padding: 0.25em;\n  margin: 0;\n  flex: auto;\n  border-radius: 3em;\n  transition-property: outline-color, background-color, border-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\npn-date-picker .pn-date-picker-button:first-child, pn-date-picker .pn-date-picker-button:last-child {\n  flex: 0 0 auto;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-button {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-button:focus {\n  background-color: #ffffff;\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:hover {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-button[data-active], pn-date-picker .pn-date-picker-button[data-range] {\n  background-color: #e0f8ff;\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:disabled {\n  cursor: not-allowed;\n}\npn-date-picker .pn-date-picker-button:disabled:hover {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-month {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-month[data-full] {\n  display: none;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-full] {\n    display: inline;\n  }\n}\npn-date-picker .pn-date-picker-month[data-abbr] {\n  display: inline;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-abbr] {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-sr-only {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  margin: -1px;\n  white-space: nowrap;\n}\npn-date-picker .pn-date-picker-calendar {\n  position: absolute;\n  z-index: 4;\n  top: calc(100% + 0.5em);\n  left: var(--pn-calendar-offset-left);\n  width: clamp(100%, 95vw, 20em);\n  max-width: 20em;\n  text-align: center;\n  border-radius: 0.5em;\n  background-color: #ffffff;\n  overflow: hidden;\n  visibility: hidden;\n  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);\n}\npn-date-picker .pn-date-picker-calendar[data-range] {\n  max-width: unset;\n}\npn-date-picker .pn-date-picker-calendar[data-open], pn-date-picker .pn-date-picker-calendar[data-moving] {\n  visibility: visible;\n}\npn-date-picker .pn-date-picker-calendar[data-direction=top] {\n  top: unset;\n  bottom: calc(100% + 0.5em);\n  transform-origin: bottom left;\n}\npn-date-picker .pn-date-picker-calendar pn-button[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-calendar pn-button span {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-wrapper {\n  padding: 0.5em;\n}\npn-date-picker .pn-date-picker-title {\n  margin: 0.5em auto 0;\n  font-size: 0.875em;\n  font-weight: 500;\n  color: #2d2013;\n}\npn-date-picker .pn-date-picker-nav {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 1em;\n}\npn-date-picker .pn-date-picker-table {\n  width: 100%;\n  table-layout: fixed;\n  border-spacing: 0;\n  border: 0;\n  margin: 0 0 0.5em;\n}\npn-date-picker .pn-date-picker-th {\n  font-size: 0.75em;\n  font-weight: 500;\n  color: #5e554a;\n  padding: 0.25em;\n  border: 0;\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-td {\n  cursor: pointer;\n  position: relative;\n  padding: 0.25em;\n  outline: 0;\n  border: 0;\n  line-height: 0;\n  width: 2em;\n  height: 2em;\n  -webkit-tap-highlight-color: transparent;\n}\npn-date-picker .pn-date-picker-td-text {\n  position: relative;\n  display: block;\n  line-height: 1.5em;\n  border-radius: 0.5em;\n  color: #2d2013;\n  padding: 0.25em;\n  transition-property: color, background-color, outline-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td-text {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[data-blank] {\n  cursor: auto;\n}\npn-date-picker .pn-date-picker-td[data-blank] .pn-date-picker-td-text {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-td-week {\n  font-size: 0.75em;\n  color: #5e554a;\n  display: block;\n}\npn-date-picker .pn-date-picker-td:before {\n  content: "";\n  position: absolute;\n  left: 0;\n  top: 0.25em;\n  height: calc(100% - 0.5em);\n  width: 100%;\n  background-color: transparent;\n  border: 0.0625em solid transparent;\n  border-radius: 0.5em;\n  transition-property: border-color, background-color, width, transform, left;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td:before {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] {\n  cursor: not-allowed;\n  pointer-events: none;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] > .pn-date-picker-td-text {\n  color: #5e554a;\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:hover > .pn-date-picker-td-text, pn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true] .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true]:before {\n  border-color: #005d92;\n  background-color: #effbff;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-single]:before {\n  width: 2em;\n  left: 50%;\n  transform: translateX(-50%);\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range]:before {\n  border-radius: 0;\n  border-left-width: 0;\n  border-right-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-from]:before {\n  border-radius: 0.5em 0 0 0.5em;\n  border-right-width: 0;\n  border-left-width: 0.0625em;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-to]:before {\n  border-radius: 0 0.5em 0.5em 0;\n  border-right-width: 0.0625em;\n  border-left-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:before {\n  border-color: #a70707;\n  background-color: #fdefee;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true] > .pn-date-picker-td-text {\n  background-color: unset;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=false]:hover > .pn-date-picker-td-text {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text::after {\n  content: "";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text:after {\n  bottom: 0.15em;\n}\npn-date-picker .pn-date-picker-td[data-active][data-today] > .pn-date-picker-td-text:after {\n  background-color: #005d92;\n}\npn-date-picker .pn-date-picker-td:focus-visible > .pn-date-picker-td-text {\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-list {\n  margin: 0 0 1em;\n  padding: 0;\n  list-style: none;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 0.5em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button {\n  display: block;\n  width: 100%;\n  border-radius: 0.5em;\n  padding: 0.5em 0.25em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today] {\n  position: relative;\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today]::after {\n  content: "";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips] {\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  gap: 0.5em;\n  margin-bottom: 0.5em;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips]:empty {\n  display: none;\n}\npn-date-picker .pn-date-picker-bottom {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-date-picker .pn-date-picker-bottom[hidden] {\n  display: none;\n}';const at=rt;const st=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=C;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=R();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(!I(this.minDate,this.format))this.minDate=null}watchMax(){if(this.maxDate===null)return;if(!I(this.maxDate,this.format))this.maxDate=null}watchValue(){if(!I(this.start,this.format))return this.dateInvalid.emit({start:this.start});const{year:t,month:e,date:n}=K(this.start,this.format);this.setViewYear({year:t});this.setViewMonth({month:e});this.setViewDate({date:n});if(this.range&&B(this.start,this.end,this.format,"date")){this.end=""}this.emitSelection()}watchValueTo(){if(!this.range)return;if(!I(this.end,this.format))return this.dateInvalid.emit({end:this.end});const t=O(this.end,this.format);this.setViewYear({year:t.year()});this.setViewMonth({month:t.month()});this.setViewDate({date:t.date()});if(B(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(I(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 c=a>e;const u=d>e;const h=this.openUp&&(c||a>d)||!u&&c;this.openUp=h;const p=this.getRect(this.calendarElement);const l=o();const f=t.x+t.width/2;const m=p.width/2;const k=f-m-p.x;const b=p.x+k;const _=b+p.width;const g=l+16;let y=k;if(b<g){y=g-p.x}else if(_>i-16){y=i-16-p.width-p.x}this.calendarElement.style.setProperty("--pn-calendar-offset-left",`${Math.floor(y)}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=U(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=I(this.start||this.end,this.format);const e=t&&K(this.start||this.end,this.format);const{year:n,month:i,date:r}=K(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(c())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 b?.[t?.toUpperCase()]?.[this.language||u]||t?.toUpperCase()}translateDateText(t,e){return P({...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===C}viewingMonth(){return this.view===N}viewingYears(){return this.view===z}viewType(){return this.viewingCalendar()?"date":this.viewingMonth()?"month":"year"}isBeforeMax(t){if(this.maxDate)return Z(t,this.maxDate,this.format,this.viewType());return true}isAfterMin(t){if(this.minDate)return B(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=>W(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=nt(this.dateViewYear,this.dateViewMonth)}getCurrentViewDate(t=this.getCurrentDateObject()){return P(t,this.language,"MMMM YYYY")}isSelected(t,e=false){const n=e?this.end:this.start;return W(n,this.getCurrentDateObject(t),this.format,this.viewType())}isToday(t){return W(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:o,date:d}=a;this.setViewYear({year:s});this.setViewMonth({month:o,grid:true});this.setViewDate({date:d});this.resetFocus()}navDirection(t,e){const{code:n}=t;const i=Q(n,e,this.disableWeekends,this.viewType());const r=K(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=J({year:t,minus:e,plus:n});const s=this.viewYearStart;const o=s+7;const d=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>o||d>a)this.viewYearStart=a;if(i)this.setView(C)}setViewMonth({month:t=this.dateViewMonth,minus:e=false,plus:n=false,reset:i=false,grid:r=false}){const a=X({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(C)}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=P(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 o=a!=="date"?"disabled":"aria-disabled";const d=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&&B(n,this.start,this.format,this.viewType());const l=this.range&&Z(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",[d]:(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,[o]:m?"true":null};const _=W(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 o=t?this.listEnd:this.list;const d=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 l=!(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:o,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":d}),l&&i("pn-button",{class:"pn-date-picker-toggle",buttonId:n,icon:f,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:"683125ae4363ce235cc3aec68a1d4003593425d1"},i("div",{key:"cf4cf8baae7d387533013fe59722bb4401431dbd",class:"pn-date-picker"},this.renderInput(),this.range&&i("div",{key:"fae36c22bd631fde3313c2240cd33e6f871ff405",class:"pn-date-picker-range-icon test"},i("pn-icon",{key:"d0f18d8a7ff81248471b27975eb24242fc8b5157",icon:p})),this.range&&this.renderInput({to:this.range})),i("div",{key:"6f4f250edc36dd15d4a5a330bf5d8c5125289a09",id:this.idCalendar,class:"pn-date-picker-calendar",role:"dialog","aria-label":this.translate("CALENDAR_NAVIGATION"),"data-open":this.open,"data-moving":this.isClosing||this.isExpanding,"data-direction":this.openUp?"top":"bottom","data-range":this.range,style:{height:"0px"},ref:t=>this.calendarElement=t,onKeyDown:t=>this.handleCalendarTabEsc(t)},i("div",{key:"a8821cca04a6301bd148c3dbfee28bf86c94e543",class:"pn-date-picker-wrapper"},i("nav",{key:"38f404ea6187d754ac44160bcda2291e0739610d",class:"pn-date-picker-nav","aria-labelledby":this.idCalendar},i("pn-button",{key:"923845f5df9f35ff74ffeb2ed63c903696a4399d",hidden:this.viewingMonth(),small:true,appearance:"light",arialabel:this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`),icon:h,iconOnly:true,onPnClick:()=>this.setNavView({minus:true})}),i("pn-button",{key:"32e6f337bc1b82adcf11b2668974c0c4b9f2c730",hidden:!this.viewingCalendar(),small:true,appearance:"light",onPnClick:()=>this.setView(N)},i("span",{key:"e1bcc4e89726d5c25e94d87b283b543987674f2d",class:"pn-date-picker-month","data-full":true},this.translateDateText({date:1},"MMMM")),i("span",{key:"b93becc6c92ef4693f158e08276aa21e496d10c3",class:"pn-date-picker-month","data-abbr":true},this.translateDateText({date:1},"MMM"))),i("h2",{key:"1aa3fc4c553858c947205610a4958fc153f63527",hidden:this.viewingCalendar(),class:"pn-date-picker-title"},this.translate(`SELECT_${this.viewType().toUpperCase()}`)),i("pn-button",{key:"16fdeb8efb9744d9fb5db3b41eea172ad9b49c32",hidden:!this.viewingCalendar(),small:true,appearance:"light",onPnClick:()=>this.setView(z)},i("span",{key:"491246d413dd42fe794d155720f847d9339bf81f"},this.dateViewYear)),i("pn-button",{key:"8a2acfd530f049d13972125dd6e6fc8120020b18",hidden:this.viewingMonth(),small:true,appearance:"light",arialabel:this.translate(`NEXT_${this.viewType().toUpperCase()}`),icon:p,iconOnly:true,onPnClick:()=>this.setNavView({plus:true})})),this.viewingYears()&&this.renderYearGrid(),this.viewingMonth()&&this.renderMonthGrid(),this.viewingCalendar()&&this.renderDateGrid(),i("aside",{key:"7905780579fdbea9ff9bc03c05208c6714a1b690",class:"pn-date-picker-chips"},i("slot",{key:"3aacde33dde852b97b75327c378248395bf74b03",name:"chips"})),i("nav",{key:"37bf1f4447f480986bf905375149d40d42318374",class:"pn-date-picker-bottom",hidden:this.viewingCalendar()},i("pn-button",{key:"0ba2954cf4f994e5befcf0546e45333b1a0030c2",appearance:"light",variant:"outlined",small:true,icon:k,onPnClick:()=>this.setView(C)},i("span",{key:"f6af5dbb4dff963d6b07147f1573f22797abd4e4"},this.translate("GO_CALENDAR")))))),i("p",{key:"4ceaeea86eeeb3e6cafa2b09343ee1b3ff7fada8",id:this.idHelper,class:"pn-date-picker-helpertext",hidden:!this.hasHelperText()||this.hasError()},i("span",{key:"b40445ded778af04b0313e84645226fe59e0bc9a"},this.helpertext),i("slot",{key:"0cf4aee251e8aaf33618c9f318451069b6bfe22f",name:"helpertext"})),i("p",{key:"dbcc74e7fdea8f7b1053226448cbc419ebaf9498",id:this.idError,class:"pn-date-picker-error",role:"alert",hidden:!this.hasErrorMessage()},i("span",{key:"9cc3055b8389abadd3f7d2303cc755b71cc238b3"},this.error),i("slot",{key:"4c1eef7f48dba08b33f05b836f55abcc39b5abe3",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"]}}};st.style=at;export{st as pn_date_picker};
-//# sourceMappingURL=p-b83e6373.entry.js.map