@iamproperty/components 3.5.0 → 3.6.0

package/assets/sass/foundations/buttons.scss

@@ -3,6 +3,14 @@
 // #region button primary
 .btn {
 
+  --btn-margin: #{rem(16)};
+
+  @include media-breakpoint-up(sm) { 
+
+    --btn-margin: #{rem(24)};
+  }
+
+
   &:not(.btn-secondary)[class*="colour-"]{
     --colour-btn-bg: var(--colour);
     --colour-btn-border: var(--colour);
@@ -28,8 +36,8 @@
   line-height: rem(24);
   padding: calc(rem(12) - 2px) calc(rem(40) - 2px);
   border-radius: rem(24);
-  margin-bottom: rem(24);
-  margin-right: rem(24);
+  margin-bottom: var(--btn-margin);
+  margin-right: var(--btn-margin);
   transition: background .5s, color .5s;
   height: auto;
   max-width: fit-content;
@@ -146,11 +154,13 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 
   text-align: center;
   width: calc(rem(48) - 4px);
+  min-width: calc(rem(48) - 4px);
+  max-width: calc(rem(48) - 4px);
   height: calc(rem(48) - 4px)!important;
   text-indent: -300px;
   overflow: hidden;
-
   position: relative;
+  font-size: rem(20);
 
   &:before {
     position: absolute;
@@ -175,7 +185,7 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 
   &.btn-secondary:is(:hover, :focus, .hover, :active, .active, :focus-within):not([disabled]) {
     background-color: var(--colour);
-    color: var(--colour-primary);
+    color: var(--colour-primary-theme);
 
     &:is(.colour-primary,.colour-dark,.colour-danger,.colour-black) {
       color: var(--colour-inverted);
@@ -189,6 +199,7 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 
   --colour-btn-bg-hover: var(--colour);
   --colour-btn-border-hover: var(--colour);
+  --colour-btn-hover: var(--colour-primary-theme);
   position: relative;
   padding-left: rem(56);
   padding-right: rem(56);
@@ -198,7 +209,7 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 
     padding-left: rem(40);
     padding-right: rem(40);
-
+    
     &:before {
       content: "\f00c";
       font-family: "Font Awesome 6 Pro";
@@ -313,54 +324,58 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 // #endregion
 
 
-// #region Rertiary Button
+// #region Tertiary Button
 
-.btn {
+.btn.btn-tertiary {
 
-  &.btn-tertiary {
-
-    background-color: transparent;
-    border: none;
-    color: var(--colour-link);
-    margin: 0 rem(24) rem(24) 0;
-    padding: 0;
-    font-size: rem(18);
-    line-height: rem(24);
-    min-height: rem(24);
-    position: relative;
-
-    &:not(.text-decoration-none):after {
-      position: absolute;
-      content: "";
-      top: 100%;
-      left: 50%;
-      height: 2px;
-      width: 100%;
-      transform: translate(-50%,0);
-      background: var(--colour-underline);
-      transition: width 0.5s;
-    }
+  background-color: transparent;
+  border: none;
+  color: var(--colour-link);
+  margin: 0 var(--btn-margin) var(--btn-margin) 0;
+  padding: 0;
+  font-size: rem(18);
+  font-weight: normal;
+  line-height: rem(24);
+  min-height: rem(24);
+  position: relative;
 
-    [class*=fa-] {
-      margin-left: 0;
-      margin-right: 0.5rem;
-    }
-    [class*=fa-]:not(:first-child) {
-      margin-left: 0.5rem;
-      margin-right: 0;
-    }
+  &:after {
+    position: absolute;
+    content: "";
+    top: 100%;
+    left: 50%;
+    height: 2px;
+    width: 100%;
+    transform: translate(-50%,0);
+    background: var(--colour-underline);
+    transition: width 0.5s;
+  }
 
-    &:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
 
-      &:after {
-        width: 60%;
-      }
-    }
-    &:is(:active, .active):not([disabled]) {
+  &.text-decoration-none:after {
 
-      color: var(--colour-active);
+    width: 0%;
+  }
+
+  [class*=fa-] {
+    margin-left: 0;
+    margin-right: 0.5rem;
+  }
+  [class*=fa-]:not(:first-child) {
+    margin-left: 0.5rem;
+    margin-right: 0;
+  }
+
+  &:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
+
+    &:after {
+      width: 60%!important;
     }
   }
+  &:is(:active, .active):not([disabled]) {
+
+    color: var(--colour-active);
+  }
 
 }
-
+// #endregion

package/assets/sass/foundations/reboot.scss

@@ -55,18 +55,19 @@ body {
 
 // #region scrollbars
 div::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 6px;
 }
  
 div::-webkit-scrollbar-track {
   background-color: #f1f1f1;
-  border-radius: 2px;
+  border-left: 4px solid var(--bg-colour,var(--colour-canvas));
 }
  
 div::-webkit-scrollbar-thumb {
   background-color: #c1c1c1;
-  border-radius: 2px;
+  width: 6px;
+  border-left: 4px solid var(--bg-colour,var(--colour-canvas));
 }
 //#endregion
 

package/assets/sass/foundations/root.scss

@@ -26,88 +26,82 @@
 
   // Extra vars needed
   --content-max-width: #{$content-max-width};
-  
   --colour-brand: var(--colour-primary);
-  
 }
 
 // Dark mode; functional colours get updated
 @media screen and (prefers-color-scheme: dark) {
   :root {
+    
+    @each $color, $value in $dark-mode-colors {
+      --colour-#{$color}: #{$value};
+    }
     @include invert-colours();
   }
-
-  body .text-primary {
-    color: #{$colour-inverted}!important;
-  }
-
-  
 }
 
-@media screen {
+@media screen and (prefers-color-scheme: light) {
 
   // 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-canvas):not(.invert-colours) {
+  [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);
-    --colour-heading: var(--colour-primary);
     color: var(--colour-body);
-    --colour-underline: var(--colour-primary);
-  }
-
-  
-
-  // 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) {
-    --colour-canvas: 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),
+  [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 {
     
-    --btn-bg: #{$colour-inverted};
+    @include invert-colours();
 
-    @if $compatible != "true" {
-      
-      @include invert-colours();
-    }
     color: #{$colour-inverted};
   }
+}
 
+@media screen and (prefers-color-scheme: dark) {
 
-  // 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 {
-    
-    --colour-underline: #{$colour-inverted};
+  // 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) {
+
+    @include reset-colours();
+    --colour-body: #{$primary};
+    color: var(--colour-body);
   }
-}
 
+  @each $color, $value in $theme-colors {
 
+    .bg-#{$color}[class*="gradient-"] {
 
-@include media-breakpoint-up(md) {
+      background-color: var(--colour-#{$color}-theme) !important;
+    }
+  }
+  
+  [class*="bg-"][class*="gradient-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger) {
 
-  .invert-colours-md {
-    
-    @if $compatible != "true" {
-      
-      @include invert-colours();
+    @each $color, $value in $theme-colors {
+      --colour-#{$color}: #{$value};
     }
+    @include reset-colours();
+    --colour-body: var(--colour-primary-theme);
+    color: var(--colour-body);
+  }
+
+  [class*="bg-"][class*="gradient-"]:not(.bg-info):not(.bg-success):not(.bg-light):not(.prevent-invert) {
+    
+    @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

@@ -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,6 +92,7 @@ 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) => {

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

@@ -75,6 +75,12 @@ export const addGlobalEvents = (body) => {
       // Create close button is needed
       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){
@@ -89,8 +95,8 @@ export const addGlobalEvents = (body) => {
         "id": modalID
       });
     };
-    // Close modal
 
+    // Close modal
     if (event && event.target instanceof HTMLElement && event.target.closest('button.dialog__close')){
       const dialog = event.target.closest('dialog[open]');
 
@@ -107,7 +113,9 @@ export const addGlobalEvents = (body) => {
     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 || [];

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'))
@@ -70,7 +70,15 @@ export const createMobileButton = (table) => {
   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>`;
+    }
   });
 }
 
@@ -140,6 +148,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     else {
       filterTable(table, form, wrapper);
       createPaginationButttons(wrapper,pagination);
+      populateDataQueries(table,form);
     }
   }
 
@@ -172,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();
@@ -223,6 +237,11 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
 
     formSubmit();
   });
+
+  form.addEventListener('force', (event) => {
+
+    formSubmit();
+  });
 }
 
 export const sortTable = (table, form, savedTableBody) => {
@@ -301,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]'));
 
@@ -348,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) => {
@@ -361,14 +390,6 @@ export const filterTable = (table, form, wrapper) => {
   
   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
 
@@ -495,7 +516,6 @@ export const filterTable = (table, form, wrapper) => {
     wrapper.setAttribute('data-show',showRows);
   }
 
-  populateDataQueries(table,form);
 }
 
 export const populateDataQueries = (table,form) => {
@@ -508,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(' & ')){
 
@@ -548,7 +568,7 @@ export const populateDataQueries = (table,form) => {
     else {
 
       let queryParts = query.split(' == ');
-      numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr:not([class*="filtered"]) td[data-label="${queryParts[0]}"], tbody tr[data-filtered-by="${queryParts[0]}"] td[data-label="${queryParts[0]}"]`)).filter(function(element){
+      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) => {