@postnord/pn-marketweb-components 2.3.12 → 2.3.13

package/components/pn-multi-formfield.js

@@ -0,0 +1,277 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { v as v4 } from './v4.js';
+
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing. The function also has a property 'clear' 
+ * that is a function which will clear the timer to prevent previously scheduled executions. 
+ *
+ * @source underscore.js
+ * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
+ * @param {Function} function to wrap
+ * @param {Number} timeout in ms (`100`)
+ * @param {Boolean} whether to execute at the beginning (`false`)
+ * @api public
+ */
+function debounce(func, wait, immediate){
+  var timeout, args, context, timestamp, result;
+  if (null == wait) wait = 100;
+
+  function later() {
+    var last = Date.now() - timestamp;
+
+    if (last < wait && last >= 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      if (!immediate) {
+        result = func.apply(context, args);
+        context = args = null;
+      }
+    }
+  }
+  var debounced = function(){
+    context = this;
+    args = arguments;
+    timestamp = Date.now();
+    var callNow = immediate && !timeout;
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
+    }
+
+    return result;
+  };
+
+  debounced.clear = function() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+  
+  debounced.flush = function() {
+    if (timeout) {
+      result = func.apply(context, args);
+      context = args = null;
+      
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+
+  return debounced;
+}
+// Adds compatibility for ES modules
+debounce.debounce = debounce;
+
+var debounce_1 = debounce;
+
+const pnMultiFormfieldCss = ".pn-multi-formfield{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}";
+
+const PnMultiFormField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.changed = createEvent(this, "changed", 7);
+    this.containerElm = null;
+    this.slotElm = null;
+    this.formFields = null;
+    this.formFieldTypes = ["input", "textarea", "select"];
+    this.additionalRowStartIndex = 2;
+    this.formFieldEvent = (e) => {
+      if (e.target.matches(`.${this.formFieldClassName}`)) {
+        ["change", "keyup"].forEach((eventName) => {
+          const debouncedAddValue = debounce_1.debounce(this.updateValues.bind(this, e.target), 1000);
+          e.target.addEventListener(eventName, debouncedAddValue);
+        });
+      }
+    };
+    this.formRow = [];
+    this.formValues = [];
+    this.elementToCopy = null;
+    this.fieldsPerRowCount = 0;
+    this.newRowStartIndex = 2;
+    this.originalLabelNames = [];
+    this.value = [];
+    this.formFieldClassName = "form-control";
+    this.formFieldOuterParentClassName = "formelement";
+  }
+  generateUniqueId() {
+    return v4();
+  }
+  componentDidLoad() {
+    this.init();
+  }
+  async init() {
+    this.addEventHandlers();
+    this.setDefaultValues();
+  }
+  addEventHandlers() {
+    this.hostElement.addEventListener("click", this.formFieldEvent);
+  }
+  setDefaultValues() {
+    var _a;
+    const labelElms = (_a = this.containerElm) === null || _a === void 0 ? void 0 : _a.querySelectorAll("label");
+    if (labelElms) {
+      this.fieldsPerRowCount = labelElms.length;
+      this.originalLabelNames = [...labelElms].map((label) => label.innerHTML);
+      const emptyValues = this.originalLabelNames.map((label) => {
+        const obj = { Name: label, Value: "" };
+        return obj;
+      });
+      this.formValues = [...emptyValues];
+      this.setHiddenValue();
+    }
+  }
+  setHiddenValue() {
+    var _a;
+    const hiddenField = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.querySelector(".hiddenValue");
+    if (hiddenField) {
+      hiddenField.value = JSON.stringify(this.formValues);
+    }
+  }
+  updateValues(field, e) {
+    var _a;
+    e.preventDefault();
+    const slotElm = field.closest(".pn-multi-formfield-slot");
+    const isSlotParent = !!slotElm;
+    let containerElm = isSlotParent ? slotElm : field.closest(".generated-parent");
+    if (containerElm) {
+      const formFields = (_a = [...containerElm === null || containerElm === void 0 ? void 0 : containerElm.querySelectorAll(`.${this.formFieldClassName}`)]) === null || _a === void 0 ? void 0 : _a.filter((x) => this.formFieldTypes.includes(x.nodeName.toLowerCase()));
+      formFields === null || formFields === void 0 ? void 0 : formFields.map((elm) => {
+        const fieldElm = elm;
+        const closestLabelElm = fieldElm.closest("div").querySelector("label");
+        const label = (closestLabelElm === null || closestLabelElm === void 0 ? void 0 : closestLabelElm.dataset.label) || (closestLabelElm === null || closestLabelElm === void 0 ? void 0 : closestLabelElm.innerHTML);
+        const newItem = { Name: label, Value: fieldElm.value };
+        this.setFormValues(newItem);
+      });
+    }
+    this.setHiddenValue();
+  }
+  setFormValues(obj) {
+    const item = this.formValues.find((item) => item.Name === obj.Name);
+    if (item === undefined) {
+      this.formValues.push(obj);
+    }
+    if (item !== undefined) {
+      item.Value = obj.Value;
+    }
+    this.formValues = [...this.formValues];
+    this.value = this.formValues;
+    this.changed.emit(this.formValues);
+  }
+  addRow(e) {
+    if (e.type === "click") {
+      this.addFormElements();
+    }
+  }
+  addFormElements() {
+    if (!this.elementToCopy) {
+      const elm = this.hostElement.querySelector(".pn-multi-formfield");
+      const clone = elm.cloneNode(true);
+      this.elementToCopy = clone;
+    }
+    const setFormElements = [
+      ...this.elementToCopy.querySelectorAll(`.${this.formFieldOuterParentClassName}`),
+    ].map((elm) => {
+      const labelElm = elm.querySelector("label");
+      const fieldElm = elm.querySelector(`.${this.formFieldClassName}`);
+      const newId = this.generateUniqueId();
+      labelElm.dataset.label = `${labelElm.innerText} ${this.newRowStartIndex}`;
+      labelElm.setAttribute("for", newId);
+      fieldElm.setAttribute("id", newId);
+      fieldElm.setAttribute("name", `__${newId}`);
+      return elm;
+    });
+    this.newRowStartIndex++;
+    const parentId = this.generateUniqueId();
+    const parentElm = document.createElement("div");
+    parentElm.setAttribute("id", parentId);
+    parentElm.setAttribute("class", "generated-parent");
+    setFormElements.map((clone) => {
+      parentElm.innerHTML += clone.innerHTML;
+    });
+    parentElm.appendChild(this.createDeleteButton());
+    this.containerElm.appendChild(parentElm);
+  }
+  createDeleteButton() {
+    const buttonElm = document.createElement("pn-button");
+    buttonElm.onclick = (e) => this.deleteRow(e);
+    buttonElm.setAttribute("icon-only", "true");
+    buttonElm.setAttribute("icon", "minus");
+    buttonElm.setAttribute("appearance", "warning");
+    buttonElm.appendChild(document.createTextNode(`X`));
+    return buttonElm;
+  }
+  deleteRow(e) {
+    e.preventDefault();
+    const targetElm = e.currentTarget;
+    const parentElm = targetElm.parentElement;
+    const allFieldElms = parentElm.querySelectorAll(`.${this.formFieldClassName}`);
+    allFieldElms.forEach((elm) => {
+      elm.remove();
+    });
+    parentElm.remove();
+    this.newRowStartIndex--;
+    this.formValues = [...this.formValues.slice(0, this.fieldsPerRowCount)];
+    const allGeneratedElms = [...this.containerElm.querySelectorAll(".generated-parent")];
+    allGeneratedElms.map((elm, index) => {
+      const allLabelElms = [...elm.querySelectorAll("label")];
+      allLabelElms.map((labelElm) => {
+        const labelParts = this.getLabelParts(labelElm.dataset.label);
+        labelElm.dataset.label = this.getLabelName(labelParts[0], index);
+        const associatedField = labelElm.parentElement.querySelector(`.${this.formFieldClassName}`);
+        const updateItem = { Name: labelElm.dataset.label, Value: associatedField.value };
+        this.setFormValues(updateItem);
+      });
+    });
+    this.setHiddenValue();
+  }
+  getLabelParts(label) {
+    const part1 = label.substring(0, label.lastIndexOf(" "));
+    const part2 = label.substring(label.lastIndexOf(" ") + 1);
+    const parts = [part1, part2];
+    return parts;
+  }
+  getLabelName(name, index) {
+    return `${name} ${index + this.additionalRowStartIndex}`;
+  }
+  render() {
+    return (h(Host, null, h("div", { ref: (el) => (this.containerElm = el), class: "pn-multi-formfield" }, h("div", { ref: (el) => (this.slotElm = el), class: "pn-multi-formfield-slot" }, h("slot", null))), h("pn-button", { "icon-only": "true", "aria-label": "Add", icon: "plus", onClick: (e) => this.addRow(e) }, "+")));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnMultiFormfieldCss; }
+}, [4, "pn-multi-formfield", {
+    "value": [1040],
+    "formFieldClassName": [1, "form-field-class-name"],
+    "formFieldOuterParentClassName": [1, "form-field-outer-parent-class-name"],
+    "formRow": [32],
+    "formValues": [32],
+    "elementToCopy": [32],
+    "fieldsPerRowCount": [32],
+    "newRowStartIndex": [32],
+    "originalLabelNames": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-multi-formfield"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-multi-formfield":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnMultiFormField);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnMultiFormfield = PnMultiFormField;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnMultiFormfield, defineCustomElement };

