@iamproperty/components 7.6.4--beta4 → 7.6.4--beta6

package/assets/sass/components/address-lookup.component.scss

@@ -7,6 +7,12 @@
 
 @use '../utilities/margins.scss' as *;
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 .bg-light {
   background-color: var(--colour-light);
 }

package/assets/sass/elements/forms.scss

@@ -1067,6 +1067,10 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     position: absolute;
     top: 100%;
   }
+
+  label[for="use"]:after {
+    top: var(--checkbox-inner-top, 0.5rem);
+  }
 }
 
 .was-validated :is(iam-advanced-select, iam-search, postcode-lookup) label:has(:is(input:not([type='radio']):not([type='checkbox']), select)),
@@ -1196,11 +1200,13 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   border-radius: 0.5rem;
   box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
   width: 100% !important;
-  max-width: var(--menu-item-width, 50rem) !important;
+  //max-width: var(--menu-item-width, 50rem) !important;
   z-index: 100;
   display: none;
   max-height: 25rem;
   overflow-y: auto;
+  
+  max-width: var(--input-max-width) !important;
 
   > datalist {
     border: none!important;

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

@@ -485,6 +485,17 @@ class iamAddressLookup extends HTMLElement {
       if (lookup?.hasAttribute('data-placeholder'))
         lookup.setAttribute('placeholder', lookup?.getAttribute('data-placeholder'));
 
+      // empty fields
+      Array.from(this.querySelectorAll('input, select')).forEach((input) => {
+        input.value = '';
+      });
+
+      lookup.value = "";
+
+      // uncheck box
+      if (this.shadowRoot.querySelector('[name="use"]'))
+          this.shadowRoot.querySelector('[name="use"]').checked = false;
+
       const updateEvent = new CustomEvent('switch-to-lookup');
       this.dispatchEvent(updateEvent);
 
@@ -631,7 +642,6 @@ class iamAddressLookup extends HTMLElement {
 
     switch (attrName) {
       case 'data-disabled': {
-      console.log(newVal);
         if (oldVal != newVal && newVal == 'disabled') {
           lookup?.setAttribute('disabled','disabled');
         }

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

@@ -1516,6 +1516,8 @@ counties.forEach((county) => {
 
 
 
+
+
 // Data layer Web component created
 declare global {
   interface Window {
@@ -1579,35 +1581,35 @@ class iamSTDAddressLookup extends HTMLElement {
 
       <span class="hint mb-4">Please ensure details are provided for at least one of these fields.</span>
 
-      <label class="mb-1">Flat number <input name="sub_building_name" type="text" data-readonly data-required /></label>
+      <label class="mb-1">Flat number <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[sub_building_name]` : 'sub_building_name' }" type="text" data-readonly data-required /></label>
       <span class="hint mb-2">Flat, unit or floor number (e.g. Flat 5, or Floor 6)</span>
       
-      <label class="mb-1">Building name <input name="building_name" type="text" data-required maxlength="50"/></label>
+      <label class="mb-1">Building name <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[building_name]` : 'building_name' }" type="text" data-required maxlength="50"/></label>
       <span class="hint mb-2">Name of the house or building</span>
 
-      <label>House Number <input name="building_number" type="text" data-required data-readonly maxlength="50"/></label>
+      <label>House Number <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[building_number]` : 'building_number' }" type="text" data-required data-readonly maxlength="50"/></label>
       <span class="hint mb-2">House or street number (e.g. 42)</span>
 
-      <label class="mb-1">Street 1 <input name="dependent_thoroughfare" type="text" data-readonly data-required maxlength="81"/></label>
+      <label class="mb-1">Street 1 <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[dependent_thoroughfare]` : 'dependent_thoroughfare' }" type="text" data-readonly data-required maxlength="81"/></label>
       <span class="hint mb-2">Additional street name </span>
 
-      <label class="mb-1">Street 2 <input name="thoroughfare" type="text" data-readonly data-required maxlength="81"/></label>
+      <label class="mb-1">Street 2 <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[thoroughfare]` : 'thoroughfare' }" type="text" data-readonly data-required maxlength="81"/></label>
       <span class="hint mb-2">Primary street name</span>
     </fieldset>
 
 
     <span class="h3 pb-2">Locality details</span>
-    <label>Area${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="dependent_locality" type="text" maxlength="35" data-readonly/></label>
-    <label>Village${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="locality" type="text" maxlength="35" data-readonly/></label>
-    <label>Town / City${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="post_town" type="text" maxlength="30" data-readonly/></label>
+    <label>Area${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[dependent_locality]` : 'dependent_locality' }" type="text" maxlength="35" data-readonly/></label>
+    <label>Village${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[locality]` : 'locality' }" type="text" maxlength="35" data-readonly/></label>
+    <label>Town / City${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[post_town]` : 'post_town' }" type="text" maxlength="30" data-readonly/></label>
     <label>County${this.hasAttribute('data-show-required') && this.hasAttribute('data-county-required') ? '*' : (!this.hasAttribute('data-show-required') && !this.hasAttribute('data-county-required') ? ' (optional)' : '')} 
-    <select name="postal_county" ${this.hasAttribute('data-county-required') ? 'data-required' : ''} data-readonly>
+    <select name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[postal_county]` : 'postal_county' }" ${this.hasAttribute('data-county-required') ? 'data-required' : ''} data-readonly>
       <option></option>  
       ${countiesString}
     </select></label>
-    <label>Postcode${this.hasAttribute('data-show-required') ? '*' : ''} <input name="postcode" type="text" ${!this.hasAttribute('data-required') || this.hasAttribute('data-required') && this.getAttribute('data-required') == 'false' ? 'required data-required' : ''} data-readonly maxlength="8" ${this.hasAttribute('data-required') ? ' required' : ''}/></label>
+    <label>Postcode${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[postcode]` : 'postcode' }" type="text" ${!this.hasAttribute('data-required') || this.hasAttribute('data-required') && this.getAttribute('data-required') == 'false' ? 'required data-required' : ''} data-readonly maxlength="8" ${this.hasAttribute('data-required') ? ' required' : ''}/></label>
     <label>Country${this.hasAttribute('data-show-required') && this.hasAttribute('data-country-required') ? '*' : (!this.hasAttribute('data-show-required') && !this.hasAttribute('data-county-required') ? ' (optional)' : '')} 
-      <select name="region" data-readonly ${this.hasAttribute('data-country-required') ? 'data-required' : ''}>
+      <select name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[region]` : 'region' }" data-readonly ${this.hasAttribute('data-country-required') ? 'data-required' : ''}>
         <option value=""></option>
         <option value="urn:als:region:qo7jMNaA4" data-value="England">England</option>
         <option value="urn:als:region:JPBkFjL6I" data-value="Scotland">Scotland</option>
@@ -1631,30 +1633,30 @@ class iamSTDAddressLookup extends HTMLElement {
         <span class="hint mb-4">Please ensure details are provided for at least one of these fields.</span>
 
 
-        <label class="mb-1">Flat number${this.hasAttribute('data-show-required') ? '*' : ''} <input name="overseas[sub_building_name]" type="text" data-overseas-required /></label>
+        <label class="mb-1">Flat number${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][sub_building_name]` : 'overseas[sub_building_name]' }" type="text" data-overseas-required /></label>
         <span class="hint d-block mb-2">Flat, unit or floor number (e.g. Flat 5, or Floor 6)</span>
 
-        <label class="mb-1">Building name${this.hasAttribute('data-show-required') ? '*' : ''} <input name="overseas[building_name]" type="text" data-overseas-required maxlength="50" /></label>
+        <label class="mb-1">Building name${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][building_name]` : 'overseas[building_name]' }" type="text" data-overseas-required maxlength="50" /></label>
         <span class="hint d-block mb-2">Name of the house or building</span>
 
-        <label class="mb-1">House number${this.hasAttribute('data-show-required') ? '*' : ''} <input name="overseas[building_number]" type="text" data-overseas-required maxlength="50" /></label>
+        <label class="mb-1">House number${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][building_number]` : 'overseas[building_number]' }" type="text" data-overseas-required maxlength="50" /></label>
         <span class="hint d-block mb-2">House or street number (e.g. 42)</span>
 
-        <label class="mb-2">Street name${this.hasAttribute('data-show-required') ? '*' : ''} <input name="overseas[thoroughfare]" type="text" data-overseas-required maxlength="81" /></label>
+        <label class="mb-2">Street name${this.hasAttribute('data-show-required') ? '*' : ''} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][thoroughfare]` : 'overseas[thoroughfare]' }" type="text" data-overseas-required maxlength="81" /></label>
       </fieldset>
       <span class="h3 pb-2">Locality details</span>
 
 
 
-      <label class="mb-1">Locality${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="overseas[dependent_locality]" type="text" /></label>
+      <label class="mb-1">Locality${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][dependent_locality]` : 'overseas[dependent_locality]' }" type="text" /></label>
       <span class="hint d-block mb-2">Main locality, such as the village, suburb, or district</span>
 
 
-      <label>Town / City${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="overseas[post_town]" type="text" maxlength="30" /></label>
-      <label>State / Province / Region${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="overseas[double_dependent_locality]" type="text" /></label>
-      <label>Postcode / ZIP code${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="overseas[zip_code]" type="text" /></label>
+      <label>Town / City${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][post_town]` : 'overseas[post_town]' }" type="text" maxlength="30" /></label>
+      <label>State / Province / Region${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][double_dependent_locality]` : 'overseas[double_dependent_locality]' }" type="text" /></label>
+      <label>Postcode / ZIP code${this.hasAttribute('data-show-required') ? '' : ' (optional)'} <input name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][zip_code]` : 'overseas[zip_code]' }" type="text" /></label>
       
-      <label>Country <select name="overseas[country_code]" data-overseas-required>
+      <label>Country <select name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[overseas][country_code]` : 'overseas[country_code]' }" data-overseas-required>
         <option value=""></option>
         ${countriesString}
         <option value="urn:als:country:ndjIqa72" data-value="Poland">Poland</option>
@@ -1662,7 +1664,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" 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>` : ``}
+    ${this.hasAttribute('data-address-unknown') ? `<label slot="actions" id="address_unknown_checkbox"><input type="checkbox" value="true" name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[${this.getAttribute('data-address-unknown')}]` : 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>` : ''}
@@ -1689,9 +1691,13 @@ class iamSTDAddressLookup extends HTMLElement {
       Array.from(addressComponent.querySelectorAll('[data-required]')).forEach((input) => {
         input.removeAttribute('required');
       });
-      Array.from(overseasFields.querySelectorAll('[data-overseas-required]')).forEach((input) => {
-        input.setAttribute('required', 'true');
-      });
+
+      if(overseasFields){
+          
+        Array.from(overseasFields.querySelectorAll('[data-overseas-required]')).forEach((input) => {
+          input.setAttribute('required', 'true');
+        });
+      }
     }
 
     overseasToggle?.addEventListener('click', () => {
@@ -1701,6 +1707,7 @@ class iamSTDAddressLookup extends HTMLElement {
       }
     });
 
+
     overseasToggleInline?.addEventListener('click', () => {
 
       if (!this.classList.contains('show-overseas')) {
@@ -1712,9 +1719,12 @@ class iamSTDAddressLookup extends HTMLElement {
       this.classList.remove('show-overseas');
 
 
-      Array.from(overseasFields.querySelectorAll('[data-overseas-required]')).forEach((input) => {
-        input.setAttribute('required', 'true');
-      });
+      if(overseasFields) {
+        Array.from(overseasFields.querySelectorAll('[data-overseas-required]')).forEach((input) => {
+          input.setAttribute('required', 'true');
+        });        
+      }
+
     });
 
     languageToggle?.addEventListener('click', () => {
@@ -1758,7 +1768,7 @@ class iamSTDAddressLookup extends HTMLElement {
 
     // If the address unknown checkbox if checked then remove any required fields so you can post the form
     if(this.hasAttribute('data-address-unknown')){
-      const addressUnknownInput = this.querySelector(`[name="${this.getAttribute('data-address-unknown')}"]`);
+      const addressUnknownInput = this.querySelector(`[name="${this.hasAttribute('data-name') ? `${this.hasAttribute('data-name')}[${this.getAttribute('data-address-unknown')}]` : this.getAttribute('data-address-unknown')}"]`);
 
       if(addressUnknownInput && addressUnknownInput.checked) {
         
@@ -1823,33 +1833,34 @@ class iamSTDAddressLookup extends HTMLElement {
 
     // Addres unknown
 
-    const toggleAddressFields = () => {
+    if(this.hasAttribute('data-address-unknown')) {
+      const toggleAddressFields = () => {
 
-        
-      if(addressUnknownCheckbox.checked){
-        Array.from(this.querySelectorAll('input:not([name="address-unknown"]), select')).forEach((input) => {
+        if(addressUnknownCheckbox.checked){
+          Array.from(this.querySelectorAll(`input:not([name="${this.hasAttribute('data-name') ? `${this.getAttribute('data-name')}[${this.getAttribute('data-address-unknown')}]` : this.getAttribute('data-address-unknown') }"]), select`)).forEach((input) => {
 
-          input.setAttribute('disabled','disabled');
-          input.setAttribute('data-unknown-disabled','true');
+            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.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');
-        });
+            addressComponent.removeAttribute('data-disabled','disabled');
+            input.removeAttribute('disabled');
+            input.removeAttribute('data-unknown-disabled');
+          });
+        }
       }
-    }
-    toggleAddressFields();
+      toggleAddressFields();
 
-    addressUnknownCheckbox?.addEventListener('change', (e) => {
+      addressUnknownCheckbox?.addEventListener('change', (e) => {
 
-      toggleAddressFields();
-    });
+        toggleAddressFields();
+      });
+    }
   }
 
   static get observedAttributes(): any {