@iamproperty/components 5.5.1-beta-4 → 5.5.1-beta-5

package/assets/sass/components/actionbar.global.scss

@@ -170,3 +170,13 @@ button[slot="selected-overflow"] {
 }
 }
 // #endregion
+
+// Select all done with vue
+
+
+iam-actionbar:has(.selectall input:checked) {
+  --selectall-opacity: 1;
+  --selectall-pe: all;
+  --selectall-actionbar-opactiy: 0;
+  --selectall-action-pe: none;
+}

package/assets/sass/components/actionbar.scss

@@ -13,10 +13,13 @@
 
 // #region View states (Default, search, selected)
 .views,
-.selectall {
+.selectall,
+slot[name="selectall"] {
+  display: block;
   position: absolute!important;
   top: 50%;
   left: rem(24);
+  margin-left: 0;
   
   @include media-breakpoint-up(sm) {
     left: rem(32);
@@ -30,7 +33,8 @@
   }
 }
 
-.selectall {
+.selectall,
+slot[name="selectall"] {
   
   width: rem(40);
   overflow: hidden;
@@ -113,12 +117,25 @@
 }
 
 // Show selected bar
+.actionbar {
+
+  opacity: var(--selectall-actionbar-opacity,1);
+  pointer-events: var(--selectall-actionbar-pe,all);
+}
+
+.actionbar--selected {
+
+  opacity: var(--selectall-opacity,0);
+  pointer-events: var(--selectall-pe,none);
+}
+
 .selectall:has(input:checked) ~ .actionbar,
 .selectall:has(input:indeterminate) ~ .actionbar {
   
   opacity: 0;
   pointer-events: none;
 }
+
 .selectall:has(input:checked) ~ .actionbar--selected,
 .selectall:has(input:indeterminate) ~ .actionbar--selected {
   
@@ -140,7 +157,7 @@
 // #endregion
 
 // #region Slotted elements
-::slotted(*:not([slot="overflow"])){
+::slotted(.btn){
   margin-top: 0!important;
   margin-bottom: 0!important;
   margin-left: rem(16)!important;

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -56,7 +56,9 @@ class iamActionbar extends HTMLElement {
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="actionbar__wrapper">
+    
       <div class="actionbar">
+        <slot name="selectall"></slot>
         <div class="safe-area">
           <slot></slot>
           <div class="body">

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

@@ -39,8 +39,9 @@ class iamTable extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
     // insert extra CSS
-    if(!document.getElementById('tableExtras'))
+    if(!document.getElementById('tableExtras')){
       document.head.insertAdjacentHTML('beforeend',`<style id="tableExtras">${loadExtraCSS}</style>`);
+    }
   }
 
 	connectedCallback() {
@@ -48,17 +49,22 @@ class iamTable extends HTMLElement {
     const params = new URLSearchParams(window.location.search)
 
     // Set default attributes
-    if(!this.hasAttribute('data-total'))
+    if(!this.hasAttribute('data-total')){
       this.setAttribute('data-total', this.querySelectorAll('table tbody tr').length);
+    }
 
-    if(!this.hasAttribute('data-page'))
+    if(!this.hasAttribute('data-page')){
       this.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
+    }
 
-    if(!this.hasAttribute('data-show'))
+    if(!this.hasAttribute('data-show')){
       this.setAttribute('data-show', (params.has('show') ? params.get('show') : 15));
-    
-    if(!this.hasAttribute('data-increment'))
+    }
+      
+    if(!this.hasAttribute('data-increment')){
       this.setAttribute('data-increment', this.getAttribute('data-show'));
+    }
+      
 
     // Update table__wrapper class
     let classList = this.classList.toString();
@@ -69,8 +75,9 @@ class iamTable extends HTMLElement {
     this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
 
     // set actionbar class if needed
-    if(this.querySelector('.actionbar__sticky'))
+    if(this.querySelector('.actionbar__sticky')){
       this.shadowRoot.querySelector('.table__wrapper').classList.add('has-actionbar');
+    } 
 
     this.table = this.querySelector('table');
     this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
@@ -81,21 +88,21 @@ class iamTable extends HTMLElement {
     this.pagination.setAttribute('data-show', this.getAttribute('data-show'));
     this.pagination.setAttribute('data-increment', this.getAttribute('data-show'));
 
-    if(this.hasAttribute('data-page-jump'))
+    if(this.hasAttribute('data-page-jump')){
       this.pagination.setAttribute('data-page-jump', 'true');
-
-    if(this.hasAttribute('data-per-page'))
+    }
+    if(this.hasAttribute('data-per-page')){
       this.pagination.setAttribute('data-per-page', 'true');
-
-    if(this.hasAttribute('data-item-count'))
+    }
+    if(this.hasAttribute('data-item-count')){
       this.pagination.setAttribute('data-item-count', 'true');
-    
-    if(this.hasAttribute('data-loading'))
+    }
+    if(this.hasAttribute('data-loading')){
       this.pagination.setAttribute('data-loading', 'true');
-
-    if(this.classList.contains('table--fullwidth'))
+    }
+    if(this.classList.contains('table--fullwidth')){
       this.pagination.setAttribute('data-minimal', 'true');
-
+    }
 
     // Remove table CTA
     const isCTA = this.classList.contains('table--cta');
@@ -115,9 +122,9 @@ class iamTable extends HTMLElement {
     }
 
     // Set ajax class
-    if(this.form.hasAttribute('data-ajax'))
+    if(this.form.hasAttribute('data-ajax')){
       this.table.classList.add('table--ajax');
-
+    }
     // Create a data list if a search input is present
     tableModule.createSearchDataList(this.table, this.form);
 
@@ -150,9 +157,9 @@ class iamTable extends HTMLElement {
 
       // Add in the checkboxes
 
-      if(this.querySelector('iam-actionbar[data-selectall]')){
+      if(this.querySelector('iam-actionbar[data-selectall]') || document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`)){
         
-        const actionbar = this.querySelector('iam-actionbar[data-selectall]');
+        const actionbar = this.querySelector('iam-actionbar[data-selectall]') ? this.querySelector('iam-actionbar[data-selectall]') : document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`);
 
         Array.from(this.table.querySelectorAll('thead tr')).forEach((row,index) => {
               

package/assets/ts/modules/table.ts

@@ -195,8 +195,9 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
 
       loadAjaxTable(table, form, pagination,wrapper);
     }
-    else if(form.hasAttribute('data-submit'))
+    else if(form.hasAttribute('data-submit')){
       form.submit();
+    }
     else {
       filterTable(table, form, wrapper);
       populateDataQueries(table,form);
@@ -247,8 +248,9 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-sort]')){
       
-      if(!form.hasAttribute('data-submit'))
+      if(!form.hasAttribute('data-submit')){
         sortTable(table, form, savedTableBody);
+      }
 
       formSubmit(event);
     }
@@ -353,8 +355,9 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
 
       form.classList.remove('processing');
 
-      if(!form.hasAttribute('data-submit'))
+      if(!form.hasAttribute('data-submit')){
         sortTable(table, form, savedTableBody);
+      }
 
       formSubmit(event);
     }
@@ -364,8 +367,9 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
 
     clearTimeout(timer);
 
-    if(!form.hasAttribute('data-submit'))
+    if(!form.hasAttribute('data-submit')){
       event.preventDefault();
+    }
 
     formSubmit(event);
   });
@@ -396,11 +400,13 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
 
       let parentForm = mimicInput.closest('form');
 
-      if(!forms.includes(parentForm))
+      if(!forms.includes(parentForm)){
         forms.push(parentForm);
+      }
 
-      if(!fields.includes(mimicField))
+      if(!fields.includes(mimicField)){
         fields.push(mimicField);
+      }
       
     });
   });
@@ -495,20 +501,23 @@ export const sortTable = (table, form, savedTableBody) => {
 
     let rowIndex = tableRow.querySelector('td[data-label="'+sortBy+'"], th[data-label="'+sortBy+'"]').textContent.trim();
 
-    if(tableRow.querySelector('[data-label="'+sortBy+'"] .td__content'))
+    if(tableRow.querySelector('[data-label="'+sortBy+'"] .td__content')){
       rowIndex = tableRow.querySelector('[data-label="'+sortBy+'"] .td__content').textContent.trim();
+    }
 
     // If a predefined order set replace the search term with an ordered numeric value so it can be sorted
     if(orderArray.length && orderArray.includes(rowIndex)){
       rowIndex = orderArray.indexOf(rowIndex);
     }
 
-    if(isNumeric(rowIndex))
-      rowIndex = zeroPad(rowIndex,10)
+    if(isNumeric(rowIndex)){
+      rowIndex = zeroPad(rowIndex,10);
+    }
 
     // If the sort format is date then lets transform the index to a sortable date (this is never displayed)
-    if(format && format == "date")
+    if(format && format == "date"){
       rowIndex = new Date(rowIndex);
+    }
     
     const dataRow = {
       index: rowIndex,
@@ -521,8 +530,10 @@ export const sortTable = (table, form, savedTableBody) => {
   tableArr.sort((a, b) => (a.index > b.index) ? 1 : -1)
 
   // Reverse if descending
-  if(order == "descending" || order == "desc")
+  if(order == "descending" || order == "desc"){
     tableArr = tableArr.reverse();
+  }
+    
 
   // Create a string to return and populate the tbody
   let strTbody = '';
@@ -571,10 +582,13 @@ export const filterTable = (table, form, wrapper) => {
   let filterCount = 0;
   Object.values(filters).forEach((filter, index) => {
 
-    if(typeof filter == "object" && Object.values(filter).length)
+    if(typeof filter == "object" && Object.values(filter).length){
       filterCount += Object.values(filter).length;
-    else
+    }
+    else {
       filterCount++;
+    }
+      
   });
 
   if(filterCount) {
@@ -634,8 +648,9 @@ export const filterTable = (table, form, wrapper) => {
         }
         
         // Dynamic values
-        if(filter && filter == "$today")
+        if(filter && filter == "$today"){
           filter = formatCell('date', new Date());
+        }
         else if(filter && filter == "$yesterday"){
 
           let yesterday = new Date();
@@ -725,8 +740,9 @@ export const filterTable = (table, form, wrapper) => {
 
     });
 
-    if(!isSearched)
+    if(!isSearched){
       row.classList.add('filtered');
+    }
   });
 
   // Work out what to display after pagination
@@ -738,8 +754,9 @@ export const filterTable = (table, form, wrapper) => {
 
     // pagination bit 
     let matchesPage = Math.ceil(matched/showRows);
-    if(matchesPage == parseInt(page))
+    if(matchesPage == parseInt(page)){
       row.classList.add('filtered--show');
+    }
   });
 
   if(wrapper){
@@ -808,10 +825,13 @@ export const populateDataQueries = (table,form,wrapper) => {
       }).length;
     }
 
-    if(queryElement.hasAttribute('data-total'))
+    if(queryElement.hasAttribute('data-total')){
       queryElement.setAttribute('data-total', numberOfMatchedRows);
-    else
+    }
+    else {
       queryElement.innerHTML = numberOfMatchedRows;
+    }
+      
   });
 }
 
@@ -858,8 +878,9 @@ export const addPaginationEventListeners = function(table, form, pagination, wra
 // Export CSV Data
 export const addExportEventListeners = (button, table) => {
 
-  if(!button)
+  if(!button){
     return false;
+  }
 
   button.addEventListener('click', (event) => {
     exportAsCSV(table);