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

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

@@ -0,0 +1,412 @@
+import { Component, Prop, h, Host, State } from "@stencil/core";
+export class PnMarketwebInput {
+  constructor() {
+    this.disabled = false;
+    /** Error message; will take precedence over helpertext if both are provided (applies invalid styles automatically) */
+    this.error = '';
+    /** Error state without message (If you want to control the error messaging on your own) */
+    this.invalid = false;
+    /** Text message placed underneath the input field */
+    this.helpertext = '';
+    /** Text label placed above the input field */
+    this.label = '';
+    this.placeholder = '';
+    this.inputid = `${Math.random()}`;
+    this.name = '';
+    this.required = null;
+    this.type = 'text';
+    this.autocomplete = '';
+    this.valid = null;
+    this.value = '';
+    /** The maximum number of characters the user should be able to add, also adds a visible counter */
+    this.maxlength = '';
+    this.min = '';
+    this.max = '';
+    this.step = '';
+    this.pattern = '';
+    this.showText = false;
+  }
+  getTextMessage() {
+    if (this.error)
+      return this.error;
+    if (this.helpertext)
+      return this.helpertext;
+    return null;
+  }
+  toggleTextVisibility() {
+    this.showText = !this.showText;
+  }
+  getInputType() {
+    let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email', 'date', 'datetime-local', 'month', 'week', 'time'];
+    return (types.includes(this.type) && !this.showText) ? this.type : 'text';
+  }
+  setVal(e) {
+    var _a;
+    const target = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)[0];
+    this.value = target.value;
+  }
+  getClassNames() {
+    let classNames = 'pn-input ';
+    if (this.error.length > 0 || this.invalid)
+      classNames += 'error ';
+    if (this.valid)
+      classNames += 'valid ';
+    if (this.type === 'password')
+      classNames += 'password ';
+    if (this.error || this.invalid || this.valid)
+      classNames += 'icon ';
+    return classNames;
+  }
+  render() {
+    return (h(Host, { class: this.getClassNames() },
+      (this.label || this.maxlength) &&
+        h("div", { class: "label-container" },
+          this.label && h("label", { htmlFor: this.inputid }, this.label),
+          parseInt(this.maxlength) > 0 && h("label", { class: "char-count", htmlFor: this.inputid }, `${this.value.length}/${this.maxlength}`)),
+      h("div", { class: "input-container" },
+        h("input", { type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onInput: (e) => this.setVal(e), maxlength: this.maxlength ? this.maxlength : null, min: (this.min ? this.min : null), max: (this.max ? this.max : null), step: (this.step ? this.step : null), pattern: (this.pattern ? this.pattern : null) }),
+        h("svg", { class: "pn-input-checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" },
+          h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })),
+        this.type === 'password' && !this.disabled && h("button", { onClick: () => this.toggleTextVisibility() }, "Show")),
+      this.getTextMessage() &&
+        h("small", null,
+          this.error && h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }),
+          this.getTextMessage())));
+  }
+  static get is() { return "pn-marketweb-input"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-marketweb-input.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-marketweb-input.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "error": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Error message; will take precedence over helpertext if both are provided (applies invalid styles automatically)"
+      },
+      "attribute": "error",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Error state without message (If you want to control the error messaging on your own)"
+      },
+      "attribute": "invalid",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "helpertext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text message placed underneath the input field"
+      },
+      "attribute": "helpertext",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text label placed above the input field"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "inputid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "inputid",
+      "reflect": false,
+      "defaultValue": "`${Math.random()}`"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "type": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'text'"
+    },
+    "autocomplete": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "autocomplete",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "valid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "valid",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "maxlength": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The maximum number of characters the user should be able to add, also adds a visible counter"
+      },
+      "attribute": "maxlength",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "min": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "max": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "step": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "step",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "pattern": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pattern",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "showText": {}
+  }; }
+}

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

@@ -1,7 +1,7 @@
 import readme from "./readme.md";
 
 export default {
-  title: "input/Filter search field",
+  title: "input/Market web search field",
   parameters: {
     notes: readme,
     layout: 'centered'
@@ -10,7 +10,7 @@ export default {
 
 const Template = ({ ...args }) => {
   return `
-    <pn-filter-search
+    <pn-marketweb-search
       label="${args.label}"
       name="${args.name}"
       inputid="${args.inputid}"
@@ -20,7 +20,19 @@ const Template = ({ ...args }) => {
       disabled=${args.disabled}
       loading=${args.loading}
       light="${args.light}"
-      ></pn-filter-search>
+      list="listexample"
+      ></pn-marketweb-search>
+      <datalist id="listexample">
+      <option>Autocomplete example</option>
+      <option>More autocomplete examples</option>
+      </datalist>
+      <script>
+      // window.setTimeout(function() {
+      //   const newOpt = document.createElement("option");
+      //   newOpt.innerHTML = "new item";
+      //   document.getElementById("listexample").appendChild(newOpt);
+      // }, 500);
+      </script>
   `;
 };
 export const Primary = Template.bind({});

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

@@ -66,28 +66,33 @@
   align-items: center;
   justify-content: center;
 }
+:host[list] :host > .input-container .button-container {
+  display: none;
+}
 :host > .input-container button {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(100%, -50%);
-  background: none;
+  background: #FFFFFF;
   border: none;
   color: #005D92;
   padding: 0.3rem;
+  margin: 0;
+  font-size: 0.875em;
   border-radius: 50%;
   outline: none;
   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;
   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 {
   box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
-  background: #8EDDF9;
 }
-:host > .input-container button:hover {
+:host > .input-container button:hover, :host > .input-container button:focus {
   background: #E0F8FF;
 }
 :host > .input-container button:active {
@@ -98,44 +103,44 @@
   fill: white;
 }
 
-:host.searching button.search {
+:host .searching button.search {
   transform: translate(150%, -50%);
 }
-:host.searching button.clear {
+:host .searching button.clear {
   transform: translate(-50%, -50%);
 }
 
 /*---------------------------------------Button Variants-------------------------------------------*/
-:host.button-none input,
-:host.button-icon-inline input {
+:host .button-none input,
+:host .button-icon-inline input {
   padding-right: 3.3em;
 }
-:host.button-none pn-spinner,
-:host.button-icon-inline pn-spinner {
+:host .button-none pn-spinner,
+:host .button-icon-inline pn-spinner {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(100%, -50%);
   transition: transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;
 }
-:host.button-none button.search,
-:host.button-icon-inline button.search {
+:host .button-none button.search,
+:host .button-icon-inline button.search {
   transform: translate(-50%, -50%);
 }
-:host.button-none.loading button,
-:host.button-icon-inline.loading button {
+:host .button-none.loading button,
+:host .button-icon-inline.loading button {
   transform: translate(100%, -50%);
 }
-:host.button-none.loading pn-spinner,
-:host.button-icon-inline.loading pn-spinner {
+:host .button-none.loading pn-spinner,
+:host .button-icon-inline.loading pn-spinner {
   transform: translate(-50%, -50%);
 }
 
-:host.button-none.searching button.search {
+:host .button-none.searching button.search {
   transform: translate(100%, -50%);
 }
 
-:host.button-icon > pn-button[data-loading=true] .pn-button-bg {
+:host .button-icon > pn-button[data-loading=true] .pn-button-bg {
   left: 50%;
   transform: translateX(-50%);
 }

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/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>