@iamproperty/components 7.2.2--beta3 → 7.4.0

package/assets/ts/modules/milestone-group.ts

@@ -0,0 +1,42 @@
+export const showFuture = function (milestoneGroupElement: Element): void {
+  const futureToggle = milestoneGroupElement.dataset.showAllToggle;
+
+  if (!futureToggle) {
+    return;
+  }
+
+  const toggleBtn = document.createElement('button');
+  toggleBtn.innerHTML = 'Show next steps';
+  toggleBtn.classList.add('btn', 'btn-tertiary', 'show-all-toggle');
+
+  milestoneGroupElement.appendChild(toggleBtn)
+
+  toggleBtn.addEventListener('click', () => {
+    if(milestoneGroupElement.classList.contains('show-all')) {
+      toggleBtn.innerHTML = 'Show next steps';
+
+      milestoneGroupElement.classList.remove('show-all');
+      toggleInteractionEvent('hide-future-items', milestoneGroupElement)
+    } else {
+      toggleBtn.innerHTML = 'Hide next steps';
+
+      milestoneGroupElement.classList.add('show-all');
+      toggleInteractionEvent('show-future-items', milestoneGroupElement)
+    }
+
+  });
+
+}
+
+const toggleInteractionEvent = function (eventName: string, element: Element): void {
+  const customEvent = new CustomEvent(eventName, {});
+
+  element.dispatchEvent(customEvent);
+}
+
+
+const milestoneGroup = function (milestoneGroupElement: Element): void {
+  showFuture(milestoneGroupElement);
+};
+
+export default milestoneGroup;

package/assets/ts/modules/milestone.ts

@@ -0,0 +1,122 @@
+export const setStatus = function (milestoneElement: Element): void {
+  const status = milestoneElement.dataset.status;
+
+  if(!status) {
+    return;
+  }
+
+  const milestoneWrap = milestoneElement.shadowRoot.querySelector('.milestone-wrap')
+  const statusTag = document.createElement('span');
+  statusTag.setAttribute('part', 'status');
+  statusTag.classList.add('milestone-status');
+  statusTag.innerHTML = `${status} Step`;
+  
+  if(status === 'Current') {
+    milestoneElement.classList.add('current');
+  }
+
+  milestoneWrap.insertAdjacentElement('afterbegin', statusTag)
+}
+
+export const getMilestoneTasks = function (milestoneElement: Element): void {
+  const taskWrap = milestoneElement.shadowRoot.querySelector('.task-wrap');  
+  const tasks = milestoneElement.dataset.items ? JSON.parse(milestoneElement.dataset.items) : [];
+
+  if(!tasks.length) {
+    return;
+  }
+
+  tasks.forEach(task => {
+    const taskItem = document.createElement('details');
+    const taskName = document.createElement('summary');
+    const detailsWrap = document.createElement('div');
+    const taskDescription = document.createElement('p');
+      
+    detailsWrap.classList.add('task-details');
+       
+    taskName.innerHTML = task.name;
+
+    if (task.date_completed) {
+      taskName.classList.add('complete');
+    }
+
+    taskItem.appendChild(taskName);
+
+    if (task.description) {
+      taskDescription.innerHTML = task.description;
+      detailsWrap.appendChild(taskDescription)
+    }
+
+    if (task.actions.length) {
+      detailsWrap.appendChild(getSubtasks(task.actions, taskName));
+    }
+
+    taskItem.appendChild(detailsWrap);
+
+    taskWrap.insertAdjacentElement('beforeend', taskItem)
+
+    // Fire tracking events
+    taskItem.addEventListener('click', () => {
+
+      if (taskItem?.hasAttribute('open')) {
+          itemInteractionEvent('milestone-item-closed', task.name, milestoneElement)
+        } else {
+          itemInteractionEvent('milestone-item-opened', task.name, milestoneElement)
+        }
+    });
+
+  });
+
+  milestoneElement.appendChild(taskWrap)
+}
+
+const itemInteractionEvent = function (eventName: string, taskName: string, element: Element): void {
+  const customEvent = new CustomEvent(eventName, {
+    detail: {
+      title: taskName,
+    },
+  });
+
+  element.dispatchEvent(customEvent);
+  
+}
+
+const getSubtasks = function (actions: Array, taskName: Element): void {
+    const actionsWrap = document.createElement('ul');
+    const totalCount = actions.length;
+    const completed = actions.filter((action) => action.date_completed);
+    const completedCount = completed.length || 0;
+
+    if (totalCount < 1) {
+      return;
+    }
+
+    taskName.innerHTML += ` (${completedCount}/${totalCount})`;
+
+    actions.forEach(action => {
+      const actionItem = document.createElement('li');
+        const actionCompletedDate = document.createElement('span');
+
+      if(action.date_completed) {
+        actionItem.classList.add('complete')
+
+        actionCompletedDate.classList.add('action-date');
+        actionCompletedDate.innerHTML = action.date_completed;
+      } 
+
+      actionItem.innerHTML = action.action;
+
+      actionItem.appendChild(actionCompletedDate);
+
+      actionsWrap.appendChild(actionItem);
+    });
+
+    return actionsWrap;
+}
+
+const milestone = function (milestoneElement: Element): void {
+  setStatus(milestoneElement)
+  getMilestoneTasks(milestoneElement);
+};
+
+export default milestone;

package/assets/ts/modules/table.ts

@@ -343,7 +343,21 @@ export const setupAdvancedTable = (component, table): void => {
     addSelectboxes(component, table, actionbar);
   }
 
