@postnord/pn-marketweb-components 3.5.2 → 3.5.3

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-modal/pn-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"pn-modal.js","sourceRoot":"","sources":["../../../../src/components/feedback/pn-modal/pn-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, Watch, Event, EventEmitter, forceUpdate, State } from '@stencil/core';\nimport { awaitTopbar, en, reduceMotion } from '@/index';\nimport type { PnLanguages } from '@/index';\n\nimport { close as closeIcon } from 'pn-design-assets/pn-assets/icons.js';\nimport { PnTranslations, translations } from './translation';\n\n/**\n * Present content in a modal that overlays everything on the current page.\n * Use the prop `open` to toggle the visiblity.\n * Use the event `modalToggle` to determine when the modal is being closed/opened by the user.\n *\n * @slot - The default slot, will be placed in the middle content area.\n * @slot header - Place the title + lead text in the header.\n * @slot buttons - Place buttons inside the modal at the bottom.\n */\n@Component({\n  tag: 'pn-modal',\n  styleUrl: 'pn-modal.scss',\n})\nexport class PnModal {\n  private mo: MutationObserver;\n\n  private readonly standardAnimationDuration = 400;\n  private animationDuration: number = this.standardAnimationDuration;\n\n  modalTimeout: NodeJS.Timeout;\n\n  private modalElement: HTMLDialogElement;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() isClosing: boolean = false;\n  @State() isOpening: boolean = false;\n\n  /** Set a label for the modal. */\n  @Prop() label?: string;\n  /** Set a descriptive text for the modal. */\n  @Prop() helpertext?: string;\n  /** Set the language. */\n  @Prop() language?: PnLanguages = null;\n\n  /** Bind to this property if you want to control the visibility of the modal from your own data. @category Features */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /** Prevent users from closing the modal by clicking on the backdrop or the `ESC` key. @category Features */\n  @Prop() persistent?: boolean = false;\n  /** Hide the close button. If you disable this, make sure you build your own cancel button. @category Features */\n  @Prop() hideClose?: boolean = false;\n  /**\n   * Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight.\n   * Do not use if you have a lot of conditional rendering inside the modal.\n   */\n  @Prop() allowOverflow?: boolean = false;\n\n  /** Use the `sheet` visual. Aligns the modal to the right. @category Visual */\n  @Prop() sheet?: boolean = false;\n  /** Define your own max width of the modal. Default is `45em`. @category Visual */\n  @Prop() maxWidth?: string = null;\n\n  @Watch('open')\n  handleOpen() {\n    if (this.open) this.openModal();\n    else {\n      this.closeModal();\n      /** In the next update, we can remove this one so you can finally stack modals. */\n      this.close.emit(true);\n    }\n\n    this.handleOverflow();\n\n    clearTimeout(this.modalTimeout);\n    this.isClosing = !this.open && true;\n\n    if (reduceMotion()) this.animationDuration = 0;\n    else this.animationDuration = this.standardAnimationDuration;\n\n    this.modalTimeout = setTimeout(() => {\n      this.isClosing = false;\n      this.modalVisiblity.emit({ visible: this.open });\n    }, this.animationDuration);\n  }\n\n  @Watch('maxWidth')\n  handleMaxWidth() {\n    const width = this.maxWidth || '45em';\n    this.modalElement.style.setProperty('--pn-modal-max-width', width);\n  }\n\n  /** This event is fired when the modal is toggled. */\n  @Event() modalToggle: EventEmitter<{ open: boolean }>;\n  /** This event is dispatched after the opening/closing animation has finished playing. */\n  @Event() modalVisiblity: EventEmitter<{ visible: boolean }>;\n  /**\n   * Event fired when the modal is closed, either by clicking on the dark background or by clicking on the close button.\n   * @deprecated Use the new `modalToggle` event instead.\n   */\n  @Event() close: EventEmitter<boolean>;\n\n  connectedCallback() {\n    this.mo = new MutationObserver(() => forceUpdate(this.hostElement));\n    this.mo.observe(this.hostElement, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  async componentWillLoad() {\n    if (this.language === null) await awaitTopbar(this.hostElement);\n  }\n\n  componentDidLoad() {\n    this.handleMaxWidth();\n    if (this.open) this.openModal();\n  }\n\n  private translate(prop: PnTranslations) {\n    return translations?.[prop]?.[this.language || en] || prop;\n  }\n\n  private handleOverflow() {\n    if (!this.allowOverflow) return;\n    const overflow = this.modalElement.scrollHeight > innerHeight * 0.85 ? 'hidden auto' : 'unset';\n    this.modalElement.style.setProperty('--pn-modal-overflow', overflow);\n  }\n\n  private isSameModal(target: HTMLElement) {\n    return this.modalElement.isSameNode(target);\n  }\n\n  private handleKeyboard(event: KeyboardEvent) {\n    if (event.key !== 'Escape') return;\n\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    if (!this.persistent) this.setModalClose();\n  }\n\n  private clickModalBackground(event: MouseEvent) {\n    const { clientY, clientX } = event;\n\n    const notInsideAnyModal = (event.target as HTMLDialogElement).localName !== this.modalElement.localName;\n    const notThisModal = !this.isSameModal(event.target as HTMLElement);\n\n    if (notInsideAnyModal || notThisModal) return;\n\n    const { top, left, height, width } = this.modalElement.getBoundingClientRect();\n    const isInModal = top <= clientY && clientY <= top + height && left <= clientX && clientX <= left + width;\n\n    if (!isInModal && !this.persistent) this.toggleOpen(false);\n  }\n\n  private setModalClose() {\n    this.toggleOpen(false);\n  }\n\n  private closeModal() {\n    this.modalElement.close();\n  }\n\n  private openModal() {\n    this.modalElement.showModal();\n  }\n\n  private toggleOpen(state?: boolean) {\n    this.open = state ?? !this.open;\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          class=\"pn-modal\"\n          data-closing={this.isClosing}\n          data-sheet={this.sheet}\n          onClose={() => this.setModalClose()}\n          onCancel={() => this.setModalClose()}\n          onToggle={() => this.modalToggle.emit({ open: this.open })}\n          onKeyDown={event => this.handleKeyboard(event)}\n          onClick={event => this.clickModalBackground(event)}\n          ref={el => (this.modalElement = el)}\n        >\n          {!this.hideClose && (\n            <pn-button\n              small\n              class=\"pn-modal-close-button\"\n              icon={closeIcon}\n              iconOnly={true}\n              arialabel={this.translate('CLOSE_MODAL')}\n              appearance=\"light\"\n              variant=\"borderless\"\n              type=\"button\"\n              onPnClick={() => this.setModalClose()}\n            />\n          )}\n\n          <header class=\"pn-modal-header\">\n            {this.label && <h2 class=\"pn-modal-label\">{this.label}</h2>}\n            {this.helpertext && <p class=\"pn-modal-text\">{this.helpertext}</p>}\n\n            <slot name=\"header\"></slot>\n          </header>\n\n          <section class=\"pn-modal-content\">\n            <slot></slot>\n          </section>\n\n          <nav class=\"pn-modal-buttons\">\n            <slot name=\"buttons\"></slot>\n          </nav>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pn-modal.js","sourceRoot":"","sources":["../../../../src/components/feedback/pn-modal/pn-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  State,\n  Listen,\n} from '@stencil/core';\nimport { awaitTopbar, en, isSmallScreen, reduceMotion } from '@/index';\nimport type { PnLanguages } from '@/index';\n\nimport { close as closeIcon } from 'pn-design-assets/pn-assets/icons.js';\nimport { PnTranslations, translations } from './translation';\n\n/**\n * Present content in a modal that overlays everything on the current page.\n * Use the prop `open` to toggle the visiblity.\n * Use the event `modalToggle` to determine when the modal is being closed/opened by the user.\n *\n * @slot - The default slot, will be placed in the middle content area.\n * @slot image - Place an image or illustration at the top of the modal.\n * @slot header - Place the title + lead text in the header.\n * @slot buttons - Place buttons inside the modal at the bottom.\n * pn-buttons aligns automatically to the right, set the data-left attribute on the button you want to align to the left.\n */\n@Component({\n  tag: 'pn-modal',\n  styleUrl: 'pn-modal.scss',\n})\nexport class PnModal {\n  private mo: MutationObserver;\n\n  private readonly standardAnimationDuration = 400;\n  private animationDuration: number = this.standardAnimationDuration;\n\n  private modalTimeout: NodeJS.Timeout;\n\n  private modalElement: HTMLDialogElement;\n  private modalContainer: HTMLDivElement;\n  private modalPicture: HTMLPictureElement;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() isClosing: boolean = false;\n  @State() isOpening: boolean = false;\n\n  /** If true, the modal content will remove overflow CSS property. */\n  @State() removeOverflow: boolean = false;\n\n  /** Set a label for the modal. */\n  @Prop() label?: string;\n  /** Set a descriptive text for the modal. */\n  @Prop() helpertext?: string;\n  /** Set the language. */\n  @Prop() language?: PnLanguages = null;\n\n  /** Bind to this property if you want to control the visibility of the modal from your own data. @category Features */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /** Prevent users from closing the modal by clicking on the backdrop or the `ESC` key. @category Features */\n  @Prop() persistent?: boolean = false;\n  /** Hide the close button. If you disable this, make sure you build your own cancel button. @category Features */\n  @Prop() hideClose?: boolean = false;\n  /**\n   * Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight.\n   * Do not use if you have a lot of conditional rendering inside the modal.\n   */\n  @Prop() allowOverflow?: boolean = false;\n\n  /** Use the `sheet` visual. Aligns the modal to the right. @category Visual */\n  @Prop() sheet?: boolean = false;\n  /** Define your own max width of the modal. Default is `45em`. @category Visual */\n  @Prop() maxWidth?: string = null;\n\n  @Watch('open')\n  handleOpen() {\n    if (this.open) this.openModal();\n    else {\n      this.closeModal();\n      /** In the next update, we can remove this one so you can finally stack modals. */\n      this.close.emit(true);\n    }\n\n    this.handleOverflow();\n\n    clearTimeout(this.modalTimeout);\n    this.isClosing = !this.open && true;\n\n    if (reduceMotion()) this.animationDuration = 0;\n    else this.animationDuration = this.standardAnimationDuration;\n\n    this.modalTimeout = setTimeout(() => {\n      this.isClosing = false;\n      this.modalVisiblity.emit({ visible: this.open });\n    }, this.animationDuration);\n  }\n\n  @Watch('maxWidth')\n  handleMaxWidth() {\n    const width = this.maxWidth || '45em';\n    this.modalElement.style.setProperty('--pn-modal-max-width', width);\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleOverflow() {\n    if (this.allowOverflow) this.setOverflow();\n  }\n\n  /** This event is fired when the modal is toggled. */\n  @Event() modalToggle: EventEmitter<{ open: boolean }>;\n  /** This event is dispatched after the opening/closing animation has finished playing. */\n  @Event() modalVisiblity: EventEmitter<{ visible: boolean }>;\n  /**\n   * Event fired when the modal is closed, either by clicking on the dark background or by clicking on the close button.\n   * @deprecated Use the new `modalToggle` event instead.\n   */\n  @Event() close: EventEmitter<boolean>;\n\n  connectedCallback() {\n    this.mo = new MutationObserver(() => forceUpdate(this.hostElement));\n    this.mo.observe(this.hostElement, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  async componentWillLoad() {\n    if (this.language === null) await awaitTopbar(this.hostElement);\n  }\n\n  componentDidLoad() {\n    this.handleMaxWidth();\n    if (this.open) this.openModal();\n  }\n\n  private translate(prop: PnTranslations) {\n    return translations?.[prop]?.[this.language || en] || prop;\n  }\n\n  private showImage() {\n    return !!this.modalPicture?.innerHTML;\n  }\n\n  private showHeader() {\n    return !!(this.label || this.helpertext || this.hostElement.querySelector('[slot=\"header\"]')?.textContent);\n  }\n\n  private setOverflow() {\n    this.removeOverflow = !this.hasOverflow();\n  }\n\n  private hasOverflow(): boolean {\n    const multiplyWith = isSmallScreen() ? 0.95 : 0.85;\n    return this.modalContainer?.scrollHeight > innerHeight * multiplyWith;\n  }\n\n  private isSameModal(target: HTMLElement): boolean {\n    return this.modalElement.isSameNode(target);\n  }\n\n  private handleKeyboard(event: KeyboardEvent) {\n    if (event.key !== 'Escape') return;\n\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    if (!this.persistent) this.setModalClose();\n  }\n\n  private clickModalBackground(event: MouseEvent) {\n    const { clientY, clientX } = event;\n\n    const notInsideAnyModal = (event.target as HTMLDialogElement).localName !== this.modalElement.localName;\n    const notThisModal = !this.isSameModal(event.target as HTMLElement);\n\n    if (notInsideAnyModal || notThisModal) return;\n\n    const { top, left, height, width } = this.modalElement.getBoundingClientRect();\n    const isInModal = top <= clientY && clientY <= top + height && left <= clientX && clientX <= left + width;\n\n    if (!isInModal && !this.persistent) this.toggleOpen(false);\n  }\n\n  private setModalClose() {\n    this.toggleOpen(false);\n  }\n\n  private closeModal() {\n    this.modalElement.close();\n  }\n\n  private openModal() {\n    this.modalElement.showModal();\n  }\n\n  private toggleOpen(state?: boolean) {\n    this.open = state ?? !this.open;\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          class=\"pn-modal\"\n          data-closing={this.isClosing}\n          data-sheet={this.sheet}\n          data-image={this.showImage()}\n          data-allow-overflow={this.removeOverflow}\n          onClose={() => this.setModalClose()}\n          onCancel={() => this.setModalClose()}\n          onToggle={() => this.modalToggle.emit({ open: this.open })}\n          onKeyDown={event => this.handleKeyboard(event)}\n          onClick={event => this.clickModalBackground(event)}\n          ref={el => (this.modalElement = el)}\n        >\n          {!this.hideClose && (\n            <pn-button\n              small\n              class=\"pn-modal-close-button\"\n              icon={closeIcon}\n              iconOnly={true}\n              arialabel={this.translate('CLOSE_MODAL')}\n              appearance=\"light\"\n              variant=\"borderless\"\n              type=\"button\"\n              onPnClick={() => this.setModalClose()}\n            />\n          )}\n          <div class=\"pn-modal-container\" ref={el => (this.modalContainer = el)}>\n            <div class=\"pn-modal-image\" hidden={!this.showImage()}>\n              <picture class=\"pn-modal-picture\" ref={el => (this.modalPicture = el)}>\n                <slot name=\"image\"></slot>\n              </picture>\n            </div>\n            <header class=\"pn-modal-header\" hidden={!this.showHeader()}>\n              {this.label && <h2 class=\"pn-modal-label\">{this.label}</h2>}\n              {this.helpertext && <p class=\"pn-modal-text\">{this.helpertext}</p>}\n\n              <slot name=\"header\"></slot>\n            </header>\n            <section class=\"pn-modal-content\">\n              <slot></slot>\n            </section>\n            <nav class=\"pn-modal-buttons\">\n              <slot name=\"buttons\"></slot>\n            </nav>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"]}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-bar/pn-progress-bar.js

