@postnord/pn-marketweb-components 1.0.50 → 2.0.2-beta1

package/cjs/pn-marketweb-search.cjs.entry.js

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3e27c79.js');
+
+const pnMarketwebSearchCss = ":host{display:-ms-inline-flexbox;display:inline-flex}:host>pn-button{margin-left:0.35em}:host>pn-button button .pn-button-bg{-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, left 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, left 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s}:host>pn-button[data-loading=true] .pn-button-bg{left:0;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, -webkit-box-shadow 0.1s}:host>pn-button[data-loading=true] pn-spinner{left:0.75em}:host input{padding:0.75em;min-height:3em;font-size:1em;height:100%;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:3em;border:0.1rem solid #5E554A;-webkit-transition:border 0.15s, -webkit-box-shadow 0.15s;transition:border 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, border 0.15s;transition:box-shadow 0.15s, border 0.15s, -webkit-box-shadow 0.15s;color:#000000;width:100%}:host input::-webkit-search-cancel-button{display:none}:host input::-webkit-input-placeholder{color:#969087;font-weight:normal}:host input::-moz-placeholder{color:#969087;font-weight:normal}:host input:-ms-input-placeholder{color:#969087;font-weight:normal}:host input::-ms-input-placeholder{color:#969087;font-weight:normal}:host input::placeholder{color:#969087;font-weight:normal}:host input:focus{border:0.1rem solid #005D92;-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}:host input:hover{border:0.1rem solid #00A0D6}:host input:disabled{background:#F3F2F2;border:none}:host>.input-container{width:100%;position:relative}:host>.input-container .button-container{position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host[list] :host>.input-container .button-container{display:none}:host>.input-container button{position:absolute;left:50%;top:50%;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%);background:#FFFFFF;border:none;color:#005D92;padding:0.3rem;margin:0;font-size:0.875em;border-radius:50%;outline:none;-webkit-transition:border 0.1s, background 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:border 0.1s, background 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;border:0.1rem solid transparent;-webkit-tap-highlight-color:transparent}:host>.input-container button.clear,:host>.input-container button.search{cursor:pointer}:host>.input-container button:focus{-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}:host>.input-container button:hover,:host>.input-container button:focus{background:#E0F8FF}:host>.input-container button:active{background:#005D92}:host>.input-container button:active pn-icon svg,:host>.input-container button:active pn-icon svg path{fill:white}:host .searching button.search{-webkit-transform:translate(150%, -50%);transform:translate(150%, -50%)}:host .searching button.clear{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host .button-none input,:host .button-icon-inline input{padding-right:3.3em}:host .button-none pn-spinner,:host .button-icon-inline pn-spinner{position:absolute;left:50%;top:50%;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%);-webkit-transition:-webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:-webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s}:host .button-none button.search,:host .button-icon-inline button.search{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host .button-none.loading button,:host .button-icon-inline.loading button{-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}:host .button-none.loading pn-spinner,:host .button-icon-inline.loading pn-spinner{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host .button-none.searching button.search{-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}:host .button-icon>pn-button[data-loading=true] .pn-button-bg{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}";
+
+let PnMarketwebSearch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.search = index.createEvent(this, "search", 7);
+    this.update = index.createEvent(this, "update", 7);
+    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;
+    /** Loading animation */
+    this.loading = false;
+    /** Button type, options are 'none' for no button, 'icon' for a labelless button with just a search icon and 'icon-inline' for a search button inside of the search field (this last option disables the clear field button) */
+    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);
+  }
+  emitSearch(e) {
+    if (e.type === 'click' ||
+      (e.type === 'keydown' && e.key === 'Enter')) {
+      // We prevent the native search event since it's not supported in IE and FF, then we emit our own instead
+      e.preventDefault();
+      this.search.emit(this.value);
+    }
+  }
+  setVal(e) {
+    this.value = e.target.value;
+  }
+  clearInput() {
+    this.value = '';
+    this.update.emit(this.value);
+    this.hostElement.querySelector('input').focus();
+  }
+  getClassNames() {
+    let classNames = '';
+    const buttonTypes = ['none', 'icon', 'icon-inline'];
+    if (this.value)
+      classNames += 'searching ';
+    if (this.loading)
+      classNames += 'loading ';
+    if (buttonTypes.includes(this.button))
+      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 (index.h(index.Host, null, index.h("div", { class: `input-container ${this.getClassNames()}`, "data-haslist": (this.list !== null) + '' }, index.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) }), index.h("div", { class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') &&
+      index.h("button", { class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: (e) => this.emitSearch(e), "aria-label": "search", title: "search" }, index.h("pn-icon", { symbol: "search", color: "blue700" })), (this.button !== 'icon-inline') &&
+      index.h("button", { class: "clear", "aria-label": "clear", title: "clear search field", tabindex: this.value && (!this.loading || this.button !== 'none') ? '0' : '-1', onClick: () => this.clearInput() }, index.h("pn-icon", { symbol: "close-small", color: "blue700" })), this.button === 'none' || this.button === 'icon-inline' && index.h("pn-spinner", null))), (this.button !== 'none' && this.button !== 'icon-inline') &&
+      index.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) &&
+      index.h("datalist", { id: this.list }, this.listSuggestion.map((item) => {
+        return (index.h("option", null, item));
+      }))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+PnMarketwebSearch.style = pnMarketwebSearchCss;
+
+exports.pn_marketweb_search = PnMarketwebSearch;

