@postnord/pn-marketweb-components 4.1.0 → 4.1.2

package/umd/modules/@postnord/web-components/components/pn-progress-bar2.js.map

@@ -1 +0,0 @@
-{"file":"pn-progress-bar2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/feedback/pn-progress-bar/pn-progress-bar.scss?tag=pn-progress-bar","src/components/feedback/pn-progress-bar/pn-progress-bar.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-progress-bar .pn-progress-bar {\n  &-label {\n    margin-bottom: 0.5em;\n    color: main.$gray900;\n    font-weight: 500;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 0.5em;\n  }\n\n  &-subtext {\n    margin-top: 0.5em;\n    color: main.$gray700;\n    font-weight: 400;\n  }\n\n  &-container {\n    overflow: hidden;\n    padding: 0.0625em;\n    height: 0.75em;\n    border-radius: 0.5em;\n  }\n\n  &-meter {\n    position: relative;\n    width: 100%;\n    background: main.$gray50;\n    height: 0.625em;\n    border-radius: 0.5em;\n    box-shadow: (0 0 0 0.0625em main.$gray400);\n  }\n\n  &-value {\n    position: absolute;\n    top: -0.0625em;\n    left: -0.0625em;\n\n    height: 0.75em;\n    background-color: main.$blue700;\n    width: var(--progress-value);\n    border-radius: 0.5em 0 0 0.5em;\n\n    transition-property: width, border-radius, background-color;\n    transition-duration: 0.2s, 0.2s, 0.5s;\n    transition-timing-function: linear;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n\n    &[data-valid] {\n      width: calc(var(--progress-value) + 0.125em);\n      background-color: main.$green500;\n      border-top-right-radius: 0.5em;\n      border-bottom-right-radius: 0.5em;\n    }\n    &[data-error] {\n      background-color: main.$warning;\n    }\n  }\n}\n","import { Component, Element, Prop, h, Host, Watch, State } from '@stencil/core';\nimport { alert_exclamation_circle, check_circle } from 'pn-design-assets/pn-assets/icons.js';\nimport { uuidv4 } from '@/globals/helpers';\n\n@Component({\n  tag: 'pn-progress-bar',\n  styleUrl: 'pn-progress-bar.scss',\n})\nexport class PnProgressBar {\n  uniqueId: string = uuidv4();\n\n  idProgress: string = `pn-progress-bar-${this.uniqueId}`;\n  idLabel: string = `${this.idProgress}-label`;\n  idText: string = `${this.idProgress}-text`;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() progressPercentage: string;\n\n  /** Set a label for the progress bar */\n  @Prop() label?: string;\n  /** Progress value, 0-100 */\n  @Prop() progress: number = 0;\n  /** Replaces the default progress percentage text */\n  @Prop() progressText?: string;\n  /** Text shown on success (100%)  */\n  @Prop() successText?: string;\n  /** Trigger an error and display a message */\n  @Prop() error?: string;\n  /** A unique HTML id fror the progress bar */\n  @Prop() progressId: string = this.idProgress;\n\n  @Watch('progress')\n  setProgress(): void {\n    if (!Number.isInteger(this.progress)) return;\n\n    const progressWidth = this.progress < 100 ? Math.ceil(this.progress) : 100;\n\n    this.progressPercentage = `${progressWidth.toString()}%`;\n\n    this.hostElement.style.setProperty('--progress-value', this.progressPercentage);\n  }\n\n  componentWillLoad() {\n    this.setProgress();\n  }\n\n  hasLabel(): boolean {\n    return !!this.label?.length;\n  }\n\n  hasText(): boolean {\n    return !!this.successText?.length;\n  }\n\n  hasError(): boolean {\n    return !!this.error?.length;\n  }\n\n  isValid(): boolean {\n    return this.progress === 100;\n  }\n\n  hasIcon(): boolean {\n    return this.isValid() || this.hasError();\n  }\n\n  getSubtext() {\n    if (this.hasError()) return this.error;\n    if (this.isValid() && this.hasText()) return this.successText;\n\n    return this.progressText ? this.progressText : this.progressPercentage;\n  }\n\n  getIconSvg() {\n    if (this.hasError()) return alert_exclamation_circle;\n    return check_circle;\n  }\n\n  getIconColor() {\n    if (this.hasError()) return 'warning';\n    return 'green500';\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.hasLabel() && (\n          <p id={this.idLabel} class=\"pn-progress-bar-label\">\n            <span>{this.label}</span>\n            {this.hasIcon() && <pn-icon icon={this.getIconSvg()} color={this.getIconColor()}></pn-icon>}\n          </p>\n        )}\n        <div\n          id={this.progressId}\n          class=\"pn-progress-bar-container\"\n          role=\"progressbar\"\n          aria-labelledby={this.idLabel}\n          aria-describedby={this.hasIcon() ? this.idText : null}\n          aria-valuenow={this.progress}\n          aria-valuetext={this.progressPercentage}\n        >\n          <div class=\"pn-progress-bar-meter\">\n            <div class=\"pn-progress-bar-value\" data-error={this.hasError()} data-valid={this.isValid()}></div>\n          </div>\n        </div>\n        <p id={this.idText} class=\"pn-progress-bar-subtext\" role={this.hasError() ? 'alert' : null}>\n          <span>{this.getSubtext()}</span>\n        </p>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/umd/modules/@postnord/web-components/components/pn-progress-indicator-step.js.map

@@ -1 +0,0 @@
-{"file":"pn-progress-indicator-step.js","mappings":";;;;;;;AAAA,MAAM,0BAA0B,GAAG,k2FAAk2F;;MCWx3FA,yBAAuB,iBAAAC,kBAAA,CAAA,MAAA,uBAAA,SAAA,WAAA,CAAA;;;;;;;;AACzB,IAAA,SAAS;AACT,IAAA,IAAI;;AAGL,IAAA,UAAU;;AAEV,IAAA,KAAK;;AAEL,IAAA,IAAI;;IAEJ,OAAO,GAAY,KAAK;;AAExB,IAAA,MAAM;AAEL,IAAA,aAAa;IACtB,oBAAoB,GAAA;QAClB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;;IAIvC,iBAAiB,GAAA;QACf,IAAI,CAAC,WAAW,EAAE;;IAGpB,kBAAkB,GAAA;QAChB,IAAI,CAAC,WAAW,EAAE;;IAGpB,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK;;AAG1D,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;AACzB,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;AAChB,aAAA,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;AAC/B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;AACZ,aAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK;;;IAIlD,aAAa,GAAA;QACX,IAAI,SAAS,GAAG,4BAA4B;AAC5C,QAAA,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO;YAAE,SAAS,IAAI,OAAO;QACnD,IAAI,IAAI,CAAC,SAAS;YAAE,SAAS,IAAI,YAAY;AAC7C,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK;YAAE,SAAS,IAAI,SAAS;AAC1D,QAAA,OAAO,SAAS;;IAGlB,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,EAAA,EAC3E,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAG,CAAA,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,IAAI,CAAC,IAAI,CACN,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAA,EAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,IACxB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,4BAA4B,EAAA,mBAAA,EAChB,eAAe,EACjC,EAAE,EAAC,WAAW,EACd,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,WAAW,EAAA,EAEnB,CAAA,CAAA,UAAA,EAAA,EACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,gBAAgB,EACvB,MAAM,EAAE,KAAK,EACK,mBAAA,EAAA,IAAI,EACT,cAAA,EAAA,GAAG,EAChB,CAAA,CACE,KAEN,EAAE,CACH,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnProgressIndicatorStep","__stencil_proxyCustomElement"],"sources":["src/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.scss?tag=pn-progress-indicator-step","src/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-progress-indicator-step {\n  display: flex;\n  flex: 1 0 4em;\n\n  &:first-child {\n    flex: 0 0 auto;\n\n    .progress-line {\n      display: none;\n    }\n\n    .info-container {\n      transform: translateX(-50%);\n      left: 50%;\n    }\n  }\n}\n\n.pn-progress-indicator-step {\n  position: relative;\n  display: flex;\n  flex: 1 0 4em;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  -webkit-tap-highlight-color: transparent;\n\n  .circle {\n    width: 1.5em;\n    height: 1.5em;\n    padding: 0.3rem;\n    border-radius: 50%;\n    background-color: main.$gray50;\n    @include main.pn-transition('background-color');\n  }\n\n  .info-container {\n    position: absolute;\n    bottom: -2.5em;\n    right: 0;\n    transform: translateX(50%) translateX(-1.2rem);\n    white-space: nowrap;\n    color: main.$gray50;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    font-size: 1em;\n    font-weight: normal;\n    @include main.pn-transition('color');\n\n    .pn-icon-svg {\n      height: 1.7em;\n      width: 1.7em;\n      margin-bottom: 0.1em;\n    }\n\n    .pn-icon-svg path,\n    .pn-icon-svg polygon {\n      fill: main.$gray50;\n    }\n  }\n\n  .progress-line {\n    flex: 1 1 auto;\n    margin: auto 4px;\n    height: 0.8rem;\n    background-color: main.$gray50;\n    position: relative;\n    overflow: hidden;\n    pointer-events: none;\n    border-radius: 10rem;\n\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 0.8rem;\n      width: 100%;\n      background-color: main.$blue700;\n      transform: translateX(-100%);\n      @include main.pn-transition('transform');\n      transition-delay: main.$timing;\n    }\n  }\n\n  &.active {\n    .info-container {\n      color: main.$black;\n\n      .pn-icon-svg path {\n        fill: main.$black;\n      }\n\n      .pn-icon-svg polygon {\n        fill: main.$black;\n      }\n    }\n  }\n\n  &.activated {\n    cursor: pointer;\n  }\n\n  &.done,\n  &.active {\n    .progress-line:after {\n      transform: translateX(0);\n    }\n\n    .circle {\n      background-color: main.$blue700;\n    }\n  }\n\n  &.done {\n    .checkmark-path {\n      stroke-linecap: round;\n      stroke-dasharray: 27;\n      stroke-dashoffset: -23;\n      animation: dash main.$timing cubic-bezier(0.55, 0, 0.1, 1) both;\n    }\n  }\n}\n\n@keyframes dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { white } from 'pn-design-assets/pn-assets/colors.js';\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-step',\n  styleUrl: 'pn-progress-indicator-step.scss',\n})\nexport class PnProgressIndicatorStep {\n  @State() activated: boolean;\n  @State() done: boolean;\n\n  /** Set by the parent component. Do not use manually. @hide true */\n  @Prop() activeStep: number;\n  /** Set by the parent component. Do not use manually. @hide true */\n  @Prop() index: number;\n  /** The step name. */\n  @Prop() name: string;\n  /** Set the step as checked, meaning a white check mark will appear. */\n  @Prop() checked: boolean = false;\n  /** Set by the parent component. Do not use manually. @hide true */\n  @Prop() active?: 'yes' | 'no';\n\n  @Event() setactivestep: EventEmitter<number>;\n  setActiveStepHandler() {\n    if (this.done || this.activated) {\n      this.setactivestep.emit(this.index);\n    }\n  }\n\n  componentWillLoad() {\n    this.checkStatus();\n  }\n\n  componentDidUpdate() {\n    this.checkStatus();\n  }\n\n  checkStatus() {\n    if (!this.done) {\n      this.done = this.checked || this.activeStep > this.index;\n    }\n\n    if (this.active === 'yes') {\n      this.activated = true;\n    } else if (this.active === 'no') {\n      this.activated = false;\n      this.done = false;\n    } else if (!this.activated) {\n      this.activated = this.activeStep >= this.index;\n    }\n  }\n\n  getClassNames() {\n    let className = 'pn-progress-indicator-step';\n    if (this.done || this.checked) className += ' done';\n    if (this.activated) className += ' activated';\n    if (this.activeStep === this.index) className += ' active';\n    return className;\n  }\n\n  render() {\n    return (\n      <Host class={this.getClassNames()} onClick={() => this.setActiveStepHandler()}>\n        <div class=\"progress-line\" />\n        <div class=\"info-container\">\n          <slot />\n          {this.name}\n        </div>\n        <div class=\"circle\">\n          {this.done || this.checked ? (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              enable-background=\"new 0 0 24 24\"\n              id=\"checkmark\"\n              version=\"1.0\"\n              viewBox=\"0 0 24 24\"\n            >\n              <polyline\n                class=\"checkmark-path\"\n                fill=\"none\"\n                points=\"20,6 9,17 4,12\"\n                stroke={white}\n                stroke-miterlimit=\"10\"\n                stroke-width=\"3\"\n              />\n            </svg>\n          ) : (\n            ''\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/umd/modules/@postnord/web-components/components/pn-progress-indicator.js.map

@@ -1 +0,0 @@
-{"file":"pn-progress-indicator.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,0DAA0D;;MCU5EA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAA,WAAA,CAAA;;;;;;;;;;IAIL,UAAU,GAAW,CAAC;;AAGtC,IAAA,cAAc;IAGvB,oBAAoB,CAAC,EAAE,MAAM,EAAE,EAAA;AAC7B,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM;QACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;;IAG3C,iBAAiB,GAAA;QACf,IAAI,CAAC,mBAAmB,EAAE;;IAG5B,kBAAkB,GAAA;QAChB,IAAI,CAAC,mBAAmB,EAAE;;IAG5B,mBAAmB,GAAA;AACjB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CACzB,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAqC,4BAA4B,CAAC,CACpG;QAED,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,KAAI;AAC5B,YAAA,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU;AAClC,YAAA,KAAK,CAAC,KAAK,GAAG,CAAC;AACjB,SAAC,CAAC;;IAGJ,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnProgressIndicator","__stencil_proxyCustomElement"],"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"],"version":3}

