@iamproperty/components 7.0.0 → 7.1.0--beta2

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

@@ -8,48 +8,52 @@ The `createDataLayer()` function should be called in the JavaScript code of the
 
 ## Function Signature
 
-`function createDataLayer(): void` 
+`function createDataLayer(): void`
 
 ## 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.
+
+    - 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.
+
+    - 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.
+
+    - 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"
-        -   `linkText`: The text content of the clicked `a` element. If the `a` element has a `title` attribute, its value is used as `linkText`; otherwise, the text content of the `a` element is used. If the `a` element doesn't have any text content, an empty string is used.
-        -   `class`: The `class` attribute value of the `a` element. If the `a` element doesn't have a `class` attribute, an empty string is used.
-        -   `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.
+
+    - Description: This event is triggered when a click occurs on an `a` (anchor) element.
+    - Event Data:
+      - `event`: "linkClicked"
+      - `linkText`: The text content of the clicked `a` element. If the `a` element has a `title` attribute, its value is used as `linkText`; otherwise, the text content of the `a` element is used. If the `a` element doesn't have any text content, an empty string is used.
+      - `class`: The `class` attribute value of the `a` element. If the `a` element doesn't have a `class` attribute, an empty string is used.
+      - `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"
-        -   `buttonText`: The text content of the clicked `button` element. If the `button` element doesn't have any text content, an empty string is used.
-        -   `class`: The `class` attribute value of the `button` element. If the `button` element doesn't have a `class` attribute, an empty string is used.
+
+    - Description: This event is triggered when a click occurs on a `button` element.
+    - Event Data:
+      - `event`: "buttonClicked"
+      - `buttonText`: The text content of the clicked `button` element. If the `button` element doesn't have any text content, an empty string is used.
+      - `class`: The `class` attribute value of the `button` element. If the `button` element doesn't have a `class` attribute, an empty string is used.
 
 ## Notes
 
--   The function relies on the `window.dataLayer` array to store the events, so it should be executed after the page has loaded and the `window` object is available.
--   This implementation assumes that the JavaScript code is placed at the end of the HTML document, ensuring that the DOM elements are accessible at the time the function is executed.
+- The function relies on the `window.dataLayer` array to store the events, so it should be executed after the page has loaded and the `window` object is available.
+- This implementation assumes that the JavaScript code is placed at the end of the HTML document, ensuring that the DOM elements are accessible at the time the function is executed.
 
 ### Example Usage
 

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

@@ -7,48 +7,48 @@ declare const window: WindowWithDataLayer;
 function createDataLayer(): void {
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
-    event: "Pageview",
+    event: 'Pageview',
     pageTitle: document.title,
   });
 
