@iamproperty/components 6.0.0 → 6.1.0--beta2

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

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/video-card/video-card.component.ts

@@ -0,0 +1,227 @@
+// @ts-nocheck
+import {trackComponent, trackComponentRegistered} from "../_global";
+import {cardHTML,setupCard} from "../../modules/card.module";
+
+trackComponentRegistered("iam-video-card");
+
+class iamVideoCard 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/video-card.component.css";`;
+    
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${loadCSS}
+    </style>
+    ${cardHTML}
+    <dialog>
+      <div class="embed"></div>
+    </dialog>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	async connectedCallback() {
+
+    const cardComponent = this;
+    const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
+
+    const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
+    const link_id = randLetter + Date.now();
+
+    let dialog;
+    let embed;
+
+    setupCard(cardComponent);
+
+    // Check if youtube or vimeo video link is present
+    if(cardComponent.querySelector('[data-youtube]'))
+      cardComponent.setAttribute('data-youtube',cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube'));
+
+    if(cardComponent.querySelector('[data-vimeo]'))
+      cardComponent.setAttribute('data-vimeo',cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));
+
+    // General dialog stuff
+    if(cardComponent.hasAttribute('data-youtube') || cardComponent.hasAttribute('data-vimeo')){
+
+      cardHead.setAttribute('tabindex','0');
+
+      // Add dialog to page
+      if(!document.getElementById(`${link_id}-dialog`)){
+        document.body.insertAdjacentHTML('beforeend', `<dialog id="${link_id}-dialog"><div class="embed" id="${link_id}"></div></dialog>`);
+      }
+
+      dialog = document.getElementById(`${link_id}-dialog`);
+      embed = document.getElementById(link_id);
+    }
+
+    // Youtube
+    if(cardComponent.hasAttribute('data-youtube')){
+
+      // Load the scripts only once
+      if(!document.body.classList.contains('youtubeLoaded')){
+        let loaded = await this.loadYouTubeScripts();
+      }
+      cardHead.addEventListener('click',function(){
+
+        const customEvent = new CustomEvent("play-video", { detail: { 'Video Type': 'YoutTube', 'ID': cardComponent.getAttribute('data-youtube') } });
+        cardComponent.dispatchEvent(customEvent);
+
+        cardComponent.createYoutTubeVideo(embed);
+        dialog.showModal();
+      });
+
+      dialog.addEventListener("close", (event) => {
+
+        if(window.player[embed.getAttribute('id')] && typeof window.player[embed.getAttribute('id')].pauseVideo == "function"){
+
+          window.player[embed.getAttribute('id')].pauseVideo();
+        }
+
+        
+        const customEvent = new CustomEvent("close-video", { detail: { 'Video Type': 'YoutTube', 'ID': cardComponent.getAttribute('data-youtube') } });
+        cardComponent.dispatchEvent(customEvent);
+      });
+
+    }
+    else if(cardComponent.hasAttribute('data-vimeo')){ // Vimeo
+
+      cardHead.addEventListener('click',function(){
+
+        const videoId = cardComponent.getAttribute('data-vimeo');
+
+        const customEvent = new CustomEvent("play-video", { detail: { 'Video Type': 'Vimeo', 'ID': videoId } });
+        cardComponent.dispatchEvent(customEvent);
+
+        if(!embed.querySelector('iframe'))
+          embed.innerHTML = `<iframe src="https://player.vimeo.com/video/${videoId}?autoplay=1" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`
+
+        dialog.showModal();
+      });
+
+      dialog.addEventListener("close", (event) => {
+        
+        embed.innerHTML = ``; // Remove the video since we cant pause it
+
+        const customEvent = new CustomEvent("close-video", { detail: { 'Video Type': 'Vimeo', 'ID': cardComponent.getAttribute('data-vimeo') } });
+        cardComponent.dispatchEvent(customEvent);
+      });
+    }
+
+    trackComponent(cardComponent,"iam-video-card",['play-video','close-video']);
+  }
+
+  loadYouTubeScripts(){
+
+    return new Promise((resolve, reject) => {
+
+      const image = new Image();
+      image.onload = function(){
+
+        // This code loads the IFrame Player API code asynchronously.
+        var tag = document.createElement('script');
+        tag.src = "https://www.youtube.com/iframe_api";
+        var firstScriptTag = document.getElementsByTagName('script')[0];
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+        document.body.classList.add('youtubeLoaded');
+        resolve(true);
+      };
+      image.onerror = function(){
+        reject(false);
+      };
+      image.src = "https://youtube.com/favicon.ico";
+    });
+
+  }
+
+  createYoutTubeVideo(target){
+
+    if(typeof window.player == "undefined"){
+      window.player = [];
+    }
+
+    var link_id = target.getAttribute('id');
+    var video_id = this.getAttribute('data-youtube');
+
+    console.log(window.player)
+
+    if(typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == "function"){
+      
+      window.player[link_id].playVideo();
+
+      return false;
+    }
+
+    // This function creates an <iframe> (and YouTube player) after the API code downloads.
+    //function onYouTubeIframeAPIReady() {
+
+      window.player[link_id] = new YT.Player(link_id, {
+        height: '100%',
+        width: '100%',
+        videoId: video_id,
+        playerVars: {
+          'modestbranding': 1,
+          'playsinline': 1,
+          'rel': 0,
+          'showinfo': 0
+        },
+        events: {
+          'onReady': onPlayerReady,
+          'onStateChange': onPlayerStateChange
+        }
+      });
+    //}
+    //onYouTubeIframeAPIReady();
+
+    // The API will call this function when the video player is ready.
+    function onPlayerReady(event) {
+      // Play the video straight away
+      event.target.playVideo();
+    }
+
+    // The API calls this function when the player's state changes.
+    // The function indicates that when playing a video (state=1)
+    var done = false;
+    function onPlayerStateChange(event) {
+
+      if (event.data == YT.PlayerState.PLAYING && !done) {
+
+        var link = document.getElementById(link_id);
+        link.classList.add('player-ready');
+
+        done = true;
+      }
+    }
+  }
+
+  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;
+      }
+    }
+
+  }
+}
+
+export default iamVideoCard;

