@iamproperty/components 7.6.4--beta2 → 7.6.4--beta3

package/assets/ts/components/multiselect/multiselect.component.ts

@@ -1,5 +1,4 @@
-import Cookies from 'js-cookie';
-import { filterList } from '../../modules/dropdown';
+import { searchAjax, filterList, addKeyboardEvents } from '../../modules/dropdown';
 
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
@@ -56,6 +55,12 @@ class iamMultiselect extends HTMLElement {
     const ajaxURL = this.getAttribute('data-url');
     innerLabel.innerHTML = multiselect.getAttribute('data-label');
 
+    // Make sure the dropdown options are set
+    Array.from(this.querySelectorAll(':scope > label')).forEach((label) => {
+      label.classList.add('dropdown__option');
+      label?.querySelector('i')?.remove();
+    });
+
     if (multiselect.hasAttribute('placeholder')) {
       search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));
     }
@@ -132,7 +137,7 @@ class iamMultiselect extends HTMLElement {
       if (multiselect.hasAttribute('data-url')) {
       
         if (search.value.length == 3) {
-          searchAjax(search.value);
+          searchAjax(multiselect, search, filterList);
         }
       } else {
           
@@ -222,6 +227,7 @@ class iamMultiselect extends HTMLElement {
     });
 
     // Add some keyboard features to keep it accessible
+    addKeyboardEvents(this, search);
     multiselect.addEventListener('keydown', function (event) {
       const activeElement = document.activeElement;
 
@@ -262,38 +268,6 @@ class iamMultiselect extends HTMLElement {
             if (nextCheckbox) nextCheckbox.focus();
             else search.focus();
           }
-          break;
-        case 'ArrowUp':
-          // Up pressed
-          event.preventDefault();
-
-          if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
-            const arrCheckboxes = multiselect.querySelectorAll(`label:not([slot="checked"]):not([slot="checked"])`);
-
-            const activeIndex = Array.from(arrCheckboxes).indexOf(activeElement.closest('label'));
-            const prevCheckbox = Array.from(arrCheckboxes)[activeIndex - 1];
-
-            if (prevCheckbox) prevCheckbox.focus();
-            else search.focus();
-          }
-
-          break;
-        case 'ArrowDown':
-          // Down pressed
-          event.preventDefault();
-
-          if (activeElement == multiselect) {
-            multiselect.querySelector('label:not([slot="checked"]):not([slot="checked"])').focus();
-          } else if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
-            const activeValue = activeElement.value;
-
-            const nextCheckbox = multiselect.querySelector(
-              `label:has(input[value="${activeValue}"]) ~ label:not([slot="checked"]):not([slot="checked"])`
-            );
-
-            if (nextCheckbox) nextCheckbox.focus();
-          }
-
           break;
         case 'Enter':
           event.stopPropagation();
@@ -318,6 +292,7 @@ class iamMultiselect extends HTMLElement {
       }
     });
 
+
     function checkLastTag(): Element | null {
       if (order == 0) return false;
 
@@ -368,49 +343,6 @@ class iamMultiselect extends HTMLElement {
       wrapper.removeAttribute('data-mousedown');
     });
 
