@postnord/pn-marketweb-components 3.5.3 → 4.0.0

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

@@ -71,7 +71,7 @@ const PnProgressBar = /*@__PURE__*/ proxyCustomElement(class PnProgressBar exten
         return 'green500';
     }
     render() {
-        return (h(Host, { key: '141fef1da768dc423cf53dfa8088f1b98429236c' }, this.hasLabel() && (h("p", { key: '294199499037e6ed0e816f8a68850dfede795884', id: this.idLabel, class: "pn-progress-bar-label" }, h("span", { key: 'f292e951e29878d186b7f7896d7346fd41677006' }, this.label), this.hasIcon() && h("pn-icon", { key: '47b8065b97a8cd0f0d3e57ea4f68b07ad09c12a5', icon: this.getIconSvg(), color: this.getIconColor() }))), h("div", { key: '0dd5189948aad2e501ee10076ed212987a52e4d8', id: this.progressId, class: "pn-progress-bar-container", role: "progressbar", "aria-labelledby": this.idLabel, "aria-describedby": this.hasIcon() ? this.idText : null, "aria-valuenow": this.progress, "aria-valuetext": this.progressPercentage }, h("div", { key: '51ceae38d589385687dd3e25c86526b4758f2792', class: "pn-progress-bar-meter" }, h("div", { key: '714d0aa19a487bf625ae10bcdd68d21d54b6f48a', class: "pn-progress-bar-value", "data-error": this.hasError(), "data-valid": this.isValid() }))), h("p", { key: 'b540a56c9d7fdfae49f508472d315ce1eeda5e99', id: this.idText, class: "pn-progress-bar-subtext", role: this.hasError() ? 'alert' : null }, h("span", { key: '35d515a823d117a6ab31e3cda778a2ada8093233' }, this.getSubtext()))));
+        return (h(Host, { key: 'e5e7d6c7ac2b3e2cc8838a616d697281c299ef21' }, this.hasLabel() && (h("p", { key: '23155051cf0606bee3bf96c4be40cf1549b6ab44', id: this.idLabel, class: "pn-progress-bar-label" }, h("span", { key: '98723d9fcc0e8a43ceaf4969a70046418d9d08bf' }, this.label), this.hasIcon() && h("pn-icon", { key: '402eea95c3733057d94df1b7abe92d02e7ef1dc8', icon: this.getIconSvg(), color: this.getIconColor() }))), h("div", { key: '5d82dfaf2b4ca4ac5ec6aefc83b6422dc8c632fe', id: this.progressId, class: "pn-progress-bar-container", role: "progressbar", "aria-labelledby": this.idLabel, "aria-describedby": this.hasIcon() ? this.idText : null, "aria-valuenow": this.progress, "aria-valuetext": this.progressPercentage }, h("div", { key: '7340eb78ac7cbcd5798e804dc173a1d7c0696f49', class: "pn-progress-bar-meter" }, h("div", { key: 'a9d2ab1009731727f98d349b9bf04bf39433c478', class: "pn-progress-bar-value", "data-error": this.hasError(), "data-valid": this.isValid() }))), h("p", { key: '6f10b1183b320c1e1e4b03bf893a62135779a870', id: this.idText, class: "pn-progress-bar-subtext", role: this.hasError() ? 'alert' : null }, h("span", { key: 'd6b8b56cf9853fa1f88aea6c6a43bf9999fa09cd' }, this.getSubtext()))));
     }
     static get watchers() { return {
         "progress": ["setProgress"]

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

@@ -59,7 +59,7 @@ const PnProgressIndicatorStep$1 = /*@__PURE__*/ proxyCustomElement(class PnProgr
         return className;
     }
     render() {
-        return (h(Host, { key: 'e5518f2d8c21c889738beb3a42e6865e7c64ac76', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { key: 'b0f5f684ca12fda2b22b51945d3b0b41ab490fa3', class: "progress-line" }), h("div", { key: '8d05494d4cc77145e44270666b678cf48eb05a96', class: "info-container" }, h("slot", { key: '864bea1ce3dd348be1abadcc3f8fb3757ac009b9' }), this.name), h("div", { key: '7d8394e5a4919404a137fd30ce125dfda5ed3034', class: "circle" }, this.done || this.checked ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" }, h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: white, "stroke-miterlimit": "10", "stroke-width": "3" }))) : (''))));
+        return (h(Host, { key: '72cc83f88a80acff2dc2d379abddf32d1f7100a8', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { key: '39f44c9b4e625898d16278575894ed8f01261a89', class: "progress-line" }), h("div", { key: '17858a1e590a364b82db40088f0017a5ddfde37e', class: "info-container" }, h("slot", { key: 'bd8a6e97e2a0aa6e3a0ff0565069792dc4e5cd0e' }), this.name), h("div", { key: '0122ff04b13f3d610a036bd354333e5b4ed4b898', class: "circle" }, this.done || this.checked ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" }, h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: white, "stroke-miterlimit": "10", "stroke-width": "3" }))) : (''))));
     }
     static get style() { return PnProgressIndicatorStepStyle0; }
 }, [4, "pn-progress-indicator-step", {

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

@@ -1 +1 @@
-{"file":"pn-progress-indicator-step.js","mappings":";;;;;;;AAAA,MAAM,0BAA0B,GAAG,izFAAizF,CAAC;AACr1F,sCAAe,0BAA0B;;MCU5BA,yBAAuB;;;;;;;;;;uBAWP,KAAK;;;IAIvB,aAAa,CAAuB;IAC7C,oBAAoB;QAClB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACrC;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,kBAAkB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;SAC1D;QAED,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;YACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACvB;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;YAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;aAAM,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC;SAChD;KACF;IAED,aAAa;QACX,IAAI,SAAS,GAAG,4BAA4B,CAAC;QAC7C,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO;YAAE,SAAS,IAAI,OAAO,CAAC;QACpD,IAAI,IAAI,CAAC,SAAS;YAAE,SAAS,IAAI,YAAY,CAAC;QAC9C,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK;YAAE,SAAS,IAAI,SAAS,CAAC;QAC3D,OAAO,SAAS,CAAC;KAClB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,IAC3E,4DAAK,KAAK,EAAC,eAAe,GAAG,EAC7B,4DAAK,KAAK,EAAC,gBAAgB,IACzB,8DAAQ,EACP,IAAI,CAAC,IAAI,CACN,EACN,4DAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,IACxB,WACE,KAAK,EAAC,4BAA4B,uBAChB,eAAe,EACjC,EAAE,EAAC,WAAW,EACd,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,WAAW,IAEnB,gBACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,gBAAgB,EACvB,MAAM,EAAE,KAAK,uBACK,IAAI,kBACT,GAAG,GAChB,CACE,KAEN,EAAE,CACH,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnProgressIndicatorStep"],"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}
+{"file":"pn-progress-indicator-step.js","mappings":";;;;;;;AAAA,MAAM,0BAA0B,GAAG,izFAAizF,CAAC;AACr1F,sCAAe,0BAA0B;;MCM5BA,yBAAuB;;;;;;;;;;uBAWP,KAAK;;;IAIvB,aAAa,CAAuB;IAC7C,oBAAoB;QAClB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACrC;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,kBAAkB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;SAC1D;QAED,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;YACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACvB;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;YAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;aAAM,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC;SAChD;KACF;IAED,aAAa;QACX,IAAI,SAAS,GAAG,4BAA4B,CAAC;QAC7C,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO;YAAE,SAAS,IAAI,OAAO,CAAC;QACpD,IAAI,IAAI,CAAC,SAAS;YAAE,SAAS,IAAI,YAAY,CAAC;QAC9C,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK;YAAE,SAAS,IAAI,SAAS,CAAC;QAC3D,OAAO,SAAS,CAAC;KAClB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,IAC3E,4DAAK,KAAK,EAAC,eAAe,GAAG,EAC7B,4DAAK,KAAK,EAAC,gBAAgB,IACzB,8DAAQ,EACP,IAAI,CAAC,IAAI,CACN,EACN,4DAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,IACxB,WACE,KAAK,EAAC,4BAA4B,uBAChB,eAAe,EACjC,EAAE,EAAC,WAAW,EACd,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,WAAW,IAEnB,gBACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,gBAAgB,EACvB,MAAM,EAAE,KAAK,uBACK,IAAI,kBACT,GAAG,GAChB,CACE,KAEN,EAAE,CACH,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnProgressIndicatorStep"],"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@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

@@ -35,7 +35,7 @@ const PnProgressIndicator$1 = /*@__PURE__*/ proxyCustomElement(class PnProgressI
         });
     }
     render() {
-        return (h("div", { key: '1108f70edf525c6e7e0e45d34a6d58e69c5b9ab2', class: "pn-progress-indicator" }, h("slot", { key: 'c4035cf9fadb46f4e573c0225bebb2f8f7187da6' })));
+        return (h("div", { key: '7809a31648a1c899311e83dc28db7b0b23272547', class: "pn-progress-indicator" }, h("slot", { key: 'a1b9970f16de43052e473ea166829a1ad6e5e725' })));
     }
     static get style() { return PnProgressIndicatorStyle0; }
 }, [4, "pn-progress-indicator", {

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

@@ -1 +1 @@
-{"file":"pn-progress-indicator.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,0DAA0D,CAAC;AAC1F,kCAAe,sBAAsB;;MCSxBA,qBAAmB;;;;;0BAIgB,CAAC;;;;IAGtC,cAAc,CAAuB;IAG9C,oBAAoB,CAAC,EAAE,MAAM,EAAE;QAC7B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;QACzB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,kBAAkB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,mBAAmB;QACjB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CACzB,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAqC,4BAA4B,CAAC,CACpG,CAAC;QAEF,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;YACxB,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YACnC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;SACjB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,uBAAuB,IAChC,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnProgressIndicator"],"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}
+{"file":"pn-progress-indicator.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,0DAA0D,CAAC;AAC1F,kCAAe,sBAAsB;;MCKxBA,qBAAmB;;;;;0BAIgB,CAAC;;;;IAGtC,cAAc,CAAuB;IAG9C,oBAAoB,CAAC,EAAE,MAAM,EAAE;QAC7B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;QACzB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,kBAAkB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,mBAAmB;QACjB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CACzB,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAqC,4BAA4B,CAAC,CACpG,CAAC;QAEF,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;YACxB,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YACnC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;SACjB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,uBAAuB,IAChC,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnProgressIndicator"],"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@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

@@ -15,44 +15,64 @@ const translations = {
     },
 };
 
-const pnProgressStepperCss = "pn-progress-stepper{display:block}pn-progress-stepper .pn-progress{position:relative;width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}pn-progress-stepper .pn-progress-label{display:block;color:#2d2013;font-size:1em;margin-bottom:0.5em}pn-progress-stepper .pn-progress-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.625em;background-color:#005d92;width:calc(var(--pn-progress-value) + 0.125em);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-value{transition-duration:0s;transition-delay:0s}}pn-progress-stepper .pn-progress-value[data-full]{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}pn-progress-stepper .pn-progress-dots{display:flex;align-items:center;justify-content:center;gap:1em}pn-progress-stepper .pn-progress-dot{width:0.875em;height:0.875em;background-color:#f3f2f2;border:0.0625em solid #d3cecb;border-radius:50%;transform:scale(1) translateY(0%);transition-property:background-color, border-color;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);animation:pnBackwards 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-dot{transition-duration:0s;transition-delay:0s}}pn-progress-stepper .pn-progress-dot[data-active]{background-color:#005d92;border-color:#005d92;animation:pnForward 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}pn-progress-stepper .pn-progress-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}@keyframes pnForward{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(20%)}75%{transform:scale(1.1) translateY(10%)}100%{transform:scale(1) translateY(0%)}}@keyframes pnBackwards{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(-20%)}75%{transform:scale(0.9) translateY(-10%)}100%{transform:scale(1) translateY(0%)}}";
+const pnProgressStepperCss = "pn-progress-stepper .pn-progress-stepper{position:relative;width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}pn-progress-stepper .pn-progress-stepper[data-full] .pn-progress-stepper-value{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}pn-progress-stepper .pn-progress-stepper-label{margin-bottom:0.5em}pn-progress-stepper .pn-progress-stepper-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.625em;background-color:#005d92;width:calc(var(--progress-value) + 0.125em);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-stepper-value{transition-duration:0s;transition-delay:0s}}";
 const PnProgressStepperStyle0 = pnProgressStepperCss;
 
 const PnProgressStepper$1 = /*@__PURE__*/ proxyCustomElement(class PnProgressStepper extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.builtInLabel = undefined;
         this.progressValue = 0;
-        this.label = '';
-        this.progressStepperId = '';
-        this.language = null;
+        this.label = undefined;
         this.totalSteps = this.maxStep;
         this.currentStep = this.minStep;
         this.stepName = undefined;
-        this.dots = false;
+        this.progressStepperId = '';
+        this.language = null;
     }
     id = `pn-progress-stepper-${uuidv4()}`;
+    idLabel = `${this.id}-label`;
+    idBar = `${this.id}-bar`;
     minStep = 1;
     maxStep = 7;
     get hostElement() { return this; }
-    stepWatchers(a, b, c) {
-        if (c === 'currentStep')
-            this.validate(a, 'currentStep');
-        if (c === 'totalSteps')
-            this.validate(b, 'totalSteps');
-        this.calculateProgress();
+    validateCurrentStep(step) {
+        this.validate(step, 'currentStep');
+    }
+    validateTotalSteps(step) {
+        this.validate(step, 'totalSteps');
     }
     watchLanguage() {
-        this.builtInLabel = translations.STEP[this.language || en];
+        if (this.hasCustomLabel())
+            return;
+        this.label = translations.STEP[this.language || en];
+    }
+    watchId() {
+        if (this.progressStepperId) {
+            this.idLabel = `${this.progressStepperId}-label`;
+            this.idBar = `${this.progressStepperId}-bar`;
+        }
+        else {
+            this.idLabel = `${this.id}-label`;
+            this.idBar = `${this.id}-bar`;
+        }
     }
     async componentWillLoad() {
         this.watchLanguage();
+        this.watchId();
         this.validate(this.currentStep, 'currentStep');
         this.validate(this.totalSteps, 'totalSteps');
+        if (this.language)
+            return;
+        await awaitTopbar(this.hostElement);
+    }
+    componentWillRender() {
         this.calculateProgress();
-        if (this.language === null)
-            await awaitTopbar(this.hostElement);
+    }
+    hasCustomLabel() {
+        if (this.label === undefined)
+            return false;
+        return !Object.keys(translations.STEP).find(step => translations.STEP[step] === this.label);
     }
     validate(step, prop) {
         const componentName = this.hostElement.localName;
@@ -72,41 +92,35 @@ const PnProgressStepper$1 = /*@__PURE__*/ proxyCustomElement(class PnProgressSte
     calculateProgress() {
         try {
             this.progressValue = Math.floor((this.currentStep / this.totalSteps) * 100);
-            this.hostElement.style.setProperty('--pn-progress-value', `${this.progressValue}%`);
+            this.hostElement.style.setProperty('--progress-value', `${this.progressValue}%`);
         }
         catch (error) {
             console.error(`${this.hostElement.localName}:`, error.message);
         }
     }
-    getLabel() {
-        return this.label || this.builtInLabel;
-    }
-    getId() {
-        return this.progressStepperId || this.id;
-    }
     render() {
-        return (h(Host, { key: '8b188af32a20e83f8e8d0460c676bda9e1560911' }, h("label", { key: '9501af57bade0fd22ca865990e9c6934fb8da0d2', htmlFor: this.getId(), class: 'pn-progress-label' + (this.dots ? ' pn-progress-sr-only' : '') }, h("span", { key: '7ae3e7e7fa8ea5d24fe13c895b6b86d7a0bd780a' }, this.getLabel(), " ", this.currentStep, "/", this.totalSteps), this.stepName && h("span", { key: '3e15c0c51b59bbea44e8d589ff29da8c9cb5a666' }, " - ", this.stepName)), h("progress", { key: '7e379261374b13ad1b06216fe96146ac7fad73c2', id: this.getId(), class: "pn-progress-sr-only", max: "100", value: this.progressValue }), this.dots ? (h("div", { class: "pn-progress-dots", "aria-hidden": "true" }, [...Array(this.totalSteps)].map((_, i) => (h("div", { class: "pn-progress-dot", "data-active": i + 1 <= this.currentStep, key: i }))))) : (h("div", { "aria-hidden": "true", class: "pn-progress" }, h("div", { class: "pn-progress-value", "data-full": this.currentStep === this.totalSteps })))));
+        return (h(Host, { key: '4ba09046dab423fa79ebfdab9fbf312d9d8929cf' }, h("p", { key: 'fa2f78ce5509e1dd7af40657a083356e61d393db', id: this.idLabel, class: "pn-progress-stepper-label" }, h("span", { key: '963374a110ad8fc87d6d6d2b00cd1694992fffab' }, this.label, " ", this.currentStep, "/", this.totalSteps), this.stepName && h("span", { key: 'f5cef98692b9baf2dc2826d1a0ebaebb64e75cf5' }, " - ", this.stepName)), h("div", { key: '2259ad7c3a8d77ff6a59d32124695e9259b22ba5', class: "pn-progress-stepper", role: "progressbar", "aria-labelledby": this.idLabel, "aria-valuenow": this.progressValue, id: this.idBar, "data-full": this.currentStep === this.totalSteps }, h("div", { key: 'f469df98da0b06db3a80fdcdc96555151789b014', class: "pn-progress-stepper-value" }))));
     }
     static get watchers() { return {
-        "currentStep": ["stepWatchers"],
-        "totalSteps": ["stepWatchers"],
-        "language": ["watchLanguage"]
+        "currentStep": ["validateCurrentStep"],
+        "totalSteps": ["validateTotalSteps"],
+        "language": ["watchLanguage"],
+        "progressStepperId": ["watchId"]
     }; }
     static get style() { return PnProgressStepperStyle0; }
 }, [0, "pn-progress-stepper", {
-        "label": [1],
-        "progressStepperId": [1, "progress-stepper-id"],
-        "language": [1],
+        "label": [1025],
         "totalSteps": [1026, "total-steps"],
         "currentStep": [1026, "current-step"],
         "stepName": [1, "step-name"],
-        "dots": [4],
-        "builtInLabel": [32],
+        "progressStepperId": [1, "progress-stepper-id"],
+        "language": [1],
         "progressValue": [32]
     }, undefined, {
-        "currentStep": ["stepWatchers"],
-        "totalSteps": ["stepWatchers"],
-        "language": ["watchLanguage"]
+        "currentStep": ["validateCurrentStep"],
+        "totalSteps": ["validateTotalSteps"],
+        "language": ["watchLanguage"],
+        "progressStepperId": ["watchId"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"pn-progress-stepper.js","mappings":"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","names":["PnProgressStepper"],"sources":["src/components/feedback/pn-progress-stepper/translations.ts","src/components/feedback/pn-progress-stepper/pn-progress-stepper.scss?tag=pn-progress-stepper","src/components/feedback/pn-progress-stepper/pn-progress-stepper.tsx"],"sourcesContent":["export const translations = {\n  STEP: {\n    da: 'Trin',\n    en: 'Step',\n    fi: 'Vaihe',\n    no: 'Trinn',\n    sv: 'Steg',\n  },\n};\n","@use 'src/globals/main';\n\npn-progress-stepper {\n  display: block;\n}\n\npn-progress-stepper .pn-progress {\n  position: relative;\n\n  width: 100%;\n  background: main.$gray50;\n  height: 0.5em;\n  border-radius: 0.5em;\n  box-shadow: (0 0 0 0.0625em main.$gray400);\n\n  &-label {\n    display: block;\n    color: main.$gray900;\n    font-size: 1em;\n    margin-bottom: 0.5em;\n  }\n\n  &-value {\n    position: absolute;\n    top: -0.0625em;\n    left: -0.0625em;\n\n    height: 0.625em;\n    background-color: main.$blue700;\n    width: calc(var(--pn-progress-value) + 0.125em);\n    border-radius: 0.5em 0 0 0.5em;\n\n    @include main.pn-transition('width, border-radius', main.$timing-layout);\n\n    &[data-full] {\n      border-top-right-radius: 0.5em;\n      border-bottom-right-radius: 0.5em;\n    }\n  }\n\n  &-dots {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 1em;\n  }\n\n  &-dot {\n    width: 0.875em;\n    height: 0.875em;\n    background-color: main.$gray50;\n    border: 0.0625em solid main.$gray200;\n    border-radius: 50%;\n\n    transform: scale(1) translateY(0%);\n\n    @include main.pn-transition('background-color, border-color', main.$timing-layout);\n\n    // Default state - plays backwards animation when data-active is removed\n    animation: pnBackwards main.$timing main.$easing;\n    animation-fill-mode: forwards;\n\n    &[data-active] {\n      background-color: main.$blue700;\n      border-color: main.$blue700;\n      animation: pnForward main.$timing main.$easing;\n      animation-fill-mode: forwards;\n    }\n  }\n\n  @include main.pn-sr-only-class();\n}\n\n@keyframes pnForward {\n  0% {\n    transform: scale(1) translateY(0%);\n  }\n  50% {\n    transform: scale(1) translateY(20%);\n  }\n  75% {\n    transform: scale(1.1) translateY(10%);\n  }\n  100% {\n    transform: scale(1) translateY(0%);\n  }\n}\n\n@keyframes pnBackwards {\n  0% {\n    transform: scale(1) translateY(0%);\n  }\n  50% {\n    transform: scale(1) translateY(-20%);\n  }\n  75% {\n    transform: scale(0.9) translateY(-10%);\n  }\n  100% {\n    transform: scale(1) translateY(0%);\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { translations } from './translations';\nimport { en, awaitTopbar, uuidv4 } from '@/globals/helpers';\nimport type { PnLanguages, PnStepProps } from '@/globals/types';\n\n/**\n * The `pn-progress-stepper` is used to visualize the users progress through a flow (checkout/survey, etc...).\n **/\n@Component({\n  tag: 'pn-progress-stepper',\n  styleUrl: 'pn-progress-stepper.scss',\n})\nexport class PnProgressStepper {\n  private readonly id: string = `pn-progress-stepper-${uuidv4()}`;\n\n  private readonly minStep: 1 = 1;\n  private readonly maxStep: 7 = 7;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() private builtInLabel: string;\n  /** Percentage calculated with currentStep / totalSteps. */\n  @State() private progressValue: number = 0;\n\n  /** Set custom label for the stepper, default label is \"Step\". */\n  @Prop() label?: string = '';\n  /** Set a custom HTML id on the progress stepper element to associate progress bar with label. */\n  @Prop() progressStepperId?: string = '';\n  /**\n   * Set the language manually, only use this prop if the pnTopbar is not loaded.\n   * Will not overwrite the custom `label` prop if used.\n   **/\n  @Prop() language?: PnLanguages = null;\n\n  /** Set total amount of steps, maximum allowed is `7`. @category Steps */\n  @Prop({ mutable: true }) totalSteps: number = this.maxStep;\n  /** The current step of the progress stepper. @category Steps */\n  @Prop({ mutable: true }) currentStep: number = this.minStep;\n  /** You can add a custom optional string to the label if you need a name for the current step. @category Steps */\n  @Prop() stepName?: string;\n\n  /**\n   * Use the dots visual, instead of the bar.\n   *\n   * This will hide the label from view, but is still accessible to screenreaders.\n   *\n   * @category Visual\n   */\n  @Prop() dots: boolean = false;\n\n  @Watch('currentStep')\n  @Watch('totalSteps')\n  stepWatchers(a: number, b: number, c: 'currentStep' | 'totalSteps') {\n    if (c === 'currentStep') this.validate(a, 'currentStep');\n    if (c === 'totalSteps') this.validate(b, 'totalSteps');\n    this.calculateProgress();\n  }\n\n  @Watch('language')\n  watchLanguage() {\n    this.builtInLabel = translations.STEP[this.language || en];\n  }\n\n  async componentWillLoad() {\n    this.watchLanguage();\n\n    this.validate(this.currentStep, 'currentStep');\n    this.validate(this.totalSteps, 'totalSteps');\n\n    this.calculateProgress();\n\n    if (this.language === null) await awaitTopbar(this.hostElement);\n  }\n\n  private validate(step: number, prop: PnStepProps) {\n    const componentName = this.hostElement.localName;\n    if (step < this.minStep) {\n      console.warn(\n        `${componentName}: The ${prop} ${step} is below the minimum allowed steps of ${this.minStep}. ${prop} will default to ${this.minStep}.`,\n      );\n      this[prop] = this.minStep;\n    }\n    if (prop === 'currentStep' && step > this.totalSteps) {\n      console.warn(\n        `${componentName}: The ${prop} ${step} is above totalSteps ${this.totalSteps}, ${prop} will default to ${this.totalSteps}.`,\n      );\n      this[prop] = this.totalSteps;\n    }\n    if (step > this.maxStep) {\n      console.warn(\n        `${componentName}: The ${prop} ${step} is above the maximum allowed steps of ${this.maxStep}. ${prop} will default to ${this.maxStep}.`,\n      );\n      this[prop] = this.maxStep;\n    }\n  }\n\n  private calculateProgress() {\n    try {\n      this.progressValue = Math.floor((this.currentStep / this.totalSteps) * 100);\n      this.hostElement.style.setProperty('--pn-progress-value', `${this.progressValue}%`);\n    } catch (error) {\n      console.error(`${this.hostElement.localName}:`, error.message);\n    }\n  }\n\n  private getLabel() {\n    return this.label || this.builtInLabel;\n  }\n\n  private getId() {\n    return this.progressStepperId || this.id;\n  }\n\n  render() {\n    return (\n      <Host>\n        <label htmlFor={this.getId()} class={'pn-progress-label' + (this.dots ? ' pn-progress-sr-only' : '')}>\n          <span>\n            {this.getLabel()} {this.currentStep}/{this.totalSteps}\n          </span>\n          {this.stepName && <span> - {this.stepName}</span>}\n        </label>\n        <progress id={this.getId()} class=\"pn-progress-sr-only\" max=\"100\" value={this.progressValue} />\n\n        {this.dots ? (\n          <div class=\"pn-progress-dots\" aria-hidden=\"true\">\n            {[...Array(this.totalSteps)].map((_, i) => (\n              <div class=\"pn-progress-dot\" data-active={i + 1 <= this.currentStep} key={i} />\n            ))}\n          </div>\n        ) : (\n          <div aria-hidden=\"true\" class=\"pn-progress\">\n            <div class=\"pn-progress-value\" data-full={this.currentStep === this.totalSteps} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-progress-stepper.js","mappings":"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","names":["PnProgressStepper"],"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 .pn-progress-stepper {\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  &[data-full] .pn-progress-stepper-value {\n    border-top-right-radius: 0.5em;\n    border-bottom-right-radius: 0.5em;\n  }\n\n  &-label {\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(--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}\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, PnSteps, 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  id: string = `pn-progress-stepper-${uuidv4()}`;\n\n  idLabel: string = `${this.id}-label`;\n  idBar: string = `${this.id}-bar`;\n\n  minStep: 1 = 1;\n  maxStep: 7 = 7;\n\n  @Element() hostElement: HTMLElement;\n\n  /** Percentage calculated with currentStep / totalSteps. */\n  @State() progressValue: number = 0;\n\n  /** Set custom label for the stepper, recommended default label is \"Step\". */\n  @Prop({ mutable: true }) label?: string;\n  /** Set total amount of steps, maximum `7` is allowed. */\n  @Prop({ mutable: true }) totalSteps: PnSteps = this.maxStep;\n  /** The current step of the progress stepper. */\n  @Prop({ mutable: true }) currentStep: PnSteps = this.minStep;\n  /** You can add a custom optional string to the label if you need a name for the current step. */\n  @Prop() stepName?: 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 `label` prop if used.\n   **/\n  @Prop() language?: PnLanguages = null;\n\n  @Watch('currentStep')\n  validateCurrentStep(step: PnSteps) {\n    this.validate(step, 'currentStep');\n  }\n\n  @Watch('totalSteps')\n  validateTotalSteps(step: PnSteps) {\n    this.validate(step, 'totalSteps');\n  }\n\n  @Watch('language')\n  watchLanguage() {\n    if (this.hasCustomLabel()) return;\n    this.label = translations.STEP[this.language || en];\n  }\n\n  @Watch('progressStepperId')\n  watchId() {\n    if (this.progressStepperId) {\n      this.idLabel = `${this.progressStepperId}-label`;\n      this.idBar = `${this.progressStepperId}-bar`;\n    } else {\n      this.idLabel = `${this.id}-label`;\n      this.idBar = `${this.id}-bar`;\n    }\n  }\n\n  async componentWillLoad() {\n    this.watchLanguage();\n    this.watchId();\n\n    this.validate(this.currentStep, 'currentStep');\n    this.validate(this.totalSteps, 'totalSteps');\n\n    if (this.language) return;\n    await awaitTopbar(this.hostElement);\n  }\n\n  componentWillRender() {\n    this.calculateProgress();\n  }\n\n  hasCustomLabel(): boolean {\n    if (this.label === undefined) return false;\n    return !Object.keys(translations.STEP).find(step => translations.STEP[step] === this.label);\n  }\n\n  validate(step: PnSteps, 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  calculateProgress() {\n    try {\n      this.progressValue = Math.floor((this.currentStep / this.totalSteps) * 100);\n      this.hostElement.style.setProperty('--progress-value', `${this.progressValue}%`);\n    } catch (error) {\n      console.error(`${this.hostElement.localName}:`, error.message);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <p id={this.idLabel} class=\"pn-progress-stepper-label\">\n          <span>\n            {this.label} {this.currentStep}/{this.totalSteps}\n          </span>\n          {this.stepName && <span> - {this.stepName}</span>}\n        </p>\n        <div\n          class=\"pn-progress-stepper\"\n          role=\"progressbar\"\n          aria-labelledby={this.idLabel}\n          aria-valuenow={this.progressValue}\n          id={this.idBar}\n          data-full={this.currentStep === this.totalSteps}\n        >\n          <div class=\"pn-progress-stepper-value\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -35,7 +35,7 @@ const PnRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class PnRadioButton ext
         this.handleId();
     }
     render() {
-        return (h(Host, { key: '8bb634e145b549e4cd83b716dee01ef0473d6ab0' }, h("input", { key: 'b3d28e2d722957d18f9ea2f6567917627f54c1f1', type: "radio", id: this.radioid, value: this.value, name: this.name, disabled: this.disabled, required: this.required, checked: this.checked, "aria-describedby": !!this.helpertext && this.idHelper, "aria-invalid": this.invalid?.toString() }), h("div", { key: '84789bb4bdb07b5c9ae2a5512e70b22236b9efba', class: "pn-radio", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: '3a8d38272a31df6d779dbc0c04f25d7d514405c2', class: "pn-radio-container" }, h("div", { key: '1c13d1d254e1fe915604acd957ba21bd6217b345', class: "pn-radio-outer" }, h("div", { key: '6b576e1ae441544ad56f14d4cae0ab3f407a4200', class: "pn-radio-inner" }))), (this.label || this.helpertext) && (h("p", { key: '2f03734659b55b522e49f5daca3f9e494fa873f5', class: "pn-radio-content" }, this.label && (h("label", { key: '0fd0b95621317be2f320e359118abdb9c3556100', htmlFor: this.radioid, class: "pn-radio-label" }, this.label)), this.helpertext && (h("span", { key: '8a0dea7825a3e71f54b896a93331f374f1811c65', id: this.idHelper, class: "pn-radio-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '695a8edf949944d8a86cbdaba665a048fafed99b', color: "gray900", icon: this.icon }))));
+        return (h(Host, { key: 'ae520e0cfb3de29899ac40377cbb55061cd01b68' }, h("input", { key: 'd2195982014090f751f36f46687dc9c1e049e32d', type: "radio", id: this.radioid, value: this.value, name: this.name, disabled: this.disabled, required: this.required, checked: this.checked, "aria-describedby": !!this.helpertext && this.idHelper, "aria-invalid": this.invalid?.toString() }), h("div", { key: '0ebb9fa07ebb3b896e8efd3545bc7fe295c56d05', class: "pn-radio", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: 'a76dd992f2b3f2afb54e1db31ee50638002d5b4a', class: "pn-radio-container" }, h("div", { key: 'e456252ee2011d1dee97aff66f6ba4c122a5ca80', class: "pn-radio-outer" }, h("div", { key: 'dd7aee8305f27590d524b63336c619d7b440a781', class: "pn-radio-inner" }))), (this.label || this.helpertext) && (h("p", { key: '664c532213f996509cf6abe4a9d557b21ba60464', class: "pn-radio-content" }, this.label && (h("label", { key: '090e79852aa459100d0a382778bc30b75e61fe32', htmlFor: this.radioid, class: "pn-radio-label" }, this.label)), this.helpertext && (h("span", { key: '1785f82b7d25eff5117587777db5d02584609885', id: this.idHelper, class: "pn-radio-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '2902b6b37407a1b3dc7b60d47405de5ead710a57', color: "gray900", icon: this.icon }))));
     }
     static get watchers() { return {
         "radioid": ["handleId"]

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

@@ -101,7 +101,7 @@ const PnSearchField = /*@__PURE__*/ proxyCustomElement(class PnSearchField exten
         return classNames;
     }
     render() {
-        return (h(Host, { key: '8326d2235579e0cb7a92c864c373bfe10ac93f98', class: this.getClassNames() }, h("div", { key: '51875e4b1e11e77646b1f81f25d57472acb61c93', class: "input-container" }, h("input", { key: '04fb6a318e2ba6afa3e20b9a132f0b1d84775fc9', type: "search", value: this.value, id: this.searchid, name: this.name, "aria-label": this.label, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, list: this.list, ref: el => (this.searchElement = el), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), h("div", { key: '0ff204aee2d455d3800d5b2fa8107b27db647587', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (h("pn-button", { key: 'f820315a99ae3ec92ffd3c7e82098442722a6be0', small: true, class: "search", type: "button", appearance: "light", icon: search, iconOnly: true, noTab: this.button !== 'icon-inline', arialabel: this.translate('SEARCH'), onPnClick: e => this.emitSearch({ click: e.detail }) })), this.button !== 'icon-inline' && (h("pn-button", { key: '2cb9544a3339ed88bc966b2e01430bc49238d885', small: true, class: "clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: this.value && (!this.loading || this.button !== 'none'), onPnClick: () => this.clearInput() })), this.button === 'none' || (this.button === 'icon-inline' && h("pn-spinner", { key: '019aaa565d24b635a012ae8c4f6ceaebbc0b74c6' })))), this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { key: 'e0567545bdb6982aaf9dbf989cd5cbbae72c2054', label: this.buttonLabel, appearance: this.buttonLight ? 'light' : null, icon: search, iconOnly: true, arialabel: this.button === 'icon' ? this.buttonLabel : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) }))));
+        return (h(Host, { key: 'e37e5e244250cfa6f2f042b2c4b78952fa7d9a79', class: this.getClassNames() }, h("div", { key: 'eed981fb9d9fb396fbd18242e54efb2f7d7045aa', class: "input-container" }, h("input", { key: '218ba7784220d2709d65ed94b818e14d9d49c08a', type: "search", value: this.value, id: this.searchid, name: this.name, "aria-label": this.label, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, list: this.list, ref: el => (this.searchElement = el), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), h("div", { key: '90487db137ea5f86500d4cebe40c101085aa6dff', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (h("pn-button", { key: 'db7bd6327c382b49b3a3f1d4ae355273b64f01b3', small: true, class: "search", type: "button", appearance: "light", icon: search, iconOnly: true, noTab: this.button !== 'icon-inline', arialabel: this.translate('SEARCH'), onPnClick: e => this.emitSearch({ click: e.detail }) })), this.button !== 'icon-inline' && (h("pn-button", { key: '44b876f97d6a961b12363c0e3e342399ddccad1f', small: true, class: "clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: this.value && (!this.loading || this.button !== 'none'), onPnClick: () => this.clearInput() })), this.button === 'none' || (this.button === 'icon-inline' && h("pn-spinner", { key: '8f116b75dee2226c3efb89bbc4df1a1cf1e21175' })))), this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { key: 'a952f2dce26f841f3e934d2195649ab8c584c297', label: this.buttonLabel, appearance: this.buttonLight ? 'light' : null, icon: search, iconOnly: true, arialabel: this.button === 'icon' ? this.buttonLabel : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) }))));
     }
     static get style() { return PnSearchFieldStyle0; }
 }, [0, "pn-search-field", {

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

@@ -30,7 +30,7 @@ const PnSegment$1 = /*@__PURE__*/ proxyCustomElement(class PnSegment extends HTM
         this.segmentHover.emit(mouse);
     }
     render() {
-        return (h(Host, { key: 'aefe64a8e024e1677b3816973b9a91dc1048cb56', onMouseEnter: (event) => this.handleHover(event) }, h("input", { key: '4d36074e76de1648020c31d30ad38d8a67ca3984', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), h("label", { key: '1e6e54d9140bd27266d426ad4e9ecf68f505a7ee', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && h("pn-icon", { key: '5733ce0a43d33337785771da3071c0c9043fbdde', icon: this.icon, color: "blue700" }), h("span", { key: '07759d481e84a914e8c0525d0b21fcc85356c3db', class: "pn-segment-text" }, this.label, h("slot", { key: 'de3a243b862d18555f1073165f1b8b817d86aa04' })))));
+        return (h(Host, { key: 'c04c9f14d3b5436efb16cd391eb2bbc64be74b38', onMouseEnter: (event) => this.handleHover(event) }, h("input", { key: '8e755a9c00f5f058e6dcacfb14000fa6ea2916a8', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), h("label", { key: 'dc13164594408f0cc3da2812fec29c280d09423b', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && h("pn-icon", { key: 'cb77aa8a7b2595b6a99eb2ff5f58230c934d3bc0', icon: this.icon, color: "blue700" }), h("span", { key: 'a4368885dfc0b2d78d0c76df7e7dcaf2de479697', class: "pn-segment-text" }, this.label, h("slot", { key: '20e1385578b7f7e52b3a1cc637b84461aa1ef216' })))));
     }
     static get style() { return PnSegmentStyle0; }
 }, [4, "pn-segment", {

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

@@ -126,7 +126,7 @@ const PnSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class PnSegmentedC
     }
     /*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/
     render() {
-        return (h(Host, { key: 'aea003dbcf14cb96c8c3e7820918e1363dcdfca8' }, h("div", { key: '42ecbc84057db97c23a7c25b9d687134a75cfcce', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, h("slot", { key: '5f32c7aca5758f22d940c8940c2b7f23742f9631' }), h("div", { key: 'a9a1726d5de7a5732b154c6614e8156ad9ad458c', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), h("div", { key: 'd93f75665a4a1c8d8e1e9d65ea1a6aa7adc9b2e5', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), h("div", { key: '10d3355188c2e76da5cfa78a98917491002427df', class: this.scrollArrowClasses(), hidden: !this.showScrollArrows }, h("button", { key: 'cfea6659a62e3dba6a8b294e8cffd423f39a97f6', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: 'e14140c5d410a33d2f2ea826d636a350463b4437', icon: arrow_left })), h("button", { key: 'c0bad9bdf701ae1cc1e31f39478cfafc87be8ec6', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: '3ac708d78f09c4b3ac6cc6b2ab3de79ebfbb9920', icon: arrow_right })))));
+        return (h(Host, { key: '58ff89aa0cbb4ee126d5b61f5061df51eef69df0' }, h("div", { key: '45e92ad1f5169facf2681d831cfee5c36a6696ca', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, h("slot", { key: '80561deedd796d18ca9fde389fbcfb0f8d761403' }), h("div", { key: 'b4e95afa434f77eb399616732afc9d3434dc724e', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), h("div", { key: '6889b7c2306eac3c0028c53736ce1cd279fc113f', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), h("div", { key: '5afb0f9778f422b093f3137e1a1af7cbbaef6dcc', class: this.scrollArrowClasses(), hidden: !this.showScrollArrows }, h("button", { key: '12a9a28a37b94a2bcd6021874add132ef5d1e9fe', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: '9013d57af659c0e90442c4773e9b1632cea91a94', icon: arrow_left })), h("button", { key: '6eb71575e552897cb49dda3011e61b6ce8016198', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: '8729b2e9885ec045bb3c847347dc34c44042a824', icon: arrow_right })))));
     }
     static get watchers() { return {
         "value": ["valueHandler"]

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

@@ -4,7 +4,7 @@
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
-import { c as chevron_down } from './chevron_down.js';
+import { a as angle_down } from './angle_down.js';
 import { u as uuidv4 } from './helpers.js';
 import { d as defineCustomElement$1 } from './pn-icon2.js';
 
@@ -45,7 +45,7 @@ const PnSelect = /*@__PURE__*/ proxyCustomElement(class PnSelect extends HTMLEle
         return !!this.helpertext || !!this.error;
     }
     render() {
-        return (h(Host, { key: '557d5e0407e14089b58198108c6ac44f90db21ab' }, h("div", { key: 'd322762f5c51b96cb35a9e023b4082812113a273', class: "pn-select", "data-error": this.hasError() }, this.label && (h("label", { key: '2dcf2247ba943591055418cdf38735be3e8386f8', htmlFor: this.selectId, class: "pn-select-label" }, h("span", { key: '29401388d7065dc6ade239f0307c5df9cc61629b' }, this.label))), h("div", { key: '725851becae25fd36ebaeed7262b732c7a2cd05e', class: "pn-select-input" }, this.icon && h("pn-icon", { key: '4c40b12865b8019bdeca9dcae62bf4767f3cdb90', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (h("pn-icon", { key: '8b0d2445db71a83aafbcf7ad34a08aea692cab5c', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), h("select", { key: '8d1555e92ceaffa72a7c12e1911c683a60a4fe42', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', ref: el => (this.select = el) }, h("slot", { key: 'e0ca451783c2e2736c06b13097331058fec82118' })), h("pn-icon", { key: '37d957e3319d281848cfa35b68cc5fa6cb0789cc', class: "pn-select-icon", icon: chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (h("p", { key: 'f98839737c466c368f1f5e4db3aaf77ec45ab236', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, h("span", { key: '8622d967db51059efb8a96e4bc661ede16e36730' }, this.error || this.helpertext))))));
+        return (h(Host, { key: '1e9048eda53ecaa901689f0164cba2a389f543df' }, h("div", { key: 'e24db0f74c4d3657bb1ee6903160fcdaf2910da4', class: "pn-select", "data-error": this.hasError() }, this.label && (h("label", { key: 'c4e6c6c613df6392b0a67123d46f9474ae0e305f', htmlFor: this.selectId, class: "pn-select-label" }, h("span", { key: '58965840227667a57d624538702990125c5f7dca' }, this.label))), h("div", { key: 'd48cef7cd8ceb7cc7fafce1da20574d933d9413f', class: "pn-select-input" }, this.icon && h("pn-icon", { key: 'f4021fd781fb67e2df267606b165607369fd0371', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (h("pn-icon", { key: 'e7d35d9f8191aec7c0ced7442b2419c9dc88fb44', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), h("select", { key: '1b2bd070a7d12e7504bfddfb389d1cb3e9a9053f', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', ref: el => (this.select = el) }, h("slot", { key: 'b9d68ad6844d3c0444f4a4c0f53e7f4c98ce41f7' })), h("pn-icon", { key: '66bc82e862821f70b7f62559c00a9937301b3715', class: "pn-select-icon", icon: angle_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (h("p", { key: '100c25db7cb319a1ae7389bc862ffbcdb6b8f6d3', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, h("span", { key: '73a0373c059ee9d0ec9abd4bcbf99a48409d8112' }, this.error || this.helpertext))))));
     }
     static get style() { return PnSelectStyle0; }
 }, [4, "pn-select", {

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

@@ -1 +1 @@
-{"file":"pn-select2.js","mappings":";;;;;;;;;;AAAA,MAAM,WAAW,GAAG,ynHAAynH,CAAC;AAC9oH,uBAAe,WAAW;;MCiBb,QAAQ;;;;;;wBAeQ,IAAI,CAAC,EAAE;;;;;wBAcL,KAAK;wBAKL,KAAK;uBAKN,KAAK;;;IAtCjC,EAAE,GAAW,aAAa,MAAM,EAAE,EAAE,CAAC;IACrC,YAAY,GAAW,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC;IAEzC,MAAM,CAAoB;IAE1B,EAAE,CAAmB;;IAwCrB,gBAAgB;QACd,IAAI,IAAI,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;QAElC,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;QAEpE,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;KACvE;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;KACrC;IAED,UAAU;QACR,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;KAC1C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,gBAAa,IAAI,CAAC,QAAQ,EAAE,IAC/C,IAAI,CAAC,KAAK,KACT,8DAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,iBAAiB,IACpD,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACnB,CACT,EACD,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,IAAI,IAAI,gEAAS,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,sCAA0B,MAAM,GAAG,EAE/F,IAAI,CAAC,QAAQ,EAAE,KACd,gEACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,wBAAwB,EAC9B,KAAK,EAAC,SAAS,qCAEH,MAAM,GAClB,CACH,EAED,+DACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAE,IAAI,CAAC,YAAY,sBACb,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,YAAY,kBAC1C,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,sBACL,IAAI,CAAC,MAAM,EAAE,KAAK,KAAK,EAAE,EAC3C,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,IAE7B,8DAAQ,CACD,EAET,gEAAS,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAC,SAAS,uCAA0B,MAAM,GAAG,CAClG,EAEL,IAAI,CAAC,UAAU,EAAE,KAChB,0DAAG,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,IACpF,+DAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAQ,CAC1C,CACL,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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}
+{"file":"pn-select2.js","mappings":";;;;;;;;;;AAAA,MAAM,WAAW,GAAG,ynHAAynH,CAAC;AAC9oH,uBAAe,WAAW;;MCiBb,QAAQ;;;;;;wBAeQ,IAAI,CAAC,EAAE;;;;;wBAcL,KAAK;wBAKL,KAAK;uBAKN,KAAK;;;IAtCjC,EAAE,GAAW,aAAa,MAAM,EAAE,EAAE,CAAC;IACrC,YAAY,GAAW,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC;IAEzC,MAAM,CAAoB;IAE1B,EAAE,CAAmB;;IAwCrB,gBAAgB;QACd,IAAI,IAAI,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;QAElC,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;QAEpE,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;KACvE;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;KACrC;IAED,UAAU;QACR,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;KAC1C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,gBAAa,IAAI,CAAC,QAAQ,EAAE,IAC/C,IAAI,CAAC,KAAK,KACT,8DAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,iBAAiB,IACpD,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACnB,CACT,EACD,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,IAAI,IAAI,gEAAS,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,sCAA0B,MAAM,GAAG,EAE/F,IAAI,CAAC,QAAQ,EAAE,KACd,gEACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,wBAAwB,EAC9B,KAAK,EAAC,SAAS,qCAEH,MAAM,GAClB,CACH,EAED,+DACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAE,IAAI,CAAC,YAAY,sBACb,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,YAAY,kBAC1C,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,sBACL,IAAI,CAAC,MAAM,EAAE,KAAK,KAAK,EAAE,EAC3C,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,IAE7B,8DAAQ,CACD,EAET,gEAAS,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,SAAS,uCAA0B,MAAM,GAAG,CAChG,EAEL,IAAI,CAAC,UAAU,EAAE,KAChB,0DAAG,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,IACpF,+DAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAQ,CAC1C,CACL,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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, angle_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={angle_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-spinner2.js

@@ -24,7 +24,7 @@ const PnSpinner = /*@__PURE__*/ proxyCustomElement(class PnSpinner extends HTMLE
         return `${this.size}em`;
     }
     render() {
-        return (h(Host, { key: 'a9ecba01b5b30a660a44439c714b7ad57cf02a88' }, h("svg", { key: '03fbe990bf1ae0402fcb27707e0c1712d8a84492', class: "pn-spinner", style: { '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: 'c48784865cd9c8c3d55cd9b1bd3e0dff7a4ebe35', class: "pn-spinner-circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), h("circle", { key: '5f69d1bbbf864842f9ae54dc9a29b61603a83bff', class: "pn-spinner-dot", cx: "21.3", cy: "16", r: "1.48" }))));
+        return (h(Host, { key: '70929226e52cdda66312d599b0f8d4c83e902263' }, h("svg", { key: '0e4a3843737f29304996b5eb81b772b904f2d1c7', class: "pn-spinner", style: { '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: '09d5ab69786a82fa44fc8b62aeb00b93ae4e8c0d', class: "pn-spinner-circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), h("circle", { key: 'de94ea674640b278406a32486d8dbac3ebaec156', class: "pn-spinner-dot", cx: "21.3", cy: "16", r: "1.48" }))));
     }
     static get style() { return PnSpinnerStyle0; }
 }, [0, "pn-spinner", {

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

@@ -108,7 +108,7 @@ const PnTab$1 = /*@__PURE__*/ proxyCustomElement(class PnTab extends HTMLElement
     }
     render() {
         const Tag = this.tag;
-        return (h(Host, { key: '50c638d4e12ae9011d8efa3606499e906c9cb8c3' }, h(Tag, { key: '79baf88094716a8499801d0becaeb3a5cb3698d4', id: this.tabid, class: "pn-tab", ...this.renderProperties(), onClick: (e) => this.handleClick(e), onMouseEnter: (e) => this.triggerEnter(e), onFocus: (e) => this.triggerEnter(e), onMouseLeave: (e) => this.triggerLeave(e), onBlur: (e) => this.triggerLeave(e), onKeyDown: (e) => this.arrowKeyNav(e) }, !!this.icon && h("pn-icon", { key: '4fd00fa65a2921a5c8197085fc7c2528773b084b', icon: this.icon }), h("slot", { key: '5c72c7d4813f0644a5777b0f4d2575409fcf8c36' }), h("span", { key: 'b6ee7be6b34ac3dc234ec2bc07f948ba612992e4' }, this.label))));
+        return (h(Host, { key: 'ec9df780cc276853bfc6bcbb9af1f6d4f6e8d83e' }, h(Tag, { key: 'aa1b089953f69110583eef6c689973bd118d2fd6', id: this.tabid, class: "pn-tab", ...this.renderProperties(), onClick: (e) => this.handleClick(e), onMouseEnter: (e) => this.triggerEnter(e), onFocus: (e) => this.triggerEnter(e), onMouseLeave: (e) => this.triggerLeave(e), onBlur: (e) => this.triggerLeave(e), onKeyDown: (e) => this.arrowKeyNav(e) }, !!this.icon && h("pn-icon", { key: '583bf623f788662aaa3f612552b52ecfc0edae51', icon: this.icon }), h("slot", { key: 'a5f216eb6ac2ee8fcb7f90daec3f69cc597f9d7e' }), h("span", { key: '26c116fe67ce645c31eed9e37e5529da6fbc97ea' }, this.label))));
     }
     static get style() { return PnTabStyle0; }
 }, [4, "pn-tab", {

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

@@ -3,7 +3,7 @@
  * By PostNord.
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { c as chevron_left, a as chevron_right } from './chevron_right.js';
+import { a as angle_left, b as angle_right } from './angle_right.js';
 import { k as awaitTopbar, e as en } from './helpers.js';
 import { d as defineCustomElement$4 } from './pn-button2.js';
 import { d as defineCustomElement$3 } from './pn-icon2.js';
@@ -158,7 +158,7 @@ const PnTablist$1 = /*@__PURE__*/ proxyCustomElement(class PnTablist extends HTM
         return translations?.[prop]?.[this.language || en];
     }
     render() {
-        return (h(Host, { key: '6018119e45b053e16de64bae803b3baaaeafa41d' }, h("nav", { key: '747235504d6129e765cb87de674b7ffeac293b20', class: "pn-tablist", role: this.isMenu ? null : 'tablist', "aria-label": this.label, "data-stacked": this.stackedicons, "data-small": !this.isMenu && this.small, "data-large": this.isMenu, "data-scroll": this.showScrollArrows, ref: el => (this.tabListEl = el) }, h("slot", { key: 'a4e2d984d78fcf9d31d740865fdeb3df588dc772' }), h("div", { key: '29ee0561e19d48d4f974d3844772ca72ad6577af', class: "pn-tablist-line" }, h("div", { key: 'e6a2b93e8e1c696356ddbaff76ecaa3e7bfd3924', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), h("div", { key: '2d884eeeaff74af37abbb46b6e6d6475aeafee0c', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), h("div", { key: '4674ccbc7aea1a08721b11b121c2a00c56af50a6', class: "pn-tablist-scroll" }, h("pn-button", { key: '8da1137191ccf9f3e76aa05879b76634323553f8', class: "pn-tablist-arrow", "data-show": this.arrowLeft, onClick: () => this.scroll(), noTab: true, appearance: "light", variant: "outlined", icon: chevron_left, iconOnly: true, arialabel: this.translate('LEFT'), small: true }), h("pn-button", { key: '99ce43b13ad34b0326f58e92354265b8bca047e1', class: "pn-tablist-arrow", "data-show": this.arrowRight, onClick: () => this.scroll({ right: true }), noTab: true, appearance: "light", variant: "outlined", icon: chevron_right, iconOnly: true, arialabel: this.translate('RIGHT'), small: true }))));
+        return (h(Host, { key: '1de634d581308a90d175beed6e80d87f9503ba46' }, h("nav", { key: 'c372ea946ce171e4a96b1298f14216c6fe95218a', class: "pn-tablist", role: this.isMenu ? null : 'tablist', "aria-label": this.label, "data-stacked": this.stackedicons, "data-small": !this.isMenu && this.small, "data-large": this.isMenu, "data-scroll": this.showScrollArrows, ref: el => (this.tabListEl = el) }, h("slot", { key: '1040c9e70f6b4a2542913e0695b775dd07c3d1b9' }), h("div", { key: '94e99bc1079bc23f38a629c966af8e4de9e8689d', class: "pn-tablist-line" }, h("div", { key: '713ab47c16b5bc13035f2e28f2333e9dfdc25177', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), h("div", { key: 'aa6a7585dffad93a48900e6a5fa0f74a40ec18ad', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), h("div", { key: 'e5e45bcd0d68a6bf11d16865f4f2f0ceead66ed5', class: "pn-tablist-scroll" }, h("pn-button", { key: 'a37736842598d230cc392088f5d6ea4ebd82cc4c', class: "pn-tablist-arrow", "data-show": this.arrowLeft, onClick: () => this.scroll(), noTab: true, appearance: "light", variant: "outlined", icon: angle_left, iconOnly: true, arialabel: this.translate('LEFT'), small: true }), h("pn-button", { key: 'bb5524b809761dc965b5d6c68c57fc2b3c605593', class: "pn-tablist-arrow", "data-show": this.arrowRight, onClick: () => this.scroll({ right: true }), noTab: true, appearance: "light", variant: "outlined", icon: angle_right, iconOnly: true, arialabel: this.translate('RIGHT'), small: true }))));
     }
     static get watchers() { return {
         "value": ["setValue"],

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

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

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

@@ -27,7 +27,7 @@ const PnTextLink = /*@__PURE__*/ proxyCustomElement(class PnTextLink extends HTM
     }
     get hostElement() { return this; }
     render() {
-        return (h("a", { key: '88ee2cf28a906eecb3b77f3bb4c25103368a6be1', id: this.linkid, class: "pn-text-link", href: this.href, rel: this.rel, target: this.target, download: this.download, hreflang: this.hreflang, media: this.media, referrerPolicy: this.referrerpolicy, "data-icon": !!this.icon, "data-icon-left": this.leftIcon, "data-light": this.light }, this.label, h("slot", { key: 'a0ceda16a5282b86356334e0f68872bdf6ddc8dd' }), this.icon && h("pn-icon", { key: '85a9dc141e364134bb258bbdb5a7b76ad76b37bf', icon: this.icon })));
+        return (h("a", { key: 'e3eedcb07dbfb7530142b37f6fa11c2df8eabd08', id: this.linkid, class: "pn-text-link", href: this.href, rel: this.rel, target: this.target, download: this.download, hreflang: this.hreflang, media: this.media, referrerPolicy: this.referrerpolicy, "data-icon": !!this.icon, "data-icon-left": this.leftIcon, "data-light": this.light }, this.label, h("slot", { key: '830b2a522a8c296540c2831d0b5fae2b35933337' }), this.icon && h("pn-icon", { key: '97b8e1c3037cad1d5bd3b9910762508615a9e191', icon: this.icon })));
     }
     static get style() { return PnTextLinkStyle0; }
 }, [4, "pn-text-link", {

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

@@ -53,7 +53,7 @@ const PnTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PnTextarea extends H
         return !!(this.helpertext?.length || this.error?.length);
     }
     render() {
-        return (h(Host, { key: 'f6402df35f4bd3995044899cdbb88c12a3b0d769' }, h("div", { key: 'a29993e5382b5b6d99d301bab1fb7266439fe83b', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, h("label", { key: '23c3bc4dd4f9cf3ebfbfaedaa864dfdab9b69480', class: "pn-textarea-label", htmlFor: this.textareaid }, h("span", { key: '422340deb784b2c633d9da8b45a8a91e7bfaaed1' }, this.label), this.maxlength >= 1 && h("span", { key: '9dcabac30990f71ba1fbebed9cd7adc6ca0ffd3d' }, `${this.value?.length || 0}/${this.maxlength}`)), h("textarea", { key: '49020658e51cdf29c4da81aacfd588a016bb57b8', class: "pn-textarea-element", id: this.textareaid, name: this.name, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, placeholder: this.placeholder, maxlength: this.maxlength, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-describedby": this.hasMessage() ? this.idHelper : null, "aria-invalid": this.hasError().toString(), onInput: e => this.setVal(e), value: this.value }), this.hasMessage() && (h("p", { key: '68c4dd53d3b63e90fb4ea586120874c39baedcdf', id: this.idHelper, class: "pn-textarea-text", role: this.error?.length ? 'alert' : null }, h("span", { key: 'e7dd508206ca9dfb965e47e8ab35fede65e6bf19' }, this.error || this.helpertext))))));
+        return (h(Host, { key: 'c8cd0f74604646f7ac3ed6e8d4e7846b6d818b02' }, h("div", { key: '48fb0a2c6c30968079633a36b5d6a85ee8a07366', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, h("label", { key: 'fbe7eac959225c7ee7d2a13fc3bdc75aca42363a', class: "pn-textarea-label", htmlFor: this.textareaid }, h("span", { key: '6d433af86539e7bb9b0bdd673f33f3297f79aa69' }, this.label), this.maxlength >= 1 && h("span", { key: '12e7c0a22af8e92136d7c893685d80e741d0c9f1' }, `${this.value?.length || 0}/${this.maxlength}`)), h("textarea", { key: 'c7dca374bf36de54afc9e2183ddb95c0c78c9f61', class: "pn-textarea-element", id: this.textareaid, name: this.name, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, placeholder: this.placeholder, maxlength: this.maxlength, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-describedby": this.hasMessage() ? this.idHelper : null, "aria-invalid": this.hasError().toString(), onInput: e => this.setVal(e), value: this.value }), this.hasMessage() && (h("p", { key: '9a5c29b6db59b4b881fe4b76f3cfd6dd69d79249', id: this.idHelper, class: "pn-textarea-text", role: this.error?.length ? 'alert' : null }, h("span", { key: '25a43d7f4ba47550623e4937ae4b8bf830fda6c0' }, this.error || this.helpertext))))));
     }
     static get style() { return PnTextareaStyle0; }
 }, [0, "pn-textarea", {