package/assets/ts/components.ts

@@ -0,0 +1,38 @@
+// @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','multi-step','slider','carousel','marketing','barchart'];
+
+const prefix = "iam"
+const options = {
+  rootMargin: '50px',
+  threshold: 0.1
+}
+const componentExt = ".component.min.js";
+
+// Load components - Each component will load once the first of its type has been loaded
+components.forEach((component) => {
+
+  if(document.getElementsByTagName(`${prefix}-${component}`).length === 0)
+    return;
+
+  let callback = (entries:any) => {
+    entries.forEach((entry:any) => {
+      
+      if(entry.intersectionRatio > 0){
+
+        console.log(component)
+        
+        import(`./components/${component}/${component}${componentExt}`).then(module => {
+          if (!window.customElements.get(`${prefix}-${component}`))
+            window.customElements.define(`${prefix}-${component}`, module.default);
+        }).catch((err) => {
+          console.log(err.message);
+        });  
+
+        intObserver.unobserve(entry.target);
+      }
+    });
+  };
+
+  const intObserver = new IntersectionObserver(callback, options);
+  intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);
+});

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

@@ -0,0 +1,43 @@
+export const cardHTML = `<div class="card__head" part="head">
+  <slot name="head"></slot>
+</div>
+<div class="card__badges"><slot name="badges"></slot></div>
+<slot name="checkbox" class="activate-prevent-hover"></slot>
+<div class="card__body" part="body">
+  <slot></slot>
+  <slot name="secondary" part="secondary"></slot>
+</div>
+<div class="card__details" part="details">
+  <slot name="details"></slot>
+</div>
+<div class="card__footer" part="footer">
+  <slot name="footer"></slot>
+</div>`;
+
+
+export const setupCard = (cardComponent:any) => {
+
+  cardComponent.classList.add('card');
+  const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
+  const cardBody =  cardComponent.shadowRoot.querySelector('.card__body');
+
+  if(cardComponent.hasAttribute('data-image')){
+
+    cardHead.innerHTML += `<img src="${cardComponent.getAttribute('data-image')}" alt="" loading="lazy" part="image" />`;
+  }
+
+
+  // Inset the HTML for the data total or icon fallback
+  if(cardComponent.hasAttribute('data-total')){
+
+    cardBody.insertAdjacentHTML('beforeend', `<div class="card__total">${cardComponent.getAttribute('data-total')}</div>`);
+  }
+  else if(cardComponent.querySelector('[slot="total-icon"]')){
+    
+    cardBody.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
+  }
+
+  if(!cardComponent.querySelector('[slot="badges"]')){
+    cardComponent.shadowRoot.querySelector('.card__badges').remove();
+  }
+}