@iamproperty/components 7.4.0 → 7.5.0

package/assets/ts/modules/advanced-select.ts

@@ -1,7 +1,7 @@
 function advancedSelect(advancedSelect, displayInputField, datalist, isSearch = false): boolean | void {
   let currentFocus = -1;
 
-  if(!isSearch){
+  if (!isSearch) {
     displayInputField.addEventListener('focus', function () {
       displayInputField.setAttribute('placeholder', displayInputField.value);
       displayInputField.setAttribute('data-value', displayInputField.value);
@@ -12,10 +12,8 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
 
       datalist.style.display = 'block';
     });
-  }
-  else {
+  } else {
     displayInputField.addEventListener('focus', function () {
-
       displayInputField.setAttribute('data-list', displayInputField.getAttribute('list'));
       displayInputField.setAttribute('list', '');
 
@@ -37,29 +35,24 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
     if (option.innerHTML == '') option.innerHTML = option.value;
   }
 
-
   advancedSelect.addEventListener('click', function () {
-
     if (event && event.target instanceof HTMLElement && event.target.closest('datalist option')) {
       const option = event.target.closest('datalist option');
- 
+
       displayInputField.value = option.value;
 
-      if(typeof window.triggerDynamicEvent == "function")
-        window.triggerDynamicEvent(displayInputField);
+      if (typeof window.triggerDynamicEvent == 'function') window.triggerDynamicEvent(displayInputField);
 
       datalist.style.display = 'none';
 
       for (const optionInner of datalist.options) {
-        optionInner.classList.remove('active')
+        optionInner.classList.remove('active');
       }
 
       option.classList.add('active');
     }
-
   });
 
-
   displayInputField.addEventListener('input', function () {
     displayInputField.removeAttribute('data-value');
     currentFocus = -1;
@@ -103,20 +96,22 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
     }
   }
 
-
   // Add the empty button
   displayInputField
     .closest('label')
-    .insertAdjacentHTML('beforeend', '<button class="empty btn btn-action"><i class="fa-light fa-times me-0"></i></button>');
+    .insertAdjacentHTML(
+      'beforeend',
+      '<button class="empty btn btn-action"><i class="fa-light fa-times me-0"></i></button>'
+    );
   const closeBtn = advancedSelect.querySelector('.empty');
 
   closeBtn.addEventListener('click', function (e) {
     displayInputField.removeAttribute('placeholder');
     displayInputField.removeAttribute('data-value');
     displayInputField.value = '';
-    
+
     for (const optionInner of datalist.options) {
-      optionInner.classList.remove('active')
+      optionInner.classList.remove('active');
       optionInner.removeAttribute('style');
     }
   });

package/assets/ts/modules/data-layer.md

@@ -13,28 +13,24 @@ The `createDataLayer()` function should be called in the JavaScript code of the
 ## Events Tracked
 
 1.  **"Pageview" Event**
-
     - Description: This event is automatically pushed to the `window.dataLayer` array during the function's execution, representing the initial pageview with the current document title.
     - Event Data:
       - `event`: "Pageview"
       - `pageTitle`: The title of the current document.
 
 2.  **"closeDetails" Event**
-
     - Description: This event is triggered when a click occurs on an element with the attribute `[open] summary`, indicating that a summary element with the `[open]` attribute is being closed.
     - Event Data:
       - `event`: "closeDetails"
       - `detailsTitle`: The text content of the `summary` element associated with the clicked element. If the `summary` element doesn't have any text content, an empty string is used.
 
 3.  **"openDetails" Event**
-
     - Description: This event is triggered when a click occurs on a `summary` element (not associated with `[open]` attribute), indicating that a summary element is being opened.
     - Event Data:
       - `event`: "openDetails"
       - `detailsTitle`: The text content of the clicked `summary` element. If the `summary` element doesn't have any text content, an empty string is used.
 
 4.  **"linkClicked" Event**
-
     - Description: This event is triggered when a click occurs on an `a` (anchor) element.
     - Event Data:
       - `event`: "linkClicked"
@@ -43,7 +39,6 @@ The `createDataLayer()` function should be called in the JavaScript code of the
       - `href`: The value of the `href` attribute of the `a` element. If the `a` element doesn't have an `href` attribute, an empty string is used.
 
 5.  **"buttonClicked" Event**
-
     - Description: This event is triggered when a click occurs on a `button` element.
     - Event Data:
       - `event`: "buttonClicked"

package/assets/ts/modules/dynamicEvents.ts

@@ -1,13 +1,13 @@
 // Create the event listeners
-window.triggerDynamicEvent = (element, event = "change"): void => {
+window.triggerDynamicEvent = (element, event = 'change'): void => {
   console.log('event');
 
-  if(element.hasAttribute('data-change-events') && event == "change")
+  if (element.hasAttribute('data-change-events') && event == 'change')
     splitEvents(element, element.getAttribute('data-change-events'));
-  
-  if(element.hasAttribute('data-click-events') && event == "click")
+
+  if (element.hasAttribute('data-click-events') && event == 'click')
     splitEvents(element, element.getAttribute('data-click-events'));
-}
+};
 
 const createDynamicEvents = (): void => {
   // Change event
@@ -56,8 +56,7 @@ const checkConditions = (element, event): void | boolean => {
 
     if (document.querySelector(`${event['in-list']} option[value="${element.value}"]`)) {
       runEvent(match, event, 'if');
-    } 
-    else runEvent(match, event, 'else');
+    } else runEvent(match, event, 'else');
 
     return false;
   } else if ('event' in 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

@@ -1,42 +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;
+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

@@ -1,122 +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;
+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/scripts.ts

@@ -40,7 +40,8 @@ const components = [
   'doughnutchart',
   'bento-grid',
   'milestone-group',
-  'milestone'
+  'milestone',
+  'darkmode',
 ];
 
 // Attach classes to dom elements