package/cjs/pn-marketweb-sitefooter.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
+const index = require('./index-e3e27c79.js');
 const FetchHelper = require('./FetchHelper-33d3c535.js');
 
 const translations = {

package/cjs/pn-marketweb-siteheader.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
+const index = require('./index-e3e27c79.js');
 const FetchHelper = require('./FetchHelper-33d3c535.js');
 const MarketWebLoginManager = require('./MarketWebLoginManager-3c2f4423.js');
 

package/cjs/pn-pex-pricefinder.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
+const index = require('./index-e3e27c79.js');
 
 const translations = {
   'sv': {
@@ -42,16 +42,24 @@ let PnPexPricefinder = class {
     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) {
@@ -112,7 +120,7 @@ let PnPexPricefinder = class {
     console.error('onFetchError(error', error);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "pex-pricefinder-top" }, index.h("pn-illustration", { illustration: "PEX-truck" }), index.h("h2", null, this.i18n.heading)), index.h("form", { method: "get", action: "", class: "pex-pricefinder-form", onSubmit: this.onSubmit.bind(this) }, index.h("fieldset", null, index.h("div", null, index.h("pn-input", { type: "number", label: this.i18n.labelFrom, inputid: "fromzip", name: "fromzip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.fromzip }), index.h("pn-input", { type: "number", label: this.i18n.labelTo, inputid: "tozip", name: "tozip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.tozip }))), index.h("fieldset", null, index.h("div", null, index.h("pn-input", { type: "number", label: this.i18n.labelWeight, inputid: "weight", name: "weight", placeholder: this.i18n.weightPlaceholder, required: true, value: this.weight }), index.h("div", { class: "datepicker" }, index.h("label", { htmlFor: "when" }, this.i18n.labelWhen), index.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 })))), index.h("fieldset", null, index.h("div", null, index.h("pn-button", { type: "submit" }, this.i18n.submitButtonText)))), this.response ? (index.h("div", { class: "pex-pricefinder-response" }, index.h("strong", null, this.response.data.value, " ", this.currency))) : null));
+    return (index.h(index.Host, null, index.h("div", { class: "pex-pricefinder-top" }, index.h("pn-illustration", { illustration: "PEX-truck" }), index.h("h2", null, this.i18n.heading)), index.h("form", { method: "get", action: "", class: "pex-pricefinder-form", onSubmit: this.onSubmit.bind(this) }, index.h("fieldset", null, index.h("div", null, index.h("pn-input", { type: "number", label: this.i18n.labelFrom, inputid: "fromzip", name: "fromzip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.fromzip }), index.h("pn-input", { type: "number", label: this.i18n.labelTo, inputid: "tozip", name: "tozip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.tozip }))), index.h("fieldset", null, index.h("div", null, index.h("pn-input", { type: "number", label: this.i18n.labelWeight, inputid: "weight", name: "weight", placeholder: this.i18n.weightPlaceholder, required: true, value: this.weight }), index.h("div", { class: "datepicker" }, index.h("label", { htmlFor: "when" }, this.i18n.labelWhen), index.h("pn-marketweb-input", { inputid: "when", name: "when", type: "datetime-local", min: (new Date()).toISOString().split('T')[0], value: this.when })))), index.h("fieldset", null, index.h("div", null, index.h("pn-button", { type: "submit" }, this.i18n.submitButtonText)))), this.response ? (index.h("div", { class: "pex-pricefinder-response" }, index.h("strong", null, this.response.data.value, " ", this.currency))) : null));
   }
   get hostElement() { return index.getElement(this); }
 };

package/cjs/pn-product-card_3.cjs.entry.js

@@ -2,31 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
+const index = require('./index-e3e27c79.js');
 
