@iamproperty/components 4.0.0 → 4.1.0-beta

package/assets/sass/components/table.scss

@@ -76,7 +76,7 @@ tr td[colspan="100%"]:first-child:last-child span {
 @container (width >= 60em) {
   thead {
 
-    th {
+    th:not(:empty) {
       white-space: nowrap;
       min-width: #{$td-mw};
     }
@@ -136,12 +136,17 @@ table.border-0 {
     margin-bottom: 0;
 
     td:has(input[type="checkbox"]) {
-      width: rem(30);
-      min-width: rem(30);
-      max-width: rem(30);
+      width: rem(40);
+      min-width: rem(40);
+      max-width: rem(40);
     }
   }
 
+  @media screen and (prefers-color-scheme: dark) {
+    
+    background: var(--colour-canvas-2);
+  }
+
   @media (forced-colors: active) {
     --wrapper-padding: 0;
     background: var(--colour-canvas-2);
@@ -170,6 +175,11 @@ table.border-0 {
     margin-right: -1.5rem;
     margin-bottom: 0;
     background: white;
+
+    @media screen and (prefers-color-scheme: dark) {
+      
+      background: var(--colour-canvas-2);
+    }
   }
   
 
@@ -381,7 +391,13 @@ table.border-0 {
       margin-left: rem(-40);
       min-height: var(--row-height);
       text-align: right;
+      background: linear-gradient(90deg, transparent 0%, white 1.25rem);
+      cursor: default;
+
+      @media screen and (prefers-color-scheme: dark) {
+        
       background: linear-gradient(90deg, transparent 0%, var(--colour-canvas-2) 1.25rem);
+      }
 
       &:after {
         bottom: 0;
@@ -622,3 +638,68 @@ table {
     color: var(--colour-primary);
   }
 }
+
+// #region Table with actionbar 
+
+iam-table {
+
+  td:has([type="checkbox"]){
+    position: static!important;
+    width: rem(40);
+  }
+
+  input:is([type="radio"],[type="checkbox"]) + label {
+    padding-left: 0!important;
+    margin: 0!important;
+  
+    &:before,
+    &:after {
+      top: 0!important;
+    }
+  }
+
+  table:has([type="checkbox"]:checked) tr:has([type="checkbox"]){
+    
+    cursor: pointer;
+
+    &:is(:hover, :focus) {
+      
+      background: var(--hover-background);
+    }
+
+    td {
+      background: transparent;
+    }
+
+    [type="checkbox"] {
+      width: 100%;
+      height: 100%;
+      max-height: var(--row-height);
+      max-width: 100%;
+      cursor: pointer;
+      pointer-events: all;
+      top: auto;
+      margin: 0;
+      margin-top: -0.75rem;
+    }
+
+  }
+}
+
+@container (width < 23.4375em) {
+
+  iam-table:has([slot="before"]) {
+
+    iam-actionbar {
+      background-color: #e6eaec;
+    }
+    .actionbar__sticky + * {
+      margin-top: 0!important;
+    }
+  }
+
+  .table__wrapper.has-actionbar {
+    margin-top: calc(-100vh - -6.75rem)!important;
+  }
+}
+// #endregion

package/assets/sass/core.scss

@@ -2,5 +2,6 @@
 
 @use "_fonts";
 @use "_corefiles";
+@use '../../assets/sass/components/nav-global.scss';
 @use "_forms";
 @use "_print";

package/assets/sass/error.scss

@@ -2,4 +2,5 @@
 
 // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
 @use "_func" as *;
-@import "_corefiles";
+@import "_corefiles";
+@import '../../assets/sass/components/nav-global.scss';

package/assets/sass/foundations/root.scss

@@ -39,7 +39,7 @@
 }
 
 // Dark mode; functional colours get updated
-@media screen and (prefers-color-scheme: dark) {
+@include dark-mode() {
   :root {
     
     @each $color, $value in $dark-mode-colors {
@@ -49,7 +49,7 @@
   }
 }
 
-@media screen and (prefers-color-scheme: light) {
+@include light-mode() {
 
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
   [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-canvas):not(.bg-canvas-2):not(.invert-colours) {
@@ -72,7 +72,7 @@
   }
 }
 
-@media screen and (prefers-color-scheme: dark) {
+@include dark-mode() {
 
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
   [class*="bg-"]:not(.bg-canvas):not(.bg-canvas-2) {

package/assets/sass/main.scss

@@ -2,6 +2,7 @@
 
 @use "_fonts";
 @use "_corefiles";
-@use "_forms";
-@use "_components";
-@use "_print";
+@import '../../assets/sass/components/nav-global.scss';
+@import "_forms";
+@import "_components";
+@import "_print";

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

@@ -132,6 +132,43 @@ class iamActionbar extends HTMLElement {
         });
       }
     }
+
+    // Wtach div for the select inputs
+    if(this.hasAttribute('data-select-watch')){
+
+      const element = document.getElementById(this.getAttribute('data-select-watch'));
+      element.setAttribute('data-select-container','true');
+      Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+        input.parentElement.setAttribute('slot','checkbox');
+      });
+      element.addEventListener('change',(event) => {
+
+        if (event && event.target instanceof HTMLElement && event.target.closest('[type="checkbox"]')){
+
+          let count = element.querySelectorAll('input[type="checkbox"]').length;
+          let countChecked = element.querySelectorAll('input[type="checkbox"]:checked').length;
+          that.setAttribute('data-selected', count == countChecked ? "all" : countChecked);
+
+          let input = event.target.closest('[type="checkbox"]');
+
+          if(countChecked){
+            Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+            
+              if(input.closest('iam-card'))
+                input.closest('iam-card').setAttribute('data-selected','true');
+            });
+          }
+          else {
+            Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+
+              if(input.closest('iam-card'))
+                input.closest('iam-card').removeAttribute('data-selected');
+            });
+          }
+          
+        };
+      });
+    }
     // #endregion
 
     // #region switchviews
@@ -385,8 +422,36 @@ class iamActionbar extends HTMLElement {
         
         if(selectAll)
           setSelectAllInput(selectAll, newVal);
-          const event = new CustomEvent("selected", { detail: { selected: newVal } });
-          this.dispatchEvent(event);
+
+        const event = new CustomEvent("selected", { detail: { selected: newVal } });
+        this.dispatchEvent(event);
+
+        if(newVal == "all" && this.hasAttribute('data-select-watch')){
+
+          const element = document.getElementById(this.getAttribute('data-select-watch'));
+
+          Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+            
+            input.checked = true;
+
+            if(input.closest('iam-card'))
+              input.closest('iam-card').setAttribute('data-selected','true');
+          });
+        }
+
+        if(newVal == "0" && this.hasAttribute('data-select-watch')){
+
+          const element = document.getElementById(this.getAttribute('data-select-watch'));
+
+          Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+            
+            input.checked = false;
+
+            if(input.closest('iam-card'))
+              input.closest('iam-card').removeAttribute('data-selected','true');
+          });
+        }
+
         break;
       }
     }

