@postnord/pn-marketweb-components 3.5.2 → 3.5.3

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

@@ -1 +1 @@
-{"version":3,"file":"pn-progress-stepper.js","sourceRoot":"","sources":["../../../../src/components/feedback/pn-progress-stepper/pn-progress-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["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,"file":"pn-progress-stepper.js","sourceRoot":"","sources":["../../../../src/components/feedback/pn-progress-stepper/pn-progress-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -19,7 +19,7 @@ export class PnSpinner {
         return `${this.size}em`;
     }
     render() {
-        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" }))));
+        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" }))));
     }
     static get is() { return "pn-spinner"; }
     static get originalStyleUrls() {

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

@@ -4,7 +4,6 @@
 pn-toast {
   position: relative;
   display: block;
-  overflow: hidden;
 }
 
 pn-toast .pn-toast {

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

@@ -40,10 +40,13 @@ export class PnToast {
             this.animationDuration = 0;
         else
             this.animationDuration = this.duration;
-        if (this.hide)
-            this.closeToast();
-        else
-            this.openToast();
+        this.hostElement.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            if (this.hide)
+                this.closeToast();
+            else
+                this.openToast();
+        });
     }
     /** Event fired when the close button is pressed. */
     close;
@@ -53,8 +56,10 @@ export class PnToast {
      **/
     hidden;
     async componentWillLoad() {
-        if (this.hide)
+        if (this.hide) {
             this.hostElement.style.height = '0';
+            this.hostElement.style.overflow = 'hidden';
+        }
         if (this.language === null)
             await awaitTopbar(this.hostElement);
         // Any text content at this stage means there is slotted content present.
@@ -69,19 +74,18 @@ export class PnToast {
     }
     openToast() {
         requestAnimationFrame(() => {
-            const { scrollHeight } = this.hostElement;
+            const { clientHeight } = this.toast;
             const { height } = this.getRect(this.hostElement);
             this.hostElement.style.height = `${height}px`;
             this.isExpanding = true;
-            this.animateToast(true, `${height}px`, `${scrollHeight}px`);
+            this.animateToast(true, `${height}px`, `${clientHeight}px`);
         });
     }
     closeToast() {
-        const { scrollHeight, clientHeight } = this.hostElement;
-        const height = this.isExpanding ? clientHeight : scrollHeight;
+        const { clientHeight } = this.hostElement;
         this.hostElement.style.height = `0px`;
         this.isClosing = true;
-        this.animateToast(false, `${height}px`, `0px`);
+        this.animateToast(false, `${clientHeight}px`, `0px`);
     }
     animateToast(open, startHeight, endHeight) {
         this.cancelAnimations();
@@ -96,10 +100,12 @@ export class PnToast {
     }
     animationFinish() {
         this.cancelAnimations();
-        if (!this.hide)
-            this.hostElement.style.height = '';
-        else
+        if (this.hide)
             this.hidden.emit(this.hide);
+        else {
+            this.hostElement.style.height = '';
+            this.hostElement.style.overflow = '';
+        }
         this.isClosing = false;
         this.isExpanding = false;
     }
@@ -140,11 +146,14 @@ export class PnToast {
     translate(prop) {
         return translations?.[prop]?.[this.language || en] || prop;
     }
+    isMoving() {
+        return this.isClosing || this.isExpanding;
+    }
     hideToast() {
-        return this.hide && !(this.isClosing || this.isExpanding);
+        return this.hide && !this.isMoving();
     }
     render() {
-        return (h(Host, { key: 'c735e200d6cf3061569c3e55caf583abed738725' }, h("output", { key: '7911e4ca88367ea8130a20abda58449a1f7e3098', id: this.toastId, class: "pn-toast", role: this.getRole(), "data-appearance": this.appearance, "data-temporary": this.temporary, "data-hide": this.hideToast(), ref: el => (this.toast = el) }, this.showIcon() && h("pn-icon", { key: 'b064b710d21583eaba8d5ce1c3b162fb1c71f4e4', class: "pn-toast-icon", icon: this.getIcon() }), h("div", { key: '6e24b6771be924b56e2406ac92c5639f7da4b0b6', class: "pn-toast-content" }, this.showTitle() && h("h4", { key: 'eb24bcbbd70b1b77e86c2598569f443bd7d1bdfb', class: "pn-toast-heading" }, this.heading), this.text && h("p", { key: '713b372860897ef9bc55f401282765bc5684b6f6', class: "pn-toast-text" }, this.text), h("slot", { key: 'e567f676f28d20370407fc481c52c92bc34a06e1' })), this.showIllustration() && h("pn-illustration", { key: '6b0b4f9c1f588f71eb1154b6170994f59aaaae4a', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (h("button", { key: '4111381fb279dc2d5abe520188869133aa948246', class: "pn-toast-button", type: "button", "aria-label": this.translate('HIDE'), onClick: (event) => this.handleClick(event), ref: el => (this.button = el) }, h("pn-icon", { key: '020fe8b66ce1d955dcb5420c44b0b4b5b1845ab9', icon: close }))))));
+        return (h(Host, { key: 'b0f490bf139ccd8682e8d43f75ae99f6d5e4a054' }, h("div", { key: '8bdd1b6525b579d06b82d762e56c0ec34c4bb822', id: this.toastId, class: "pn-toast", role: this.getRole(), "data-appearance": this.appearance, "data-temporary": this.temporary, "data-hide": this.hideToast(), ref: el => (this.toast = el) }, this.showIcon() && h("pn-icon", { key: 'fc5626dbbe0f5a5939179f02be8e1e70eec22ebd', class: "pn-toast-icon", icon: this.getIcon() }), h("div", { key: 'f1aabfdd5d9e62d895cd4cfdaf31a7abb92e0749', class: "pn-toast-content" }, this.showTitle() && h("h4", { key: '6267fa5e2eb67c8a0d16506db0586f9b2fa6b18a', class: "pn-toast-heading" }, this.heading), this.text && h("p", { key: 'b1a2ee4468223afc9c43bb57f3aa72c38d86cb1c', class: "pn-toast-text" }, this.text), h("slot", { key: '2508212f2afc63d3faa5a189dd9ddba33cff3eaa' })), this.showIllustration() && h("pn-illustration", { key: 'bee93e5623aa57d1a1f765dd6ad13a8cdd1ea1d8', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (h("button", { key: '0db9441d732d60bd37446c92b0df34e44f1f61e9', class: "pn-toast-button", type: "button", "aria-label": this.translate('HIDE'), onClick: (event) => this.handleClick(event), ref: el => (this.button = el) }, h("pn-icon", { key: 'a1325ada64366284633932d4ba775e67b3ae6f59', icon: close }))))));
     }
     static get is() { return "pn-toast"; }
     static get originalStyleUrls() {

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

@@ -1 +1 @@
-{"version":3,"file":"pn-toast.js","sourceRoot":"","sources":["../../../../src/components/feedback/pn-toast/pn-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { PnLanguages } from '@/index';\nimport { awaitTopbar, en, ripple, reduceMotion } from '@/index';\nimport { Component, Host, Prop, h, Element, EventEmitter, Event, State, Watch } from '@stencil/core';\nimport {\n  alert_info_circle,\n  check_circle,\n  alert_exclamation_triangle,\n  alert_exclamation_circle,\n  close,\n} from 'pn-design-assets/pn-assets/icons.js';\nimport { translations } from './translation';\n\n/**\n * This component is able to fill many roles of a classic toast.\n * It has 4 different colors, a temporary state, hide button, icon and illustration support.\n *\n * The `pn-toast` will expand to its parent containers full width.\n * Either limit the parent width or set a CSS rule to your specific width if needed.\n */\n@Component({\n  tag: 'pn-toast',\n  styleUrl: 'pn-toast.scss',\n})\nexport class PnToast {\n  toast: HTMLOutputElement;\n  button: HTMLButtonElement;\n\n  private readonly duration: number = 400;\n  private animationDuration: number = this.duration;\n  private animation: Animation;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() isClosing = false;\n  @State() isExpanding = false;\n\n  @State() hasSlottedContent: boolean = false;\n\n  /**\n   * Set a title for the toast. Requires the `text` prop in order to work.\n   * @description Can be used together with slotted content.\n   */\n  @Prop() heading?: string = '';\n  /**\n   * Set a paragraph of text for the toast.\n   * @description Can be used together with slotted content.\n   */\n  @Prop() text?: string = '';\n  /** Give the toast a HTML ID. */\n  @Prop() toastId?: string;\n  /**\n   * Default color is blue, you also have the option of success (green), warning (orange) and error (red).\n   * @category Visual\n   */\n  @Prop() appearance?: '' | 'success' | 'warning' | 'error';\n  /**\n   * This will apply a shadow and border to the toast.\n   * @category Visual\n   */\n  @Prop() temporary: boolean = false;\n  /**\n   * Set an SVG icon.\n   * @category Visual\n   */\n  @Prop() icon?: string;\n  /**\n   * Set an SVG illustration.\n   * @category Visual\n   */\n  @Prop() illustration?: string;\n  /**\n   * Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own.\n   * @see {@link closable}\n   * @category Features\n   */\n  @Prop({ mutable: true, reflect: true }) hide: boolean = false;\n  /**\n   * Show close button.\n   * @category Features\n   */\n  @Prop() closable: boolean = false;\n  /**\n   * Manually set the language, only needed if the `closable` prop is enabled.\n   * @see {@link closable}\n   * @category Features\n   */\n  @Prop({ mutable: true }) language?: PnLanguages = null;\n\n  @Watch('hide')\n  handleHide() {\n    if (reduceMotion()) this.animationDuration = 0;\n    else this.animationDuration = this.duration;\n\n    if (this.hide) this.closeToast();\n    else this.openToast();\n  }\n\n  /** Event fired when the close button is pressed. */\n  @Event() close: EventEmitter<boolean>;\n  /**\n   * This event is fired when the toast is fully hidden after the animation is finished.\n   * Triggers from the close button or if the prop `hide` is set to true.\n   **/\n  @Event() hidden: EventEmitter<boolean>;\n\n  async componentWillLoad() {\n    if (this.hide) this.hostElement.style.height = '0';\n\n    if (this.language === null) await awaitTopbar(this.hostElement);\n    // Any text content at this stage means there is slotted content present.\n    this.hasSlottedContent = !!this.hostElement.textContent;\n  }\n\n  componentDidLoad() {\n    if (!!this.heading && !this.text && !this.hasSlottedContent)\n      console.warn('The %s prop is only available if you use the %s prop or slotted content.', 'heading', 'text');\n  }\n\n  private getRect(element: HTMLElement): DOMRect {\n    return element.getBoundingClientRect();\n  }\n\n  private openToast() {\n    requestAnimationFrame(() => {\n      const { scrollHeight } = this.hostElement;\n      const { height } = this.getRect(this.hostElement);\n\n      this.hostElement.style.height = `${height}px`;\n\n      this.isExpanding = true;\n      this.animateToast(true, `${height}px`, `${scrollHeight}px`);\n    });\n  }\n\n  private closeToast() {\n    const { scrollHeight, clientHeight } = this.hostElement;\n    const height = this.isExpanding ? clientHeight : scrollHeight;\n    this.hostElement.style.height = `0px`;\n\n    this.isClosing = true;\n    this.animateToast(false, `${height}px`, `0px`);\n  }\n\n  private animateToast(open: boolean, startHeight: string, endHeight: string) {\n    this.cancelAnimations();\n    this.animation = this.hostElement.animate(\n      {\n        height: [startHeight, endHeight],\n      },\n      {\n        duration: this.animationDuration,\n        easing: 'cubic-bezier(0.6, 0, 0.2, 1)',\n      },\n    );\n    this.animation.onfinish = () => this.animationFinish();\n    this.animation.oncancel = () => (open ? (this.isExpanding = false) : (this.isClosing = false));\n  }\n\n  private animationFinish() {\n    this.cancelAnimations();\n    if (!this.hide) this.hostElement.style.height = '';\n    else this.hidden.emit(this.hide);\n    this.isClosing = false;\n    this.isExpanding = false;\n  }\n\n  private cancelAnimations() {\n    if (this.animation) this.animation.cancel();\n  }\n\n  private handleClick(event: PointerEvent) {\n    this.hide = true;\n    this.close.emit(this.hide);\n    ripple(event, this.toast);\n  }\n\n  private getIcon(): string {\n    if (this.illustration) return '';\n    if (this.icon) return this.icon;\n    if (this.appearance === 'success') return check_circle;\n    if (this.appearance === 'warning') return alert_exclamation_triangle;\n    if (this.appearance === 'error') return alert_exclamation_circle;\n    return alert_info_circle;\n  }\n\n  private getRole(): string {\n    return this.appearance === 'error' ? 'alert' : 'status';\n  }\n\n  private showIcon(): boolean {\n    return !this.illustration;\n  }\n\n  private showIllustration(): boolean {\n    return !this.showIcon();\n  }\n\n  private showTitle(): boolean {\n    return (this.hasSlottedContent || !!this.text) && !!this.heading;\n  }\n\n  private translate(prop: string): string {\n    return translations?.[prop]?.[this.language || en] || prop;\n  }\n\n  private hideToast() {\n    return this.hide && !(this.isClosing || this.isExpanding);\n  }\n\n  render() {\n    return (\n      <Host>\n        <output\n          id={this.toastId}\n          class=\"pn-toast\"\n          role={this.getRole()}\n          data-appearance={this.appearance}\n          data-temporary={this.temporary}\n          data-hide={this.hideToast()}\n          ref={el => (this.toast = el)}\n        >\n          {this.showIcon() && <pn-icon class=\"pn-toast-icon\" icon={this.getIcon()} />}\n\n          <div class=\"pn-toast-content\">\n            {this.showTitle() && <h4 class=\"pn-toast-heading\">{this.heading}</h4>}\n            {this.text && <p class=\"pn-toast-text\">{this.text}</p>}\n            <slot />\n          </div>\n\n          {this.showIllustration() && <pn-illustration illustration={this.illustration} width=\"5.5em\" height=\"5.5em\" />}\n\n          {this.closable && (\n            <button\n              class=\"pn-toast-button\"\n              type=\"button\"\n              aria-label={this.translate('HIDE')}\n              onClick={(event: PointerEvent) => this.handleClick(event)}\n              ref={el => (this.button = el)}\n            >\n              <pn-icon icon={close} />\n            </button>\n          )}\n        </output>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pn-toast.js","sourceRoot":"","sources":["../../../../src/components/feedback/pn-toast/pn-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { PnLanguages } from '@/index';\nimport { awaitTopbar, en, ripple, reduceMotion } from '@/index';\nimport { Component, Host, Prop, h, Element, EventEmitter, Event, State, Watch } from '@stencil/core';\nimport {\n  alert_info_circle,\n  check_circle,\n  alert_exclamation_triangle,\n  alert_exclamation_circle,\n  close,\n} from 'pn-design-assets/pn-assets/icons.js';\nimport { translations } from './translation';\n\n/**\n * This component is able to fill many roles of a classic toast.\n * It has 4 different colors, a temporary state, hide button, icon and illustration support.\n *\n * The `pn-toast` will expand to its parent containers full width.\n * Either limit the parent width or set a CSS rule to your specific width if needed.\n */\n@Component({\n  tag: 'pn-toast',\n  styleUrl: 'pn-toast.scss',\n})\nexport class PnToast {\n  toast: HTMLDivElement;\n  button: HTMLButtonElement;\n\n  private readonly duration: number = 400;\n  private animationDuration: number = this.duration;\n  private animation: Animation;\n\n  @Element() hostElement: HTMLElement;\n\n  @State() isClosing = false;\n  @State() isExpanding = false;\n\n  @State() hasSlottedContent: boolean = false;\n\n  /**\n   * Set a title for the toast. Requires the `text` prop in order to work.\n   * @description Can be used together with slotted content.\n   */\n  @Prop() heading?: string = '';\n  /**\n   * Set a paragraph of text for the toast.\n   * @description Can be used together with slotted content.\n   */\n  @Prop() text?: string = '';\n  /** Give the toast a HTML ID. */\n  @Prop() toastId?: string;\n  /**\n   * Default color is blue, you also have the option of success (green), warning (orange) and error (red).\n   * @category Visual\n   */\n  @Prop() appearance?: '' | 'success' | 'warning' | 'error';\n  /**\n   * This will apply a shadow and border to the toast.\n   * @category Visual\n   */\n  @Prop() temporary: boolean = false;\n  /**\n   * Set an SVG icon.\n   * @category Visual\n   */\n  @Prop() icon?: string;\n  /**\n   * Set an SVG illustration.\n   * @category Visual\n   */\n  @Prop() illustration?: string;\n  /**\n   * Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own.\n   * @see {@link closable}\n   * @category Features\n   */\n  @Prop({ mutable: true, reflect: true }) hide: boolean = false;\n  /**\n   * Show close button.\n   * @category Features\n   */\n  @Prop() closable: boolean = false;\n  /**\n   * Manually set the language, only needed if the `closable` prop is enabled.\n   * @see {@link closable}\n   * @category Features\n   */\n  @Prop({ mutable: true }) language?: PnLanguages = null;\n\n  @Watch('hide')\n  handleHide() {\n    if (reduceMotion()) this.animationDuration = 0;\n    else this.animationDuration = this.duration;\n\n    this.hostElement.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      if (this.hide) this.closeToast();\n      else this.openToast();\n    });\n  }\n\n  /** Event fired when the close button is pressed. */\n  @Event() close: EventEmitter<boolean>;\n  /**\n   * This event is fired when the toast is fully hidden after the animation is finished.\n   * Triggers from the close button or if the prop `hide` is set to true.\n   **/\n  @Event() hidden: EventEmitter<boolean>;\n\n  async componentWillLoad() {\n    if (this.hide) {\n      this.hostElement.style.height = '0';\n      this.hostElement.style.overflow = 'hidden';\n    }\n\n    if (this.language === null) await awaitTopbar(this.hostElement);\n    // Any text content at this stage means there is slotted content present.\n    this.hasSlottedContent = !!this.hostElement.textContent;\n  }\n\n  componentDidLoad() {\n    if (!!this.heading && !this.text && !this.hasSlottedContent)\n      console.warn('The %s prop is only available if you use the %s prop or slotted content.', 'heading', 'text');\n  }\n\n  private getRect(element: HTMLElement): DOMRect {\n    return element.getBoundingClientRect();\n  }\n\n  private openToast() {\n    requestAnimationFrame(() => {\n      const { clientHeight } = this.toast;\n      const { height } = this.getRect(this.hostElement);\n\n      this.hostElement.style.height = `${height}px`;\n\n      this.isExpanding = true;\n      this.animateToast(true, `${height}px`, `${clientHeight}px`);\n    });\n  }\n\n  private closeToast() {\n    const { clientHeight } = this.hostElement;\n    this.hostElement.style.height = `0px`;\n\n    this.isClosing = true;\n    this.animateToast(false, `${clientHeight}px`, `0px`);\n  }\n\n  private animateToast(open: boolean, startHeight: string, endHeight: string) {\n    this.cancelAnimations();\n    this.animation = this.hostElement.animate(\n      {\n        height: [startHeight, endHeight],\n      },\n      {\n        duration: this.animationDuration,\n        easing: 'cubic-bezier(0.6, 0, 0.2, 1)',\n      },\n    );\n    this.animation.onfinish = () => this.animationFinish();\n    this.animation.oncancel = () => (open ? (this.isExpanding = false) : (this.isClosing = false));\n  }\n\n  private animationFinish() {\n    this.cancelAnimations();\n    if (this.hide) this.hidden.emit(this.hide);\n    else {\n      this.hostElement.style.height = '';\n      this.hostElement.style.overflow = '';\n    }\n    this.isClosing = false;\n    this.isExpanding = false;\n  }\n\n  private cancelAnimations() {\n    if (this.animation) this.animation.cancel();\n  }\n\n  private handleClick(event: PointerEvent) {\n    this.hide = true;\n    this.close.emit(this.hide);\n    ripple(event, this.toast);\n  }\n\n  private getIcon(): string {\n    if (this.illustration) return '';\n    if (this.icon) return this.icon;\n    if (this.appearance === 'success') return check_circle;\n    if (this.appearance === 'warning') return alert_exclamation_triangle;\n    if (this.appearance === 'error') return alert_exclamation_circle;\n    return alert_info_circle;\n  }\n\n  private getRole(): string {\n    return this.appearance === 'error' ? 'alert' : 'status';\n  }\n\n  private showIcon(): boolean {\n    return !this.illustration;\n  }\n\n  private showIllustration(): boolean {\n    return !this.showIcon();\n  }\n\n  private showTitle(): boolean {\n    return (this.hasSlottedContent || !!this.text) && !!this.heading;\n  }\n\n  private translate(prop: string): string {\n    return translations?.[prop]?.[this.language || en] || prop;\n  }\n\n  private isMoving(): boolean {\n    return this.isClosing || this.isExpanding;\n  }\n\n  private hideToast(): boolean {\n    return this.hide && !this.isMoving();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          id={this.toastId}\n          class=\"pn-toast\"\n          role={this.getRole()}\n          data-appearance={this.appearance}\n          data-temporary={this.temporary}\n          data-hide={this.hideToast()}\n          ref={el => (this.toast = el)}\n        >\n          {this.showIcon() && <pn-icon class=\"pn-toast-icon\" icon={this.getIcon()} />}\n\n          <div class=\"pn-toast-content\">\n            {this.showTitle() && <h4 class=\"pn-toast-heading\">{this.heading}</h4>}\n            {this.text && <p class=\"pn-toast-text\">{this.text}</p>}\n            <slot />\n          </div>\n\n          {this.showIllustration() && <pn-illustration illustration={this.illustration} width=\"5.5em\" height=\"5.5em\" />}\n\n          {this.closable && (\n            <button\n              class=\"pn-toast-button\"\n              type=\"button\"\n              aria-label={this.translate('HIDE')}\n              onClick={(event: PointerEvent) => this.handleClick(event)}\n              ref={el => (this.button = el)}\n            >\n              <pn-icon icon={close} />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -75,7 +75,7 @@ export class PnTooltip {
         }, time);
     }
     render() {
-        return (h("button", { key: '7b0253721fbc44e83afc6daa41d984e9dbf16c0b', class: "pn-tooltip", "data-light": this.light, "data-warning": this.warning, "data-downwards": this.downwards, "data-open": this.open, ref: el => (this.button = el) }, h("pn-icon", { key: 'd6086755274289dad52757b42aa508927d0746d2', icon: this.getSymbol(), "data-simple": !!this.tooltip }), h("div", { key: 'e155c88aa2ee2b33c5622741efa59bb07ba548c7', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, h("div", { key: '62a3db64ee0d4e3da5d3e2f414850f3792235f1c', hidden: !!this.tooltip }, h("slot", { key: 'e769400a4d5e1ceddc7fb6a953fe37eeea1b4218' })))));
+        return (h("button", { key: 'a421dbdcba2a38e9adc8f7364c5ff185372f1deb', class: "pn-tooltip", "data-light": this.light, "data-warning": this.warning, "data-downwards": this.downwards, "data-open": this.open, ref: el => (this.button = el) }, h("pn-icon", { key: '61409db0c58289bf1b606e0dc323266c0322b64b', icon: this.getSymbol(), "data-simple": !!this.tooltip }), h("div", { key: '2164d90ba6dabac1309d751772c9ae20c9c118c1', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, h("div", { key: 'e30e4bdee6fe1666b5ad6154773a06fd5649dd92', hidden: !!this.tooltip }, h("slot", { key: '4456ff966d227bbca13599565c9ceb0adb6c91d6' })))));
     }
     static get is() { return "pn-tooltip"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/input/pn-checkbox/pn-checkbox.js

@@ -38,7 +38,7 @@ export class PnCheckbox {
         this.handleId();
     }
     render() {
-        return (h(Host, { key: 'f0639bf5c45347c39ef933b7f4967be10e671e46' }, h("input", { key: '560e64e32b38b40a847b3b7283255dc9e9f36f72', type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.invalid?.toString(), "aria-describedby": this.helpertext && this.idHelpertext }), h("div", { key: 'ac86d6c2bd460ce3b29fe8862b9a7b64ca23e2dd', class: "pn-checkbox", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: '6df97a9582503dc04946f3e590dff276bf87d885', class: "pn-checkbox-outer" }, h("svg", { key: '37d8212ac1b0088ebcbe28cd02d5cc6e59352e63', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'b19a548634e5fe186291a0d24c4c3f81efe8eab1', class: "pn-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '040639fc42060dff6db8fab45dc713ccf81631bf', class: "pn-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" }))), (!!this.label || !!this.helpertext) && (h("p", { key: '3006b0ba0826003608453423259914a3b9622168', class: "pn-checkbox-content" }, !!this.label && (h("label", { key: '2de986fd9df0d639e5b398c24b4aa95e6e416c5d', htmlFor: this.checkboxid, class: "pn-checkbox-label" }, this.label)), !!this.helpertext && (h("span", { key: '13c417fef46e456a1e036a22c9655da2fa19de24', id: this.idHelpertext, class: "pn-checkbox-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '204b119d1bf7da4ce2fb90d1f53114b6a5ada7dd', icon: this.icon, color: "gray900" }))));
+        return (h(Host, { key: 'c3bcdee583919c5f6f11f2e21cb5362f96ac1633' }, h("input", { key: '10e34d60ff748c2d99c9e3740c69a17016ca3223', type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.invalid?.toString(), "aria-describedby": this.helpertext && this.idHelpertext }), h("div", { key: '15e4f62557b23b99ab344f32dcfa2103c395b9ed', class: "pn-checkbox", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: '98e4eb05092b3fe4d9e30b748e89d3bd104925ff', class: "pn-checkbox-outer" }, h("svg", { key: 'a39edd1e675ba5b131059f1bd8b0d7f6fea9370b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'a355d7729c12497f133cde364c7ff9601f9940db', class: "pn-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '18c274c70036a5a3aae8b333c513d053061945cf', class: "pn-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" }))), (!!this.label || !!this.helpertext) && (h("p", { key: '1499f1e5d14dc15cc5691429fd8565c1e16b4fda', class: "pn-checkbox-content" }, !!this.label && (h("label", { key: '87ca925b4af005c6cbec279a3209fcd5d92a4ae8', htmlFor: this.checkboxid, class: "pn-checkbox-label" }, this.label)), !!this.helpertext && (h("span", { key: '6808421c4151d5ad4711477d165e0d8a9bdaceae', id: this.idHelpertext, class: "pn-checkbox-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '0f182a49401f04adf6944a82490d838bd114f38b', icon: this.icon, color: "gray900" }))));
     }
     static get is() { return "pn-checkbox"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/input/pn-choice-chip/pn-choice-chip.js

@@ -28,7 +28,7 @@ export class PnChoiceChip {
     }
     hostElement;
     render() {
-        return (h(Host, { key: '5ff90532fb75531aa8fcb23fd4dd0ae0dfc7d33a' }, h("div", { key: '500cb322689763c229ac303d1d62643a620c74ed', class: "pn-choice-chip" }, h("input", { key: '88feb0c54e20951c8c6e9d761323e1806e4583bd', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: 'd1ed91ded7233f9229bdbde4f9c40b5c86a67fba', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: '29f8378c640a6553416507e2ca0454bca47c557c', class: "pn-choice-chip-icon" }, h("pn-icon", { key: 'f70f7191ade89323265b312cc881141edffc4296', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '87d85e74effe1b65d949b0735a50f5b4a56acf25', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: '772f0726fcaada44af2c10ab922bb3eb151886b7', class: "pn-choice-chip-label", htmlFor: this.choiceid }, h("span", { key: '7c5bf78b2811a70308663bfb1be95420ce7ca30d' }, this.label), h("slot", { key: '6fd6ee5beb63f38285b273f0a73d41e5895cc8e6' }))))));
+        return (h(Host, { key: '163abbbcca43588ea04866d4826bd7b30b88324d' }, h("div", { key: '2af33c1a26f70b59d22db00a943c09b43eaf3523', class: "pn-choice-chip" }, h("input", { key: '23dbbfe5102e681efbf6d08c30e64fb6f8761300', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: 'c57f848d0458880a41f030691e9fa6bef497bf18', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: '2978e8c81a0f4057a70e1cb29d94768040ecfd95', class: "pn-choice-chip-icon" }, h("pn-icon", { key: '62101eaa67f7351df8657b4df56e145d54ca4468', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '06c50dad1d7e2b78a36d4c923878633d489b0d55', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: '502b02b9c9e30d56a39aa425af8b6c9bf755b8c9', class: "pn-choice-chip-label", htmlFor: this.choiceid }, h("span", { key: '79f7c5b812fbd06c54af2d14f08d2e0a7ae1f520' }, this.label), h("slot", { key: 'f90c14659d035a662fca81e4045e7523b60f8a46' }))))));
     }
     static get is() { return "pn-choice-chip"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/input/pn-counter/pn-counter.js

@@ -175,7 +175,7 @@ export class PnCounter {
             this.counterElement.style.setProperty('--pn-counter-ch', '0ch');
     }
     render() {
-        return (h(Host, { key: '2fe59aa7c06e3005cd3f9c8b633bf3ee3c85833b' }, h("div", { key: '206308ce9ff21a303013164a3ec4015074d494b2', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, h("label", { key: '6843e23ed0c46cf33aaa6b83c9c7304775dba549', htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel }, h("span", { key: 'cbc609092923ef8806d7b5e77beb26021b490d44' }, this.label)), h("div", { key: 'df51b364dc11c020d390f3bed823caf7063a9c94', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, h("pn-button", { key: '52413b869322b9398eddfb81713609205594d59f', "data-decrease": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: minus, iconOnly: true, arialabel: this.labelDecrease || this.translate('DECREASE'), onClick: () => this.decreaseAmount() }), h("input", { key: '8c9dd73dba29a17df0515758a48be4f4f8798bbf', id: this.counterid, class: "pn-counter-input", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), h("pn-button", { key: 'c10fc2e4f25708ed81dc95b8ea07c0c07803df1f', "data-increase": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: plus, iconOnly: true, arialabel: this.labelIncrease || this.translate('INCREASE'), onClick: () => this.increaseAmount() })), !!this.getTextMessage() && (h("p", { key: 'e01ab71ae17a042681b5c3a87766bac914c6be10', id: this.idText, class: "pn-counter-helpertext" }, h("span", { key: 'd51a1a0e851e7a6afe79a3c384167324c906939a' }, this.getTextMessage()))), h("p", { key: 'c89af26fd950c7166cec80b08feb1651feb54bba', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
+        return (h(Host, { key: 'ae9451959e2ebc720b69af2942deaa5d94e36565' }, h("div", { key: 'f631dd7d8c7acbb4a459b46da53ea3445ae96480', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, h("label", { key: '2538568f65666aedc3a0f9e2f3f681b4b9647cd6', htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel }, h("span", { key: '73abf4ec6f185201f95799910a70518f61f85577' }, this.label)), h("div", { key: '8e99e77f67aae105b90052ed74ba6c3a438e22ca', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, h("pn-button", { key: '8d6f5c4af2a524bb43a3023c130b2a6e1814c53d', "data-decrease": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: minus, iconOnly: true, arialabel: this.labelDecrease || this.translate('DECREASE'), onClick: () => this.decreaseAmount() }), h("input", { key: '93ab63799f90cdecdbf3694ca56dfe92a5fe9e80', id: this.counterid, class: "pn-counter-input", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), h("pn-button", { key: 'a39f90c5ace631d8973a700f72d57a2490cad342', "data-increase": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: plus, iconOnly: true, arialabel: this.labelIncrease || this.translate('INCREASE'), onClick: () => this.increaseAmount() })), !!this.getTextMessage() && (h("p", { key: '0ed6cc20cb56637faa7d70c6fe903a5e412fff0e', id: this.idText, class: "pn-counter-helpertext" }, h("span", { key: 'def00a454a70d4ebc952cdfbfdb5b11eece74452' }, this.getTextMessage()))), h("p", { key: 'eef2cf6b2f193779d616e09c32a9fc0ece4c5104', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
     }
     static get is() { return "pn-counter"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/input/pn-date-picker/pn-date-picker.css

@@ -243,7 +243,6 @@ pn-date-picker .pn-date-picker-calendar {
   box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
 }
 pn-date-picker .pn-date-picker-calendar[data-range] {
-  width: 100%;
   max-width: unset;
 }
 pn-date-picker .pn-date-picker-calendar[data-open], pn-date-picker .pn-date-picker-calendar[data-moving] {
@@ -379,8 +378,8 @@ pn-date-picker .pn-date-picker-td[aria-selected=true][data-single]:before {
 }
 pn-date-picker .pn-date-picker-td[aria-selected=true][data-range]:before {
   border-radius: 0;
-  border-left: 0;
-  border-right: 0;
+  border-left-width: 0;
+  border-right-width: 0;
 }
 pn-date-picker .pn-date-picker-td[aria-selected=true][data-range-from]:before {
   border-radius: 0.5em 0 0 0.5em;

package/umd/modules/@postnord/web-components/collection/components/input/pn-date-picker/pn-date-picker.js

@@ -3,7 +3,7 @@
  * By PostNord.
  */
 import { h, Host } from "@stencil/core";
-import { awaitTopbar, uuidv4, en, getTotalHeightOffset, reduceMotion } from "../../../index";
+import { awaitTopbar, uuidv4, en, getTotalHeightOffset, reduceMotion, getMenuWidth } from "../../../index";
 import { translations } from "./translations";
 import { CALENDAR, MONTHS, YEARS, validateDate, isBefore, isAfter, selectedDate, getDateObject, getDiff, getToday, getDate, getReadableDate, getGrid, setYear, setMonth, navigateGrid, } from "../../../globals/date/index";
 import { calendar, arrow_left, arrow_right, pn_return } from "pn-design-assets/pn-assets/icons.js";
@@ -165,11 +165,27 @@ export class PnDatePicker {
             const fitDownwards = spaceDownwards > scrollHeight;
             const openTop = (this.openUp && (fitUpwards || spaceUpwards > spaceDownwards)) || (!fitDownwards && fitUpwards);
             this.openUp = openTop;
-            // Calc y-axis
+            // Calc horizontal positioning - center calendar relative to host element
             const rectCal = this.getRect(this.calendarElement);
-            const widthMinusRight = innerWidth - rectCal.right;
-            const offset = 0 > widthMinusRight ? widthMinusRight - 8 : 0;
-            this.calendarElement.style.setProperty('--pn-calendar-offset-left', `${Math.floor(offset)}px`);
+            const menuWidth = getMenuWidth();
+            // Calculate center position: host center minus half of calendar width
+            const hostCenterX = rectHost.x + rectHost.width / 2;
+            const calendarHalfWidth = rectCal.width / 2;
+            const idealCenterOffset = hostCenterX - calendarHalfWidth - rectCal.x;
+            // Check boundaries, accounting for menu width on the left
+            const calendarLeftEdge = rectCal.x + idealCenterOffset;
+            const calendarRightEdge = calendarLeftEdge + rectCal.width;
+            const leftBoundary = menuWidth + 16; // Menu width + buffer
+            let finalOffset = idealCenterOffset;
+            // Adjust if calendar would go beyond left edge of viewport or over the menu
+            if (calendarLeftEdge < leftBoundary) {
+                finalOffset = leftBoundary - rectCal.x;
+            }
+            // Adjust if calendar would go beyond right edge of viewport
+            else if (calendarRightEdge > innerWidth - 16) {
+                finalOffset = innerWidth - 16 - rectCal.width - rectCal.x;
+            }
+            this.calendarElement.style.setProperty('--pn-calendar-offset-left', `${Math.floor(finalOffset)}px`);
         });
     }
     handleMessage() {
@@ -662,7 +678,7 @@ export class PnDatePicker {
         return (h("div", { class: "pn-date-picker-container", "data-error": this.hasError() }, h("label", { class: "pn-date-picker-label", htmlFor: id }, h("span", null, label)), h("div", { class: "pn-date-picker-field" }, h("input", { type: "text", id: id, class: "pn-date-picker-input", name: this.name, placeholder: placeholder, autocomplete: this.autocomplete, maxlength: this.disableMaxLength ? null : this.format.length, list: list, pattern: this.pattern, value: value, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError()?.toString(), onInput: e => this.inputHandler(e, to), "data-active": editing }), showButton && (h("pn-button", { class: "pn-date-picker-toggle", buttonId: idButton, icon: calendar, iconOnly: true, appearance: "light", arialabel: textButton, ariaexpanded: this.open.toString(), ariacontrols: this.idCalendar, "data-active": this.open, "data-input": true, small: true, onPnClick: () => this.toggleGrid(null, to), onKeyDown: e => this.handleButtonBlur(e) })))));
     }
     render() {
-        return (h(Host, { key: '6122e6224b4aa8570a714522dc323088074f5185' }, h("div", { key: 'd7d3c86378c680d3ddd14d9f3cb073f4bb42e2cf', class: "pn-date-picker" }, this.renderInput(), this.range && (h("div", { key: '3f02b31a0e03aef31b84777d6047d1b328ff633d', class: "pn-date-picker-range-icon test" }, h("pn-icon", { key: 'ad328bd870726dea04b2496d2059a67de218ceac', icon: arrow_right }))), this.range && this.renderInput({ to: this.range })), h("div", { key: '71c8518c6500591a4c0d7dc72681d9bcad264641', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-moving": this.isClosing || this.isExpanding, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, h("div", { key: '277f45e3372d096521889fa4bca4c1971346f0d3', class: "pn-date-picker-wrapper" }, h("nav", { key: '06336288e1d9a65ba4aa796328b09003cb79271d', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, h("pn-button", { key: '6361907855287330a3e9c537ce02bd948baccaa4', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), h("pn-button", { key: '21ae6b846df3bd12b314cb6b40f6d60dc8a0cc02', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, h("span", { key: '9f555bfea7f07abb32d8e96e6d84b547b4946899', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), h("span", { key: '0a434038cb6ceb7fb52e89161408da00c8f3e0e3', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), h("h2", { key: 'c63bfdcb83caf9fe9aec34416060d4ffe6ae6b08', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), h("pn-button", { key: '502e44a09ca6194365542c1223e3e994e2fbe9d0', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, h("span", { key: 'e0e9bbe7234ae0ce544fc3b89c94c798f3a60123' }, this.dateViewYear)), h("pn-button", { key: 'f93f7301ab9b61cd386dcdb19df482a7b1f4a15d', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), h("aside", { key: '3473b9b53b3d0007828a367f05dcbb6fb3959e7e', class: "pn-date-picker-chips" }, h("slot", { key: '94e47d8d7feb1caa5db4fd24d97500258e1c4f98', name: "chips" })), h("nav", { key: '2245cab78f67e9ecf3932bda19075b13cfa27d61', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, h("pn-button", { key: 'e8163e75c8197331f7ab77ed6a2fb94fde445131', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, h("span", { key: '3a9028867b88cb831ef4cfc35039a10299c8fdeb' }, this.translate('GO_CALENDAR')))))), h("p", { key: 'dd4412fdfff7ef9c1c254a09c38831908c10c010', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: 'd61ee102ecb131c481e220c073fe268b9228ebbb' }, this.helpertext), h("slot", { key: '3d54b17455d0e7a2a72564856978eee3e3f8ef45', name: "helpertext" })), h("p", { key: 'f42fd4bdff5c0ad22c3de99725bf1dbedd5788c8', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '69d7fd68b1157960d095ace9a423a1a3a08702fc' }, this.error), h("slot", { key: 'd2676dccff19ee3a22fe62b077f44c509500f267', name: "error" }))));
+        return (h(Host, { key: '683125ae4363ce235cc3aec68a1d4003593425d1' }, h("div", { key: 'cf4cf8baae7d387533013fe59722bb4401431dbd', class: "pn-date-picker" }, this.renderInput(), this.range && (h("div", { key: 'fae36c22bd631fde3313c2240cd33e6f871ff405', class: "pn-date-picker-range-icon test" }, h("pn-icon", { key: 'd0f18d8a7ff81248471b27975eb24242fc8b5157', icon: arrow_right }))), this.range && this.renderInput({ to: this.range })), h("div", { key: '6f4f250edc36dd15d4a5a330bf5d8c5125289a09', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-moving": this.isClosing || this.isExpanding, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, h("div", { key: 'a8821cca04a6301bd148c3dbfee28bf86c94e543', class: "pn-date-picker-wrapper" }, h("nav", { key: '38f404ea6187d754ac44160bcda2291e0739610d', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, h("pn-button", { key: '923845f5df9f35ff74ffeb2ed63c903696a4399d', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), h("pn-button", { key: '32e6f337bc1b82adcf11b2668974c0c4b9f2c730', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, h("span", { key: 'e1bcc4e89726d5c25e94d87b283b543987674f2d', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), h("span", { key: 'b93becc6c92ef4693f158e08276aa21e496d10c3', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), h("h2", { key: '1aa3fc4c553858c947205610a4958fc153f63527', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), h("pn-button", { key: '16fdeb8efb9744d9fb5db3b41eea172ad9b49c32', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, h("span", { key: '491246d413dd42fe794d155720f847d9339bf81f' }, this.dateViewYear)), h("pn-button", { key: '8a2acfd530f049d13972125dd6e6fc8120020b18', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), h("aside", { key: '7905780579fdbea9ff9bc03c05208c6714a1b690', class: "pn-date-picker-chips" }, h("slot", { key: '3aacde33dde852b97b75327c378248395bf74b03', name: "chips" })), h("nav", { key: '37bf1f4447f480986bf905375149d40d42318374', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, h("pn-button", { key: '0ba2954cf4f994e5befcf0546e45333b1a0030c2', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, h("span", { key: 'f6af5dbb4dff963d6b07147f1573f22797abd4e4' }, this.translate('GO_CALENDAR')))))), h("p", { key: '4ceaeea86eeeb3e6cafa2b09343ee1b3ff7fada8', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: 'b40445ded778af04b0313e84645226fe59e0bc9a' }, this.helpertext), h("slot", { key: '0cf4aee251e8aaf33618c9f318451069b6bfe22f', name: "helpertext" })), h("p", { key: 'dbcc74e7fdea8f7b1053226448cbc419ebaf9498', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '9cc3055b8389abadd3f7d2303cc755b71cc238b3' }, this.error), h("slot", { key: '4c1eef7f48dba08b33f05b836f55abcc39b5abe3', name: "error" }))));
     }
     static get is() { return "pn-date-picker"; }
     static get originalStyleUrls() {