@iamproperty/components 7.5.1--beta9 → 7.5.1--beta10

package/assets/ts/components/input/input.component.ts

@@ -20,7 +20,7 @@ class iamInput extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="wrapper" part="wrapper">
       <span part="prefix"><slot name="prefix"></slot></span>
-      <slot></slot>
+      <slot part="input-wrapper"></slot>
       <slot part="suffix"><slot name="suffix"></slot></slot>
     </div>
     `;
@@ -64,6 +64,61 @@ class iamInput extends HTMLElement {
     }
     setIcon(inputType);
 
+
+    const setCurrencyRules = () => {
+      
+      input.setAttribute('type','text');
+      input?.setAttribute('data-value',input.value);
+      input.value = new Intl.NumberFormat("en-GB", { 
+        style: "currency", 
+        currency: "GBP",
+        minimumFractionDigits: Number.isInteger(input.value) ? 0 : 2,
+        maximumFractionDigits: Number.isInteger(input.value) ? 0 : 2,
+        trailingZeroDisplay: 'stripIfInteger' // Strip zeros if it's an integer
+      }).format(input.value).replace("£", "");
+    }
+
+
+    // Currency type
+    if(component?.hasAttribute('data-currency')) {
+
+      // Pre set the icons
+      switch (component?.hasAttribute('data-currency')) {
+        case "dollar":
+          component.setAttribute('data-prefix-icon','dollar-sign') ;
+          break;
+        case "euro":
+          component.setAttribute('data-prefix-icon','euro-sign') ;
+          break;
+        default:
+          component.setAttribute('data-prefix-icon','sterling-sign') ;
+          break;
+      }
+
+      setCurrencyRules();
+
+
+      input?.addEventListener('focus',(event) => {
+
+        input.setAttribute('type', 'number')
+
+        input.value = input.getAttribute('data-value');
+        input.setAttribute('value', input.getAttribute('data-value'));
+      });
+
+      input?.addEventListener('input',(event) => {
+
+        input?.setAttribute('data-value',input.value);
+      });
+
+      input?.addEventListener('blur',(event) => {
+
+        setCurrencyRules();
+      });
+    }
+
+
+
     // Colour input field
     if(input?.matches('[type="color"]')){
       this.insertAdjacentHTML('beforeend', `<output></output>`);
@@ -161,7 +216,60 @@ class iamInput extends HTMLElement {
         input.showPicker();
     });
     
+    // Duplicate input watches
+    if(component.hasAttribute('data-duplicate')){
+
+      const id = component.getAttribute('data-duplicate');
+      const watchedInputs = document.querySelectorAll(`[name="${id}"], [id="${id}"]`);
+
+      input.addEventListener('change', (event) => {
+        
+        if(input.closest('iam-modal'))
+          return false;
+
+        if(input?.matches('[type="checkbox"]') && watchedInput?.matches('[type="checkbox"]')){
+          watchedInput.checked = event.target.checked;
+
+          if(!event.detail && !event.detail?.triggered){
+            const changeEvent = new CustomEvent('change', { detail: {triggered: true} });
+            watchedInput?.dispatchEvent(changeEvent);
+          }
+        }
+      });
+
+      Array.from(watchedInputs).forEach((watchedInput) => {
+
+        watchedInput?.addEventListener('change', (event) => {
+
+          // If both the duplicate input and the watched input are checkboxes
+          if(input?.matches('[type="checkbox"]') && watchedInput?.matches('[type="checkbox"]')){
+            input.checked = event.target.checked;
+
+            if(!event.detail && !event.detail?.triggered){
+              const changeEvent = new CustomEvent('change', { detail: {triggered: true} });
+              input?.dispatchEvent(changeEvent);
+            }
+          }
 
+          // if input is not a checkbox BUT the watched input is
+          // Then we need to create the input's value
+          if(!input?.matches('[type="checkbox"]') && watchedInput?.matches('[type="checkbox"]')){
+            
+            let computedValue = '';
+            Array.from(document.querySelectorAll(`[name="${id}"]:checked`)).forEach((loopInput) => {
+
+              computedValue += (computedValue == '' ? '' : ',') + loopInput.value;
+            });
+            input.value = computedValue;
+
+            if(!event.detail && !event.detail?.triggered){
+              const changeEvent = new CustomEvent('change', { detail: {triggered: true} });
+              input?.dispatchEvent(changeEvent);
+            }
+          }
+        });
+      });
+    }
   }
 }
 

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

@@ -1554,7 +1554,7 @@ class iamSTDAddressLookup extends HTMLElement {
     data-url="/standardaddress.json?search_query=" 
     data-postcode="true" 
     data-min-chars="5" 
-    data-title="Find an address by postcode" 
+    ${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-allow-manual') ? 'data-allow-manual' : ''} 

package/assets/ts/modules/advanced-select.ts

@@ -24,7 +24,12 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
 
   });
 
+  displayInputField.addEventListener('keyup', function () {
     
+    if(displayInputField.value != ""){
+      displayInputField.setAttribute('data-value', displayInputField.value);
+    }
+  });
 
   displayInputField.addEventListener('blur', function () {
     if (displayInputField.hasAttribute('data-value')) {
@@ -113,6 +118,9 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
 
 
   const emptyField = () => {
+
+    displayInputField.removeAttribute('placeholder');
+
     if(displayInputField.hasAttribute('data-original-placeholder'))
       displayInputField.setAttribute('placeholder', displayInputField.getAttribute('data-original-placeholder'));
     

package/assets/ts/modules/table.ts

@@ -103,7 +103,7 @@ export const paginateTable = (component, table, form, pagination, callback): voi
   });
 
   pagination.addEventListener('update-page', (event) => {
-    console.log('update page')
+    
     if (form.querySelector('[name=page]').value != event.detail.page) {
       form.querySelector('[name=page]').value = event.detail.page;
 
@@ -690,20 +690,6 @@ export const addFilterEventListeners = (component, table, form, pagination, save
     // Before submitting check if any duplicate checkboxes within the filters dialog needs to upset the original input
     if (event.type == 'submit') {
       form.classList.add('processing');
-      Array.from(form.querySelectorAll('[data-duplicate]')).forEach((element) => {
-        const id = element.getAttribute('data-duplicate');
-        const input = document.getElementById(id);
-        const card = document.querySelector(`[for="${id}"] iam-card`);
-
-        if (input.checked != element.checked) {
-          if (card) {
-            const clickEvent = new Event('click');
-            card.dispatchEvent(clickEvent);
-          } else {
-            input.checked = element.checked;
-          }
-        }
-      });
       form.classList.remove('processing');
     }
 
@@ -721,7 +707,7 @@ export const addFilterEventListeners = (component, table, form, pagination, save
     }
       */
   };
-/*
+  /*
   if (component.querySelector('iam-actionbar[data-search]')) {
     component.querySelector('iam-actionbar[data-search]').addEventListener('search-submit', (event) => {
       if (form.querySelector('input[data-search]')) {
@@ -801,18 +787,6 @@ export const addFilterEventListeners = (component, table, form, pagination, save
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')) {
       formSubmit(event);
     }
-
-    if (event && event.target instanceof HTMLElement && event.target.closest('[data-mimic]')) {
-      formSubmit(event);
-    }
-
-    if (event && event.target instanceof HTMLElement && event.target.hasAttribute('id')) {
-      const id = event.target.getAttribute('id');
-
-      if (document.querySelector(`[data-duplicate="${id}"]`)) {
-        document.querySelector(`[data-duplicate="${id}"]`).checked = event.target.checked;
-      }
-    }
   });
 
   form.addEventListener('click', (event) => {
@@ -903,68 +877,6 @@ export const addFilterEventListeners = (component, table, form, pagination, save
     formSubmit(event, true);
   });
 
-  // Mmimic fields
-  const forms = [];
-  const fields = [];
-
-  // Collect the forms that we need to add an event listener for.
-  Array.from(form.querySelectorAll('[data-mimic]')).forEach((input) => {
-    const mimicField = input.getAttribute('data-mimic');
-
-    Array.from(document.querySelectorAll(`[name="${mimicField}"]`)).forEach((mimicInput) => {
-      const parentForm = mimicInput.closest('form');
-
-      if (!forms.includes(parentForm)) {
-        forms.push(parentForm);
-      }
-
-      if (!fields.includes(mimicField)) {
-        fields.push(mimicField);
-      }
-    });
-  });
-
-  // For each form add change listener
-  forms.forEach((parentForm) => {
-    const updateMimicInput = function (): void {
-      const mimickedAlready = [];
-      const formData = new FormData(parentForm);
-
-      let i = 1;
-      for (const [key, value] of formData) {
-        if (document.querySelector(`[data-mimic="${key}"]`) && !mimickedAlready.includes(key)) {
-          mimickedAlready.push(key);
-          document.querySelector(`[data-mimic="${key}"]`).value = value;
-        } else if (document.querySelector(`[data-mimic="${key}"]`))
-          document.querySelector(`[data-mimic="${key}"]`).value += ',' + value;
-
-        i++;
-      }
-
-      for (const value of mimickedAlready) {
-        const event = new Event('force');
-        form.dispatchEvent(event);
-      }
-
-      // Check for empties
-      for (const field of fields) {
-        if (!formData.has(field) && parentForm.querySelector(`[name="${field}"]`)) {
-          document.querySelector(`[data-mimic="${field}"]`).value = '';
-
-          const event = new Event('force');
-          form.dispatchEvent(event);
-        }
-      }
-    };
-
-    parentForm.addEventListener('force', () => {
-      updateMimicInput();
-    });
-
-    parentForm.addEventListener('change', () => {
-      updateMimicInput();
-    });
-  });
 };
 
 export const filterTable = (component, table, form, pagination): void => {
@@ -1255,12 +1167,14 @@ export const setupAjaxTable = (component, table, form, pagination): void => {
 
   form.addEventListener('submit', (event) => {
 
-    Array.from(form.querySelectorAll('[data-duplicate]')).forEach((element) => {
+    Array.from(form.querySelectorAll('[data-duplicate]')).forEach((loopElement) => {
 
-      const id = element.getAttribute('data-duplicate');
+      const element = loopElement.tagName == "IAM-INPUT" ? loopElement.querySelector('input') : loopElement;
+      const id = loopElement.getAttribute('data-duplicate');
 
-      if (document.querySelector(`[id="${id}"]`)) {
-        document.querySelector(`[id="${id}"]`).checked = element.checked;
+      if (document.querySelector(`[id="${id}"], [name="${id}"]`)) {
+
+        document.querySelector(`[id="${id}"], [name="${id}"]`).checked = element.checked;
       }
     });
 
@@ -1275,28 +1189,15 @@ export const setupAjaxTable = (component, table, form, pagination): void => {
       
       loadAjaxTable(component, table, form, pagination);
     }
+  });
 
-    if (event && event.target instanceof HTMLElement && event.target.hasAttribute('id')) {
-      const id = event.target.getAttribute('id');
-
-      if (document.querySelector(`[data-duplicate="${id}"]`)) {
-        document.querySelector(`[data-duplicate="${id}"]`).checked = event.target.checked;
-
-        
-        const changeEvent = new CustomEvent('change');
-        document.querySelector(`[data-duplicate="${id}"]`)?.dispatchEvent(changeEvent);
-
-      }
-    }
-
-    if (event && event.target instanceof HTMLElement && event.target.hasAttribute('data-duplicate') && !event.target.closest('iam-modal')) {
-      const id = event.target.getAttribute('data-duplicate');
+  // watch hidden fields for change events
+  Array.from(form.querySelectorAll('[type="hidden"]')).forEach((input) => {
 
-      if (document.querySelector(`[id="${id}"]`)) {
-        document.querySelector(`[id="${id}"]`).checked = event.target.checked;
-      }
-    }
+    input.addEventListener('change', (event) => {
 
+      loadAjaxTable(component, table, form, pagination);
+    });
   });
 
   if (actionbar) {
@@ -1323,53 +1224,6 @@ export const setupAjaxTable = (component, table, form, pagination): void => {
     });
   }
 
-  // mimic fields
-  const fields = [];
-
-  Array.from(form.querySelectorAll('[data-mimic]')).forEach((input) => {
-
-    input.addEventListener('change', (event) => {
-
-      loadAjaxTable(component, table, form, pagination);
-    });
-  });
-
-
-  Array.from(form.querySelectorAll('[data-mimic]')).forEach((input) => {
-    const mimicField = input.getAttribute('data-mimic');
-
-    Array.from(document.querySelectorAll(`[name="${mimicField}"]`)).forEach((mimicInput) => {
-
-      if (!fields.includes(mimicInput)) {
-        fields.push(mimicInput);
-      }
-    });
-  });
-
-  fields.forEach((input) => {
-
-    input.addEventListener('change', (event) => {
-
-      const name = input.getAttribute('name');
-      const mimicInput = document.querySelector(`[data-mimic="${name}"]`);
-      
-      let valueToSend = '';
-      Array.from(document.querySelectorAll(`[name="${name}"]:checked`)).forEach((input) => {
-
-        if(valueToSend == '')
-          valueToSend = input.value;
-        else
-          valueToSend += ',' + input.value;
-      });
-
-      console.log(valueToSend);
-
-      mimicInput.value = valueToSend;
-      const changeEvent = new CustomEvent('change');
-      mimicInput?.dispatchEvent(changeEvent);
-    });
-  });
-
 };
 // #region ajax tables functions