@iamproperty/components 3.7.3 → 3.7.4

package/assets/sass/_corefiles.scss

@@ -21,6 +21,7 @@
 @use "components/dialog.scss";
 
 @use "components/pagination.scss";
+@use "components/accordion.scss";
 
 // Bootstrap elements
 @import "../bootstrap/scss/_transitions.scss";

package/assets/sass/components/card.scss

@@ -58,10 +58,9 @@
   }
 
   &:is(:hover,:focus,.hover) {
-    --icon-right: 0.5rem;
+    --card-icon-right: 0.5rem;
     outline: 2px solid var(--colour, var(--colour-primary));
     outline-offset: -2px;
-
   }
   
   // Update arrow cololur
@@ -76,7 +75,7 @@
   }
 
   &:is(:active, .active){
-    --icon-right: 0.5rem;
+    --card-icon-right: 0.5rem;
     outline: none;
     
     &:before {

package/assets/sass/components/dialog.scss

@@ -428,9 +428,13 @@ dialog::backdrop {
 
   position: relative;
   display: inline-block;
+  margin-bottom: calc(var(--btn-margin) - 0.25rem);
 
 
   > .btn:first-child {
+
+    margin-bottom: 0.25rem;
+
     &:after {
       content: "";
     
@@ -471,14 +475,32 @@ dialog::backdrop {
     z-index: var(--index-floating);
     min-width: rem(320);
     border-radius: rem(16);
-    max-width: rem(600);
+    width: rem(319);
+    padding: rem(24);
+
+    @include media-breakpoint-up(sm) {
+      width: rem(335);
+    }
+    @include media-breakpoint-up(md) {
+      width: rem(360);
+    }
   }
 
   &.dialog__wrapper--right > dialog[open]{
 
     right: 0;
     left: auto;
-  }  
+  } 
+
+  &.dialog__wrapper--sm > dialog[open] {
+    
+    width: rem(239);
+  }
+
+  &.dialog__wrapper--lg > dialog[open] {
+    
+    width: rem(319);
+  }
 
   @include media-breakpoint-up(sm) {
     
@@ -491,7 +513,13 @@ dialog::backdrop {
 
       right: 0;
       left: auto;
-    }  
+    }
+    &.dialog__wrapper--sm > dialog[open] {
+      width: rem(265);
+    }
+    &.dialog__wrapper--lg > dialog[open] {
+      width: rem(452);
+    }
   }
 
   @include media-breakpoint-up(md) {
@@ -505,7 +533,13 @@ dialog::backdrop {
 
       right: 0;
       left: auto;
-    }  
+    }
+    &.dialog__wrapper--sm > dialog[open] {
+      width: rem(266);
+    }
+    &.dialog__wrapper--lg > dialog[open] {
+      width: rem(454);
+    }
   }
 }
 

package/assets/sass/components/table.scss

@@ -510,12 +510,17 @@ table {
     [data-content="medium"],
     [data-content="high"],
     [data-content="unknown"],
+    [data-content="overdue"],
     [data-content="incomplete"],
     [data-content="requires approval"],
+    [data-content="approval required"],
+    [data-content="warning"],
     [data-content="verified"],
     [data-content="not started"],
+    [data-content="to do"],
     [data-content="completed"],
-    .alert-status:not([data-content="0"])
+    [data-content="complete"],
+    .alert-status:not([data-content="0"]):not([data-content=""]):not(:empty)
     ) {
     
     position: relative;
@@ -566,31 +571,38 @@ table {
     color: var(--colour-muted);
   }
 
-  :is([data-content="not started"],[data-content="incomplete"]):after {
+  :is([data-content="overdue"],[data-content="incomplete"]):after {
 
     content: "\f024";
     font-weight: light;
     color: var(--colour-danger);
   }
 
-  [data-content="requires approval"]:after {
+  :is([data-content="not started"],[data-content="to do"]):after {
+
+    content: "\f024";
+    font-weight: light;
+    color: var(--colour-muted);
+  }
+
+  :is([data-content="requires approval"],[data-content="approval required"],[data-content="warning"]):after {
 
     content: "\f024";
     font-weight: light;
     color: var(--colour-warning);
   }
 
-  :is([data-content="verified"],[data-content="completed"]):after {
+  :is([data-content="verified"],[data-content="completed"],[data-content="complete"]):after {
     
     content: "\f00c";
     font-weight: normal;
     color: var(--colour-complete);
   }
 
-  .alert-status:not([data-content="0"]):not(:empty):after {
+  .alert-status:not([data-content="0"]):not([data-content=""]):not(:empty):after {
 
-    content: "\f06a";
+    content: "\f0f3";
     font-weight: light;
-    color: var(--colour-danger);
+    color: var(--colour-primary);
   }
-}
+}

package/assets/sass/components/tooltips.scss

@@ -1,85 +1,173 @@
 @use "../_func.scss" as *;
 
-:is(abbr[title], .tooltip) {
 
-  text-decoration: underline;
-  text-underline-offset: 0.2em;
-  text-decoration-thickness: 2px;
-  text-decoration-style: dashed;
-  text-decoration-color: var(--colour-underline);
-  position: relative;
-  cursor: help;
+@mixin tooltip(){
 
-  &:is(:hover, :focus, :active){
+  display: block;
+  z-index: var(--index-floating);
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: auto;
+  right: 0.85em;
+  width: #{rem(270)};
+  transform: translate(50%,0);
+  background: var(--colour-primary);
+  color: var(--colour-white);
+  padding: rem(24);
+  border-radius: 0.5rem;
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11); 
+
+  > strong:first-child {
+    display: block;
+    padding-bottom: 1rem;
+  }
 
-    text-decoration: none;
+  @include media-breakpoint-up(sm) {
+
+    width: #{rem(335)}; 
   }
-}
+  
+  @include media-breakpoint-up(md) {
 
-@mixin tooltip(){
+    width: #{rem(360)}; 
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -0.25rem;
+    border-width: 0.5rem;
+    border-style: solid;
+    border-color: transparent transparent var(--colour-primary) transparent;
+    margin-bottom: -1px;
+  }
 
-  display: block;
-  z-index: var(--index-above);
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 50%;
-  min-width: max(120%, #{rem(100)});
-  transform: translate(-50%,0);
-  background: var(--colour-canvas-2);
-  color: inherit;
-  padding: 0.5em;
-  border-radius: 3px;
-  box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.3);
 }
 
-.tooltip {
 
 
+:is(abbr[title], .tooltip) {
+
+  text-decoration: none;
+  position: relative;
+
+  &:is(:hover, :focus, :active){
+
+    text-decoration: none;
+  }
+
   &:after{
 
-    content: "";
+    font-family: "Font Awesome 6 Pro";
+    font-weight: 900;
+    content: "\f059";
     display: inline-block;
-    margin-left: 0.1em;
+    margin-left: 0.2em;
+    margin-right: 0.1em;
     margin-bottom: 0.1em;
-    width: 0.8em;
-    height: 0.9em;
-    vertical-align: text-bottom;
-    background: currentColor;
-    mask-image: var(--icon-question);
-    mask-size: 100%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-    -webkit-mask-image: var(--icon-question);
-    -webkit-mask-size: 100%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 50% 50%;
+    color: var(--colour-primary);
+
   }
 
-  .tooltip__content {
+  > span {
 
     opacity: 0;
     position: absolute;
     
   }
 
-  &:is(:hover, :focus, :active){
+  &:is(:hover, .hover, :focus, :active){
 
-    .tooltip__content {
+    > span {
 
       opacity: 1;
       @include tooltip();
     }
   }
-}
 
-@media (hover: none) {
+  &.tooltip--top span{
+      
+    top: auto;
+    bottom: calc(100% + 0.5rem);
+    left: auto;
+    right: 0.85em;
+
+    &:after {
+        
+      top: 100%;
+      bottom: auto;
+      left: 50%;
+      border-color: var(--colour-primary) transparent transparent transparent;
+      margin-top: -1px;
+    }
+  }
+
+
+  &.shift--left span{
+    transform: translate(calc(0% + 1.5rem), 0);
+
+    &:after {
+      left: calc(100% - 1.5rem);
+    }
+  }
+  &.shift--right span{
+    transform: translate(calc(100% - 1rem), 0);
+
+    &:after {
+      left: 1rem;
+    }
+  }
+
   
-  :is(abbr[title], .tooltip[title]) {
+  @include media-breakpoint-up(sm) {
 
-    &:is(:hover, :focus, :active):before{
+    &:is(.shift--left,.shift--right) span{
+      transform: translate(50%, 0);
+  
+      &:after {
+        left: 50%
+      }
+    }
+
+    &.tooltip--left span{
       
-      content: attr(title);
-      @include tooltip();
+      top: 50%;
+      bottom: auto;
+      left: auto;
+      right: 1.6em;
+  
+      transform: translate(0,-50%);
+  
+      &:after {
+          
+        top: calc(50% - 0.5em);
+        bottom: auto;
+        left: calc(100% + 0.25em - 1px);
+        border-color: transparent transparent transparent var(--colour-primary);
+        margin-bottom: 0;
+      }
+    }
+    &.tooltip--right span{
+        
+      top: 50%;
+      bottom: auto;
+      left: calc(100% + 0.5rem);
+      right: auto;
+  
+      transform: translate(0,-50%);
+  
+      &:after {
+          
+        top: calc(50% - 0.5em);
+        bottom: auto;
+        left: auto;
+        right: calc(100% - 1px);
+        border-color: transparent var(--colour-primary) transparent transparent;
+        margin-bottom: 0;
+      }
     }
+
   }
-}
+}

package/assets/sass/foundations/buttons.scss

@@ -21,7 +21,7 @@
   }
 
   display: inline-block;
-  font-weight: bold;
+  font-weight: bold!important;
   text-align: left;
   text-decoration: none;
   vertical-align: middle;

package/assets/sass/foundations/reboot.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "../_func" as *;
 
 @import "../../bootstrap/scss/_reboot.scss";
@@ -139,10 +140,39 @@ details {
   width: 100%;
 }
 
+
 // #region Undefined web components
+:is(*):not(:defined) {
+  display: block;
+  padding: rem(24);
+  margin-bottom: rem(24);
+  border-radius: rem(8);
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 80rem;
+}
+
+main > :is(*):not(:defined) {
+
+  padding: var(--container-padding);
+  padding-top: 1rem;
+}
+
+@include media-breakpoint-up(md) {
+    
+  main > :is(*):not(:defined) {
+    max-width: 100%!important;
+    padding-inline: calc(50% - #{rem(math.div(1112,2))});
+  }
+
+  iam-header:not(:defined) {
+    min-height: rem(470);
+  }
+}
+
 iam-card:not(:defined) {
-  box-shadow: var(--card-border-radius);
+  box-shadow: var(--card-box-shadow);
   border-radius: var(--card-border-radius);
   padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
 }
-// #endregion
+// #endregion

package/assets/ts/components/accordion/accordion.component.ts

@@ -8,20 +8,21 @@ window.dataLayer.push({
   "element": "accordion"
 });
 
-const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
-
 class iamAccordion extends HTMLElement {
 
   constructor(){
     super();
     this.attachShadow({ mode: 'open'});
-
+    
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    const loadCSS = `@import "${assetLocation}/css/components/accordion.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${assetLocation}/css/core.min.css";
-    @import "${assetLocation}/css/components/accordion.css";
+    @import "${coreCSS}";
+    ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="accordion">
@@ -34,9 +35,6 @@ class iamAccordion extends HTMLElement {
 	connectedCallback() {
 
     accordion(this);
-
-    // Load in the component CSS into the root so we can style the content of the component
-    this.insertAdjacentHTML("beforebegin", `<link rel="stylesheet" href="${assetLocation}/css/components/accordion.css">`)
   }
 }
 

package/assets/ts/components/applied-filters/applied-filters.component.ts

@@ -1,20 +1,29 @@
 // @ts-nocheck
 import createAppliedFilters from "../../modules/applied-filters";
 
-const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
-const loadCSS = `@import "${assetLocation}/css/components/applied-filters.css";`;
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "Applied Filters"
+});
+
 
 class iamAppliedFilters extends HTMLElement {
 
   constructor(){
     super();
     this.attachShadow({ mode: 'open'});
+    
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    const loadCSS = `@import "${assetLocation}/css/components/applied-filters.css";`;
 
     let classList = this.classList.toString();
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${assetLocation}/css/core.min.css";
+    @import "${coreCSS}";
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>

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

@@ -1,22 +1,32 @@
 // @ts-nocheck
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "Card"
+});
+
+
 class iamCard extends HTMLElement {
 
   constructor(){
     super();
     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/card.css";`;
-
     if(this.querySelector('[class*="fa-"]'))
       this.classList.add('card--has-icon');
 
     let classList = this.classList.toString();
+    
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    const loadCSS = `@import "${assetLocation}/css/components/card.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${assetLocation}/css/core.min.css";
+    @import "${coreCSS}";
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
@@ -35,6 +45,8 @@ class iamCard extends HTMLElement {
 
 	connectedCallback() {
     
+    this.classList.add('loaded');
+    
     // Mimic clicking the parent node so the focus and target events can be on the card
     const parentNode = this.parentNode.closest('a, button, label')
     const card = this.shadowRoot.querySelector('.card')

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

@@ -14,11 +14,13 @@ class iamFilterlist extends HTMLElement {
     super();
     this.attachShadow({ mode: 'open'});
 
-    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${assetLocation}/css/core.min.css";
+    @import "${coreCSS}";
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     
     :host {

package/assets/ts/components/header/header.component.ts

@@ -14,18 +14,15 @@ class iamHeader extends HTMLElement {
     this.attachShadow({ mode: 'open'});
 
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
     const loadCSS = `@import "${assetLocation}/css/components/header.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${assetLocation}/css/core.min.css";
+    @import "${coreCSS}";
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    :host {
-      max-width:100%!important;
-      padding:0!important;
-    }
     </style>
     <div class="header-banner">
       <div class="container" part="container">
@@ -47,6 +44,8 @@ class iamHeader extends HTMLElement {
 
 	connectedCallback() {
     
+    this.classList.add('loaded');
+
     const picture = this.shadowRoot.querySelector('picture');
     const source = this.shadowRoot.querySelector('picture source');
 

package/assets/ts/components/pagination/pagination.component.ts

@@ -7,11 +7,14 @@ class iamPagination extends HTMLElement {
     super();
     this.attachShadow({ mode: 'open'});
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${assetLocation}/css/core.min.css";
+    @import "${coreCSS}";
+    
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="pagination__wrapper d-none">
     </div>

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

@@ -8,6 +8,7 @@ class iamTable extends HTMLElement {
     super();
     this.attachShadow({ mode: 'open'});
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
 
     const isCTA = this.classList.contains('table--cta');
     const isExportable = this.classList.contains('table--export');
@@ -20,7 +21,7 @@ class iamTable extends HTMLElement {
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${assetLocation}/css/core.min.css";
+    @import "${coreCSS}";
 
     :host(.mh-sm){
       max-height: none!important;
@@ -31,6 +32,8 @@ class iamTable extends HTMLElement {
     :host(.mh-lg){
       max-height: none!important;
     }
+    
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     ${isCTA ? '<div class="table--cta">' : ''}
     <div class="table__wrapper ${classList}">

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

@@ -15,10 +15,12 @@ class iamTabs extends HTMLElement {
     this.attachShadow({ mode: 'open'});
 
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${assetLocation}/css/core.min.css";
+    @import "${coreCSS}";
 
     :host(.admin-panel){
       display: contents!important;