@iamproperty/components 3.7.3 → 3.7.5

package/assets/sass/foundations/reboot.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "../_func" as *;
 
 @import "../../bootstrap/scss/_reboot.scss";
@@ -139,10 +140,86 @@ details {
   width: 100%;
 }
 
+
 // #region Undefined web components
-iam-card:not(:defined) {
-  box-shadow: var(--card-border-radius);
+: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);
+  }
+}
+
+:is(iam-notification,iam-card):not(:defined) {
+  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
+
+main {
+  position: relative;
+}
+
+
+.container.notification__holder {
+
+  position: fixed;
+  top: var(--nav-height);
+  left: 50%;
+  transform: translate(-50%,0);
+  
+  bottom: 0;
+  z-index: 999999;
+  pointer-events: none;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  margin: 0;
+  width: 100%;
+  max-width: rem(454);
+  flex-wrap: wrap;
+  align-content: flex-start;
+  flex-direction: column;
+  align-content: flex-end;
+  align-items: flex-end;
+
+  :is(.iam-notification, iam-notification) {
+    pointer-events: all;
+    margin: 0.5rem 0 0.5rem 0;
+  }
+
+  &.bottom {
+    flex-direction: column-reverse;
+  }
+
+  &.left {
+    align-content: flex-start;
+    align-items: flex-start;
+  }
+
+  &.middle {
+    align-content: space-around;
+    align-items: center;
+  }
+}
+// #endregion

package/assets/sass/foundations/root.scss

@@ -35,7 +35,7 @@
   --card-left-padding: 1rem;
   --card-border-radius: #{rem(8)};
   --card-box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
-
+  --nav-height: #{rem(96)};
 }
 
 // Dark mode; functional colours get updated
@@ -63,7 +63,7 @@
   }
 
   // Override the colours when on a dark background, similiar to dark mode but on a module level
-  [class*="bg-"]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-white):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert),
+  [class*="bg-"]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert),
   .invert-colours {
     
     @include invert-colours();
@@ -100,7 +100,7 @@
     color: var(--colour-body);
   }
 
