@iamproperty/components 5.7.1-beta6 → 6.1.0--beta

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">${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;

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

@@ -0,0 +1,82 @@
+// @ts-nocheck
+import {trackComponent, trackComponentRegistered} from "../_global";
+import {cardHTML,setupCard} from "../../modules/card.module";
+
+trackComponentRegistered("iam-record-card");
+
+class iamRecordCard 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/record-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);
+
+    Array.from(cardComponent.querySelectorAll(':scope > *:not([slot])')).forEach((element,index)=>{
+
+      element.setAttribute('slot','details');
+    });
+
+    if(cardComponent.hasAttribute('data-avatar')){
+
+      cardHead.innerHTML += `<img src="${cardComponent.getAttribute('data-avatar')}" alt="" loading="lazy" class="card__avatar" part="avatar" />`;
+    }
+  
+
+    trackComponent(cardComponent,"iam-record-card",[]);
+  }
+
+  static get observedAttributes() {
+    return ["data-image"];
+  }
+  
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    switch (attrName) {
+      case "data-image": {
+
+        if(oldVal != newVal){
+
+          const cardHeadImg = this.shadowRoot.querySelector('.card__head img');
+
+          if(cardHeadImg)
+            cardHeadImg.setAttribute('src',newVal);
+        }
+        break;
+      }
+      case "data-avatar": {
+
+        if(oldVal != newVal){
+
+          const cardHeadImg = this.shadowRoot.querySelector('.card__avatar');
+
+          if(cardHeadImg)
+            cardHeadImg.setAttribute('src',newVal);
+        }
+        break;
+      }
+    }
+
+  }
+}
+
+export default iamRecordCard;