-    const searchAjax = async (searchterm): any => {
-      const searchAjaxURL = `${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[searchAjaxURL]) window.controller[searchAjaxURL].abort();
-
-      // Create a new controller so it can be aborted if new fetch made
-      window.controller[searchAjaxURL] = new AbortController();
-      const { signal } = controller[searchAjaxURL];
-
-      try {
-        await fetch(searchAjaxURL, {
-          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) => {
-
-            let items = '';
-
-            for (let i = 0; i < response['data'].length; i++) {
-              items += `<label class="tag"><input type="checkbox" name="${multiselect.hasAttribute('data-name') ? multiselect.getAttribute('data-name') : 'tags'}" value="${ response['data'][i].value }"/>${ response['data'][i].title }</label>`;
-            }
-
-            multiselect.insertAdjacentHTML('beforeend', `${items}`);
-            
-            filterList(multiselect, search);
-            return response;
-          });
-      } catch (error) {
-        console.log(error);
-      }
-    };
   }
 }
 

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

@@ -1556,7 +1556,7 @@ class iamSTDAddressLookup extends HTMLElement {
     data-min-chars="5" 
     ${this.hasAttribute('data-title') ? `data-title='${this.getAttribute('data-title')}'` : `data-title='Find an address by postcode'`}
     data-placeholder="UK, Isle of Man, & Channel Islands " 
-    ${this.hasAttribute('data-manual') ? 'data-manual' : ''} 
+    ${this.hasAttribute('data-manual') ? 'data-manual' : ''}  
     ${this.hasAttribute('data-allow-manual') ? 'data-allow-manual' : ''} 
     ${this.hasAttribute('data-use') ? `data-use='${this.getAttribute('data-use')}'` : ''} 
     ${this.hasAttribute('data-use-label') ? `data-use-label='${this.getAttribute('data-use-label')}'` : ''} 
@@ -1568,6 +1568,7 @@ class iamSTDAddressLookup extends HTMLElement {
     ${this.hasAttribute('data-force-manual') ? `data-force-manual` : ''}
     ${this.hasAttribute('data-matched') ? `data-matched='${this.getAttribute('data-matched')}'` : ''}
     ${this.hasAttribute('data-matched-label') ? `data-matched-label='${this.getAttribute('data-matched-label')}'` : ''}
+    ${this.hasAttribute('data-disabled') ? 'data-disabled="disabled"' : ''} 
     data-postcode-lookup-label="Back to UK postcode lookup">
 
     <p class="hint pb-2 d-block" slot="hint">Unsure of the postcode? Check with the <a href="https://www.royalmail.com/find-a-postcode" target="_blank"><i class="fa-regular fa-arrow-up-right-from-square"></i>Royal Mail address finder</a></p>
@@ -1661,7 +1662,7 @@ class iamSTDAddressLookup extends HTMLElement {
     </fieldset>
 
     <button slot="actions" type="button" id="overseasToggle" class="link toggleOverseas">Use overseas address</button>` : ''}
-    ${this.hasAttribute('data-address-unknown') ? `<label slot="actions"><input type="checkbox" value="true" name="${this.getAttribute('data-address-unknown')}" ${this.hasAttribute('data-address-unknown-checked') ? 'checked="checked"' : '' }/> Address unknown</label>` : ``}
+    ${this.hasAttribute('data-address-unknown') ? `<label slot="actions" id="address_unknown_checkbox"><input type="checkbox" value="true" name="${this.getAttribute('data-address-unknown')}" ${this.hasAttribute('data-address-unknown-checked') ? 'checked="checked"' : '' }/> Address unknown</label>` : ``}
     <div class="bg-light text-center px-3" slot="afterList">
       <p class="p-2">Can't find an address? Check details with the <br/><a href="" class="fa-new"><i class="fa-regular fa-arrow-up-right-from-square"></i>Royal mail address finder</a></p>
       ${this.hasAttribute('data-allow-overseas') ? `<hr/><p class="p-2">If the address doesn’t exist you can enter manually <br /><button type="button" id="overseasToggleInline" class="mt-1 mb-0 btn btn-action"><i class="fa-regular fa-edit me-1"></i>Enter address manually</button></p>` : ''}
