@iamproperty/components 3.5.0 → 3.7.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,12 @@
   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);
+
+  &:not(:last-child){
+
+    margin-right: var(--btn-margin);
+  }
   transition: background .5s, color .5s;
   height: auto;
   max-width: fit-content;
@@ -146,11 +158,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 +189,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 +203,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 +213,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";
@@ -290,77 +305,73 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 // #region button that opens up a filter dialog
 .btn-filter {
   &:after {
-    content: "";
-  
+    content: "\f1de";
     display: inline-block;
     margin-left: 1em;
     margin-bottom: -0.15em;
     height: 1em;
     width: 1em;
     z-index: var(--index-focus);
-    background: currentColor;
-    mask-image: var(--icon-filter);
-    mask-size: 100%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-    -webkit-mask-image: var(--icon-filter);
-    -webkit-mask-size: 100%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 50% 50%;
-
+    color: currentColor;
+    font-weight: 300;
+    font-family: "Font Awesome 6 Pro";
   }
 }
 // #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/icons.scss

@@ -1,81 +1,26 @@
 @use "../_func" as *;
 
-.icon {
-  fill: currentColor;
-  stroke: currentColor;
-  stroke-width: 0;
-  @include var(color,--colour-primary);
-  width: rem(64);
-  height: rem(64);
-  display: inline-block;
 
-  button > &,
-  a > & {
-    width: 1.5em;
-    height: 1.5em;
-    vertical-align: text-top;
-    margin-top: -0.15em;
-    margin-inline: 0.25em;
-    color: inherit;
-  }
-
-  &[class*="text-"]{
-    fill: currentColor;
-  }
-
-  & + .icon {
-    margin-inline-start: 1rem;
-  }
+.icon--xs {
+  font-size: rem(16);
+}
 
-  &[class*="fs-"] {
-    width: 1.5em;
-    height: 1.5em;
-    vertical-align: text-top;
-    margin-top: -0.15em;
-    margin-inline: 0.25em;
-  }
+.icon--sm {
+  font-size: rem(18);
 }
 
-@include inline-text(){
-  .icon {
-    width: 1em;
-    height: 1em;
-    vertical-align: text-top;
-    margin-top: 0.15em;
-    margin-inline: 0.25em;
-  }
+.icon--compact {
+  font-size: rem(20);
 }
 
-// Font awesome support
-.icon[class*="fa-"]:not(.far) {
-  font-size: rem(64 - 16);
-  height: rem(64);
-  padding: 0.5rem;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  text-rendering: auto;
-  line-height: 1;
-  font-family: "Font Awesome 6 Pro";
-  font-weight: 300;
-  width: auto;
+.icon--md {
+  font-size: rem(28);
+}
 
-  button &,
-  a & {
-    font-size: 1em;
-    height: 1em;
-    padding: 0;
-    vertical-align: text-top;
-    margin-top: 0.15em;
-    margin-inline: 0.25em;
-  }
+.icon--lg {
+  font-size: rem(40);
 }
 
-@include inline-text(){
-  .icon[class*="fa-"] {
-    font-size: 1em;
-    color: inherit;
-  }
+[class*="fa-"]:not(.fa-regular,.fa-light, .fa-solid ) {
+  font-weight: 400;
 }

package/assets/sass/foundations/reboot.scss

@@ -54,19 +54,20 @@ body {
 }
 
 // #region scrollbars
-div::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+:is(div,form,fieldset)::-webkit-scrollbar {
+  width: 10px;
+  height: 6px;
 }
  
-div::-webkit-scrollbar-track {
+:is(div,form,fieldset)::-webkit-scrollbar-track {
   background-color: #f1f1f1;
-  border-radius: 2px;
+  border-left: 4px solid var(--bg-colour,var(--colour-canvas));
 }
  
-div::-webkit-scrollbar-thumb {
+:is(div,form,fieldset)::-webkit-scrollbar-thumb {
   background-color: #c1c1c1;
-  border-radius: 2px;
+  width: 6px;
+  border-left: 4px solid var(--bg-colour,var(--colour-canvas));
 }
 //#endregion
 
@@ -132,4 +133,12 @@ details summary > * {
 
 details {
   width: 100%;
-}
+}
+
+// #region Undefined web components
+iam-card:not(:defined) {
+  box-shadow: var(--card-border-radius);
+  border-radius: var(--card-border-radius);
+  padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
+}
+// #endregion

package/assets/sass/foundations/root.scss

@@ -26,88 +26,91 @@
 
   // Extra vars needed
   --content-max-width: #{$content-max-width};
-  
   --colour-brand: var(--colour-primary);
-  
+
+  // Cards variables
+  --card-top-padding: 2rem;
+  --card-right-padding: #{rem(16+16+24)};
+  --card-bottom-padding: 2rem;
+  --card-left-padding: 1rem;
+  --card-border-radius: #{rem(8)};
+  --card-box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
+
 }
 
 // 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,18 @@
+:is(.mh-sm,.mh-md,.mh-lg){
+  overflow: auto;
+  overscroll-behavior: contain;
+
+  &::before {
+    content: "";
+    top: calc(100% - 1.5rem);
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1.5rem;
+    position: sticky;
+    display: block;
+    background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+    z-index: 2;
+    margin-bottom: -1.5rem;
+  }
+}

package/assets/ts/bundle.ts

@@ -1,6 +1,7 @@
 // @ts-nocheck
 // Modules
 import * as helpers from '../js/modules/helpers'
+import extendDialogs from '../js/modules/dialogs'
 import createDataLayer from '../js/modules/data-layer'
 import nav from '../js/modules/nav'
 //import accordion from './modules/accordion'
@@ -24,6 +25,7 @@ document.addEventListener("DOMContentLoaded", function() {
   // Global stuff
   helpers.addBodyClasses(document.body);
   helpers.addGlobalEvents(document.body);
+  extendDialogs(document.body);
   //helpers.checkElements(document.body);
 
   if (!window.customElements.get(`iam-header`))

package/assets/ts/components/card/README.md

@@ -18,5 +18,6 @@ The card component needs to be wrapped with a link or a button, this is required
 **Class modifiers**
 
 - Adding a class of **.card--filter** will implement the filter card design. 
+- Adding a class of **.colour-danger** will add a left hand border with the danger colour (See status card). This works with all of the theme
 - Adding a class of **.border-o** will remove the box-shadow of the card and make some minor sizing adjustments. 
-- Adding a class like **.colour-warning** will update the colour of the left berder for the filter card. The theme colours will be avialable to use.
+- Adding a class like **.colour-warning** will update the colour of the left berder for the card. The theme colours will be avialable to use.

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('[class*="fa-"]'))
       this.classList.add('card--has-icon');
 
     let classList = this.classList.toString();
@@ -103,7 +103,7 @@ class iamCard extends HTMLElement {
       case "class": {
         let classList = this.classList.toString();
             
-        if(this.querySelector('.icon'))
+        if(this.querySelector('[class*="fa-"]'))
           classList += ' card--has-icon';
 
         this.shadowRoot.querySelector('.card').setAttribute('class',`card ${classList}`);

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
@@ -56,18 +66,21 @@ class iamTable extends HTMLElement {
     if(this.hasAttribute('data-filterby')){
 
       this.form = document.querySelector(`#${this.getAttribute('data-filterby')}`);
+    }
+    else {
+      
+      this.table.parentNode.insertBefore(this.form, this.table.nextSibling);
+    }
 
-      // Create a data list if a search input is present
-      tableModule.createSearchDataList(this.table, this.form);
+    // Create a data list if a search input is present
+    tableModule.createSearchDataList(this.table, this.form);
 
-      if(!this.form.querySelector('[data-page]')){
-        this.form.innerHTML += `<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`
-      }
-      if(!this.form.querySelector('[data-show]')){
-        this.form.innerHTML += `<input name="show" type="hidden" value="${this.getAttribute('data-show')}" data-show="true" />`
-      }
+    if(!this.form.querySelector('[data-page]')){
+      this.form.innerHTML += `<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`
+    }
+    if(!this.form.querySelector('[data-show]')){
+      this.form.innerHTML += `<input name="show" type="hidden" value="${this.getAttribute('data-show')}" data-show="true" />`
     }
-
 
     // Event listeners
     tableModule.addTableEventListeners(this.table);
@@ -82,6 +95,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);
   }