@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/ts/components/address-lookup/address-lookup.component.ts

@@ -1,22 +1,28 @@
-// @ts-nocheck
 import Cookies from 'js-cookie';
 
 // Data layer Web component created
+declare global {
+  interface Window {
+    dataLayer: Array<object>;
+  }
+}
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "Address Lookup"
+  event: 'customElementRegistered',
+  element: 'Address Lookup',
 });
 
-
 class iamAddressLookup extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    this.attachShadow({ mode: 'open'});
-    
-    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
-    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+    const coreCSS = document.body.hasAttribute('data-core-css')
+      ? document.body.getAttribute('data-core-css')
+      : `${assetLocation}/css/core.min.css`;
     const loadCSS = `@import "${assetLocation}/css/components/address-lookup.css";`;
 
     const template = document.createElement('template');
@@ -56,11 +62,10 @@ class iamAddressLookup extends HTMLElement {
       </div>
     </div>
     `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
   }
 
-	async connectedCallback() {
-
+  async connectedCallback() {
     const component = this;
     const wrapper = this.shadowRoot.querySelector('.wrapper');
     const lookup = this.shadowRoot.querySelector('[name="postcode"]');
@@ -70,185 +75,156 @@ class iamAddressLookup extends HTMLElement {
     const list = this.shadowRoot.querySelector('datalist');
     const switchManualBtn = this.shadowRoot.querySelector('.switch-to-manual-btn');
     const switchLookupBtn = this.shadowRoot.querySelector('.switch-to-lookup-btn');
-    const title = this.hasAttribute('data-title') ? this.getAttribute('data-title')  : "Property address";
+    const title = this.hasAttribute('data-title') ? this.getAttribute('data-title') : 'Property address';
     const preFilledAddressBtn = this.shadowRoot.querySelector('.pre-filled-address + button');
 
-  
     Array.from(this.shadowRoot.querySelectorAll('.title')).forEach((titleElement, index) => {
-
       titleElement.innerHTML = title;
     });
 
-    function checkFilled(component){
-
-      let preFilledAddress = component.shadowRoot.querySelector('.pre-filled-address');
+    function checkFilled(component) {
+      const preFilledAddress = component.shadowRoot.querySelector('.pre-filled-address');
       let preFilled = true;
-      preFilledAddress.innerHTML = "";
+      preFilledAddress.innerHTML = '';
 
-      Array.from(component.querySelectorAll('input[required],input[data-required],select[required],select[data-required]')).forEach((input, index) => {
+      Array.from(
+        component.querySelectorAll('input[required],input[data-required],select[required],select[data-required]')
+      ).forEach((input, index) => {
         const value = input.value;
 
-        if(!value)
-          preFilled = false;
-        else
-          preFilledAddress.innerHTML += value+(/^-?\d+$/.test(value) ? ' ' : ', ');
+        if (!value) preFilled = false;
+        else preFilledAddress.innerHTML += value + (/^-?\d+$/.test(value) ? ' ' : ', ');
       });
 
       preFilledAddress.innerHTML = preFilledAddress.innerHTML.slice(0, -2);
 
-      if(preFilled){
+      if (preFilled) {
         preFilledWrapper.classList.remove('js-hide');
         lookupWrapper.classList.add('js-hide');
         manualWrapper.classList.add('js-hide');
       }
     }
     checkFilled(this);
-    
-    this.addEventListener('filled', (event) => {
 
+    this.addEventListener('filled', (event) => {
       checkFilled(this);
     });
 
+    if (this.hasAttribute('data-use')) {
+      const useLabel = this.hasAttribute('data-use-label') ? this.getAttribute('data-use-label') : 'Use saved address';
+      const useCheckbox = `<div><input type="checkbox" name="use" id="use" value="yes"><label for="use">${useLabel}</label></div>`;
 
-    if(this.hasAttribute('data-use')){
+      lookupWrapper.insertAdjacentHTML('afterbegin', useCheckbox);
 
-      let useLabel = this.hasAttribute('data-use-label') ? this.getAttribute('data-use-label') : 'Use saved address';
-      let useCheckbox =`<div><input type="checkbox" name="use" id="use" value="yes"><label for="use">${useLabel}</label></div>`;
-      
-      lookupWrapper.insertAdjacentHTML('afterbegin',useCheckbox);
-        
       this.shadowRoot.addEventListener('change', (event) => {
+        if (event && event.target instanceof HTMLElement && event.target.closest('[name="use"]')) {
+          const checkbox = event.target.closest('[name="use"]');
 
-        if (event && event.target instanceof HTMLElement && event.target.closest('[name="use"]')){
-
-          let checkbox = event.target.closest('[name="use"]');
-
-          if(checkbox.checked){
-                  
+          if (checkbox.checked) {
             lookupWrapper.classList.add('js-hide');
             manualWrapper.classList.remove('js-hide');
 
-            let values = JSON.parse(this.getAttribute('data-use'));
-          
+            const values = JSON.parse(this.getAttribute('data-use'));
+
             Object.keys(values).forEach((key, index) => {
-  
-              let value = values[key];
-              if(this.querySelector(`[data-name="${key}"]`))
-                this.querySelector(`[data-name="${key}"]`).value = value;
-              else if(this.querySelector(`[name="${key}"]`))
-                this.querySelector(`[name="${key}"]`).value = value;
+              const value = values[key];
+              if (this.querySelector(`[data-name="${key}"]`)) this.querySelector(`[data-name="${key}"]`).value = value;
+              else if (this.querySelector(`[name="${key}"]`)) this.querySelector(`[name="${key}"]`).value = value;
             });
           }
         }
       });
     }
 
-    if(this.hasAttribute('data-manual')){
+    if (this.hasAttribute('data-manual')) {
       lookupWrapper.classList.add('js-hide');
       manualWrapper.classList.remove('js-hide');
 
       Array.from(manualWrapper.querySelectorAll('[data-required]')).forEach((input, index) => {
-        input.setAttribute('required','true');
+        input.setAttribute('required', 'true');
       });
     }
-      
-    function openManualWrapper (){
+
+    function openManualWrapper() {
       lookupWrapper.classList.add('js-hide');
       manualWrapper.classList.remove('js-hide');
 
       Array.from(manualWrapper.querySelectorAll('[data-required]')).forEach((input, index) => {
-        input.setAttribute('required','true');
+        input.setAttribute('required', 'true');
       });
 
       manualWrapper.scrollIntoView();
     }
 
     preFilledAddressBtn.addEventListener('click', (event) => {
-
       preFilledWrapper.classList.add('js-hide');
       openManualWrapper();
     });
     switchManualBtn.addEventListener('click', (event) => {
-
       openManualWrapper();
     });
     switchLookupBtn.addEventListener('click', (event) => {
-
       lookupWrapper.classList.remove('js-hide');
       manualWrapper.classList.add('js-hide');
 
       lookupWrapper.scrollIntoView();
     });
 
-
     lookup.addEventListener('keyup', (event) => {
-
-      if(lookup.value.length >= 3)
-        search(lookup.value);
+      if (lookup.value.length >= 3) search(lookup.value);
     });
 
     lookup.addEventListener('change', (event) => {
-
-      if(lookup.value.length >= 3){
-        
+      if (lookup.value.length >= 3) {
         search(lookup.value);
 
-        if(list.querySelector(`[value="${lookup.value}"]`)){
-         
-        
+        if (list.querySelector(`[value="${lookup.value}"]`)) {
           lookupWrapper.classList.add('js-hide');
           manualWrapper.classList.remove('js-hide');
 
-          let values = JSON.parse(list.querySelector(`[value="${lookup.value}"]`).getAttribute('data-values'));
-          
-          Object.keys(values).forEach((key, index) => {
+          const values = JSON.parse(list.querySelector(`[value="${lookup.value}"]`).getAttribute('data-values'));
 
-            let value = values[key];
-            if(this.querySelector(`[data-name="${key}"]`) && value != '')
+          Object.keys(values).forEach((key, index) => {
+            const value = values[key];
+            if (this.querySelector(`[data-name="${key}"]`) && value != '')
               this.querySelector(`[data-name="${key}"]`).value = value;
-            else if(this.querySelector(`[data-name-alt="${key}"]`) && value != '')
+            else if (this.querySelector(`[data-name-alt="${key}"]`) && value != '')
               this.querySelector(`[data-name-alt="${key}"]`).value = value;
-            else if(this.querySelector(`[name="${key}"]`) && value != '')
+            else if (this.querySelector(`[name="${key}"]`) && value != '')
               this.querySelector(`[name="${key}"]`).value = value;
-            
-            if(this.querySelector(`[data-name-2="${key}"]`))
-              this.querySelector(`[data-name-2="${key}"]`).value += ' '+value;
+
+            if (this.querySelector(`[data-name-2="${key}"]`))
+              this.querySelector(`[data-name-2="${key}"]`).value += ' ' + value;
           });
 
           // Focus on first input
           this.querySelector('[name]').focus();
 
           Array.from(this.querySelectorAll('[data-required]')).forEach((input, index) => {
-            input.setAttribute('required','true');
+            input.setAttribute('required', 'true');
           });
           lookup.removeAttribute('required');
 
-          if(this.shadowRoot.querySelector('[name="use"]'))
+          if (this.shadowRoot.querySelector('[name="use"]'))
             this.shadowRoot.querySelector('[name="use"]').checked = false;
         }
       }
-
     });
 
-
-
     const search = async (postcode) => {
-      
       let ajaxURL = this.getAttribute('data-url');
       ajaxURL += `${encodeURI(postcode)}`;
-      
+
       // Setup controller vars if not already set
-      if(!window.controller)
-      window.controller = [];
+      if (!window.controller) window.controller = [];
 
       // Abort if controller already present for this url
-      if(window.controller[ajaxURL])
-      window.controller[ajaxURL].abort();
+      if (window.controller[ajaxURL]) window.controller[ajaxURL].abort();
 
       // Create a new controller so it can be aborted if new fetch made
       window.controller[ajaxURL] = new AbortController();
       const { signal } = controller[ajaxURL];
-      
+
       try {
         await fetch(ajaxURL, {
           signal: signal,
@@ -258,56 +234,44 @@ class iamAddressLookup extends HTMLElement {
             'Content-Type': 'application/json',
             Accept: 'application/json',
             'X-Requested-With': 'XMLHttpRequest',
-            'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN')
-          })
+            'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'),
+          }),
         })
-        .then((response) => response.json()).then((response) => {
-          
-          // populate datalist
-          let listString = '';
-          response.forEach((address, index) => {
-
-            // Deal with agent platform response
-            if(typeof address.value == "object"){
-              let values = JSON.stringify(address.value);
-              listString += `<option value="${address['label']}, ${postcode}" data-values='${values}'></option>`;
-            }
-            else {
-              let values = JSON.stringify(address);
-
-              if(component.hasAttribute('data-display-text')){
-
-                listString += `<option value="${address[component.getAttribute('data-display-text')]}, ${postcode}" data-values='${values}'></option>`;
-              }
-              else {
-
-                let itemString = '';
-                for (const [key, value] of Object.entries(address)) {
-
-                  if(key == "address_number_name")
-                    itemString += `${value} `;
-                  else if(key != "postcode" && key != "address_title")
-                    itemString += `${value}${(/^-?\d+$/.test(value)?'':',')} `;
+          .then((response) => response.json())
+          .then((response) => {
+            // populate datalist
+            let listString = '';
+            response.forEach((address, index) => {
+              // Deal with agent platform response
+              if (typeof address.value == 'object') {
+                const values = JSON.stringify(address.value);
+                listString += `<option value="${address['label']}, ${postcode}" data-values='${values}'></option>`;
+              } else {
+                const values = JSON.stringify(address);
+
+                if (component.hasAttribute('data-display-text')) {
+                  listString += `<option value="${address[component.getAttribute('data-display-text')]}, ${postcode}" data-values='${values}'></option>`;
+                } else {
+                  let itemString = '';
+                  for (const [key, value] of Object.entries(address)) {
+                    if (key == 'address_number_name') itemString += `${value} `;
+                    else if (key != 'postcode' && key != 'address_title')
+                      itemString += `${value}${/^-?\d+$/.test(value) ? '' : ','} `;
+                  }
+
+                  listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
                 }
-                
-                listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
               }
-              
-            }
-
+            });
+            list.innerHTML = listString;
 
+            return response;
           });
-          list.innerHTML = listString;
-
-          return response;
-        });
       } catch (error) {
         console.log(error);
       }
-      
-    }
-
+    };
   }
 }
 
-export default iamAddressLookup;
+export default iamAddressLookup;

package/assets/ts/components/applied-filters/README.md

@@ -17,4 +17,4 @@ import('../node_modules/@iamproperty/components/assets/js/components/applied-fil
 <iam-applied-filters></iam-applied-filters>
 ```
 
-To add an input to the applied filters an attribute of **data-filter-text** needs to be supplied so that the JavaScript knows to listen for the value to change. This attribute can also be used on a wrapper for mulitple input filters also and dynamic values can also be given. **$value** passes the inputs value as the filter text and **$1,$2,$3...** will pass the corresponding child input value to the text.
+To add an input to the applied filters an attribute of **data-filter-text** needs to be supplied so that the JavaScript knows to listen for the value to change. This attribute can also be used on a wrapper for mulitple input filters also and dynamic values can also be given. **$value** passes the inputs value as the filter text and **$1,$2,$3...** will pass the corresponding child input value to the text.

package/assets/ts/components/applied-filters/applied-filters.component.ts

@@ -1,25 +1,27 @@
 // @ts-nocheck
-import createAppliedFilters from "../../modules/applied-filters";
+import createAppliedFilters from '../../modules/applied-filters';
 
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "Applied Filters"
+  event: 'customElementRegistered',
+  element: 'Applied Filters',
 });
 
