@iamproperty/components 3.4.7 → 3.6.0

package/assets/sass/foundations/root.scss

@@ -1,6 +1,6 @@
 @use "../func" as *;
 
-@import "../../../node_modules/bootstrap/scss/_root.scss";
+@import "../../bootstrap/scss/_root.scss";
 
 :root {
   // Print out the $vars array setup in the variables file so they can be used as CSS vars
@@ -25,109 +25,83 @@
   }
 
   // Extra vars needed
-  --body-bg: white;
-  --colour-underline: var(--colour-primary);
-  --colour-heading: var(--colour-primary);
-  --alpha: var(--bg-opacity,1);
-  --#{$variable-prefix}gradient: #{$gradient};
   --content-max-width: #{$content-max-width};
   --colour-brand: var(--colour-primary);
-
-  /* Button colours */
-  --btn-bg: var(--colour-warning);
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-primary);
-  --btn-tertiary-bg: var(--colour-primary);
-  --btn-tertiary-hover-text: white;
 }
 
 // Dark mode; functional colours get updated
 @media screen and (prefers-color-scheme: dark) {
   :root {
-    --body-bg: var(--colour-primary);
-    --colour-admin: var(--colour-primary);
+    
+    @each $color, $value in $dark-mode-colors {
+      --colour-#{$color}: #{$value};
+    }
     @include invert-colours();
   }
+}
+
+@media screen and (prefers-color-scheme: light) {
 
-  body .text-primary {
-    color: #{$colour-inverted}!important;
+  // 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) {
+
+    @each $color, $value in $theme-colors {
+      --colour-#{$color}: #{$value};
+    }
+    @include reset-colours();
+    --colour-body: var(--colour-primary);
+    color: var(--colour-body);
   }
 
-  body .bg-white {
-    background-color: transparent!important;
+  // Override the colours when on a dark background, similiar to dark mode but on a module level
+  [class*="bg-"]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-white):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert),
+  .invert-colours {
+    
+    @include invert-colours();
+
+    color: #{$colour-inverted};
   }
 }
 