-  document.addEventListener("click", (event: MouseEvent) => {
-    const target = (event.target as HTMLElement).closest<HTMLElement>("[open] summary");
+  document.addEventListener('click', (event: MouseEvent) => {
+    const target = (event.target as HTMLElement).closest<HTMLElement>('[open] summary');
 
     if (target) {
       window.dataLayer.push({
-        event: "closeDetails",
-        detailsTitle: target.textContent || "",
+        event: 'closeDetails',
+        detailsTitle: target.textContent || '',
       });
     } else {
-      const summary = (event.target as HTMLElement).closest<HTMLElement>("summary");
-      const link = (event.target as HTMLElement).closest<HTMLAnchorElement>("a");
-      const button = (event.target as HTMLElement).closest<HTMLButtonElement>("button");
+      const summary = (event.target as HTMLElement).closest<HTMLElement>('summary');
+      const link = (event.target as HTMLElement).closest<HTMLAnchorElement>('a');
+      const button = (event.target as HTMLElement).closest<HTMLButtonElement>('button');
 
       if (summary) {
         window.dataLayer.push({
-          event: "openDetails",
-          detailsTitle: summary.textContent || "",
+          event: 'openDetails',
+          detailsTitle: summary.textContent || '',
         });
       }
 
       if (link) {
         window.dataLayer.push({
-          event: "linkClicked",
-          linkText: link.hasAttribute("title") ? link.getAttribute("title") || "" : link.textContent || "",
-          class: link.hasAttribute("class") ? link.getAttribute("class") || "" : "",
-          href: link.getAttribute("href") || "",
+          event: 'linkClicked',
+          linkText: link.hasAttribute('title') ? link.getAttribute('title') || '' : link.textContent || '',
+          class: link.hasAttribute('class') ? link.getAttribute('class') || '' : '',
+          href: link.getAttribute('href') || '',
         });
       }
 
       if (button) {
         window.dataLayer.push({
-          event: "buttonClicked",
-          buttonText: button.textContent || "",
-          class: button.hasAttribute("class") ? button.getAttribute("class") || "" : "",
+          event: 'buttonClicked',
+          buttonText: button.textContent || '',
+          class: button.hasAttribute('class') ? button.getAttribute('class') || '' : '',
         });
       }
     }
   });
 }
 
-export default createDataLayer;
+export default createDataLayer;

package/assets/ts/modules/dialogs.ts

@@ -1,12 +1,9 @@
 // @ts-nocheck
 const extendDialogs = (body) => {
-
   Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog, index) => {
+    const parent = dialog.closest('.dialog__wrapper');
 
-    let parent = dialog.closest('.dialog__wrapper');
-
-    if(!parent){
-        
+    if (!parent) {
       dialog.removeAttribute('open');
       dialog.showModal();
       dialog.focus();
@@ -17,243 +14,242 @@ const extendDialogs = (body) => {
 
   // Dialogs/modals
   body.addEventListener('click', (event) => {
-
-    if(event.target.tagName == 'IAM-ACTIONBAR')
-      return false;
+    if (event.target.tagName == 'IAM-ACTIONBAR') return false;
 
     // Modal
-    if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')){
-
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')) {
       const button = event.target.closest('[data-modal]');
-      const modalID = button.hasAttribute('data-modal') ? button.getAttribute('data-modal') : button.getAttribute('data-filter');
+      const modalID = button.hasAttribute('data-modal')
+        ? button.getAttribute('data-modal')
+        : button.getAttribute('data-filter');
       const dialog = document.querySelector(`dialog#${modalID}`);
-      
+
       createDialog(dialog);
 
       // Open the modal!
       dialog.showModal();
       dialog.focus();
 
-      if(!dialog.querySelector('iam-multi-step')){
-        
-        let firstWidth = dialog.offsetWidth;
-        dialog.setAttribute('style',`max-width: ${firstWidth}px;`);
+      if (!dialog.querySelector('iam-multi-step')) {
+        const firstWidth = dialog.offsetWidth;
+        dialog.setAttribute('style', `max-width: ${firstWidth}px;`);
       }
 
       // When the modal is opened we want to make sure any duplicate checkboxes are matching the originals
-      Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element,index) => {
-        
+      Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element, index) => {
         const id = element.getAttribute('data-duplicate');
         const originalInput = document.getElementById(id);
 
-        if(element.checked != originalInput.checked){
-
+        if (element.checked != originalInput.checked) {
           element.checked = originalInput.checked;
-          let changeEvent = new Event('change');
+          const changeEvent = new Event('change');
           element.dispatchEvent(changeEvent);
         }
       });
 
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
-        "event": "openModal",
-        "id": modalID
+        event: 'openModal',
+        id: modalID,
       });
-    };
-  
+    }
+
     // Close modal
-    if (event && event.target instanceof HTMLElement && event.target.closest('button.dialog__close')){
+    if (event && event.target instanceof HTMLElement && event.target.closest('button.dialog__close')) {
       const dialog = event.target.closest('dialog[open]');
 
       event.preventDefault();
-      dialog.close()
-      
+      dialog.close();
+
       // Remove active class from exiting active buttons
-      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement,index) => {
+      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {
         btnElement.classList.remove('active');
       });
 
-      let closeEvent = new CustomEvent('dialog-closed', {
+      const closeEvent = new CustomEvent('dialog-closed', {
         bubbles: true,
         cancelable: true,
-        detail: { modalId: dialog.id }
+        detail: { modalId: dialog.id },
       });
 
       event.target.dispatchEvent(closeEvent);
 
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
-        "event": "closeModal",
-        "id": dialog.getAttribute('id')
+        event: 'closeModal',
+        id: dialog.getAttribute('id'),
       });
     }
 
     // Track default close buttons
-    if (event && event.target instanceof HTMLElement && event.target.closest('button[formmethod="dialog"]')){
+    if (event && event.target instanceof HTMLElement && event.target.closest('button[formmethod="dialog"]')) {
       const dialog = event.target.closest('dialog[open]');
 
       // Remove active class from exiting active buttons
-      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement,index) => {
+      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {
         btnElement.classList.remove('active');
       });
-      
+
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
-        "event": "closeModal",
-        "id": dialog.getAttribute('id')
+        event: 'closeModal',
+        id: dialog.getAttribute('id'),
       });
     }
-    
+
     // Close the modal when clicked on the backdrop
-    if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')){
+    if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')) {
       let dialog = event.target.closest('dialog[open]');
 
       // Small fix to make sure the dialog isn't a dialog inside of a dialog.
-      var style = window.getComputedStyle(dialog);
-      if(style.display === 'contents')
-        dialog = dialog.parentNode.closest('dialog[open]');
-      
-      // Dont allow the backdrop to be clicked when transactional
-      if(!dialog.classList.contains('dialog--transactional') && !dialog.classList.contains('dialog--acknowledgement')){
-
-        const dialogDimensions = dialog.getBoundingClientRect()
+      const style = window.getComputedStyle(dialog);
+      if (style.display === 'contents') dialog = dialog.parentNode.closest('dialog[open]');
 
-        if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
+      // Dont allow the backdrop to be clicked when transactional
+      if (
+        !dialog.classList.contains('dialog--transactional') &&
+        !dialog.classList.contains('dialog--acknowledgement')
+      ) {
+        const dialogDimensions = dialog.getBoundingClientRect();
+
+        if (
+          event.clientX < dialogDimensions.left ||
+          event.clientX > dialogDimensions.right ||
+          event.clientY < dialogDimensions.top ||
+          event.clientY > dialogDimensions.bottom
+        ) {
+          if (!event.target.closest('dialog *'))
+            // Weird bug when interacting with radio input fields within dialogs cuases it to close
+            dialog.close();
 
-          if(!event.target.closest('dialog *')) // Weird bug when interacting with radio input fields within dialogs cuases it to close
-            dialog.close()
-          
           window.dataLayer = window.dataLayer || [];
           window.dataLayer.push({
-            "event": "closeModal",
-            "id": dialog.getAttribute('id')
+            event: 'closeModal',
+            id: dialog.getAttribute('id'),
           });
         }
       }
     }
 
     // Popover
-    if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')){
+    if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')) {
+      event.stopPropagation();
 
-      
-    event.stopPropagation();
-
-      let btn = event.target.closest('.dialog__wrapper > button');
-      let parent = btn.parentNode;
-      let dataEvent = "openPopover"
-      let popover = parent.querySelector(':scope > dialog');
-      
+      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){
-
+      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]')){
+        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,index) => {
+      Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {
         btnElement.removeAttribute('aria-expanded');
       });
 