package/components/pn-parcel-tracker.d.ts

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

package/components/pn-parcel-tracker.js

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './pn-marketweb-input2.js';
+
+const pnParcelTrackerCss = "pn-spotlight .pn-spotlight__container:has(pn-parcel-tracker) [slot=mobile-heading]{color:#005D92}.pn-spotlight__container__wrapper__content [slot=content]:has(pn-parcel-tracker){padding-left:2rem}pn-parcel-tracker{width:100%}pn-parcel-tracker .pn-parcel-tracker__container form{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;gap:1.6rem}pn-parcel-tracker .pn-parcel-tracker__container form .pn-parcel-tracker__container__heading{color:#005D92;font-weight:500;margin-bottom:0}@media screen and (max-width: 768px){pn-parcel-tracker .pn-parcel-tracker__container form .pn-parcel-tracker__container__heading{display:none}}@media screen and (min-width: 1640px){pn-parcel-tracker .pn-parcel-tracker__container form .pn-parcel-tracker__container__heading{font-size:2.4rem;font-weight:700}}pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{-ms-flex-positive:1;flex-grow:1;max-width:80%}@media screen and (min-width: 768px){pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{max-width:50%}}@media screen and (min-width: 992px){pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{max-width:45%}}@media screen and (min-width: 1640px){pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{max-width:35%}}pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input input{border-radius:6.4rem}";
+
+const PnSpotlight = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.formActionUrl = null;
+    this.heading = 'Track your parcel';
+    this.buttonLabel = null;
+    this.locale = 'en';
+    this.placeholder = 'Enter shipment ID';
+    this.inputName = 'shipmentID';
+    this.currentWidth = window.innerWidth;
+  }
+  handleViewportSizeChange(event) {
+    this.currentWidth = event.target.innerWidth;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "pn-parcel-tracker__container" }, h("form", { method: "GET", action: this.formActionUrl }, h("h3", { class: "pn-parcel-tracker__container__heading" }, this.heading), h("pn-marketweb-input", { name: this.inputName, placeholder: this.placeholder }), h("pn-button", { type: "submit", icon: "search", "icon-only": this.currentWidth < 412 }, this.currentWidth >= 412 && this.buttonLabel)))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnParcelTrackerCss; }
+}, [0, "pn-parcel-tracker", {
+    "formActionUrl": [1, "form-action-url"],
+    "heading": [1],
+    "buttonLabel": [1, "button-label"],
+    "locale": [1],
+    "placeholder": [1],
+    "inputName": [1, "input-name"],
+    "currentWidth": [32]
+  }, [[9, "resize", "handleViewportSizeChange"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-parcel-tracker", "pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-parcel-tracker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnSpotlight);
+      }
+      break;
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnParcelTracker = PnSpotlight;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnParcelTracker, defineCustomElement };