-  [class*="bg-"][class*="gradient-"]:not(.bg-info):not(.bg-success):not(.bg-light):not(.prevent-invert) {
+  [class*="bg-"][class*="gradient-"]:not(.bg-info):not(.bg-success):not(.bg-warning):not(.prevent-invert) {
     
     @include invert-colours();
 

package/assets/ts/bundle.ts

@@ -17,6 +17,7 @@ import iamCard from './components/card/card.component'
 import iamAppliedFilters from './components/applied-filters/applied-filters.component'
 import iamPagination from './components/pagination/pagination.component'
 import iamFilterlist from './components/filterlist/filterlist.component'
+import iamNotification from './components/notification/notification.component'
 
 // Attach classes to dom elements
 document.addEventListener("DOMContentLoaded", function() {
@@ -52,6 +53,9 @@ document.addEventListener("DOMContentLoaded", function() {
   if (!window.customElements.get(`iam-applied-filters`))
     window.customElements.define(`iam-applied-filters`, iamAppliedFilters);
 
+  if (!window.customElements.get(`iam-notification`))
+    window.customElements.define(`iam-notification`, iamNotification);
+
   // ANav
   Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
     nav(arrayElement);

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/notification/README.md

@@ -0,0 +1,32 @@
+```
+<!-- Inline -->
+<iam-notification data-status="danger" data-dismiss="">
+<strong>Just an example</strong><br> Alert message will display here <a href="/" data-dismiss-button="" slot="btns" class="link">Retry</a>
+</iam-notification>
+
+<!-- Alert -->
+<iam-notification data-type="alert" data-status="danger" data-dismiss="">
+<strong>Just an example</strong><br> Alert message will display here <a href="/" data-dismiss-button="" slot="btns" class="link">Retry</a>
+</iam-notification>
+
+<!-- Toast -->
+<iam-notification data-type="toast" data-status="danger" data-dismiss="">
+<strong>Just an example</strong><br> Alert message will display here <a href="/" data-dismiss-button="" slot="btns" class="link">Retry</a>
+</iam-notification>
+
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-status | String | info | Choose from danger,succes and warning. This will change the colour of the notification box and which icon is shown. |
+| data-type | String | inline | Choose from alert and toast. This will change the behavour of the component. |
+| data-dismiss | Boolean | - | Adds a close button which will remove the alert box after clicking it. |
+| data-timeout | Boolean | - | Adds a timer for how long the notification will appear. |
+
+**Slots**
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | This is the content of the notification box |

package/assets/ts/components/notification/notification.component.ts

@@ -0,0 +1,90 @@
+// @ts-nocheck
+import setupNotification, { closeNotification } from "../../modules/notification";
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "Notification"
+});
+
+
+class iamNotification 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/notification.css";`;
+
+    const buttons = this.querySelectorAll('a,button');
+
+    Array.from(buttons).forEach((button, index) => {
+
+      button.setAttribute('slot','btns');
+      button.classList.add('link');
+    });
+
+    if(buttons.length || this.hasAttribute('data-dismiss'))
+      this.classList.add('notification--dismissable');
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}
+    </style>
+
+    <div class="notification">
+      <div class="notification__icon"><slot name="icon"></slot></div>
+      <div class="notification__inner"><div class="notification__text"><slot></slot></div>${ buttons.length ? `<div class="notification__btns"><slot name="btns"></slot></div>` : '' }</div>
+      ${ this.hasAttribute('data-dismiss') ? `<div class="notification__dismiss"><button data-dismiss-button>Dismiss</button></div>` : ''}
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+  }
+
+	connectedCallback() {
+    
+    const dismissBtn = this.shadowRoot.querySelector('[data-dismiss-button]');
+    const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : 'white'
+    
+    if(this.hasAttribute('data-type'))
+      this.classList.add(`bg-${statusBG}`);
+    else {
+      this.classList.add(`colour-${statusBG}`);
+    }
+    
+    const wrapper = this;
+
+    if(!this.querySelector('i')){
+      
+      switch(statusBG) {
+        case 'danger':
+          this.innerHTML += '<i class="fa-solid fa-circle-exclamation" aria-hidden="true" slot="icon"></i>';
+          break;
+        case 'warning':
+          this.innerHTML += '<i class="fa-solid fa-triangle-exclamation" aria-hidden="true" slot="icon"></i>';
+          break;
+        case 'success':
+          this.innerHTML += '<i class="fa-solid fa-check-circle" aria-hidden="true" slot="icon"></i>';
+          break;
+        default:
+          this.innerHTML += '<i class="fa-solid fa-circle-info" aria-hidden="true" slot="icon"></i>';
+      }
+    }
+
+    setupNotification(wrapper);
+
+    if(dismissBtn){
+      dismissBtn.addEventListener('click', function(e){
+        closeNotification(wrapper);
+      }, false);
+    }
+  }
+}
+
+export default iamNotification;

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

@@ -7,16 +7,22 @@ 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>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
 
     // Set default attributes
     const params = new URLSearchParams(window.location.search);
@@ -35,9 +41,7 @@ class iamPagination extends HTMLElement {
 
     this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / this.getAttribute('data-show')));
     createPaginationButttons(this,this.shadowRoot.querySelector('.pagination__wrapper'));
-  }
 
-	connectedCallback() {
     this.shadowRoot.querySelector('.pagination__wrapper').classList.remove('d-none');
   }
 }

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}">
@@ -42,6 +45,10 @@ class iamTable extends HTMLElement {
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
+  }
+
+	connectedCallback() {
+
     const params = new URLSearchParams(window.location.search)
     // Set default attributes
     if(!this.hasAttribute('data-total'))
@@ -57,9 +64,6 @@ class iamTable extends HTMLElement {
       this.setAttribute('data-increment', 15);
 
     this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / this.getAttribute('data-show')));
