@postnord/pn-marketweb-components 1.0.49-beta4 → 2.0.1

package/collection/components/input/{pn-filter-search/pn-filter-search.js → pn-marketweb-search/pn-marketweb-search.js}

@@ -1,11 +1,12 @@
-import { Component, Prop, h, Host, Event, Element, Listen } from "@stencil/core";
-export class PnFilterSearch {
+import { Component, Prop, h, Host, Event, Element, Listen, State } from "@stencil/core";
+export class PnMarketwebSearch {
   constructor() {
     this.disabled = false;
     this.placeholder = null;
     this.inputid = null;
     this.name = null;
     this.autocomplete = null;
+    this.list = null;
     this.value = null;
     /** Label for the button */
     this.label = null;
@@ -15,6 +16,9 @@ export class PnFilterSearch {
     this.button = '';
     /** Light instead of dark search button */
     this.light = false;
+    this.suggestionObserver = null;
+    this.hasClonedInput = false;
+    this.listSuggestion = [];
   }
   inputHandler() {
     this.update.emit(this.value);
@@ -46,10 +50,37 @@ export class PnFilterSearch {
       classNames += `button-${this.button} `;
     return classNames;
   }
+  componentWillRender() {
+    this.cloneListContent();
+    this.autocompleteEventBinding();
+  }
+  onSuggestionUpdate() {
+    this.cloneListContent();
+  }
+  autocompleteEventBinding() {
+    if (this.suggestionObserver !== null || !this.list || (!this.hostElement) || !document.getElementById(this.list)) {
+      return;
+    }
+    const targetNode = document.getElementById(this.list);
+    this.suggestionObserver = new MutationObserver(this.onSuggestionUpdate.bind(this));
+    this.suggestionObserver.observe(targetNode, { attributes: true, childList: true, subtree: true });
+  }
+  cloneListContent() {
+    if (!this.list || (!this.hostElement) || !document.getElementById(this.list)) {
+      return;
+    }
+    const options = [...document.getElementById(this.list).querySelectorAll('option')];
+    this.listSuggestion = options.map((item) => {
+      if (item.hasAttribute('value')) {
+        return item.getAttribute('value');
+      }
+      return item.innerText;
+    });
+  }
   render() {
-    return (h(Host, { class: this.getClassNames() },
-      h("div", { class: "input-container" },
-        h("input", { type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onKeyDown: (e) => this.emitSearch(e), onInput: (e) => this.setVal(e) }),
+    return (h(Host, null,
+      h("div", { class: `input-container ${this.getClassNames()}`, "data-haslist": (this.list !== null) + '' },
+        h("input", { type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, list: this.list, onKeyDown: (e) => this.emitSearch(e), onInput: (e) => this.setVal(e) }),
         h("div", { class: "button-container" },
           (this.button === 'none' || this.button === 'icon-inline') &&
             h("button", { class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: (e) => this.emitSearch(e), "aria-label": "search", title: "search" },
@@ -59,15 +90,19 @@ export class PnFilterSearch {
               h("pn-icon", { symbol: "close-small", color: "blue700" })),
           this.button === 'none' || this.button === 'icon-inline' && h("pn-spinner", null))),
       (this.button !== 'none' && this.button !== 'icon-inline') &&
-        h("pn-button", { onClick: (e) => this.emitSearch(e), loading: this.loading, icon: "search", appearance: this.light ? 'light' : 'dark', "icon-only": this.button === 'icon' }, this.label)));
+        h("pn-button", { onClick: (e) => this.emitSearch(e), loading: this.loading, icon: "search", appearance: this.light ? 'light' : 'dark', "icon-only": this.button === 'icon' }, this.label),
+      (this.list) &&
+        h("datalist", { id: this.list }, this.listSuggestion.map((item) => {
+          return (h("option", null, item));
+        }))));
   }
-  static get is() { return "pn-filter-search"; }
+  static get is() { return "pn-marketweb-search"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["pn-filter-search.scss"]
+    "$": ["pn-marketweb-search.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["pn-filter-search.css"]
+    "$": ["pn-marketweb-search.css"]
   }; }
   static get properties() { return {
     "disabled": {
@@ -160,6 +195,24 @@ export class PnFilterSearch {
       "reflect": false,
       "defaultValue": "null"
     },
+    "list": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "list",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "value": {
       "type": "string",
       "mutable": false,
@@ -251,6 +304,11 @@ export class PnFilterSearch {
       "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "suggestionObserver": {},
+    "hasClonedInput": {},
+    "listSuggestion": {}
+  }; }
   static get events() { return [{
       "method": "search",
       "name": "search",

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search-store.js

@@ -0,0 +1,9 @@
+import { createStore } from "@stencil/store";
+// Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
+const { state, onChange } = createStore({
+  searchValue: '',
+  autocompleteSuggestions: {},
+  requestAbortController: new AbortController()
+});
+export { state, onChange };
+export default state;

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search.js

@@ -1,4 +1,5 @@
-import { Component, Prop, h, Element } from "@stencil/core";
+import { Component, Prop, h, Element, State } from "@stencil/core";
+import { state, onChange } from "./pn-marketweb-siteheader-search-store";
 export class PnMarketwebSiteheaderSearch {
   constructor() {
     // Display option, show only link
@@ -7,22 +8,76 @@ export class PnMarketwebSiteheaderSearch {
     this.hideSearch = false;
     // Search data
     this.search = {};
+    // Is this the primary instance?
+    this.primary = false;
+    // Autocomplete options
+    this.autoCompleteOptions = [];
+  }
+  onSearchValueUpdate() {
+    this.getAutocomplete(state.searchValue);
+  }
+  async getAutocomplete(prefix) {
+    if (!this.search.AutocompleteEndpoint || (prefix.length < 2)) {
+      this.autoCompleteOptions = [];
+      return;
+    }
+    if (state.autocompleteSuggestions[prefix]) {
+      this.setAutocompleteSuggestions(state.autocompleteSuggestions[prefix]);
+      return;
+    }
+    const req = await fetch(`${this.search.AutocompleteEndpoint}?prefix=${prefix}&size=10`, { signal: state.requestAbortController.signal }).catch((e) => {
+      console.log('Unable to fetch autocomplete suggestions', e);
+    });
+    if (!req) {
+      return;
+    }
+    const data = await req.json();
+    if (!data || !data.hits || !data.hits.length) {
+      return;
+    }
+    const suggestions = data.hits.map((item) => {
+      return item.query;
+    });
+    // Store query in store
+    state.autocompleteSuggestions[prefix] = suggestions;
+    this.setAutocompleteSuggestions(suggestions);
+  }
+  setAutocompleteSuggestions(suggestions) {
+    if (typeof suggestions !== "object" || typeof suggestions.length !== "number" || suggestions.length === 0) {
+      return;
+    }
+    this.autoCompleteOptions = suggestions;
   }
   componentWillLoad() {
+    onChange("searchValue", () => {
+      this.onSearchValueUpdate();
+    });
+  }
+  componentDidRender() {
+    const inputSearchElm = this.hostElement.querySelector('pn-search-field input:not([list])');
+    if (inputSearchElm && this.search.AutocompleteEndpoint) {
+      inputSearchElm.setAttribute("list", "siteheader-search-autocomplete");
+    }
   }
   render() {
     if (!this.search.formActionUrl || this.hideSearch) {
       return;
     }
+    const autocompleteAttribute = (this.search.AutocompleteEndpoint) ? { "list": "siteheader-search-autocomplete" } : {};
     return (h("div", { class: "siteheader-search" }, (this.showOnlyLink) ? (h("a", { href: this.search.formActionUrl, title: this.i18n.searchlabel },
       h("pn-button", { appearance: "light", icon: "search" }))) :
       (h("form", { method: "get", action: this.search.formActionUrl, role: "search" },
-        h("pn-search-field", { label: this.i18n.searchlabel, name: "q", button: "icon", onSearch: () => {
+        h("pn-search-field", Object.assign({ label: this.i18n.searchlabel, name: "q", button: "icon" }, autocompleteAttribute, { onUpdate: (e) => {
+            state.searchValue = e.detail;
+          }, onSearch: () => {
             const form = this.hostElement.querySelector('form');
             if (form) {
               form.submit();
             }
-          }, placeholder: this.i18n.searchplaceholder })))));
+          }, placeholder: this.i18n.searchplaceholder })),
+        this.primary && this.search.AutocompleteEndpoint ? (h("datalist", { id: "siteheader-search-autocomplete" }, this.autoCompleteOptions.map((item) => {
+          return (h("option", null, item));
+        }))) : null))));
   }
   static get is() { return "pn-marketweb-siteheader-search"; }
   static get originalStyleUrls() { return {
@@ -105,7 +160,28 @@ export class PnMarketwebSiteheaderSearch {
         "text": ""
       },
       "defaultValue": "{}"
+    },
+    "primary": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "primary",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "autoCompleteOptions": {}
+  }; }
   static get elementRef() { return "hostElement"; }
 }

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.js

@@ -26,6 +26,8 @@ export class PnMarketwebSiteheader {
     this.hideSearch = false;
     /** Hides the login if set to true*/
     this.hideLogin = false;
+    /** Autocomplete endpoint */
+    this.AutocompleteEndpoint = "";
     /** Forward session to backend */
     this.sessionForward = false;
     /** If the component should use cached requests */
@@ -38,7 +40,7 @@ export class PnMarketwebSiteheader {
     // Menu state
     this.menuItems = [];
     // Search
-    this.search = {};
+    this.search = { AutocompleteEndpoint: this.AutocompleteEndpoint };
     // Site selector
     this.siteSelector = null;
     // Language Selector
@@ -152,7 +154,7 @@ export class PnMarketwebSiteheader {
       });
     }
     // Set search
-    this.search = data.search;
+    this.search = Object.assign(Object.assign({}, data.search), { AutocompleteEndpoint: this.AutocompleteEndpoint });
     // Set site selector
     this.siteSelector = data.siteSelectorViewModel;
     // Set language selector
@@ -293,7 +295,7 @@ export class PnMarketwebSiteheader {
                     (this.gotData && ((_f = this.siteSelector) === null || _f === void 0 ? void 0 : _f.siteSelections)) && this.siteSelector.siteSelections.map((site) => h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.pageLink, newwindow: site.openInNewWindow })))),
               h("div", { slot: "top", class: "siteheader-menu-top" },
                 h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, i18n: this.i18n })))))),
