@postnord/pn-marketweb-components 2.3.11 → 2.3.13

package/components/pn-charts-card.d.ts

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

package/components/pn-charts-card.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnChartsCardCss = "pn-charts-card{width:100%;height:100%;display:-ms-flexbox;display:flex}pn-charts-card .pn-charts-card__wrapper{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:2.4rem;padding:2.4rem}@media screen and (min-width: 1200px){pn-charts-card .pn-charts-card__wrapper{padding:3.2rem}}pn-charts-card .pn-charts-card__heading__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;gap:0.8rem}pn-charts-card .pn-charts-card__heading{font-weight:700;font-size:2.4rem;line-height:110%}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__heading{font-size:3.2rem}}pn-charts-card .pn-charts-card__heading__highlight{font-weight:700;font-size:2.4rem;line-height:110%;color:#005D92}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__heading__highlight{font-size:3.2rem}}pn-charts-card .pn-charts-card__content__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}pn-charts-card .pn-charts-card__text__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;height:100%}pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:none}pn-charts-card .pn-charts-card__text__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}pn-charts-card .pn-charts-card__text__wrapper span{display:block;margin-bottom:5.4rem}pn-charts-card .pn-charts-card__preamble{font-weight:400;font-size:1.6rem;line-height:140%;-ms-flex-positive:1;flex-grow:1;margin-bottom:1.6rem}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__preamble{font-size:2rem}}pn-charts-card .pn-charts-card__source{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-charts-card .pn-charts-card__source label{background-color:#00A0D6;color:#FFFFFF;border-radius:0.4rem;font-weight:400;font-size:1rem;line-height:1;text-transform:uppercase;padding:0.4rem;margin-bottom:0.6rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__source label{font-size:1.2rem;padding:0.6rem}}pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading{font-weight:400;font-size:1.6rem;line-height:140%;color:#005D92;margin-bottom:0}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading{font-size:2rem}}pn-charts-card .pn-charts-card__source a{text-decoration:none;color:#005D92;font-weight:500;font-size:1.6rem;text-decoration:none;color:#005D92;font-weight:400}pn-charts-card .pn-charts-card__source a:hover{text-decoration:underline}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__source a{font-size:2rem}}pn-charts-card .pn-charts-card__source a pn-icon svg path{fill:#005D92}pn-charts-card .pn-charts-card__source a[target=_blank]:not(.pn-button):after{display:none}.fullwidth>pn-charts-card .pn-charts-card__wrapper{padding:2.4rem}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__wrapper{padding:4rem}}.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper{margin-bottom:3.2rem;gap:1.6rem}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper{-ms-flex-pack:start;justify-content:flex-start}}.fullwidth>pn-charts-card .pn-charts-card__heading,.fullwidth>pn-charts-card .pn-charts-card__heading__highlight{font-size:2.4rem}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__heading,.fullwidth>pn-charts-card .pn-charts-card__heading__highlight{font-size:3.2rem}}.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:5.6rem}}@media screen and (min-width: 1200px){.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{gap:4rem}}@media screen and (min-width: 1640px){.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{gap:3.2rem}}.fullwidth>pn-charts-card .pn-charts-card__text__container{-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__text__container{width:100%}}.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--vertical{display:-ms-flexbox;display:flex}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--vertical{display:none}}.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:none}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:-ms-flexbox;display:flex}}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__preamble{-ms-flex-positive:0;flex-grow:0;font-size:2rem}}pn-charts-card[data-chart-color=blue]>.pn-charts-card__wrapper{background-color:#EFFBFF}pn-charts-card[data-chart-color=coral]>.pn-charts-card__wrapper{background-color:#FDEFEE}pn-charts-card[data-chart-color=green]>.pn-charts-card__wrapper{background-color:#DCF6E7}pn-charts-card[data-chart-color=white]>.pn-charts-card__wrapper{background-color:#FFFFFF}pn-charts-card[data-chart-color=gray]>.pn-charts-card__wrapper{background-color:#F9F8F8}";
+
+const PnChartsCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.showCtaLinkText = () => {
+      if (this.ctaLinkText) {
+        return (h("a", { class: "link--animated", href: this.sourceUrl, rel: this.openInNewWindow ? 'noopener nofollower noreferrer' : null, target: this.openInNewWindow ? '_blank' : null }, this.ctaLinkText, " ", h("pn-icon", { symbol: "arrow-right" }, " ")));
+      }
+      return null;
+    };
+    this.header = undefined;
+    this.highlight = undefined;
+    this.preamble = undefined;
+    this.label = undefined;
+    this.source = undefined;
+    this.sourceUrl = undefined;
+    this.ctaLinkText = undefined;
+    this.openInNewWindow = false;
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "clickable-block-wrapper" }), h("div", { class: "pn-charts-card__wrapper" }, h("div", { class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical" }, h("div", { class: "pn-charts-card__heading" }, this.header), h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)), h("div", { class: "pn-charts-card__content__wrapper" }, h("slot", { name: "chart" }), h("div", { class: "pn-charts-card__text__container" }, h("div", { class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal" }, h("div", { class: "pn-charts-card__heading pn-charts-card__heading" }, this.header), h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)), h("span", { class: "pn-charts-card__preamble" }, this.preamble), h("div", { class: "pn-charts-card__text__wrapper" }, h("div", { class: "pn-charts-card__source" }, h("label", null, this.label), h("h3", { class: "pn-chart-card__text__heading" }, this.source), this.showCtaLinkText())))))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnChartsCardCss; }
+}, [4, "pn-charts-card", {
+    "header": [1],
+    "highlight": [1],
+    "preamble": [1],
+    "label": [1],
+    "source": [1],
+    "sourceUrl": [1, "source-url"],
+    "ctaLinkText": [1, "cta-link-text"],
+    "openInNewWindow": [4, "open-in-new-window"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-charts-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-charts-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnChartsCard$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnChartsCard = PnChartsCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnChartsCard, defineCustomElement };

package/components/pn-choice-button.d.ts

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

package/components/pn-choice-button.js

@@ -0,0 +1,6 @@
+import { P as PnChoiceButton$1, d as defineCustomElement$1 } from './pn-choice-button2.js';
+
+const PnChoiceButton = PnChoiceButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnChoiceButton, defineCustomElement };

package/components/pn-choice-button2.js

@@ -0,0 +1,61 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnChoiceButtonCss = "pn-choice-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;display:inline-block;background:#fff;position:relative;margin:0.2em 0.4em}pn-choice-button input{opacity:0;position:absolute;top:0;left:0;pointer-events:none;margin:0;width:100%;height:100%}pn-choice-button label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0.4rem 0.8rem;border:0.1rem solid #D3CECB;color:#005D92;font-weight:500;border-radius:0.8rem;text-align:center;cursor:pointer;-webkit-transition:background 0.2s, -webkit-box-shadow 0.1s;transition:background 0.2s, -webkit-box-shadow 0.1s;transition:box-shadow 0.1s, background 0.2s;transition:box-shadow 0.1s, background 0.2s, -webkit-box-shadow 0.1s}pn-choice-button label pn-illustration{display:inline-block;width:3rem;height:3rem;margin-right:0.9rem}pn-choice-button>input:checked+label.pn-choice-button{background:#E0F8FF;color:#005D92;border-color:#005D92;-webkit-box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13)}pn-choice-button>input:indeterminate+label.pn-choice-button{background:#FFFFFF;color:#005D92}pn-choice-button>input:hover+label.pn-choice-button{background:#E0F8FF}pn-choice-button>input:focus+label.pn-choice-button,pn-choice-button>input:active+label.pn-choice-button{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-choice-button>input:active+label.pn-choice-button{background:#8EDDF9}pn-choice-button>input:disabled+label.pn-choice-button{background-color:#D3CECB}pn-choice-button>input:checked+label.pn-choice-button:hover{background:#8EDDF9}pn-choice-button>input:checked+label.pn-choice-button:active{background:#8EDDF9;border:0.1rem solid #00A0D6}";
+
+const PnChoiceButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.value = undefined;
+    this.name = undefined;
+    this.choiceid = undefined;
+    this.type = "checkbox";
+    this.disabled = false;
+    this.checked = false;
+    this.indeterminate = false;
+  }
+  handlechange() {
+    this.indeterminate = false;
+  }
+  componentDidLoad() {
+    this.checkAndSetIndeterminateState();
+  }
+  componentDidUpdate() {
+    this.checkAndSetIndeterminateState();
+  }
+  checkAndSetIndeterminateState() {
+    let checkbox = this.hostElement.querySelector(`#${this.choiceid}`);
+    if (checkbox) {
+      checkbox.indeterminate = this.indeterminate;
+    }
+  }
+  render() {
+    return (h(Host, null, h("input", { type: this.type, id: this.choiceid, value: this.value, name: this.name || this.choiceid, disabled: this.disabled, checked: this.checked }), h("label", { htmlFor: this.choiceid, class: "pn-choice-button" }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnChoiceButtonCss; }
+}, [4, "pn-choice-button", {
+    "value": [520],
+    "name": [1],
+    "choiceid": [1],
+    "type": [1],
+    "disabled": [4],
+    "checked": [4],
+    "indeterminate": [1028]
+  }, [[0, "change", "handlechange"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-choice-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-choice-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnChoiceButton);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnChoiceButton as P, defineCustomElement as d };

package/components/pn-customernumber-selector-option.d.ts

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

package/components/pn-customernumber-selector-option.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnCustomernumberSelectorOptionCss = "pn-customernumber-selector-option{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;overflow:hidden}pn-customernumber-selector-option:last-of-type{border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem}.customernumberoption{overflow:hidden;max-width:100%;text-decoration:none;background:#FFFFFF;-webkit-transition:background 0.15s ease;transition:background 0.15s ease;padding:1.6rem 1rem}.customernumberoption:hover,.customernumberoption:focus,.customernumberoption:active{background:#E0F8FF;text-decoration:none}.customernumberoption-text{font-weight:700;color:#2D2013}.customernumberoption-title{display:block;font-size:1em;color:#005D92;font-weight:700}.customernumberoption-description{font-size:0.75em;color:#5E554A;font-weight:normal}";
+
+const PnProfileSelectorOption = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.heading = "";
+    this.description = "";
+    this.url = "";
+  }
+  render() {
+    return (h(Host, null, h("a", { class: "customernumberoption", href: this.url }, h("span", { class: "customernumberoption-text" }, h("span", { class: "customernumberoption-title" }, this.heading), h("span", { class: "customernumberoption-description" }, this.description), h("slot", null)))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnCustomernumberSelectorOptionCss; }
+}, [4, "pn-customernumber-selector-option", {
+    "heading": [1],
+    "description": [1],
+    "url": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-customernumber-selector-option"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-customernumber-selector-option":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnProfileSelectorOption);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnCustomernumberSelectorOption = PnProfileSelectorOption;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnCustomernumberSelectorOption, defineCustomElement };

package/components/pn-customernumber-selector.d.ts

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

package/components/pn-customernumber-selector.js

@@ -0,0 +1,77 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const translations = {
+  'sv': {
+    'toggleLinkTitleText': `Välj kundnummer`,
+  },
+  'en': {
+    'toggleLinkTitleText': `Choose customernumber`,
+  },
+  'da': {
+    'toggleLinkTitleText': `Vælg kundenummer`,
+  },
+  'no': {
+    'toggleLinkTitleText': `Velg kundenummer`,
+  },
+  'fi': {
+    'toggleLinkTitleText': `Valitse asiakasnumero`,
+  },
+  'de': {
+    'toggleLinkTitleText': `Kundennummer auswählen`,
+  }
+};
+
+const pnCustomernumberSelectorCss = ".customernumber-container{position:relative;padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:0.8rem;border:0.1rem solid #969087;-webkit-transition:border 0.15s ease;transition:border 0.15s ease}.customernumber-container:hover,pn-customernumber-selector[open] .customernumber-container{border-color:#005D92}pn-customernumber-selector[open] .customernumber-container{border-bottom-left-radius:0;border-bottom-right-radius:0}.customernumber-toggle{display:-ms-flexbox;display:flex;z-index:11;position:relative;margin:0;border-radius:0.8rem;padding:1rem;border:0;background:transparent;font-size:1em;text-align:left;outline:0;cursor:pointer}.customernumber-toggle pn-icon{-ms-flex-item-align:center;align-self:center}.customernumber-selected{-ms-flex-positive:1;flex-grow:1;max-width:calc(100% - 2.4rem);overflow:hidden}.customernumber-selected-title{color:#005D92}.customernumber-selected-description{font-size:0.875em;width:100%;overflow:hidden;text-overflow:ellipsis}.customernumber-options{position:absolute;z-index:10;left:-0.1rem;right:-0.1rem;top:100%;border:0.1rem solid #005D92;border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem;max-height:0;opacity:0;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transition:opacity 0.1s linear, max-height 0.1s ease, -webkit-transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;transition:opacity 0.1s linear, max-height 0.1s ease, -webkit-transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;transition:transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s, opacity 0.1s linear, max-height 0.1s ease;transition:transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s, opacity 0.1s linear, max-height 0.1s ease, -webkit-transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;overflow-y:auto}pn-customernumber-selector[open] .customernumber-options{opacity:1;-webkit-transition-delay:0s;transition-delay:0s;max-height:500rem}";
+
+const PnCustomernumberSelector$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.language = "sv";
+    this.open = false;
+    this.heading = "";
+    this.description = "";
+    this.i18n = translations["en"];
+  }
+  componentWillLoad() {
+    this.init();
+  }
+  init() {
+    this.setTranslations();
+  }
+  setTranslations() {
+    if (this.language && translations[this.language]) {
+      this.i18n = translations[this.language];
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "customernumber-container" }, h("button", { class: "customernumber-toggle", "aria-label": this.i18n.toggleLinkTitleText, onClick: () => this.open = !this.open }, h("div", { class: "customernumber-selected" }, h("strong", { class: "customernumber-selected-title" }, this.heading), h("div", { class: "customernumber-selected-description" }, this.description)), h("pn-icon", { symbol: this.open ? 'angle-up' : 'angle-down', small: "false", color: "blue700" })), h("div", { class: "customernumber-options" }, h("slot", null)))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnCustomernumberSelectorCss; }
+}, [4, "pn-customernumber-selector", {
+    "language": [1537],
+    "open": [1540],
+    "heading": [1],
+    "description": [1],
+    "i18n": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-customernumber-selector"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-customernumber-selector":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnCustomernumberSelector$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnCustomernumberSelector = PnCustomernumberSelector$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnCustomernumberSelector, defineCustomElement };

package/components/pn-filter-checkbox.d.ts

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

package/components/pn-filter-checkbox.js

@@ -0,0 +1,93 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnFilterCheckboxCss = ":host{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host input{opacity:0;position:absolute}:host input[type=checkbox]+label.pn-checkbox{width:1.5em;min-width:1.5em;height:1.5em;min-height:1.5em;background:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;border:0.1rem solid #969087;cursor:pointer;border-radius:0.4rem;cursor:pointer;-webkit-transition-duration:220ms;transition-duration:220ms;-webkit-transition-timing-function:cubic-bezier(0.79, 0.14, 0.15, 0.86);transition-timing-function:cubic-bezier(0.79, 0.14, 0.15, 0.86);-webkit-transition-property:border, background, -webkit-box-shadow;transition-property:border, background, -webkit-box-shadow;transition-property:border, background, box-shadow;transition-property:border, background, box-shadow, -webkit-box-shadow}:host input[type=checkbox]+label.pn-checkbox svg{width:80%;fill:none}:host input[type=checkbox]+label.pn-checkbox svg polyline{stroke:#FFF;-webkit-transform-origin:0 0;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;-webkit-transition-delay:none;transition-delay:none;-webkit-transition:stroke-dashoffset 180ms cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:stroke-dashoffset 180ms cubic-bezier(0.79, 0.14, 0.15, 0.86)}:host input[type=checkbox]:hover+label.pn-checkbox{border:0.1rem solid #005D92;background:#E0F8FF}:host input[type=checkbox]:checked+label.pn-checkbox,:host input[type=checkbox]:indeterminate+label.pn-checkbox{background:#005D92;border:0.1rem solid #005D92}:host input[type=checkbox]:checked+label.pn-checkbox svg polyline,:host input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline{-webkit-transition-delay:220ms;transition-delay:220ms}:host input[type=checkbox]:checked+label.pn-checkbox svg polyline.checkmark-path{stroke-dashoffset:0}:host input[type=checkbox]:indeterminate+label.pn-checkbox svg polyline.indeterminate-path{stroke-dashoffset:0}:host input[type=checkbox]:focus+label.pn-checkbox,:host input[type=checkbox]:active+label.pn-checkbox{-webkit-box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92;box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92}:host input[type=checkbox]:disabled+label.pn-checkbox{background-color:#D3CECB;border:0.1rem solid #969087;cursor:not-allowed}:host input[type=checkbox]:disabled+label.pn-checkbox svg polyline{stroke:#969087}:host input[type=checkbox]:disabled:checked+label.pn-checkbox{border:0.1rem solid transparent}:host input[type=checkbox]:disabled:active+label.pn-checkbox{-webkit-box-shadow:none;box-shadow:none}";
+
+const PnFilterCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.value = undefined;
+    this.name = undefined;
+    this.checkboxid = undefined;
+    this.disabled = false;
+    this.checked = false;
+    this.indeterminate = false;
+  }
+  handlechange() {
+    this.indeterminate = false;
+  }
+  componentDidLoad() {
+    this.checkAndSetIndeterminateState();
+    this.bindEvents();
+  }
+  componentDidUpdate() {
+    this.checkAndSetIndeterminateState();
+  }
+  bindEvents() {
+    const labels = document.querySelectorAll('label[for="' + this.checkboxid + '"]');
+    labels.forEach((label) => {
+      label.addEventListener('click', () => {
+        this.hostElement.shadowRoot.querySelector('label').click();
+      });
+    });
+    const checkboxInput = this.hostElement.shadowRoot.querySelector('input');
+    checkboxInput.addEventListener('change', this.onCheckboxChange.bind(this, checkboxInput));
+  }
+  onCheckboxChange(checkboxInput) {
+    let outsideInput = this.hostElement.querySelector("input.hidden-" + this.checkboxid);
+    if (outsideInput) {
+      outsideInput.value = (checkboxInput.checked) ? this.value : "";
+      outsideInput.dispatchEvent(new CustomEvent("change", { detail: outsideInput }));
+    }
+  }
+  checkAndSetIndeterminateState() {
+    let checkbox = this.hostElement.querySelector(`#${this.checkboxid}`);
+    if (checkbox) {
+      checkbox.indeterminate = this.indeterminate;
+    }
+  }
+  renderInputOutsideShadowRoot() {
+    var _a;
+    let input = this.hostElement.querySelector("input.hidden-" + this.checkboxid);
+    if (!input) {
+      input = this.hostElement.ownerDocument.createElement("input");
+      input.type = "hidden";
+      input.classList.add("hidden-" + this.checkboxid);
+      this.hostElement.appendChild(input);
+    }
+    input.name = (_a = this.name) !== null && _a !== void 0 ? _a : this.checkboxid;
+  }
+  render() {
+    this.renderInputOutsideShadowRoot();
+    return (h(Host, { checked: this.checked, id: this.checkboxid }, h("input", { type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked }), h("label", { htmlFor: this.checkboxid, class: "pn-checkbox" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { class: "indeterminate-path", points: "4,12 20,12", "stroke-width": "3" })))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnFilterCheckboxCss; }
+}, [1, "pn-filter-checkbox", {
+    "value": [520],
+    "name": [1],
+    "checkboxid": [1],
+    "disabled": [4],
+    "checked": [4],
+    "indeterminate": [1028]
+  }, [[0, "change", "handlechange"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-filter-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-filter-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnFilterCheckbox$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnFilterCheckbox = PnFilterCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnFilterCheckbox, defineCustomElement };

package/components/pn-find-price-result.d.ts

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

package/components/pn-find-price-result.js

@@ -0,0 +1,6 @@
+import { P as PnfindPriceResult, d as defineCustomElement$1 } from './pn-find-price-result2.js';
+
+const PnFindPriceResult = PnfindPriceResult;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnFindPriceResult, defineCustomElement };

package/components/pn-find-price-result2.js

@@ -0,0 +1,192 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as createStore } from './index3.js';
+import { d as defineCustomElement$4 } from './pn-product-card2.js';
+import { d as defineCustomElement$3 } from './pn-product-card-info2.js';
+import { d as defineCustomElement$2 } from './pn-product-card-price2.js';
+import { d as defineCustomElement$1 } from './pn-titletag2.js';
+
+const sizeCategories = [
+  { name: "Small",   value: "Small", illustration: "eli1n", unit: "small" },
+  { name: "Medium",   value: "Medium", illustration: "medium-package", unit: "medium"},
+  { name: "Large",   value: "Large", illustration: "large-package", unit: "large"},
+];
+
+const weights = {
+"small": [
+  { name: "50 g",   abbreviation: 'g', value: 50 },
+  { name: "100 g",  abbreviation: 'g', value: 100 },
+  { name: "250 g",  abbreviation: 'g', value: 250 },
+  { name: "500 g",  abbreviation: 'g', value: 500 },
+  { name: "1 kg",   abbreviation: 'kg', value: 1 },
+  { name: "2 kg",   abbreviation: 'kg', value: 2 },
+],
+"medium": [
+  { name: "1 kg",   abbreviation: 'kg', value: 1 },
+  { name: "2 kg",   abbreviation: 'kg', value: 2 },
+  { name: "3 kg",   abbreviation: 'kg', value: 3 },
+  { name: "5 kg",   abbreviation: 'kg', value: 5 },
+  { name: "10 kg",  abbreviation: 'kg', value: 10 },
+  { name: "15 kg",  abbreviation: 'kg', value: 15 },
+  { name: "20 kg",  abbreviation: 'kg', value: 20 },    
+],
+"large": [
+  { name: "3 kg",   abbreviation: 'kg', value: 3 },
+  { name: "5 kg",   abbreviation: 'kg', value: 5 },
+  { name: "10 kg",  abbreviation: 'kg', value: 10 },
+  { name: "15 kg",  abbreviation: 'kg', value: 15 },
+  { name: "20 kg",  abbreviation: 'kg', value: 20 }, 
+]
+};
+
+
+
+const RealValues =
+  { 
+    WebUrl:  "https://riktigavykort.postnord.se/sv",   
+    AndroidAppUrl: "https://play.google.com/store/apps/details?id=se.posten.riktigavykort&hl=sv",
+    AndroidImg: "https://com-integration.postnord.com/globalassets/icons/logos-and-badges/google-play-badge_se.svg", 
+    IosAppUrl:  "https://apps.apple.com/se/app/riktiga-vykort/id444458799?l=sv",
+    IosImg: "https://com-integration.postnord.com/globalassets/icons/logos-and-badges/app_store_badge_se_rgb_blk.svg"
+  };
+
+
+
+const fileLocation = "https://com-integration.postnord.com/globalassets/global/prices/sv-findprice-1-PN.xlsx";
+
+const sendDirectUrl = "https://portal.postnord.com/skickadirekt/";
+
+const stampShopUrl = "https://shop.postnord.se/ebutik/default.aspx";
+
+// Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
+const { state, onChange } = createStore({
+  i18n: {
+    componentheading: '',
+    deliveryscopeheading: '',
+    resultlistheading: '',
+    sizeheading: '',
+    weightheading: '',
+    weightlabel: '',
+    maxweightlabel: '',
+    maxmeasurementlabel: '',
+    senddirectcta: '',
+    stampshopcta: '',
+    message: '',
+    servicePointHeader: '',
+    servicePointLink: '',
+    realPostcard: '',
+    realPostcardMobile: '',
+    ombudHeader: ''
+  },
+  market: {
+    currency: "",
+    country: "",
+    servicePoint: "",
+  }
+});
+
+const pnFindPriceResultCss = "pn-find-price-result .test{margin:3em 0}.resultcontent{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}";
+
+const PnfindPriceResult = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.item = null;
+    this.shownitems = [];
+    this.Usp1 = undefined;
+    this.Usp2 = undefined;
+    this.Usp3 = undefined;
+    this.description = [];
+    this.showMeasurement = false;
+    this.weightText = "";
+    this.linkId = '';
+    this.shopLabel = '';
+    this.shopUrl = '';
+    this.shopId = '';
+  }
+  componentWillLoad() {
+    this.composeItems();
+  }
+  composeItems() {
+    if (this.item.additionalusp) {
+      var x = this.item.additionalusp.split("/");
+      this.Usp1 = (x.length > 0) ? x[0] : null;
+      this.Usp2 = (x.length > 1) ? x[1] : null;
+      this.Usp3 = (x.length > 2) ? x[2] : null;
+    }
+    if (this.item.description) {
+      this.description = this.item.description.split("#bullet").filter(x => x !== "");
+    }
+    this.showMeasurement = (this.item.maxmått !== null) || (this.item.rulle !== null);
+    this.linkId = `${this.item.id}-${this.item.maxweight}-${this.item.sizecategory}-${this.item.name.toLocaleLowerCase().replace(/[^a-zA-Z0-9]/g, '')}`;
+    var showServicepointLink = (this.item.ombudpurchase === "Yes");
+    this.shopLabel = showServicepointLink ? state.i18n.ombudHeader : state.i18n.stampshopcta;
+    this.shopUrl = showServicepointLink ? state.market.servicePoint : stampShopUrl;
+    this.shopId = showServicepointLink ? '-servicepoint' : '-stampshop';
+  }
+  render() {
+    return (h(Host, null, h("pn-product-card", { "data-productid": this.item.id }, h("pn-illustration", { slot: "illustration", illustration: this.item.illustration }), h("div", { slot: "title" }, this.item.infopagelink ?
+      (h("h2", null, h("a", { href: this.item.infopagelink, target: "_blank" }, this.item.name))) :
+      (h("h2", null, this.item.name)), (this.item.highestrankusp === "Snabbast") ?
+      (h("pn-titletag", { slot: "Snabbast", icon: "bolt", color: "blue700" }, this.item.highestrankusp))
+      : (this.item.highestrankusp === "Billigast") ?
+        (h("pn-titletag", { slot: "Billigast", icon: "box-label", color: "green700" }, this.item.highestrankusp))
+        : null), h("div", { slot: "content" }, h("div", { class: "content" }, (this.item.description) ? (h("div", { class: "description" }, this.description.map((desc) => (h("li", null, desc))))) : null, (this.item.info) ? (h("div", { class: "description" }, this.item.info)) : null)), this.item.note ? (h("div", { slot: "note" }, h("p", null, this.item.note))) : null, this.item.additionalusp ? (h("div", { slot: "additionalUSP" }, this.Usp1 ? (h("span", null, this.Usp1)) : null, this.Usp2 ? (h("span", null, this.Usp2)) : null, this.Usp3 ? (h("span", null, this.Usp3)) : null)) : null, this.showMeasurement ?
+      (h("pn-product-card-info", { paket: this.item.maxmått, rulle: this.item.rulle })) : null, h("div", { slot: "cardprice" }, this.item.pricesenddirect ? (h("pn-product-card-price", { slot: "sendDirectPrice", label: state.i18n.senddirectcta, amount: this.item.pricesenddirect + '', currency: state.market.currency, url: sendDirectUrl, linkid: this.linkId + '-portal' })) : null, this.item.pricestamps ? ((this.item.name.toLocaleLowerCase() !== "riktiga vykort") ?
+      (h("pn-product-card-price", { slot: "stampPrice", label: this.shopLabel, amount: this.item.pricestamps + '', currency: state.market.currency, url: this.shopUrl, linkid: this.linkId + this.shopId })) :
+      (h("pn-product-card-price", { slot: "riktiga", label: state.i18n.realPostcard, amount: this.item.pricestamps + '', currency: state.market.currency, url: RealValues["WebUrl"], linkid: this.linkId + '-riktiga' }))) : null), h("div", { slot: "servicepoint" }, (this.item.showservicepointlink) ? (h("a", { href: state.market.servicePoint, target: "_blank" }, h("pn-icon", { symbol: "map-marker", color: "blue700" }), state.i18n.servicePointLink)) : null), h("div", { slot: "mobiledownload" }, (this.item.name.toLocaleLowerCase() === "riktiga vykort") ?
+      (h("div", { id: "riktiga" }, h("h4", null, state.i18n.realPostcardMobile), h("div", null, h("a", { href: RealValues["AndroidAppUrl"], target: "_blank" }, h("img", { class: "riktigaAndroidImg", src: RealValues["AndroidImg"] })), h("a", { href: RealValues["IosAppUrl"], target: "_blank" }, h("img", { class: "riktigaAppleImg", src: RealValues["IosImg"] }))))) : null))));
+  }
+  static get watchers() { return {
+    "item": ["composeItems"]
+  }; }
+  static get style() { return pnFindPriceResultCss; }
+}, [0, "pn-find-price-result", {
+    "item": [1040],
+    "shownitems": [16],
+    "Usp1": [1, "usp-1"],
+    "Usp2": [1, "usp-2"],
+    "Usp3": [1, "usp-3"],
+    "description": [16],
+    "showMeasurement": [4, "show-measurement"],
+    "weightText": [32],
+    "linkId": [32],
+    "shopLabel": [32],
+    "shopUrl": [32],
+    "shopId": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-find-price-result", "pn-product-card", "pn-product-card-info", "pn-product-card-price", "pn-titletag"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-find-price-result":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnfindPriceResult);
+      }
+      break;
+    case "pn-product-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pn-product-card-info":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pn-product-card-price":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "pn-titletag":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnfindPriceResult as P, state as a, defineCustomElement as d, fileLocation as f, sizeCategories as s, weights as w };

package/components/pn-find-price.d.ts

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