@postnord/pn-marketweb-components 4.0.2 → 4.0.4-test

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

@@ -1 +1 @@
-{"file":"pn-bonus-progressbar-level.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,ivCAAivC,CAAC;AACrxC,sCAAe,0BAA0B;;MCK5BA,yBAAuB;;;;uBAGU,KAAK;qBACO,CAAC;+BACS,EAAE;gCACD,CAAC;0BAEtC,CAAC;mBAER,CAAC;mBACD,CAAC;wBACI,EAAE;;;IAE9B,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QACtF,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;QAEhD,IAAI,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE;;YAE7B,OAAO;SACR;QACD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;KACxG;IACD,WAAW;QACT,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;KAC/F;IACD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,gBAAgB,GAAG,EAAE,IAChD,4DAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,eAAe,CAAO,EACtE,4DAAK,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,WAAW,EAAE,CAAO,CAC1D,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnBonusProgressbarLevel"],"sources":["src/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.scss?tag=pn-bonus-progressbar-level","src/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-bonus-progressbar-level {\n  position: absolute;\n  width: 0.1rem;\n  left: 50%;\n  &::after {\n    content: '';\n    width: 0.1rem;\n    position: absolute;\n    left: 0;\n    border-left: 1px dashed #9b1c2e;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 3rem;\n  }\n  &:not([current]):nth-child(odd) {\n    &::after {\n      height: 7rem;\n      margin-top: 0.6rem;\n    }\n  }\n}\n\n.progressbar-level-percentage {\n  font-size: 0.75em;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: -3.2rem;\n  [current] > & {\n    display: none;\n  }\n  pn-bonus-progressbar-level:not([current]):nth-child(odd) & {\n    top: -4.8rem;\n  }\n}\n\n.progressbar-level-value {\n  font-size: 0.75em;\n  white-space: nowrap;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 2.3rem;\n  [current] > & {\n    top: -3.2rem;\n  }\n  pn-bonus-progressbar-level:not([current]):nth-child(odd) & {\n    top: 4.2rem;\n  }\n}\n","import { Component, Prop, h, Host, State, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pn-bonus-progressbar-level',\n  styleUrl: 'pn-bonus-progressbar-level.scss',\n})\nexport class PnBonusProgressbarLevel {\n  @Element() hostElement: HTMLElement;\n\n  @Prop({ reflect: true }) current: boolean = false;\n  @Prop({ reflect: true, mutable: true }) value: number = 0;\n  @Prop({ reflect: true, mutable: true }) bonuspercentage: string = '';\n  @Prop({ reflect: true, mutable: true }) visualpercentage: number = 0;\n\n  @State() percentage: number = 0;\n\n  @State() max: number = 0;\n  @State() min: number = 0;\n  @State() currency: string = '';\n\n  componentWillLoad() {\n    this.max = parseInt(this.hostElement.parentElement.parentElement.getAttribute('max'), 10);\n    this.min = parseInt(this.hostElement.parentElement.parentElement.getAttribute('min'), 10);\n    this.currency = this.hostElement.parentElement.parentElement.getAttribute('currency');\n    this.percentage = (this.value / this.max) * 100;\n\n    if (this.visualpercentage > 0) {\n      // Visual percentage has been overriden\n      return;\n    }\n    this.visualpercentage = this.value === 0 ? 0 : ((this.value - this.min) / (this.max - this.min)) * 100;\n  }\n  formatValue() {\n    return `${this.value.toLocaleString('sv-SE', { maximumFractionDigits: 0 })} ${this.currency}`;\n  }\n  render() {\n    return (\n      <Host style={{ left: `${this.visualpercentage}%` }}>\n        <div class=\"progressbar-level-percentage\">{this.bonuspercentage}</div>\n        <div class=\"progressbar-level-value\">{this.formatValue()}</div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-bonus-progressbar-level.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,w6BAAw6B,CAAC;AAC58B,sCAAe,0BAA0B;;MCK5BA,yBAAuB;;;;uBAGU,KAAK;qBACO,CAAC;+BACS,EAAE;gCACD,CAAC;0BAEtC,CAAC;mBAER,CAAC;mBACD,CAAC;wBACI,EAAE;;;IAE9B,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QACtF,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;QAEhD,IAAI,IAAI,CAAC,gBAAgB,GAAG,CAAC,EAAE;;YAE7B,OAAO;SACR;QACD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;KACxG;IACD,WAAW;QACT,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;KAC/F;IACD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,gBAAgB,GAAG,EAAE,IAChD,4DAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,eAAe,CAAO,EACtE,4DAAK,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,WAAW,EAAE,CAAO,CAC1D,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnBonusProgressbarLevel"],"sources":["src/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.scss?tag=pn-bonus-progressbar-level","src/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-bonus-progressbar-level {\n  position: absolute;\n  width: 0.1rem;\n  left: 50%;\n  &::after {\n    content: '';\n    width: 0.1rem;\n    position: absolute;\n    left: 0;\n    border-left: 1px dashed #9b1c2e;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 3rem;\n  }\n  &:not([current]):nth-child(odd) {\n    &::after {\n      height: 7rem;\n      margin-top: 0.6rem;\n    }\n  }\n}\n\n.progressbar-level-percentage {\n  font-size: 0.75em;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: -3.2rem;\n  [current] > & {\n    display: none;\n  }\n  pn-bonus-progressbar-level:not([current]):nth-child(odd) & {\n    top: -4.8rem;\n  }\n}\n\n.progressbar-level-value {\n  font-size: 0.75em;\n  white-space: nowrap;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 2.3rem;\n  [current] > & {\n    top: -3.2rem;\n  }\n  pn-bonus-progressbar-level:not([current]):nth-child(odd) & {\n    top: 4.2rem;\n  }\n}\n","import { Component, Prop, h, Host, State, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pn-bonus-progressbar-level',\n  styleUrl: 'pn-bonus-progressbar-level.scss',\n})\nexport class PnBonusProgressbarLevel {\n  @Element() hostElement: HTMLElement;\n\n  @Prop({ reflect: true }) current: boolean = false;\n  @Prop({ reflect: true, mutable: true }) value: number = 0;\n  @Prop({ reflect: true, mutable: true }) bonuspercentage: string = '';\n  @Prop({ reflect: true, mutable: true }) visualpercentage: number = 0;\n\n  @State() percentage: number = 0;\n\n  @State() max: number = 0;\n  @State() min: number = 0;\n  @State() currency: string = '';\n\n  componentWillLoad() {\n    this.max = parseInt(this.hostElement.parentElement.parentElement.getAttribute('max'), 10);\n    this.min = parseInt(this.hostElement.parentElement.parentElement.getAttribute('min'), 10);\n    this.currency = this.hostElement.parentElement.parentElement.getAttribute('currency');\n    this.percentage = (this.value / this.max) * 100;\n\n    if (this.visualpercentage > 0) {\n      // Visual percentage has been overriden\n      return;\n    }\n    this.visualpercentage = this.value === 0 ? 0 : ((this.value - this.min) / (this.max - this.min)) * 100;\n  }\n  formatValue() {\n    return `${this.value.toLocaleString('sv-SE', { maximumFractionDigits: 0 })} ${this.currency}`;\n  }\n  render() {\n    return (\n      <Host style={{ left: `${this.visualpercentage}%` }}>\n        <div class=\"progressbar-level-percentage\">{this.bonuspercentage}</div>\n        <div class=\"progressbar-level-value\">{this.formatValue()}</div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnBonusProgressbarCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-bonus-progressbar{width:100%}.bonusprogressbar-top{display:flex;align-items:center;margin-bottom:1.6rem}.bonusprogressbar-top-icon{border-radius:100%;height:5rem;width:5rem;padding:1rem;display:inline-flex;margin-right:1em;margin-left:0.5em;background-color:#e0f8ff}[theme=red] .bonusprogressbar-top-icon{background-color:#fbc2c1}.bonusprogressbar-top-icon pn-icon svg{width:100%;height:100%}.bonusprogressbar-sumtext{margin-top:0.4rem;font-size:1.3rem;color:#5e554a}.bonusprogressbar-top-percentage{margin-left:0.8rem;padding:0}.bonusprogressbar-wrapper{position:relative;display:flex;min-height:5em;align-items:center}.bonusprogressbar-currentlevel{position:absolute}.bonusprogressbar-progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.7rem;border:0.1rem solid #00a0d6;border-radius:1.7rem;padding:0;margin:0;overflow:hidden}[theme=red] .bonusprogressbar-progress[value]{border-color:#f06365}.bonusprogressbar-progress[value]::-webkit-progress-bar{border:0;border-radius:1.7rem;margin:0;padding:0;background:#e0f8ff}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-bar{background:#fdefee}.bonusprogressbar-progress[value]::-webkit-progress-value{margin:0;padding:0;border-radius:1.7rem;background:#00a0d6}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-value{background:#f06365}";
+const pnBonusProgressbarCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-bonus-progressbar{width:100%}.bonusprogressbar-top{display:flex;align-items:center;margin-bottom:1.6rem}.bonusprogressbar-top-icon{border-radius:100%;height:5rem;width:5rem;padding:1rem;display:inline-flex;margin-right:1em;margin-left:0.5em;background-color:#e0f8ff}[theme=red] .bonusprogressbar-top-icon{background-color:#fbc2c1}.bonusprogressbar-top-icon pn-icon svg{width:100%;height:100%}.bonusprogressbar-sumtext{margin-top:0.4rem;font-size:1.3rem;color:#5e554a}.bonusprogressbar-top-percentage{margin-left:0.8rem;padding:0}.bonusprogressbar-wrapper{position:relative;display:flex;min-height:5em;align-items:center}.bonusprogressbar-currentlevel{position:absolute}.bonusprogressbar-progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.7rem;border:0.1rem solid #00a0d6;border-radius:1.7rem;padding:0;margin:0;overflow:hidden}[theme=red] .bonusprogressbar-progress[value]{border-color:#f06365}.bonusprogressbar-progress[value]::-webkit-progress-bar{border:0;border-radius:1.7rem;margin:0;padding:0;background:#e0f8ff}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-bar{background:#fdefee}.bonusprogressbar-progress[value]::-webkit-progress-value{margin:0;padding:0;border-radius:1.7rem;background:#00a0d6}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-value{background:#f06365}";
 const PnBonusProgressbarStyle0 = pnBonusProgressbarCss;
 
 const PnBonusProgressbar$1 = /*@__PURE__*/ proxyCustomElement(class PnBonusProgressbar extends HTMLElement {

package/dist/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/dist/components/pn-breakpoints.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnBreakpointsCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-breakpoints{width:100%}pn-breakpoints .breakpoints--dotcom{width:100%;background-color:aliceblue;text-align:center;margin-bottom:2.4rem;background-color:aliceblue}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"less than 321\"}@media screen and (min-width: 321px){pn-breakpoints .breakpoints--dotcom{background-color:yellow}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"321 (xs)\"}}@media screen and (min-width: 576px){pn-breakpoints .breakpoints--dotcom{background-color:aqua}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"576 (sm)\"}}@media screen and (min-width: 768px){pn-breakpoints .breakpoints--dotcom{background-color:red;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"768 (md)\"}}@media screen and (min-width: 992px){pn-breakpoints .breakpoints--dotcom{background-color:green;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"992 (lg)\"}}@media screen and (min-width: 1200px){pn-breakpoints .breakpoints--dotcom{background-color:blue;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1200 (xl)\"}}@media screen and (min-width: 1640px){pn-breakpoints .breakpoints--dotcom{background-color:pink}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1640 (xxl)\"}}@media screen and (min-width: 1920px){pn-breakpoints .breakpoints--dotcom{background-color:orange}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1920 (fhd)\"}}";
+const pnBreakpointsCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-breakpoints{width:100%}pn-breakpoints .breakpoints--dotcom{width:100%;background-color:aliceblue;text-align:center;margin-bottom:2.4rem;background-color:aliceblue}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"less than 321\"}@media screen and (min-width: 321px){pn-breakpoints .breakpoints--dotcom{background-color:yellow}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"321 (xs)\"}}@media screen and (min-width: 576px){pn-breakpoints .breakpoints--dotcom{background-color:aqua}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"576 (sm)\"}}@media screen and (min-width: 768px){pn-breakpoints .breakpoints--dotcom{background-color:red;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"768 (md)\"}}@media screen and (min-width: 992px){pn-breakpoints .breakpoints--dotcom{background-color:green;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"992 (lg)\"}}@media screen and (min-width: 1200px){pn-breakpoints .breakpoints--dotcom{background-color:blue;color:#fff}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1200 (xl)\"}}@media screen and (min-width: 1640px){pn-breakpoints .breakpoints--dotcom{background-color:pink}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1640 (xxl)\"}}@media screen and (min-width: 1920px){pn-breakpoints .breakpoints--dotcom{background-color:orange}pn-breakpoints .breakpoints--dotcom .reference::before{content:\"1920 (fhd)\"}}";
 const PnBreakpointsStyle0 = pnBreakpointsCss;
 
 const PnBreakpoints$1 = /*@__PURE__*/ proxyCustomElement(class PnBreakpoints extends HTMLElement {
@@ -18,7 +18,7 @@ const PnBreakpoints$1 = /*@__PURE__*/ proxyCustomElement(class PnBreakpoints ext
         return `breakpoints--${this.breakPointClass}`;
     }
     render() {
-        return (h(Host, { key: '4e8d9d6c9a4f5b87fbe8c6a9b81daa1a289fae2a' }, h("div", { key: '3933fb359e312456aa5604fd24358fea69834048', class: `breakpoints ${this.createBreakpointClass()} ` }, `${this.currentWidth} px`, ' min-width: ', h("span", { key: '608792f6cd68b21ce5e14c9114ce47188e68c181', class: "reference" }, ' px'))));
+        return (h(Host, { key: 'a1f67a4097091abb139c9cd26d54a0511882319e' }, h("div", { key: 'a317df5e779ed01225fea75bb3ed1cb551ae8fd9', class: `breakpoints ${this.createBreakpointClass()} ` }, `${this.currentWidth} px`, ' min-width: ', h("span", { key: 'c0cc0a776857347e1bd8e2f77734d798656dc78a', class: "reference" }, ' px'))));
     }
     static get style() { return PnBreakpointsStyle0; }
 }, [0, "pn-breakpoints", {

package/dist/components/pn-breakpoints.js.map

@@ -1 +1 @@
-{"file":"pn-breakpoints.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,k3DAAk3D,CAAC;AAC54D,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":["@import '../../../globals/main.scss';\npn-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: $min-width-sm) {\n        background-color: aqua;\n        .reference::before {\n          content: '576 (sm)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-md) {\n        background-color: red;\n        color: #fff;\n        .reference::before {\n          content: '768 (md)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-lg) {\n        background-color: green;\n        color: #fff;\n        .reference::before {\n          content: '992 (lg)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        background-color: blue;\n        color: #fff;\n        .reference::before {\n          content: '1200 (xl)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-xxl) {\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,yiDAAyiD,CAAC;AACnkD,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":["@import '../../../globals/main.scss';\npn-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: $min-width-sm) {\n        background-color: aqua;\n        .reference::before {\n          content: '576 (sm)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-md) {\n        background-color: red;\n        color: #fff;\n        .reference::before {\n          content: '768 (md)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-lg) {\n        background-color: green;\n        color: #fff;\n        .reference::before {\n          content: '992 (lg)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-xl) {\n        background-color: blue;\n        color: #fff;\n        .reference::before {\n          content: '1200 (xl)';\n        }\n      }\n\n      @media screen and (min-width: $min-width-xxl) {\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/dist/components/pn-chart.js

@@ -16436,7 +16436,7 @@ const dataSetProps = (set, dataChartType) => {
     return { ...set, ...variant };
 };
 
-const pnChartCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}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}}";
+const pnChartCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}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}}";
 const PnChartStyle0 = pnChartCss;
 
 const PnChart$1 = /*@__PURE__*/ proxyCustomElement(class PnChart extends HTMLElement {