-      if(popover.hasAttribute('open')){
-        
+      if (popover.hasAttribute('open')) {
         popover.close();
-        dataEvent = "closePopover"
+        dataEvent = 'closePopover';
 
         popover.removeAttribute('style');
         btn.removeAttribute('aria-expanded');
-      }
-      else {
-        
+      } else {
         popover.show();
         btn.setAttribute('aria-expanded', true);
 
-        var position = btn.getBoundingClientRect();
+        const position = btn.getBoundingClientRect();
         let topOffset = position.top;
         let leftOffset = position.left;
 
-        if(btn.closest('iam-table')){
-
-          let container = btn.closest('iam-table').parentNode.getBoundingClientRect();
+        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;`)
+        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();
-      let popoverBottom = boundingRec.bottom - window.scrollY;
-      let windowPos = window.innerHeight - window.scrollY;
-      if(popoverBottom > windowPos){
-
-        let currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style')+' ' : '';
-        popover.setAttribute('style',currentStyle+`transform: translate(0, calc(-100% - 4rem))`);
+      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();
-        let popoverTop = boundingRec.top - window.scrollY;
+        const popoverTop = boundingRec.top - window.scrollY;
 
-        if(popoverTop < 100)
-          popover.removeAttribute('style');
+        if (popoverTop < 100) popover.removeAttribute('style');
       }
 
       window.dataLayer = window.dataLayer || [];
-      
+
       window.dataLayer.push({
-        "event": dataEvent,
-        "id": btn.textContent
+        event: dataEvent,
+        id: btn.textContent,
       });
-    };
+    }
 
     // Close popovers when clicked away
-    if (event && event.target instanceof HTMLElement && !event.target.closest('dialog[open]') && !event.target.closest('.dialog__wrapper > button')){
-      
-      if(document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]'))
+    if (
+      event &&
+      event.target instanceof HTMLElement &&
+      !event.target.closest('dialog[open]') &&
+      !event.target.closest('.dialog__wrapper > button')
+    ) {
+      if (document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]'))
         document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]').close();
 
-      Array.from(document.querySelectorAll('.dialog__wrapper:not([data-keep-open]) > button')).forEach((btnElement,index) => {
-        btnElement.removeAttribute('aria-expanded');
-      });
+      Array.from(document.querySelectorAll('.dialog__wrapper:not([data-keep-open]) > button')).forEach(
+        (btnElement, index) => {
+          btnElement.removeAttribute('aria-expanded');
+        }
+      );
     }
   });
 
-  return null
-}
-
-export const createDialog = (dialog) => { 
+  return null;
+};
 
+export const createDialog = (dialog) => {
   // If you are using Vue eevents and bindings its recommended to add in the .mh-lg div manually to the dialog
-  if(!dialog.querySelector(':scope .mh-lg') && !dialog.querySelector('iam-multi-step')){
+  if (!dialog.querySelector(':scope .mh-lg') && !dialog.querySelector('iam-multi-step')) {
     dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
 
-    let dialogContent = dialog.querySelector('.mh-lg');
-    let titleElement = dialog.querySelector('.mh-lg :is(.h1,.h2,.h3,.h4,.h5,.h6)');
+    const dialogContent = dialog.querySelector('.mh-lg');
+    const titleElement = dialog.querySelector('.mh-lg :is(.h1,.h2,.h3,.h4,.h5,.h6)');
 
-    if(titleElement){
-        
-      let optionalElement = titleElement.previousSibling;
+    if (titleElement) {
+      const optionalElement = titleElement.previousSibling;
 
       dialogContent.before(titleElement);
-      
-      if(optionalElement)
-        titleElement.before(optionalElement);
+
+      if (optionalElement) titleElement.before(optionalElement);
     }
   }
 
   // Create close button is needed
-  if(!dialog.querySelector(':scope > button:first-child'))
+  if (!dialog.querySelector(':scope > button:first-child'))
     dialog.insertAdjacentHTML('afterbegin', `<button class="dialog__close">Close</button>`);
+};
 
-}
-
-export default extendDialogs;
+export default extendDialogs;

package/assets/ts/modules/drawer.ts

@@ -1,17 +1,15 @@
 // @ts-nocheck
 const drawer = (element) => {
-
-  const observer = new IntersectionObserver( 
-
-    function([e]){
-      e.target.classList.toggle("in-view", e.intersectionRatio > 0)
-      document.getElementById('showDrawer').checked = false
+  const observer = new IntersectionObserver(
+    function ([e]) {
+      e.target.classList.toggle('in-view', e.intersectionRatio > 0);
+      document.getElementById('showDrawer').checked = false;
     },
     { threshold: [1] }
   );
 
-  const el = document.getElementById('drawer-end')
+  const el = document.getElementById('drawer-end');
   observer.observe(el);
-}
+};
 
-export default drawer
+export default drawer;