@iamproperty/components 3.7.3 → 3.7.4

package/assets/ts/modules/dialogs.ts

@@ -100,18 +100,14 @@ const extendDialogs = (body) => {
     // Popover
     if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')){
 
-      // Close existing open popover
-
       let btn = event.target.closest('.dialog__wrapper > button');
       let parent = event.target.closest('.dialog__wrapper > button').parentNode;
       let dataEvent = "openPopover"
       let popover = parent.querySelector(':scope > dialog');
       
-
       if(document.querySelector('dialog[open]') && document.querySelector('dialog[open]') != popover)
         document.querySelector('dialog[open]').close();
 
-
       // Remove active class from exiting active buttons
       Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement,index) => {
         btnElement.classList.remove('active');
@@ -166,6 +162,17 @@ const extendDialogs = (body) => {
         "id": btn.textContent
       });
     };
+
+    // Close popovers when clicked away
+    if (event && event.target instanceof HTMLElement && !event.target.closest('dialog[open]') && !event.target.closest('.dialog__wrapper > button')){
+      
+      if(document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]'))
+        document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]').close();
+
+      Array.from(document.querySelectorAll('.dialog__wrapper:not([data-keep-open]) > button')).forEach((btnElement,index) => {
+        btnElement.classList.remove('active');
+      });
+    }
   });
 
   return null

package/assets/ts/modules/table.ts

@@ -696,6 +696,11 @@ export const addPaginationEventListeners = function(table, form, pagination, wra
         url.searchParams.set("page", newPage);
         history.pushState({'type':'pagination','form':form.getAttribute('id'),'page':newPage}, "", url)
       }
+
+      // scroll back to the top of the table
+      const yOffset = -250;
+      const y = table.getBoundingClientRect().top + window.pageYOffset + yOffset;
+      window.scrollTo({top: y, behavior: 'smooth'});
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')){
@@ -776,8 +781,12 @@ export const makeTableFunctional = function(table, form, pagination, wrapper){
   // Work out the largest width of the CTA's in the last column
   if(wrapper && wrapper.classList.contains('table--cta')){
 
-    const largestWidth = getLargestLastColWidth(table);
-    wrapper.style.setProperty("--cta-width", `${largestWidth}rem`);
+    if(!wrapper.hasAttribute('data-cta-width')){
+        
+      const largestWidth = getLargestLastColWidth(table);
+      wrapper.style.setProperty("--cta-width", `${largestWidth}rem`);
+      wrapper.setAttribute("data-cta-width", `${largestWidth}rem`);
+    }
 
     function outputsize() {
 
@@ -910,7 +919,7 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
         wrapper.setAttribute('data-page', parseInt(currentPage));
         wrapper.setAttribute('data-pages', Math.ceil(wrapper.getAttribute('data-total') / wrapper.getAttribute('data-show')));
 
-        makeTableFunctional(table, form, pagination, wrapper);
+        makeTableFunctional(table, form, pagination, wrapper);        
         createPaginationButttons(wrapper, pagination);
 
         if(parseInt(totalNumber) == 0){