-
 class iamAppliedFilters extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    this.attachShadow({ mode: 'open'});
-    
-    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
-    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+    const coreCSS = document.body.hasAttribute('data-core-css')
+      ? document.body.getAttribute('data-core-css')
+      : `${assetLocation}/css/core.min.css`;
     const loadCSS = `@import "${assetLocation}/css/components/applied-filters.css";`;
 
-    let classList = this.classList.toString();
+    const classList = this.classList.toString();
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
@@ -33,10 +35,9 @@ class iamAppliedFilters extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-
-    createAppliedFilters(this,this.shadowRoot.querySelector('.applied-filters'));
+  connectedCallback() {
+    createAppliedFilters(this, this.shadowRoot.querySelector('.applied-filters'));
   }
 }
 
-export default iamAppliedFilters;
+export default iamAppliedFilters;

package/assets/ts/components/barchart/barchart.component.ts

@@ -1,18 +1,27 @@
 // @ts-nocheck
-import {addClasses,setupChart,setEventListener,setEventObservers,setLongestLabel,setLongestValue,createTooltips} from "../../modules/chart.module";
-import {trackComponent, trackComponentRegistered} from "../_global";
-
-trackComponentRegistered("iam-barchart");
+import {
+  addClasses,
+  setupChart,
+  setEventListener,
+  setEventObservers,
+  setLongestLabel,
+  setLongestValue,
+  createTooltips,
+} from '../../modules/chart.module';
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-barchart');
 
 class iamBarChart extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    this.attachShadow({ mode: 'open'});
