@iamproperty/components 6.1.0--beta → 6.1.0--beta3

package/assets/ts/components/multi-step/multi-step.component.ts

@@ -0,0 +1,262 @@
+// @ts-nocheck
+import {trackComponent, trackComponentRegistered} from "../_global";
+
+trackComponentRegistered("iam-multi-step");
+
+class iamMultiStep 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/multi-step.component.css";`;
+    
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <div class="steps" parts="steps">
+    </div>
+    <slot></slot>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  
+	connectedCallback() {
+
+    const MultiStepComponent = this;
+    const steps = this.shadowRoot.querySelector('.steps');
+    const form = this.querySelector('form');
+    
+    let fieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset[data-title]'));
+
+    fieldsets.forEach((fieldset,index) => {
+
+      steps.insertAdjacentHTML('beforeend',`<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active":""}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`);
+
+      if(index === 0)
+        fieldset.classList.add('active');
+
+      const btnWrapper = document.createElement("div");
+      btnWrapper.classList.add('btn--wrapper');
+      fieldset.appendChild(btnWrapper);
+      
+      if(index != 0)
+        btnWrapper.innerHTML += `<button data-title="${fieldsets[index-1].getAttribute('data-title')}" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>`;
+  
+      if(index != fieldsets.length - 1)
+        btnWrapper.innerHTML += `<button data-title="${fieldsets[index+1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
+  
+      // Last fieldset
+      if(index == fieldsets.length - 1){
+        if(form && form.querySelector(':scope > button[type="submit"]')){
+  
+          let existingButton = form.querySelector(':scope > button[type="submit"]');
+          existingButton.classList.add('mb-0')
+  
+          btnWrapper.insertAdjacentElement('beforeend',existingButton);
+        }
+        else
+          btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
+      }  
+    });
+  
+    
+
+    // Open the fieldset with an error inside
+    let validatedFieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset.was-validated'));
+    for (let i = 0; i < validatedFieldsets.length; i++) {
+
+      let fieldset = validatedFieldsets[i];
+      let fieldsetID = fieldset.getAttribute('data-title');
+      
+      if(fieldset.querySelector('.is-invalid')){
+
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
+
+          element.classList.add('active');
+        });
+
+        break;
+      }
+      else {
+
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
+
+          element.classList.add('valid');
+        });
+      }
+    }
+
+    // Prevent the bubble messages
+    MultiStepComponent.addEventListener('invalid', (function () {
+      return function (e) {
+        e.preventDefault();
+      };
+    })(), true);
+
+
+
+
+    function validateFieldset(button){
+
+      const currentFieldset = MultiStepComponent.querySelector(`fieldset.active`) ? MultiStepComponent.querySelector(`fieldset.active`) : MultiStepComponent.querySelector(`fieldset[data-title]`);
+      const currentFieldsetID = currentFieldset.getAttribute('data-title');
+      let isFieldsetValid = true;
+  
+      currentFieldset.classList.add('was-validated');
+  
+      Array.from(currentFieldset.querySelectorAll('input')).forEach((input, index) => {
+  
+        if (!input.checkValidity())
+          isFieldsetValid = false;
+      });
+  
+      // If valid mode to next field set
+      if(!isFieldsetValid){
+  
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
+  
+          element.classList.remove('valid');
+        });
+
+        Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
+  
+          element.classList.remove('valid');
+        });
+      }
+      else {
+  
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
+  
+          element.classList.add('valid');
+        });
+
+        Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
+  
+          element.classList.add('valid');
+        });
+      }
+  
+      // Allow the previous button to navigate
+      if(isFieldsetValid || !button.hasAttribute('data-next')){
+  
+        const fieldset = MultiStepComponent.querySelector(`fieldset[data-title="${button.getAttribute('data-title')}"]`);
+        const step = MultiStepComponent.shadowRoot.querySelector(`.steps button[data-title="${button.getAttribute('data-title')}"]`);
+  
+        Array.from(MultiStepComponent.querySelectorAll('button')).forEach((button, index) => {
+          button.classList.remove('active');
+        });
+        Array.from(MultiStepComponent.querySelectorAll('fieldset')).forEach((button, index) => {
+          button.classList.remove('active');
+        });
+  
+        step.classList.add('active');
+        fieldset.classList.add('active');
+      }
+  
+  
+      let fieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset`)).length;
+      let validFieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset.valid`)).length;
+  
+      // update the progress bar
+      MultiStepComponent.style.setProperty('--progress', `${(validFieldsetCount/(fieldsetCount - 1) * 100)}%`);
+    }
+  
+    // remove error messages from server
+    MultiStepComponent.addEventListener('keydown', (event) => {
+      if (event && event.target instanceof HTMLElement && event.target.closest('button')){
+  
+        const button = event.target.closest('button');
+  
+        if(event.keyCode == 13 && button.getAttribute('type') != "submit"){
+          
+          event.preventDefault();
+          validateFieldset(button);
+        }
+  
+      }
+  
+      if (event && event.target instanceof HTMLElement && event.target.closest('input')){
+        const input = event.target.closest('input');
+  
+        input.classList.remove('is-invalid');
+  
+        if(event.keyCode == 13){
+          
+          event.preventDefault();
+        }
+      }
+    });
+  
+  
+    MultiStepComponent.addEventListener('click', (event) => {
+      if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')){
+        
+        const form = event.target.closest('form');
+        form.classList.add('was-validated');
+      }
+      return null
+    });
+
+
+    MultiStepComponent.shadowRoot.addEventListener('click', (event) => {
+      if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
+  
+        const button = event.target.closest('button[data-title]');
+
+        validateFieldset(button);
+      };
+      return null
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    trackComponent(MultiStepComponent,"iam-multi-step",[]);
+  }
+
+  static get observedAttributes() {
+    return ["data-image"];
+  }
+  
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    switch (attrName) {
+      case "data-total": {
+        if(this.shadowRoot.querySelector('.card__total'))
+          this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
+        break;
+      }
+    }
+
+  }
+}
+
+export default iamMultiStep;

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

@@ -171,10 +171,11 @@ class iamTable extends HTMLElement {
 
         Array.from(this.table.querySelectorAll('tbody tr')).forEach((row,index) => {
           
+
           let rowID = `row${uniqueID(index)}`;
           row.insertAdjacentHTML(
             'afterbegin',
-            `<td class="td--fixed selectrow"><input type="checkbox" name="row" id="${rowID}"/><label for="${rowID}"><span class="visually-hidden">Select row</span></label></td>`
+            `<td class="td--fixed selectrow selected"><input type="checkbox" name="row" id="${rowID}" ${row.hasAttribute('data-selected') ? `checked="true"` : ''}/><label for="${rowID}"><span class="visually-hidden">Select row</span></label></td>`
           );
         });
 

package/assets/ts/components.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-const components = ["accordion","header","table","tabs",'card','filter-card','video-card','record-card',"filterlist",'applied-filters','pagination','notification','actionbar','nav','collapsible-side','address-lookup','fileupload','search','inline-edit','multiselect','slider','carousel','marketing','barchart'];
+const components = ["accordion","header","table","tabs",'card','filter-card','video-card','record-card',"filterlist",'applied-filters','pagination','notification','actionbar','nav','collapsible-side','address-lookup','fileupload','search','inline-edit','multiselect','multi-step','slider','carousel','marketing','barchart'];
 
 const prefix = "iam"
 const options = {

package/assets/ts/modules/card.module.ts

@@ -38,6 +38,9 @@ export const setupCard = (cardComponent:any) => {
   }
 
   if(!cardComponent.querySelector('[slot="badges"]')){
-    cardComponent.shadowRoot.querySelector('.card__badges').remove();
+    cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');
+  }
+  else{
+    cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');
   }
 }

package/assets/ts/modules/carousel.ts

@@ -1,12 +1,94 @@
 // @ts-nocheck
-function carousel(carouselElement, row) {
+
+export const generateThumbnailList = function(carouselComponent){
+
+  let thumbnailImages = [];
+
+  Array.from(carouselComponent.querySelectorAll(':scope > div')).forEach((slide, index) => {
+        
+    if(slide.hasAttribute('data-thumbnail')){
+
+      thumbnailImages[index] = slide.getAttribute('data-thumbnail');
+    }
+  });
+
+  return thumbnailImages;
+}
+
+
+export const generatePipsHTML = function(carouselComponent,thumbnailImages){
+
+  let itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+
+  let pips = "";
+  for (let i = 1; i <= itemCount; i++) {
+    let pipContent = null;
+    let pipClass = '';
+
+    if (thumbnailImages.length && thumbnailImages[i - 1]) {
+      pipClass = 'has-thumbnail';
+      pipContent = `<img src="${thumbnailImages[i - 1]}" alt="Slide ${i}" height="148"/>`;
+    } else {
+      pipContent = `Slide ${i}`;
+    }
+
+    pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? "aria-current":""}>${pipContent}</button>`;
+  }
+  
+  return pips;
+}
+
+
+const getProgressMax = function(itemCount,visibleItems){
+
+  if(visibleItems == 1){
+    return itemCount;
+  }
+
+  let max = (Math.ceil(itemCount / visibleItems) * visibleItems) - visibleItems;
+
+  return max + 1;
+}
+
+const getProgressPercent = function(value,max){
+  
+  return (((value-1)/(max-1)) * 100);
+}
+
+export const carousel = function (carouselComponent) {
 
   var scrollTimeout;
 
+  const carouselElement = carouselComponent.shadowRoot.querySelector('.carousel');
+
   let carouselInner = carouselElement.querySelector('.carousel__inner');
   let carouselControls = carouselElement.querySelector('.carousel__controls');
-  let itemCount = row.querySelectorAll(':scope > .col').length;
+  let carouselProgress = carouselElement.querySelector('.carousel__progress [type="range"]');
+  let itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+  let scrollArea = carouselInner.clientWidth;
+  let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+  let visibleItems = Math.round(scrollArea / itemWidth);
+
+  carouselProgress.setAttribute('min',1);
+  carouselProgress.setAttribute('step',visibleItems);
+
+  let progressMax = getProgressMax(itemCount,visibleItems);
+
+  carouselProgress.setAttribute('max',progressMax);
+  carouselProgress.value = 1;
+
+  let percent = getProgressPercent(1,progressMax);
   
+  carouselProgress.style.setProperty('--percent', percent + "%");
+  
+  let stepperInterval, stepperEvent = "mouseup", stepperStart = "mousedown";
+    
+  if("ontouchstart" in document.documentElement) {
+    stepperEvent = "touchend";
+    stepperStart = "touchstart";
+  }
+
+
   // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
   carouselInner.addEventListener('scroll', function(e){
     clearTimeout(scrollTimeout);
@@ -17,8 +99,8 @@ function carousel(carouselElement, row) {
       let scrollLeft = carouselInner.scrollLeft;
       let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
      
-      let itemWidth = row.querySelector(':scope > .col').scrollWidth;
-      let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+      let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+      let lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;
       //+60px here is to account for when the next offscreen slide is visible beneath the next arrow
       let lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= (lastItemOffset + 60);
 
@@ -27,6 +109,9 @@ function carousel(carouselElement, row) {
       //Check if theres room for more slides than we have
       let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;
 
+      carouselProgress.setAttribute('step',visibleItems);
+
+
       if(leftOverSpace > 0 && lastItemInView){
         targetSlide = (Math.floor(itemCount / visibleItems) * visibleItems) + 1;
       } 
@@ -49,6 +134,16 @@ function carousel(carouselElement, row) {
       else
         carouselElement.querySelector('.btn-next').removeAttribute('disabled');
       
+      carouselProgress.value = targetSlide;
+
+      
+      progressMax = getProgressMax(itemCount,visibleItems);
+
+      carouselProgress.setAttribute('max',progressMax);
+      percent = (targetSlide/progressMax) * 100;
+      percent = getProgressPercent(targetSlide,progressMax);
+      carouselProgress.style.setProperty('--percent', percent + "%");
+
     }, 100); 
 
   }, false);
@@ -65,8 +160,15 @@ function carousel(carouselElement, row) {
           button.removeAttribute('aria-current');
         });
         target.setAttribute('aria-current', true);
+
+        const customEvent = new CustomEvent("pip-clicked", {  detail: { 
+                                                            'slide': target.getAttribute('data-slide')
+                                                          }
+                                                        });
+
+        carouselComponent.dispatchEvent(customEvent);
         
-        const el = row.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
+        const el = carouselComponent.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
 
         carouselInner.scroll({
           top: 0,
@@ -83,11 +185,11 @@ function carousel(carouselElement, row) {
 
     let scrollArea = carouselInner.clientWidth;
     let scrollWidth = carouselInner.scrollWidth;
-    let itemWidth = row.querySelector(':scope > .col').scrollWidth;
+    let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
 
     let visibleItems = Math.round(scrollArea / itemWidth);
 
-    let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+    let lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;
     let lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= (lastItemOffset + 60);
 
     //Check if theres room for more slides than we have
@@ -104,6 +206,15 @@ function carousel(carouselElement, row) {
 
     for (var target = e.target; target && target != this; target = target.parentNode) {
       if (typeof target.matches == "function" && target.matches('.btn-next, .btn-prev')) {
+
+        let direction = target.matches('.btn-next') ? 'next' : 'prev';
+
+        const customEvent = new CustomEvent(`${direction}-clicked`, {  detail: { 
+          'slide': target.getAttribute('data-go')
+          }
+        });
+
+        carouselComponent.dispatchEvent(customEvent);
         
         e.preventDefault();
         let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - movement : carouselInner.scrollLeft + carouselInner.clientWidth;
@@ -117,6 +228,49 @@ function carousel(carouselElement, row) {
       }
     }
   }, false);
+
+
+  carouselProgress.addEventListener(stepperStart,function(event){
+    
+    clearInterval(stepperInterval);
+    stepperInterval = setInterval(function() {
+      scrollArea = carouselInner.clientWidth;
+      itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+      visibleItems = Math.round(scrollArea / itemWidth);
+      carouselProgress.setAttribute('step',visibleItems);
+      progressMax = getProgressMax(itemCount,visibleItems);
+      carouselProgress.setAttribute('max',progressMax);
+      percent = getProgressPercent(carouselProgress.value,progressMax);
+
+      carouselProgress.style.setProperty('--percent', percent + "%");
+    }, 10);
+  });
+
+  carouselProgress.addEventListener(stepperEvent,function(event){
+    clearInterval(stepperInterval);
+  });
+
+  carouselProgress.addEventListener('change', function(e){
+
+    clearInterval(stepperInterval);
+    let target = carouselComponent.querySelector(`:scope > *:nth-child(${carouselProgress.value})`);
+
+    carouselInner.scroll({
+      top: 0,
+      left: target ? target.offsetLeft - carouselInner.getBoundingClientRect().left : 0, 
+      behavior: 'smooth'
+    });
+
+    let direction = target.matches('.btn-next') ? 'next' : 'prev';
+        
+    const customEvent = new CustomEvent(`slider-changed`, {  detail: { 
+      'slide': carouselProgress.value
+      }
+    });
+
+    carouselComponent.dispatchEvent(customEvent);
+    
+  }, false);
 }
 
 export default carousel