@iamproperty/components 3.7.4 → 3.7.6

package/assets/sass/_components.scss

@@ -3,7 +3,7 @@
 @use "components/header.scss";
 @use "components/testimonial.scss";
 @use "components/accordion.scss";
-@use "components/alert";
+@use "components/notification";
 @use "components/carousel.scss";
 @use "components/property-searchbar.scss";
 @use "components/tabs.scss";

package/assets/sass/components/card.scss

@@ -224,12 +224,17 @@
       position: absolute;
       top: 0;
       left: 0;
-      width: 101%;
-      height: 101%;
+      width: 102%;
+      height: 102%;
       object-fit: cover;
     }
   }
 }
+
+.card.card--lg-image:has(.card__head) .card__head{
+  
+  padding-top: 55%;
+}
 // #endregion
 
 //#region card with a footer

package/assets/sass/components/dialog.scss

@@ -37,6 +37,11 @@ dialog[open] {
 // #endregion
 
 // #region modal styling
+
+*:not(.dialog__wrapper) > dialog[open] {
+
+}
+
 *:not(.dialog__wrapper) > dialog[open] {
   overflow-y: hidden;
   width: 90vw;
@@ -135,16 +140,9 @@ dialog[open] {
     max-width: rem(1112);
   }
 
-  container-type: inline-size;
-    
-  @container (width < 23.4375em) {
-
-    > .btn:not(.dialog__close),
-    > form > .btn:not(.dialog__close),
-    > .mh-lg > :is(form,div) > .btn:not(.dialog__close),
-    > .mh-lg > .btn:not(.dialog__close),
-    > form > fieldset > .btn:not(.dialog__close),
-    .btn--wrapper > .btn:not(.dialog__close) {
+  @media screen and (max-width: 36em) {
+
+    :is(form, fieldset, .btn--wrapper):has(> .btn:first-child, > .btn:last-child) .btn:not(.dialog__close) {
       width: 100%;
       max-width: 100%;
       margin: 0;
@@ -242,6 +240,7 @@ dialog::backdrop {
 
   &:not(:has(fieldset.active)) fieldset:first-of-type{
     display: flex;
+    flex-direction: column;
   }
 
   form > *:not(fieldset) {
@@ -319,6 +318,11 @@ dialog::backdrop {
     }
   }
 
+  @include media-breakpoint-up(sm) {
+    min-width: rem(452);
+    width: rem(452);
+    max-width: rem(452);
+  }
   @include media-breakpoint-up(md) {
     min-width: rem(924);
     width: rem(924);

package/assets/sass/components/notification.scss

@@ -0,0 +1,195 @@
+@use "../_func" as *;
+
+:host,
+.iam-notification {
+  display: block;
+  padding: rem(22) rem(24) rem(22) rem(24 - 8)!important;
+  border-radius: rem(8);
+  box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
+  margin-bottom: 1rem;
+  font-size: rem(15);
+  border: rem(2) solid var(--colour,var(--colour-info));
+  background: #e9f9fd;
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+
+  ::slotted(i),
+  i {
+    color: var(--colour,currentColor);
+  }
+}
+
+:host([data-type]),
+.iam-notification[data-type] {
+  
+  border: rem(2) solid transparent;
+}
+
+:host(.colour-warning),
+.iam-notification.colour-warning {
+
+  background: #FFF6E6;
+}
+
+:host(.colour-danger),
+.iam-notification.colour-danger {
+
+  background: #fcebec;
+}
+
+:host(.colour-success),
+.iam-notification.colour-success {
+
+  background: #f8fdf6;
+}
+
+:host(.bg-white),
+.iam-notification.bg-white{
+  
+  border: none;
+  border-left: rem(8) solid var(--colour-info);
+
+  ::slotted(i),
+  i {
+    color: var(--colour-info);
+  }
+}
+
+// Alerts
+:host([data-type="alert"]),
+.iam-notification[data-type="alert"] {
+  border-radius: 0;
+  position: fixed;
+  top: var(--nav-height);
+  left: 0;
+  right: 0;
+  z-index: calc(var(--index-menu) - 1);
+  margin-bottom: 0;
+}
+
+// Toasts
+:host([data-type="toast"]),
+.iam-notification[data-type="toast"] {
+  
+  margin: auto;
+  display: block;
+
+  width: 100%;
+  max-width: rem(360);
+}
+
+:host([data-type="toast"].notification--dismissable) {
+  
+  max-width: rem(454);
+}
+
+.notification {
+
+  container-type: inline-size;
+  max-width: rem(1112);
+  margin-inline: auto;
+  display: flex;
+  flex-wrap: nowrap;
+
+  @media screen and (prefers-color-scheme: light) {
+    color: var(--colour-heading);
+  }
+
+  .notification__icon {
+
+    margin-inline-end: rem(16);
+    flex-grow: 0;
+
+    ::slotted(i) {
+      font-size: rem(18);
+    }
+  }
+
+  .notification__inner {
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+
+    
+    @container (width > 23.4375em) {
+
+      flex-wrap: nowrap;
+    }
+  }
+
+  .notification__text {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
+  }
+
+  .notification__btns {
+    flex-grow: 0;
+    flex-shrink: 0;
+    --colour-underline: currentColor;
+
+
+    ::slotted(a),
+    ::slotted(button),
+    > * {
+      margin: rem(16) rem(16) 0 0!important;
+    }
+    
+    @container (width > 23.4375em) {
+
+      display: flex;
+      align-items: center;
+      border-left: 1px solid currentColor;
+      margin-left: rem(32);
+
+      ::slotted(a),
+      ::slotted(button),
+      > * {
+        margin: 0 0 0 rem(32)!important;
+      }
+    }
+  }
+
+  .notification__dismiss {
+    flex-grow: 0;
+    padding-left: 1rem;
+
+    button {
+      text-indent: 300%;
+      overflow: hidden;
+      border: none;
+      height: rem(18);
+      width: rem(18);
+      background: transparent;
+      display: inline-block;
+      position: relative;
+      color: inherit;
+
+      &:after {
+        content: "";
+        top: 0;
+        left: 0;
+        position: absolute;
+        display: block;
+        height: rem(18);
+        width: rem(18);
+        z-index: var(--index-focus);
+        background: currentColor;
+        mask-image: var(--icon-close);
+        mask-size: 100%;
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+        -webkit-mask-image: var(--icon-close);
+        -webkit-mask-size: 100%;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: 50% 50%;
+      }
+    }
+
+    @container (width > 23.4375em) {
+      
+      padding-left: rem(32);
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/assets/sass/components/table.scss

@@ -151,13 +151,11 @@ table.border-0 {
 // #endregion
 
 // #region Tables are only stacked on mobile
-*:has(> iam-table){
-  container-type: inline-size;
-}
+*:has(> iam-table),
 *:has(> .iam-table){
   container-type: inline-size;
-  
 }
+
 @container (width < 23.4375em) {
 
   .iam-table, iam-table {

package/assets/sass/foundations/reboot.scss

@@ -170,9 +170,56 @@ main > :is(*):not(:defined) {
   }
 }
 
-iam-card:not(:defined) {
+: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);
 }
+
+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/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

@@ -20,6 +20,9 @@ class iamPagination extends HTMLElement {
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
 
     // Set default attributes
     const params = new URLSearchParams(window.location.search);
@@ -38,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

@@ -10,14 +10,6 @@ class iamTable extends HTMLElement {
     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');
-    
-    let classList = this.classList.toString();
-
-    classList = classList.replace('table--cta','');
-    classList = classList.replace('table--loading','');
-
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
@@ -35,17 +27,21 @@ class iamTable extends HTMLElement {
     
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    ${isCTA ? '<div class="table--cta">' : ''}
-    <div class="table__wrapper ${classList}">
+    <div class="table--cta">
+    <div class="table__wrapper">
       <slot></slot>
     </div>
-    ${isCTA ? '</div>' : ''}
-    ${isExportable ? '<button class="link" type="button" data-export>Export table as CSV</button>' : ''}
+    </div>
     <div class="table__pagination"></div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
+  }
+
+	connectedCallback() {
+
     const params = new URLSearchParams(window.location.search)
+
     // Set default attributes
     if(!this.hasAttribute('data-total'))
       this.setAttribute('data-total', this.querySelectorAll('table tbody tr').length);
@@ -60,14 +56,24 @@ class iamTable extends HTMLElement {
       this.setAttribute('data-increment', 15);
 
     this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / this.getAttribute('data-show')));
-  }
 
-	connectedCallback() {
+    // Update table__wrapper class
+    let classList = this.classList.toString();
+
+    classList = classList.replace('table--cta','');
+    classList = classList.replace('table--loading','');
+    this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
 
     this.table = this.querySelector('table');
     this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
     this.pagination = this.shadowRoot.querySelector('.table__pagination');
 
+    // Remove table CTA
+    const isCTA = this.classList.contains('table--cta');
+
+    if(!isCTA)
+      this.shadowRoot.querySelector('.table--cta').classList.remove('table--cta');
+
     // Set events on the filter table
     this.form = document.createElement('form');
     if(this.hasAttribute('data-filterby')){

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/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
 }