-  component.querySelectorAll('.dialog__wrapper .btn-compact').forEach((btn) => {
+  component.querySelectorAll('.dialog__wrapper .btn-compact').forEach((btn, index) => {
+    const wrapper = btn.closest('.dialog__wrapper');
+    const dialog = wrapper.querySelector('dialog');
+
+    // Transform dialog into a menu custom element
+    if (dialog) {
+      const id = `menu${uniqueID(index)}`;
+
+      dialog.setAttribute('id', id);
+      dialog.setAttribute('popover', 'auto');
+      btn.setAttribute('popovertarget', id);
+
+      dialog.outerHTML = dialog.outerHTML.replace(/<dialog/g, '<iam-menu').replace(/<\/dialog>/g, '</iam-menu>');
+    }
+
     btn.classList.add('btn-sm');
     btn.classList.add('m-0');
 

package/assets/ts/modules/videos.ts

@@ -1,30 +1,23 @@
-const videoSupport = async(body): void => {
-
-if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const loaded = await loadYouTubeScripts();
-}
-setTimeout(async() => {
-  
+const videoSupport = async (body): void => {
   if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const loaded = await loadYouTubeScripts();
   }
-}, "2000");
-
-
-  body.addEventListener('click', async(event) => {
+  setTimeout(async () => {
+    if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const loaded = await loadYouTubeScripts();
+    }
+  }, '2000');
 
+  body.addEventListener('click', async (event) => {
     let target = (event.target as HTMLElement).closest<HTMLElement>('.youtube-link[data-youtube]');
 
-    if(!target){
+    if (!target) {
       target = (event.target as HTMLElement).closest<HTMLElement>('.vimeo-link[data-vimeo]');
     }
-      
-
-    if(target && target.hasAttribute('data-youtube')){
-
 
+    if (target && target.hasAttribute('data-youtube')) {
       event.preventDefault();
 
       if (!document.body.classList.contains('youtubeLoaded')) {
@@ -33,7 +26,7 @@ setTimeout(async() => {
       }
 
       const link_id = 'youtube-' + target.getAttribute('data-youtube');
-        
+
       if (!document.getElementById(`${link_id}-dialog`)) {
         document.body.insertAdjacentHTML(
           'beforeend',
@@ -49,7 +42,7 @@ setTimeout(async() => {
       });
       target.dispatchEvent(customEvent);
       window.dataLayer.push(customEvent.detail);
-      
+
       createYoutTubeVideo(embed, target.getAttribute('data-youtube'));
       dialog.showModal();
 
@@ -67,14 +60,11 @@ setTimeout(async() => {
         target.dispatchEvent(customEvent);
         window.dataLayer.push(customEvent.detail);
       });
-      
-    }
-    else if(target && target.hasAttribute('data-vimeo')){
-
+    } else if (target && target.hasAttribute('data-vimeo')) {
       event.preventDefault();
 
       const link_id = 'vimeo-' + target.getAttribute('data-youtube');
-        
+
       if (!document.getElementById(`${link_id}-dialog`)) {
         document.body.insertAdjacentHTML(
           'beforeend',
@@ -85,7 +75,6 @@ setTimeout(async() => {
       const dialog = document.getElementById(`${link_id}-dialog`);
       const embed = document.getElementById(link_id);
 
-
       const videoId = target.getAttribute('data-vimeo');
 
       const customEvent = new CustomEvent('play-video', {
@@ -99,7 +88,6 @@ setTimeout(async() => {
 
       dialog.showModal();
 
-
       dialog.addEventListener('close', () => {
         embed.innerHTML = ``; // Remove the video since we cant pause it
 
@@ -110,16 +98,11 @@ setTimeout(async() => {
         window.dataLayer.push(customEvent.detail);
       });
     }
-
-    
   });
+};
 
-}
-
-
-export const loadYouTubeScripts = async(): any => {
+export const loadYouTubeScripts = async (): any => {
   return new Promise((resolve, reject) => {
-
     const image = new Image();
     image.onload = function (): any {
       // This code loads the IFrame Player API code asynchronously.
@@ -135,10 +118,9 @@ export const loadYouTubeScripts = async(): any => {
     };
     image.src = 'https://youtube.com/favicon.ico';
   });
-}
-
+};
 
-export const createYoutTubeVideo = async(target, video_id): void | boolean => {
+export const createYoutTubeVideo = async (target, video_id): void | boolean => {
   if (typeof window.player == 'undefined') {
     window.player = [];
   }
@@ -189,6 +171,6 @@ export const createYoutTubeVideo = async(target, video_id): void | boolean => {
       done = true;
     }
   }
-}
+};
 
 export default videoSupport;

package/assets/ts/scripts.ts

@@ -14,6 +14,8 @@ const components = [
   'table-no-submit',
   'tabs',
   'card',
+  'calendar',
+  'content',
   'filter-card',
   'video-card',
   'record-card',
@@ -37,10 +39,12 @@ const components = [
   'barchart',
   'doughnutchart',
   'bento-grid',
+  'milestone-group',
+  'milestone'
 ];
 
 // Attach classes to dom elements
-document.addEventListener('DOMContentLoaded', async():void => {
+document.addEventListener('DOMContentLoaded', async (): void => {
   createDataLayer();
   createDynamicEvents();
 
@@ -53,8 +57,6 @@ document.addEventListener('DOMContentLoaded', async():void => {
 
   videoSupport(document.body);
 
-
-
   /*
   const prefix = 'iam';
   const options = {