-const pnProductCardCss = "pn-product-card{margin-bottom:1em;border:0.1rem solid #D3CECB;outline:none;background:#FFFFFF;-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);display:-ms-flexbox;display:flex;padding:1.5em;word-break:break-word;text-decoration:none;border-radius:0.8rem}pn-product-card [slot=title]{display:-ms-flexbox;display:flex;width:100%;margin-bottom:0.5em}pn-product-card [slot=title]>[slot=Biligast]{color:#005E41;background:#DCF6E7;border-radius:0.37em;width:6.3em;height:2em;margin-left:1.5em;font-weight:normal;font-size:0.75em;text-align:center;vertical-align:bottom;padding-top:0.25em}pn-product-card [slot=title]>[slot=Biligast] pn-icon{vertical-align:middle;margin-left:0.6em}pn-product-card [slot=title]>[slot=Snabbast]{background:#E0F8FF;color:#005D92;border-radius:0.37em;width:7em;height:2em;margin-left:1.5em;font-weight:normal;font-size:0.75em;text-align:center;vertical-align:bottom;padding-top:0.25em}pn-product-card [slot=title]>[slot=Snabbast] pn-icon{vertical-align:middle;margin-left:0.6em}pn-product-card [slot=note]{margin-top:1em;margin-bottom:1em}pn-product-card [slot=additionalUSP]{display:-ms-flexbox;display:flex}pn-product-card [slot=additionalUSP] :first-child{margin-left:0em}pn-product-card [slot=additionalUSP] span{margin-left:1em;background:#D3CECB;color:#2D2013;border-radius:0.25em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:0.3em;margin-top:0.5em;font-size:0.75em}pn-product-card>pn-illustration{min-width:8rem;width:8rem;height:8rem;margin-right:3rem;-ms-flex-item-align:center;align-self:center}pn-product-card .cardcontent{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}pn-product-card [slot=cardprice]{display:block;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}pn-product-card .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%}pn-product-card .info{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;-ms-flex-flow:wrap;flex-flow:wrap;padding:0 1em 0 0}pn-product-card .info>*{min-width:6em;margin:0.5em 2em 0.5em 0}";
+const pnProductCardCss = "pn-product-card{border:0.1rem solid #D3CECB;outline:none;background:#FFFFFF;-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);display:-ms-flexbox;display:flex;word-break:break-word;text-decoration:none;border-radius:0.8rem;position:relative;padding:11rem 2.4rem 2.4rem;margin-bottom:1.6rem}@media screen and (min-width: 36em){pn-product-card{padding:2.4rem}}pn-product-card [slot=title]{display:-ms-flexbox;display:flex;width:100%;margin-bottom:0.8rem;gap:1.6rem;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}@media screen and (min-width: 36em){pn-product-card [slot=title]{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:inherit;align-items:inherit}}pn-product-card [slot=title] h2{width:100%}@media screen and (min-width: 36em){pn-product-card [slot=title] h2{width:auto}}pn-product-card [slot=title]>[slot]{border-radius:0.4rem;height:2.5em;font-weight:normal;font-size:0.75em;text-align:center;vertical-align:bottom;padding:0.6rem}pn-product-card [slot=title]>[slot] pn-icon{vertical-align:middle;margin-left:0.6em}pn-product-card [slot=title]>[slot=Billigast]{color:#005E41;background:#DCF6E7}pn-product-card [slot=title]>[slot=Snabbast]{background:#E0F8FF;color:#005D92}pn-product-card [slot=note]{margin-top:1em;margin-bottom:1em}pn-product-card [slot=additionalUSP]{display:-ms-flexbox;display:flex}pn-product-card [slot=additionalUSP] :first-child{margin-left:0em}pn-product-card [slot=additionalUSP] span{margin-left:1em;background:#D3CECB;color:#2D2013;border-radius:0.25em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:0.3em;margin-top:0.5em;font-size:0.75em}pn-product-card>pn-illustration{min-width:8rem;width:8rem;height:8rem;-ms-flex-item-align:center;align-self:center;position:absolute;top:1.6rem;-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%;-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);border-radius:100%}@media screen and (min-width: 36em){pn-product-card>pn-illustration{-webkit-box-shadow:none;box-shadow:none;top:1.6rem;right:1.6rem;left:auto;-webkit-transform:none;transform:none}}@media screen and (min-width: 48em){pn-product-card>pn-illustration{position:static;top:auto;right:auto;margin-right:3rem}}pn-product-card .cardcontent{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 48em){pn-product-card .cardcontent{-ms-flex-direction:row;flex-direction:row;gap:1.6rem}}pn-product-card .cardcontent .description :first-child{max-width:calc(100% - 10rem)}@media screen and (min-width: 48em){pn-product-card .cardcontent .description :first-child{max-width:none}}pn-product-card [slot=cardprice]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 36em){pn-product-card [slot=cardprice]{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}}@media screen and (min-width: 48em){pn-product-card [slot=cardprice]{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:end;align-items:flex-end}}pn-product-card .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%}pn-product-card .info{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;-ms-flex-flow:wrap;flex-flow:wrap;padding:0 1em 0 0}pn-product-card .info>*{min-width:6em;margin:0.5em 2em 0.5em 0}";
 
 let PnProductCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "illustration" }), index.h("div", { class: "cardcontent" }, index.h("div", { class: "details" }, index.h("slot", { name: "title" }), index.h("slot", { name: "content" }), index.h("div", { class: "info" }, index.h("slot", null)), index.h("slot", { name: "note" }), index.h("slot", { name: "additionalUSP" })), index.h("div", null, index.h("slot", { name: "cardprice" })))));