@@ -1678,6 +1679,7 @@ class iamSTDAddressLookup extends HTMLElement {
     const languageToggle = this.querySelector('#languageToggle');
     const atleastone = this.querySelector('.overseas-atleastone');
     const overseasFields = this.querySelector('.overseas');
+    const addressUnknownCheckbox = this.querySelector('#address_unknown_checkbox input');
 
     const openOverseas = (): void => {
       const updateEvent = new CustomEvent('open-manual');
@@ -1818,6 +1820,53 @@ class iamSTDAddressLookup extends HTMLElement {
       }
     }
 
+
+    // Addres unknown
+
+    const toggleAddressFields = () => {
+
+        
+      if(addressUnknownCheckbox.checked){
+        Array.from(this.querySelectorAll('input:not([name="address-unknown"]), select')).forEach((input) => {
+
+          input.setAttribute('disabled','disabled');
+          input.setAttribute('data-unknown-disabled','true');
+
+          addressComponent.setAttribute('data-disabled','disabled');
+        });
+      }
+      else {
+        Array.from(this.querySelectorAll('[data-unknown-disabled]')).forEach((input) => {
+
+          addressComponent.removeAttribute('data-disabled','disabled');
+          input.removeAttribute('disabled');
+          input.removeAttribute('data-unknown-disabled');
+        });
+      }
+    }
+    toggleAddressFields();
+
+    addressUnknownCheckbox?.addEventListener('change', (e) => {
+
+      toggleAddressFields();
+    });
+  }
+
+  static get observedAttributes(): any {
+    return ['data-url'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+    const addressComponent = this.querySelector('iam-address-lookup');
+
+    switch (attrName) {
+      case 'data-url': {
+        if (oldVal != newVal && addressComponent) {
+          addressComponent.setAttribute('data-url', newVal + '?search_string=');
+        }
+        break;
+      }
+    }
   }
 }
 

package/assets/ts/components/tag/tag.component.ts

@@ -1,5 +1,5 @@
 import { trackComponent, trackComponentRegistered } from '../_global';
-import { searchAjax, filterList, setTag } from '../../modules/dropdown';
+import { searchAjax, filterList, setTag, addKeyboardEvents } from '../../modules/dropdown';
 
 trackComponentRegistered('iam-tag');
 
