@iamproperty/components 3.6.0 → 3.7.0

package/assets/sass/components/lists.scss

@@ -12,54 +12,37 @@
     position: relative;
     list-style: none;
     padding-bottom: 1rem;
-    padding-left: 2.5rem;
+    padding-left: 2.25rem;
     
     &:before {
       
-      content: "";
+      content: "\f00c";
       position: absolute;
       top: 0;
       left: 0;
-      width: 1.5em;
-      height: 1.5em;
+      width: 1.25em;
+      height: 1.25em;
+      font-size: 1.25em;
+      line-height: 1;
+      
+      color: var(--colour-complete);
+      font-family: "Font Awesome 6 Pro";
+      font-size: 400;
       
-      background: var(--colour-secondary);
-      mask-image: var(--icon-tick);
-      mask-size: 100%;
-      mask-repeat: no-repeat;
-      mask-position: 50% 50%;
-      -webkit-mask-image: var(--icon-tick);
-      -webkit-mask-size: 100%;
-      -webkit-mask-repeat: no-repeat;
-      -webkit-mask-position: 50% 50%;
-      @media (forced-colors: active) {
-        content: "\2713";
-        -webkit-mask-image: none;
-      }
     }
 
     &.tick--warning:before {
 
-      background: var(--colour-warning);
-      mask-image: var(--icon-warning);
-      -webkit-mask-image: var(--icon-warning);
-      @media (forced-colors: active) {
-        content: "!";
-        mask-image: none;
-        -webkit-mask-image: none;
-      }
+      content: "\f071";
+      font-weight: 300;
+      color: var(--colour-warning);
     }
 
     &.tick--danger:before {
 
-      background: var(--colour-danger);
-      mask-image: var(--icon-warning);
-      -webkit-mask-image: var(--icon-warning);
-      @media (forced-colors: active) {
-        content: "!";
-        mask-image: none;
-        -webkit-mask-image: none;
-      }
+      content: "\f06a";
+      font-weight: 300;
+      color: var(--colour-danger);
     }
 
     &.tick--incomplete:before {

package/assets/sass/components/table.scss

@@ -69,18 +69,18 @@ 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);
   }
@@ -105,6 +105,10 @@ table.border-0 {
   border-radius: rem(8);
   margin-bottom: rem(32);
 
+  &:before {
+    display: none!important;
+  }
+
   table {
     margin-bottom: 0;
   }
@@ -292,8 +296,23 @@ 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;
   }
 
 }
@@ -376,17 +395,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;
   }
 }
@@ -469,70 +481,64 @@ 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);
+    content: "\f325";
+    font-weight: normal;
+    color: var(--colour-danger);
   }
 
   [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 {
 
-    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 {
 
-    background: var(--colour-danger);
-    mask-image: var(--icon-flag);
-    -webkit-mask-image: var(--icon-flag); 
+    content: "\f024";
+    font-weight: light;
+    color: var(--colour-danger);
   }
 
   [data-content="Requires approval"]:after {
 
-    background: var(--colour-warning);
-    mask-image: var(--icon-flag);
-    -webkit-mask-image: var(--icon-flag); 
+    content: "\f024";
+    font-weight: light;
+    color: var(--colour-warning);
   }
 
   :is([data-content="Verified"],[data-content="Completed"]):after {
-
-    background: var(--colour-success);
-    mask-image: var(--icon-tick);
-    -webkit-mask-image: var(--icon-tick); 
+    
+    content: "\f00c";
+    font-weight: normal;
+    color: var(--colour-complete);
   }
 
-
   .alert-status: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,17 +54,17 @@ body {
 }
 
 // #region scrollbars
-div::-webkit-scrollbar {
+: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-left: 4px solid var(--bg-colour,var(--colour-canvas));
 }
  
-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));
@@ -133,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

@@ -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

@@ -66,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);

package/assets/ts/dynamic.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 table from '../js/modules/table'
@@ -16,7 +17,7 @@ const options = {
   rootMargin: '50px',
   threshold: 0.1
 }
-const componentExt = ".component.js";
+const componentExt = ".component.min.js";
 
 // Load components - Each component will load once the first of its type has been loaded
 components.forEach((component) => {
@@ -59,6 +60,7 @@ document.addEventListener("DOMContentLoaded", function() {
   helpers.addBodyClasses(document.body);
   helpers.addGlobalEvents(document.body);
   //helpers.checkElements(document.body);
+  extendDialogs(document.body);
 
   // ANav
   Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {

package/assets/ts/flat-components.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 * as tableModule from './modules/table'
@@ -22,6 +23,7 @@ document.addEventListener("DOMContentLoaded", function() {
   helpers.addBodyClasses(document.body);
   helpers.addGlobalEvents(document.body);
   //helpers.checkElements(document.body);
+  extendDialogs(document.body);
 
   // ANav
   Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {

package/assets/ts/html.d.ts

@@ -1,4 +1,10 @@
 declare module '*.html' {
   const value: string;
   export default value
-}
+}
+
+type WindowWithDataLayer = Window & {
+  dataLayer: Record<string, any>[];
+};
+
+declare const window: WindowWithDataLayer;