package/umd/modules/@postnord/web-components/components/pn-progress-stepper.js.map

@@ -1 +0,0 @@
-{"file":"pn-progress-stepper.js","mappings":";;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/umd/modules/@postnord/web-components/components/pn-progress-stepper2.js.map

@@ -1 +0,0 @@
-{"file":"pn-progress-stepper2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"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   * @since v7.16.0\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"],"version":3}

package/umd/modules/@postnord/web-components/components/pn-radio-button.js.map

@@ -1 +0,0 @@
-{"file":"pn-radio-button.js","mappings":"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","names":["PnRadioButton","__stencil_proxyCustomElement"],"sources":["src/components/input/pn-radio-button/pn-radio-button.scss?tag=pn-radio-button","src/components/input/pn-radio-button/pn-radio-button.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-radio-button {\n  position: relative;\n  display: inline-block;\n}\n\npn-radio-button .pn-radio {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n\n  &-label {\n    cursor: pointer;\n    color: main.$label-color;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &-helpertext {\n    color: main.$helpertext-color;\n    margin: 0 0 0.5em 0;\n    &:last-child {\n      margin: 0;\n    }\n  }\n\n  &-content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    font-weight: 400;\n    line-height: 1.5;\n    flex: 1;\n    margin: 0 0 0 0.75em;\n  }\n\n  &-button {\n    display: flex;\n    gap: 0.75em;\n    padding: 0;\n  }\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    height: 0.75em;\n    width: 0.75em;\n    background-color: main.$input-button-background-box-active;\n    border-radius: 50%;\n    transform: scale(0);\n    transform-origin: center center;\n    @include main.pn-transition('background-color, transform');\n  }\n\n  &[data-tile] {\n    padding: 1em;\n    border: main.$input-border;\n    border-radius: main.$border-radius;\n    background-color: main.$input-background;\n\n    @include main.pn-focus-base;\n    @include main.pn-transition('border-color, background-color, outline-color');\n\n    .pn-radio-outer {\n      outline: none;\n    }\n  }\n\n  &[data-invalid] {\n    border-color: main.$border-color-error;\n    .pn-radio-outer {\n      border-color: main.$border-color-error;\n    }\n    .pn-radio-inner {\n      background-color: main.$input-button-active-error;\n    }\n  }\n\n  &-container {\n    flex: 1 1 100%;\n    overflow: hidden;\n    visibility: hidden;\n    &[data-open] {\n      visibility: visible;\n      overflow: unset;\n    }\n    &[data-moving] {\n      visibility: visible;\n      overflow: hidden;\n    }\n  }\n\n  &-area {\n    padding: 0.75em 0 0 2.25em;\n    display: flex;\n    flex-direction: column;\n    flex-wrap: nowrap;\n    gap: 1em;\n  }\n\n  > pn-icon {\n    margin-left: 0.75em;\n  }\n}\n\npn-radio-button > input[type='radio'] {\n  cursor: pointer;\n  opacity: 0;\n  position: absolute;\n  margin: 0;\n  z-index: 1;\n  top: 0;\n  left: 0;\n\n  font-size: 1em;\n  width: 1.5em;\n  height: 1.5em;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-tile]:not([data-expand]) {\n    width: 100%;\n    height: 100%;\n  }\n\n  &[data-expand] {\n    top: 1em;\n    left: 1em;\n  }\n\n  &[aria-describedby] + .pn-radio[data-tile] .pn-radio-label {\n    font-weight: 500;\n  }\n\n  &:hover + .pn-radio {\n    &[data-tile] {\n      border-color: main.$border-color-default-hover;\n      background-color: main.$input-button-background-hover;\n      .pn-radio-outer {\n        background-color: main.$input-button-background-hover;\n      }\n      &[data-invalid] {\n        border-color: main.$border-color-error;\n        background-color: main.$input-background-error-hover;\n        .pn-radio-outer {\n          background-color: main.$input-background-error-hover;\n        }\n      }\n    }\n    &[data-invalid] .pn-radio-outer {\n      border-color: main.$border-color-error;\n      background-color: main.$input-background-error-hover;\n    }\n\n    .pn-radio-outer {\n      border-color: main.$input-button-background-box-active;\n      background-color: main.$input-button-background-hover;\n    }\n  }\n\n  &:checked:hover + .pn-radio {\n    &[data-tile][data-invalid] {\n      border-color: main.$input-button-active-error-hover;\n    }\n    &[data-invalid] > .pn-radio-button > .pn-radio-outer {\n      border-color: main.$input-button-active-error-hover;\n    }\n  }\n\n  &:focus-visible + .pn-radio {\n    .pn-radio-outer {\n      @include main.pn-focus-visible;\n    }\n    &[data-invalid] .pn-radio-outer {\n      @include main.pn-focus-visible(main.$warning);\n    }\n    &[data-tile] {\n      @include main.pn-focus-visible(main.$border-color-default-focus, null, main.$border-color-default-focus);\n      &[data-invalid] {\n        @include main.pn-focus-visible(main.$input-button-active-error, null, main.$input-button-active-error);\n      }\n      > .pn-radio-button > .pn-radio-outer {\n        outline: none;\n      }\n    }\n  }\n\n  &:checked + .pn-radio {\n    &[data-tile] {\n      border-color: main.$border-color-default-active;\n      background-color: main.$input-button-background-active;\n      &[data-invalid] {\n        border-color: main.$border-color-error-active;\n        background-color: main.$input-background-error-active;\n      }\n    }\n    > .pn-radio-button > .pn-radio-outer {\n      border-color: main.$border-color-default-active;\n      > .pn-radio-inner {\n        transform: scale(1);\n        background-color: main.$input-button-background-box-active;\n      }\n    }\n    &[data-invalid] {\n      > .pn-radio-button > .pn-radio-outer {\n        border-color: main.$border-color-error;\n        > .pn-radio-inner {\n          background-color: main.$border-color-error;\n        }\n      }\n    }\n  }\n\n  &:disabled {\n    pointer-events: none;\n    + .pn-radio {\n      .pn-radio-label {\n        pointer-events: none;\n      }\n      &[data-tile] {\n        background-color: main.$input-background-disabled;\n        border-color: main.$border-color-disabled;\n        > pn-icon > .pn-icon-svg path {\n          fill: main.$input-color-disabled;\n        }\n        > .pn-radio-content > .pn-radio-label {\n          color: main.$input-color-disabled;\n        }\n      }\n\n      > .pn-radio-button > .pn-radio-outer {\n        background-color: main.$input-background-disabled;\n        border-color: main.$input-border-disabled;\n        outline: none;\n        > .pn-radio-inner {\n          background-color: main.$input-button-disabled;\n        }\n      }\n    }\n  }\n}\n","import { uuidv4 } from '@/globals/helpers';\nimport { Component, Element, h, Host, Listen, Prop, Watch, Mixin } from '@stencil/core';\nimport { animateHeightFactory } from '@/globals/mixins';\n\n/**\n * The `pn-radio-button` is built with a native `input[type=\"radio\"]` in the background.\n * This means you can use native events to listen to the changes.\n *\n * @nativeChange Use the `change` event to listen when the radio state is being changed.\n *\n * @slot - The default slot for adding custom HTML under the label/helpertext. {@since v7.17.0}\n * @slot helpertext - Use this slot to add custom HTML inside of the helpertext element.\n * Only recommended if you need a link without the `tile` prop. {@since v7.17.0}\n * @slot content - When using the `tile` and `expand` props, this slot will be revealed when the input is checked. {@since v7.17.0}\n */\n@Component({\n  tag: 'pn-radio-button',\n  styleUrl: 'pn-radio-button.scss',\n})\nexport class PnRadioButton extends Mixin(animateHeightFactory) {\n  private readonly id: string = `pn-radio-${uuidv4()}`;\n  private idHelpertext: string = `${this.id}-helpertext`;\n\n  private contentArea: HTMLElement;\n  private radioInput: HTMLInputElement;\n\n  @Element() hostElement: HTMLElement;\n\n  /** The radio label */\n  @Prop() label?: string;\n  /** This adds an optional helpertext under the label. */\n  @Prop() helpertext?: string;\n\n  /** This will be emitted on change and input events. */\n  @Prop({ reflect: true }) value!: string;\n  /** The name of the radio group. */\n  @Prop() name?: string;\n  /** Check the radio. */\n  @Prop({ mutable: true }) checked?: boolean = false;\n  /** A unique HTML ID for the radio. */\n  @Prop() radioid?: string = this.id;\n\n  /** Set the radio as required. @category State */\n  @Prop() required?: boolean = false;\n  /** Disable the radio. @category State */\n  @Prop() disabled?: boolean = false;\n  /** If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio. @category State */\n  @Prop() invalid?: boolean = false;\n\n  /**\n   * Turn the radio into a clickable tile. A border and padding is added.\n   *\n   * **Do not** use interactive elements (links/buttons) inside of the slots when using this prop.\n   * An exception is made when using the `tile` + `expand` props together,\n   * which allows you to use interactive elements.\n   *\n   * @category Tile\n   */\n  @Prop() tile?: boolean = false;\n  /**\n   * Allow the radio to control the slot area \"content\".\n   * When checked, the area is visible, when unchecked, the area is hidden.\n   *\n   * The prop `tile` must be used at the same time.\n   * @see {@link tile}\n   * @since v7.17.0\n   * @category Tile\n   */\n  @Prop() expand?: boolean = false;\n  /**\n   * Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work.\n   * @see {@link tile}\n   * @category Tile\n   */\n  @Prop() icon?: string = null;\n\n  @Watch('radioid')\n  handleId() {\n    this.idHelpertext = `${this.radioid}-helpertext`;\n  }\n\n  @Watch('checked')\n  handleChecked(checked?: boolean) {\n    this.checked = checked ?? this.radioInput.checked;\n    if (!this.displayContent()) return;\n\n    if (this.checked) {\n      this.openDropdown(this.contentArea);\n      this.uncheckOtherRadios();\n    } else {\n      this.closeDropdown(this.contentArea);\n    }\n  }\n\n  @Listen('change', { target: 'window' })\n  handleChange(e: Event) {\n    const target = e.target as HTMLInputElement;\n    const { name } = target;\n    const isSameRadioGroup = name === this.name;\n    const isSameRadio = target === this.radioInput && target.checked;\n\n    /**\n     * Since content can be nested inside of this component,\n     * double check that the event is coming from this specific radio.\n     */\n    if (isSameRadioGroup) this.checked = isSameRadio;\n  }\n\n  componentWillLoad() {\n    this.handleId();\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => this.displayContent() && this.checked && this.openDropdown(this.contentArea));\n  }\n\n  private uncheckOtherRadios() {\n    if (!this.name) return;\n\n    const selector = `pn-radio-button[name=\"${this.name}\"]`;\n    const list = document.querySelectorAll<HTMLPnRadioButtonElement>(selector);\n    const radios = Array.from(list);\n    radios.forEach(radio => radio !== this.hostElement && (radio.checked = false));\n  }\n\n  private isInvalid(): boolean {\n    return this.invalid && !this.disabled;\n  }\n\n  private displayText(): boolean {\n    return this.displayLabel() || this.displayHelpertext();\n  }\n\n  private displayLabel(): boolean {\n    return !!this.label;\n  }\n\n  private displayHelpertext(): boolean {\n    return !!(this.helpertext || this.hostElement.querySelector('[slot=\"helpertext\"]')?.textContent);\n  }\n\n  private displayIcon(): boolean {\n    return this.tile && !!this.icon;\n  }\n\n  private displayContent(): boolean {\n    return this.tile && this.expand;\n  }\n\n  render() {\n    return (\n      <Host>\n        <input\n          type=\"radio\"\n          id={this.radioid}\n          class=\"pn-radio-input\"\n          value={this.value}\n          name={this.name}\n          disabled={this.disabled}\n          checked={this.checked}\n          required={this.required}\n          aria-invalid={this.isInvalid()?.toString()}\n          aria-describedby={this.displayHelpertext() ? this.idHelpertext : null}\n          data-tile={this.tile}\n          data-expand={this.expand}\n          ref={el => (this.radioInput = el)}\n        />\n        <div class=\"pn-radio\" data-tile={this.tile} data-expand={this.expand} data-invalid={this.isInvalid()}>\n          <div class=\"pn-radio-button\">\n            <div class=\"pn-radio-outer\">\n              <div class=\"pn-radio-inner\" />\n            </div>\n          </div>\n\n          <p class=\"pn-radio-content\" hidden={!this.displayText()}>\n            <label htmlFor={this.radioid} class=\"pn-radio-label\" hidden={!this.displayLabel()}>\n              {this.label}\n            </label>\n            <span id={this.idHelpertext} class=\"pn-radio-helpertext\" hidden={!this.displayHelpertext()}>\n              {this.helpertext}\n              <slot name=\"helpertext\"></slot>\n            </span>\n            <slot></slot>\n          </p>\n\n          {this.displayIcon() && <pn-icon icon={this.icon} color=\"gray900\" />}\n\n          <div\n            class=\"pn-radio-container\"\n            data-open={this.checked}\n            hidden={!this.displayContent()}\n            style={{ height: '0px' }}\n            ref={el => (this.contentArea = el)}\n          >\n            <div class=\"pn-radio-area\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/umd/modules/@postnord/web-components/components/pn-read-only-button.js.map

@@ -1 +0,0 @@
-{"file":"pn-read-only-button.js","mappings":"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","names":["PnReadOnlyButton","__stencil_proxyCustomElement"],"sources":["src/components/buttons/pn-read-only-button/pn-read-only-button.scss?tag=pn-read-only-button","src/components/buttons/pn-read-only-button/pn-read-only-button.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-read-only-button {\n  display: inline-block;\n}\n\npn-read-only-button button {\n  cursor: not-allowed;\n  color: main.$input-color-disabled;\n  background: main.$input-background-disabled;\n  padding: 0.75em 1.2em;\n  width: 100%;\n  border: none;\n  border-radius: 3em;\n  outline: none;\n  position: relative;\n  font-size: 1em;\n  min-height: 3em;\n  min-width: 5.5em;\n  font-weight: 500;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  -webkit-tap-highlight-color: transparent;\n\n  pn-icon {\n    flex-shrink: 0;\n    margin: 0 0 0 0.5em;\n  }\n\n  .button-tooltip {\n    position: absolute;\n    bottom: calc(100% + 0.35em);\n    left: 50%;\n    background: main.$warning;\n    color: main.$white;\n    padding: 0.25em 0.75em;\n    font-size: 0.875em;\n    font-weight: 300;\n    border-radius: 1em;\n    box-shadow:\n      0 1.2px 3.6px rgba(0, 0, 0, 0.1),\n      0 6.4px 14.4px rgba(0, 0, 0, 0.13);\n    z-index: 5;\n    max-width: min(95vw, 40em);\n    transform: translateX(-50%);\n    width: max-content;\n    pointer-events: none;\n\n    opacity: 0;\n    @include main.pn-transition('opacity');\n  }\n\n  &[data-tooltip-open] {\n    .button-tooltip {\n      opacity: 1;\n    }\n  }\n}\n\n/* -----------------LEFT ALIGNED ICON------------------ */\npn-read-only-button button.pn-button-left-icon {\n  flex-direction: row-reverse;\n\n  pn-icon {\n    margin: 0 0.5em 0 0;\n  }\n}\n/* -----------------/LEFT ALIGNED ICON------------------ */\n\n/* -----------------ICON ONLY------------------ */\npn-read-only-button button.icon-only {\n  width: 3em;\n  min-width: 0;\n\n  pn-icon {\n    margin: 0;\n  }\n\n  &.pn-button-small {\n    width: 2.286em;\n    min-width: 0;\n    padding: 0;\n  }\n\n  span.read-only-icon-only {\n    display: none;\n  }\n}\n/* -----------------/ICON ONLY------------------ */\n\n/* -----------------SMALL------------------ */\npn-read-only-button button.pn-button-small {\n  font-size: 0.875em;\n  padding: 0.5em 1em;\n  font-weight: normal;\n  min-height: 2.286em;\n  min-width: none;\n\n  pn-icon .pn-icon-svg {\n    height: 1.28em;\n    width: 1.28em;\n  }\n}\n/* -----------------/SMALL------------------ */\n","import { Component, Prop, h, State, Host, Element, Watch } from '@stencil/core';\nimport { awaitTopbar } from '@/globals/helpers';\nimport { PnLanguages } from '@/globals/types';\n\n/**\n * There are no events or features other than the `icon`, `small` and `language` prop.\n *\n * Our rule is to not have disabled buttons.\n * However, this component is an exception for a very specific use case regarding portal users.\n */\n@Component({\n  tag: 'pn-read-only-button',\n  styleUrl: 'pn-read-only-button.scss',\n})\nexport class PnReadOnlyButton {\n  @Element() hostElement: HTMLElement;\n\n  @State() readOnlyModeText = '';\n  @State() tooltipOpen: boolean = false;\n  @State() tooltipEl: HTMLDivElement;\n  @State() tooltipDx: string;\n\n  /** The SVG content of the icon you want. */\n  @Prop() icon?: string;\n  /** Icon on the left side instead of on the right. */\n  @Prop() leftIcon: boolean = false;\n  /** If you're using a button with only an icon, button text is still REQUIRED for the tooltip. */\n  @Prop() iconOnly: boolean = false;\n  /** Smaller button. */\n  @Prop() small: boolean = false;\n  /** Set the language manually. */\n  @Prop() language?: PnLanguages = null;\n\n  @Watch('language')\n  setReadOnlyModeText() {\n    const translations = {\n      en: 'You cannot complete this action while in read only mode',\n      sv: 'Du kan inte utföra denna handling i skrivskyddat läge',\n      da: 'Du kan ikke gennemføre denne handling i skrivebeskyttet tilstand',\n      fi: 'Et voi suorittaa tätä toimintoa vain luku -tilassa',\n      no: 'Du kan ikke utføre denne handlingen i skrivebeskyttet modus',\n    };\n\n    this.readOnlyModeText = translations[this.language];\n  }\n\n  async componentWillLoad() {\n    this.setReadOnlyModeText();\n\n    if (this.language) return;\n    await awaitTopbar(this.hostElement);\n  }\n\n  componentDidLoad() {\n    this.initTooltip();\n  }\n\n  /*---------------------------------------TOOLTIP LOGIC-------------------------------------------*/\n\n  @Watch('tooltipOpen')\n  openHandler(): void {\n    if (this.tooltipOpen) {\n      this.checkTooltipPosition();\n      return;\n    }\n    this.setTooltipOffset();\n  }\n\n  initTooltip(): void {\n    this.tooltipEl = this.hostElement.querySelector('.button-tooltip');\n    const tooltipAnchor = this.hostElement;\n\n    const openEvents = ['mouseenter', 'focus'];\n    const closeEvents = ['mouseleave', 'blur'];\n\n    const eventListeners = [...openEvents, ...closeEvents];\n\n    eventListeners.forEach(e => {\n      tooltipAnchor.addEventListener(e, event => {\n        // Should open?\n        if (openEvents.includes(event.type)) {\n          this.tooltipOpen = true;\n          return;\n        }\n        // Should close?\n        if (closeEvents.includes(event.type)) {\n          this.tooltipOpen = false;\n        }\n      });\n    });\n  }\n\n  setTooltipOffset(): void {\n    this.tooltipEl.style.transform = `translateX(-50%) translateX(${this.tooltipDx}px)`;\n  }\n\n  checkTooltipPosition(): void {\n    this.tooltipEl.style.transform = 'translateX(-50%)';\n\n    requestAnimationFrame(() => {\n      const { x, right } = this.tooltipEl.getBoundingClientRect();\n      const extraMargin = 8;\n      this.tooltipDx = '0';\n      this.tooltipEl.style.transform = '';\n\n      if (x < 0) this.tooltipDx = `${x * -1 + extraMargin}`;\n      if (right > window.innerWidth) this.tooltipDx = `${window.innerWidth - right - extraMargin}`;\n\n      requestAnimationFrame(() => {\n        this.setTooltipOffset();\n      });\n    });\n  }\n  /* ---------------------------------------/TOOLTIP--------------------------------------- */\n\n  getClassNames(): string {\n    let classNames = 'pn-button ';\n\n    if (this.small) classNames += 'pn-button-small ';\n    if (this.leftIcon) classNames += 'pn-button-left-icon ';\n    if (this.iconOnly) classNames += 'icon-only ';\n\n    return classNames;\n  }\n\n  render() {\n    return (\n      <Host class=\"pn-read-only-button\">\n        <button class={this.getClassNames()} data-tooltip-open={this.tooltipOpen} disabled={true}>\n          {!this.iconOnly && <slot />}\n          {this.icon && <pn-icon icon={this.icon} color=\"gray700\" />}\n\n          {this.iconOnly && (\n            <span class=\"read-only-icon-only\">\n              <slot />\n            </span>\n          )}\n\n          <div class=\"button-tooltip\">{this.readOnlyModeText}</div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/umd/modules/@postnord/web-components/components/pn-search-field.js.map

@@ -1 +0,0 @@
-{"file":"pn-search-field.js","mappings":";;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/umd/modules/@postnord/web-components/components/pn-search-field2.js.map

@@ -1 +0,0 @@
-{"file":"pn-search-field2.js","mappings":"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","names":["icon","__stencil_proxyCustomElement"],"sources":["node_modules/pn-design-assets/pn-assets/icons/close_small.js","node_modules/pn-design-assets/pn-assets/icons/search.js","src/components/input/pn-search-field/translations.ts","src/components/input/pn-search-field/pn-search-field.scss?tag=pn-search-field","src/components/input/pn-search-field/pn-search-field.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414\" clip-rule=\"evenodd\"/></svg>';\nexport const close_small = icon;\nexport const closeSmall = icon;\n","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=\"M4 11.442A7.44 7.44 0 0 1 11.44 4c6.24 0 9.617 7.154 5.923 11.949l2.844 2.844a1 1 0 0 1-1.414 1.414l-2.837-2.837C11.21 21.045 4 17.73 4 11.441m11.277 3.867C11.846 18.714 6 16.284 6 11.442A5.44 5.44 0 0 1 11.44 6c4.724 0 7.204 5.605 4.026 9.1z\" clip-rule=\"evenodd\"/></svg>';\nexport const search = icon;\n","export const translations = {\n  SEARCH: {\n    en: 'Search',\n    sv: 'Sök',\n    da: 'Søg',\n    fi: 'Hae',\n    no: 'Søk',\n  },\n  CLEAR: {\n    en: 'Clear search field',\n    sv: 'Rensa sökfältet',\n    da: 'Ryd søgefeltet',\n    fi: 'Tyhjennä hakukenttä',\n    no: 'Tøm søkefeltet',\n  },\n};\n","@use 'src/globals/main';\n\npn-search-field {\n  display: inline-block;\n}\n\npn-search-field .pn-search-field {\n  display: flex;\n  gap: 0.5em;\n\n  &-container {\n    width: 100%;\n    flex: 1 1 100%;\n    position: relative;\n  }\n\n  &-input {\n    @include main.pn-input-field;\n\n    min-height: 3em;\n    height: 100%;\n    width: 100%;\n    border-radius: 3em;\n\n    &::-webkit-search-cancel-button {\n      display: none;\n    }\n  }\n\n  &-inline {\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n    background: transparent;\n    width: 3em;\n    height: 100%;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    pn-button {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n\n      @include main.pn-transition('transform');\n      transition-delay: main.$timing;\n      transform: translate(100%, -50%);\n    }\n  }\n\n  &-submit {\n    white-space: nowrap;\n  }\n\n  &-spinner {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transition: transform main.$easing main.$timing;\n    transform: translate(100%, -50%);\n  }\n\n  &[data-inline] {\n    .pn-search-field-inline {\n      pointer-events: unset;\n    }\n    .pn-search-field-button {\n      transform: translate(-50%, -50%);\n    }\n    &[data-loading] {\n      pn-button {\n        transform: translate(100%, -50%);\n      }\n\n      .pn-search-field-spinner {\n        transform: translate(-50%, -50%);\n      }\n    }\n    &[data-searching] .pn-search-field-button {\n      transform: translate(150%, -50%);\n    }\n  }\n\n  &[data-jumbo] {\n    .pn-search-field-input {\n      min-height: 4em;\n      padding-left: 1.25em;\n    }\n    .pn-search-field-submit .pn-button[data-icon-only] {\n      width: 4em;\n      height: 4em;\n      &[data-loading] .pn-button-bg {\n        width: 4em;\n        height: 4em;\n      }\n    }\n  }\n\n  &[data-searching] {\n    .pn-search-field-inline {\n      pointer-events: unset;\n    }\n    .pn-search-field-clear {\n      transform: translate(-50%, -50%);\n    }\n  }\n}\n","import { uuidv4, awaitTopbar, en } from '@/globals/helpers';\nimport { Component, Prop, h, Host, Event, EventEmitter, Element, Listen } from '@stencil/core';\nimport { close_small, search } from 'pn-design-assets/pn-assets/icons.js';\nimport type { PnButtonAppearance, PnButtonVariant, PnLanguages, PnSearchFieldButton } from '@/globals/types';\nimport { translations } from './translations';\n\n/**\n * The search field has multiple button variants that changes the visual appearance.\n *\n * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.\n * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).\n */\n@Component({\n  tag: 'pn-search-field',\n  styleUrl: 'pn-search-field.scss',\n})\nexport class PnSearchField {\n  id: string = `pn-search-field-${uuidv4()}`;\n  searchElement: HTMLInputElement;\n\n  @Element() hostElement: HTMLElement;\n\n  /** Provide an aria-label for the search field. */\n  @Prop() label!: string;\n  /** Set the value of the search field. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Set a search field placeholder. This is no replacement for a `label`. */\n  @Prop() placeholder?: string;\n  /** Set a unique ID for the search input. */\n  @Prop() searchid: string = this.id;\n  /** Set HTML name of the search input. */\n  @Prop() name?: string;\n  /** Allow the browser to autocomplete the search field. */\n  @Prop() autocomplete?: string;\n  /** Point to a datalist element with this id. */\n  @Prop() list?: string;\n  /** Override the pntopbar language. */\n  @Prop() language?: PnLanguages = null;\n\n  /** Disable the search field. @category State */\n  @Prop() disabled: boolean = false;\n  /** Set the search field as required. @category State */\n  @Prop() required: boolean = false;\n  /** Display loading animation. @category State */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Button variant changes the visual of the search field:\n   * - `''` Standard with a blue button.\n   * - `simple` | ~~`icon`~~ with simple white icon only button.\n   * - `auto` | ~~`icon-inline`~~ | ~~`none`~~ with a white inline search button.\n   * - `jumbo` with a larger blue icon only button.\n   *\n   * @since v7.18.0: Use `''`, `simple`, `auto` or `jumbo`.\n   *\n   * @category Button\n   */\n  @Prop() button: PnSearchFieldButton = '';\n  /** Label for the button element. @category Button */\n  @Prop() buttonLabel?: string;\n  /** Add a tooltip to the search button. @category Button */\n  @Prop() buttonTooltip?: string;\n  /**\n   * Light instead of dark search button.\n   *\n   * @deprecated The color is now set automatically based on the button prop.\n   * @category Button\n   */\n  @Prop() buttonLight: boolean = false;\n\n  /** This is emitted on search submission both with keyboard and mouse. */\n  @Event() search: EventEmitter<string>;\n  /** Custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two. */\n  @Event() update: EventEmitter<string>;\n\n  @Listen('input')\n  inputHandler() {\n    this.update.emit(this.value);\n  }\n\n  async componentWillLoad() {\n    if (this.language === null) await awaitTopbar(this.hostElement);\n  }\n\n  private translate(prop: string) {\n    return translations?.[prop]?.[this.language || en];\n  }\n\n  private emitSearch({ click, button }: { click?: MouseEvent; button?: KeyboardEvent }) {\n    if (click?.type === 'click' || (button?.type === 'keydown' && button?.key === 'Enter')) {\n      // We prevent the native search event since it's not supported in IE and FF, then we emit our own instead\n      const event = click || button;\n      event.preventDefault();\n      this.search.emit(this.value);\n    }\n  }\n\n  private setVal(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.update.emit(this.value);\n    this.hostElement.querySelector('input').focus();\n  }\n\n  private getButtonLabel() {\n    return this.buttonLabel || this.translate('SEARCH');\n  }\n\n  /** icon === simple-search */\n  private searchSimple() {\n    return this.button === 'icon' || this.button === 'simple';\n  }\n\n  /** none | icon-inline  === auto-search */\n  private searchAuto() {\n    return this.button === 'icon-inline' || this.button === 'none' || this.button === 'auto';\n  }\n\n  private searchJumbo() {\n    return this.button === 'jumbo';\n  }\n\n  private searchButtonAppearance(): PnButtonAppearance {\n    return this.searchSimple() ? 'light' : null;\n  }\n\n  private searchButtonVariant(): PnButtonVariant {\n    return this.searchSimple() ? 'outlined' : null;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"pn-search-field\"\n          data-inline={this.searchAuto()}\n          data-loading={this.loading}\n          data-searching={!!this.value}\n          data-jumbo={this.searchJumbo()}\n        >\n          <div class=\"pn-search-field-container\">\n            <input\n              class=\"pn-search-field-input\"\n              type=\"search\"\n              value={this.value}\n              id={this.searchid}\n              name={this.name}\n              aria-label={this.label}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              autocomplete={this.autocomplete}\n              list={this.list}\n              ref={el => (this.searchElement = el)}\n              onKeyDown={e => this.emitSearch({ button: e })}\n              onInput={e => this.setVal(e)}\n            />\n\n            <div class=\"pn-search-field-inline\">\n              {this.searchAuto() && (\n                <pn-button\n                  class=\"pn-search-field-button\"\n                  type=\"button\"\n                  appearance=\"light\"\n                  small\n                  icon={search}\n                  iconOnly={true}\n                  arialabel={this.getButtonLabel()}\n                  noTab={this.loading}\n                  onPnClick={e => this.emitSearch({ click: e.detail })}\n                />\n              )}\n\n              {!this.disabled && (\n                <pn-button\n                  small\n                  class=\"pn-search-field-clear\"\n                  type=\"button\"\n                  appearance=\"light\"\n                  icon={close_small}\n                  iconOnly={true}\n                  arialabel={this.translate('CLEAR')}\n                  noTab={!this.value || this.loading}\n                  onPnClick={() => this.clearInput()}\n                />\n              )}\n\n              {this.searchAuto() && <pn-spinner class=\"pn-search-field-spinner\"></pn-spinner>}\n            </div>\n          </div>\n\n          {!this.searchAuto() && (\n            <pn-button\n              class=\"pn-search-field-submit\"\n              label={this.getButtonLabel()}\n              tooltip={this.buttonTooltip}\n              appearance={this.searchButtonAppearance()}\n              variant={this.searchButtonVariant()}\n              icon={search}\n              iconOnly={this.searchSimple() || this.searchJumbo()}\n              arialabel={this.searchSimple() || this.searchJumbo() ? this.getButtonLabel() : null}\n              loading={this.loading}\n              onPnClick={e => this.emitSearch({ click: e.detail })}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"pn-segment.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,szBAAszB;;MCW9zBA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;;;;;;;;AACpB,IAAA,EAAE,GAAW,CAAA,WAAA,EAAc,MAAM,EAAE,EAAE;;;AAK7B,IAAA,KAAK;;AAEL,IAAA,IAAI;;AAEJ,IAAA,KAAK;;IAEL,QAAQ,GAAY,KAAK;;AAEzB,IAAA,SAAS,GAAW,IAAI,CAAC,EAAE;;AAE3B,IAAA,IAAI;;IAEJ,QAAQ,GAAY,KAAK;;AAGxB,IAAA,YAAY;AACrB,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC3B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG/B,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,CAAC,KAAiB,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAA,EAChE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,YAAY,EAClB,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,CAAA,EACF,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,kBAAkB,EAAA,EACrD,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,SAAS,EAAW,CAAA,EAClE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,IAAI,CAAC,KAAK,EACX,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnSegment","__stencil_proxyCustomElement"],"sources":["src/components/input/pn-segmented-control/segment/pn-segment.scss?tag=pn-segment","src/components/input/pn-segmented-control/segment/pn-segment.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-segment {\n  position: relative;\n  color: main.$blue700;\n  margin-right: 0.5em;\n  z-index: 2;\n  white-space: nowrap;\n  scroll-snap-align: center;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  transform: translateZ(0);\n\n  &:last-of-type {\n    margin-right: 0;\n  }\n}\n\npn-segment .pn-segment {\n  cursor: pointer;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  -webkit-tap-highlight-color: transparent;\n\n  &:disabled {\n    cursor: not-allowed;\n    ~ .pn-segment-label {\n      color: main.$gray700;\n      pn-icon .pn-icon-svg path {\n        fill: main.$gray700;\n      }\n    }\n  }\n\n  &-label {\n    height: 100%;\n    width: 100%;\n    padding: 0.5em;\n    border-radius: 3em;\n    font-weight: 500;\n    border: 0.0625em solid transparent;\n\n    display: inline-flex;\n    gap: 0.5em;\n    align-items: center;\n\n    -webkit-tap-highlight-color: transparent;\n  }\n}\n","import { uuidv4 } from '@/globals/helpers';\nimport { Component, Element, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * The `pn-segment` is built with a native `input[type=\"radio\"]` in the background.\n * Do not listen to events on the `pn-segment`, but on the `pn-segmented-control` instead.\n */\n@Component({\n  tag: 'pn-segment',\n  styleUrl: 'pn-segment.scss',\n})\nexport class PnSegment {\n  id: string = `pn-segment-${uuidv4()}`;\n\n  @Element() hostElement: HTMLElement;\n\n  /** The segment label, same as the slot. @since v7.7.0 */\n  @Prop() label?: string;\n  /** The segment controller name. */\n  @Prop() name!: string;\n  /** The segment value. */\n  @Prop() value!: string;\n  /** Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**. @hide true */\n  @Prop() selected: boolean = false;\n  /** A unique HTML id. */\n  @Prop() segmentid: string = this.id;\n  /** The SVG content of the icon you want. */\n  @Prop() icon?: string;\n  /** Disable the segment. @since v7.7.0 */\n  @Prop() disabled: boolean = false;\n\n  /** This event is used by the `pn-segmented-control` component. Do not use manually. */\n  @Event() segmentHover: EventEmitter<MouseEvent>;\n  handleHover(mouse: MouseEvent) {\n    this.segmentHover.emit(mouse);\n  }\n\n  render() {\n    return (\n      <Host onMouseEnter={(event: MouseEvent) => this.handleHover(event)}>\n        <input\n          class=\"pn-segment\"\n          id={this.segmentid}\n          name={this.name}\n          checked={this.selected}\n          type=\"radio\"\n          value={this.value}\n          disabled={this.disabled}\n        />\n        <label htmlFor={this.segmentid} class=\"pn-segment-label\">\n          {this.icon && <pn-icon icon={this.icon} color=\"blue700\"></pn-icon>}\n          <span class=\"pn-segment-text\">\n            {this.label}\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/umd/modules/@postnord/web-components/components/pn-segmented-control.js.map

@@ -1 +0,0 @@
-{"file":"pn-segmented-control.js","mappings":"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","names":["PnSegmentedControl","__stencil_proxyCustomElement"],"sources":["src/components/input/pn-segmented-control/pn-segmented-control.scss?tag=pn-segmented-control","src/components/input/pn-segmented-control/pn-segmented-control.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-segmented-control {\n  position: relative;\n  display: inline-block;\n  max-width: 100%;\n  overflow: hidden;\n  border-radius: 3em;\n  transform: translateZ(0);\n  @include main.pn-transition('outline-color');\n  @include main.pn-focus-base;\n\n  &:focus-within,\n  &:active {\n    @include main.pn-focus-visible;\n  }\n}\n\npn-segmented-control .pn-segmented-control {\n  display: flex;\n  align-items: center;\n  border-radius: 3em;\n  min-height: 3em;\n  padding: 0.25em;\n  background: main.$gray50;\n  position: relative;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n\n  &:hover .pn-sc-bg[data-hover] {\n    opacity: 1;\n  }\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  .pn-sc-bg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    will-change: transform;\n    left: 0;\n    border-radius: inherit;\n    @include main.pn-transition('width, transform, background-color, opacity, box-shadow');\n\n    &[data-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      border: 0.0625em solid main.$blue700;\n      background-color: main.$white;\n      z-index: 1;\n    }\n\n    &[data-hover] {\n      background-color: main.$blue50;\n      opacity: 0;\n      border: 0.25em solid transparent;\n      z-index: 0;\n      &[data-disabled] {\n        border-color: main.$gray100;\n        background-color: main.$gray100;\n      }\n    }\n\n    &[data-disabled] {\n      border-color: main.$gray100;\n      background-color: main.$gray100;\n    }\n  }\n}\n\n/*---------------------------------------ARROWS-------------------------------------------*/\npn-segmented-control .pn-sc-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\n  svg {\n    width: 1.5em;\n\n    &.pn-icon-svg path {\n      fill: main.$blue700;\n    }\n  }\n\n  > .pn-sc-arrow {\n    cursor: pointer;\n    pointer-events: all;\n\n    width: 2.5em;\n    height: 2.5em;\n\n    background: main.$white;\n    border: none;\n    outline: none;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    opacity: 0;\n    will-change: transform;\n    -webkit-tap-highlight-color: transparent;\n\n    @include main.pn-transition('transform, opacity, background-color, box-shadow');\n\n    &.pn-sc-arrow-left {\n      transform: translateX(-100%);\n      border-radius: 0 50% 50% 0;\n      padding: 0 0.3em 0 0;\n      box-shadow: 0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);\n    }\n\n    &.pn-sc-arrow-right {\n      transform: translateX(100%);\n      border-radius: 50% 0 0 50%;\n      box-shadow: -0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);\n    }\n  }\n\n  &.pn-sc-left-visible .pn-sc-arrow-left,\n  &.pn-sc-right-visible .pn-sc-arrow-right {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n/*---------------------------------------/ARROWS-------------------------------------------*/\n","import { Component, Element, Prop, h, Host, Listen, State, Watch, forceUpdate } from '@stencil/core';\nimport { arrow_left, arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n/**\n * The `pn-segmented-control` and `pn-segmented` is built with native `input[type=\"radio\"]` in the background.\n * This means you can use native events to listen to the changes.\n *\n * @nativeChange Use the `change` event to listen when the segment state is being changed.\n */\n@Component({\n  tag: 'pn-segmented-control',\n  styleUrl: 'pn-segmented-control.scss',\n})\nexport class PnSegmentedControl {\n  mo: MutationObserver;\n\n  segmentContainer: HTMLDivElement;\n  segments: HTMLPnSegmentElement[] = [];\n  activeBg: HTMLDivElement;\n  hoverBg: HTMLDivElement;\n\n  scrollRegistered: boolean = false;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() showScrollArrows: boolean = false;\n  @State() showLeftArrow: boolean = false;\n  @State() showRightArrow: boolean = false;\n\n  /** This is the name of the radio buttons inside the controller. @deprecated Set the name in the nested `pn-segment` components. */\n  @Prop() name!: string;\n  /** Currently active segment value. */\n  @Prop({ mutable: true }) value: string;\n\n  @Watch('value')\n  valueHandler() {\n    this.setActiveSegment();\n  }\n\n  @Listen('change')\n  changeHandler(event: InputEvent) {\n    const target = event.target as HTMLInputElement;\n\n    this.value = target.value;\n    this.setActiveSegment();\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.rerender();\n  }\n\n  @Listen('segmentHover')\n  handleHover(event: CustomEvent) {\n    const { target } = event.detail;\n    this.calcHighlight(target, true);\n  }\n\n  componentDidLoad() {\n    if (this.mo) this.mo.disconnect();\n\n    this.mo = new MutationObserver(() => {\n      forceUpdate(this.hostElement);\n      this.setSegments();\n    });\n\n    this.mo.observe(this.hostElement, { childList: true });\n\n    this.setSegments();\n  }\n\n  setSegments() {\n    this.segments = Array.from(this.hostElement.querySelectorAll('pn-segment'));\n    this.setActiveSegment();\n  }\n\n  setActiveSegment() {\n    this.segments.forEach(segmentEl => {\n      if (this.value === segmentEl.value) segmentEl.setAttribute('selected', 'true');\n      else segmentEl.removeAttribute('selected');\n    });\n    this.rerender();\n  }\n\n  rerender() {\n    requestAnimationFrame(() => {\n      this.calcHighlight();\n      this.scrollArrowRender();\n    });\n  }\n\n  /*---------------------------------------HIGHLIGHT LOGIC-------------------------------------------*/\n  calcHighlight(element?: HTMLElement, hover?: boolean) {\n    const chip = hover ? this.hoverBg : this.activeBg;\n    requestAnimationFrame(() => {\n      const el = element || this.segments.find(({ value }) => value === this.value);\n      const elSegment = el?.closest('pn-segment');\n      if (!elSegment) return;\n      const elRect = elSegment.getBoundingClientRect();\n      const { left: hostLeft } = this.segmentContainer.getBoundingClientRect();\n      const { left: segmentLeft, height: segmentHeight, width: segmentWidth } = elRect;\n\n      const offset = segmentLeft - hostLeft + this.segmentContainer.scrollLeft;\n\n      chip.style.setProperty('transform', `translate(${offset}px, -50%`);\n      chip.style.setProperty('width', `${segmentWidth}px`);\n      chip.style.setProperty('height', `${segmentHeight}px`);\n      (el as HTMLPnSegmentElement).disabled ? (chip.dataset.disabled = '') : delete chip.dataset.disabled;\n    });\n  }\n  /*---------------------------------------/HIGHLIGHT LOGIC-------------------------------------------*/\n\n  /*---------------------------------------SCROLL ARROW LOGIC-------------------------------------------*/\n  scrollArrowRender() {\n    if (this.segmentContainer.scrollWidth > this.segmentContainer.clientWidth) {\n      this.showScrollArrows = true;\n\n      if (!this.scrollRegistered) {\n        this.segmentContainer.addEventListener('scroll', this.scrollArrowRender.bind(this));\n        this.scrollRegistered = true;\n      }\n\n      const amountScrolled = Math.round(this.segmentContainer.scrollWidth - this.segmentContainer.scrollLeft);\n      const distanceToEnd = amountScrolled - this.segmentContainer.clientWidth;\n      const distanceToStart = this.segmentContainer.scrollLeft;\n\n      this.showLeftArrow = distanceToStart > 0;\n      this.showRightArrow = distanceToEnd > 0;\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.segmentContainer.scrollLeft + val;\n\n    this.segmentContainer.scroll({\n      left: amount,\n      behavior: 'smooth',\n    });\n  }\n\n  scrollArrowClasses() {\n    const list = ['pn-sc-arrows'];\n\n    if (this.showLeftArrow) list.push('pn-sc-left-visible');\n    if (this.showRightArrow) list.push('pn-sc-right-visible');\n\n    return list.join(' ');\n  }\n  /*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-segmented-control\" ref={el => (this.segmentContainer = el)}>\n          <slot />\n          <div class=\"pn-sc-bg\" data-active ref={el => (this.activeBg = el)}></div>\n          <div class=\"pn-sc-bg\" data-hover ref={el => (this.hoverBg = el)}></div>\n        </div>\n\n        <div class={this.scrollArrowClasses()} hidden={!this.showScrollArrows}>\n          <button\n            aria-label=\"Left\"\n            class=\"pn-sc-arrow pn-sc-arrow-left\"\n            onClick={() => this.scroll(-120)}\n            tabindex=\"-1\"\n          >\n            <pn-icon icon={arrow_left} />\n          </button>\n\n          <button\n            aria-label=\"Right\"\n            class=\"pn-sc-arrow pn-sc-arrow-right\"\n            onClick={() => this.scroll(120)}\n            tabindex=\"-1\"\n          >\n            <pn-icon icon={arrow_right} />\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"pn-select.js","mappings":";;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -1 +0,0 @@
-{"file":"pn-select2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"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"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"pn-spinner.js","mappings":";;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -1 +0,0 @@
-{"file":"pn-spinner2.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,u8BAAu8B;;MCO/8B,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;;;;;;;;;IAIZ,KAAK,GAAY,KAAK;;IAEtB,IAAI,GAAW,GAAG;IAElB,QAAQ,GAAA;QACd,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,MAAM;AAC7B,QAAA,OAAO,SAAS;;IAGV,OAAO,GAAA;AACb,QAAA,OAAO,CAAG,EAAA,IAAI,CAAC,IAAI,IAAI;;IAGzB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,oBAAoB,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,EACrF,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EAAA,EAEX,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,cAAA,EAAc,GAAG,EAAG,CAAA,EAC5E,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,GAAG,CACxD,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/feedback/pn-spinner/pn-spinner.scss?tag=pn-spinner","src/components/feedback/pn-spinner/pn-spinner.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-spinner {\n  display: inline-block;\n}\n\npn-spinner .pn-spinner {\n  --pn-spinner-size: 1.5em;\n  --pn-spinner-color: main.$blue700;\n\n  height: var(--pn-spinner-size);\n  width: var(--pn-spinner-size);\n  display: block;\n\n  animation: rotate 1s infinite;\n  animation-timing-function: main.$easing;\n\n  @media (prefers-reduced-motion: reduce) {\n    animation-duration: 2s;\n  }\n\n  &-circle {\n    stroke: var(--pn-spinner-color);\n    transform-origin: center center;\n    transform: rotate(-310deg);\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 64;\n    animation: loading 2s infinite;\n    animation-timing-function: main.$easing;\n\n    @media (prefers-reduced-motion: reduce) {\n      animation-duration: 4s;\n    }\n  }\n\n  &-dot {\n    fill: var(--pn-spinner-color);\n  }\n}\n\n@keyframes loading {\n  0% {\n    stroke-dashoffset: 55;\n  }\n  50% {\n    stroke-dashoffset: 12;\n  }\n  100% {\n    stroke-dashoffset: 55;\n  }\n}\n\n@keyframes rotate {\n  from {\n    transform: rotate(-180deg) scaleX(-1);\n  }\n  to {\n    transform: rotate(180deg) scaleX(-1);\n  }\n}\n","import { Component, Element, Prop, h, Host } from '@stencil/core';\n\n/** Display a spinner to indicate a loading state. */\n@Component({\n  tag: 'pn-spinner',\n  styleUrl: 'pn-spinner.scss',\n})\nexport class PnSpinner {\n  @Element() hostElement: HTMLElement;\n\n  /** Light version of the spinner. */\n  @Prop() light: boolean = false;\n  /** Size in em. */\n  @Prop() size: number = 1.5;\n\n  private getColor() {\n    if (this.light) return '#fff';\n    return '#005d92';\n  }\n\n  private getSize() {\n    return `${this.size}em`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <svg\n          class=\"pn-spinner\"\n          style={{ '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n        >\n          <circle class=\"pn-spinner-circle\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"3\" />\n          <circle class=\"pn-spinner-dot\" cx=\"21.3\" cy=\"16\" r=\"1.48\" />\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"pn-tab.js","mappings":"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","names":["PnTab","__stencil_proxyCustomElement"],"sources":["src/components/navigation/pn-tablist/tab/pn-tab.scss?tag=pn-tab","src/components/navigation/pn-tablist/tab/pn-tab.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-tab {\n  position: relative;\n  overflow: hidden;\n  flex-shrink: 0;\n  scroll-snap-align: center;\n  display: inline-block;\n  border-radius: 0.5em;\n}\n\npn-tab .pn-tab {\n  position: relative;\n  cursor: pointer;\n\n  margin: 1em 0.25em;\n  padding: 0 0.25em;\n\n  border: none;\n  border-radius: 0.5em;\n\n  color: main.$gray900;\n  background-color: transparent;\n\n  font-family: inherit;\n  font-size: 1em;\n  font-weight: 500;\n  text-decoration: none;\n\n  display: flex;\n  gap: 0.5em;\n  align-items: center;\n  justify-content: center;\n\n  -webkit-tap-highlight-color: transparent;\n\n  @include main.pn-ripple(main.$blue700);\n  @include main.pn-transition('color, outline-color, background-color');\n  @include main.pn-focus-base;\n\n  &-label {\n    line-height: 1.5em;\n  }\n\n  &:focus-visible {\n    overflow: hidden;\n    @include main.pn-focus-visible(main.$blue700, main.$white);\n  }\n\n  &[aria-selected='true'],\n  &[aria-current='page'] {\n    color: main.$blue700;\n    &:focus {\n      color: main.$blue900;\n      pn-icon > .pn-icon-svg {\n        path,\n        polygon {\n          fill: main.$blue900;\n        }\n      }\n    }\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Element, h, Host, forceUpdate } from '@stencil/core';\nimport { ripple } from '@/globals/helpers';\n\n/**\n * This tab should control a tab panel.\n * Use the `ariacontrols` and `tabid` props to connect the tab with the tab panel.\n * The tab panel should in turn have `aria-labelledby` set to the `tabid` of the tab.\n *\n * If you use the `href` prop, the tab will turn into an anchor element instead of a button.\n * This does not required the ariacontrols and tabid props.\n */\n@Component({\n  tag: 'pn-tab',\n  styleUrl: 'pn-tab.scss',\n})\nexport class PnTab {\n  private mo: MutationObserver;\n  private tag: string = 'button';\n\n  @Element() hostElement: HTMLElement;\n\n  /** Set a label for the tab. */\n  @Prop() label!: string;\n  /** This is the value that will be matched with `pn-tablist` value. (required) */\n  @Prop() value!: string;\n  /** Turns the tab from a `button` to an `a` element, but only if the `pn-tablist` is inside a `pn-header`. */\n  @Prop() href?: string;\n  /** The SVG content of the icon you want to display */\n  @Prop() icon?: string;\n  /** Use the ID of the container that this tab controls.  */\n  @Prop() ariacontrols?: string;\n  /** Tab ID, use if you want to have the tab container be `aria-labelledby` by this tab. */\n  @Prop() tabid?: string;\n  /** Is set by `pn-tablist`, don't use this prop. @hide true */\n  @Prop() activeTab: string;\n\n  /** Used by `pn-tab` to communicate with `pn-tablist`. Emits the selected tab value and element. */\n  @Event() setActiveTab: EventEmitter<{ val: string; el: HTMLElement }>;\n  setActiveTabHandler({ click = false, element }: { click?: boolean; element?: HTMLPnTabElement } = {}) {\n    if (click || this.isActive()) {\n      const val = element?.value || this.value;\n      const el = ((element?.value && element) || this.hostElement) as HTMLElement;\n\n      this.setActiveTab.emit({\n        val,\n        el,\n      });\n    }\n  }\n\n  /** Used by `pn-tab` to communicate with `pn-tablist`. Emits when the tab gets focus. */\n  @Event() tabEnter: EventEmitter<MouseEvent | FocusEvent>;\n  triggerEnter(event: MouseEvent | FocusEvent) {\n    this.tabEnter.emit(event);\n  }\n\n  /** Used by `pn-tab` to communicate with `pn-tablist`. Emits when the tab is blured.  */\n  @Event() tabLeave: EventEmitter<MouseEvent | FocusEvent>;\n  triggerLeave(event: MouseEvent | FocusEvent) {\n    this.tabLeave.emit(event);\n  }\n\n  connectedCallback() {\n    this.mo = new MutationObserver(() => forceUpdate(this.hostElement));\n    this.mo.observe(this.hostElement, { subtree: true, childList: true });\n  }\n\n  disconnectedCallback() {\n    this.mo?.disconnect();\n  }\n\n  componentWillLoad() {\n    this.tabTag();\n  }\n\n  componentDidUpdate() {\n    this.setActiveTabHandler();\n  }\n\n  componentDidLoad() {\n    this.setActiveTabHandler();\n  }\n\n  private arrowKeyNav(event: KeyboardEvent) {\n    if (!/^(ArrowRight|ArrowLeft|Home|End)$/.test(event.key)) return;\n\n    event.preventDefault();\n\n    // Get tablist parent\n    const parent = (event.target as HTMLButtonElement | HTMLLinkElement).closest<HTMLPnTablistElement>('pn-tablist');\n    const list = Array.from(parent.querySelectorAll('pn-tab'));\n\n    const first = list[0];\n    const last = list[list.length - 1];\n\n    const nextElement = this.hostElement.nextElementSibling as HTMLPnTabElement;\n    const previousElement = this.hostElement.previousElementSibling as HTMLPnTabElement;\n\n    if (event.key === 'Home') this.setActiveTabHandler({ element: first });\n\n    if (event.key === 'End') this.setActiveTabHandler({ element: last });\n\n    if (event.key === 'ArrowRight') {\n      // Check the next element value. We do this because the last element i a DIV element. If no value, go to the first element.\n      this.setActiveTabHandler({ element: nextElement?.value ? nextElement : first });\n    }\n    if (event.key === 'ArrowLeft') {\n      // Go to the last element if there is no element to your left.\n      this.setActiveTabHandler({ element: previousElement?.value ? previousElement : last });\n    }\n  }\n\n  private isActive() {\n    return this.activeTab === this.value;\n  }\n\n  private tabTag() {\n    const isMenu = this.hostElement.closest<HTMLPnTablistElement>('pn-tablist');\n    this.tag = isMenu.slot === 'menu' ? 'a' : 'button';\n  }\n\n  private renderProperties() {\n    return this.tag === 'a'\n      ? {\n          'href': this.href,\n          'aria-current': this.isActive() ? 'page' : 'false',\n        }\n      : {\n          'tabindex': this.isActive() ? 0 : -1,\n          'type': 'button',\n          'role': 'tab',\n          'aria-selected': this.isActive().toString(),\n          'aria-controls': this.ariacontrols,\n        };\n  }\n\n  private iconColor() {\n    return this.isActive() ? 'blue700' : 'gray900';\n  }\n\n  private handleClick(e: MouseEvent) {\n    this.setActiveTabHandler({ click: true });\n    ripple(e, this.hostElement, '.pn-tab');\n  }\n\n  render() {\n    const Tag = this.tag;\n    return (\n      <Host>\n        <Tag\n          id={this.tabid}\n          class=\"pn-tab\"\n          {...this.renderProperties()}\n          onClick={(e: MouseEvent) => this.handleClick(e)}\n          onMouseEnter={(e: MouseEvent) => this.triggerEnter(e)}\n          onFocus={(e: FocusEvent) => this.triggerEnter(e)}\n          onMouseLeave={(e: MouseEvent) => this.triggerLeave(e)}\n          onBlur={(e: FocusEvent) => this.triggerLeave(e)}\n          onKeyDown={(e: KeyboardEvent) => this.arrowKeyNav(e)}\n        >\n          {!!this.icon && <pn-icon icon={this.icon} color={this.iconColor()} />}\n          <slot></slot>\n          <span class=\"pn-tab-label\">{this.label}</span>\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"pn-table.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,owHAAowH;;MCa1wHA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;;;;;;;;;IAIV,IAAI,GAAY,KAAK;;IAErB,QAAQ,GAAY,KAAK;;IAEzB,OAAO,GAAY,KAAK;IAEhC,aAAa,GAAA;QACX,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,EAAE,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,YAAY,CAAC;QAEjH,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG1C,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnTable","__stencil_proxyCustomElement"],"sources":["src/components/content/pn-table/pn-table.scss?tag=pn-table","src/components/content/pn-table/pn-table.tsx"],"sourcesContent":["@use 'src/globals/main';\n\n$table-border-color: main.$blue700;\n$table-border-active-color: main.$blue700;\n\n$border-width: main.$onepixel;\n\n$border: $border-width solid $table-border-color;\n\npn-table {\n  display: block;\n  margin-bottom: 1em;\n\n  .pn-table-container table {\n    width: 100%;\n\n    .column-wrapper {\n      display: flex;\n      gap: 0.5em;\n      width: 100%;\n      align-items: center;\n    }\n\n    &,\n    th,\n    td {\n      padding: 0;\n      margin: 0;\n      border: 0;\n      outline: 0;\n      border-collapse: collapse;\n      max-width: 100%;\n    }\n\n    th,\n    td {\n      text-align: left;\n      line-height: 2;\n      vertical-align: middle;\n      padding: 1em 1.15em;\n\n      &:first-child {\n        border-radius: 0.5em 0 0 0.5em;\n      }\n      &:last-child {\n        border-radius: 0 0.5em 0.5em 0;\n      }\n\n      pn-icon {\n        vertical-align: middle;\n      }\n    }\n\n    thead tr {\n      th,\n      td {\n        color: main.$blue700;\n        font-weight: 500;\n      }\n    }\n\n    tbody tr {\n      th,\n      td {\n        color: main.$gray900;\n        font-weight: 400;\n      }\n    }\n  }\n\n  &.bordered {\n    .pn-table-container table {\n      border-collapse: separate;\n      border-spacing: 0;\n\n      thead tr {\n        &:last-child {\n          th,\n          td {\n            border-bottom-width: $border-width;\n          }\n        }\n\n        &:first-child {\n          th,\n          td {\n            border-top: $border;\n          }\n        }\n\n        th,\n        td {\n          border-bottom: $border;\n\n          &:first-child {\n            border-left: $border;\n            border-radius: 0.5em 0 0;\n          }\n\n          &:last-child {\n            border-radius: 0 0.5em 0 0;\n            border-right: $border;\n          }\n        }\n      }\n\n      tbody tr {\n        th,\n        td {\n          border-bottom: $border-width solid main.$gray200;\n\n          &:first-child {\n            border-left: $border;\n            border-radius: 0;\n          }\n\n          &:last-child {\n            border-right: $border;\n            border-radius: 0;\n          }\n        }\n\n        &:last-of-type {\n          th,\n          td {\n            border-bottom: $border;\n          }\n\n          th:last-child,\n          td:last-child {\n            border-radius: 0 0 0.5em 0;\n          }\n          th:first-child,\n          td:first-child {\n            border-radius: 0 0 0 0.5em;\n          }\n        }\n      }\n    }\n\n    &.striped .pn-table-container table tbody tr {\n      th,\n      td {\n        border-bottom-width: 0;\n      }\n\n      &:last-child {\n        th,\n        td {\n          border-bottom-width: $border-width;\n        }\n      }\n    }\n  }\n\n  &.striped .pn-table-container table tbody tr:nth-child(odd) {\n    th,\n    td {\n      background-color: main.$blue25;\n    }\n  }\n\n  &.color-gray .pn-table-container table tbody tr:nth-child(odd) {\n    th,\n    td {\n      background-color: main.$gray25;\n    }\n  }\n}\n","import { Component, Element, Prop, Host, h } from '@stencil/core';\n\n/**\n * The `pn-table` component is just a wrapper for your HTML table element.\n * You need to create the markup, but the component will deal with the styling.\n *\n * We have a built in class for divs inside table colums called `column-wrapper`.\n * This will line up your content and provide a grid gap.\n **/\n@Component({\n  tag: 'pn-table',\n  styleUrl: 'pn-table.scss',\n})\nexport class PnTable {\n  @Element() hostElement: HTMLElement;\n\n  /** Use the gray variant instead of blue. */\n  @Prop() gray: boolean = false;\n  /** Add border to table. */\n  @Prop() bordered: boolean = false;\n  /** Make the table striped. */\n  @Prop() striped: boolean = false;\n\n  getClassNames(): string {\n    const classes = [this.striped && 'striped', this.bordered && 'bordered', this.gray ? 'color-gray' : 'color-blue'];\n\n    return classes.filter(Boolean).join(' ');\n  }\n\n  render() {\n    return (\n      <Host class={this.getClassNames()}>\n        <div class=\"pn-table-container\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -1 +0,0 @@
-{"file":"pn-tag.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,q2DAAq2D;;MCOz2DA,OAAK,iBAAAC,kBAAA,CAAA,MAAA,KAAA,SAAA,WAAA,CAAA;;;;;;;;AAER,IAAA,KAAK;AACb;;;;;;AAMG;AACK,IAAA,IAAI;;IAEJ,UAAU,GAAwD,EAAE;AAC5E;;;;;;;AAOG;IACK,IAAI,GAAa,KAAK;;IAEtB,KAAK,GAAa,KAAK;;IAEvB,KAAK,GAAa,KAAK;;IAEvB,MAAM,GAAa,KAAK;IAEhC,mBAAmB,GAAA;QACjB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,+DAAA,CAAiE,CAAC;;IAGjH,QAAQ,GAAA;QACN,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM;;IAGpC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,QAAQ,EAAA,iBAAA,EACG,IAAI,CAAC,UAAU,EAAA,WAAA,EACrB,CAAC,CAAC,IAAI,CAAC,IAAI,EAAA,WAAA,EACX,IAAI,CAAC,IAAI,EAAA,YAAA,EACR,IAAI,CAAC,KAAK,EAAA,aAAA,EACT,IAAI,CAAC,MAAM,EAAA,YAAA,EACZ,IAAI,CAAC,KAAK,EAAA,EAErB,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAY,CAAA,EACxD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnTag","__stencil_proxyCustomElement"],"sources":["src/components/content/pn-tag/pn-tag.scss?tag=pn-tag","src/components/content/pn-tag/pn-tag.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-tag {\n  display: inline-block;\n}\n\npn-tag .pn-tag {\n  display: inline-flex;\n  flex-direction: row;\n  gap: 0.5em;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: 0.5em;\n\n  /* Default size - Medium */\n  padding: 0.5em 1em;\n  &[data-icon] {\n    padding-left: 0.75em;\n  }\n\n  /* Default appearance */\n  background-color: rgba(main.$blue200, 0.3);\n  color: main.$blue900;\n  &[data-dark] {\n    background-color: main.$blue200;\n  }\n\n  pn-icon .pn-icon-svg path {\n    fill: main.$blue900;\n  }\n\n  &-label {\n    line-height: 1.5em;\n    font-weight: 400;\n  }\n\n  /* --------------------------------------- SIZES S + L --------------------------------------- */\n  /** Extra small tag */\n  &[data-xsmall] {\n    padding: 0 0.5em;\n    .pn-tag-label {\n      font-size: 0.875em;\n      line-height: 1.715em;\n    }\n  }\n  /** Small tag */\n  &[data-small] {\n    padding: 0.125em 0.5em;\n    .pn-tag-label {\n      font-size: 0.875em;\n      line-height: 1.715em;\n    }\n    &[data-icon] {\n      padding-left: 0.5em;\n    }\n  }\n  /** Large tag */\n  &[data-large] {\n    padding: 0.75em 1.25em;\n  }\n  /* --------------------------------------- /SIZES S + L --------------------------------------- */\n\n  /* --------------------------------------- APPEARANCE --------------------------------------- */\n  &[data-appearance='discrete'] {\n    background-color: rgba(main.$gray200, 0.3);\n    color: main.$gray900;\n    &[data-dark] {\n      background-color: main.$gray200;\n    }\n\n    pn-icon .pn-icon-svg path {\n      fill: main.$gray900;\n    }\n  }\n\n  &[data-appearance='positive'] {\n    background-color: rgba(main.$green200, 0.3);\n    color: main.$green900;\n    &[data-dark] {\n      background-color: main.$green200;\n    }\n\n    pn-icon .pn-icon-svg path {\n      fill: main.$green900;\n    }\n  }\n\n  &[data-appearance='warning'] {\n    background-color: rgba(main.$orange200, 0.3);\n    color: main.$orange700;\n    &[data-dark] {\n      background-color: main.$orange200;\n    }\n\n    pn-icon .pn-icon-svg path {\n      fill: main.$orange700;\n    }\n  }\n\n  &[data-appearance='error'] {\n    background-color: rgba(main.$coral200, 0.3);\n    color: main.$warning;\n    &[data-dark] {\n      background-color: main.$coral200;\n    }\n\n    pn-icon .pn-icon-svg path {\n      fill: main.$warning;\n    }\n  }\n  /* --------------------------------------- /APPEARANCE --------------------------------------- */\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/** The `pn-tag` is a non-interactive visual marker designed to emphasize important aspects of an item, such as its status. */\n@Component({\n  tag: 'pn-tag',\n  styleUrl: 'pn-tag.scss',\n})\nexport class PnTag {\n  /** The label of the tag. */\n  @Prop() label!: string;\n  /**\n   * Select icon from out `pn-design-assets` list. Works with any SVG content.\n   *\n   * **Please note**: Can not be used with the `xsmall` prop due to the small size.\n   *\n   * @see {@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs Get started with PostNord assets.}\n   */\n  @Prop() icon?: string;\n  /** Set tag appearance: `discrete`, `positive`, `warning` & `error`. @category Visual */\n  @Prop() appearance?: '' | 'discrete' | 'positive' | 'warning' | 'error' = '';\n  /**\n   * Set darker background-color on the tag.\n   *\n   * This is intended for better tag visibility on colored background.\n   *\n   * @category Visual\n   * @deprecated Will be removed in v8.0.0\n   */\n  @Prop() dark?: boolean = false;\n  /** Set larger tag. @category Size */\n  @Prop() large?: boolean = false;\n  /** Set smaller tag. @category Size */\n  @Prop() small?: boolean = false;\n  /** Set extra small tag. @since v7.11.0 @category Size */\n  @Prop() xsmall?: boolean = false;\n\n  componentWillRender() {\n    if (!!this.icon && this.xsmall) console.warn(`pn-tag: Icon was not rendered because tag size is set to xsmall`);\n  }\n\n  showIcon() {\n    return !!this.icon && !this.xsmall;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"pn-tag\"\n          data-appearance={this.appearance}\n          data-icon={!!this.icon}\n          data-dark={this.dark}\n          data-small={this.small}\n          data-xsmall={this.xsmall}\n          data-large={this.large}\n        >\n          {this.showIcon() && <pn-icon icon={this.icon}></pn-icon>}\n          <span class=\"pn-tag-label\">{this.label}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/umd/modules/@postnord/web-components/components/pn-text-link.js.map

@@ -1 +0,0 @@
-{"file":"pn-text-link.js","mappings":";;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/umd/modules/@postnord/web-components/components/pn-text-link2.js.map

@@ -1 +0,0 @@
-{"file":"pn-text-link2.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,m6CAAm6C;;MCO56C,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;;;;;;;;;AAIb,IAAA,KAAK;;AAEL,IAAA,IAAI;;IAGJ,KAAK,GAAY,KAAK;;AAEtB,IAAA,IAAI;;IAEJ,QAAQ,GAAY,KAAK;;AAGzB,IAAA,QAAQ;;AAER,IAAA,QAAQ;;AAER,IAAA,KAAK;;AAEL,IAAA,cAAc;;IAEd,GAAG,GAAW,qBAAqB;;AAEnC,IAAA,MAAM;;AAEN,IAAA,MAAM;IAEd,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,KAAK,EAAC,cAAc,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,IAAI,CAAC,cAAc,EAAA,WAAA,EACxB,CAAC,CAAC,IAAI,CAAC,IAAI,EACN,gBAAA,EAAA,IAAI,CAAC,QAAQ,EACjB,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,EAErB,IAAI,CAAC,KAAK,EACX,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/navigation/pn-text-link/pn-text-link.scss?tag=pn-text-link","src/components/navigation/pn-text-link/pn-text-link.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-text-link {\n  display: inline;\n}\n\npn-text-link .pn-text-link {\n  border-radius: 0.25em;\n  color: main.$blue700;\n  font-weight: 500;\n  text-decoration: underline;\n  font-size: 1em;\n\n  @include main.pn-transition('color, outline-color, text-decoration-color');\n  @include main.pn-focus;\n\n  &:hover {\n    color: main.$blue900;\n    text-decoration-color: main.$blue900;\n  }\n\n  &[data-icon] {\n    display: inline-flex;\n    gap: 0.25em;\n    align-items: center;\n    text-decoration-color: transparent;\n    padding: 0.1em;\n    border-radius: 0.5em;\n\n    .pn-icon-svg path {\n      fill: main.$blue700;\n    }\n\n    &:hover {\n      text-decoration-color: main.$blue900;\n    }\n\n    &:hover,\n    &:focus-visible {\n      .pn-icon-svg path {\n        fill: main.$blue900;\n      }\n    }\n\n    &[data-icon-left] {\n      flex-direction: row-reverse;\n    }\n  }\n\n  &[data-light] {\n    color: main.$white;\n    &:focus-visible {\n      @include main.pn-focus-visible(main.$white);\n    }\n    &:hover {\n      text-decoration-color: main.$white;\n    }\n    &[data-icon] pn-icon .pn-icon-svg path {\n      fill: main.$white;\n    }\n  }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n/** The `pn-text-link` is a styled `a` element with some extra functionality built in. Such as `icon` and `light` support.  */\n@Component({\n  tag: 'pn-text-link',\n  styleUrl: 'pn-text-link.scss',\n})\nexport class PnTextLink {\n  @Element() hostElement: HTMLElement;\n\n  /** The link text. @since v7.5.0 */\n  @Prop() label?: string;\n  /** The URL string. */\n  @Prop() href!: string;\n\n  /** Use the light version of the link. @category Visual */\n  @Prop() light: boolean = false;\n  /** SVG content of the icon. @category Visual */\n  @Prop() icon?: string;\n  /** Align the icon on the left. @category Visual */\n  @Prop() leftIcon: boolean = false;\n\n  /** Treat the link as a download link. @category Link attributes */\n  @Prop() download?: string;\n  /** Set the hreflang of the URL destination. @category Link attributes */\n  @Prop() hreflang?: string;\n  /** Link media. @category Link attributes */\n  @Prop() media?: string;\n  /** Set referrerpolicy on the link. @category Link attributes */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /** Set the rel of the link. @category Link attributes */\n  @Prop() rel: string = 'noopener noreferrer';\n  /** Set the target of the link. @category Link attributes */\n  @Prop() target?: string;\n  /** Set a unique html ID of the a element. @category Link attributes */\n  @Prop() linkid?: string;\n\n  render() {\n    return (\n      <a\n        id={this.linkid}\n        class=\"pn-text-link\"\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n        hreflang={this.hreflang}\n        media={this.media}\n        referrerPolicy={this.referrerpolicy}\n        data-icon={!!this.icon}\n        data-icon-left={this.leftIcon}\n        data-light={this.light}\n      >\n        {this.label}\n        <slot></slot>\n        {this.icon && <pn-icon icon={this.icon} />}\n      </a>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"pn-textarea.js","mappings":"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","names":["PnTextarea","__stencil_proxyCustomElement"],"sources":["src/components/input/pn-textarea/pn-textarea.scss?tag=pn-textarea","src/components/input/pn-textarea/pn-textarea.tsx"],"sourcesContent":["@use 'src/globals/main';\n\n$resize-icon-default: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M7%2017L17%207M12%2017L17%2012%22%20stroke%3D%22%23005D92%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E';\n\npn-textarea {\n  display: inline-flex;\n  flex-direction: column;\n}\n\npn-textarea .pn-textarea {\n  // Label container\n  &-label {\n    @include main.pn-input-label;\n  }\n\n  &-text {\n    @include main.pn-input-helpertext;\n    > pn-icon {\n      margin-right: 0.25em;\n    }\n  }\n\n  &-element {\n    @include main.pn-input-field;\n    @include main.pn-scrollbar;\n\n    width: 100%;\n    resize: none;\n\n    &:read-only {\n      @include main.pn-readonly;\n    }\n\n    &::-webkit-resizer {\n      background-image: url($resize-icon-default);\n      background-repeat: no-repeat;\n      background-position: center;\n    }\n  }\n\n  &[data-valid] {\n    > .pn-textarea-label {\n      color: main.$label-color-success;\n    }\n    > .pn-textarea-element {\n      @include main.pn-input-field-success;\n    }\n  }\n\n  &[data-error] {\n    > .pn-textarea-label {\n      color: main.$label-color-error;\n    }\n    > .pn-textarea-element {\n      @include main.pn-input-field-error;\n    }\n    > .pn-textarea-text[role='alert'] {\n      color: main.$helpertext-color-error;\n    }\n  }\n\n  &[data-resize] > .pn-textarea-element {\n    resize: vertical;\n  }\n}\n","import { Component, Host, Prop, h, State, Element } from '@stencil/core';\nimport { uuidv4 } from '@/globals/helpers';\n\n/**\n * The `pn-textarea` is built with a native `textarea`.\n * This means you can use native events to listen to the input.\n *\n * @nativeInput Use the `input` event to listen to content being modified by the user.\n */\n@Component({\n  tag: 'pn-textarea',\n  styleUrl: 'pn-textarea.scss',\n})\nexport class PnTextarea {\n  id: string = `pn-textarea-${uuidv4()}`;\n  idHelper: string = `${this.id}-text`;\n\n  @Element() hostElement: HTMLElement;\n\n  /** The textarea content */\n  @State() content: number;\n\n  /** The label describing the textarea. */\n  @Prop() label!: string;\n  /** The textarea content, do not provide slotted content. */\n  @Prop() value: string = '';\n  /** Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string */\n  @Prop() helpertext?: string;\n\n  /** A unique ID connecting the element to the label. @category HTML Textarea */\n  @Prop() textareaid?: string = this.id;\n  /** HTML name. @category HTML Textarea */\n  @Prop() name?: string;\n  /** Set the associated form. @category HTML Textarea*/\n  @Prop() form?: string;\n  /** Set the row count for the textarea. @category HTML Textarea */\n  @Prop() rows?: number = 2;\n  /** Set the col count for the textarea. @category HTML Textarea */\n  @Prop() cols?: number = 20;\n  /** Set the wrap control. @category HTML Textarea */\n  @Prop() wrap?: string = 'soft';\n  /** The maximum number of characters the user should be able to add, also adds a visible counter. @category HTML Textarea */\n  @Prop() maxlength?: number;\n  /** Allow the browser to autocomplete the textarea. @category HTML Textarea */\n  @Prop() autocomplete?: string = 'off';\n  /** Allow the browser to spellcheck the textarea. @category HTML Textarea */\n  @Prop() spellcheck: boolean = false;\n  /** Placeholder for the textarea. @category HTML Textarea */\n  @Prop() placeholder?: string;\n  /** Allow the user to resize the textarea vertically. Handle width in your own layout. @category HTML Textarea */\n  @Prop() resize?: boolean = false;\n  /** Make the textarea required. @category HTML Textarea */\n  @Prop() required?: boolean = false;\n\n  /** Set the textarea as `valid`, will make the Label and focus rings green. @category State */\n  @Prop() valid?: boolean = false;\n  /** Set the textarea as `invalid`, will make the Label and focus rings red. @category State */\n  @Prop() invalid?: boolean = false;\n  /** Same as `invalid`, but will display the string as an error message under the textarea. @category State */\n  @Prop() error?: string;\n  /** Disable the textarea. @category State */\n  @Prop() disabled?: boolean = false;\n  /** Make the textarea readonly. @category State */\n  @Prop() readonly?: boolean = false;\n\n  componentWillLoad() {\n    if (this.textareaid !== this.id) {\n      this.idHelper = `${this.textareaid}-helper`;\n    }\n  }\n\n  setVal(event: Event) {\n    const value = (event.target as HTMLTextAreaElement).value;\n    this.value = value;\n  }\n\n  hasError(): boolean {\n    return this.invalid || !!this.error;\n  }\n\n  hasMessage(): boolean {\n    return !!(this.helpertext?.length || this.error?.length);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-textarea\" data-valid={this.valid} data-error={this.hasError()} data-resize={this.resize}>\n          <label class=\"pn-textarea-label\" htmlFor={this.textareaid}>\n            <span>{this.label}</span>\n            {this.maxlength >= 1 && <span>{`${this.value?.length || 0}/${this.maxlength}`}</span>}\n          </label>\n          <textarea\n            class=\"pn-textarea-element\"\n            id={this.textareaid}\n            name={this.name}\n            rows={this.rows}\n            cols={this.cols}\n            wrap={this.wrap}\n            autocomplete={this.autocomplete}\n            spellcheck={this.spellcheck}\n            placeholder={this.placeholder}\n            maxlength={this.maxlength}\n            required={this.required}\n            disabled={this.disabled}\n            readonly={this.readonly}\n            aria-describedby={this.hasMessage() ? this.idHelper : null}\n            aria-invalid={this.hasError().toString()}\n            onInput={e => this.setVal(e)}\n            value={this.value}\n          />\n\n          {this.hasMessage() && (\n            <p id={this.idHelper} class=\"pn-textarea-text\" role={this.error?.length ? 'alert' : null}>\n              <span>{this.error || this.helpertext}</span>\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"pn-tile.js","mappings":"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","names":["PnTile","__stencil_proxyCustomElement"],"sources":["src/components/navigation/pn-tile/pn-tile.scss?tag=pn-tile","src/components/navigation/pn-tile/pn-tile.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-tile {\n  position: relative;\n  display: block;\n}\n\npn-tile .pn-tile {\n  position: relative;\n\n  overflow: hidden;\n  word-break: break-word;\n  text-align: center;\n\n  border-radius: 0.5em;\n\n  padding: clamp(0.75em, 3vw, 1.5em);\n\n  height: 100%;\n\n  color: main.$gray900;\n  background-color: main.$white;\n  box-shadow:\n    0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11),\n    0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);\n\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  gap: clamp(1em, 5vw, 1.5em);\n\n  @include main.pn-focus-base();\n  @include main.pn-transition('box-shadow, background-color, outline-color');\n\n  @include main.pn-ripple(main.$blue700);\n\n  &[data-horizontal] {\n    text-align: left;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    gap: clamp(1em, 5vw, 1.5em);\n    .pn-tile-illustration[data-circle]:before {\n      clip-path: ellipse(0% 100% at 0% 50%);\n    }\n    .pn-tile-text {\n      flex-grow: 2;\n    }\n  }\n\n  &[data-href][data-focus] {\n    @include main.pn-focus-visible();\n    box-shadow:\n      0em 0em 0em 0em rgba(20, 20, 20, 0.11),\n      0em 0em 0em 0em rgba(0, 0, 0, 0.13);\n  }\n\n  &[data-href]:hover {\n    background-color: rgba(#b7ebfc, 0.3);\n  }\n\n  &[data-href]:hover,\n  &[data-href]:focus-within {\n    .pn-tile-illustration[data-circle]:before {\n      clip-path: ellipse(100% 50% at 50% -25%);\n    }\n    &[data-horizontal] .pn-tile-illustration[data-circle]:before {\n      clip-path: ellipse(50% 100% at -25% 50%);\n    }\n\n    .pn-tile-link {\n      color: main.$blue900;\n      text-decoration-color: main.$blue900;\n    }\n\n    pn-icon .pn-icon-svg path {\n      fill: main.$blue900;\n    }\n  }\n\n  &-illustration {\n    z-index: 2;\n    flex: 1 1;\n    max-width: 7.5em;\n    max-height: 7.5em;\n\n    &[data-icon] {\n      flex: 0 0;\n      pn-icon {\n        padding: 1em;\n        border-radius: 50%;\n        background-color: main.$blue50;\n        > svg {\n          font-size: 2em;\n        }\n      }\n    }\n\n    &-slot {\n      display: block;\n      height: 100%;\n      width: 100%;\n    }\n\n    &[data-circle]:before {\n      content: '';\n      position: absolute;\n      z-index: -1;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(183, 235, 252, 0.7);\n\n      background-color: rgba(#b7ebfc, 0.7);\n      clip-path: ellipse(100% 0% at 50% 0%);\n\n      @include main.pn-transition('clip-path');\n    }\n  }\n\n  &-text {\n    z-index: 3;\n    flex: 1 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5em;\n  }\n\n  &-link {\n    cursor: pointer;\n    color: main.$blue700;\n    text-decoration: underline;\n    text-decoration-color: transparent;\n    -webkit-tap-highlight-color: transparent;\n\n    @include main.pn-transition('color, text-decoration-color');\n\n    &:focus {\n      outline: 0;\n      text-decoration-color: main.$blue900;\n      color: main.$blue900;\n    }\n\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n      opacity: 0;\n    }\n  }\n\n  &-title {\n    font-family: inherit;\n    font-weight: 700;\n    font-size: clamp(1.25em, 3vw, 1.5em);\n    margin: 0em;\n\n    pn-icon {\n      margin-left: 0.25em;\n      vertical-align: middle;\n    }\n  }\n\n  &-slot {\n    font-weight: 400;\n    color: main.$gray700;\n\n    display: flex;\n    flex-direction: column;\n    gap: 0.25em;\n  }\n\n  &-paragraph,\n  p {\n    font-size: 0.875em;\n    &:last-child {\n      margin: 0em;\n    }\n  }\n}\n","import { Host, Component, State, Prop, h, Element, Event, EventEmitter, forceUpdate } from '@stencil/core';\nimport { open_in_new } from 'pn-design-assets/pn-assets/icons.js';\nimport { ripple } from '@/globals/helpers';\n\n/**\n * The `pn-tile` is a navigational element that is intended to be accompanied by an illustration.\n *\n * It is very important that you use the `label` and `url`. This component renders an `a` element if the URL prop is set,\n * so you do not need to wrap or nest the tile in another `a` element. Doing so makes the component inaccessible.\n *\n * @slot illustration - Set a custom SVG. We recommend you use the `pn-illustration` component.\n * This is the same as the `illustration` prop.\n */\n@Component({\n  tag: 'pn-tile',\n  styleUrl: 'pn-tile.scss',\n})\nexport class PnTile {\n  private mo: MutationObserver;\n\n  private tile: HTMLDivElement;\n  private illustrationSlot: HTMLDivElement;\n\n  @State() visibleOutline: boolean = false;\n\n  @Element() hostElement: HTMLElement;\n\n  /** Label of the link. This is required for the component to be accessible. */\n  @Prop() label!: string;\n  /** Set a string of text for the tile. Same as the default slot. @since v7.12.0 */\n  @Prop() text?: string;\n\n  /** The link of the tile. This is required for the component to be accessible. @category href */\n  @Prop() url!: string;\n  /** The target attribute of the link. @category href */\n  @Prop() target?: string;\n  /** The rel attribute of the link. @category href */\n  @Prop() rel?: string = 'noopener noreferrer';\n\n  /** The SVG content of an illustration. @category Image */\n  @Prop() illustration?: string;\n  /** The SVG content of a decorative icon. @since v7.12.0 @category Image */\n  @Prop() icon?: string;\n\n  /** Use the horizontal tile. @category Layout */\n  @Prop() horizontal?: boolean = false;\n\n  /**\n   * Emitted when the link is clicked. Use the `click` property to `preventDefault`\n   * if you wish to perform the navigation programmatically.\n   * @since v7.12.0\n   **/\n  @Event() pnTile: EventEmitter<{ click: MouseEvent }>;\n\n  connectedCallback() {\n    this.mo = new MutationObserver(() => forceUpdate(this.hostElement));\n    this.mo.observe(this.hostElement, { subtree: true, childList: true });\n  }\n\n  disconnectedCallback() {\n    this.mo?.disconnect();\n  }\n\n  private isExternal() {\n    return this.target === '_blank';\n  }\n\n  private showIcon() {\n    return !!this.icon && !this.showSlotIllustration();\n  }\n\n  private showPropIllustration() {\n    return !!this.illustration && !this.showSlotIllustration();\n  }\n\n  private showSlotIllustration() {\n    return !!this.illustrationSlot?.querySelector('[slot=\"illustration\"]');\n  }\n\n  private showImage() {\n    return this.showIcon() || this.showPropIllustration() || this.showSlotIllustration();\n  }\n\n  private handleFocus({ type, target }: FocusEvent) {\n    this.visibleOutline = type === 'focus' && (target as HTMLLinkElement).matches(':focus-visible');\n  }\n\n  private clickHandler(event: MouseEvent): void {\n    ripple(event, this.tile);\n    this.pnTile.emit({ click: event });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"pn-tile\"\n          data-horizontal={this.horizontal}\n          data-href={!!this.url}\n          data-focus={this.visibleOutline}\n          ref={el => (this.tile = el)}\n        >\n          <div\n            class=\"pn-tile-illustration\"\n            data-circle={!!this.url}\n            data-icon={this.showIcon()}\n            role=\"presentation\"\n            hidden={!this.showImage()}\n          >\n            {this.showPropIllustration() ? (\n              <pn-illustration illustration={this.illustration} />\n            ) : (\n              this.showIcon() && <pn-icon color=\"blue700\" icon={this.icon} />\n            )}\n\n            <div\n              class=\"pn-tile-illustration-slot\"\n              hidden={!this.showSlotIllustration()}\n              ref={el => (this.illustrationSlot = el)}\n            >\n              <slot name=\"illustration\" />\n            </div>\n          </div>\n\n          <div class=\"pn-tile-text\">\n            <h3 class=\"pn-tile-title\">\n              {this.url ? (\n                <a\n                  class=\"pn-tile-link\"\n                  href={this.url}\n                  target={this.target}\n                  rel={!this.rel && this.isExternal() ? 'noopener noreferrer' : this.rel}\n                  onClick={e => this.clickHandler(e)}\n                  onFocus={event => this.handleFocus(event)}\n                  onBlur={event => this.handleFocus(event)}\n                >\n                  {this.label}\n                </a>\n              ) : (\n                this.label\n              )}\n              {this.isExternal() && <pn-icon icon={open_in_new} small={true} color=\"blue700\" />}\n            </h3>\n            <div class=\"pn-tile-slot\">\n              {!!this.text && <p class=\"pn-tile-paragraph\">{this.text}</p>}\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/umd/modules/@postnord/web-components/components/pn-toggle-switch.js.map

@@ -1 +0,0 @@
-{"file":"pn-toggle-switch.js","mappings":"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","names":["PnToggleSwitch","__stencil_proxyCustomElement"],"sources":["src/components/input/pn-toggle-switch/pn-toggle-switch.scss?tag=pn-toggle-switch","src/components/input/pn-toggle-switch/pn-toggle-switch.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-toggle-switch {\n  display: inline-block;\n  position: relative;\n}\n\npn-toggle-switch .pn-toggle {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1em;\n\n  &-label {\n    @include main.pn-input-label(500, 0, 1em);\n  }\n\n  &-helper {\n    @include main.pn-input-helpertext;\n  }\n\n  &-content {\n    flex: 1 0;\n  }\n\n  &-button {\n    position: relative;\n    font-size: 1em;\n    width: 3.625em;\n    height: 2em;\n    padding: 0.1875em;\n\n    @include main.pn-transition('transform');\n\n    -webkit-tap-highlight-color: transparent;\n\n    &[data-small] {\n      width: 2.625em;\n      height: 1.5em;\n      .pn-toggle-circle {\n        width: 1.125em;\n        height: 1.125em;\n      }\n      &[data-loading] > .pn-toggle-bg {\n        width: 1.5em;\n      }\n    }\n\n    &[data-large] {\n      width: 4.625em;\n      height: 2.5em;\n      .pn-toggle-circle {\n        width: 2.125em;\n        height: 2.125em;\n      }\n      &[data-loading] > .pn-toggle-bg {\n        width: 2.5em;\n      }\n    }\n\n    &[data-loading] {\n      .pn-toggle-bg {\n        width: 2em;\n      }\n\n      .pn-toggle-circle,\n      .pn-toggle-element:checked ~ .pn-toggle-circle {\n        transform: translateX(50%);\n      }\n\n      .pn-toggle-element:checked ~ .pn-toggle-circle .pn-toggle-check {\n        opacity: 0;\n        polyline {\n          stroke-dashoffset: 23;\n          transition-delay: 0s;\n        }\n      }\n\n      pn-spinner {\n        opacity: 1;\n      }\n    }\n  }\n\n  &-bg {\n    position: absolute;\n    top: 0;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    z-index: 0;\n    border-radius: 2em;\n    background-color: main.$gray400;\n    transform: translateX(-50%);\n\n    @include main.pn-focus-base;\n    @include main.pn-transition('width, background-color, outline-color');\n  }\n\n  &-circle {\n    position: relative;\n    z-index: 1;\n    width: 1.625em;\n    height: 1.625em;\n    background-color: main.$white;\n    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);\n    border-radius: 50%;\n    padding: 0.25em;\n    @include main.pn-transition('transform, background-color');\n    transform: translateX(0%);\n  }\n\n  &-element {\n    position: absolute;\n    z-index: 3;\n    top: 0;\n    left: 0;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    margin: 0;\n\n    /*---------------------------------------Focus-------------------------------------------*/\n\n    &:focus-visible + .pn-toggle-bg {\n      @include main.pn-focus-visible;\n    }\n\n    &:hover + .pn-toggle-bg {\n      background-color: main.$gray700;\n    }\n\n    &:hover:checked {\n      + .pn-toggle-bg {\n        background-color: main.$blue900;\n      }\n      ~ .pn-toggle-circle .pn-toggle-check polyline {\n        stroke: main.$blue900;\n      }\n    }\n\n    &:checked ~ {\n      .pn-toggle-bg {\n        background-color: main.$blue700;\n      }\n\n      .pn-toggle-circle {\n        transform: translateX(100%);\n        .pn-toggle-check {\n          opacity: 1;\n          polyline {\n            transition-delay: main.$timing, 0s;\n            stroke-dashoffset: 0;\n          }\n        }\n      }\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n\n      + .pn-toggle-bg {\n        background-color: main.$gray200;\n        box-shadow: none;\n      }\n\n      ~ .pn-toggle-circle {\n        background-color: main.$gray50;\n        .pn-toggle-check polyline {\n          stroke: main.$gray400;\n        }\n        pn-spinner {\n          .pn-spinner-circle {\n            stroke: main.$gray400;\n          }\n          .pn-spinner-dot {\n            fill: main.$gray400;\n          }\n        }\n      }\n    }\n\n    &:disabled:hover,\n    &:disabled:hover:checked {\n      + .pn-toggle-bg {\n        background-color: main.$gray200;\n      }\n      ~ .pn-toggle-circle .pn-toggle-check polyline {\n        stroke: main.$gray400;\n      }\n    }\n  }\n\n  &-check {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    height: 1.5em;\n    width: 1.5em;\n    padding: 0.25em;\n    transform: translate(-50%, -50%);\n    opacity: 0;\n    @include main.pn-transition('opacity');\n    polyline {\n      stroke: main.$blue700;\n      stroke-linecap: round;\n      stroke-dasharray: 23;\n      stroke-dashoffset: 23;\n\n      @include main.pn-transition('stroke-dashoffset, stroke');\n    }\n  }\n\n  pn-spinner {\n    opacity: 0;\n    @include main.pn-transition('opacity');\n    .pn-spinner-circle {\n      @include main.pn-transition('stroke');\n    }\n    .pn-spinner-dot {\n      @include main.pn-transition('fill');\n    }\n  }\n}\n","import { Component, Element, Prop, h, Host, Watch } from '@stencil/core';\nimport { uuidv4 } from '@/index';\n\n/**\n * The `pn-toggle-switch` is built with a native `input[type=\"checkbox\"]` in the background.\n * This means you can use native events to listen to the changes.\n *\n * @nativeChange Use the `change` event to listen when the switch state is being toggled.\n *\n * @slot helpertext - Set the helpertext with a slot instead of prop. Use a `span` element as wrapper.\n * Only use if you need HTML content, such as a link. {@since v7.12.0}\n */\n@Component({\n  tag: 'pn-toggle-switch',\n  styleUrl: 'pn-toggle-switch.scss',\n})\nexport class PnToggleSwitch {\n  private readonly id: string = `pn-toggle-${uuidv4()}`;\n  private idHelper: string = `${this.id}-helper`;\n\n  @Element() hostElement: HTMLElement;\n\n  /** A label for the toggle switch. */\n  @Prop() label!: string;\n  /** Provide a helpertext for the toggle switch. */\n  @Prop() helpertext?: string;\n  /** Precheck the toggle. */\n  @Prop({ mutable: true }) checked: boolean = false;\n  /** Set a unique HTML id. */\n  @Prop() toggleid: string = this.id;\n\n  /** HTML toggle name. @category HTML */\n  @Prop() name?: string = null;\n  /** HTML toggle value. @category HTML */\n  @Prop() value?: string = null;\n\n  /** Make the toggle smaller. @category Visual */\n  @Prop() small: boolean = false;\n  /** Make the toggle larger. @category Visual */\n  @Prop() large: boolean = false;\n\n  /** Disable the toggle. @category State */\n  @Prop() disabled: boolean = false;\n  /** Set the loading state. @category State */\n  @Prop() loading: boolean = false;\n\n  @Watch('toggleid')\n  handleHelperId() {\n    if (this.id !== this.toggleid) this.idHelper = `${this.toggleid}-helper`;\n  }\n\n  componentWillLoad() {\n    this.handleHelperId();\n  }\n\n  private hasHelpertextProp(): boolean {\n    return !!this.helpertext;\n  }\n\n  private hasHelpertextSlot(): boolean {\n    return !!this.hostElement.querySelector('[slot=\"helpertext\"]');\n  }\n\n  private showHelpertext(): boolean {\n    return this.hasHelpertextProp() || this.hasHelpertextSlot();\n  }\n\n  private describedBy(): string {\n    return this.showHelpertext() ? this.idHelper : null;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-toggle\">\n          {this.label && (\n            <div class=\"pn-toggle-content\">\n              <label htmlFor={this.toggleid} class=\"pn-toggle-label\">\n                <span>{this.label}</span>\n              </label>\n              <p id={this.idHelper} class=\"pn-toggle-helper\" hidden={!this.showHelpertext()}>\n                {this.hasHelpertextProp() && <span>{this.helpertext}</span>}\n                <slot name=\"helpertext\"></slot>\n              </p>\n            </div>\n          )}\n          <div class=\"pn-toggle-button\" data-small={this.small} data-large={this.large} data-loading={this.loading}>\n            <input\n              id={this.toggleid}\n              class=\"pn-toggle-element\"\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              aria-describedby={this.describedBy()}\n            />\n            <div class=\"pn-toggle-bg\"></div>\n            <div class=\"pn-toggle-circle\">\n              <svg class=\"pn-toggle-check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <polyline points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n              </svg>\n              <pn-spinner size={1.125} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}