@postnord/pn-marketweb-components 2.3.11 → 2.3.13

package/components/pn-bonus-progressbar.js

@@ -0,0 +1,128 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnBonusProgressbarCss = "pn-bonus-progressbar{width:100%}.bonusprogressbar-top{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:1.6rem}.bonusprogressbar-top-icon{border-radius:100%;height:5rem;width:5rem;padding:1rem;display:-ms-inline-flexbox;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:-ms-flexbox;display:flex;min-height:5em;-ms-flex-align:center;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 PnBonusProgressbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.icon = null;
+    this.heading = "";
+    this.sumtext = null;
+    this.theme = "blue";
+    this.bonuspercentage = "0%";
+    this.currency = "kr";
+    this.value = 0;
+    this.min = 0;
+    this.max = 0;
+    this.valuepercentage = 0;
+    this.progresspercentage = 0;
+    this.levelValues = [];
+    this.currentLevelAdjustedValue = 0;
+  }
+  componentWillLoad() {
+    this.setInitialValues();
+    this.setValuePercentage();
+  }
+  setInitialValues() {
+    const levelElements = Array.from(this.hostElement.querySelectorAll('pn-bonus-progressbar-level:not([current])'));
+    this.currentLevelAdjustedValue = this.value;
+    this.levelValues = levelElements.map((elm) => {
+      return parseInt(elm.getAttribute("value"), 10);
+    });
+    if (!this.max) {
+      if (this.levelValues && this.levelValues.length > 0) {
+        const newMax = this.levelValues.slice(-1)[0];
+        let modifier = 1.05;
+        if (this.value > newMax) {
+          modifier = 1.2;
+        }
+        this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to
+      }
+    }
+    // if (!this.min) {
+    //   const suggestedMin = Math.floor(this.value * 0.9);
+    //   if (suggestedMin > 0) {
+    //     this.min = suggestedMin;
+    //   }
+    // }
+    if (this.value > this.max) {
+      this.currentLevelAdjustedValue = 100;
+    }
+  }
+  setValuePercentage() {
+    this.valuepercentage = (this.value / (this.max)) * 100;
+    this.progresspercentage = ((this.value - this.min) / (this.max - this.min)) * 100;
+    if (this.progresspercentage < 0) {
+      if (this.levelValues && this.levelValues.length && this.levelValues[0] < this.value) {
+        this.min = Math.floor(this.levelValues[0] * .95);
+      }
+      else {
+        this.min = Math.floor(this.value * .95);
+      }
+    }
+    if (this.progresspercentage > 100) {
+      this.progresspercentage = 100;
+      const newMax = this.levelValues.slice(-1)[0];
+      let modifier = 1.05;
+      if (this.value > newMax) {
+        modifier = 1.2;
+      }
+      this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to
+      // this.max = Math.floor(newMax * 1.20);
+    }
+  }
+  iconColor() {
+    switch (this.theme) {
+      case 'red':
+        return 'coral700';
+      case 'blue':
+      default:
+        return 'blue700';
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "bonusprogressbar-top" }, this.icon ? (h("div", { class: "bonusprogressbar-top-icon" }, h("pn-icon", { symbol: this.icon, small: "false", color: this.iconColor() }))) : {}, h("div", { class: "bonusprogressbar-top-heading" }, h("h4", { class: "bonusprogressbar-top-headline" }, this.heading, " ", h("strong", { class: "bonusprogressbar-top-percentage" }, this.bonuspercentage)), this.sumtext ? (h("div", { class: "bonusprogressbar-sumtext" }, this.sumtext)) : null)), h("div", { class: "bonusprogressbar-wrapper" }, h("progress", { class: "bonusprogressbar-progress", value: this.progresspercentage, max: "100" }), h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "currentLevelAdjustedValue": ["setValuePercentage"],
+    "value": ["setValuePercentage"],
+    "min": ["setValuePercentage"],
+    "max": ["setValuePercentage"]
+  }; }
+  static get style() { return pnBonusProgressbarCss; }
+}, [4, "pn-bonus-progressbar", {
+    "icon": [1],
+    "heading": [1],
+    "sumtext": [513],
+    "theme": [513],
+    "bonuspercentage": [1],
+    "currency": [513],
+    "value": [1538],
+    "min": [1538],
+    "max": [1538],
+    "valuepercentage": [32],
+    "progresspercentage": [32],
+    "levelValues": [32],
+    "currentLevelAdjustedValue": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-bonus-progressbar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-bonus-progressbar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnBonusProgressbar$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnBonusProgressbar = PnBonusProgressbar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnBonusProgressbar, defineCustomElement };

package/components/pn-breakpoints.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnBreakpoints extends Components.PnBreakpoints, HTMLElement {}
+export const PnBreakpoints: {
+  prototype: PnBreakpoints;
+  new (): PnBreakpoints;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-breakpoints.js

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnBreakpointsCss = "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 PnBreakpoints$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.currentWidth = window.innerWidth;
+    this.breakPointClass = 'dotcom';
+  }
+  handleViewportSizeChange(event) {
+    this.currentWidth = event.target.innerWidth;
+  }
+  createBreakpointClass() {
+    return `breakpoints--${this.breakPointClass}`;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `breakpoints ${this.createBreakpointClass()} ` }, `${this.currentWidth} px`, ' min-width: ', h("span", { class: "reference" }, ' px'))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnBreakpointsCss; }
+}, [0, "pn-breakpoints", {
+    "breakPointClass": [1, "break-point-class"],
+    "currentWidth": [32]
+  }, [[9, "resize", "handleViewportSizeChange"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-breakpoints"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-breakpoints":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnBreakpoints$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnBreakpoints = PnBreakpoints$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnBreakpoints, defineCustomElement };

package/components/pn-chart.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnChart extends Components.PnChart, HTMLElement {}
+export const PnChart: {
+  prototype: PnChart;
+  new (): PnChart;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;