@iamproperty/components 6.1.0--beta → 6.1.0--beta2

package/assets/ts/modules/dialogs.ts

@@ -34,8 +34,11 @@ const extendDialogs = (body) => {
       dialog.showModal();
       dialog.focus();
 
-      let firstWidth = dialog.offsetWidth;
-      dialog.setAttribute('style',`max-width: ${firstWidth}px;`);
+      if(!dialog.querySelector('iam-multi-step')){
+        
+        let firstWidth = dialog.offsetWidth;
+        dialog.setAttribute('style',`max-width: ${firstWidth}px;`);
+      }
 
       // When the modal is opened we want to make sure any duplicate checkboxes are matching the originals
       Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element,index) => {
@@ -229,13 +232,8 @@ const extendDialogs = (body) => {
 
 export const createDialog = (dialog) => { 
 
-  // Multi dialog
-  if(dialog.classList.contains('dialog--multi') && !dialog.querySelector(':scope > .steps')) {
-    createMultiFormDialog(dialog);
-  }
-
   // 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.classList.contains('dialog--multi')){
+  if(!dialog.querySelector(':scope .mh-lg') && !dialog.querySelector('iam-multi-step')){
     dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
 
     let dialogContent = dialog.querySelector('.mh-lg');
@@ -258,170 +256,4 @@ export const createDialog = (dialog) => {
 
 }
 
-export const createMultiFormDialog = (dialog) => {
-
-  let buttons = "";
-  let fieldsets = Array.from(dialog.querySelectorAll('fieldset[data-title]'));
-  let form = dialog.querySelector('form');
-
-  fieldsets.forEach((fieldset,index) => {
-    buttons += `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active":""}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`;
-
-    const btnWrapper = document.createElement("div");
-    btnWrapper.classList.add('btn--wrapper');
-    fieldset.appendChild(btnWrapper);
-    
-    if(index != 0)
-      btnWrapper.innerHTML += `<button data-title="${fieldsets[index-1].getAttribute('data-title')}" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>`;
-
-    if(index != fieldsets.length - 1)
-      btnWrapper.innerHTML += `<button data-title="${fieldsets[index+1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
-
-    // Last fieldset
-    if(index == fieldsets.length - 1){
-      if(form && form.querySelector(':scope > button[type="submit"]')){
-
-        let existingButton = form.querySelector(':scope > button[type="submit"]');
-        existingButton.classList.add('mb-0')
-
-        btnWrapper.insertAdjacentElement('beforeend',existingButton);
-      }
-      else
-        btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
-    }  
-  });
-
-  dialog.insertAdjacentHTML('afterbegin',`<div class="steps bg-primary">${buttons}</div>`);
-
-
-  // Open the fieldset with an error inside
-  let validatedFieldsets = Array.from(dialog.querySelectorAll('fieldset.was-validated'));
-  for (let i = 0; i < validatedFieldsets.length; i++) {
-
-    let fieldset = validatedFieldsets[i];
-    let fieldsetID = fieldset.getAttribute('data-title');
-    
-    if(fieldset.querySelector('.is-invalid')){
-
-      Array.from(dialog.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
-
-        element.classList.add('active');
-      });
-
-      break;
-    }
-    else {
-
-      Array.from(dialog.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
-
-        element.classList.add('valid');
-      });
-    }
-  }
-
-  // Prevent the bubble messages
-  dialog.addEventListener('invalid', (function () {
-    return function (e) {
-      e.preventDefault();
-    };
-  })(), true);
-
-
-  function validateFieldset(button){
-
-    const currentFieldset = dialog.querySelector(`fieldset.active`) ? dialog.querySelector(`fieldset.active`) : dialog.querySelector(`fieldset[data-title]`);
-    const currentFieldsetID = currentFieldset.getAttribute('data-title');
-    let isFieldsetValid = true;
-
-    currentFieldset.classList.add('was-validated');
-
-    Array.from(currentFieldset.querySelectorAll('input')).forEach((input, index) => {
-
-      if (!input.checkValidity())
-        isFieldsetValid = false;
-    });
-
-    // If valid mode to next field set
-    if(!isFieldsetValid){
-
-      Array.from(dialog.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
-
-        element.classList.remove('valid');
-      });
-    }
-    else {
-
-      Array.from(dialog.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
-
-        element.classList.add('valid');
-      });
-    }
-
-    // Allow the previous button to navigate
-    if(isFieldsetValid || !button.hasAttribute('data-next')){
-
-      const fieldset = dialog.querySelector(`fieldset[data-title="${button.getAttribute('data-title')}"]`);
-      const step = dialog.querySelector(`.steps button[data-title="${button.getAttribute('data-title')}"]`);
-
-      Array.from(dialog.querySelectorAll('button')).forEach((button, index) => {
-        button.classList.remove('active');
-      });
-      Array.from(dialog.querySelectorAll('fieldset')).forEach((button, index) => {
-        button.classList.remove('active');
-      });
-
-      step.classList.add('active');
-      fieldset.classList.add('active');
-    }
-
-
-    let fieldsetCount = Array.from(dialog.querySelectorAll(`fieldset`)).length;
-    let validFieldsetCount = Array.from(dialog.querySelectorAll(`fieldset.valid`)).length;
-
-    // update the progress bar
-    dialog.style.setProperty('--progress', `${(validFieldsetCount/(fieldsetCount - 1) * 100)}%`);
-  }
-
-  // remove error messages from server
-  dialog.addEventListener('keydown', (event) => {
-    if (event && event.target instanceof HTMLElement && event.target.closest('button')){
-
-      const button = event.target.closest('button');
-
-      if(event.keyCode == 13 && button.getAttribute('type') != "submit"){
-        
-        event.preventDefault();
-        validateFieldset(button);
-      }
-
-    }
-
-    if (event && event.target instanceof HTMLElement && event.target.closest('input')){
-      const input = event.target.closest('input');
-
-      input.classList.remove('is-invalid');
-
-      if(event.keyCode == 13){
-        
-        event.preventDefault();
-      }
-    }
-  });
-
-
-  dialog.addEventListener('click', (event) => {
-    if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')){
-      
-      const form = event.target.closest('form');
-      form.classList.add('was-validated');
-    }
-    else if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
-
-      const button = event.target.closest('button[data-title]');
-      validateFieldset(button);
-    };
-    return null
-  });
-}
-
 export default extendDialogs;