@iamproperty/components 7.3.0 → 7.5.0

package/assets/ts/modules/dialogs.ts

@@ -132,80 +132,83 @@ const extendDialogs = (body): void => {
 
     // Popover
     if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')) {
-      event.stopPropagation();
-
       const btn = event.target.closest('.dialog__wrapper > button');
       const parent = btn.parentNode;
-      let dataEvent = 'openPopover';
-      const popover = parent.querySelector(':scope > dialog');
-
-      // close open dialogs
-      if (
-        document.querySelector('*:not([data-keep-open]) > dialog[open]') &&
-        document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover
-      ) {
-        // Check that the ope dialog isn't a parent of the dialog being opened
-        if (btn.closest('dialog[open]') != document.querySelector('*:not([data-keep-open]) > dialog[open]')) {
-          document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
-        }
-      }
-
-      // Remove active class from exiting active buttons
-      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement) => {
-        btnElement.removeAttribute('aria-expanded');
-      });
 
-      if (popover.hasAttribute('open')) {
-        popover.close();
-        dataEvent = 'closePopover';
+      if (parent.querySelector('dialog')) {
+        event.stopPropagation();
 
-        popover.removeAttribute('style');
-        btn.removeAttribute('aria-expanded');
-      } else {
-        popover.show();
-        btn.setAttribute('aria-expanded', true);
+        let dataEvent = 'openPopover';
+        const popover = parent.querySelector(':scope > dialog');
 
-        const position = btn.getBoundingClientRect();
-        let topOffset = position.top;
-        let leftOffset = position.left;
-
-        if (btn.closest('iam-table')) {
-          const container = btn.closest('iam-table').parentNode.getBoundingClientRect();
-
-          topOffset -= container.top;
-          leftOffset -= container.left;
+        // close open dialogs
+        if (
+          document.querySelector('*:not([data-keep-open]) > dialog[open]') &&
+          document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover
+        ) {
+          // Check that the ope dialog isn't a parent of the dialog being opened
+          if (btn.closest('dialog[open]') != document.querySelector('*:not([data-keep-open]) > dialog[open]')) {
+            document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
+          }
         }
 
-        if (popover.classList.contains('dialog--fix')) {
-          popover.setAttribute(
-            'style',
-            `position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`
-          );
+        // Remove active class from exiting active buttons
+        Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement) => {
+          btnElement.removeAttribute('aria-expanded');
+        });
+
+        if (popover.hasAttribute('open')) {
+          popover.close();
+          dataEvent = 'closePopover';
+
+          popover.removeAttribute('style');
+          btn.removeAttribute('aria-expanded');
+        } else {
+          popover.show();
+          btn.setAttribute('aria-expanded', true);
+
+          const position = btn.getBoundingClientRect();
+          let topOffset = position.top;
+          let leftOffset = position.left;
+
+          if (btn.closest('iam-table')) {
+            const container = btn.closest('iam-table').parentNode.getBoundingClientRect();
+
+            topOffset -= container.top;
+            leftOffset -= container.left;
+          }
+
+          if (popover.classList.contains('dialog--fix')) {
+            popover.setAttribute(
+              'style',
+              `position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`
+            );
+          }
         }
-      }
 
-      // When the dialog is fixed it could dip under the viewport
-      // Lets check the dimensions and transform it to appear above
-      let boundingRec = popover.getBoundingClientRect();
-      const popoverBottom = boundingRec.bottom - window.scrollY;
-      const windowPos = window.innerHeight - window.scrollY;
-      if (popoverBottom > windowPos) {
-        const currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style') + ' ' : '';
-        popover.setAttribute('style', currentStyle + `transform: translate(0, calc(-100% - 4rem))`);
+        // When the dialog is fixed it could dip under the viewport
+        // Lets check the dimensions and transform it to appear above
+        let boundingRec = popover.getBoundingClientRect();
+        const popoverBottom = boundingRec.bottom - window.scrollY;
+        const windowPos = window.innerHeight - window.scrollY;
+        if (popoverBottom > windowPos) {
+          const currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style') + ' ' : '';
+          popover.setAttribute('style', currentStyle + `transform: translate(0, calc(-100% - 4rem))`);
 
-        // Check that the dialog doesn't go over the top of the page
-        boundingRec = popover.getBoundingClientRect();
-        const popoverTop = boundingRec.top - window.scrollY;
+          // Check that the dialog doesn't go over the top of the page
+          boundingRec = popover.getBoundingClientRect();
+          const popoverTop = boundingRec.top - window.scrollY;
 
-        if (popoverTop < 100) popover.removeAttribute('style');
-      }
+          if (popoverTop < 100) popover.removeAttribute('style');
+        }
 
-      window.dataLayer = window.dataLayer || [];
+        window.dataLayer = window.dataLayer || [];
 
-      window.dataLayer.push({
-        event: dataEvent,
-        id: btn.textContent,
-      });
+        window.dataLayer.push({
+          event: dataEvent,
+          id: btn.textContent,
+        });
+      }
     }
 
     // Close popovers when clicked away

