@postnord/pn-marketweb-components 3.0.3 → 3.1.0

package/components/pn-bonus-progressbar.js.map

@@ -1 +1 @@
-{"file":"pn-bonus-progressbar.js","mappings":"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","names":["PnBonusProgressbar"],"sources":["src/components/input/pn-bonus-progressbar/pn-bonus-progressbar.scss?tag=pn-bonus-progressbar","src/components/input/pn-bonus-progressbar/pn-bonus-progressbar.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-bonus-progressbar {\n  width: 100%;\n}\n\n.bonusprogressbar-top {\n  display: flex;\n  align-items: center;\n  margin-bottom: 1.6rem;\n}\n\n.bonusprogressbar-top-icon {\n  border-radius: 100%;\n  height: 5rem;\n  width: 5rem;\n  padding: 1rem;\n  display: inline-flex;\n  margin-right: 1em;\n  margin-left: 0.5em;\n  background-color: #e0f8ff;\n  [theme='red'] & {\n    background-color: #fbc2c1;\n  }\n  pn-icon svg {\n    width: 100%;\n    height: 100%;\n  }\n}\n.bonusprogressbar-top-heading {\n}\n.bonusprogressbar-top-headline {\n}\n\n.bonusprogressbar-sumtext {\n  margin-top: 0.4rem;\n  font-size: 1.3rem;\n  color: $gray700;\n}\n.bonusprogressbar-top-percentage {\n  //margin-left:auto;\n  margin-left: 0.8rem;\n  padding: 0;\n}\n\n.bonusprogressbar-wrapper {\n  position: relative;\n  display: flex;\n  min-height: 5em;\n  align-items: center;\n}\n\n.bonusprogressbar-currentlevel {\n  position: absolute;\n}\n.bonusprogressbar-progress[value] {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  width: 100%;\n  height: 1.7rem;\n\n  border: 0.1rem solid #00a0d6;\n  [theme='red'] & {\n    border-color: #f06365;\n  }\n  border-radius: 1.7rem;\n  padding: 0;\n  margin: 0;\n  overflow: hidden;\n  &::-webkit-progress-bar {\n    border: 0;\n    border-radius: 1.7rem;\n    margin: 0;\n    padding: 0;\n    background: #e0f8ff;\n\n    [theme='red'] & {\n      background: #fdefee;\n    }\n  }\n  &::-webkit-progress-value {\n    margin: 0;\n    padding: 0;\n    border-radius: 1.7rem;\n    background: #00a0d6;\n    [theme='red'] & {\n      background: #f06365;\n    }\n  }\n}\n","import { Component, Prop, h, Host, State, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pn-bonus-progressbar',\n  styleUrl: 'pn-bonus-progressbar.scss',\n})\nexport class PnBonusProgressbar {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() icon: string = null;\n  @Prop() heading: string = '';\n  @Prop({ reflect: true }) sumtext: string = null;\n  @Prop({ reflect: true }) theme: string = 'blue';\n  @Prop() bonuspercentage: string = '0%';\n  @Prop({ reflect: true }) currency: string = 'kr';\n  @Prop({ reflect: true, mutable: true }) value: number = 0;\n  @Prop({ reflect: true, mutable: true }) min: number = 0;\n  @Prop({ reflect: true, mutable: true }) max: number = 0;\n\n  @State() valuepercentage: number = 0;\n  @State() progresspercentage: number = 0;\n  @State() levelValues: number[] = [];\n  @State() currentLevelAdjustedValue: number = 0;\n\n  componentWillLoad() {\n    this.setInitialValues();\n    this.setValuePercentage();\n  }\n\n  setInitialValues() {\n    const levelElements = Array.from(this.hostElement.querySelectorAll('pn-bonus-progressbar-level:not([current])'));\n    this.currentLevelAdjustedValue = this.value;\n    this.levelValues = levelElements.map(elm => {\n      return parseInt(elm.getAttribute('value'), 10);\n    });\n    if (!this.max) {\n      if (this.levelValues && this.levelValues.length > 0) {\n        const newMax = this.levelValues.slice(-1)[0] as number;\n        let modifier = 1.05;\n        if (this.value > newMax) {\n          modifier = 1.2;\n        }\n        this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to\n      }\n    }\n\n    // if (!this.min) {\n    //   const suggestedMin = Math.floor(this.value * 0.9);\n    //   if (suggestedMin > 0) {\n    //     this.min = suggestedMin;\n    //   }\n    // }\n\n    if (this.value > this.max) {\n      this.currentLevelAdjustedValue = 100;\n    }\n  }\n\n  @Watch('currentLevelAdjustedValue')\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  setValuePercentage() {\n    this.valuepercentage = (this.value / this.max) * 100;\n    this.progresspercentage = ((this.value - this.min) / (this.max - this.min)) * 100;\n    if (this.progresspercentage < 0) {\n      if (this.levelValues && this.levelValues.length && this.levelValues[0] < this.value) {\n        this.min = Math.floor(this.levelValues[0] * 0.95);\n      } else {\n        this.min = Math.floor(this.value * 0.95);\n      }\n    }\n\n    if (this.progresspercentage > 100) {\n      this.progresspercentage = 100;\n      const newMax = this.levelValues.slice(-1)[0] as number;\n      let modifier = 1.05;\n      if (this.value > newMax) {\n        modifier = 1.2;\n      }\n      this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to\n      // this.max = Math.floor(newMax * 1.20);\n    }\n  }\n\n  iconColor() {\n    switch (this.theme) {\n      case 'red':\n        return 'coral700';\n      case 'blue':\n      default:\n        return 'blue700';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"bonusprogressbar-top\">\n          {this.icon ? (\n            <div class=\"bonusprogressbar-top-icon\">\n              <pn-icon icon={this.icon} small=\"false\" color={this.iconColor()} />\n            </div>\n          ) : (\n            {}\n          )}\n          <div class=\"bonusprogressbar-top-heading\">\n            <h4 class=\"bonusprogressbar-top-headline\">\n              {this.heading} <strong class=\"bonusprogressbar-top-percentage\">{this.bonuspercentage}</strong>\n            </h4>\n            {this.sumtext ? <div class=\"bonusprogressbar-sumtext\">{this.sumtext}</div> : null}\n          </div>\n        </div>\n\n        <div class=\"bonusprogressbar-wrapper\">\n          <progress class=\"bonusprogressbar-progress\" value={this.progresspercentage} max=\"100\"></progress>\n          {/* <pn-bonus-progressbar-level current={true} value={this.value} visualpercentage={this.currentLevelAdjustedValue} bonuspercentage={this.bonuspercentage}></pn-bonus-progressbar-level> */}\n          {/* <div class=\"bonusprogressbar-currentlevel\" style={ {'left':`%`} }></div> */}\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-bonus-progressbar.js","mappings":"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","names":["PnBonusProgressbar"],"sources":["src/components/input/pn-bonus-progressbar/pn-bonus-progressbar.scss?tag=pn-bonus-progressbar","src/components/input/pn-bonus-progressbar/pn-bonus-progressbar.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-bonus-progressbar {\n  width: 100%;\n}\n\n.bonusprogressbar-top {\n  display: flex;\n  align-items: center;\n  margin-bottom: 1.6rem;\n}\n\n.bonusprogressbar-top-icon {\n  border-radius: 100%;\n  height: 5rem;\n  width: 5rem;\n  padding: 1rem;\n  display: inline-flex;\n  margin-right: 1em;\n  margin-left: 0.5em;\n  background-color: #e0f8ff;\n  [theme='red'] & {\n    background-color: #fbc2c1;\n  }\n  pn-icon svg {\n    width: 100%;\n    height: 100%;\n  }\n}\n.bonusprogressbar-top-heading {\n}\n.bonusprogressbar-top-headline {\n}\n\n.bonusprogressbar-sumtext {\n  margin-top: 0.4rem;\n  font-size: 1.3rem;\n  color: $gray700;\n}\n.bonusprogressbar-top-percentage {\n  //margin-left:auto;\n  margin-left: 0.8rem;\n  padding: 0;\n}\n\n.bonusprogressbar-wrapper {\n  position: relative;\n  display: flex;\n  min-height: 5em;\n  align-items: center;\n}\n\n.bonusprogressbar-currentlevel {\n  position: absolute;\n}\n.bonusprogressbar-progress[value] {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  width: 100%;\n  height: 1.7rem;\n\n  border: 0.1rem solid #00a0d6;\n  [theme='red'] & {\n    border-color: #f06365;\n  }\n  border-radius: 1.7rem;\n  padding: 0;\n  margin: 0;\n  overflow: hidden;\n  &::-webkit-progress-bar {\n    border: 0;\n    border-radius: 1.7rem;\n    margin: 0;\n    padding: 0;\n    background: #e0f8ff;\n\n    [theme='red'] & {\n      background: #fdefee;\n    }\n  }\n  &::-webkit-progress-value {\n    margin: 0;\n    padding: 0;\n    border-radius: 1.7rem;\n    background: #00a0d6;\n    [theme='red'] & {\n      background: #f06365;\n    }\n  }\n}\n","import { Component, Prop, h, Host, State, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pn-bonus-progressbar',\n  styleUrl: 'pn-bonus-progressbar.scss',\n})\nexport class PnBonusProgressbar {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() icon: string = null;\n  @Prop() heading: string = '';\n  @Prop({ reflect: true }) sumtext: string = null;\n  @Prop({ reflect: true }) theme: string = 'blue';\n  @Prop() bonuspercentage: string = '0%';\n  @Prop({ reflect: true }) currency: string = 'kr';\n  @Prop({ reflect: true, mutable: true }) value: number = 0;\n  @Prop({ reflect: true, mutable: true }) min: number = 0;\n  @Prop({ reflect: true, mutable: true }) max: number = 0;\n\n  @State() valuepercentage: number = 0;\n  @State() progresspercentage: number = 0;\n  @State() levelValues: number[] = [];\n  @State() currentLevelAdjustedValue: number = 0;\n\n  componentWillLoad() {\n    this.setInitialValues();\n    this.setValuePercentage();\n  }\n\n  setInitialValues() {\n    const levelElements = Array.from(this.hostElement.querySelectorAll('pn-bonus-progressbar-level:not([current])'));\n    this.currentLevelAdjustedValue = this.value;\n    this.levelValues = levelElements.map(elm => {\n      return parseInt(elm.getAttribute('value'), 10);\n    });\n    if (!this.max) {\n      if (this.levelValues && this.levelValues.length > 0) {\n        const newMax = this.levelValues.slice(-1)[0] as number;\n        let modifier = 1.05;\n        if (this.value > newMax) {\n          modifier = 1.2;\n        }\n        this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to\n      }\n    }\n\n    // if (!this.min) {\n    //   const suggestedMin = Math.floor(this.value * 0.9);\n    //   if (suggestedMin > 0) {\n    //     this.min = suggestedMin;\n    //   }\n    // }\n\n    if (this.value > this.max) {\n      this.currentLevelAdjustedValue = 100;\n    }\n  }\n\n  @Watch('currentLevelAdjustedValue')\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  setValuePercentage() {\n    this.valuepercentage = (this.value / this.max) * 100;\n    this.progresspercentage = ((this.value - this.min) / (this.max - this.min)) * 100;\n    if (this.progresspercentage < 0) {\n      if (this.levelValues && this.levelValues.length && this.levelValues[0] < this.value) {\n        this.min = Math.floor(this.levelValues[0] * 0.95);\n      } else {\n        this.min = Math.floor(this.value * 0.95);\n      }\n    }\n\n    if (this.progresspercentage > 100) {\n      this.progresspercentage = 100;\n      const newMax = this.levelValues.slice(-1)[0] as number;\n      let modifier = 1.05;\n      if (this.value > newMax) {\n        modifier = 1.2;\n      }\n      this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to\n      // this.max = Math.floor(newMax * 1.20);\n    }\n  }\n\n  iconColor() {\n    switch (this.theme) {\n      case 'red':\n        return 'coral700';\n      case 'blue':\n      default:\n        return 'blue700';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"bonusprogressbar-top\">\n          {this.icon ? (\n            <div class=\"bonusprogressbar-top-icon\">\n              <pn-icon icon={this.icon} small=\"false\" color={this.iconColor()} />\n            </div>\n          ) : (\n            {}\n          )}\n          <div class=\"bonusprogressbar-top-heading\">\n            <h4 class=\"bonusprogressbar-top-headline\">\n              {this.heading} <strong class=\"bonusprogressbar-top-percentage\">{this.bonuspercentage}</strong>\n            </h4>\n            {this.sumtext ? <div class=\"bonusprogressbar-sumtext\">{this.sumtext}</div> : null}\n          </div>\n        </div>\n\n        <div class=\"bonusprogressbar-wrapper\">\n          <progress class=\"bonusprogressbar-progress\" value={this.progresspercentage} max=\"100\"></progress>\n          {/* <pn-bonus-progressbar-level current={true} value={this.value} visualpercentage={this.currentLevelAdjustedValue} bonuspercentage={this.bonuspercentage}></pn-bonus-progressbar-level> */}\n          {/* <div class=\"bonusprogressbar-currentlevel\" style={ {'left':`%`} }></div> */}\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-breakpoints.js

@@ -10,6 +10,7 @@ const PnBreakpoints$1 = /*@__PURE__*/ proxyCustomElement(class PnBreakpoints ext
         this.currentWidth = window.innerWidth;
         this.breakPointClass = 'dotcom';
     }
+    get hostElement() { return this; }
     handleViewportSizeChange(event) {
         this.currentWidth = event.target.innerWidth;
     }
@@ -19,7 +20,6 @@ const PnBreakpoints$1 = /*@__PURE__*/ proxyCustomElement(class PnBreakpoints ext
     render() {
         return (h(Host, { key: '6c68864c9882c8a662af98af71e89a6137265316' }, h("div", { key: 'a7bdbe403e294e044481c46ae5018f94e10f7557', class: `breakpoints ${this.createBreakpointClass()} ` }, `${this.currentWidth} px`, ' min-width: ', h("span", { key: '7090660a5baca990abc27b7cb3fb059f8755f97a', class: "reference" }, ' px'))));
     }
-    get hostElement() { return this; }
     static get style() { return PnBreakpointsStyle0; }
 }, [0, "pn-breakpoints", {
         "breakPointClass": [1, "break-point-class"],

package/components/pn-breakpoints.js.map

@@ -1 +1 @@
-{"file":"pn-breakpoints.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,09CAA09C,CAAC;AACp/C,4BAAe,gBAAgB;;MCKlBA,eAAa;;;;4BAEQ,MAAM,CAAC,UAAU;+BACf,QAAQ;;IAG1C,wBAAwB,CAAC,KAAU;QACjC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;KAC7C;IAED,qBAAqB;QACnB,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,CAAC;KAC/C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,eAAe,IAAI,CAAC,qBAAqB,EAAE,GAAG,IACvD,GAAG,IAAI,CAAC,YAAY,KAAK,EACzB,cAAc,EACf,6DAAM,KAAK,EAAC,WAAW,IAAE,KAAK,CAAQ,CAClC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnBreakpoints"],"sources":["src/components/utilities/pn-breakpoints/pn-breakpoints.scss?tag=pn-breakpoints","src/components/utilities/pn-breakpoints/pn-breakpoints.tsx"],"sourcesContent":["pn-breakpoints {\n  width: 100%;\n  .breakpoints {\n    &--dotcom {\n      width: 100%;\n      background-color: aliceblue;\n      text-align: center;\n      margin-bottom: 2.4rem;\n\n      background-color: aliceblue;\n      .reference::before {\n        content: 'less than 321';\n      }\n\n      @media screen and (min-width: 321px) {\n        background-color: yellow;\n        .reference::before {\n          content: '321 (xs)';\n        }\n      }\n\n      @media screen and (min-width: 576px) {\n        background-color: aqua;\n        .reference::before {\n          content: '576 (sm)';\n        }\n      }\n\n      @media screen and (min-width: 768px) {\n        background-color: red;\n        color: #fff;\n        .reference::before {\n          content: '768 (md)';\n        }\n      }\n\n      @media screen and (min-width: 992px) {\n        background-color: green;\n        color: #fff;\n        .reference::before {\n          content: '992 (lg)';\n        }\n      }\n\n      @media screen and (min-width: 1200px) {\n        background-color: blue;\n        color: #fff;\n        .reference::before {\n          content: '1200 (xl)';\n        }\n      }\n\n      @media screen and (min-width: 1640px) {\n        background-color: pink;\n        .reference::before {\n          content: '1640 (xxl)';\n        }\n      }\n\n      @media screen and (min-width: 1920px) {\n        background-color: orange;\n        .reference::before {\n          content: '1920 (fhd)';\n        }\n      }\n    }\n\n    &--tpl {\n      //define breakpoints here\n    }\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pn-breakpoints',\n  styleUrl: 'pn-breakpoints.scss',\n})\nexport class PnBreakpoints {\n  @Element() hostElement: HTMLElement;\n  @State() currentWidth: number = window.innerWidth;\n  @Prop() breakPointClass: string = 'dotcom';\n\n  @Listen('resize', { target: 'window' })\n  handleViewportSizeChange(event: any) {\n    this.currentWidth = event.target.innerWidth;\n  }\n\n  createBreakpointClass() {\n    return `breakpoints--${this.breakPointClass}`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`breakpoints ${this.createBreakpointClass()} `}>\n          {`${this.currentWidth} px`}\n          {' min-width: '}\n          <span class=\"reference\">{' px'}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-breakpoints.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,09CAA09C,CAAC;AACp/C,4BAAe,gBAAgB;;MCKlBA,eAAa;;;;4BAEQ,MAAM,CAAC,UAAU;+BACf,QAAQ;;;IAG1C,wBAAwB,CAAC,KAAU;QACjC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;KAC7C;IAED,qBAAqB;QACnB,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,CAAC;KAC/C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,eAAe,IAAI,CAAC,qBAAqB,EAAE,GAAG,IACvD,GAAG,IAAI,CAAC,YAAY,KAAK,EACzB,cAAc,EACf,6DAAM,KAAK,EAAC,WAAW,IAAE,KAAK,CAAQ,CAClC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnBreakpoints"],"sources":["src/components/utilities/pn-breakpoints/pn-breakpoints.scss?tag=pn-breakpoints","src/components/utilities/pn-breakpoints/pn-breakpoints.tsx"],"sourcesContent":["pn-breakpoints {\n  width: 100%;\n  .breakpoints {\n    &--dotcom {\n      width: 100%;\n      background-color: aliceblue;\n      text-align: center;\n      margin-bottom: 2.4rem;\n\n      background-color: aliceblue;\n      .reference::before {\n        content: 'less than 321';\n      }\n\n      @media screen and (min-width: 321px) {\n        background-color: yellow;\n        .reference::before {\n          content: '321 (xs)';\n        }\n      }\n\n      @media screen and (min-width: 576px) {\n        background-color: aqua;\n        .reference::before {\n          content: '576 (sm)';\n        }\n      }\n\n      @media screen and (min-width: 768px) {\n        background-color: red;\n        color: #fff;\n        .reference::before {\n          content: '768 (md)';\n        }\n      }\n\n      @media screen and (min-width: 992px) {\n        background-color: green;\n        color: #fff;\n        .reference::before {\n          content: '992 (lg)';\n        }\n      }\n\n      @media screen and (min-width: 1200px) {\n        background-color: blue;\n        color: #fff;\n        .reference::before {\n          content: '1200 (xl)';\n        }\n      }\n\n      @media screen and (min-width: 1640px) {\n        background-color: pink;\n        .reference::before {\n          content: '1640 (xxl)';\n        }\n      }\n\n      @media screen and (min-width: 1920px) {\n        background-color: orange;\n        .reference::before {\n          content: '1920 (fhd)';\n        }\n      }\n    }\n\n    &--tpl {\n      //define breakpoints here\n    }\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pn-breakpoints',\n  styleUrl: 'pn-breakpoints.scss',\n})\nexport class PnBreakpoints {\n  @Element() hostElement: HTMLElement;\n  @State() currentWidth: number = window.innerWidth;\n  @Prop() breakPointClass: string = 'dotcom';\n\n  @Listen('resize', { target: 'window' })\n  handleViewportSizeChange(event: any) {\n    this.currentWidth = event.target.innerWidth;\n  }\n\n  createBreakpointClass() {\n    return `breakpoints--${this.breakPointClass}`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`breakpoints ${this.createBreakpointClass()} `}>\n          {`${this.currentWidth} px`}\n          {' min-width: '}\n          <span class=\"reference\">{' px'}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-chart.js

@@ -16373,7 +16373,11 @@ const chartCfg = (dataChartType, data, moreThanOneSet = false) => {
         },
     };
     if (dataChartType === 'bar') {
-        return Object.assign(Object.assign({}, cfg), { options: Object.assign(Object.assign({}, cfg.options), { scales: {
+        return {
+            ...cfg,
+            options: {
+                ...cfg.options,
+                scales: {
                     yAxes: [
                         {
                             ticks: {
@@ -16381,10 +16385,21 @@ const chartCfg = (dataChartType, data, moreThanOneSet = false) => {
                             },
                         },
                     ],
-                } }) });
+                },
+            },
+        };
     }
     if (dataChartType === 'doughnut' || dataChartType === 'pie') {
-        return Object.assign(Object.assign({}, cfg), { options: Object.assign(Object.assign({}, cfg.options), { legend: Object.assign(Object.assign({}, cfg.options.legend), { display: true }) }) });
+        return {
+            ...cfg,
+            options: {
+                ...cfg.options,
+                legend: {
+                    ...cfg.options.legend,
+                    display: true,
+                },
+            },
+        };
     }
     return cfg;
 };
@@ -16400,15 +16415,25 @@ const dataSetProps = (set, dataChartType) => {
     };
     let variant = {};
     if (dataChartType === 'doughnut' || dataChartType === 'pie') {
-        variant = Object.assign(Object.assign({}, dataSetProps), { borderColor: set.borderColor ? set.borderColor : 'transparent', datalabels: Object.assign(Object.assign({}, dataSetProps.datalabels), { color: '#000000' }) });
+        variant = {
+            ...dataSetProps,
+            borderColor: set.borderColor ? set.borderColor : 'transparent',
+            datalabels: {
+                ...dataSetProps.datalabels,
+                color: '#000000',
+            },
+        };
     }
     else if (dataChartType === 'line') {
-        variant = Object.assign(Object.assign({}, dataSetProps), { fill: false });
+        variant = {
+            ...dataSetProps,
+            fill: false,
+        };
     }
     else if (dataChartType === 'bar') {
-        variant = Object.assign({}, dataSetProps);
+        variant = { ...dataSetProps };
     }
-    return Object.assign(Object.assign({}, set), variant);
+    return { ...set, ...variant };
 };
 
 const pnChartCss = "pn-chart{display:flex;height:100%;width:100%}pn-chart .chart-wrapper{display:flex;justify-content:center;align-items:center;position:relative;width:100vw;height:30vh;padding:1.6rem 0}@media screen and (min-width: 1640px){pn-chart .chart-wrapper{padding:2.4rem 0}}pn-chart canvas.pnChart{width:100% !important}pn-chart[data-chart-type=bar] .chart-wrapper,pn-chart[data-chart-type=line] .chart-wrapper{min-height:100%;max-width:100%;min-width:100%}@media screen and (min-width: 768px){.fullwidth pn-chart{justify-content:center}}@media screen and (min-width: 768px){.fullwidth pn-chart .chart-wrapper{height:40vh;width:30vw}}";
@@ -16423,15 +16448,28 @@ const PnChart$1 = /*@__PURE__*/ proxyCustomElement(class PnChart extends HTMLEle
         this.dataChartType = 'doughnut';
         this.myChartCtxRef = undefined;
     }
+    get element() { return this; }
+    myChart;
+    parsedDataSets;
+    parsedLabels;
+    parsedDatasetWithDataParsed;
+    data;
+    numberOfSetsGreaterThanOne;
     dataChangeHandler() {
         this.parsedDataSets = JSON.parse(this.dataSets);
         this.numberOfSetsGreaterThanOne = this.parsedDataSets.length > 1;
         this.parsedDatasetWithDataParsed = this.parsedDataSets.map(set => dataSetProps(set, this.dataChartType));
-        this.data = Object.assign(Object.assign({}, this.data), { datasets: this.parsedDatasetWithDataParsed });
+        this.data = {
+            ...this.data,
+            datasets: this.parsedDatasetWithDataParsed,
+        };
     }
     labelsChangeHandler() {
         this.parsedLabels = JSON.parse(this.labels);
-        this.data = Object.assign(Object.assign({}, this.data), { labels: this.parsedLabels });
+        this.data = {
+            ...this.data,
+            labels: this.parsedLabels,
+        };
     }
     componentWillLoad() {
         this.dataChangeHandler();
@@ -16445,7 +16483,6 @@ const PnChart$1 = /*@__PURE__*/ proxyCustomElement(class PnChart extends HTMLEle
     render() {
         return (h(Host, { key: '9f6a915eca5ae80c2a9480976f08c81e5b70d824' }, h("div", { key: 'a0652b45298fdd319abcb79a80edab1146778685', class: "chart-wrapper" }, h("canvas", { key: '5f14dfdfdd2fef79261be72fc58efc02c3bfa7b5', id: "chart-canvas", class: "pnChart" }))));
     }
-    get element() { return this; }
     static get watchers() { return {
         "dataSets": ["dataChangeHandler"],
         "labels": ["labelsChangeHandler"]