@iamproperty/components 4.1.0-beta-2 → 4.1.0

package/assets/ts/components/pagination/pagination.component.ts

@@ -1,6 +1,4 @@
 // @ts-nocheck
-import createPaginationButttons from "../../modules/pagination";
-
 class iamPagination extends HTMLElement {
 
   constructor(){
@@ -8,15 +6,45 @@ class iamPagination extends HTMLElement {
     this.attachShadow({ mode: 'open'});
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
     const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    const loadCSS = `@import "${assetLocation}/css/components/pagination.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
     @import "${coreCSS}";
+    ${loadCSS}
     
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <div class="pagination__wrapper d-none">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <div class="pagination d-none">
+  
+      <div class="minimal" part="minimal">
+        <div class="page-jump">
+          <div><select class="select--minimal"></select></div>
+          <span class="total-pages"></span>
+        </div>
+        
+        <button class="prev" disabled>Prev</button>
+        <button class="next" disabled>Next</button>
+      </div>
+
+      <div class="item-count" part="item-count"></div>
+      <div class="per-page" part="per-page">
+        <div>
+          <select class="select--minimal">
+            <option value="15">15</option>
+            <option value="25">25</option>
+            <option value="40">40</option>
+            <option value="50">50</option>
+          </select>
+        </div>
+        <span> / page</span>
+      </div>
+      <div class="mobile-controls m-auto text-center">
+        <i class="fa-solid fa-spinner fa-spin"></i>
+        <button class="load-more btn btn-primary m-auto">Load more</a>
+      </div>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -28,7 +56,7 @@ class iamPagination extends HTMLElement {
     const params = new URLSearchParams(window.location.search);
 
     if(!this.hasAttribute('data-total'))
-      this.setAttribute('data-total', this.querySelectorAll('table tbody tr').length);
+      this.setAttribute('data-total', 15);
 
     if(!this.hasAttribute('data-page'))
       this.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
@@ -37,12 +65,158 @@ class iamPagination extends HTMLElement {
       this.setAttribute('data-show', (params.has('show') ? params.get('show') : 15));
 
     if(!this.hasAttribute('data-increment'))
-        this.setAttribute('data-increment', 15);
+        this.setAttribute('data-increment', this.getAttribute('data-show'));
+
+    // Elements
+    const select = this.shadowRoot.querySelector('.page-jump select');
+    const prev = this.shadowRoot.querySelector('.prev');
+    const next = this.shadowRoot.querySelector('.next');
+    const perPage = this.shadowRoot.querySelector('.per-page select');
+    const loadMore = this.shadowRoot.querySelector('.load-more');
+
+    // Add the select inputs, enable or disable buttons, update the helper text
+    this.setup();
+
+    // Select on change will update the data-page attr which will dispatch an event
+    select.addEventListener('change',(event) => {
+
+      
+      this.setAttribute('data-show',this.getAttribute('data-increment'))
+      this.setAttribute('data-page',event.target.value);
+    });
+
+    // Next and previous buttons will simply trigger and on change on the select which in turn will dispatch an event
+    next.addEventListener('click',(event) => {
+
+      select.value = parseInt(select.value) + 1;
+      select.dispatchEvent(new Event('change'));
+    });
+
+    prev.addEventListener('click',(event) => {
+
+      select.value = parseInt(select.value) - 1;
+      select.dispatchEvent(new Event('change'));
+    });
+
+    // Update how many is shown 
+    perPage.addEventListener('change',(event) => {
+
+      this.setAttribute('data-increment',event.target.value);
+    });
+
+    loadMore.addEventListener('click',(event) => {
+
+      let newValue = parseInt(this.getAttribute('data-show')) + parseInt(this.getAttribute('data-increment'));
+      this.setAttribute('data-show',newValue);
+
+      if(newValue > parseInt(this.getAttribute('data-total'))){
+        loadMore.remove();
+      }
+    });
+  }
+
+  setup() {
+    // Elements
+    const wrapper = this.shadowRoot.querySelector('.pagination');
+    const select = this.shadowRoot.querySelector('.page-jump select');
+    const prev = this.shadowRoot.querySelector('.prev');
+    const next = this.shadowRoot.querySelector('.next');
+    const itemCount = this.shadowRoot.querySelector('.item-count');
+    const perPage = this.shadowRoot.querySelector('.per-page select');
+    const totalPages = this.shadowRoot.querySelector('.total-pages');
+
+    // Values
+    const currentPage = parseInt(this.getAttribute('data-page'));
+    const total = parseInt(this.getAttribute('data-total'));
+    const show = parseInt(this.getAttribute('data-show'));
+    const increment = parseInt(this.getAttribute('data-increment'));
+    const numberPages = Math.ceil(total / increment);
+
+    if(total > show)
+      wrapper.classList.remove('d-none');
+      
+    // Populate the select input with the number of pages
+    let strOptions = '';
+    for (let i = 1; i <= numberPages; i++) {
+      strOptions += `<option value="${i}" ${i == currentPage ? 'selected' : ''}>${i}</option>`;
+    }
+    select.innerHTML = strOptions;
+
+    totalPages.innerHTML = `of ${numberPages}`;
+
+    // Next button
+    if(currentPage == numberPages)
+      next.setAttribute('disabled','disabled');
+    else
+      next.removeAttribute('disabled');
+
+    if(currentPage == 1)
+      prev.setAttribute('disabled','disabled');
+    else
+      prev.removeAttribute('disabled');
+
+    
+    // Update the item count text
+    let startPoint = currentPage == 1 ? 1 : ((currentPage-1)*show)+1;
+    let endPoint = currentPage == 1 ? show : ((currentPage)*show);
+    itemCount.innerHTML = `${startPoint} - ${endPoint > total ? total : endPoint} of ${total} items`;
+    
+    const defaultValues = [15,25,40,50];
+
+    // Update the per page options if needed
+    if(increment && perPage.value != increment && !defaultValues.includes(increment)){
+      perPage.innerHTML = `<option value="${increment}">${increment}</option>
+      <option value="${increment*2}">${increment*2}</option>
+      <option value="${increment*3}">${increment*3}</option>
+      <option value="${increment*4}">${increment*4}</option>`;
+    }
+    
+    perPage.value = increment;
+  }
+
+  static get observedAttributes() {
+    return ["data-total","data-increment","data-page","data-show"];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal) {
+
+    switch (attrName) {
+      case "data-total": {
+        if(oldVal != newVal){
+          this.setAttribute('data-page', 1);
+          this.setup();
+        }
+        break;
+      }
+      case "data-show": {
+        if(oldVal != newVal){
+          
+          this.setAttribute('data-page', 1);
+          this.setup();
+          this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
+        }
+        break;
+      }
+      case "data-increment": {
+        if(oldVal != newVal){
+          this.setAttribute('data-show', newVal);
+          this.setAttribute('data-page', 1);
+          this.setup();
+          this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
+        }
+        break;
+      }
+      case "data-page": {
 
-    this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / this.getAttribute('data-show')));
-    createPaginationButttons(this,this.shadowRoot.querySelector('.pagination__wrapper'));
+        if(oldVal != newVal) {
 
-    this.shadowRoot.querySelector('.pagination__wrapper').classList.remove('d-none');
+          this.setup();
+          // Dispact the event for other components to use as triggers 
+          this.dispatchEvent(new CustomEvent('update-page', { detail: { page: newVal } }));
+        }
+        break;
+      }
+    }
   }
 }
 

package/assets/ts/components/table/README.md

@@ -28,11 +28,13 @@ import('../node_modules/@iamproperty/components/assets/js/components/table/table
 | ------ | ---- | ------------- | ----------- |
 | data-show | int | 15 | Update how many rows can be shown per page |
 | data-filterby | string (form ID) | | Give an optional form ID to connect a form to the table and make it act like a filtering system |
+| data-no-scroll | flag | - | Stops the page from scrolling up to the top of the table |
+| data-expandable | flag | - | Adds expandable buttons to rows with will allow for larger paragraphs to be shown correctly |
 
+*Pagination properties can also be added to the table component so that they can be passed down to the child pagination element.*
 
 **Class modifiers**
 
-- Adding a class of **.table--cta** to the table component will fix the last column of the table in place (While on tablet or desktop). 
-- Adding a class of **.table--export** to the table component will create a button at the bottom of the table to export its contents out as a CSV file.
+- Adding a class of **.table--cta** to the table component will fix the last column of the table in place (While on tablet or desktop).
 - Adding a class of **.table--fullwidth** to the table component will prevent it from becoming a stacked view on mobile.
 - Adding a class of **.table--mh-small**,**.table--mh-medium** or **.table--mh-large** to the table component will give the table container a max height and the ability to scroll.

package/assets/ts/components/table/table.component.ts

@@ -1,7 +1,5 @@
 // @ts-nocheck
 import * as tableModule from "../../modules/table";
-import createPaginationButttons from "../../modules/pagination";
-
 class iamTable extends HTMLElement {
 
   constructor(){
@@ -9,11 +7,14 @@ class iamTable extends HTMLElement {
     this.attachShadow({ mode: 'open'});
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
     const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
-
+    const loadCSS = `@import "${assetLocation}/css/components/table.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/table.extras.css";`;
+    
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
     @import "${coreCSS}";
+    ${loadCSS}
 
     :host(.mh-sm){
       max-height: none!important;
@@ -33,10 +34,13 @@ class iamTable extends HTMLElement {
       <slot></slot>
     </div>
     </div>
-    <div class="table__pagination"></div>
+    <iam-pagination class="pagination--table" ${this.hasAttribute('data-page')?`data-page="${this.getAttribute('data-page')}"`:''} ></iam-pagination>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
+    // insert extra CSS
+    if(!document.getElementById('tableExtras'))
+      document.head.insertAdjacentHTML('beforeend',`<style id="tableExtras">${loadExtraCSS}</style>`);
   }
 
 	connectedCallback() {
@@ -51,12 +55,10 @@ class iamTable extends HTMLElement {
       this.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
 
     if(!this.hasAttribute('data-show'))
-      this.setAttribute('data-show', 15);
-
+      this.setAttribute('data-show', (params.has('show') ? params.get('show') : 15));
+    
     if(!this.hasAttribute('data-increment'))
-      this.setAttribute('data-increment', 15);
-
-    this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / this.getAttribute('data-show')));
+      this.setAttribute('data-increment', this.getAttribute('data-show'));
 
     // Update table__wrapper class
     let classList = this.classList.toString();
@@ -71,7 +73,28 @@ class iamTable extends HTMLElement {
 
     this.table = this.querySelector('table');
     this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
-    this.pagination = this.shadowRoot.querySelector('.table__pagination');
+
+    this.pagination = this.shadowRoot.querySelector('iam-pagination');
+    this.pagination.setAttribute('data-total', this.getAttribute('data-total'));
+    this.pagination.setAttribute('data-page', this.getAttribute('data-page'));
+    this.pagination.setAttribute('data-show', this.getAttribute('data-show'));
+    this.pagination.setAttribute('data-increment', this.getAttribute('data-show'));
+
+    if(this.hasAttribute('data-page-jump'))
+      this.pagination.setAttribute('data-page-jump', 'true');
+
+    if(this.hasAttribute('data-per-page'))
+      this.pagination.setAttribute('data-per-page', 'true');
+
+    if(this.hasAttribute('data-item-count'))
+      this.pagination.setAttribute('data-item-count', 'true');
+    
+    if(this.hasAttribute('data-loading'))
+      this.pagination.setAttribute('data-loading', 'true');
+
+    if(this.classList.contains('table--fullwidth'))
+      this.pagination.setAttribute('data-minimal', 'true');
+
 
     // Remove table CTA
     const isCTA = this.classList.contains('table--cta');
@@ -97,7 +120,7 @@ class iamTable extends HTMLElement {
     // Create a data list if a search input is present
     tableModule.createSearchDataList(this.table, this.form);
 
-    if(!this.form.querySelector('[data-page]')){
+    if(!this.form.querySelector('[data-pagination]')){
       this.form.innerHTML += `<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`
     }
     if(!this.form.querySelector('[data-show]')){
@@ -114,123 +137,151 @@ class iamTable extends HTMLElement {
       tableModule.loadAjaxTable(this.table, this.form, this.pagination, this);
     }
     else {
-      tableModule.makeTableFunctional(this.table, this.form, this.pagination, this);
-      tableModule.filterTable(this.table, this.form,this);
-      createPaginationButttons(this,this.pagination);
-      tableModule.populateDataQueries(this.table, this.form);
-    }
 
-    this.shadowRoot.querySelector('.table__wrapper').addEventListener("scroll", (event) => {
-
-      if(this.table.querySelector('dialog[open]')){
-        
-        this.table.querySelector('dialog[open]').close();
-        this.table.querySelector('.dialog__wrapper > button.active').classList.remove('active');
-      }
-
-    });
 
+      function uniqueID(index = 1){
 
-    // Add in the checkboxes
+        let ID = Math.floor(Math.random() * Date.now() * (index+1));
 
-    if(this.querySelector('iam-actionbar[data-selectall]')){
+        return ID;
+      }
       
-      const actionbar = this.querySelector('iam-actionbar[data-selectall]');
 
-      Array.from(this.table.querySelectorAll('thead tr')).forEach((row,index) => {
-            
-        row.insertAdjacentHTML(
-          'afterbegin',
-          "<th></th>"
-        );
-      });
+      // Add in the checkboxes
 
-      Array.from(this.table.querySelectorAll('tbody tr')).forEach((row,index) => {
-            
-        row.insertAdjacentHTML(
-          'afterbegin',
-          `<td class="selectrow"><input type="checkbox" name="row" id="row${index}"/><label for="row${index}"><span class="visually-hidden">Select row</span></label></td>`
-        );
-      });
+      if(this.querySelector('iam-actionbar[data-selectall]')){
+        
+        const actionbar = this.querySelector('iam-actionbar[data-selectall]');
 
-      this.table.addEventListener('change',(event) => {
+        Array.from(this.table.querySelectorAll('thead tr')).forEach((row,index) => {
+              
+          row.insertAdjacentHTML(
+            'afterbegin',
+            `<th class="th--fixed"></th>`
+          );
+        });
 
-        if (event && event.target instanceof HTMLElement && event.target.closest('.selectrow input')){
+        Array.from(this.table.querySelectorAll('tbody tr')).forEach((row,index) => {
+          
+          let rowID = `row${uniqueID(index)}`;
+          row.insertAdjacentHTML(
+            'afterbegin',
+            `<td class="td--fixed selectrow"><input type="checkbox" name="row" id="${rowID}"/><label for="${rowID}"><span class="visually-hidden">Select row</span></label></td>`
+          );
+        });
 
-        
-          let count = this.table.querySelectorAll('.selectrow input[type="checkbox"]').length;
-          let countChecked = this.table.querySelectorAll('.selectrow input[type="checkbox"]:checked').length;
+        this.table.addEventListener('change',(event) => {
 
-          actionbar.setAttribute('data-selected', count == countChecked ? "all" : countChecked);
+          if (event && event.target instanceof HTMLElement && event.target.closest('.selectrow input')){
 
-          console.log(countChecked);
-        };
+          
+            let count = this.table.querySelectorAll('.selectrow input[type="checkbox"]').length;
+            let countChecked = this.table.querySelectorAll('.selectrow input[type="checkbox"]:checked').length;
 
-      });
+            actionbar.setAttribute('data-selected', count == countChecked ? "all" : countChecked);
+          };
 
-      actionbar.addEventListener('selected', (event) => {
+        });
 
-        console.log(event.detail.selected);
+        actionbar.addEventListener('selected', (event) => {
 
+          if(event.detail.selected == '0'){
 
-        if(event.detail.selected == '0'){
+            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input,index) => {
+              
+              input.checked = false;
+            });
 
-          Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input,index) => {
+          }
+          else if(event.detail.selected == 'all'){
             
-            input.checked = false;
-          });
+            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input,index) => {
+              
+              input.checked = true;
+            });
 
-        }
-        else if(event.detail.selected == 'all'){
+          }
           
-          Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input,index) => {
-            
-            input.checked = true;
-          });
+        });
+
+      }
 
+      // Make the dialog menus columns fixed 
+      let colIndex = -1;
+      Array.from(this.table.querySelectorAll('tbody tr')).forEach((row,index) => {
+              
+        if(row.querySelector(':scope > td > .dialog__wrapper')){
+
+          let columnn = row.querySelector(':scope > td > .dialog__wrapper').parentNode;
+
+          columnn.classList.add('td--fixed');
+
+          colIndex = Array.from(columnn.parentNode.children).indexOf(columnn);
         }
-        
       });
 
+      if(colIndex != -1){
+
+
+        this.table.querySelector(`thead tr th:nth-child(${colIndex+1})`).classList.add('th--fixed');
+
+        Array.from(this.table.querySelectorAll(`tbody tr td:nth-child(${colIndex+1})`)).forEach((col,index) => {
+            
+          col.classList.add('td--fixed');
+        });
+      }
+
+
+
+      tableModule.makeTableFunctional(this.table, this.form, this.pagination, this);
+      tableModule.filterTable(this.table, this.form,this);
+      tableModule.populateDataQueries(this.table, this.form);
     }
+
+    this.shadowRoot.querySelector('.table__wrapper').addEventListener("scroll", (event) => {
+
+      if(this.table.querySelector('dialog[open]')){
+        
+        this.table.querySelector('dialog[open]').close();
+        this.table.querySelector('.dialog__wrapper > button.active').classList.remove('active');
+      }
+
+    });
+
   }
 
 
   static get observedAttributes() {
-    return ["data-total","data-pages","data-page","data-show"];
+    return ["data-total","data-page","data-show"];
   }
   
   attributeChangedCallback(attrName, oldVal, newVal) {
-    /*
+    
+    this.pagination = this.shadowRoot.querySelector('iam-pagination');
+
     switch (attrName) {
       case "data-total": {
-        this.setAttribute('data-pages', Math.ceil(newVal / this.getAttribute('data-show')));
+        
+        if(oldVal != newVal){
+          this.pagination.setAttribute('data-total',newVal);
+        }
         break;
       }
       case "data-show": {
-        this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / newVal));
-        break;
-      }
-      case "data-pages": {
-        console.log('create pagination');
-
-        tableModule.filterTable(this.table, this.form);
-        createPaginationButttons(this,this.pagination);
-
+        
+        if(oldVal != newVal){
+          this.pagination.setAttribute('data-show',newVal);
+        }
         break;
       }
       case "data-page": {
 
-        let paginationInput = this.form.querySelector('[data-pagination]');
-
-        paginationInput.value = newVal;
-        
-        //tableModule.filterTable(this.table, this.form);
-
+        if(oldVal != newVal){
+          this.pagination.setAttribute('data-page',newVal);
+        }
         break;
       }
     }
-    */
   }
 }
 

package/assets/ts/components/tabs/README.md

@@ -16,12 +16,12 @@ import('../node_modules/@iamproperty/components/assets/js/components/tabs/tabs.c
 ```
 <iam-tabs class="container">
   <details>
-    <summary>Question 1</summary>
-    <p>Answer </p>
+    <summary>Tab one</summary>
+    <p>Content one... Any element after summary is within content. First tab is active by default.</p>
   </details>
   <details>
-    <summary>Question 2</summary>
-    <p>Answer</p>
+    <summary>Tab two</summary>
+    <p>Content two... </p>
   </details>
 </iam-tabs>
 ```
@@ -30,4 +30,5 @@ import('../node_modules/@iamproperty/components/assets/js/components/tabs/tabs.c
 
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
-| title  | String | - | Used for the heading of the component |
+| title  | String | - | Used for the heading of the component |
+| disabled  | Boolean | - | Used to apply disabled state for a tab (tab content will not be reachable) |

package/assets/ts/components/tabs/tabs.component.ts

@@ -29,7 +29,9 @@ class iamTabs extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="tabs">
-      <div class="tabs__links"></div>
+      <div class="tabs__links__wrapper">
+        <div class="tabs__links"></div>
+      </div>
       <slot></slot>
     </div>
     `;

package/assets/ts/modules/applied-filters.ts

@@ -97,15 +97,12 @@ function createAppliedFilters(container,filters) {
     addFilterButton(filters, input)
   });
 
+  Array.from(container.querySelectorAll('input[data-filter-text]')).forEach((input, index) => {
+    
+    input.addEventListener('change', function(event){
 
-  container.addEventListener('change', function(event){
-
-    if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')){
-
-      let input = event.target.closest('input[data-filter-text]');
-
-      addFilterButton (filters, input);
-    }
+      addFilterButton(filters, input)
+    });
   });
 
   filters.addEventListener('click', function(event){

package/assets/ts/modules/dialogs.ts

@@ -261,6 +261,7 @@ 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>`;
@@ -275,8 +276,18 @@ export const createMultiFormDialog = (dialog) => {
     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>`;
 
-    if(index == fieldsets.length - 1)
-      btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</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>`);
@@ -376,11 +387,12 @@ export const createMultiFormDialog = (dialog) => {
 
       const button = event.target.closest('button');
 
-      if(event.keyCode == 13){
+      if(event.keyCode == 13 && button.getAttribute('type') != "submit"){
         
         event.preventDefault();
         validateFieldset(button);
       }
+
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('input')){
@@ -388,7 +400,10 @@ export const createMultiFormDialog = (dialog) => {
 
       input.classList.remove('is-invalid');
 
-
+      if(event.keyCode == 13){
+        
+        event.preventDefault();
+      }
     }
   });