+    return (index.h(index.Host, null, index.h("slot", { name: "illustration" }), index.h("div", { class: "cardcontent" }, index.h("div", { class: "details" }, index.h("slot", { name: "title" }), index.h("slot", { name: "content" }), index.h("div", { class: "info" }, index.h("slot", null)), index.h("slot", { name: "note" }), index.h("slot", { name: "additionalUSP" })), index.h("div", { class: "cardprice" }, index.h("slot", { name: "cardprice" })))));
   }
 };
 PnProductCard.style = pnProductCardCss;
 
-const pnProductCardInfoCss = "pn-product-card-info{-ms-flex-item-align:center;align-self:center}.cardinfocontent{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;font-size:0.875em}.cardinfocontent>div p{margin:0.25em 0.25em 0 0}.cardinfocontent #sp{width: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 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}}[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}";
 
 let PnProductCardInfo = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (this.label) ? (index.h(index.Host, null, index.h("div", { class: "cardinfocontent" }, (this.text) ? (index.h("pre", { slot: "formatPre" }, this.text)) : null))) : (index.h(index.Host, null, index.h("div", { class: "cardinfocontent" }, index.h("div", null, index.h("strong", null, "Paket:"), this.paket.split("/").map((item) => ((item.split(":").length > 0) ?
+    return (this.label) ? (index.h(index.Host, null, index.h("div", { class: "cardinfocontent" }, (this.text) ? (index.h("pre", { slot: "formatPre" }, this.text)) : null))) : (index.h(index.Host, null, index.h("div", { class: "cardinfocontent" }, index.h("div", { class: "cardinfocontent-item" }, index.h("strong", null, "Paket:"), this.paket.split("/").map((item) => ((item.split(":").length > 0) ?
       index.h("p", null, index.h("strong", null, item.split(":")[0] + ": "), " ", item.split(":")[1]) :
-      index.h("p", null, item)))), index.h("div", { id: "sp" }), (this.rulle) ?
-      (index.h("div", null, index.h("strong", null, "Rulle:"), this.rulle.split("/").map((item) => ((item.split(":").length > 0) ?
+      index.h("p", null, item)))), (this.rulle) ?
+      (index.h("div", { class: "cardinfocontent-item" }, index.h("strong", null, "Rulle:"), this.rulle.split("/").map((item) => ((item.split(":").length > 0) ?
         index.h("p", null, index.h("strong", null, item.split(":")[0] + ": "), " ", item.split(":")[1]) :
         index.h("p", null, item))))) : null)));
   }
@@ -34,7 +34,7 @@ let PnProductCardInfo = class {
 index.h("pn-icon", { symbol: "align-center", small: "false", color: "black" });
 PnProductCardInfo.style = pnProductCardInfoCss;
 
-const pnProductCardPriceCss = "pn-product-card-price{margin-top:1em;white-space:nowrap;text-align:center}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 pn-button{width:12.8em;margin-bottom:1em;margin-top:0.5em;font-size:1.25}pn-product-card-price p{font-weight:lighter;font-size:0.875em;-ms-flex-item-align:center;align-self:center;margin-top:0.5em}pn-product-card-price a{text-decoration:none;color:#005D92}pn-product-card-price a h3{text-decoration:underline}";
+const pnProductCardPriceCss = "pn-product-card-price{margin-top:1.6rem;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 pn-button{min-width:12.8em;margin-top:0.8rem;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 h3{-ms-flex-order:1;order:1}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}}pn-product-card-price a{text-decoration:none;color:#005D92}pn-product-card-price a h3{text-decoration:underline}";
 
 let PnProductCardPrice = class {
   constructor(hostRef) {
@@ -44,7 +44,7 @@ let PnProductCardPrice = class {
     if (!this.amount) {
       return;
     }
-    return (this.url) ? (index.h(index.Host, null, index.h("h3", null, (this.amount) ? (index.h("span", null, this.amount)) : null, (this.currency) ? (index.h("span", null, " " + this.currency)) : null), (this.note) ? (index.h("p", null, this.note)) : null, (this.label) ? (index.h("pn-button", { small: "true", icon: "arrow-right", appearance: "secondary", href: this.url, target: "_blank", id: this.service.split(" ").join("-").toLocaleLowerCase() }, this.label)) : null)) : (index.h(index.Host, null, index.h("h3", null, (this.amount) ? (index.h("span", null, this.amount)) : null, (this.currency) ? (index.h("span", null, this.currency)) : null)));
+    return (this.url) ? (index.h(index.Host, null, index.h("h3", null, (this.amount) ? (index.h("span", null, this.amount)) : null, (this.currency) ? (index.h("span", null, " " + this.currency)) : null), (this.note) ? (index.h("p", null, this.note)) : null, (this.label) ? (index.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)) : (index.h(index.Host, null, index.h("h3", null, (this.amount) ? (index.h("span", null, this.amount)) : null, (this.currency) ? (index.h("span", null, this.currency)) : null)));
   }
 };
 PnProductCardPrice.style = pnProductCardPriceCss;

package/cjs/pn-product-pricelist-result.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
-const pnProductPricelistStore = require('./pn-product-pricelist-store-c88813f7.js');
-require('./index-5d2abef7.js');
+const index = require('./index-e3e27c79.js');
+const pnProductPricelistStore = require('./pn-product-pricelist-store-86310b5a.js');
+require('./index-28bbc937.js');
 
 const pnProductPricelistResultCss = "";
 

package/cjs/{pn-product-pricelist-store-c88813f7.js → pn-product-pricelist-store-86310b5a.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-5d2abef7.js');
+const index = require('./index-28bbc937.js');
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = index.createStore({

package/cjs/pn-product-pricelist.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
+const index = require('./index-e3e27c79.js');
 const convert = require('./convert-362ef5e6.js');
-const pnProductPricelistStore = require('./pn-product-pricelist-store-c88813f7.js');
-require('./index-5d2abef7.js');
+const pnProductPricelistStore = require('./pn-product-pricelist-store-86310b5a.js');
+require('./index-28bbc937.js');
 
 const translations = {
   'sv': {
@@ -96,7 +96,7 @@ const weights = {
   ]
 };
 
-const pnProductPricelistCss = "pn-product-pricelist pn-spinner{margin:1em auto}pn-product-pricelist h2,pn-product-pricelist .heading{text-align:center;font-size:1.5em;line-height:1.1;font-weight:bold;margin-bottom:1rem}pn-product-pricelist .content,pn-product-pricelist .weightselection{max-width:50em;margin:0 auto 1em}pn-product-pricelist .weightoption{display:-ms-flexbox;display:flex;gap:1em}pn-product-pricelist .weightoption-input{width:5em;position:relative}pn-product-pricelist .weightoption-input input::-webkit-outer-spin-button,pn-product-pricelist .weightoption-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}pn-product-pricelist .weightoption-input-abbreviation{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:1.2em;margin-top:1.55rem;font-weight:500}pn-product-pricelist .weightoption-range{-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:end;align-self:flex-end;position:relative;top:0.5em}pn-product-pricelist .weightoption-range input{width:calc(100% - 1.5em)}pn-product-pricelist .weightoption-range datalist{width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75em}pn-product-pricelist .resultlist:not([data-list-count=\"0\"]){margin-top:2em}";
+const pnProductPricelistCss = "pn-product-pricelist pn-spinner{margin:1em auto}pn-product-pricelist h2,pn-product-pricelist .heading{text-align:center;font-size:1.5em;line-height:1.1;font-weight:bold;margin-bottom:1rem}pn-product-pricelist .content,pn-product-pricelist .weightselection{max-width:50em;margin:0 auto 1em}pn-product-pricelist .weightoption{display:-ms-flexbox;display:flex;gap:1em}pn-product-pricelist .weightoption-input{width:5em;position:relative;display:none}pn-product-pricelist .weightoption-input input::-webkit-outer-spin-button,pn-product-pricelist .weightoption-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}pn-product-pricelist .weightoption-input-abbreviation{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:1.2em;margin-top:1.55rem;font-weight:500}pn-product-pricelist .weightoption-range{-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:end;align-self:flex-end;position:relative;top:0.5em}pn-product-pricelist .weightoption-range input{width:calc(100% - 1.5em)}pn-product-pricelist .weightoption-range datalist{width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75em}pn-product-pricelist .resultlist:not([data-list-count=\"0\"]){margin-top:2em}";
 
 let PnFindProductPricelist = class {
   constructor(hostRef) {

package/cjs/pn-product-tile_3.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
+const index = require('./index-e3e27c79.js');
 
 const pnProductTileCss = "pn-product-tile{margin-bottom:1em;border:0.1rem solid #D3CECB;outline:none;background:white;-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);display:-ms-flexbox;display:flex;padding:1.5em;word-break:break-word;text-decoration:none;border-radius:0.8rem}pn-product-tile [slot=content] h3{display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:0.5em}pn-product-tile>pn-illustration{min-width:8rem;width:8rem;height:8rem;margin-right:3rem;-ms-flex-item-align:center;align-self:center}pn-product-tile .tilecontent{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}pn-product-tile .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%}pn-product-tile .info{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;max-width:66.6666666667%;-ms-flex-flow:wrap;flex-flow:wrap}pn-product-tile .info>*{min-width:6em;margin:0.2em 1em 0.2em 0}";
 

package/cjs/pn-profile-selector-option.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
+const index = require('./index-e3e27c79.js');
 
 const pnProfileSelectorOptionCss = "pn-profile-selector-option{display:-ms-flexbox;display:flex;width:100%;border-bottom:1px solid #D3CECB;padding:1.2rem 0}pn-profile-selector-option:first-of-type{margin-top:2.4rem}pn-profile-selector-option:last-of-type{border-bottom:0;padding-bottom:0}pn-profile-selector-option:last-of-type .profileselectoroption{padding-bottom:0}.profileselectoroption{display:-ms-flexbox;display:flex;width:100%;padding:1.2rem 0;text-decoration:none}.profileselectoroption pn-icon{-ms-flex-item-align:center;align-self:center;position:relative;-webkit-transform:translateX(-1rem);transform:translateX(-1rem);-webkit-transition:-webkit-transform 0.25s linear;transition:-webkit-transform 0.25s linear;transition:transform 0.25s linear;transition:transform 0.25s linear, -webkit-transform 0.25s linear}.profileselectoroption:hover .profileselectoroption-name,.profileselectoroption:focus .profileselectoroption-name,.profileselectoroption:active .profileselectoroption-name{text-decoration:underline}.profileselectoroption:hover pn-icon,.profileselectoroption:focus pn-icon,.profileselectoroption:active pn-icon{-webkit-transform:none;transform:none;-webkit-transition-timing-function:ease;transition-timing-function:ease}.profileselectoroption-text{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.profileselectoroption-name{font-size:1em;color:#005D92;font-weight:700}.profileselectoroption-identifier{color:#5E554A;font-size:0.75em}";
 

package/cjs/pn-profile-selector.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
+const index = require('./index-e3e27c79.js');
 
 const translations = {
   'sv': {

package/cjs/pn-sidenav-level.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
-const pnSidenavStore = require('./pn-sidenav-store-a753d3d7.js');
-require('./index-5d2abef7.js');
+const index = require('./index-e3e27c79.js');
+const pnSidenavStore = require('./pn-sidenav-store-d9bd9e00.js');
+require('./index-28bbc937.js');
 
 const pnSidenavLevelCss = "pn-sidenav-level{display:block;-ms-flex-preferred-size:100%;flex-basis:100%}pn-sidenav-level[data-level=\"2\"]{padding-left:2.5em;overflow:hidden;-webkit-transition:max-height ease 0.2s;transition:max-height ease 0.2s;max-height:40em}pn-sidenav-level[data-level=\"2\"][aria-hidden=true]{max-height:0}";
 

package/cjs/pn-sidenav-link.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
-const pnSidenavStore = require('./pn-sidenav-store-a753d3d7.js');
-require('./index-5d2abef7.js');
+const index = require('./index-e3e27c79.js');
+const pnSidenavStore = require('./pn-sidenav-store-d9bd9e00.js');
+require('./index-28bbc937.js');
 
 const pnSidenavLinkCss = "pn-sidenav-link{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.pn-sidenav-link{font-weight:normal;position:relative;border:0 none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:transparent;color:#005D92;font-size:1em;padding:1.1rem 1.5rem 1.1rem;overflow:hidden;text-decoration:none;cursor:pointer;-ms-flex-positive:1;flex-grow:1}.pn-sidenav-link::before{content:\"\";display:block;width:0.4rem;border-top-right-radius:0.3rem;border-bottom-right-radius:0.3rem;height:100%;position:absolute;left:0;top:0;bottom:0;-webkit-transform:translateX(-0.4rem);transform:translateX(-0.4rem);background:#005D92;-webkit-transition:-webkit-transform linear 0.35s;transition:-webkit-transform linear 0.35s;transition:transform linear 0.35s;transition:transform linear 0.35s, -webkit-transform linear 0.35s}.pn-sidenav-link:hover,.pn-sidenav-link:focus,[current=true]>.pn-sidenav-link{background-color:#E0F8FF;color:#005D92;outline:0;-webkit-box-shadow:none;box-shadow:none}.pn-sidenav-link:hover::before,.pn-sidenav-link:focus::before,[current=true]>.pn-sidenav-link::before{-webkit-transform:none;transform:none}.pn-sidenav-link:active{background-color:#F3F2F2;color:#00A0D6;-webkit-box-shadow:none;box-shadow:none}.pn-sidenav-link>pn-icon{padding-right:1em}.pn-sidenav-link-expand{margin-left:auto;border:0;font-size:1em;background:transparent;outline:0;padding:0 1em 0 0.5em;cursor:pointer}.pn-sidenav-link-expand:hover,.pn-sidenav-link-expand:focus,[current=true]>.pn-sidenav-link-expand{background-color:#E0F8FF;color:#005D92;outline:0;-webkit-box-shadow:none;box-shadow:none}.pn-sidenav-link-expand:hover::before,.pn-sidenav-link-expand:focus::before,[current=true]>.pn-sidenav-link-expand::before{-webkit-transform:none;transform:none}button>.pn-sidenav-link-expand{padding-right:0}.pn-sidenav-link-expand pn-icon{width:14px}";
 

package/cjs/{pn-sidenav-store-a753d3d7.js → pn-sidenav-store-d9bd9e00.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-5d2abef7.js');
+const index = require('./index-28bbc937.js');
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = index.createStore({

package/cjs/pn-sidenav.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
-const pnSidenavStore = require('./pn-sidenav-store-a753d3d7.js');
-require('./index-5d2abef7.js');
+const index = require('./index-e3e27c79.js');
+const pnSidenavStore = require('./pn-sidenav-store-d9bd9e00.js');
+require('./index-28bbc937.js');
 
 const translations = {
   'sv': {

package/cjs/pn-site-footer_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6e46a26.js');
+const index = require('./index-e3e27c79.js');
 
 const pnSiteFooterCss = "pn-site-footer{display:block;line-height:1.5}pn-site-footer a{color:#005D92}pn-site-footer a:hover{color:#0D234B;text-decoration:underline}pn-site-footer h3{font-size:2.4rem;margin-bottom:0.5rem;line-height:1.2}pn-site-footer p{font-size:1.6rem}pn-site-footer ul.social-media{display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row}pn-site-footer ul.social-media li{margin-right:1.6rem}pn-site-footer>svg{display:block}pn-site-footer>div{background:#F3F2F2}.pn-sitefooter-top{display:-ms-flexbox;display:flex}.pn-sitefooter-cols{-ms-flex-item-align:center;align-self:center;-ms-flex-pack:center;justify-content:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;margin:0 auto;max-width:90em}.pn-sitefooter-bottom [slot=bottom]{max-width:90em;margin:0 auto;padding:1.6rem 0;display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;border-top:1px solid #D3CECB;border-bottom:1px solid #D3CECB}.pn-sitefooter-bottom [slot=bottom] span,.pn-sitefooter-bottom [slot=bottom] a{line-height:2;margin:0 1.6rem;text-decoration:none}.pn-sitefooter-bottom [slot=bottom] li{line-height:2em;margin:0 1.6rem}.pn-sitefooter-logo{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;padding:3rem}.pn-sitefooter-logo svg{display:block;width:13.3rem;height:2.6rem}";
 

package/collection/collection-manifest.json

@@ -4,7 +4,8 @@
     "./components/input/pn-bonus-progressbar/pn-bonus-progressbar.js",
     "./components/input/pn-choice-button/pn-choice-button.js",
     "./components/input/pn-filter-checkbox/pn-filter-checkbox.js",
-    "./components/input/pn-filter-search/pn-filter-search.js",
+    "./components/input/pn-marketweb-input/pn-marketweb-input.js",
+    "./components/input/pn-marketweb-search/pn-marketweb-search.js",
     "./components/layout-components/pn-marketweb-sitefooter/pn-marketweb-sitefooter.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search.js",

package/collection/components/input/pn-marketweb-input/marketweb-input.stories.js

@@ -0,0 +1,51 @@
+import readme from "./readme.md";
+
+export default {
+  title: "input/Input",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  },
+};
+
+const Template = ({ ...args }) => {
+  
+  return `
+    <pn-marketweb-input 
+      type="${args.type}"
+      value="${args.value}"
+      ></pn-marketweb-input>
+  `;
+};
+export const Primary = Template.bind({});
+Primary.args = {
+  type: 'text',
+};
+
+export const DatetimeLocal = Template.bind({});
+DatetimeLocal.args = {
+  type: 'datetime-local',
+  value: `${(new Date()).toISOString().split('T')[0]}T${(new Date()).toISOString().split('T')[1].substring(0, 5)}`
+};
+
+export const Time = Template.bind({});
+Time.args = {
+  type: 'time',
+  value: (new Date()).toISOString().split('T')[1].substring(0, 5)
+};
+
+export const Week = Template.bind({});
+Week.args = {
+  type: 'week',
+};
+
+export const Month = Template.bind({});
+Month.args = {
+  type: 'month',
+};
+
+export const DateInput = Template.bind({});
+DateInput.args = {
+  type: 'date',
+  value:   (new Date()).toISOString().split('T')[0]
+};

package/collection/components/input/pn-marketweb-input/pn-marketweb-input.css

@@ -0,0 +1,156 @@
+pn--marketweb-input {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+pn-marketweb-input input {
+  padding: 0.75em;
+  font-size: 1em;
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased;
+  outline: none;
+  border-radius: 0.8rem;
+  border: 0.1rem solid #5E554A;
+  transition: box-shadow 0.15s, border 0.15s;
+  color: #000000;
+  width: 100%;
+}
+pn-marketweb-input input::placeholder {
+  color: #969087;
+  font-weight: normal;
+}
+pn-marketweb-input input:focus {
+  border: 0.1rem solid #005D92;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+}
+pn-marketweb-input input:hover {
+  border: 0.1rem solid #00A0D6;
+}
+pn-marketweb-input input:disabled {
+  background: #F3F2F2;
+  border: none;
+}
+
+pn-marketweb-input > .input-container {
+  position: relative;
+}
+pn-marketweb-input > .input-container > button {
+  position: absolute;
+  right: 1.2rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #005D92;
+  padding: 0.6rem;
+  border-radius: 0.8rem;
+  outline: none;
+  transition: border 0.1s, background 0.2s, color 0.1s;
+  border: 0.1rem solid transparent;
+}
+pn-marketweb-input > .input-container > button:focus {
+  border: 0.1rem solid #005D92;
+}
+pn-marketweb-input > .input-container > button:hover {
+  background: #E0F8FF;
+}
+pn-marketweb-input > .input-container > button:active {
+  background: #005D92;
+  color: white;
+}
+pn-marketweb-input > .input-container > svg {
+  position: absolute;
+  right: 0.75em;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 1.5em;
+  width: 1.5em;
+  pointer-events: none;
+}
+pn-marketweb-input > .input-container > svg polyline {
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);
+}
+pn-marketweb-input > .input-container > svg.pn-input-checkmark polyline {
+  stroke: #005E41;
+  stroke-dashoffset: 23;
+  stroke-dasharray: 23;
+}
+
+pn-marketweb-input .label-container {
+  margin-bottom: 0.4rem;
+  color: #5E554A;
+  font-size: 0.875em;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+pn-marketweb-input .label-container label {
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.label-container label.char-count {
+  flex-shrink: 0;
+  padding-left: 0.5em;
+}
+
+pn-marketweb-input small {
+  font-size: 0.75em;
+  font-size: max(.6em, 1.2rem);
+  transition: transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);
+  margin-top: 0.5em;
+  color: #5E554A;
+}
+
+pn-input.error {
+  color: #A70707;
+}
+pn-input.error label {
+  color: #A70707;
+}
+pn-input.error small {
+  color: #A70707;
+}
+pn-input.error small > pn-icon {
+  margin-right: 0.25em;
+}
+pn-input.error input {
+  border: 0.1rem solid #A70707;
+}
+pn-input.error input:focus {
+  border: 0.1rem solid #A70707;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;
+}
+pn-input.error input:hover {
+  border: 0.1rem solid #F06365;
+}
+
+pn-input.valid {
+  color: #005E41;
+}
+pn-input.valid .input-container > svg.pn-input-checkmark polyline {
+  stroke-dashoffset: 0;
+}
+pn-input.valid label {
+  color: #005E41;
+}
+pn-input.valid input {
+  border: 0.1rem solid #005E41;
+}
+pn-input.valid input:focus {
+  border: 0.1rem solid #005E41;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005E41;
+}
+pn-input.valid input:hover {
+  border: 0.1rem solid #5EC584;
+}
+
+pn-marketweb-input.password input {
+  padding-right: 4em;
+}
+
+pn-marketweb-input.icon input {
+  padding-right: 2.3em;
+}