@iamproperty/components 6.0.0 → 6.1.0--beta

package/assets/sass/elements/popover.scss

@@ -0,0 +1,207 @@
+@use "sass:math";
+@use "../_func" as *;
+
+// #region popover styling
+.dialog__wrapper {
+
+  position: relative;
+  display: inline-block;
+  margin-bottom: calc(var(--btn-margin) - 0.25rem);
+
+
+  &:has(dialog[open],dialog:popover-open) > button {
+    background: var(--colour-btn-secondary-bg-hover);
+    color: var(--colour-btn-secondary-hover);
+    filter: brightness(85%);
+    transition: background 0.1s, color 0.1s;
+    //color: var(--colour-btn);
+    border-radius: 1.5rem;
+  }
+
+  > .btn:first-child {
+
+    margin-bottom: 0.25rem;
+
+    &:not(.btn-compact):not([class*="fa-"]):after {
+      content: "";
+    
+      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-arrow);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-arrow);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+
+      transform: rotate(90deg);
+    }
+
+    &[aria-expanded]:not([data-number]):after {
+
+      transform: rotate(270deg);
+    }
+  }
+
+  > :is(dialog[open],dialog:popover-open) {
+
+    left: 0;
+    top: 100%;
+    z-index: var(--index-floating);
+    min-width: rem(320);
+    border-radius: rem(16);
+    width: rem(320);
+    padding: rem(24);
+
+    @include media-breakpoint-up(sm) {
+      width: rem(335);
+    }
+    @include media-breakpoint-up(md) {
+      width: rem(360);
+    }
+
+    &.dialog--list {
+      
+      width: fit-content!important;
+
+      @include media-breakpoint-up(sm) {
+        width: max-content!important;
+      }
+
+      min-width: rem(140)!important;
+      max-width: rem(280)!important;
+      padding: rem(16);
+      margin: 0;
+
+      hr {
+        height: 2px;
+        background: var(--colour-border);
+        margin-left: -#{rem(16)};
+        margin-right: -#{rem(16)};
+        margin-block: 0.25rem;
+      }
+
+      .radio--tick {
+        margin-right: 0;
+        padding-left: 1.5rem;
+          margin-bottom: 0;
+
+        &:before {
+          left: 0;
+          font-size: 1em;
+          top: 0.75rem;
+        }
+      }
+
+      a {
+
+        padding: #{rem(6)};
+
+        &:not(:hover,:focus,:active){
+          border-color: transparent;
+        }
+        margin: 0;
+
+        &:after {
+          display: none;
+        }
+      }
+
+      .btn-action {
+        &:not(:hover,:focus,:active){
+          border-color: transparent;
+        }
+        margin: 0;
+      }
+
+    }
+
+    :is(dialog[open],dialog:popover-open) {
+      display: contents;
+    }
+  }
+
+  &.dialog__wrapper--right > :is(dialog[open],dialog:popover-open){
+
+    right: 0;
+    left: auto;
+  } 
+
+  &.dialog__wrapper--sm > :is(dialog[open],dialog:popover-open) {
+    
+    width: rem(239);
+  }
+
+  &.dialog__wrapper--lg > :is(dialog[open],dialog:popover-open) {
+    
+    width: rem(319);
+  }
+
+  @include media-breakpoint-up(sm) {
+    
+    &.dialog__wrapper--sm-left > dialog[open]{
+
+      left: 0;
+      right: auto;
+    }  
+    &.dialog__wrapper--sm-right > dialog[open]{
+
+      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) {
+    
+    &.dialog__wrapper--md-left > dialog[open]{
+
+      left: 0;
+      right: auto;
+    }  
+    &.dialog__wrapper--md-right > dialog[open]{
+
+      right: 0;
+      left: auto;
+    }
+    &.dialog__wrapper--sm > dialog[open] {
+      width: rem(266);
+    }
+    &.dialog__wrapper--lg > dialog[open] {
+      width: rem(454);
+    }
+  }
+}
+
+// Show hide the indidual or multiple label
+.dialog__wrapper :is(.empty, .individual) {
+  display: none;
+}
+
+@supports selector(:has(*)) {
+
+  .dialog__wrapper :is(.empty, .individual) {
+    display: inline;
+  }
+}
+
+.dialog__wrapper:has(input:checked) .empty,
+.dialog__wrapper:not(:has(input:checked)) .individual,
+.dialog__wrapper:has(input:checked ~ input:checked) .individual,
+.dialog__wrapper:not(:has(input:checked ~ input:checked)) .multiple {
+
+  display: none;
+}
+// #endregion