package/assets/ts/modules/dynamicEvents.ts

@@ -1,4 +1,14 @@
 // Create the event listeners
+window.triggerDynamicEvent = (element, event = 'change'): void => {
+  console.log('event');
+
+  if (element.hasAttribute('data-change-events') && event == 'change')
+    splitEvents(element, element.getAttribute('data-change-events'));
+
+  if (element.hasAttribute('data-click-events') && event == 'click')
+    splitEvents(element, element.getAttribute('data-click-events'));
+};
+
 const createDynamicEvents = (): void => {
   // Change event
   document.addEventListener('change', (event) => {

package/assets/ts/modules/inputs.ts

@@ -2,12 +2,6 @@ import hibpCheck from '../vendor/hibp.js';
 
 const extendInputs = (body): void => {
   function loadInput(): void {
-    // maxlength counter init
-    Array.from(document.querySelectorAll('input[maxlength],textarea[maxlength]')).forEach((input) => {
-      const wrapper = input.parentElement;
-      setMaxlengthVars(input, wrapper);
-    });
-
     Array.from(document.querySelectorAll('label input')).forEach((input) => {
       if (!input.closest('label').querySelector('.optional-text') && !input.hasAttribute('required')) {
         if (input.parentNode.tagName.toLowerCase() == 'span')
@@ -76,9 +70,6 @@ const extendInputs = (body): void => {
       if (input.hasAttribute('type') && input.getAttribute('type') == 'color')
         input.nextElementSibling.value = input.value;
 
-      if (input.hasAttribute('maxlength') && input.nextElementSibling)
-        input.nextElementSibling.setAttribute('data-count', input.value.length);
-
       if (input.hasAttribute('data-strength-checker')) checkPWDStrength(input);
     }
   });
@@ -129,22 +120,6 @@ const extendInputs = (body): void => {
   });
 };
 
-export const setMaxlengthVars = (input): void => {
-  const wrapper = input.parentElement;
-  const maxlength = input.getAttribute('maxlength');
-
-  wrapper.style.setProperty('--maxlength', maxlength);
-
-  let span = input.nextElementSibling;
-
-  if (!span || (span && span.classList.contains('invalid-feedback'))) {
-    span = document.createElement('span');
-    wrapper.insertBefore(span, input.nextSibling);
-  }
-
-  span.setAttribute('data-count', input.value.length);
-};
-
 export const changeType = (input, type): void => {
   if (input.hasAttribute('type') && input.getAttribute('type') == 'password')
     input.setAttribute('data-password-type', true);

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

@@ -0,0 +1,39 @@
+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,119 @@
+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,13 @@ const components = [
   'barchart',
   'doughnutchart',
   'bento-grid',
+  'milestone-group',
+  'milestone',
+  'darkmode',
 ];
 
 // Attach classes to dom elements
-document.addEventListener('DOMContentLoaded', async():void => {
+document.addEventListener('DOMContentLoaded', async (): void => {
   createDataLayer();
   createDynamicEvents();
 
@@ -53,8 +58,6 @@ document.addEventListener('DOMContentLoaded', async():void => {
 
   videoSupport(document.body);
 
-
-
   /*
   const prefix = 'iam';
   const options = {