@iamproperty/components 3.7.2 → 3.7.4

package/assets/ts/components/header/header.component.ts

@@ -14,18 +14,15 @@ class iamHeader 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/header.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${assetLocation}/css/core.min.css";
+    @import "${coreCSS}";
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    :host {
-      max-width:100%!important;
-      padding:0!important;
-    }
     </style>
     <div class="header-banner">
       <div class="container" part="container">
@@ -47,6 +44,8 @@ class iamHeader extends HTMLElement {
 
 	connectedCallback() {
     
+    this.classList.add('loaded');
+
     const picture = this.shadowRoot.querySelector('picture');
     const source = this.shadowRoot.querySelector('picture source');
 

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

@@ -7,11 +7,14 @@ class iamPagination extends HTMLElement {
     super();
     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 template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${assetLocation}/css/core.min.css";
+    @import "${coreCSS}";
+    
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="pagination__wrapper d-none">
     </div>

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

@@ -8,6 +8,7 @@ class iamTable extends HTMLElement {
     super();
     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 isCTA = this.classList.contains('table--cta');
     const isExportable = this.classList.contains('table--export');
@@ -15,11 +16,12 @@ class iamTable extends HTMLElement {
     let classList = this.classList.toString();
 
     classList = classList.replace('table--cta','');
+    classList = classList.replace('table--loading','');
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${assetLocation}/css/core.min.css";
+    @import "${coreCSS}";
 
     :host(.mh-sm){
       max-height: none!important;
@@ -30,6 +32,8 @@ class iamTable extends HTMLElement {
     :host(.mh-lg){
       max-height: none!important;
     }
+    
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     ${isCTA ? '<div class="table--cta">' : ''}
     <div class="table__wrapper ${classList}">

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

@@ -15,10 +15,12 @@ class iamTabs 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 template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${assetLocation}/css/core.min.css";
+    @import "${coreCSS}";
 
     :host(.admin-panel){
       display: contents!important;

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

@@ -43,20 +43,18 @@ export const getLargestLastColWidth = (table) => {
  
   let largestWidth = 0;
 
-  Array.from(table.querySelectorAll('tr')).forEach((row, index) => {
+  Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
 
     let htmlStyles = window.getComputedStyle(document.querySelector('html'));
     let lastColChild = row.querySelector(':scope > *:last-child > *:first-child');
 
     if(lastColChild){
 
+      lastColChild.classList.add('text-nowrap');
       let responsiveWidth = lastColChild.offsetWidth/parseFloat(htmlStyles.fontSize);
-      responsiveWidth += 1.5;
+      responsiveWidth += 1.7;
       largestWidth = largestWidth > responsiveWidth ? largestWidth : responsiveWidth;
     }
-
-    let rowHeight = row.offsetHeight/parseFloat(htmlStyles.fontSize);
-    row.style.setProperty("--row-height", `${rowHeight}rem`);
   });
 
   return largestWidth;
@@ -698,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]')){
@@ -778,8 +781,22 @@ 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() {
+
+      Array.from(table.querySelectorAll('tr')).forEach((row, index) => {
+        let rowHeight = row.offsetHeight;
+        row.style.setProperty("--row-height", `${rowHeight}px`);
+      });
+    }
+    
+    new ResizeObserver(outputsize).observe(table)
   }
 }
 
@@ -902,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){