@iamproperty/components 7.4.0 → 7.5.1--beta1

package/assets/ts/components/word-count/word-count.component.ts

@@ -0,0 +1,91 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-word-count');
+
+class iamCard 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/word-count.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+
+    ${loadCSS}
+    </style>
+    <slot></slot>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    const input = this.querySelector('input,textarea,select');
+    let span = this.querySelector('[data-count]');
+
+    if (!span) {
+      span = document.createElement('span');
+      this.append(span);
+    }
+
+    console.log(input.value.split(' ').length);
+
+    if (this.hasAttribute('data-character')) span.setAttribute('data-count', input.value ? input.value.length : '0');
+    else span.setAttribute('data-count', input.value ? input.value.split(' ').length : '0');
+
+    const maxlength = this.getAttribute('data-max');
+    this.style.setProperty('--maxlength', maxlength);
+    span.setAttribute('data-max', this.getAttribute('data-max'));
+
+    input.addEventListener('input', (event) => {
+      if (this.hasAttribute('data-max') && span && this.hasAttribute('data-character')) {
+        input?.setAttribute('maxlength', this.getAttribute('data-max'));
+        span.setAttribute('data-count', input?.value.length);
+      } else if (this.hasAttribute('data-max') && span) {
+        if (input?.value.split(' ').length >= this.getAttribute('data-max')) {
+          event?.preventDefault();
+          input?.setAttribute('maxlength', input?.value.length);
+        } else {
+          input?.removeAttribute('maxlength');
+        }
+
+        span.setAttribute('data-count', input?.value.split(' ').length);
+        span.setAttribute('data-max', this.getAttribute('data-max'));
+      }
+    });
+
+    /*
+
+    // maxlength counter init
+    Array.from(document.querySelectorAll('input[maxlength],textarea[maxlength]')).forEach((input) => {
+      const wrapper = input.parentElement;
+      setMaxlengthVars(input, wrapper);
+    });
+
+
+
+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);
+  }
+ v
+  span.setAttribute('data-count', input.value.length);
+
+
+*/
+  }
+}
+
+export default iamCard;

package/assets/ts/components.ts

@@ -26,6 +26,7 @@ const components = [
   'marketing',
   'barchart',
   'splitbutton',
+  'word-count',
 ];
 
 const prefix = 'iam';

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,19 +2,7 @@ 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')
-          input.parentElement.insertAdjacentHTML('beforebegin', `<span class="optional-text"></span>`);
-        else input.insertAdjacentHTML('beforebegin', `<span class="optional-text"></span>`);
-      }
-    });
 
     // Date restrictions
     if (document.querySelector('input[type="date"]')) {
@@ -76,9 +64,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 +114,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/modules/password-indicator.ts

@@ -0,0 +1,29 @@
+export const changeType = function (element: Element): void {
+    const buttonEle = element.querySelector('button')
+    const associatedInput = element?.parentNode?.querySelector('input');
+
+    element.addEventListener('click', (event) => {
+      const currentType = associatedInput.type;
+
+      const newType = currentType === 'password' ? 'text' : 'password';
+      const isPasswordType = currentType === 'password';
+
+      associatedInput.setAttribute('type', newType);
+      associatedInput.setAttribute('data-password-type', isPasswordType);
+
+      if (element.hasAttribute('data-alt-class')) {
+        const newClass = element.getAttribute('data-alt-class');
+        element.setAttribute('data-alt-class', buttonEle.getAttribute('class'));
+        buttonEle.setAttribute('class', newClass);
+      }
+    
+    });
+}
+
+
+const passwordIndicator = function (element: Element): void {
+  changeType(element)
+};
+
+export default passwordIndicator;
+