@iamproperty/components 5.1.0-beta → 5.1.0-beta3

package/assets/sass/components/nav.global.scss

@@ -554,7 +554,7 @@ iam-nav details {
 
     &.search-open {
 
-      > *:not([slot="logo"]):not([slot="secondary"]) {
+      > *:not([slot="logo"]):not([slot="secondary"]):not([slot="search"]) {
         display: none!important;
       }
     }

package/assets/sass/elements/forms.scss

@@ -858,7 +858,7 @@ iam-fileupload {
     width: 100%;
   }
 
-  :is(.suffix,.prefix) {
+  :is(.suffix,.prefix):not(.mt-0) {
     margin: rem(8) 0 0 0!important;
   }
 }

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

@@ -34,7 +34,7 @@ class iamAddressLookup extends HTMLElement {
         <div>
         <label class="mb-2">Search <span class="title text-lowercase"></span> <span class="optional">(Optional)</span>
           <span>
-          <input type="text" name="postcode" list="address-lookup__addressess" autoComplete="new-password" aria-autocomplete="none" placeholder="Postcode" />
+          <input type="text" name="postcode" list="address-lookup__addressess" autocomplete="off" aria-autocomplete="none" placeholder="Postcode" />
           <span class="suffix fa-regular fa-search"></span>
           </span>
           <span class="invalid-feedback">Required Adddress fields missing</span>
@@ -251,9 +251,28 @@ class iamAddressLookup extends HTMLElement {
           let listString = '';
           response.forEach((address, index) => {
 
-            
-            let values = JSON.stringify(address.value);
-            listString += `<option value="${address['label']}, ${postcode}" data-values='${values}'></option>`;
+            // 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);
+
+              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}, `;
+              }
+
+              listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
+            }
+
+
           });
           list.innerHTML = listString;
 

package/assets/ts/components/nav/README.md

@@ -37,9 +37,6 @@ import('../node_modules/@iamproperty/components/assets/js/components/nav/nav.com
 
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
-| data-search  | String | - | Optional, displays a search button and form. The value passed through is used for the forms action attribute. |
-| data-list  | String | - | Optional string with an ID of a datalist, note this list needs to be added as an element in the component |
-| data-prevent-search  | String | - | Flag that prevents the search form submitting allowing it to used purely with JavaScript |
 | data-searcd-open  | String | - | Flag that opens the search bar on desktop on page load. |
 
 **Slots**
@@ -51,18 +48,10 @@ import('../node_modules/@iamproperty/components/assets/js/components/nav/nav.com
 | secondary | - | Moves the link upto the top of the navbar on desktop |
 | actions | - | A place to add buttons |
 | dual | - | Plave the link or list to the right of the nav, forcing the default slot to the left. |
+| search | - | A place to include a form with search functionality |
 
 **Class modifiers**
 
 - Adding a class of **.bg-primary** will change the background of the navbar without chaning the menu background. 
 - Adding a class of **.nav--sticky** will add etxra styling to make the navbar stick to the top of the page
-- Adding a class of **.nav--xs-sticky** will add etxra styling to make the navbar stick to the top of the page BUT only on the mobile view.
-
-**Dispatched events**
-
-| Event | Dispatched when | Details passed|
-| ------ | ------------- | ----------- |
-| search-keydown | When a user uses the search input field and triggers the keydown event. | { search: $inputValue } |
-| search-keyup | When a user uses the search input field and triggers the keyup event. | { search: $inputValue } |
-| search-change | When a user uses the search input field and triggers the change event. | { search: $inputValue } |
-| search-submit | When a user uses the search form and triggers the submit event. | { search: $inputValue } |
+- Adding a class of **.nav--xs-sticky** will add etxra styling to make the navbar stick to the top of the page BUT only on the mobile view.

package/assets/ts/components/nav/nav.component.ts

@@ -48,7 +48,6 @@ class iamNav extends HTMLElement {
         <slot name="menus"></slot>
       </div>      
     </div>
-    <div class="lists"></div>
     <div class="backdrop" part="backdrop"></div>
     `;
 
@@ -285,7 +284,7 @@ class iamNav extends HTMLElement {
     });
 
     // Search 
-    if(this.hasAttribute('data-search')){
+    if(this.querySelector('[slot="search"]')){
       menu.classList.add('has-search');
       let searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
 
@@ -293,24 +292,20 @@ class iamNav extends HTMLElement {
       searchWrapper.insertAdjacentHTML('afterbegin',`<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button" aria-controls="search-dialog">Open Search field</button>
       <dialog id="search-dialog">
       <div class="container">
-        <form action="${this.hasAttribute('data-search') ? this.getAttribute('data-search') : ''}" class="row" id="search-form">
+        <div class="row">
           <div class="col mb-0 ms-auto col-md-7">
-            <label for="search" class="visually-hidden">Search</label>
-            <button class="suffix me-0 mb-0"><i class="fa-regular fa-search"></i></button>
-            <input type="search" class="" id="search" name="search" required="" autocomplete="off" data-list="${this.hasAttribute('data-list') ? this.getAttribute('data-list') : ''}" />
+            <slot name="search"></slot>
           </div>
           <div class="col d-none d-md-block mw-fit-content ms-3">
             <button class="btn btn-compact btn-secondary fa-xmark-large m-0 mb-0" type="button" id="search-close">Close search field</button>
           </div>
-        </form>
+        </div>
       </div>
       </dialog>`);
       
       let searchButton = this.shadowRoot.querySelector('#search-button');
       let searchClose = this.shadowRoot.querySelector('#search-close');
       let searchDialog = this.shadowRoot.querySelector('#search-dialog');
-      let searchInput = this.shadowRoot.querySelector('#search');
-      let searchForm = this.shadowRoot.querySelector('#search-form');
 
       if(this.hasAttribute('data-search-open')){
         
@@ -336,44 +331,6 @@ class iamNav extends HTMLElement {
         searchButton.removeAttribute('aria-expanded');
       });
 
-      // Search events
-      searchInput.addEventListener('keydown', (event) => {
-
-        const keyupEvent = new CustomEvent("search-keydown", { detail: { search: searchInput.value } });
-        this.dispatchEvent(keyupEvent);
-      });
-
-      searchInput.addEventListener('keyup', (event) => {
-
-        if (searchInput.value.length >= 3 && searchInput.hasAttribute('data-list')) 
-          searchInput.setAttribute("list", searchInput.getAttribute('data-list'));
-        else
-          searchInput.removeAttribute("list");
-
-        const keyupEvent = new CustomEvent("search-keyup", { detail: { search: searchInput.value } });
-        this.dispatchEvent(keyupEvent);
-      });
-  
-      searchInput.addEventListener('change', (event) => {
-  
-        const changeEvent = new CustomEvent("search-change", { detail: { search: searchInput.value } });
-        this.dispatchEvent(changeEvent);
-      });
-
-      searchForm.addEventListener('submit', (event) => {
-        
-        if(this.hasAttribute('data-prevent-search'))
-          event.preventDefault();
-
-        const submitEvent = new CustomEvent("search-submit", { detail: { search: searchInput.value } });
-        this.dispatchEvent(submitEvent);
-      });
-
-      // Make sure any child lists are available to the search input
-      this.querySelectorAll('datalist').forEach((list) => {
-
-        iamNav.shadowRoot.querySelector('.lists').insertAdjacentElement('beforeend',list);
-      });
     }
   }
 }

package/assets/ts/components/search/search.component.ts

@@ -0,0 +1,177 @@
+// @ts-nocheck
+import Cookies from 'js-cookie';
+import { safeID, resolvePath, isTraversable } from '../../modules/helpers'
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "Search"
+});
+
+class iamSearch extends HTMLElement {
+
+  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`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <slot></slot>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	async connectedCallback() {
+
+    const searchWrapper = this;
+    const inputField = this.querySelector('input');
+    const valueSchema = this.hasAttribute('data-value-schema') ? this.getAttribute('data-value-schema') : 'value';
+    const displaySchema = this.hasAttribute('data-display-schema') ? this.getAttribute('data-display-schema') : 'label';
+    const loopSchema = this.hasAttribute('data-schema') ? this.getAttribute('data-schema') : '';
+    let datalist = this.querySelector('datalist');
+    let searched = [];
+
+    // Clone original input field, re-name and use for display purposes
+    const displayInputField = inputField.cloneNode();
+    inputField.setAttribute('name',`${inputField.getAttribute}-alt`);
+    inputField.removeAttribute('data-change-events');
+    displayInputField.removeAttribute('id');
+    
+    inputField.after(displayInputField);
+
+    // Hide original input field
+    inputField.setAttribute('type','hidden');
+
+    // if data list does not exist then create one and append
+    if(!datalist){
+
+      datalist = document.createElement("datalist");
+      let listID = safeID('list');
+      datalist.setAttribute('id',listID);
+      searchWrapper.appendChild(datalist);
+
+      displayInputField.setAttribute('list',listID);
+    }
+
+    // on change update oringinal field with the actual value and use displayed input for the nice display text
+    displayInputField.addEventListener('change', (event) => {
+
+      let match = datalist.querySelector(`option[value="${displayInputField.value}"]`);
+
+      if(match){
+        inputField.value = match.getAttribute('data-value');
+      }
+    });
+
+    // Search the endpoint when 3 characters has been added
+    if(searchWrapper.hasAttribute('data-url')){
+        
+      displayInputField.addEventListener('keyup', (event) => {
+
+        if(displayInputField.value.length == 3 && !searched.includes(displayInputField.value)){
+          search(displayInputField.value);
+          searched.push(displayInputField.value);
+        }
+      });
+
+      displayInputField.addEventListener('change', (event) => {
+
+        if(displayInputField.value.length >= 3 && !searched.includes(displayInputField.value.substring(0,3))){
+          search(displayInputField.value.substring(0,3));
+          searched.push(displayInputField.value.substring(0,3));
+        }
+      });
+    }
+    
+    const search = async (searchterm) => {
+      
+      let ajaxURL = searchWrapper.getAttribute('data-url');
+      ajaxURL += `${encodeURI(searchterm)}`;
+      
+      // Setup controller vars if not already set
+      if(!window.controller)
+      window.controller = [];
+  
+      // Abort if controller already present for this url
+      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,
+          method: 'get',
+          credentials: 'same-origin',
+          headers: new Headers({
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+            'X-Requested-With': 'XMLHttpRequest',
+            'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN')
+          })
+        })
+        .then((response) => response.json()).then((response) => {
+          
+          // populate datalist
+          let listString = '';
+          let loopValues = resolvePath(response, loopSchema, '');
+
+          if(isTraversable(loopValues) && typeof loopValues.forEach == 'function') {
+            loopValues.forEach((item, index) => {
+              let actualValue = resolvePath(item, valueSchema, '');
+              let displayValue = resolvePath(item, displaySchema, '').replace('\n',', ');
+
+              if(!datalist.querySelector(`option[data-value="${actualValue}"]`))
+                listString += `<option value="${displayValue}" data-value='${actualValue}'></option>`;
+            });
+          }
+          else if (typeof loopValues == 'object'){
+
+            for (const [key, value] of Object.entries(loopValues)) {
+
+              if(isTraversable(value) && typeof value.forEach == 'function') {
+                value.forEach((item, index) => {
+                  let actualValue = resolvePath(item, valueSchema, '');
+                  let displayValue = resolvePath(item, displaySchema, '').replace('\n',', ');
+    
+                  if(!datalist.querySelector(`option[data-value="${actualValue}"]`))
+                    listString += `<option value="${key}: ${displayValue}" data-value='${actualValue}'></option>`;
+                });
+              }
+            }
+          }
+          
+          datalist.innerHTML += listString;
+  
+          return response;
+        });
+
+      } catch (error) {
+        console.log(error);
+      }
+    }
+
+    if(searchWrapper.hasAttribute('data-prevent-submit')){
+
+      const form = searchWrapper.closest('form');
+
+      form.addEventListener('submit', (e) => {
+
+        e.preventDefault();
+      });
+    }
+  }
+}
+
+export default iamSearch;

package/assets/ts/modules/dynamicEvents.ts

@@ -77,43 +77,63 @@ const runEvent = (element,event,eventType) => {
   switch (event[eventType]){
     case "hide":
 
-      let hideElement =  document.querySelector(event['target'])
-      hideElement.classList.add('js-hide');
-
-      Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input, index) => {
-        
-          input.removeAttribute('required');
-      });
+      if(document.querySelector(event['target'])){
+          
+        let hideElement =  document.querySelector(event['target']);
+        hideElement.classList.add('js-hide');
+
+        Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+          
+            input.removeAttribute('required');
+        });
+      }
       break;
     case "show":
 
-      let showElement =  document.querySelector(event['target'])
-      showElement.classList.remove('js-hide');
-
-      Array.from(showElement.querySelectorAll('[data-required]')).forEach((input, index) => {
-        
-        if(!input.closest('.js-hide'))
-          input.setAttribute('required','true');
-      });
+      if(document.querySelector(event['target'])){
+            
+        let showElement =  document.querySelector(event['target']);
+        showElement.classList.remove('js-hide');
+
+        Array.from(showElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+          
+          if(!input.closest('.js-hide'))
+            input.setAttribute('required','true');
+        });
+      }
+      break;
+    case "populate-form":
+      populateForm(element,event);
+      break;
+    case "dispatchEvent":
+      let theEvent = new Event(event['value']);
+      document.querySelector(`${event['target']}`).dispatchEvent(theEvent);
       break;
-      case "populate-form":
-        populateForm(element,event);
-        break;
-      case "dispatchEvent":
-        let theEvent = new Event(event['value']);
-        document.querySelector(`${event['target']}`).dispatchEvent(theEvent);
-        break;
     case "setAttribute":
-      document.querySelector(`${event['target']}`).setAttribute(event['attribute'],event['value']);
+
+      Array.from(form.querySelectorAll(`${event['target']}`)).forEach(function(element,index){
+        element.setAttribute(event['attribute'],event['value']);
+      });
       break;
     case "removeAttribute":
-      document.querySelector(`${event['target']}`).removeAttribute(event['attribute']);
+      Array.from(form.querySelectorAll(`${event['target']}`)).forEach(function(element,index){
+        element.removeAttribute(event['attribute']);
+      });
       break;
     case "updateValue":
       document.querySelector(`${event['target']}`).value = event['value'] ? event['value'] : "";
       
       let changeEvent = new Event('change');
       document.querySelector(`${event['target']}`).dispatchEvent(changeEvent);
+      break;
+    case "submitForm":
+      document.querySelector(`${event['target']}`).submit();
+      break;
+    case "openLink":
+
+      if(document.querySelector(`${event['target']}`).value)
+        window.location.href = document.querySelector(`${event['target']}`).value;
+
       break;
     default:
       break;

package/assets/ts/modules/helpers.ts

@@ -97,4 +97,10 @@ export const safeID = function(str){
   str = str.replace(/\W/g,'');
 
   return str;
-}
+}
+
+// Used to get values from nested json objects
+export const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
+
+
+export const isTraversable = o => Array.isArray(o) || o !== null && ['function', 'object'].includes(typeof o);

package/assets/ts/modules/table.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { zeroPad, isNumeric, ucfirst } from "./helpers";
+import { zeroPad, isNumeric, ucfirst, resolvePath } from "./helpers";
 
 // Basic functionality needed
 export const addDataAttributes = (table) => {
@@ -903,8 +903,6 @@ const filterFilters = function(form){
 
 export const loadAjaxTable = async function (table, form, pagination, wrapper){
 
-  const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
-
   let formData = new FormData(form);
   let queryString = new URLSearchParams(formData).toString();
   let columns = table.querySelectorAll('thead tr th');