@iamproperty/components 7.6.3--beta3 → 7.6.3

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

@@ -28,7 +28,7 @@ class iamAddressLookup extends HTMLElement {
         template.innerHTML = `
     <style>
     ${loadCSS}
-    
+
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
     <div class="wrapper">
@@ -49,7 +49,6 @@ class iamAddressLookup extends HTMLElement {
           <button id="postcode__submit" class="suffix fa-regular fa-search" part="suffix"></button>
           </span>
         </label>
-    
           <span class="invalid-feedback mb-2" id="invalid-feedback-address-lookup">${this.hasAttribute('data-error-msg') ? this.getAttribute('data-error-msg') : 'Required address fields'}</span>
 
           <div class="datalist__wrapper ${this.hasAttribute('data-list-class') ? this.getAttribute('data-list-class') : ''}" tabindex="0" part="list-wrapper">
@@ -94,7 +93,9 @@ class iamAddressLookup extends HTMLElement {
             const lookupWrapper = this.shadowRoot.querySelector('.postcode-lookup');
             const manualWrapper = this.shadowRoot.querySelector('.manual-address');
             const preFilledWrapper = this.shadowRoot.querySelector('.pre-filled');
-            const list = this.querySelector('datalist[slot="preloadedList"]') ? this.querySelector('datalist[slot="preloadedList"]') : this.shadowRoot.querySelector('.datalist__wrapper datalist');
+            const list = this.querySelector('datalist[slot="preloadedList"]')
+                ? this.querySelector('datalist[slot="preloadedList"]')
+                : this.shadowRoot.querySelector('.datalist__wrapper datalist');
             const listWrapper = this.shadowRoot.querySelector('.datalist__wrapper');
             const switchManualBtn = this.shadowRoot.querySelector('.switch-to-manual-btn');
             const switchLookupBtn = this.shadowRoot.querySelector('.switch-to-lookup-btn');
@@ -112,6 +113,7 @@ class iamAddressLookup extends HTMLElement {
             const matchedAddressWrapper = this.shadowRoot.querySelector('.matched');
             const matchedAddressUse = this.shadowRoot.querySelector('.matched .use-matched');
             const matchedAddressEntered = this.shadowRoot.querySelector('.matched .use-entered');
+            let cacheSearchQuery = '';
             Array.from(this.shadowRoot.querySelectorAll('.title')).forEach((titleElement) => {
                 titleElement.innerHTML = title;
             });
@@ -122,7 +124,7 @@ class iamAddressLookup extends HTMLElement {
                 preFilledAddress.innerHTML = '';
                 Array.from(component.querySelectorAll('input[required],input[data-required],select[required],select[data-required]')).forEach((input) => {
                     let value = input.hasAttribute('data-value') ? input.getAttribute('data-value') : input.value;
-                    if (input.tagName == "SELECT" && component.querySelector(`[value="${input.value}"][data-value]`))
+                    if (input.tagName == 'SELECT' && component.querySelector(`[value="${input.value}"][data-value]`))
                         value = component.querySelector(`[value="${input.value}"][data-value]`).getAttribute('data-value');
                     if (!value) {
                         if (input.closest('.atleastone')) {
@@ -159,7 +161,7 @@ class iamAddressLookup extends HTMLElement {
             }
             const atleastoneValidate = () => {
                 if (atleastone.querySelector('input:valid, input.is-valid')) {
-                    Array.from(atleastone.querySelectorAll('input')).forEach(element => {
+                    Array.from(atleastone.querySelectorAll('input')).forEach((element) => {
                         element.removeAttribute('required');
                     });
                 }
@@ -181,7 +183,7 @@ class iamAddressLookup extends HTMLElement {
                         input = this.querySelector(`[data-name-alt="${key}"]`);
                     else if (this.querySelector(`[name="${key}"]`))
                         input = this.querySelector(`[name="${key}"]`);
-                    if (input && input.tagName == "SELECT" && value.id) {
+                    if (input && input.tagName == 'SELECT' && value.id) {
                         input.value = value.id;
                     }
                     else if (input && value != '') {
@@ -191,7 +193,7 @@ class iamAddressLookup extends HTMLElement {
                             input.classList.add('is-valid');
                         }
                     }
-                    else if (value != "") {
+                    else if (value != '') {
                         this.insertAdjacentHTML('beforeend', `<input type="hidden" class="inserted" data-hidden name="${key}" value="${value}" />`);
                     }
                     if (this.querySelector(`[data-name-2="${key}"]`))
@@ -208,6 +210,16 @@ class iamAddressLookup extends HTMLElement {
                     checkFilled(this);
             };
             const search = (searchValue_1, ...args_1) => __awaiter(this, [searchValue_1, ...args_1], void 0, function* (searchValue, paginate = false) {
+                var _a, _b;
+                if (!paginate && searchValue === cacheSearchQuery) {
+                    if ((_a = list === null || list === void 0 ? void 0 : list.children) === null || _a === void 0 ? void 0 : _a.length) {
+                        list === null || list === void 0 ? void 0 : list.classList.remove('loading');
+                        list === null || list === void 0 ? void 0 : list.classList.remove('noresults');
+                        listWrapper === null || listWrapper === void 0 ? void 0 : listWrapper.focus();
+                        (_b = list === null || list === void 0 ? void 0 : list.querySelector('option')) === null || _b === void 0 ? void 0 : _b.focus();
+                        return true;
+                    }
+                }
                 // check if postcode is valid
                 const limit = this.hasAttribute('data-limit') ? parseInt(this.getAttribute('data-limit')) : 100;
                 if (paginate)
@@ -222,15 +234,15 @@ class iamAddressLookup extends HTMLElement {
                 const postcode = searchValue; // TODO: remove when postcode comes from response
                 if (this.hasAttribute('data-postcode')) {
                     if (!isValidPostcode(searchValue)) {
-                        return "Invalid postcode, please enter a valid postcode";
+                        return 'Invalid postcode, please enter a valid postcode';
                     }
                     else {
                         if (!paginate)
-                            list.innerHTML = "";
+                            list.innerHTML = '';
                         list === null || list === void 0 ? void 0 : list.classList.add('loading');
                         list === null || list === void 0 ? void 0 : list.classList.remove('noresults');
                         lookup === null || lookup === void 0 ? void 0 : lookup.classList.remove('is-invalid');
-                        errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.innerHTML = "";
+                        errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.innerHTML = '';
                         list === null || list === void 0 ? void 0 : list.classList.remove('show-welsh-banner');
                         Array.from(this.querySelectorAll('[data-required]')).forEach((input) => {
                             input.removeAttribute('required');
@@ -254,7 +266,7 @@ class iamAddressLookup extends HTMLElement {
                     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];
+                const { signal } = window.controller[ajaxURL];
                 try {
                     return yield fetch(ajaxURL, {
                         signal: signal,
@@ -276,10 +288,18 @@ class iamAddressLookup extends HTMLElement {
                         addresses.forEach((address) => {
                             // Deal with agent platform response
                             if (typeof address.attributes == 'object' && address.attributes.label) {
+                                if (address.id)
+                                    address.attributes.id = address.id;
+                                if (address.relationships)
+                                    address.attributes = Object.assign(address.attributes, address.relationships);
                                 const values = JSON.stringify(address.attributes);
                                 listString += `<option data-values='${values}' >${address.attributes.label}</option>`;
                             }
                             else if (typeof address.value == 'object') {
+                                if (address.id)
+                                    address.attributes.id = address.id;
+                                if (address.relationships)
+                                    address.attributes = Object.assign(address.attributes, address.relationships);
                                 const values = JSON.stringify(address.value);
                                 listString += `<option data-values='${values}'>${address['label']}, ${postcode}</option>`;
                             }
@@ -304,6 +324,8 @@ class iamAddressLookup extends HTMLElement {
                             list.innerHTML += listString;
                         else
                             list.innerHTML = listString;
+                        // Cache the search value to prevent further calls
+                        cacheSearchQuery = searchValue;
                         if (addresses.length) {
                             list === null || list === void 0 ? void 0 : list.classList.remove('loading');
                         }
@@ -312,7 +334,10 @@ class iamAddressLookup extends HTMLElement {
                             list === null || list === void 0 ? void 0 : list.classList.add('noresults');
                         }
                         // pagination
-                        if (response.meta && response.meta.current_page && response.meta.total_pages && response.meta.total_pages > response.meta.current_page) {
+                        if (response.meta &&
+                            response.meta.current_page &&
+                            response.meta.total_pages &&
+                            response.meta.total_pages > response.meta.current_page) {
                             paginationWrapper === null || paginationWrapper === void 0 ? void 0 : paginationWrapper.innerHTML = `<div class="bg-light text-center p-2"><p class="m-0">Showing 1-${response.meta.current_page * limit} of ${response.meta.total_results} addresses <br /><button type="button" data-next="${response.meta.current_page + 1}" class="mt-1 mb-0 btn btn-action"><i class="fa-regular fa-eye me-1"></i>Show more addresses</button></p></div>`;
                         }
                         else {
@@ -327,12 +352,32 @@ class iamAddressLookup extends HTMLElement {
                     });
                 }
                 catch (error) {
+                    if ((error === null || error === void 0 ? void 0 : error.name) === 'AbortError') {
+                        return true;
+                    }
                     console.log(error);
-                    return "There has been a problem. Please try again in a few moments.";
+                    return 'There has been a problem. Please try again in a few moments.';
                 }
             });
+            let searchTimer;
+            const triggerSearch = (raw, paginate = false, immediate = false) => {
+                const value = (raw !== null && raw !== void 0 ? raw : '').trim();
+                if (value.length < minChars)
+                    return;
+                if (immediate) {
+                    if (searchTimer)
+                        window.clearTimeout(searchTimer);
+                    void search(value, paginate);
+                    return;
+                }
+                if (searchTimer)
+                    window.clearTimeout(searchTimer);
+                searchTimer = window.setTimeout(() => {
+                    void search(value, paginate);
+                }, 200);
+            };
             // #endregion
-            // #region check attributes and trigger functions 
+            // #region check attributes and trigger functions
             if (!this.hasAttribute('data-force-manual'))
                 checkFilled(this);
             this.addEventListener('filled', () => {
@@ -383,14 +428,14 @@ class iamAddressLookup extends HTMLElement {
                 preFilledWrapper.classList.add('js-hide');
                 lookupWrapper.classList.remove('js-hide');
                 manualWrapper.classList.add('js-hide');
-                list.innerHTML = "";
+                list.innerHTML = '';
                 list === null || list === void 0 ? void 0 : list.classList.remove('loading');
                 list === null || list === void 0 ? void 0 : list.classList.remove('noresults');
                 lookup === null || lookup === void 0 ? void 0 : lookup.classList.remove('is-invalid');
-                errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.innerHTML = "";
+                errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.innerHTML = '';
                 list === null || list === void 0 ? void 0 : list.classList.remove('show-welsh-banner');
                 lookup.focus();
-                lookup.value = "";
+                lookup.value = '';
                 if (lookup === null || lookup === void 0 ? void 0 : lookup.hasAttribute('data-placeholder'))
                     lookup.setAttribute('placeholder', lookup === null || lookup === void 0 ? void 0 : lookup.getAttribute('data-placeholder'));
                 const updateEvent = new CustomEvent('switch-to-lookup');
@@ -410,35 +455,30 @@ class iamAddressLookup extends HTMLElement {
                 this.dispatchEvent(updateEvent);
                 lookupWrapper.scrollIntoView();
             });
-            lookup.addEventListener('keyup', (e) => __awaiter(this, void 0, void 0, function* () {
-                if (![40, 38, 13].includes(e.keyCode) && lookup.value.length >= minChars) {
-                    const valid = yield search(lookup.value);
-                    console.log(errorMsg);
-                    console.log(valid);
-                    if (valid != true) {
-                        lookup === null || lookup === void 0 ? void 0 : lookup.classList.add('is-invalid');
-                        errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.innerHTML = valid;
-                    }
-                }
-                if (e.keyCode == 13) {
-                    const valid = yield search(lookup.value);
-                    if (valid != true) {
-                        lookup === null || lookup === void 0 ? void 0 : lookup.classList.add('is-invalid');
-                        errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.innerHTML = valid;
-                    }
+            lookup.addEventListener('keyup', (e) => {
+                if (e.keyCode === 13) {
+                    triggerSearch(lookup.value, false, true);
                 }
-            }));
-            lookup.addEventListener('change', () => __awaiter(this, void 0, void 0, function* () {
-                if (lookup.value.length >= minChars) {
-                    const valid = yield search(lookup.value);
-                    if (valid != true) {
-                        lookup === null || lookup === void 0 ? void 0 : lookup.classList.add('is-invalid');
-                        errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.innerHTML = valid;
+            });
+            lookup.addEventListener('input', () => {
+                var _a;
+                lookup.classList.remove('is-invalid');
+                if (errorMsg)
+                    errorMsg.innerHTML = '';
+                const v = ((_a = lookup.value) !== null && _a !== void 0 ? _a : '').trim();
+                if (v.length < minChars) {
+                    list.innerHTML = '';
+                    if (paginationWrapper) {
+                        paginationWrapper.innerHTML = '';
                     }
+                    list === null || list === void 0 ? void 0 : list.classList.remove('loading', 'noresults');
+                    cacheSearchQuery = '';
+                    return;
                 }
-            }));
+                triggerSearch(v);
+            });
             list.addEventListener('click', (e) => {
-                if (e.target.tagName == "OPTION") {
+                if (e.target.tagName == 'OPTION') {
                     const values = JSON.parse(e.target.getAttribute('data-values'));
                     fillInputs(values);
                     if (this.shadowRoot.querySelector('[name="use"]'))
@@ -451,38 +491,23 @@ class iamAddressLookup extends HTMLElement {
                 });
                 atleastoneValidate();
             });
-            postcodeSubmit === null || postcodeSubmit === void 0 ? void 0 : postcodeSubmit.addEventListener('click', () => __awaiter(this, void 0, void 0, function* () {
-                const valid = yield search(lookup.value);
-                if (valid != true) {
-                    lookup === null || lookup === void 0 ? void 0 : lookup.classList.add('is-invalid');
-                    errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.innerHTML = valid;
-                }
-            }));
-            this === null || this === void 0 ? void 0 : this.addEventListener('search', () => __awaiter(this, void 0, void 0, function* () {
-                const valid = yield search(lookup.value);
-                if (valid != true) {
-                    lookup === null || lookup === void 0 ? void 0 : lookup.classList.add('is-invalid');
-                    errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.innerHTML = valid;
-                }
-            }));
+            postcodeSubmit === null || postcodeSubmit === void 0 ? void 0 : postcodeSubmit.addEventListener('click', () => {
+                triggerSearch(lookup.value, false, true);
+            });
             this === null || this === void 0 ? void 0 : this.addEventListener('close-button-pressed', () => {
-                list.innerHTML = "";
+                list.innerHTML = '';
                 list === null || list === void 0 ? void 0 : list.classList.remove('loading');
                 list === null || list === void 0 ? void 0 : list.classList.remove('noresults');
                 lookup === null || lookup === void 0 ? void 0 : lookup.classList.remove('is-invalid');
-                errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.innerHTML = "";
+                errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.innerHTML = '';
                 list === null || list === void 0 ? void 0 : list.classList.remove('show-welsh-banner');
                 lookup.focus();
             });
-            paginationWrapper === null || paginationWrapper === void 0 ? void 0 : paginationWrapper.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
-                if (e.target.tagName == "BUTTON") {
-                    const valid = yield search(lookup.value, true);
-                    if (valid != true) {
-                        lookup === null || lookup === void 0 ? void 0 : lookup.classList.add('is-invalid');
-                        errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.innerHTML = valid;
-                    }
+            paginationWrapper === null || paginationWrapper === void 0 ? void 0 : paginationWrapper.addEventListener('click', (e) => {
+                if (e.target.tagName === 'BUTTON') {
+                    triggerSearch(lookup.value, true, true);
                 }
-            }));
+            });
             // #endregion
             // #region Matched address
             if (this.hasAttribute('data-matched')) {