package/components/pn-pex-pricefinder.d.ts

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

package/components/pn-pex-pricefinder.js

@@ -0,0 +1,156 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './pn-marketweb-input2.js';
+
+const translations = {
+  'sv': {
+    "heading": "Prisindikation med PEX Bud",
+    "labelFrom": "Från postkod",
+    "labelTo": "Till postkod",
+    "zipPlaceholder": "Ex. 12831",
+    "labelWeight": "Vikt (i kilo)",
+    "weightPlaceholder": "Ex. 1000",
+    "labelWhen": "När",
+    "submitButtonText": "Beräkna pris"
+  },
+  'en': {
+    "heading": "Calculate price with PEX Bud",
+    "labelFrom": "From zip",
+    "labelTo": "To zip",
+    "zipPlaceholder": "Ex. 12831",
+    "labelWeight": "Weight (in kilo)",
+    "weightPlaceholder": "Ex. 1000",
+    "labelWhen": "When",
+    "submitButtonText": "Calculate price"
+  }
+};
+
+const pnPexPricefinderCss = ".pex-pricefinder-top{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.pex-pricefinder-top pn-illustration{width:5.5rem;height:5.5rem;margin-right:1.6rem}.pex-pricefinder-form{margin:1.6rem 0 0 0;padding:0;border:0}.pex-pricefinder-form fieldset{margin:0;padding:0;border:0}.pex-pricefinder-form fieldset+fieldset{margin-top:1.6rem}.pex-pricefinder-form fieldset>div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:1em}.pex-pricefinder-form fieldset>div>*{-ms-flex-positive:1;flex-grow:1;width:100%}.pex-pricefinder-form pn-button{-ms-flex-item-align:end;align-self:end;margin-left:auto}.pex-pricefinder-form .datepicker{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}.pex-pricefinder-form .datepicker label{margin-bottom:0.4rem;color:#5E554A;font-size:0.875em;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:end;align-items:flex-end;cursor:pointer;-webkit-transition:color 0.2s;transition:color 0.2s}.pex-pricefinder-form .datepicker pn-date-picker{width:100%}.pex-pricefinder-response{margin-top:2.4rem;text-align:center;font-size:2.4em}";
+
+const PnPexPricefinder$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.language = "sv";
+    this.currency = "Kr";
+    this.apiUrl = "/api/pex/order";
+    this.i18n = translations.sv;
+    this.fromzip = null;
+    this.tozip = null;
+    this.weight = 1;
+    this.when = '';
+    this.response = null;
+  }
+  componentWillLoad() {
+    this.init();
+  }
+  async init() {
+    this.setInitialTime();
+    this.checkParameters();
+    this.setLanguage();
+  }
+  setInitialTime() {
+    const initialTime = (new Date());
+    initialTime.setHours(initialTime.getHours() + 1);
+    initialTime.setMinutes(0);
+    const splitTime = initialTime.toLocaleString('sv', { timeZoneName: 'short' }).split(' ');
+    this.when = `${splitTime[0]}T${splitTime[1].substring(0, 5)}`;
+  }
+  checkParameters() {
+    const params = new URLSearchParams(window.location.href);
+    if (!params) {
+      return;
+    }
+    const paramKeys = ['fromzip', 'tozip', 'weight', 'when'];
+    paramKeys.forEach((key) => {
+      if (params.get(key)) {
+        this[key] = params.get(key);
+      }
+    });
+  }
+  setLanguage() {
+    if (translations[this.language]) {
+      this.i18n = translations[this.language];
+    }
+  }
+  onSubmit(e) {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const requestQuery = this.compileRequestQuery(formData);
+    this.fetchResult(requestQuery);
+  }
+  compileRequestQuery(formData) {
+    let query = {
+      "from": formData.get("fromzip"),
+      "to": formData.get("tozip"),
+      "weight": formData.get("weight"),
+      "when": formData.get("when")
+    };
+    if (!query.when) {
+      query.when = this.hostElement.querySelector('input.date-input').value;
+    }
+    if (!formData.get("fromzip") || !formData.get("tozip") || !formData.get("weight")) {
+      console.error("Form data is not compliant");
+      return;
+    }
+    return query;
+  }
+  async fetchResult(query) {
+    this.response = null;
+    const params = new URLSearchParams(query);
+    const req = await (fetch(`${this.apiUrl}?${params.toString()}`, {
+      method: 'get',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).catch(this.onFetchError.bind(this)));
+    let response = await (req.json().catch(this.onFetchError.bind(this)));
+    if (!response) {
+      response = await (await import('./mockresponse.js')).default;
+    }
+    if (response) {
+      this.response = response;
+    }
+  }
+  onFetchError(error) {
+    console.error('onFetchError(error', error);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "pex-pricefinder-top" }, h("pn-illustration", { illustration: "PEX-truck" }), h("h2", null, this.i18n.heading)), h("form", { method: "get", action: "", class: "pex-pricefinder-form", onSubmit: this.onSubmit.bind(this) }, h("fieldset", null, h("div", null, h("pn-input", { type: "number", label: this.i18n.labelFrom, inputid: "fromzip", name: "fromzip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.fromzip }), h("pn-input", { type: "number", label: this.i18n.labelTo, inputid: "tozip", name: "tozip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.tozip }))), h("fieldset", null, h("div", null, h("pn-input", { type: "number", label: this.i18n.labelWeight, inputid: "weight", name: "weight", placeholder: this.i18n.weightPlaceholder, required: true, value: this.weight }), h("div", { class: "datepicker" }, h("label", { htmlFor: "when" }, this.i18n.labelWhen), h("pn-marketweb-input", { inputid: "when", name: "when", type: "datetime-local", min: (new Date()).toISOString().split('T')[0], value: this.when })))), h("fieldset", null, h("div", null, h("pn-button", { type: "submit" }, this.i18n.submitButtonText)))), this.response ? (h("div", { class: "pex-pricefinder-response" }, h("strong", null, this.response.data.value, " ", this.currency))) : null));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnPexPricefinderCss; }
+}, [0, "pn-pex-pricefinder", {
+    "language": [1],
+    "currency": [1],
+    "apiUrl": [1, "api-url"],
+    "i18n": [32],
+    "fromzip": [32],
+    "tozip": [32],
+    "weight": [32],
+    "when": [32],
+    "response": [32]
+  }, [[0, "language", "setLanguage"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-pex-pricefinder", "pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-pex-pricefinder":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnPexPricefinder$1);
+      }
+      break;
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnPexPricefinder = PnPexPricefinder$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnPexPricefinder, defineCustomElement };

package/components/pn-product-card-info.d.ts

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

package/components/pn-product-card-info.js

@@ -0,0 +1,6 @@
+import { P as PnProductCardInfo$1, d as defineCustomElement$1 } from './pn-product-card-info2.js';
+
+const PnProductCardInfo = PnProductCardInfo$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnProductCardInfo, defineCustomElement };