-          h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n })))));
+          h("pn-marketweb-siteheader-search", { primary: true, search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n })))));
   }
   static get is() { return "pn-marketweb-siteheader"; }
   static get originalStyleUrls() { return {
@@ -465,6 +467,24 @@ export class PnMarketwebSiteheader {
       "reflect": true,
       "defaultValue": "false"
     },
+    "AutocompleteEndpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Autocomplete endpoint"
+      },
+      "attribute": "autocomplete-endpoint",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
     "sessionForward": {
       "type": "boolean",
       "mutable": false,

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.stories.js

@@ -68,12 +68,12 @@ Content that is higher than 100% viewport height
 -->
 `;
 };
-
+//   autocomplete-endpoint="http://localhost:51444/find_v2/_autocomplete"
 export const Primary = PrimaryTemplate.bind({});
 Primary.args = {
-  market : "tpl",
+  market : "se",
   language: 'sv',
-  endpoint: 'https://tpl-preproduction.postnord.com'
+  endpoint: 'http://localhost:51444'
 }
 
 

package/collection/components/widgets/pn-find-price/img/clouds.svg

@@ -0,0 +1,5 @@
+<svg width="278" height="55" viewBox="0 0 278 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M247.355 49.6815C247.694 52.479 249.722 54.6261 252.181 54.6261H272.926C275.62 54.6261 277.798 52.0522 277.798 48.8686V48.8008C277.798 45.6173 275.62 43.0433 272.926 43.0433H270.537C269.608 39.2439 266.846 36.473 263.585 36.473H259.717C259.373 31.841 256.101 28.2092 252.124 28.2092C248.146 28.2092 244.88 31.841 244.53 36.473H242.095C238.083 36.473 234.816 40.6726 234.816 45.8205V49.6815H247.355Z" fill="#E0F8FF"/>
+<path d="M12.0391 46.1022C12.3176 48.5569 14.0867 50.4373 16.2421 50.4373H34.5807C36.9304 50.4373 38.8216 48.202 38.8216 45.4248V45.3571C38.8216 42.5799 36.9304 40.3446 34.5807 40.3446H32.4684C31.6678 37.0209 29.227 34.5872 26.3283 34.5872H22.9179C22.6004 30.5597 19.7327 27.4071 16.2421 27.4071C12.7514 27.4071 9.88371 30.5597 9.56622 34.5872H7.41658C3.86346 34.5872 0.998047 38.2448 0.998047 42.7154V46.1022H12.0391Z" fill="#E0F8FF"/>
+<path d="M131.056 26.5864C131.449 30.0423 133.948 32.6895 136.991 32.6895H162.891C166.209 32.6895 168.88 29.5426 168.88 25.6328V25.5375C168.88 21.6277 166.209 18.4808 162.891 18.4808H159.907C158.777 13.8015 155.33 10.3753 151.236 10.3753H146.42C145.971 4.70533 141.921 0.26709 136.991 0.26709C132.062 0.26709 128.012 4.70533 127.563 10.3753H124.528C119.51 10.3753 115.463 15.5247 115.463 21.8184V26.5864H131.056Z" fill="#E0F8FF"/>
+</svg>

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

@@ -30,7 +30,7 @@ export class PnfindPriceResult {
           " "),
         (this.item.highestrankusp) ?
           (this.item.highestrankusp === "Billigast") ?
-            (h("span", { slot: "Biligast" },
+            (h("span", { slot: "Billigast" },
               this.item.highestrankusp,
               h("pn-icon", { symbol: "box-label", small: "false", color: "green700" })))
             : (h("span", { slot: "Snabbast" },
@@ -50,7 +50,7 @@ export class PnfindPriceResult {
       h("div", { slot: "cardprice" },
         this.item.priceagent ? (h("pn-product-card-price", { slot: "price", label: "", amount: this.item.priceagent + '', currency: state.market.currency, url: "https://shop.postnord.se/ebutik/default.aspx", service: this.item.name + "-eshop" })) : null,
         this.item.pricesenddirect ? (h("pn-product-card-price", { slot: "sendDirectPrice", label: state.i18n.senddirectcta, amount: this.item.pricesenddirect + '', currency: state.market.currency, url: "https://portal.postnord.com/skickadirekt/", service: this.item.name + "-portal" })) : null,
-        this.item.pricestamps ? (h("pn-product-card-price", { slot: "stampPrice", label: state.i18n.stampshopcta, amount: this.item.pricestamps + '', currency: state.market.currency, url: "https://shop.postnord.se/ebutik/default.aspx", service: this.item.name + "-eshop", note: state.i18n.message })) : null))));
+        this.item.pricestamps ? (h("pn-product-card-price", { slot: "stampPrice", label: state.i18n.stampshopcta, amount: this.item.pricestamps + '', currency: state.market.currency, url: "https://shop.postnord.se/ebutik/default.aspx", service: this.item.name + "-eshop" })) : null))));
   }
   static get is() { return "pn-find-price-result"; }
   static get originalStyleUrls() { return {

package/collection/components/widgets/pn-find-price/pn-find-price-store.js

@@ -4,7 +4,6 @@ const { state, onChange } = createStore({
   i18n: {
     componentheading: '',
     deliveryscopeheading: '',
-    sizeheading: '',
     resultlistheading: '',
     weightlabel: '',
     maxweightlabel: '',

package/collection/components/widgets/pn-find-price/pn-find-price-translations.js

@@ -2,7 +2,6 @@ export const translations = {
   'sv': {
     'componentheading': 'Våra priser och villkor för inrikesförsändelser för dig som direktbetalande kund?',
     'deliveryscopeheading': 'Endast leveranser inom Sverige',
-    'sizeheading': 'Uppskatta storlek och vikt på din försändelse',
     'resultlistheading': 'Några bra alternativ för dig',
     'weightlabel': 'Vikt',
     'maxweightlabel': 'Maxvikt',
@@ -11,12 +10,11 @@ export const translations = {
     'stampshopcta': 'Beställ fysiska frimärken',
     'message': '*Vid köp hos valfritt ombud',
     'servicePointHeader': 'Eller hitta närmaste serviceställe',
-    'servicePointLink': 'Sök brevlåda eller serviceställe'
+    'servicePointLink': 'Sök serviceställe eller brevlåda'
   },
   'en': {
     'componentheading': 'Our prices and terms and conditions for domestic shipments for you as a direct paying customer',
     'deliveryscopeheading': 'Deliveries within Sweden only',
-    'sizeheading': 'Estimate the size and weight of your shipment',
     'resultlistheading': 'Some suitable options for you',
     'weightlabel': 'Weight',
     'maxweightlabel': 'Max weight',
@@ -30,7 +28,6 @@ export const translations = {
   'da': {
     'componentheading': 'Vad vill du skicka?',
     'deliveryscopeheading': 'Kun leveringer indenfor Sverige',
-    'sizeheading': 'How much does it weigh?',
     'resultlistheading': 'Some suitable options for you',
     'weightlabel': 'Vægt',
     'maxweightlabel': 'Max vægt',
@@ -41,7 +38,6 @@ export const translations = {
   'no': {
     'componentheading': 'Vad vill du skicka?',
     'deliveryscopeheading': 'Kun leveranser innen Sverige',
-    'sizeheading': 'How much does it weigh?',
     'resultlistheading': 'Some suitable options for you',
     'weightlabel': 'Vekt',
     'maxweightlabel': 'Maks vekt',
@@ -52,7 +48,6 @@ export const translations = {
   'fi': {
     'componentheading': 'Vad vill du skicka?',
     'deliveryscopeheading': 'Toimitukset vain Ruotsin sisällä',
-    'sizeheading': 'How much does it weigh?',
     'resultlistheading': 'Some suitable options for you',
     'weightlabel': 'Paino',
     'maxweightlabel': 'Max paino',

package/collection/components/widgets/pn-find-price/pn-find-price.css

@@ -18,19 +18,19 @@ pn-find-price .findprice-form {
   margin: 0 auto 3em auto;
 }
 pn-find-price h2,
-pn-find-price .heading, pn-find-price .resultHeading {
+pn-find-price .heading {
   text-align: center;
   font-size: 1.5em;
   line-height: 1.1;
   font-weight: bold;
   margin-bottom: 1rem;
 }
-pn-find-price .sizeheading {
+pn-find-price .resultHeading {
   text-align: center;
-  font-size: 1.25em;
+  font-size: 1.5em;
   line-height: 1.1;
   font-weight: bold;
-  margin-bottom: 1rem;
+  margin-bottom: 2em;
 }
 pn-find-price .sizecategory {
   margin-top: 5em;
@@ -40,6 +40,11 @@ pn-find-price .sizecategory {
   align-items: center;
   justify-content: center;
 }
+pn-find-price .sizecategory #clouds {
+  position: absolute;
+  top: 4.87em;
+  left: 26.3em;
+}
 pn-find-price .weightoption {
   font-size: 0.9em;
   max-width: 41rem;
@@ -80,4 +85,9 @@ pn-find-price .servicePoint h3 {
 }
 pn-find-price .servicePoint a {
   color: #005D92;
+  text-decoration: none;
+}
+pn-find-price .servicePoint a:hover {
+  color: #0D234B;
+  text-decoration: underline;
 }

package/collection/components/widgets/pn-find-price/pn-find-price.js

@@ -7,6 +7,7 @@ import small from "./img/small-package.svg";
 import medium from "./img/medium-package.svg";
 import large from "./img/large-package.svg";
 import person from "./img/postnord-person1.svg";
+import clouds from "./img/clouds.svg";
 export class PnfindPrice {
   constructor() {
     this.source = fileLocation;
@@ -84,8 +85,8 @@ export class PnfindPrice {
   render() {
     return (h("div", { class: "findprice-form" },
       h("div", null,
-        (h("div", { class: "sizeheading" }, state.i18n.sizeheading)),
         h("div", { class: "sizecategory" },
+          h("img", { id: "clouds", src: clouds }),
           h("table", { class: "sizeTable" },
             h("tr", null,
               h("td", null,
@@ -116,8 +117,8 @@ export class PnfindPrice {
           h("pn-illustration", { illustration: "character-box-letters-house" }),
           h("h3", null, state.i18n.servicePointHeader),
           h("a", { href: ServicePointUrl, target: "_blank" },
-            state.i18n.servicePointLink,
-            h("pn-icon", { symbol: "map-marker", color: "blue700" }))))) : null));
+            h("pn-icon", { symbol: "map-marker", color: "blue700" }),
+            state.i18n.servicePointLink)))) : null));
   }
   static get is() { return "pn-find-price"; }
   static get originalStyleUrls() { return {

package/collection/components/widgets/pn-pex-pricefinder/pn-pex-pricefinder.js

@@ -12,16 +12,24 @@ export class PnPexPricefinder {
     this.fromzip = null;
     this.tozip = null;
     this.weight = 100;
-    this.when = (new Date()).toISOString().split('T')[0];
+    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) {
@@ -96,7 +104,7 @@ export class PnPexPricefinder {
             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-date-picker", { inputid: "when", name: "when", "start-of-week": "1", min: (new Date()).toISOString().split('T')[0], language: this.language, value: this.when })))),
+              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)))),

package/collection/components/widgets/pn-product-card/pn-product-card-info.css

@@ -4,18 +4,17 @@ pn-product-card-info {
 
 .cardinfocontent {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: space-between;
   flex-grow: 1;
   font-size: 0.875em;
+  gap: 1.6rem;
 }
-.cardinfocontent > div p {
-  margin: 0.25em 0.25em 0 0;
-}
-.cardinfocontent #sp {
-  width: 5em;
+@media screen and (min-width: 36em) {
+  .cardinfocontent {
+    flex-direction: row;
+  }
 }
-
 [slot=formatPre] {
   font-family: "PostNordSans", "Verdana";
   margin: 0.5em 3em 0 0;

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

@@ -4,7 +4,7 @@ export class PnProductCardInfo {
     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" },
-        h("div", null,
+        h("div", { class: "cardinfocontent-item" },
           h("strong", null, "Paket:"),
           this.paket.split("/").map((item) => ((item.split(":").length > 0) ?
             h("p", null,
@@ -12,9 +12,8 @@ export class PnProductCardInfo {
               " ",
               item.split(":")[1]) :
             h("p", null, item)))),
-        h("div", { id: "sp" }),
         (this.rulle) ?
-          (h("div", null,
+          (h("div", { class: "cardinfocontent-item" },
             h("strong", null, "Rulle:"),
             this.rulle.split("/").map((item) => ((item.split(":").length > 0) ?
               h("p", null,

package/collection/components/widgets/pn-product-card/pn-product-card-price.css

@@ -1,7 +1,9 @@
 pn-product-card-price {
-  margin-top: 1em;
+  margin-top: 1.6rem;
   white-space: nowrap;
   text-align: center;
+  display: flex;
+  flex-direction: column;
 }
 pn-product-card-price span:last-child {
   display: inline-block;
@@ -15,16 +17,31 @@ pn-product-card-price pn-icon {
   align-self: center;
 }
 pn-product-card-price pn-button {
-  width: 12.8em;
-  margin-bottom: 1em;
-  margin-top: 0.5em;
+  min-width: 12.8em;
+  margin-top: 0.8rem;
   font-size: 1.25;
+  order: 2;
+}
+@media screen and (min-width: 48em) {
+  pn-product-card-price pn-button {
+    order: 3;
+    margin-bottom: 1.6rem;
+  }
+}
+pn-product-card-price h3 {
+  order: 1;
 }
 pn-product-card-price p {
   font-weight: lighter;
   font-size: 0.875em;
   align-self: center;
-  margin-top: 0.5em;
+  margin-top: 0.8rem;
+  order: 3;
+}
+@media screen and (min-width: 48em) {
+  pn-product-card-price p {
+    order: 2;
+  }
 }
 pn-product-card-price a {
   text-decoration: none;

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

@@ -9,7 +9,7 @@ export class PnProductCardPrice {
         (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", { small: "true", icon: "arrow-right", appearance: "secondary", href: this.url, target: "_blank", id: this.service.split(" ").join("-").toLocaleLowerCase() }, this.label)) : null)) : (h(Host, null,
+      (this.label) ? (h("pn-button", { small: "true", icon: "open-in-new", appearance: "light", href: this.url, target: "_blank", id: this.service.split(" ").join("-").toLocaleLowerCase() }, this.label)) : null)) : (h(Host, null,
       h("h3", null,
         (this.amount) ? (h("span", null, this.amount)) : null,
         (this.currency) ? (h("span", null, this.currency)) : null)));