@iamproperty/components 7.6.4--beta5 → 7.6.4--beta7

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) {
         
@@ -1827,7 +1837,7 @@ class iamSTDAddressLookup extends HTMLElement {
       const toggleAddressFields = () => {
 
         if(addressUnknownCheckbox.checked){
-          Array.from(this.querySelectorAll(`input:not([name="${this.getAttribute('data-address-unknown')}"]), select`)).forEach((input) => {
+          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');