package/components/pn-product-card-info2.js

@@ -0,0 +1,45 @@
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+
+const pnProductCardInfoCss = "pn-product-card-info{-ms-flex-item-align:center;align-self:center}.cardinfocontent{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;font-size:0.875em;gap:1.6rem}@media screen and (min-width: 36em){.cardinfocontent{-ms-flex-direction:row;flex-direction:row}}.cardinfocontent>div p{margin:0.25em 0.25em 0 0}.cardinfocontent-item{margin-top:0.5em}[slot=formatPre]{font-family:\"PostNordSans\", \"Verdana\";margin:0.5em 3em 0 0}[slot=formatPre]>strong{font-weight:bold}.cardinfoprice{display:-ms-flexbox;display:flex;font-size:1em;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}";
+
+const PnProductCardInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.rulle = undefined;
+    this.paket = undefined;
+    this.label = undefined;
+    this.text = undefined;
+  }
+  render() {
+    return (this.label) ? (h(Host, null, h("div", { class: "cardinfocontent" }, (this.text) ? (h("pre", { slot: "formatPre" }, this.text)) : null))) : (h(Host, null, h("div", { class: "cardinfocontent" }, (this.paket) ? (h("div", { class: "cardinfocontent-item" }, h("strong", null, "Maxm\u00E5tt"), this.paket.split("/").map((item) => ((item.split(":").length > 1) ?
+      (h("p", null, h("strong", null, item.split(":")[0] + ": "), " ", item.split(":")[1])) :
+      (h("p", null, item)))))) : null, (this.rulle) ?
+      (h("div", { class: "cardinfocontent-item" }, h("strong", null, "Rulle"), this.rulle.split("/").map((item) => ((item.split(":").length > 0) ?
+        h("p", null, h("strong", null, item.split(":")[0] + ": "), " ", item.split(":")[1]) :
+        h("p", null, item))))) : null)));
+  }
+  static get style() { return pnProductCardInfoCss; }
+}, [0, "pn-product-card-info", {
+    "rulle": [1],
+    "paket": [1],
+    "label": [1],
+    "text": [1]
+  }]);
+h("pn-icon", { symbol: "align-center", small: "false", color: "black" });
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-product-card-info"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-product-card-info":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnProductCardInfo);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnProductCardInfo as P, defineCustomElement as d };