package/assets/ts/components/card/card.component.ts

@@ -37,6 +37,8 @@ class iamCard extends HTMLElement {
       ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
         <slot></slot>
       </div>
+        
+      <slot name="checkbox"></slot>
       ${this.hasAttribute('data-cta') ? `<div class="card__footer"><span class="link">${this.getAttribute('data-cta')}</span></div>` : ''}
     </div>
     `;
@@ -44,7 +46,7 @@ class iamCard extends HTMLElement {
   }
 
 	connectedCallback() {
-    
+
     this.classList.add('loaded');
     
     // Mimic clicking the parent node so the focus and target events can be on the card
@@ -64,6 +66,13 @@ class iamCard extends HTMLElement {
         card.classList.remove('checked');
     }
 
+    // Click event down
+    this.addEventListener('click', (event) => {
+
+      let clickEvent = new Event('click');
+      card.dispatchEvent(clickEvent);
+    });
+
     card.addEventListener('click', (event) => {
 
       if(parentNode.matches('label[for]')){
@@ -151,7 +160,8 @@ class iamCard extends HTMLElement {
   attributeChangedCallback(attrName, oldVal, newVal) {
     switch (attrName) {
       case "data-total": {
-        this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
+        if(this.shadowRoot.querySelector('.card__total'))
+          this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
         break;
       }
       case "class": {

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

@@ -65,6 +65,10 @@ class iamTable extends HTMLElement {
     classList = classList.replace('table--loading','');
     this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
 
+    // set actionbar class if needed
+    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);
     this.pagination = this.shadowRoot.querySelector('.table__pagination');

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

@@ -96,7 +96,8 @@ function createAppliedFilters(container,filters) {
   Array.from(container.querySelectorAll('input[type="checkbox"]:checked')).forEach((input, index) => {
     addFilterButton(filters, input)
   });
-  
+
+
   container.addEventListener('change', function(event){
 
     if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')){
@@ -104,9 +105,8 @@ function createAppliedFilters(container,filters) {
       let input = event.target.closest('input[data-filter-text]');
 
       addFilterButton (filters, input);
-    };
-    
-  }, false);
+    }
+  });
 
   filters.addEventListener('click', function(event){
 
@@ -136,7 +136,8 @@ function createAppliedFilters(container,filters) {
             input.checked = false;
 
             var event = new Event('force');
-            input.closest('form').dispatchEvent(event);
+            if(!container.hasAttribute('data-nosubmit'))
+              input.closest('form').dispatchEvent(event);
           }
         }
       }

package/assets/ts/modules/dialogs.ts

@@ -36,6 +36,23 @@ const extendDialogs = (body) => {
       dialog.showModal();
       dialog.focus();
 
+      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) => {
+        
+        const id = element.getAttribute('data-duplicate');
+        const originalInput = document.getElementById(id);
+
+        if(element.checked != originalInput.checked){
+
+          element.checked = originalInput.checked;
+          let changeEvent = new Event('change');
+          element.dispatchEvent(changeEvent);
+        }
+      });
+
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
         "event": "openModal",

package/assets/ts/modules/table.ts

@@ -140,7 +140,35 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
   var timer;
 
   // Check what conditions are set on the table to see what the form actions are
-  let formSubmit = function(paginate = false){
+  let formSubmit = function(event, paginate = false){
+
+    if(form.classList.contains('processing'))
+      return false;
+
+
+    // Before submitting check if any duplicate checkboxes within the filters dialog needs to upset the original input
+    if(event.type == "submit"){
+      form.classList.add('processing');
+      Array.from(form.querySelectorAll('[data-duplicate]')).forEach((element,index) => {
+
+        const id = element.getAttribute('data-duplicate');
+        const input = document.getElementById(id);
+        const card = document.querySelector(`[for="${id}"] iam-card`);
+
+
+        if(input.checked != element.checked){
+            
+          if(card){
+            let clickEvent = new Event('click');
+            card.dispatchEvent(clickEvent);
+          }
+          else {
+            input.checked = element.checked;
+          }
+        }
+      });
+      form.classList.remove('processing');
+    }
 
     if(form.hasAttribute('data-ajax')){
 
@@ -179,7 +207,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')){
 
       timer = setTimeout(function(){
-        formSubmit();
+        formSubmit(event);
       }, 500);
     };
   });
@@ -193,12 +221,12 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
       if(!form.hasAttribute('data-submit'))
         sortTable(table, form, savedTableBody);
 
-      formSubmit();
+      formSubmit(event);
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')){
         
-      formSubmit();
+      formSubmit(event);
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter][data-no-ajax]')){ // Allow for input fields to filter the current results without a new ajax call
@@ -209,21 +237,21 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     }
     else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && event.target.closest('form .dialog__wrapper > dialog')){
       
-      formSubmit();
+      formSubmit(event);
     }
     else if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && !event.target.closest('form dialog')){
       
-      formSubmit();
+      formSubmit(event);
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')){
         
-      formSubmit();
+      formSubmit(event);
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-mimic]')){
         
-      formSubmit();
+      formSubmit(event);
     }
   });
 
@@ -249,12 +277,53 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-clear]')){
       
-      form.reset();
+      form.classList.add('processing');
+      // Make sure any applied filters have been removed
+      Array.from(form.querySelectorAll('.applied-filters')).forEach((filters,index) => {
+        filters.innerHTML = "";
+      });
+
+      // Make sure cards are unlicked
+      let frm_elements = form.elements;
+
+      for (let i = 0; i < frm_elements.length; i++)
+      {
+          let field_type = frm_elements[i].type.toLowerCase() ? frm_elements[i].type.toLowerCase() : "text";
+          switch (field_type)
+          {
+          case "text":
+          case "password":
+          case "textarea":
+              frm_elements[i].value = "";
+              break;
+          case "radio":
+          case "checkbox":
+              if (frm_elements[i].checked)
+              {
+                  frm_elements[i].checked = false;
+              }
+              break;
+          case "select-one":
+          case "select-multi":
+              frm_elements[i].selectedIndex = -1;
+              break;
+          case "hidden":
+          default:
+              break;
+          }
+      }
+
+      Array.from(form.querySelectorAll('label iam-card')).forEach((card,index) => {
+        let clickEvent = new Event('click');
+        card.dispatchEvent(clickEvent);
+      });
+
+      form.classList.remove('processing');
 
       if(!form.hasAttribute('data-submit'))
         sortTable(table, form, savedTableBody);
 
-      formSubmit();
+      formSubmit(event);
     }
   });
 
@@ -265,17 +334,17 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     if(!form.hasAttribute('data-submit'))
       event.preventDefault();
 
-    formSubmit();
+    formSubmit(event);
   });
 
   form.addEventListener('force', (event) => {
 
-    formSubmit();
+    formSubmit(event);
   });
 
   form.addEventListener('paginate', (event) => {
 
-    formSubmit(true);
+    formSubmit(event,true);
   });