@postnord/pn-marketweb-components 2.4.21 → 2.4.22

package/collection/components/input/pn-address-autofill/pn-address-autofill.js

@@ -0,0 +1,537 @@
+import { h, Host } from '@stencil/core';
+import { MarketWebContextService } from '../../../globals/MarketWebContextService';
+import { FetchHelper } from '../../../globals/FetchHelper';
+import { debounce } from 'debounce';
+export class PnAddressAutofill {
+  constructor() {
+    this.pnInputPostalCode = null;
+    this.pnInputCity = null;
+    this.pnInputStreetAddress = null;
+    this.pnInputStreetNumber = null;
+    this.postalCodeInputField = null;
+    this.streetAddressInputField = null;
+    this.streetNumberInputField = null;
+    this.pnInputHiddenValue = null;
+    this.endpointPath = '/api/location/get-by-location';
+    this._postalCodeProps = null;
+    this._cityProps = null;
+    this._streetAddressProps = null;
+    this._streetNumberProps = null;
+    this.fetchHelper = new FetchHelper('PostalCodeCityAutofill');
+    this.filterStreetNames = (data) => {
+      const addresses = [];
+      this.streetAdressArr = null;
+      data.addresses.forEach(item => {
+        if (item.postalCode.postalCity === this.city && !addresses.includes(item.street)) {
+          addresses.push(item.street);
+        }
+      });
+      this.streetAdressArr = addresses;
+    };
+    this.filterStreetNumbers = (data) => {
+      const streetNumbersResult = [];
+      data.addresses.forEach(item => {
+        if (item.postalCode.postalCode === this.postalCode) {
+          const { numberFrom, numberTo } = item;
+          const from = parseInt(numberFrom);
+          const to = parseInt(numberTo);
+          for (let i = from; i <= to; i++) {
+            const nrString = i.toString();
+            if (!streetNumbersResult.includes(nrString)) {
+              streetNumbersResult.push(i.toString());
+            }
+          }
+        }
+      });
+      this.streetNumberArr = streetNumbersResult;
+    };
+    this.market = null;
+    this.environment = null;
+    this.endpoint = null;
+    this.cache = true;
+    this.countryCode = null;
+    this.postalCodeProps = null;
+    this.cityProps = null;
+    this.streetAddressProps = null;
+    this.streetNumberProps = null;
+    this.streetAdressArr = null;
+    this.streetNumberArr = null;
+    this.city = null;
+    this.postalCode = null;
+    this.streetAddress = null;
+    this.streetNumber = null;
+    this.fullAddress = null;
+  }
+  componentWillLoad() {
+    this.setInitialValues();
+    this._postalCodeProps = this.setProps(this.postalCodeProps);
+    this._cityProps = this.setProps(this.cityProps);
+    this._streetAddressProps = this.setProps(this.streetAddressProps);
+    this._streetNumberProps = this.setProps(this.streetNumberProps);
+  }
+  setProps(props) {
+    if (typeof props === 'string') {
+      return JSON.parse(props);
+    }
+    else {
+      return props;
+    }
+  }
+  componentDidLoad() {
+    this.postalCodeInputField = this.pnInputPostalCode.querySelector('input');
+    this.streetAddressInputField = this.pnInputStreetAddress.querySelector('input');
+    this.streetNumberInputField = this.pnInputStreetNumber.querySelector('input');
+    this.addEventHandlers();
+  }
+  async setInitialValues(href = window.location.href) {
+    var _a;
+    const marketWebContextService = new MarketWebContextService(href);
+    if (!this.environment) {
+      this.environment = await marketWebContextService.getEnvironmentName();
+    }
+    if (!this.endpoint && ((_a = this.environment) === null || _a === void 0 ? void 0 : _a.indexOf('local')) === -1) {
+      this.endpoint = await marketWebContextService.getEndpoint(this.environment, this.market);
+    }
+    if (!this.endpoint) {
+      this.endpoint = '';
+    }
+  }
+  addEventHandlers() {
+    const postalCodeSearch = debounce(this.fetchData.bind(this, this.postalCodeInputField), 1000);
+    this.postalCodeInputField.addEventListener('keyup', postalCodeSearch);
+    this.streetAddressInputField.addEventListener('keyup', this.handleStreetAddressDropdown.bind(this));
+    this.streetNumberInputField.addEventListener('focus', this.handleStreetNumberDropdown.bind(this));
+    this.addFormFieldEvent();
+  }
+  addFormFieldEvent() {
+    const allInputs = this.hostElement.querySelectorAll('input');
+    allInputs.forEach(element => {
+      ['keyup', 'change'].forEach(eventName => {
+        const debounceUpdate = debounce(this.updateHiddenValue.bind(this), 1000);
+        element.addEventListener(eventName, debounceUpdate);
+      });
+    });
+  }
+  updateHiddenValue(e) {
+    if (e.target === this.streetNumberInputField) {
+      this.streetNumber = this.streetNumberInputField.value;
+    }
+    if (this.postalCode && this.city && this.streetAddress && this.streetNumber) {
+      this.fullAddress = `${this.streetAddress} ${this.streetNumber}, ${this.city} ${this.postalCode}`;
+    }
+    else {
+      this.fullAddress = '';
+    }
+    this.addresscomplete.emit(this.fullAddress);
+  }
+  async fetchData(field, e) {
+    var _a;
+    if (e) {
+      e.preventDefault();
+      if (e.key === 'Tab') {
+        if (this.city) {
+          return;
+        }
+      }
+    }
+    let query = '';
+    const isPostalCodeSearch = e && e.target === this.postalCodeInputField;
+    const isStreetAddressSearch = field === this.streetAddressInputField && this.city && this.city.length;
+    const isStreetNumberSearch = field === this.streetNumberInputField && this.city && this.city.length && this.streetAddress && this.streetAddress.length;
+    if (isPostalCodeSearch) {
+      query = this.postalCodeInputField.value;
+      this.streetAdressArr = null;
+      this.streetAddressInputField.value = '';
+      this.streetNumberArr = null;
+      this.streetNumberInputField.value = '';
+      this.city = null;
+      this.streetAddress = null;
+      this.streetNumber = null;
+    }
+    if (isStreetAddressSearch) {
+      query = `${this.streetAddressInputField.value}, ${this.city}`;
+      this.streetNumberArr = null;
+      this.streetNumberInputField.value = '';
+      this.streetNumber = null;
+    }
+    if (isStreetNumberSearch) {
+      this.streetAdressArr = null;
+      query = `${this.streetAddress}, ${this.city}`;
+    }
+    if (query.length > 0) {
+      const endpointBase = this.endpoint.lastIndexOf('/') === this.endpoint.length - 1 ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;
+      const fetchUrl = `${endpointBase}${this.endpointPath}?countryCode=${this.countryCode}&query=${query}`;
+      const data = (await this.fetchHelper.fetchJson(fetchUrl, {
+        mode: 'cors',
+      }, this.cache));
+      if (data) {
+        if (isPostalCodeSearch) {
+          this.city = data.postalCodes ? (_a = data.postalCodes[0]) === null || _a === void 0 ? void 0 : _a.postalCity : null;
+        }
+        if (isStreetAddressSearch && data.addresses) {
+          this.postalCode = this.postalCodeInputField.value;
+          this.filterStreetNames(data);
+        }
+        if (isStreetNumberSearch && data.addresses) {
+          this.filterStreetNumbers(data);
+        }
+      }
+    }
+  }
+  async handleStreetAddressDropdown(e) {
+    const target = e.target;
+    if (target === this.streetAddressInputField && target.value.length) {
+      if (!this.streetAdressArr || !this.streetAdressArr.length) {
+        await this.fetchData(this.streetAddressInputField, null);
+      }
+    }
+    if (!target.value || !target.value.length) {
+      this.streetAdressArr = null;
+    }
+    if (this.streetAdressArr && this.streetAdressArr.length) {
+      this.autoComplete(e, this.streetAdressArr);
+    }
+  }
+  async handleStreetNumberDropdown(e) {
+    e.preventDefault();
+    const target = e.target;
+    if (target === this.streetNumberInputField) {
+      if (!this.streetNumberArr || !this.streetNumberArr.length) {
+        await this.fetchData(this.streetNumberInputField, null);
+      }
+      if (this.streetNumberArr) {
+        this.autoComplete(e, this.streetNumberArr);
+      }
+    }
+  }
+  autoComplete(e, arr) {
+    const inputField = e.target;
+    if (arr.length < 1) {
+      return;
+    }
+    let currentFocus = 0;
+    inputField.addEventListener('input', () => {
+      const val = inputField.value;
+      this.closeAllLists(inputField);
+      if (!val) {
+        return;
+      }
+      currentFocus = -1;
+      let list = document.createElement('div');
+      list.setAttribute('id', 'autocomplete-list' + inputField.name);
+      list.setAttribute('class', 'autocomplete-items');
+      inputField.parentElement.appendChild(list);
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].substring(0, val.length).toUpperCase() == val.toUpperCase()) {
+          let option = document.createElement('div');
+          option.innerHTML = '<strong>' + arr[i].substring(0, val.length) + '</strong>';
+          option.innerHTML += arr[i].substring(val.length);
+          option.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
+          option.addEventListener('click', clickEvent => {
+            const inputParrent = inputField.closest('pn-marketweb-input');
+            let eventTarget = clickEvent.target;
+            if (eventTarget.nodeName === 'STRONG') {
+              eventTarget = eventTarget.parentElement;
+            }
+            inputParrent.value = eventTarget.getElementsByTagName('input')[0].value;
+            if (inputField === this.streetNumberInputField) {
+              this.streetNumber = inputParrent.value;
+            }
+            if (inputField === this.streetAddressInputField) {
+              this.streetAddress = inputParrent.value;
+            }
+            this.closeAllLists(clickEvent.target);
+            inputField.focus();
+          });
+          list.appendChild(option);
+        }
+      }
+    });
+    inputField.addEventListener('keydown', keydownEvent => {
+      const listElement = document.getElementById('autocomplete-list' + inputField.name);
+      let element;
+      if (listElement) {
+        element = listElement.getElementsByTagName('div');
+      }
+      else {
+        element = listElement;
+      }
+      //If arrow DOWN key is pressed
+      if (keydownEvent.keyCode == 40) {
+        currentFocus++;
+        this.addActive(element, currentFocus);
+      }
+      //If the arrow UP key is pressed
+      if (keydownEvent.keyCode == 38) {
+        currentFocus--;
+        this.addActive(element, currentFocus);
+      }
+      //If the ENTER key is pressed
+      if (keydownEvent.keyCode == 13) {
+        keydownEvent.preventDefault();
+        if (currentFocus > -1) {
+          if (element) {
+            element[currentFocus].click();
+          }
+        }
+      }
+    });
+  }
+  //close all autocomplete lists in the document, except the one passed as an argument:
+  closeAllLists(elmnt) {
+    const lists = document.getElementsByClassName('autocomplete-items');
+    for (let i = 0; i < lists.length; i++) {
+      if (elmnt != lists[i]) {
+        lists[i].parentNode.removeChild(lists[i]);
+      }
+    }
+  }
+  //a function to classify an item as "active":
+  addActive(elmnt, currentFocus) {
+    if (!elmnt)
+      return;
+    this.removeActive(elmnt);
+    if (currentFocus >= elmnt.length)
+      currentFocus = 0;
+    if (currentFocus < 0)
+      currentFocus = elmnt.length - 1;
+    elmnt[currentFocus].classList.add('autocomplete-active');
+  }
+  //a function to remove the "active" class from all autocomplete items:
+  removeActive(elmnt) {
+    for (let i = 0; i < elmnt.length; i++) {
+      elmnt[i].classList.remove('autocomplete-active');
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    return (h(Host, { class: "pn-address-autofill" }, ((_a = this._postalCodeProps) === null || _a === void 0 ? void 0 : _a.postalCodeCityLabel) ? (h("div", { class: "label-container" }, h("label", null, `${this._postalCodeProps.postalCodeCityLabel}`))) : null, h("div", { class: "input-container-row" }, h("pn-marketweb-input", { type: "text", name: (_b = this._postalCodeProps) === null || _b === void 0 ? void 0 : _b.postalCodeInputName, required: (_c = this._postalCodeProps) === null || _c === void 0 ? void 0 : _c.postalCodeInputRequired, placeholder: (_d = this._postalCodeProps) === null || _d === void 0 ? void 0 : _d.postalCodeInputPlaceholder, ref: el => (this.pnInputPostalCode = el), autocomplete: "off", helpertext: (_e = this._postalCodeProps) === null || _e === void 0 ? void 0 : _e.postalCodeInputHelpertext }), h("pn-marketweb-input", { type: "text", name: (_f = this._cityProps) === null || _f === void 0 ? void 0 : _f.cityInputName, disabled: true, value: this.city, placeholder: (_g = this._cityProps) === null || _g === void 0 ? void 0 : _g.cityInputPlaceholder, autocomplete: "off", helpertext: (_h = this._cityProps) === null || _h === void 0 ? void 0 : _h.cityInputHelpertext })), ((_j = this._streetAddressProps) === null || _j === void 0 ? void 0 : _j.streetAddressNumberLabel) ? (h("div", { class: "label-container" }, h("label", null, `${this._streetAddressProps.streetAddressNumberLabel}`))) : null, h("div", { class: "input-container-row" }, h("pn-marketweb-input", { type: "text", name: (_k = this._streetAddressProps) === null || _k === void 0 ? void 0 : _k.streetAddressInputName, required: (_l = this._streetAddressProps) === null || _l === void 0 ? void 0 : _l.streetAddressInputRequired, value: this.streetAddress, placeholder: (_m = this._streetAddressProps) === null || _m === void 0 ? void 0 : _m.streetAddressInputPlaceholder, ref: el => (this.pnInputStreetAddress = el), autocomplete: "off", helpertext: (_o = this._streetAddressProps) === null || _o === void 0 ? void 0 : _o.streetAddressInputHelpertext }), h("pn-marketweb-input", { type: "text", name: (_p = this._streetNumberProps) === null || _p === void 0 ? void 0 : _p.streetNumberInputName, required: (_q = this._streetNumberProps) === null || _q === void 0 ? void 0 : _q.streetNumberInputRequired, value: this.streetNumber, placeholder: (_r = this._streetNumberProps) === null || _r === void 0 ? void 0 : _r.streetNumberInputPlaceholder, ref: el => (this.pnInputStreetNumber = el), autocomplete: "off", helpertext: (_s = this._streetNumberProps) === null || _s === void 0 ? void 0 : _s.streetNumberInputHelpertext }))));
+  }
+  static get is() { return "pn-address-autofill"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-address-autofill.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-address-autofill.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "market": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies which market we want to show (se,dk,fi,no,com)"
+        },
+        "attribute": "market",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "environment": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies which environment we're fetching data from. (production, preproduction, integration, localhost)"
+        },
+        "attribute": "environment",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "endpoint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "endpoint",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "cache": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cache",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "countryCode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "country-code",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "postalCodeProps": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | PostalCodeProps",
+          "resolved": "PostalCodeProps | string",
+          "references": {
+            "PostalCodeProps": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "postal-code-props",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "cityProps": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | CityProps",
+          "resolved": "CityProps | string",
+          "references": {
+            "CityProps": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "city-props",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "streetAddressProps": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | StreetAddressProps",
+          "resolved": "StreetAddressProps | string",
+          "references": {
+            "StreetAddressProps": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "street-address-props",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "streetNumberProps": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | StreetNumberProps",
+          "resolved": "StreetNumberProps | string",
+          "references": {
+            "StreetNumberProps": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "street-number-props",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "streetAdressArr": {},
+      "streetNumberArr": {},
+      "city": {},
+      "postalCode": {},
+      "streetAddress": {},
+      "streetNumber": {},
+      "fullAddress": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "addresscomplete",
+        "name": "addresscomplete",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/input/pn-address-autofill/pn-address-autofill.stories.js

@@ -0,0 +1,40 @@
+import readme from './readme.md';
+
+export default {
+  title: 'input/Address Autofill',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <pn-address-autofill
+      environment="${args.environment}"
+      market="${args.market}"
+      cache="${args.cache}"
+      country-code="${args.countryCode}"
+      postal-code-props='${args.postalCodeProps}'
+      city-props='${args.cityProps}'
+      street-address-props='${args.streetAddressProps}'
+      street-number-props='${args.streetNumberProps}'
+      >
+    </pn-address-autofill>`;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  environment: 'localhost',
+  market: 'se',
+  endpoint: 'https://localhost:51547/',
+  cache: true,
+  countryCode: 'se',
+  postalCodeProps:
+    '{"postalCodeCityLabel":"Postal Code and city labe","postalCodeInputName":"__postalcode","postalCodeInputPlaceholder":"Postal Code","postalCodeInputRequired":"true","postalCodeInputHelpertext":"Postal Code Helpertext"}',
+  cityProps: '{"cityInputName":"__city","cityInputPlaceholder":"City","cityInputHelpertext":"City Helpertext"}',
+  streetAddressProps:
+    '{"streetAddressNumberLabel":"Street and number Label","streetAddressInputName":"__streetaddress","streetAddressInputPlaceholder":"Street Address","streetAddressInputRequired":true,"streetAddressInputHelpertext":"Street Address Helpertext"}',
+  streetNumberProps:
+    '{"streetNumberInputName":"__streetnumber","streetNumberInputPlaceholder":"Street Number","streetNumberInputRequired":true,"streetNumberInputHelpertext":"Street Number Helpertext"}',
+};