package/components/pn-product-card-price.d.ts

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

package/components/pn-product-card-price.js

@@ -0,0 +1,6 @@
+import { P as PnProductCardPrice$1, d as defineCustomElement$1 } from './pn-product-card-price2.js';
+
+const PnProductCardPrice = PnProductCardPrice$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnProductCardPrice, defineCustomElement };

package/components/pn-product-card-price2.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnProductCardPriceCss = "pn-product-card-price{margin-top:1rem;white-space:nowrap;text-align:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-product-card-price span:last-child{display:inline-block;margin-left:0.2em}pn-product-card-price+pn-product-card-price{margin-right:0}pn-product-card-price pn-icon{display:inline-block;-ms-flex-item-align:center;align-self:center}pn-product-card-price .price{font-size:2.5em;font-weight:bold;-ms-flex-order:1;order:1}pn-product-card-price pn-button{min-width:12.8em;font-size:1.25;-ms-flex-order:2;order:2}@media screen and (min-width: 48em){pn-product-card-price pn-button{-ms-flex-order:3;order:3;margin-bottom:1.6rem}}pn-product-card-price p{font-weight:lighter;font-size:0.875em;-ms-flex-item-align:center;align-self:center;margin-top:0.8rem;-ms-flex-order:3;order:3}@media screen and (min-width: 48em){pn-product-card-price p{-ms-flex-order:2;order:2}}";
+
+const PnProductCardPrice = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.label = undefined;
+    this.amount = undefined;
+    this.currency = undefined;
+    this.note = undefined;
+    this.url = undefined;
+    this.service = undefined;
+    this.linkid = undefined;
+  }
+  render() {
+    if (!this.amount) {
+      return;
+    }
+    return (this.url) ? (h(Host, { id: this.linkid }, h("div", { class: "price" }, (this.amount) ? (h("span", null, this.amount)) : null, (this.currency) ? (h("span", null, " " + this.currency)) : null), (this.note) ? (h("p", null, this.note)) : null, (this.label) ? (h("pn-button", { id: 'pricecta-' + this.linkid, small: "true", icon: "open-in-new", appearance: "light", href: this.url, target: "_blank" }, this.label)) : null)) : (h(Host, null, h("div", { class: "price" }, (this.amount) ? (h("span", null, this.amount)) : null, (this.currency) ? (h("span", null, this.currency)) : null)));
+  }
+  static get style() { return pnProductCardPriceCss; }
+}, [0, "pn-product-card-price", {
+    "label": [1],
+    "amount": [1],
+    "currency": [1],
+    "note": [1],
+    "url": [1],
+    "service": [1],
+    "linkid": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-product-card-price"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-product-card-price":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnProductCardPrice);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnProductCardPrice as P, defineCustomElement as d };

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

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

package/components/pn-product-card.js

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