@iamproperty/components 7.5.1--beta6 → 7.5.1--beta8

package/assets/ts/modules/card.module.ts

@@ -25,10 +25,15 @@ export const setupCard = (cardComponent: any): void => {
 
   // Inset the HTML for the data total or icon fallback
   if (cardComponent.hasAttribute('data-total')) {
-    cardBody.insertAdjacentHTML(
-      'beforeend',
-      `<div class="card__total">${cardComponent.getAttribute('data-total')}</div>`
-    );
+
+    if(!cardBody?.querySelector('.card__total'))
+      cardBody.insertAdjacentHTML(
+        'beforeend',
+        `<div class="card__total">${cardComponent.getAttribute('data-total')}</div>`
+      );
+    else {
+      cardBody?.querySelector('.card__total')?.innerHTML = cardComponent.getAttribute('data-total');
+    }
   } else if (cardComponent.querySelector('[slot="total-icon"]')) {
     cardBody.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
   }

package/assets/ts/modules/dialogs.ts

@@ -23,6 +23,10 @@ const extendDialogs = (body): void => {
         : button.getAttribute('data-filter');
       const dialog = document.querySelector(`dialog#${modalID}`);
 
+      if(document.querySelector(`iam-modal#${modalID}`)) return false;
+
+      if(document.querySelector(`iam-multi-step-modal#${modalID}`)) return false;
+
       createDialog(dialog);
 
       // Open the modal!
@@ -232,7 +236,7 @@ const extendDialogs = (body): void => {
 
 export const createDialog = (dialog): void => {
   // If you are using Vue eevents and bindings its recommended to add in the .mh-lg div manually to the dialog
-  if (!dialog.querySelector(':scope .mh-lg') && !dialog.querySelector('iam-multi-step')) {
+  if (dialog && !dialog.querySelector(':scope .mh-lg') && !dialog.querySelector('iam-multi-step')) {
     dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
 
     const dialogContent = dialog.querySelector('.mh-lg');
@@ -248,7 +252,7 @@ export const createDialog = (dialog): void => {
   }
 
   // Create close button is needed
-  if (!dialog.querySelector(':scope > button:first-child'))
+  if (dialog && !dialog.querySelector(':scope > button:first-child'))
     dialog.insertAdjacentHTML('afterbegin', `<button class="dialog__close">Close</button>`);
 };
 

package/assets/ts/modules/password.ts

@@ -0,0 +1,82 @@
+import hibpCheck from '../vendor/hibp.js';
+
+export const changeType = function (element: Element): void {
+    const buttonEle = element.querySelector('button')
+    const associatedInput = element?.parentNode?.querySelector('input');
+
+    element.addEventListener('click', (event) => {
+      const currentType = associatedInput.type;
+
+      const newType = currentType === 'password' ? 'text' : 'password';
+      const isPasswordType = currentType === 'password';
+
+      associatedInput.setAttribute('type', newType);
+      associatedInput.setAttribute('data-password-type', isPasswordType);
+
+      if (element.hasAttribute('data-alt-class')) {
+        const newClass = element.getAttribute('data-alt-class');
+        element.setAttribute('data-alt-class', buttonEle.getAttribute('class'));
+        buttonEle.setAttribute('class', newClass);
+      }
+    
+    });
+}
+
+
+export const checkPWDStrength = (input, check = 'no'): void => {
+  const pwdChecker = document.getElementById(input.getAttribute('data-strength-checker'));
+  const password = input.value;
+  const minChars = input.hasAttribute('minlength') ? input.getAttribute('minlength') : 12;
+
+  let strength = 1;
+  const strengthName = ['Very weak', 'Weak', 'Average', 'Strong', 'Very strong'];
+  let extraMsg = '';
+
+  //has number
+  if (password.match(/(?=.*[0-9])/)) strength += 1;
+  // has special character
+  if (password.match(/(?=.*[!,%,&,#,$,^,*,?,_,~,<,>,])/)) strength += 1;
+  // has lowercase alpha
+  if (password.match(/(?=.*[a-z])/)) strength += 1;
+  // has uppercase alpha
+  if (password.match(/(?=.*[A-Z])/)) strength += 1;
+
+  if (password.length < minChars) {
+    strength = 1;
+    extraMsg = `(must be at least ${minChars} characters.)`;
+  }
+
+  // if the strength is above weak and above the minimum length do some kind of api call to check if its in a list of passwords
+
+  if (strength >= 3 && check == 'no') {
+    hibpCheck(password, input);
+
+    input.addEventListener('hibpCheck', function (event) {
+      checkhibpCheck(event, input);
+    });
+
+    function checkhibpCheck(event, input): void {
+      if (event.detail) {
+        // found
+        checkPWDStrength(input, 'danger');
+      } else {
+        // not found
+        checkPWDStrength(input, 'success');
+      }
+
+      input.removeEventListener('hibpCheck', checkhibpCheck); // Succeeds
+    }
+  } else if (strength >= 3 && check == 'danger') {
+    strength = 3;
+    extraMsg = `(this password is very common)`;
+  }
+
+  if (pwdChecker) {
+    if (strength <= 3) pwdChecker.classList.add('invalid-feedback');
+    else pwdChecker.classList.remove('invalid-feedback');
+
+    pwdChecker.setAttribute('data-strength', strength);
+    pwdChecker.innerHTML = `Password strength: ${strengthName[strength - 1]} ${extraMsg}`;
+  }
+};
+

package/assets/ts/modules/table.ts

@@ -1,3 +1,4 @@
+import { doc } from 'prettier';
 import { zeroPad, isNumeric, ucfirst, resolvePath, uniqueID } from './helpers';
 
 // #region Helpers
@@ -102,6 +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;
 
@@ -719,7 +721,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]')) {
@@ -757,7 +759,7 @@ export const addFilterEventListeners = (component, table, form, pagination, save
       filterTable(component, table, form, pagination);
     });
   }
-
+*/
   form.addEventListener('keyup', (event) => {
     clearTimeout(timer);
 
@@ -1252,11 +1254,51 @@ export const setupAjaxTable = (component, table, form, pagination): void => {
   const actionbar = component.querySelector('iam-actionbar');
 
   form.addEventListener('submit', (event) => {
+
+    Array.from(form.querySelectorAll('[data-duplicate]')).forEach((element) => {
+
+      const id = element.getAttribute('data-duplicate');
+
+      if (document.querySelector(`[id="${id}"]`)) {
+        document.querySelector(`[id="${id}"]`).checked = element.checked;
+      }
+    });
+
     loadAjaxTable(component, table, form, pagination);
 
     event.preventDefault();
   });
 
+  form.addEventListener('change', (event) => {
+    
+    if(!event.target.closest('iam-modal')){
+      
+      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');
+
+      if (document.querySelector(`[id="${id}"]`)) {
+        document.querySelector(`[id="${id}"]`).checked = event.target.checked;
+      }
+    }
+
+  });
+
   if (actionbar) {
     actionbar.addEventListener('change', (event) => {
       loadAjaxTable(component, table, form, pagination);
@@ -1278,11 +1320,59 @@ export const setupAjaxTable = (component, table, form, pagination): void => {
       component.dispatchEvent(submitEvent);
 
       loadAjaxTable(component, table, form, pagination);
-      console.log('hello');
     });
   }
 
 
+  // 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
 
@@ -1372,12 +1462,12 @@ export const loadAjaxTable = async function (component, table, form, pagination)
     })
       .then((response) => response.json())
       .then((response) => {
-        const schema = form.hasAttribute('data-schema') ? form.getAttribute('data-schema') : 'data';
-        const totalNumberSchema = form.hasAttribute('data-schema-total')
-          ? form.getAttribute('data-schema-total')
+        const schema = component.hasAttribute('data-schema') ? component.getAttribute('data-schema') : 'data';
+        const totalNumberSchema = component.hasAttribute('data-schema-total')
+          ? component.getAttribute('data-schema-total')
           : 'meta.total';
-        const currentPageSchema = form.hasAttribute('data-schema-page')
-          ? form.getAttribute('data-schema-page')
+        const currentPageSchema = component.hasAttribute('data-schema-page')
+          ? component.getAttribute('data-schema-page')
           : 'meta.current_page';
 
         const totalNumber = resolvePath(response, totalNumberSchema, 15);
@@ -1453,11 +1543,11 @@ export const loadAjaxTable = async function (component, table, form, pagination)
             tbody.appendChild(table_row);
           });
 
-          component.setAttribute('data-total', parseInt(totalNumber));
-          component.setAttribute('data-page', parseInt(currentPage));
+          //component.setAttribute('data-total', parseInt(totalNumber));
+          //component.setAttribute('data-page', parseInt(currentPage));
 
-          pagination.setAttribute('data-total', totalNumber);
-          pagination.setAttribute('data-page', currentPage);
+          //pagination.setAttribute('data-total', totalNumber);
+          //pagination.setAttribute('data-page', currentPage);
 
           Array.from(form.querySelectorAll('[data-ajax-query]')).forEach((queryElement) => {
             const totalNumber = resolvePath(response, queryElement.getAttribute('data-ajax-query'), '');

package/assets/ts/scripts.ts

@@ -2,7 +2,7 @@
 import * as helpers from './modules/helpers';
 import extendDialogs from './modules/dialogs';
 import createDataLayer from './modules/data-layer';
-import extendInputs from './modules/inputs';
+
 import createDynamicEvents from './modules/dynamicEvents';
 import videoSupport from './modules/videos';
 
@@ -56,7 +56,7 @@ document.addEventListener('DOMContentLoaded', async (): void => {
   helpers.addGlobalEvents(document.body);
 
   extendDialogs(document.body);
-  extendInputs(document.body);
+  
 
   videoSupport(document.body);