@@ -38,10 +38,14 @@ class iamTag extends HTMLElement {
     const input = this.querySelector(':checked');
     const inputName = input?.getAttribute('name');
     let tag = this.querySelector('label:has(:checked)');
-
     setTag(tag);
-    
 
+    // Make sure the dropdown options are set
+    Array.from(this.querySelectorAll(':scope > label')).forEach((label) => {
+      label.classList.add('dropdown__option');
+    });
+
+    
     this.addEventListener('click',()=>{
       if (event && event.target instanceof HTMLElement && event.target.closest('label:has(:checked)')) {
         
@@ -62,8 +66,6 @@ class iamTag extends HTMLElement {
       }
     });
 
-
-
     this.addEventListener('change', (event) => {
       if (event && event.target instanceof HTMLElement && event.target.closest('input[type="radio"],input[type="checkbox"]')) {
         const checkbox = event.target.closest('input[type="radio"],input[type="checkbox"]');
@@ -94,13 +96,8 @@ class iamTag extends HTMLElement {
       }
     });
 
-
-
     // TODO Add keyboard actions
-
-
-
-
+    addKeyboardEvents(this, search);
   }
 }
 

package/assets/ts/modules/dropdown.ts

@@ -1,4 +1,4 @@
-import Cookies from 'js-cookie';
+import Cookies from '../../../node_modules/js-cookie/dist/js.cookie.mjs';
 
 export const filterList = (component, search): void => {
 
@@ -27,8 +27,11 @@ export const searchAjax = async (component, search, callback): any => {
 
   console.log(firstInput);
 
-  const inputType = firstInput.getAttribute('type');
-  const inputName = firstInput.getAttribute('name');
+  const inputType = firstInput && firstInput.hasAttribute('type') ? firstInput.getAttribute('type') : 'checkbox';
+  let inputName = firstInput && firstInput.hasAttribute('name') ? firstInput.getAttribute('name') : 'tags';
+
+  if(component.hasAttribute('data-name'))
+    inputName = component.hasAttribute('data-name');
 
   const searchAjaxURL = `${ajaxURL}?search_query=${encodeURI(searchterm)}`;
 
@@ -62,7 +65,7 @@ export const searchAjax = async (component, search, callback): any => {
         for (let i = 0; i < response['data'].length; i++) {
 
           if(!component.querySelector(`[value="${response['data'][i].value}"]`))
-            items += `<label class="tag"><input type="${inputType}" name="${component.hasAttribute('data-name') ? component.getAttribute('data-name') : inputName}" value="${ response['data'][i].value }"/>${ response['data'][i].title }</label>`;
+            items += `<label class="tag dropdown__option"><input type="${inputType}" name="${component.hasAttribute('data-name') ? component.getAttribute('data-name') : inputName}" value="${ response['data'][i].value }"/>${ response['data'][i].title }</label>`;
         }
 
         component.insertAdjacentHTML('beforeend', `${items}`);
@@ -101,4 +104,113 @@ export const setTag = (tag):void => {
     tagIndex = 1;
 
   tag?.classList.add(`wider-colour-${tagIndex + 1}`);
-}
+}
+
+export const addKeyboardEvents = (dropdown, search):void => {
+
+
+
+  search.addEventListener('keydown', (e) => {
+
+    switch ( e.keyCode ) {
+      case 40: // down
+        e.stopPropagation();
+        e.preventDefault();
+
+        dropdown.querySelector('label:not([slot="checked"]) input')?.focus();
+
+        break;
+    }
+  });
+
+  dropdown.addEventListener('keydown', (event) => {
+
+    const topLevelmenuItems = dropdown.querySelectorAll(':scope > a, :scope > button, :scope > details > summary, :scope > label:not([slot="checked"]) > input');
+    const menuItems = dropdown.querySelectorAll('a, button, input, label:not([slot="checked"]) > input');
+
+    const activeElement = document.activeElement;
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary, label:not([slot="checked"]) > input')) {
+      const activeItem = document.activeElement;
+      const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;
+      const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;
+
+      switch (
+        event.keyCode // change to event.key to key to use the above variable
+      ) {
+        case 27: // Esc
+          if (activeItem.closest('details')) {
+            event.stopPropagation();
+            event.preventDefault();
+            activeItem.closest('details').removeAttribute('open');
+            activeItem.closest('details').querySelector(':scope summary').focus();
+          } else {
+            event.stopPropagation();
+            //menuButton.focus();
+          }
+
+          break;
+        case 32: // Space
+        case 13: // Enter
+
+          break;
+        case 35: // end
+          event.stopPropagation();
+          event.preventDefault();
+
+          dropdown.querySelector('details[open]')?.removeAttribute('open');
+
+          Array.from(menuItems)[menuItems.length - 1].focus();
+
+          break;
+        case 36: // home
+          event.stopPropagation();
+          event.preventDefault();
+
+          dropdown.querySelector('details[open]')?.removeAttribute('open');
+
+          Array.from(menuItems)[0].focus();
+
+          break;
+        case 38: // up
+          event.stopPropagation();
+          event.preventDefault();
+
+          if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
+            if (Array.from(topLevelmenuItems)[prevIndex] != undefined)
+              Array.from(topLevelmenuItems)[prevIndex].focus();
+            else Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();
+          } else if (activeItem.closest('details')) {
+            const subMenuItems = activeItem
+              .closest('details')
+              .querySelectorAll('a, button, :scope details > summary');
+            subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;
+
+            if (Array.from(subMenuItems)[subPrevIndex] != undefined) Array.from(subMenuItems)[subPrevIndex].focus();
+            else Array.from(subMenuItems)[subMenuItems.length - 1].focus();
+          }
+
+          break;
+        case 40: // down
+          event.stopPropagation();
+          event.preventDefault();
+
+          if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
+            if (Array.from(topLevelmenuItems)[nextIndex] != undefined)
+              Array.from(topLevelmenuItems)[nextIndex].focus();
+            else Array.from(topLevelmenuItems)[0].focus();
+          } else if (activeItem.closest('details')) {
+            const subMenuItems = activeItem.closest('details')?.querySelectorAll('a, button, :scope details > summary');
+            subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;
+
+            if (Array.from(subMenuItems)[subNextIndex] != undefined) Array.from(subMenuItems)[subNextIndex].focus();
+            else Array.from(subMenuItems)[0].focus();
+          }
+
+          break;
+      }
+    }
+  });
+
+
+}