@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/ts/components/tabs/README.md

@@ -28,7 +28,7 @@ import('../node_modules/@iamproperty/components/assets/js/components/tabs/tabs.c
 
 ### Tab Properties
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| title  | String | - | Used for the heading of the component |
-| disabled  | Boolean | - | Used to apply disabled state for a tab (tab content will not be reachable) |
+| Option   | Type    | Default Value | Description                                                                |
+| -------- | ------- | ------------- | -------------------------------------------------------------------------- |
+| title    | String  | -             | Used for the heading of the component                                      |
+| disabled | Boolean | -             | Used to apply disabled state for a tab (tab content will not be reachable) |

package/assets/ts/components/tabs/tabs.component.ts

@@ -1,21 +1,24 @@
 // @ts-nocheck
-import tabs from "../../modules/tabs";
+import tabs from '../../modules/tabs';
 
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "tabs"
+  event: 'customElementRegistered',
+  element: 'tabs',
 });
 
 class iamTabs extends HTMLElement {
-
-  constructor(){
+  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`;
+    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/tabs.css";`;
 
     const template = document.createElement('template');
@@ -42,13 +45,12 @@ class iamTabs extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-    
-    let classList = this.classList.toString().replace('container','');
-    this.shadowRoot.querySelector('.tabs').setAttribute('class',`tabs ${classList}`);
+  connectedCallback() {
+    const classList = this.classList.toString().replace('container', '');
+    this.shadowRoot.querySelector('.tabs').setAttribute('class', `tabs ${classList}`);
 
     tabs(this);
   }
 }
 
-export default iamTabs;
+export default iamTabs;

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

@@ -1,18 +1,19 @@
 // @ts-nocheck
-import {trackComponent, trackComponentRegistered} from "../_global";
-import {cardHTML,setupCard} from "../../modules/card.module";
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { cardHTML, setupCard } from '../../modules/card.module';
 
-trackComponentRegistered("iam-video-card");
+trackComponentRegistered('iam-video-card');
 
 class iamVideoCard extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    this.attachShadow({ mode: 'open'});
+    this.attachShadow({ mode: 'open' });
 
-    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    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>
@@ -29,10 +30,9 @@ class iamVideoCard extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	async connectedCallback() {
-
+  async connectedCallback() {
     const cardComponent = this;
-    const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
+    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
 
     const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
     const link_id = randLetter + Date.now();
@@ -43,20 +43,25 @@ class iamVideoCard extends HTMLElement {
     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-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'));
+    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');
+    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>`);
+      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`);
@@ -64,97 +69,94 @@ class iamVideoCard extends HTMLElement {
     }
 
     // Youtube
-    if(cardComponent.hasAttribute('data-youtube')){
-
+    if (cardComponent.hasAttribute('data-youtube')) {
       // Load the scripts only once
-      if(!document.body.classList.contains('youtubeLoaded')){
-        let loaded = await this.loadYouTubeScripts();
+      if (!document.body.classList.contains('youtubeLoaded')) {
+        const loaded = await this.loadYouTubeScripts();
       }
-      cardHead.addEventListener('click',function(){
-
-        const customEvent = new CustomEvent("play-video", { detail: { 'Video Type': 'YoutTube', 'ID': cardComponent.getAttribute('data-youtube') } });
+      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"){
-
+      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') } });
+        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
 
-    }
-    else if(cardComponent.hasAttribute('data-vimeo')){ // Vimeo
-
-      cardHead.addEventListener('click',function(){
-
+      cardHead.addEventListener('click', function () {
         const videoId = cardComponent.getAttribute('data-vimeo');
 
-        const customEvent = new CustomEvent("play-video", { detail: { 'Video Type': 'Vimeo', 'ID': videoId } });
+        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>`
+        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) => {
-        
+      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') } });
+        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']);
+    trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);
   }
 
-  loadYouTubeScripts(){
-
+  loadYouTubeScripts() {
     return new Promise((resolve, reject) => {
-
       const image = new Image();
-      image.onload = function(){
-
+      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];
+        const tag = document.createElement('script');
+        tag.src = 'https://www.youtube.com/iframe_api';
+        const firstScriptTag = document.getElementsByTagName('script')[0];
         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
         document.body.classList.add('youtubeLoaded');
         resolve(true);
       };
-      image.onerror = function(){
+      image.onerror = function () {
         reject(false);
       };
-      image.src = "https://youtube.com/favicon.ico";
+      image.src = 'https://youtube.com/favicon.ico';
     });
-
   }
 
-  createYoutTubeVideo(target){
-
-    if(typeof window.player == "undefined"){
+  createYoutTubeVideo(target) {
+    if (typeof window.player == 'undefined') {
       window.player = [];
     }
 
-    var link_id = target.getAttribute('id');
-    var video_id = this.getAttribute('data-youtube');
+    const link_id = target.getAttribute('id');
+    const video_id = this.getAttribute('data-youtube');
 
-    console.log(window.player)
+    console.log(window.player);
 
-    if(typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == "function"){
-      
+    if (typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == 'function') {
       window.player[link_id].playVideo();
 
       return false;
@@ -163,21 +165,21 @@ class iamVideoCard extends HTMLElement {
     // 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
-        }
-      });
+    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();
 
@@ -189,12 +191,10 @@ class iamVideoCard extends HTMLElement {
 
     // The API calls this function when the player's state changes.
     // The function indicates that when playing a video (state=1)
-    var done = false;
+    let done = false;
     function onPlayerStateChange(event) {
-
       if (event.data == YT.PlayerState.PLAYING && !done) {
-
-        var link = document.getElementById(link_id);
+        const link = document.getElementById(link_id);
         link.classList.add('player-ready');
 
         done = true;
@@ -203,25 +203,21 @@ class iamVideoCard extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["data-image"];
+    return ['data-image'];
   }
-  
+
   attributeChangedCallback(attrName, oldVal, newVal) {
     switch (attrName) {
-      case "data-image": {
-
-        if(oldVal != newVal){
-
+      case 'data-image': {
+        if (oldVal != newVal) {
           const cardHeadImg = this.shadowRoot.querySelector('.card__head img');
 
-          if(cardHeadImg)
-            cardHeadImg.setAttribute('src',newVal);
+          if (cardHeadImg) cardHeadImg.setAttribute('src', newVal);
         }
         break;
       }
     }
-
   }
 }
 
-export default iamVideoCard;
+export default iamVideoCard;

package/assets/ts/components.ts

@@ -1,32 +1,56 @@
 // @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 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 prefix = 'iam';
 const options = {
   rootMargin: '50px',
-  threshold: 0.1
-}
-const componentExt = ".component.min.js";
+  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;
 
-  if(document.getElementsByTagName(`${prefix}-${component}`).length === 0)
-    return;
+  const callback = (entries: any) => {
+    entries.forEach((entry: any) => {
+      if (entry.intersectionRatio > 0) {
+        console.log(component);
 
-  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);
-        });  
+        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);
       }

package/assets/ts/html.d.ts

@@ -1,10 +1,4 @@
 declare module '*.html' {
   const value: string;
-  export default value
+  export default value;
 }
-
-type WindowWithDataLayer = Window & {
-  dataLayer: Record<string, any>[];
-};
-
-declare const window: WindowWithDataLayer;