package/assets/sass/foundations/reboot.scss

@@ -196,10 +196,10 @@ main > :is(.full-width, .container, iam-header) {
   grid-column: container;
 }
 
-main > :is(.full-width, [class*="bg-"], iam-collapsible-side) {
+main > :is(.full-width, [class*="bg-"]:has(.container), iam-collapsible-side) {
   grid-column: full-width;
 }
 
 .row > .col {
   min-height: var(--min-height,0);
-}
+}

package/assets/sass/foundations/root.scss

@@ -2,7 +2,6 @@
 
 //@import "../../bootstrap/scss/_root.scss";
 
-$root: ':root'!default;
 
 #{$root} {
   // Print out the $vars array setup in the variables file so they can be used as CSS vars

package/assets/ts/components/barchart/barchart.component.ts

@@ -16,6 +16,8 @@ class iamBarChart extends HTMLElement {
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
     ${loadCSS}
     </style>
     <div class="chart__outer" part="outer">

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

@@ -1,12 +1,8 @@
 // @ts-nocheck
+import {trackComponent, trackComponentRegistered} from "../_global";
+import {cardHTML,setupCard} from "../../modules/card.module";
 
-// Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "Card"
-});
-
+trackComponentRegistered("iam-card");
 
 class iamCard extends HTMLElement {
 
@@ -14,218 +10,136 @@ class iamCard extends HTMLElement {
     super();
     this.attachShadow({ mode: 'open'});
 
-    if(this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*="fa-"]:not(.btn)'))
-      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 loadCSS = `@import "${assetLocation}/css/components/card.component.css";`;
     
-    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 loadExtraCSS = `@import "${assetLocation}/css/components/card.global.css";`;
-
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
-    ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${loadCSS}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
-    <div class="card ${classList}" tabindex="0" part="card">
-      ${this.createCardConent()}
-    </div>
+    ${cardHTML}
+    <slot name="primary-action"></slot>
     `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-    
-    // insert extra CSS
-    if(!document.getElementById('cardGlobal'))
-      document.head.insertAdjacentHTML('beforeend',`<style id="cardGlobal">${loadExtraCSS}</style>`);
-  }
 
-  const createCardConent () {
-
-    // TODO split this out a bit
-    return `${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class="card__head" part="head">${this.hasAttribute('data-image') ? `<img src="${this.getAttribute('data-image')}" alt="" loading="lazy" />` : ``} <div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
-    <div class="card__body" part="body">
-    ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
-    ${!this.hasAttribute('data-image') && !this.hasAttribute('data-record') && this.querySelector('[slot="badges"]') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
-    ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
-      <slot></slot>
-    ${this.hasAttribute('data-total') ? `<div class="card__total">${this.getAttribute('data-total')}</div>` : ''}
-    </div>
-    ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
-    <slot name="checkbox"></slot>
-    <slot name="primary-action"></slot>
-    <div class="dialog__wrapper d-none">
-      <button class="btn btn-secondary btn-compact fa-ellipsis-vertical" popovertarget="actions" title="${this.hasAttribute('data-menu-title') ? this.getAttribute('data-menu-title') : 'Further actions'}">Lorum ipsum</button>
-      <dialog class="dialog--fix dialog--list" id="actions" popover>
-        <slot name="actions"></slot>
-      </dialog>
-    </div>
-    <div class="card__footer" part="footer">
-      <slot name="footer"></slot>
-      <slot name="btns"></slot>
-      ${this.hasAttribute('data-cta') ? `<span class="link d-inline-block pt-0 mb-0">${this.getAttribute('data-cta')}</span>` : ''}
-    </div>`;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-    this.classList.add('loaded');
-
-    // Mimic clicking the parent node so the focus and target events can be on the card
-    const component = this;
-    const parentNode = component.parentNode.closest('a, button, label, router-link');
-    const card = this.shadowRoot.querySelector('.card')
-    const btnCompact =  this.shadowRoot.querySelector('.btn-compact');
-    const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';
-
-
-    // Add the actions slot to the buttons and links to move them into a dialog warpper
-    const actionsWrapper = this.shadowRoot.querySelector('.dialog__wrapper');
-    let buttons = component.querySelectorAll('button[slot="actions"],a[slot="actions"]');
-    if(buttons.length){
-
-      const actionsWrapper = this.shadowRoot.querySelector('.dialog__wrapper');
-      const actionsDialog = this.shadowRoot.querySelector('.dialog__wrapper dialog');
-      const actionsBtn = actionsWrapper.querySelector('button');
+  
+	async connectedCallback() {
 
-      actionsWrapper.classList.remove('d-none');
+    const cardComponent = this;
+    const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
+    const cardBody =  cardComponent.shadowRoot.querySelector('.card__body');
+    const cardMenu =  cardComponent.shadowRoot.querySelector('.dialog__wrapper');
+    const btn =  cardComponent.shadowRoot.querySelector('.dialog__wrapper button');
 
-      Array.from(buttons).forEach((button,index)=>{
+    setupCard(cardComponent);
 
-        button.classList.add('btn');
-        button.classList.add('btn-action');
-      });
-    }
-    else {
-      actionsWrapper.remove();
+    // Add Illustration HTML
+    if(cardComponent.hasAttribute('data-illustration')){
+      cardBody.insertAdjacentHTML('afterbegin',`<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>`)
     }
 
-    /* 
-      If the parentNode is actually just a div, 
-      we don't want to look for anything or add events 
-    */
-    if (!parentNode) {
-      return false;
+    // Add class that shows the right arrow icon
+    if(!cardComponent.querySelector('[slot="btns"]') && !cardComponent.querySelector('[slot="secondary"]')){
+      cardComponent.classList.add('show-icon');
     }
 
-    if(parentNode)
-      parentNode.setAttribute('tabindex','-1');
-    
+    // Secondary buttons and actions
 
-    if(parentNode.matches('label[for]')){
+    // Add the dialog wrapper HTML
+    if(cardComponent.querySelector('[slot="btns"]')){
 
-      let isChecked = document.getElementById(parentNode.getAttribute('for')).checked;
-        
-      if(isChecked)
-        card.classList.add('checked');
-      else
-        card.classList.remove('checked');
+      cardComponent.shadowRoot.innerHTML += `<div class="dialog__wrapper">
+      <button class="btn btn-secondary btn-compact fa-ellipsis-vertical" popovertarget="actions" title="Further actions" type="button">Open further actions</button>
+      <div class="dialog--fix dialog--list" id="actions" popover>
+        <slot name="btns"></slot>
+      </div>
+    </div>`;
     }
+      
+    // Make sure slotted buttons and links have correct button classes
+    Array.from(cardComponent.querySelectorAll('[slot="btns"]')).forEach((button,index)=>{
 
-    // Click event down
-    this.addEventListener('click', (event) => {
-
-      let clickEvent = new Event('click');
-      card.dispatchEvent(clickEvent);
+      button.classList.add('btn');
+      button.classList.add('btn-action');
     });
 
-    card.addEventListener('click', (event) => {
+    // Hide the default hover and focus states when interacting with the checkbox, dialog wrapper or secondary button
+    if(cardComponent.querySelector('[slot="checkbox"],[slot="secondary"]')){
 
-      if(parentNode.matches('label[for]')){
+      const element = cardComponent.querySelector('[slot="checkbox"],[slot="secondary"]');
 
-        event.stopPropagation();
-        event.preventDefault();
+      element.addEventListener('mouseenter', (event) => {
+        cardComponent.classList.add('prevent-hover');
+      });
 
-        const input = document.getElementById(parentNode.getAttribute('for'))
+      element.addEventListener('mouseleave', (event) => {
+        cardComponent.classList.remove('prevent-hover');
+      });
+    }
 
-        const inputName = input.getAttribute('name');
-        const inputID = input.getAttribute('id');
+    if(cardComponent.shadowRoot.querySelector('.dialog__wrapper')){
 
-        // Mimic radio button functionality
-        const inputs = Array.from(document.querySelectorAll(`[name="${inputName}"][type="radio"]:not([id="${inputID}"])`));
-        inputs.forEach((input, index) => {
-          
-          const otherCard = document.querySelector(`[for="${input.getAttribute('id')}"] iam-card`);
-          
-          otherCard.dispatchEvent(new Event('inactive'));
-        });
+      const element = cardComponent.shadowRoot.querySelector('.dialog__wrapper');
 
-        parentNode.click();
-        let isChecked = input.checked
-          
-        if(isChecked)
-          card.classList.add('checked');
-        else
-          card.classList.remove('checked');
+      element.addEventListener('mouseenter', (event) => {
+        cardComponent.classList.add('prevent-hover');
+      });
 
-      }
-    });
+      element.addEventListener('mouseleave', (event) => {
+        cardComponent.classList.remove('prevent-hover');
+      });
+    }
 
-    this.addEventListener('inactive', (event) => {
-      card.classList.remove('checked');
-    });
+    // Dispatch events of selecting checkboxes
+    const checkbox = cardComponent.querySelector('input[type="checkbox"]');
+    if(checkbox){
+      checkbox.addEventListener('change', (event) => {
 
-    card.addEventListener('keydown', (event) => {
 
-      switch(event.keyCode)
-      {
-          case 32:
-          case 13:
-            if(parentNode.matches('label[for]')){
+        if(checkbox.checked){
+          const customEvent = new CustomEvent("select-card", { detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') } });
+          cardComponent.dispatchEvent(customEvent);
+        }
+        else {
+    
+          const customEvent = new CustomEvent("unselect-card", { detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') } });
+          cardComponent.dispatchEvent(customEvent);
+        }
+      });
+    }
 
-              event.stopPropagation();
-              event.preventDefault();
-      
-              const input = document.getElementById(parentNode.getAttribute('for'))
-      
-              const inputName = input.getAttribute('name');
-              const inputID = input.getAttribute('id');
-      
-              const inputs = Array.from(document.querySelectorAll(`[name="${inputName}"]:not([id="${inputID}"])`));
-          
-              inputs.forEach((input, index) => {
-                
-                const otherCard = document.querySelector(`[for="${input.getAttribute('id')}"] iam-card`);
-                
-                otherCard.dispatchEvent(new Event('inactive'));
-              });
-      
-              parentNode.click();
-              let isChecked = input.checked
-                
-              if(isChecked)
-                card.classList.add('checked');
-              else
-                card.classList.remove('checked');
-      
-            }
-            else {
-              parentNode.click();
-            }
-              break;
-          default:
-              break;
-      }
-    });
+    // Dispatch events of click onto secondary buttons
+    const secondaryBtn = cardComponent.querySelector('[slot="secondary"]');
+    if(secondaryBtn){
+      secondaryBtn.addEventListener('click', (event) => {
 
-    if(btnCompact){
+        const customEvent = new CustomEvent("secondary-button-clicked", { detail: { 'Title': secondaryBtn.getAttribute('title') } });
+        cardComponent.dispatchEvent(customEvent);
+      });
+    }
 
-      let addLocation = this.getAttribute('data-add-link');
+    // Dispatch events of click onto action buttons
+    const actionBtns = cardComponent.querySelectorAll('[slot="btns"]');
+    Array.from(actionBtns).forEach((button,index)=>{
 
-      btnCompact.addEventListener('click', (event) => {
+      button.addEventListener('click', (event) => {
 
-          event.stopPropagation();
-          event.preventDefault();
-          window.location = addLocation;
+        const customEvent = new CustomEvent("action-button-clicked", { detail: { 'Title': button.getAttribute('title') } });
+        cardComponent.dispatchEvent(customEvent);
       });
-    }
+    });
 
+
+    trackComponent(cardComponent,"iam-card",['select-card','unselect-card','secondary-button-clicked','action-button-clicked']);
   }
 
   static get observedAttributes() {
-    return ["data-total","class","data-image"];
+    return ["data-image"];
   }
   
   attributeChangedCallback(attrName, oldVal, newVal) {
@@ -235,26 +149,14 @@ class iamCard extends HTMLElement {
           this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
         break;
       }
-      case "class": {
-
-        if(oldVal != newVal){
-          let classList = this.classList.toString();
-              
-          if(this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*="fa-"]:not(.btn)'))
-            classList += ' card--has-icon';
-
-          this.shadowRoot.querySelector('.card').setAttribute('class',`card ${classList}`);
-
-          this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();
-        }
-
-        break;
-      }
       case "data-image": {
 
         if(oldVal != newVal){
 
-          this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();
+          const cardHeadImg = this.shadowRoot.querySelector('.card__head img');
+
+          if(cardHeadImg)
+            cardHeadImg.setAttribute('src',newVal);
         }
         break;
       }

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

@@ -0,0 +1,81 @@
+// @ts-nocheck
+import {trackComponent, trackComponentRegistered} from "../_global";
+import {cardHTML,setupCard} from "../../modules/card.module";
+
+trackComponentRegistered("iam-filter-card");
+
+class iamFilerCard 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/filter-card.component.css";`;
+    
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${loadCSS}
+    </style>
+    ${cardHTML}
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	async connectedCallback() {
+
+    const cardComponent = this;
+    const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
+
+    setupCard(cardComponent);
+
+    // Dispatch events of selecting checkboxes
+    const checkbox = cardComponent.parentElement.querySelector('input[type="checkbox"]');
+    if(checkbox){
+      checkbox.addEventListener('change', (event) => {
+
+        if(checkbox.checked){
+          const customEvent = new CustomEvent("select-card", { detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') } });
+          cardComponent.dispatchEvent(customEvent);
+          cardComponent.classList.add('active');
+        }
+        else {
+
+          const customEvent = new CustomEvent("unselect-card", { detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') } });
+          cardComponent.dispatchEvent(customEvent);
+          cardComponent.classList.remove('active');
+        }
+      });
+    }
+
+    if(cardComponent.parentElement.matches('button')){
+
+      const button = cardComponent.parentElement;
+      
+      button.addEventListener('click', (event) => {
+
+        if(!cardComponent.classList.contains('active')){
+          const customEvent = new CustomEvent("select-card", { detail: { 'button name': button.getAttribute('name') } });
+          cardComponent.dispatchEvent(customEvent);
+          cardComponent.classList.add('active');
+        }
+        else {
+
+          const customEvent = new CustomEvent("unselect-card", { detail: { 'button name': button.getAttribute('name') } });
+          cardComponent.dispatchEvent(customEvent);
+          cardComponent.classList.remove('active');
+        }
+      });
+    }
+
+
+    trackComponent(cardComponent,"iam-filter-card",['select-card','unselect-card']);
+  }
+
+}
+
+export default iamFilerCard;