+    this.attachShadow({ mode: 'open' });
 
-    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
     const loadCSS = `@import "${assetLocation}/css/components/barchart.component.css";`;
-    
+
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
@@ -34,11 +43,10 @@ class iamBarChart extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-
+  connectedCallback() {
     const chartComponent = this;
-    const chartID = `chart-${Date.now()+(Math.floor(Math.random() * 100) + 1)}`;
-    const orginalTable =  this.querySelector('table');
+    const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;
+    const orginalTable = this.querySelector('table');
     const clonedTable = orginalTable.cloneNode(true);
     const chart = this.shadowRoot.querySelector('.chart');
     const chartOuter = this.shadowRoot.querySelector('.chart__outer');
@@ -47,30 +55,25 @@ class iamBarChart extends HTMLElement {
     chart.appendChild(clonedTable);
     addClasses(chartComponent, chartOuter);
 
-    if(barCount <= 10){
-
+    if (barCount <= 10) {
       chartComponent.classList.add('chart--fit-content');
     }
 
-    if(barCount <= 5){
-
+    if (barCount <= 5) {
       chartComponent.classList.add('chart--no-scale');
     }
 
-    setupChart(chartComponent,chartOuter,clonedTable);
-    setEventObservers(chartComponent,chartOuter);
-    setEventListener(chartComponent,chartOuter);
+    setupChart(chartComponent, chartOuter, clonedTable);
+    setEventObservers(chartComponent, chartOuter);
+    setEventListener(chartComponent, chartOuter);
     setLongestLabel(chartOuter);
     setLongestValue(chartOuter);
     createTooltips(chartOuter);
 
-    trackComponent(chartComponent,"iam-barchart",['view-change']);
+    trackComponent(chartComponent, 'iam-barchart', ['view-change']);
   }
 
-  attributeChangedCallback(attrName, oldVal, newVal) {
-    
-
-  }
+  attributeChangedCallback(attrName, oldVal, newVal) {}
 }
 
-export default iamBarChart;
+export default iamBarChart;