-@media screen {
+@media screen and (prefers-color-scheme: dark) {
 
   // 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-black):not(.invert-colours):not(.bg-white):not(.bg-admin) {
+  [class*="bg-"]:not(.bg-canvas):not(.bg-canvas-2) {
 
     @include reset-colours();
-
-    --colour-body: var(--colour-primary);
-    --colour-heading: var(--colour-primary);
+    --colour-body: #{$primary};
     color: var(--colour-body);
+  }
 
-    --btn-bg: var(--colour-primary);
-    --btn-text: var(--colour-white);
-    --colour-underline: var(--colour-primary);
+  @each $color, $value in $theme-colors {
 
-    .btn-secondary {
+    .bg-#{$color}[class*="gradient-"] {
 
-      --btn-text: var(--colour-primary);
+      background-color: var(--colour-#{$color}-theme) !important;
     }
-    
   }
-
   
+  [class*="bg-"][class*="gradient-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger) {
 
-  // Slight colour adjustments on the light background to match brand guidelines
-  .bg-light[class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.prevent-invert) {
-    --body-bg: var(--colour-light);
-    --colour-heading: var(--colour-dark);
-    color: var(--colour-dark);
-  }
-
-  // Override the colours when on a dark background, similiar to dark mode but on a module level
-  .bg-primary:not(.prevent-invert),
-  .bg-dark:not(.prevent-invert),
-  .bg-danger:not(.prevent-invert),
-  .bg-black:not(.prevent-invert),
-  .invert-colours {
-    
-    @if $compatible != "true" {
-      
-      @include invert-colours();
+    @each $color, $value in $theme-colors {
+      --colour-#{$color}: #{$value};
     }
-    color: #{$colour-inverted};
+    @include reset-colours();
+    --colour-body: var(--colour-primary-theme);
+    color: var(--colour-body);
   }
 
-  // Only update the the colour of the underline on dark backgrounds except the primary as the secondary colour looks good on it
-  .bg-dark:not(.prevent-invert),
-  .bg-danger:not(.prevent-invert),
-  .bg-black:not(.prevent-invert),
-  .invert-colours {
+  [class*="bg-"][class*="gradient-"]:not(.bg-info):not(.bg-success):not(.bg-light):not(.prevent-invert) {
     
-    --colour-underline: #{$colour-inverted};
-  }
-}
-
-
-
-@include media-breakpoint-up(md) {
+    @include invert-colours();
 
-  .invert-colours-md {
-    
-    @if $compatible != "true" {
-      
-      @include invert-colours();
-    }
     color: #{$colour-inverted};
-    --colour-underline: #{$colour-inverted};
   }
+}
 
-  [class*="bg-"].bg-md-transparent {
-    background: transparent!important;
+
+@media (forced-colors: active) {
+  :root {
+    --contrast-outline-width: 1px;
   }
 }

package/assets/sass/foundations/type.scss

@@ -11,7 +11,7 @@ small {
   @include font-size($small-font-size);
 }
 
-@import "../../../node_modules/bootstrap/scss/_type.scss";
+@import "../../bootstrap/scss/_type.scss";
 
 // #region headings
 %heading {
@@ -27,6 +27,10 @@ small {
   clear: both;
   display: block;
   padding-bottom: 2rem;
+    
+  [class*="fa-"] {
+    margin-right: 0.5rem;
+  }
 }
 
 @include is('h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.display-1,.display-2, .display-3, .display-4'){

package/assets/sass/helpers/max-height.scss

@@ -0,0 +1,3 @@
+:is(.mh-sm,.mh-md,.mh-lg){
+  overflow: auto;
+}

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

@@ -8,7 +8,7 @@ class iamCard extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
     const loadCSS = `@import "${assetLocation}/css/components/card.css";`;
 
-    if(this.querySelector('.icon'))
+    if(this.querySelector('.fa'))
       this.classList.add('card--has-icon');
 
     let classList = this.classList.toString();

package/assets/ts/components/filterlist/filterlist.component.ts

@@ -22,14 +22,23 @@ class iamFilterlist extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     
     :host {
-      margin-bottom: 3rem;
+      margin-bottom: 1rem;
       display:block;
     }
+    :host(.mh-sm){
+      max-height: none!important;
+    }
+    :host(.mh-md){
+      max-height: none!important;
+    }
+    :host(.mh-lg){
+      max-height: none!important;
+    }
     </style>
     <div class="form-control__wrapper">
       <label for="search" class="visually-hidden">Search</label>
       <span class="suffix" role="presentation"><slot name="icon"></slot></span>
-      <input name="search" id="search" type="text" class="form-control" autocomplete="off">
+      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" />
     </div>
     <div class="list__wrapper">
       <slot></slot>
@@ -40,15 +49,8 @@ class iamFilterlist extends HTMLElement {
 
 	connectedCallback() {
 
-    const maxHeights = {
-      "small": "12.5rem",
-      "medium": "25rem",
-      "large": "37.5rem"
-    }
-
-    let maxHeightClass = (this.hasAttribute('data-max-height') && maxHeights[this.getAttribute('data-max-height')] ? 'list__wrapper--'+this.getAttribute('data-max-height') : '');
-
-    this.shadowRoot.querySelector('.list__wrapper').classList.add(maxHeightClass);
+    let classList = this.classList.toString();
+    this.shadowRoot.querySelector('.list__wrapper').setAttribute('class',`list__wrapper ${classList}`);
 
     if(!this.querySelector('i.fa-search'))
       this.innerHTML += '<i class="fa fa-light fa-search" aria-hidden="true" slot="icon"></i>';

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

@@ -20,6 +20,16 @@ class iamTable extends HTMLElement {
     template.innerHTML = `
     <style>
     @import "${assetLocation}/css/core.min.css";
+
+    :host(.mh-sm){
+      max-height: none!important;
+    }
+    :host(.mh-md){
+      max-height: none!important;
+    }
+    :host(.mh-lg){
+      max-height: none!important;
+    }
     </style>
     ${isCTA ? '<div class="table--cta">' : ''}
     <div class="table__wrapper ${classList}">
@@ -48,7 +58,7 @@ class iamTable extends HTMLElement {
 	connectedCallback() {
 
     this.table = this.querySelector('table');
-    this.savedTableBody = this.querySelector('tbody').cloneNode(true);
+    this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
     this.pagination = this.shadowRoot.querySelector('.table__pagination');
 
     // Set events on the filter table
@@ -82,8 +92,14 @@ class iamTable extends HTMLElement {
       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();
+    });
   }
 
 

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

@@ -15,12 +15,14 @@ class iamTabs extends HTMLElement {
     this.attachShadow({ mode: 'open'});
 
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
-    const loadCSS = `@import "${assetLocation}/css/components/tabs.css";`;
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
     @import "${assetLocation}/css/core.min.css";
-    ${loadCSS}
+
+    :host(.admin-panel){
+      display: contents!important;
+    }
     
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
@@ -33,6 +35,9 @@ class iamTabs extends HTMLElement {
   }
 
 	connectedCallback() {
+    
+    let classList = this.classList.toString().replace('container','');
+    this.shadowRoot.querySelector('.tabs').setAttribute('class',`tabs ${classList}`);
 
     tabs(this);
   }

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

@@ -103,7 +103,7 @@ function createAppliedFilters(container,filters) {
 
       let input = event.target.closest('input[data-filter-text]');
 
-      addFilterButton (filters, input)
+      addFilterButton (filters, input);
     };
     
   }, false);
@@ -125,13 +125,19 @@ function createAppliedFilters(container,filters) {
         }
 
         let inputs = container.querySelectorAll(selector);
+
         for(var i=0;i<inputs.length;i++){
           let input = inputs[i];
 
+
           if(input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox')
-            inputs[i].value = "";
+            input.value = "";
+          else {
+            input.checked = false;
 
-          inputs[i].checked = false;
+            var event = new Event('force');
+            input.closest('form').dispatchEvent(event);
+          }
         }
       }
 

package/assets/ts/modules/helpers.ts

@@ -69,16 +69,18 @@ export const addGlobalEvents = (body) => {
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')){
 
       const button = event.target.closest('[data-modal]');
-      const modalID = button.getAttribute('data-modal');
+      const modalID = button.hasAttribute('data-modal') ? button.getAttribute('data-modal') : button.getAttribute('data-filter');
       const dialog = document.querySelector(`dialog#${modalID}`);
       
       // Create close button is needed
-      if(dialog.parentNode.closest('form') && !dialog.querySelector(':scope > .dialog__close:first-child'))
-        dialog.innerHTML = `<button class="dialog__close" formmethod="dialog">Close</button>${dialog.innerHTML}`;
-      else if(!dialog.parentNode.closest('form') && !dialog.querySelector(':scope > form:first-child'))
-        dialog.innerHTML = `<form><button class="dialog__close" formmethod="dialog">Close</button></form>${dialog.innerHTML}`;
-
-
+      dialog.innerHTML = `<button class="dialog__close">Close</button>${dialog.innerHTML}`;
+      
+      // remove close button when dialog is closed
+      dialog.addEventListener("close", () => {
+        const closeButton = dialog.querySelector('.dialog__close');
+        dialog.removeChild(closeButton);
+      }, { once: true }); // only adds this once
+      
       let videoButton = dialog.querySelector('.youtube-embed a');
 
       if (videoButton){
@@ -93,11 +95,27 @@ export const addGlobalEvents = (body) => {
         "id": modalID
       });
     };
+
     // Close modal
+    if (event && event.target instanceof HTMLElement && event.target.closest('button.dialog__close')){
+      const dialog = event.target.closest('dialog[open]');
+
+      event.preventDefault();
+      dialog.close()
+        
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        "event": "closeModal",
+        "id": dialog.getAttribute('id')
+      });
+    }
+    
     if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')){
       const dialog = event.target.closest('dialog[open]');
       const dialogDimensions = dialog.getBoundingClientRect()
+
       if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
+
         dialog.close()
         
         window.dataLayer = window.dataLayer || [];
@@ -111,18 +129,49 @@ export const addGlobalEvents = (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();
+
+
       if(popover.hasAttribute('open')){
         
         popover.close();
         dataEvent = "closePopover"
+
+        popover.removeAttribute('style');
+        btn.classList.remove('active');
       }
-      else
+      else {
+        
         popover.show();
+        btn.classList.add('active');
+      
+        var position = btn.getBoundingClientRect();
+        let topOffset = position.top;
+        let leftOffset = position.left;
+
+        if(btn.closest('iam-table')){
+
+          let container = btn.closest('iam-table').parentNode.getBoundingClientRect();
+
+          topOffset -= container.top;
+          leftOffset -= container.left;
+
+        }
+
+        if(popover.classList.contains('dialog--fix')){
+          popover.setAttribute('style',`position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`)
+        }
+      }
+        
 
       window.dataLayer = window.dataLayer || [];
       

package/assets/ts/modules/table.ts

@@ -23,8 +23,8 @@ export const addDataAttributes = (table) => {
         let headingText = tempDiv.textContent || tempDiv.innerText || "";
         cell.setAttribute('data-label',headingText);
 
-        if(heading.hasAttribute('class'))
-          cell.setAttribute('class',heading.getAttribute('class'))
+        if(heading.hasAttribute('data-td-class'))
+          cell.setAttribute('class',heading.getAttribute('data-td-class'))
 
         if(heading.hasAttribute('data-format')){
           cell.setAttribute('data-format',heading.getAttribute('data-format'))
@@ -64,10 +64,21 @@ export const getLargestLastColWidth = (table) => {
 
 export const createMobileButton = (table) => {
 
+  if(table.closest('.table--fullwidth'))
+    return false;
+
   Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
     let firstCol = row.querySelector(':scope > :is(td,th):first-child');
     let colContent = firstCol.textContent;
-    firstCol.innerHTML =`<span class="td__content">${colContent}</span><button type="button" class="d-none">${colContent}</button>`;
+
+    if(colContent != "")
+      firstCol.innerHTML =`<span class="td__content">${colContent}</span><button type="button" class="d-none">${colContent}</button>`;
+    else {
+        
+      let secondCol = row.querySelector(':scope > :is(td,th):nth-child(2)');
+      let secondColContent = secondCol.textContent;
+      secondCol.innerHTML =`<span class="td__content">${secondColContent}</span><button type="button" class="d-none">${secondColContent}</button>`;
+    }
   });
 }
 
@@ -137,6 +148,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     else {
       filterTable(table, form, wrapper);
       createPaginationButttons(wrapper,pagination);
+      populateDataQueries(table,form);
     }
   }
 
@@ -169,6 +181,11 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
       formSubmit();
     }
 
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && event.target.closest('form .dialog__wrapper > dialog')){
+      
+      formSubmit();
+    }
+
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && !event.target.closest('form dialog')){
       
       formSubmit();
@@ -220,6 +237,11 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
 
     formSubmit();
   });
+
+  form.addEventListener('force', (event) => {
+
+    formSubmit();
+  });
 }
 
 export const sortTable = (table, form, savedTableBody) => {
@@ -298,6 +320,15 @@ export const filterTable = (table, form, wrapper) => {
   let page = form.querySelector('[data-pagination]') ? parseInt(form.querySelector('[data-pagination]').value) : 1;
   let showRows = form.querySelector('[data-show]') ? parseInt(form.querySelector('[data-show]').value) : 15;
 
+  // Reset
+  Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
+    row.classList.remove('filtered');
+    row.classList.remove('filtered--matched');
+    row.classList.remove('filtered--show');
+    
+    row.removeAttribute('data-filtered-by');
+  });
+
   // Filter
   let filterInputs = Array.from(form.querySelectorAll('[data-filter]'));
 
@@ -345,6 +376,7 @@ export const filterTable = (table, form, wrapper) => {
   Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
     element.innerHTML = '';
   });
+
   if(filters.length) {
       
     Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
@@ -353,25 +385,16 @@ export const filterTable = (table, form, wrapper) => {
   }
 
   // Stop function if no filters identified
-  if(!searches.length && !filters.length)
+  if(!Object.keys(searches).length && !Object.keys(filters).length)
     return false;
   
   table.classList.add('table--filtered');
 
-  // Reset
-  Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
-    row.classList.remove('filtered');
-    row.classList.remove('filtered--matched');
-    row.classList.remove('filtered--show');
-    
-    row.removeAttribute('data-filtered-by');
-  });
 
   // Filter the table
 
   for (const [key, filterValue] of Object.entries(filters)) {
     
-    console.log(filterValue)
     Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
 
       let isMatched = false;
@@ -493,7 +516,6 @@ export const filterTable = (table, form, wrapper) => {
     wrapper.setAttribute('data-show',showRows);
   }
 
-  populateDataQueries(table,form);
 }
 
 export const populateDataQueries = (table,form) => {
@@ -506,7 +528,7 @@ export const populateDataQueries = (table,form) => {
     let numberOfMatchedRows: 0;
 
     if(query == 'total'){
-      numberOfMatchedRows = table.classList.contains('table--filtered') ? table.querySelectorAll('tbody tr:not(.filtered)').length : table.querySelectorAll('tbody tr').length;
+      numberOfMatchedRows = table.classList.contains('table--filtered') ? table.querySelectorAll('tbody tr').length : table.querySelectorAll('tbody tr').length;
     }
     else if(!query.includes(' == ') && query.includes(' & ')){
 
@@ -516,8 +538,7 @@ export const populateDataQueries = (table,form) => {
       queries.forEach(element => {
         selector += `:not([data-filtered-by="${element}"])`;
       });
-
-      console.log(selector)
+      
       numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr${selector}`)).length;
     }
     else if(!query.includes(' == ')){
@@ -547,7 +568,6 @@ export const populateDataQueries = (table,form) => {
     else {
 
       let queryParts = query.split(' == ');
-      console.log(queryParts[0]);
       numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr.filtered--matched td[data-label="${queryParts[0]}"], tbody tr[data-filtered-by="${queryParts[0]}"] td[data-label="${queryParts[0]}"]`)).filter(function(element){
         return element.textContent === queryParts[1];
       }).length;

package/assets/ts/modules/tabs.ts

@@ -46,15 +46,20 @@ export const setTabsEventHandlers = function(tabsElement: Element){
 
   let details = tabsElement.querySelectorAll(':scope > details');
   let summaries = tabsElement.querySelectorAll(':scope > details > summary');
-  let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
+  let buttons = tabsElement.querySelectorAll(':scope .tabs__links > .link');
 
   if(tabsElement.shadowRoot)
-    buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button, .tabs__links > a');
+    buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > .link');
+
+  console.log(buttons)
 
   // Set the on click for the tab buttons, these will open the details box it matches too
   buttons.forEach((button) => {
 
     button.addEventListener("click", (e) => {
+
+      console.log('hi')
+
       e.preventDefault();
       buttons.forEach((buttonLoopItem) => {
 

package/assets/ts/tests/table.spec.ts

@@ -11,7 +11,7 @@ const basicTable = `<thead>
     <th>Heading 3</th>
   </tr>
 </thead>
-<tbody
+<tbody>
   <tr>
     <td>Cell 1</td>
     <td>Low</td>
@@ -168,14 +168,14 @@ describe('populateDataQueries', () => {
   const table = document.createElement('table');
   table.innerHTML = basicTable;
   const form = document.createElement('form');
-  form.innerHTML += `<div><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
+  form.innerHTML += `<div><input name="heading" value="Low" data-filter="Heading 2" /><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
 
   tableModule.addDataAttributes(table);
+  tableModule.filterTable(table, form, document.createElement('div'));
   tableModule.populateDataQueries(table, form);
 
   test('should populate elements with the data-query attribute with the result of the corresponding query', () => {
 
-
     expect(form.querySelector('[data-query="total"]').textContent).toEqual('4');
     expect(form.querySelector('[data-query="Heading 2 == Low"]').textContent).toEqual('2');
   });