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

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;
+}

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%);
 }