@@ -63,7 +63,7 @@ export class PnProgressBar {
         return 'green500';
     }
     render() {
-        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()))));
+        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()))));
     }
     static get is() { return "pn-progress-bar"; }
     static get originalStyleUrls() {

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

@@ -4,6 +4,10 @@
  */
 import { h, Host } from "@stencil/core";
 import { white } from "pn-design-assets/pn-assets/colors.js";
+/**
+ * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead.
+ * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.}
+ */
 export class PnProgressIndicatorStep {
     constructor() {
         this.activated = undefined;
@@ -52,7 +56,7 @@ export class PnProgressIndicatorStep {
         return className;
     }
     render() {
-        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" }))) : (''))));
+        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" }))) : (''))));
     }
     static get is() { return "pn-progress-indicator-step"; }
     static get originalStyleUrls() {

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

@@ -1 +1 @@
-{"version":3,"file":"pn-progress-indicator-step.js","sourceRoot":"","sources":["../../../../../src/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAM7D,MAAM,OAAO,uBAAuB;;;;;;;uBAWP,KAAK;;;IAIvB,aAAa,CAAuB;IAC7C,oBAAoB;QAClB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3D,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;YAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YAChC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC;QACjD,CAAC;IACH,CAAC;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;IACnB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC3E,4DAAK,KAAK,EAAC,eAAe,GAAG;YAC7B,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,8DAAQ;gBACP,IAAI,CAAC,IAAI,CACN;YACN,4DAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAC3B,WACE,KAAK,EAAC,4BAA4B,uBAChB,eAAe,EACjC,EAAE,EAAC,WAAW,EACd,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,WAAW;gBAEnB,gBACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,gBAAgB,EACvB,MAAM,EAAE,KAAK,uBACK,IAAI,kBACT,GAAG,GAChB,CACE,CACP,CAAC,CAAC,CAAC,CACF,EAAE,CACH,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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,"file":"pn-progress-indicator-step.js","sourceRoot":"","sources":["../../../../../src/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAE7D;;;GAGG;AAKH,MAAM,OAAO,uBAAuB;;;;;;;uBAWP,KAAK;;;IAIvB,aAAa,CAAuB;IAC7C,oBAAoB;QAClB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3D,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;YAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YAChC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC;QACjD,CAAC;IACH,CAAC;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;IACnB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC3E,4DAAK,KAAK,EAAC,eAAe,GAAG;YAC7B,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,8DAAQ;gBACP,IAAI,CAAC,IAAI,CACN;YACN,4DAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAC3B,WACE,KAAK,EAAC,4BAA4B,uBAChB,eAAe,EACjC,EAAE,EAAC,WAAW,EACd,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,WAAW;gBAEnB,gBACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,gBAAgB,EACvB,MAAM,EAAE,KAAK,uBACK,IAAI,kBACT,GAAG,GAChB,CACE,CACP,CAAC,CAAC,CAAC,CACF,EAAE,CACH,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -3,6 +3,10 @@
  * By PostNord.
  */
 import { h } from "@stencil/core";
+/**
+ * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead.
+ * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.}
+ */
 export class PnProgressIndicator {
     constructor() {
         this.activeStep = 0;
@@ -28,7 +32,7 @@ export class PnProgressIndicator {
         });
     }
     render() {
-        return (h("div", { key: '7809a31648a1c899311e83dc28db7b0b23272547', class: "pn-progress-indicator" }, h("slot", { key: 'a1b9970f16de43052e473ea166829a1ad6e5e725' })));
+        return (h("div", { key: '1108f70edf525c6e7e0e45d34a6d58e69c5b9ab2', class: "pn-progress-indicator" }, h("slot", { key: 'c4035cf9fadb46f4e573c0225bebb2f8f7187da6' })));
     }
     static get is() { return "pn-progress-indicator"; }
     static get originalStyleUrls() {

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

@@ -1 +1 @@
-{"version":3,"file":"pn-progress-indicator.js","sourceRoot":"","sources":["../../../../src/components/feedback/pn-progress-indicator/pn-progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAMzF,MAAM,OAAO,mBAAmB;;0BAIgB,CAAC;;IAHpC,WAAW,CAAc;IAKpC,iGAAiG;IACxF,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;IAC5C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;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,EAAE,EAAE;YAC5B,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YACnC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QAClB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,uBAAuB;YAChC,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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,"file":"pn-progress-indicator.js","sourceRoot":"","sources":["../../../../src/components/feedback/pn-progress-indicator/pn-progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzF;;;GAGG;AAKH,MAAM,OAAO,mBAAmB;;0BAIgB,CAAC;;IAHpC,WAAW,CAAc;IAKpC,iGAAiG;IACxF,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;IAC5C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;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,EAAE,EAAE;YAC5B,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YACnC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QAClB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,uBAAuB;YAChC,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-stepper/pn-progress-stepper.css

@@ -1,7 +1,11 @@
 /* Global utility variables */
 /* Input styles */
 /* Transition variables */
-pn-progress-stepper .pn-progress-stepper {
+pn-progress-stepper {
+  display: block;
+}
+
+pn-progress-stepper .pn-progress {
   position: relative;
   width: 100%;
   background: #f3f2f2;
@@ -9,28 +13,100 @@ pn-progress-stepper .pn-progress-stepper {
   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 {
+pn-progress-stepper .pn-progress-label {
+  display: block;
+  color: #2d2013;
+  font-size: 1em;
   margin-bottom: 0.5em;
 }
-pn-progress-stepper .pn-progress-stepper-value {
+pn-progress-stepper .pn-progress-value {
   position: absolute;
   top: -0.0625em;
   left: -0.0625em;
   height: 0.625em;
   background-color: #005d92;
-  width: calc(var(--progress-value) + 0.125em);
+  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-stepper-value {
+  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%);
+  }
 }

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

@@ -10,57 +10,37 @@ import { en, awaitTopbar, uuidv4 } from "../../../globals/helpers";
  **/
 export class PnProgressStepper {
     constructor() {
+        this.builtInLabel = undefined;
         this.progressValue = 0;
-        this.label = undefined;
+        this.label = '';
+        this.progressStepperId = '';
+        this.language = null;
         this.totalSteps = this.maxStep;
         this.currentStep = this.minStep;
         this.stepName = undefined;
-        this.progressStepperId = '';
-        this.language = null;
+        this.dots = false;
     }
     id = `pn-progress-stepper-${uuidv4()}`;
-    idLabel = `${this.id}-label`;
-    idBar = `${this.id}-bar`;
     minStep = 1;
     maxStep = 7;
     hostElement;
-    validateCurrentStep(step) {
-        this.validate(step, 'currentStep');
-    }
-    validateTotalSteps(step) {
-        this.validate(step, 'totalSteps');
+    stepWatchers(a, b, c) {
+        if (c === 'currentStep')
+            this.validate(a, 'currentStep');
+        if (c === 'totalSteps')
+            this.validate(b, 'totalSteps');
+        this.calculateProgress();
     }
     watchLanguage() {
-        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`;
-        }
+        this.builtInLabel = translations.STEP[this.language || en];
     }
     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();
-    }
-    hasCustomLabel() {
-        if (this.label === undefined)
-            return false;
-        return !Object.keys(translations.STEP).find(step => translations.STEP[step] === this.label);
+        if (this.language === null)
+            await awaitTopbar(this.hostElement);
     }
     validate(step, prop) {
         const componentName = this.hostElement.localName;
@@ -80,14 +60,20 @@ export class PnProgressStepper {
     calculateProgress() {
         try {
             this.progressValue = Math.floor((this.currentStep / this.totalSteps) * 100);
-            this.hostElement.style.setProperty('--progress-value', `${this.progressValue}%`);
+            this.hostElement.style.setProperty('--pn-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: '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" }))));
+        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 })))));
     }
     static get is() { return "pn-progress-stepper"; }
     static get originalStyleUrls() {
@@ -104,7 +90,7 @@ export class PnProgressStepper {
         return {
             "label": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -114,30 +100,70 @@ export class PnProgressStepper {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set custom label for the stepper, recommended default label is \"Step\"."
+                    "text": "Set custom label for the stepper, default label is \"Step\"."
                 },
                 "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "''"
             },
-            "totalSteps": {
-                "type": "number",
-                "mutable": true,
+            "progressStepperId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set a custom HTML id on the progress stepper element to associate progress bar with label."
+                },
+                "attribute": "progress-stepper-id",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "PnSteps",
-                    "resolved": "1 | 2 | 3 | 4 | 5 | 6 | 7",
+                    "original": "PnLanguages",
+                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
                     "references": {
-                        "PnSteps": {
+                        "PnLanguages": {
                             "location": "import",
                             "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnSteps"
+                            "id": "src/globals/types.ts::PnLanguages"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set total amount of steps, maximum `7` is allowed."
+                    "text": "Set the language manually, only use this prop if the pnTopbar is not loaded.\nWill not overwrite the custom `label` prop if used."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "totalSteps": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Steps"
+                        }],
+                    "text": "Set total amount of steps, maximum allowed is `7`."
                 },
                 "attribute": "total-steps",
                 "reflect": false,
@@ -147,20 +173,17 @@ export class PnProgressStepper {
                 "type": "number",
                 "mutable": true,
                 "complexType": {
-                    "original": "PnSteps",
-                    "resolved": "1 | 2 | 3 | 4 | 5 | 6 | 7",
-                    "references": {
-                        "PnSteps": {
-                            "location": "import",
-                            "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnSteps"
-                        }
-                    }
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "category",
+                            "text": "Steps"
+                        }],
                     "text": "The current step of the progress stepper."
                 },
                 "attribute": "current-step",
@@ -178,58 +201,41 @@ export class PnProgressStepper {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "category",
+                            "text": "Steps"
+                        }],
                     "text": "You can add a custom optional string to the label if you need a name for the current step."
                 },
                 "attribute": "step-name",
                 "reflect": false
             },
-            "progressStepperId": {
-                "type": "string",
+            "dots": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set a custom HTML id on the progress stepper element to associate progress bar with label."
-                },
-                "attribute": "progress-stepper-id",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "language": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "PnLanguages",
-                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
-                    "references": {
-                        "PnLanguages": {
-                            "location": "import",
-                            "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnLanguages"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set the language manually, only use this prop if the pnTopbar is not loaded.\nWill not overwrite the `label` prop if used."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Visual"
+                        }],
+                    "text": "Use the dots visual, instead of the bar.\n\nThis will hide the label from view, but is still accessible to screenreaders."
                 },
-                "attribute": "language",
+                "attribute": "dots",
                 "reflect": false,
-                "defaultValue": "null"
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
+            "builtInLabel": {},
             "progressValue": {}
         };
     }
@@ -237,16 +243,13 @@ export class PnProgressStepper {
     static get watchers() {
         return [{
                 "propName": "currentStep",
-                "methodName": "validateCurrentStep"
+                "methodName": "stepWatchers"
             }, {
                 "propName": "totalSteps",
-                "methodName": "validateTotalSteps"
+                "methodName": "stepWatchers"
             }, {
                 "propName": "language",
                 "methodName": "watchLanguage"
-            }, {
-                "propName": "progressStepperId",
-                "methodName": "watchId"
             }];
     }
 }