@iamproperty/components 3.6.0 → 3.7.1

package/assets/sass/components/table.scss

@@ -29,6 +29,16 @@ td,th {
   &:first-child {
     padding-left: rem(2);
   }
+
+  p {
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;  
+    overflow: hidden;
+    font-size: inherit;
+    padding: 0;
+    min-width: rem(300);
+  }
 }
 
 th {
@@ -37,7 +47,11 @@ th {
 }
 
 thead {
+  tr {
 
+    border-bottom: var(--border-width) solid currentColor;
+    @include var(border-color,--colour-primary);
+  }
   th {
     font-weight: bold;
     vertical-align: bottom;
@@ -56,6 +70,8 @@ thead {
 
 tbody tr {
 
+  border-bottom: var(--border-width) solid currentColor;
+  @include var(border-color,--colour-border);
 
   &:is(:hover,:focus-within,.hover) {
 
@@ -69,21 +85,24 @@ tbody tr {
     }
   }
 
-  td {
+  /*
+  :is(td, th) {
       
     border-top: var(--border-width) solid currentColor;
     @include var(border-color,--colour-border);
   }
 
-  &:first-child td{
+
+  &:first-child :is(td, th){
     border-top: var(--border-width) solid currentColor;
     @include var(border-color,--colour-primary);
   }
 
-  &:last-child td{
+  &:last-child :is(td, th){
     border-bottom: var(--border-width) solid currentColor;
     @include var(border-color,--colour-border);
   }
+  */
 }
 
 .border-0 > table,
@@ -105,6 +124,10 @@ table.border-0 {
   border-radius: rem(8);
   margin-bottom: rem(32);
 
+  &:before {
+    display: none!important;
+  }
+
   table {
     margin-bottom: 0;
   }
@@ -158,6 +181,7 @@ table.border-0 {
       margin-inline: 1.5rem;
       margin-bottom: 1.5rem;
       width: calc(100% - 3rem);
+      display: block;
 
       thead {
         display: none;
@@ -191,18 +215,6 @@ table.border-0 {
             background: transparent;
           }
         }
-
-        &:last-child td:not(:last-child) {
-          border-bottom:none;
-        }
-
-        &:first-child td:first-child {
-          border-top: none;
-          border-color: var(--colour-border);
-        }
-        &:first-child td {
-          border-color: var(--colour-border);
-        }
       }
 
       td,
@@ -292,8 +304,27 @@ table.border-0 {
     }
   }
 
+  .table--cta {
+    border-bottom: 0;
+
+    &:after {
+      content: none;
+      display: none !important;;
+    }
+  }
   .table--cta:not(.table--fullwidth) tr td:last-child {
     display: block!important;
+    position: static;
+    width: 100%;
+    min-width: 100%;
+    margin-left: 0;
+    padding-left: 0;
+    text-align: left;
+    min-height: 0;
+
+    &:after {
+      display: none;
+    }
   }
 
 }
@@ -312,17 +343,7 @@ table.border-0 {
     position: relative;
     margin-right: calc(var(--cta-width) - 1.5rem);
 
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: calc(100% + calc(var(--cta-width) - 1.5rem));
-      border-bottom: 2px solid currentColor;
-      @include var(border-color,--colour-border);
-      z-index: 99;
-    }
+    
   }
 
   .table--cta .table__wrapper {
@@ -339,32 +360,40 @@ table.border-0 {
       top: auto;
       z-index: 3;
       background: transparent;
-      width: var(--cta-width);
+      width: calc(var(--cta-width) + 1.5rem);
       padding-left: rem(40);
       margin-left: rem(-40);
-      min-width: fit-content;
       min-height: var(--row-height);
       text-align: right;
       background: linear-gradient(90deg, transparent 0%, var(--colour-canvas-2) 1.25rem);
 
+      //border-bottom: var(--border-width) solid var(--colour-border);
+
+      &:after {
+        bottom: 0;
+        left: 0;
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        background-color: var(--colour-border);
+      }
+
       a {
         white-space: nowrap;
       }
     }
 
-    tr:hover > *:last-child {
-
-      background: linear-gradient(90deg, transparent 0%, var(--hover-background) 1.25rem);
+    tr > th:last-child {
+      --colour-border: var(--colour-primary);
     }
 
-    tbody tr > *:last-child {
-      margin-top: -1px;
+    tbody tr:hover > *:last-child {
+      background: linear-gradient(90deg, transparent 0%, var(--hover-background) 1.25rem);
     }
-    tbody tr {
 
-      &:last-child td{
-        border-bottom: none;
-      }
+    thead tr > *:last-child {
+      margin-top: 1px;
     }
   }
 }
@@ -376,17 +405,10 @@ table.border-0 {
   position: relative;
 
   &::before {
-    content: "";
     top: calc(100% - 1.2rem);
     bottom: 2px;
-    left: 0;
-    right: 0;
     height: 1.2rem;
-    position: sticky;
-    display: block;
-    background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
     border-bottom: 2px solid var(--colour-border);
-    z-index: 2;
     margin-bottom: -1.2rem;
   }
 }
@@ -441,23 +463,34 @@ iam-table:is(.mh-sm,.mh-md,.mh-lg):not(.table--cta) {
   display: none!important;
 }
 
-table:not(.table--filtered) tbody tr:nth-child(15) ~ tr {
+table:not(.table--filtered):not(.table--ajax) tbody tr:nth-child(15) ~ tr {
   display: none;
 }
 
-// Statuses 
 
+// Loading via ajax
+.table--loading {
+  opacity: 0.8;
+  pointer-events: none;
+
+  &.table--cta thead th:last-child {
+    opacity: 0;
+  }
+}
+
+// Statuses 
 table {
     
-  :is([data-content="Low"],
-    [data-content="Medium"],
-    [data-content="High"],
-    [data-content="Incomplete"],
-    [data-content="Requires approval"],
-    [data-content="Verified"],
-    [data-content="Not started"],
-    [data-content="Completed"],
-    .alert-status
+  :is([data-content="low"],
+    [data-content="medium"],
+    [data-content="high"],
+    [data-content="unknown"],
+    [data-content="incomplete"],
+    [data-content="requires approval"],
+    [data-content="verified"],
+    [data-content="not started"],
+    [data-content="completed"],
+    .alert-status:not([data-content="0"])
     ) {
     
     position: relative;
@@ -469,70 +502,70 @@ table {
 
     &:after {
 
+      font-family: "Font Awesome 6 Pro";
       position: absolute;
       top: 1rem;
       left: 0;
-
-      content: "";
+      font-size: rem(16);
+      line-height: 1;
       height: rem(16);
       width: rem(16);
       display: inline-block;
-      mask-size: 100%;
-      mask-repeat: no-repeat;
-      mask-position: 50% 50%;
-      -webkit-mask-size: 100%;
-      -webkit-mask-repeat: no-repeat;
-      -webkit-mask-position: 50% 50%;
     }
   }
 
-  [data-content="High"]:after {
-
-    background: var(--colour-danger);
-    mask-image: var(--icon-high);
-    -webkit-mask-image: var(--icon-high);
+  [data-content="high"]:after {
+    content: "\f325";
+    font-weight: normal;
+    color: var(--colour-danger);
   }
 
-  [data-content="Medium"]:after {
+  [data-content="medium"]:after {
 
-    background: var(--colour-warning);
-    mask-image: var(--icon-medium);
-    -webkit-mask-image: var(--icon-medium);
+    content: "\f7a4";
+    font-weight: normal;
+    color: var(--colour-warning);
   }
 
-  [data-content="Low"]:after {
+  [data-content="low"]:after {
 
-    background: var(--colour-success);
-    mask-image: var(--icon-low);
-    -webkit-mask-image: var(--icon-low); 
+    content: "\e404";
+    font-weight: normal;
+    color: var(--colour-complete);
   }
 
-  :is([data-content="Not started"],[data-content="Incomplete"]):after {
+  [data-content="unknown"]:after {
 
-    background: var(--colour-danger);
-    mask-image: var(--icon-flag);
-    -webkit-mask-image: var(--icon-flag); 
+    content: "\e404";
+    font-weight: normal;
+    color: var(--colour-muted);
   }
 
-  [data-content="Requires approval"]:after {
+  :is([data-content="not started"],[data-content="incomplete"]):after {
 
-    background: var(--colour-warning);
-    mask-image: var(--icon-flag);
-    -webkit-mask-image: var(--icon-flag); 
+    content: "\f024";
+    font-weight: light;
+    color: var(--colour-danger);
   }
 
-  :is([data-content="Verified"],[data-content="Completed"]):after {
+  [data-content="requires approval"]:after {
 
-    background: var(--colour-success);
-    mask-image: var(--icon-tick);
-    -webkit-mask-image: var(--icon-tick); 
+    content: "\f024";
+    font-weight: light;
+    color: var(--colour-warning);
   }
 
+  :is([data-content="verified"],[data-content="completed"]):after {
+    
+    content: "\f00c";
+    font-weight: normal;
+    color: var(--colour-complete);
+  }
 
-  .alert-status:not(:empty):after {
+  .alert-status:not([data-content="0"]):not(:empty):after {
 
-    background: var(--colour-danger);
-    mask-image: var(--icon-warning);
-    -webkit-mask-image: var(--icon-warning); 
+    content: "\f06a";
+    font-weight: light;
+    color: var(--colour-danger);
   }
 }

package/assets/sass/foundations/buttons.scss

@@ -37,7 +37,11 @@
   padding: calc(rem(12) - 2px) calc(rem(40) - 2px);
   border-radius: rem(24);
   margin-bottom: var(--btn-margin);
-  margin-right: var(--btn-margin);
+
+  &:not(:last-child){
+
+    margin-right: var(--btn-margin);
+  }
   transition: background .5s, color .5s;
   height: auto;
   max-width: fit-content;
@@ -301,24 +305,16 @@ 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

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,21 +54,25 @@ body {
 }
 
 // #region scrollbars
-div::-webkit-scrollbar {
+:is(div,form,fieldset)::-webkit-scrollbar {
   width: 10px;
-  height: 6px;
+  height: 10px;
 }
  
-div::-webkit-scrollbar-track {
+:is(div,form,fieldset)::-webkit-scrollbar-track {
   background-color: #f1f1f1;
-  border-left: 4px solid var(--bg-colour,var(--colour-canvas));
+  border-top: 4px solid var(--colour-canvas-2);
+  border-left: 4px solid var(--colour-canvas-2);
 }
  
-div::-webkit-scrollbar-thumb {
+:is(div,form,fieldset)::-webkit-scrollbar-thumb {
   background-color: #c1c1c1;
   width: 6px;
-  border-left: 4px solid var(--bg-colour,var(--colour-canvas));
+  border-top: 4px solid var(--colour-canvas-2);
+  border-left: 4px solid var(--colour-canvas-2);
 }
+
+
 //#endregion
 
 body > footer,
@@ -133,4 +137,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

@@ -27,6 +27,15 @@
   // 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

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

@@ -1,3 +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('.fa'))
+    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/table/table.component.ts

@@ -52,6 +52,9 @@ class iamTable extends HTMLElement {
     if(!this.hasAttribute('data-show'))
       this.setAttribute('data-show', 15);
 
+    if(!this.hasAttribute('data-increment'))
+      this.setAttribute('data-increment', 15);
+
     this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / this.getAttribute('data-show')));
   }
 
@@ -66,18 +69,25 @@ 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);
+    // Set ajax class
+    if(this.form.hasAttribute('data-ajax'))
+      this.table.classList.add('table--ajax');
 
-      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" />`
-      }
-    }
+    // 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" />`
+    }
 
     // Event listeners
     tableModule.addTableEventListeners(this.table);
@@ -97,8 +107,12 @@ class iamTable extends HTMLElement {
 
     this.shadowRoot.querySelector('.table__wrapper').addEventListener("scroll", (event) => {
 
-      if(this.table.querySelector('dialog[open]'))
+      if(this.table.querySelector('dialog[open]')){
+        
         this.table.querySelector('dialog[open]').close();
+        this.table.querySelector('.dialog__wrapper > button.active').classList.remove('active');
+      }
+
     });
   }