-  }
-
-	connectedCallback() {
 
     this.table = this.querySelector('table');
     this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);

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;

package/assets/ts/dynamic.ts

@@ -11,6 +11,8 @@ import carousel from '../js/modules/carousel'
 import form from '../js/modules/form'
 import youtubeVideo from '../js/modules/youtubevideo'
 
+import iamNotification from './components/notification/notification.component'
+
 const components = ['accordion','header','tabs', 'table','card','pagination','filterlist', 'applied-filters'];
 const prefix = "iam"
 const options = {
@@ -62,6 +64,10 @@ document.addEventListener("DOMContentLoaded", function() {
   //helpers.checkElements(document.body);
   extendDialogs(document.body);
 
+  
+  if (!window.customElements.get(`iam-notification`))
+    window.customElements.define(`iam-notification`, iamNotification);
+
   // ANav
   Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
     nav(arrayElement);

package/assets/ts/flat-components.ts

@@ -13,6 +13,7 @@ import youtubeVideo from '../js/modules/youtubevideo'
 import tabs from '../js/modules/tabs'
 import filterlist from '../js/modules/filterlist'
 import createPaginationButttons from '../js/modules/pagination'
+import setupNotification from '../js/modules/notification'
 
 // Attach classes to dom elements
 document.addEventListener("DOMContentLoaded", function() {
@@ -77,6 +78,13 @@ document.addEventListener("DOMContentLoaded", function() {
       filterlist(arrayElement.querySelector('ul'),document.querySelector(arrayElement.getAttribute('data-input')));
   });
   
+
+  // notification
+  Array.from(document.querySelectorAll('.iam-notification')).forEach((arrayElement) => {
+    if(arrayElement.hasAttribute('data-type'))
+      setupNotification(arrayElement);
+  });
+  
   Array.from(document.querySelectorAll('.pagination__wrapper')).forEach((arrayElement) => {
 
 

package/assets/ts/modules/dialogs.ts

@@ -100,18 +100,14 @@ const extendDialogs = (body) => {
     // Popover
     if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')){
 
-      // Close existing open popover
-
       let btn = event.target.closest('.dialog__wrapper > button');
       let parent = event.target.closest('.dialog__wrapper > button').parentNode;
       let dataEvent = "openPopover"
       let popover = parent.querySelector(':scope > dialog');
       
-
       if(document.querySelector('dialog[open]') && document.querySelector('dialog[open]') != popover)
         document.querySelector('dialog[open]').close();
 
-
       // Remove active class from exiting active buttons
       Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement,index) => {
         btnElement.classList.remove('active');
@@ -166,6 +162,17 @@ const extendDialogs = (body) => {
         "id": btn.textContent
       });
     };
+
+    // Close popovers when clicked away
+    if (event && event.target instanceof HTMLElement && !event.target.closest('dialog[open]') && !event.target.closest('.dialog__wrapper > button')){
+      
+      if(document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]'))
+        document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]').close();
+
+      Array.from(document.querySelectorAll('.dialog__wrapper:not([data-keep-open]) > button')).forEach((btnElement,index) => {
+        btnElement.classList.remove('active');
+      });
+    }
   });
 
   return null

package/assets/ts/modules/helpers.ts

@@ -17,6 +17,23 @@ export const addBodyClasses = (body) => {
     body.classList.add("ie");
   }
 
+  let nav = document.querySelector('nav');
+  if(nav) {
+    let navHeight = nav.offsetHeight;
+    document.querySelector('body').style.setProperty("--nav-height", `${navHeight}px`);
+
+    function outputsize() {
+
+      navHeight = nav.offsetHeight;
+      document.querySelector('body').style.setProperty("--nav-height", `${navHeight}px`);
+    }
+    
+    new ResizeObserver(outputsize).observe(nav);
+  }
+  else {
+    document.querySelector('body').style.setProperty("--nav-height", `0px`);
+  }
+
   return null
 }