@iamproperty/components 5.6.1-beta2 → 5.6.1-beta20

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -57,19 +57,19 @@ class iamActionbar extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="actionbar__wrapper">
     
-      <div class="actionbar">
+      <div class="actionbar" part="actionbar">
         <slot name="selectall"></slot>
         <div class="safe-area">
           <slot></slot>
           <div class="body">
             <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
               <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
-              <dialog class="dialog--list">
+              <dialog class="dialog--list" part="overflow">
                 <slot name="overflow"></slot>
                 <slot name="menu"></slot>
               </dialog>
             </div>
-            <button class="btn btn-secondary btn-compact btn-sm fa-search" data-search="">Search</button>
+            <button class="btn btn-secondary btn-compact btn-sm fa-search" data-search="" part="search-btn">Search</button>
           </div>
         </div>
       </div>
@@ -79,7 +79,7 @@ class iamActionbar extends HTMLElement {
           <div class="body">
             <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
               <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
-              <dialog class="dialog--list">
+              <dialog class="dialog--list" part="selected-overflow">
                 <slot name="selected-overflow"></slot>
               </dialog>
             </div>
@@ -89,10 +89,10 @@ class iamActionbar extends HTMLElement {
       <div class="actionbar--search">
         <button data-search class="btn btn-compact fa-xmark-large btn-secondary m-0" >Close</button>
 
-        <div class="search-wrapper">
+        <div class="search-wrapper" part="search">
           <label for="search" class="visually-hidden">Input field label</label>
-          <button class="suffix"><i class="fa-regular fa-search"></i></button>
-          <input type="text" id="search" name="search" required="">
+          <button class="suffix" part="search-btn"><i class="fa-regular fa-search"></i></button>
+          <input type="text" id="search" name="search" required="" part="search-input">
         </div>
 
       </div>

package/assets/ts/components/address-lookup/address-lookup.component.ts

@@ -41,17 +41,18 @@ class iamAddressLookup extends HTMLElement {
         </label>
 
         </div>
-        <button class="btn btn-tertiary switch-to-manual-btn">Or enter address manually</button>
+        <button class="btn btn-tertiary switch-to-manual-btn" type="button">Or enter address manually</button>
       </div>
       <datalist id="address-lookup__addressess"></datalist>
 
       <div class="manual-address pb-2 js-hide">
         <slot></slot>
-        <button class="btn btn-tertiary switch-to-lookup-btn">Use postcode lookup</button>
+        <button class="btn btn-tertiary switch-to-lookup-btn" type="button">Use postcode lookup</button>
+        <slot name="after"></slot>
       </div>
       <div class="pre-filled pb-2 js-hide">
         <strong class="title text-primary d-block"></strong>
-        <p><span class="pre-filled-address"></span><button class="text-primary text-decoration-none ms-1 cursor-pointer"><i class="fa-regular fa-pen-to-square"></i><span class="visually-hidden">Edit</span></button><slot name="prefilled"></slot></p>
+        <p><span class="pre-filled-address"></span><button class="text-primary text-decoration-none ms-1 cursor-pointer" type="button"><i class="fa-regular fa-pen-to-square"></i><span class="visually-hidden">Edit</span></button><slot name="prefilled"></slot></p>
       </div>
     </div>
     `;
@@ -60,6 +61,7 @@ class iamAddressLookup extends HTMLElement {
 
 	async connectedCallback() {
 
+    const component = this;
     const wrapper = this.shadowRoot.querySelector('.wrapper');
     const lookup = this.shadowRoot.querySelector('[name="postcode"]');
     const lookupWrapper = this.shadowRoot.querySelector('.postcode-lookup');
@@ -202,14 +204,19 @@ class iamAddressLookup extends HTMLElement {
           Object.keys(values).forEach((key, index) => {
 
             let value = values[key];
-            if(this.querySelector(`[data-name="${key}"]`))
+            if(this.querySelector(`[data-name="${key}"]`) && value != '')
               this.querySelector(`[data-name="${key}"]`).value = value;
-            else if(this.querySelector(`[name="${key}"]`))
+            else if(this.querySelector(`[data-name-alt="${key}"]`) && value != '')
+              this.querySelector(`[data-name-alt="${key}"]`).value = value;
+            else if(this.querySelector(`[name="${key}"]`) && value != '')
               this.querySelector(`[name="${key}"]`).value = value;
+            
+            if(this.querySelector(`[data-name-2="${key}"]`))
+              this.querySelector(`[data-name-2="${key}"]`).value += ' '+value;
           });
 
           // Focus on first input
-          this.querySelector('[data-name="address_1"]').focus();
+          this.querySelector('[name]').focus();
 
           Array.from(this.querySelectorAll('[data-required]')).forEach((input, index) => {
             input.setAttribute('required','true');
@@ -268,17 +275,24 @@ class iamAddressLookup extends HTMLElement {
             else {
               let values = JSON.stringify(address);
 
-              let itemString = '';
+              if(component.hasAttribute('data-display-text')){
 
-              for (const [key, value] of Object.entries(address)) {
-
-                if(key == "address_number_name")
-                  itemString += `${value} `;
-                else if(key != "postcode" && key != "address_title")
-                  itemString += `${value}${(/^-?\d+$/.test(value)?'':',')} `;
+                listString += `<option value="${address[component.getAttribute('data-display-text')]}, ${postcode}" data-values='${values}'></option>`;
+              }
+              else {
+
+                let itemString = '';
+                for (const [key, value] of Object.entries(address)) {
+
+                  if(key == "address_number_name")
+                    itemString += `${value} `;
+                  else if(key != "postcode" && key != "address_title")
+                    itemString += `${value}${(/^-?\d+$/.test(value)?'':',')} `;
+                }
+                
+                listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
               }
               
-              listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
             }
 
 

package/assets/ts/components/card/card.component.ts

@@ -33,17 +33,17 @@ class iamCard extends HTMLElement {
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="card ${classList}" tabindex="0" part="card">
-      ${this.hasAttribute('data-image') ? `<div class="card__head"><img src="${this.getAttribute('data-image')}" alt="" loading="lazy" /><div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
-      <div class="card__body">
+    ${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class="card__head">${this.hasAttribute('data-image') ? `<img src="${this.getAttribute('data-image')}" alt="" loading="lazy" />` : ``} <div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
+      <div class="card__body" part="body">
       ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
-      ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
+      ${!this.hasAttribute('data-image') && !this.hasAttribute('data-record') && this.querySelector('[slot="badges"]') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
       ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
         <slot></slot>
       ${this.hasAttribute('data-total') ? `<div class="card__total">${this.getAttribute('data-total')}</div>` : ''}
       </div>
       ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
       <slot name="checkbox"></slot>
-      <div class="card__footer">
+      <div class="card__footer" part="footer">
         <slot name="footer"></slot>
         <slot name="btns"></slot>
         ${this.hasAttribute('data-cta') ? `<span class="link d-inline-block pt-0 mb-0">${this.getAttribute('data-cta')}</span>` : ''}
@@ -58,13 +58,21 @@ class iamCard extends HTMLElement {
   }
 
 	connectedCallback() {
-
     this.classList.add('loaded');
-    
+
     // Mimic clicking the parent node so the focus and target events can be on the card
     const parentNode = this.parentNode.closest('a, button, label, router-link')
     const card = this.shadowRoot.querySelector('.card')
     const btnCompact =  this.shadowRoot.querySelector('.btn-compact');
+    const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';
+
+    /* 
+      If the parentNode is actually just a div, 
+      we don't want to look for anything or add events 
+    */
+    if (!parentNode) {
+      return false;
+    }
 
     if(parentNode)
       parentNode.setAttribute('tabindex','-1');
@@ -177,6 +185,7 @@ class iamCard extends HTMLElement {
           window.location = addLocation;
       });
     }
+
   }
 
   static get observedAttributes() {

package/assets/ts/components/carousel/carousel.component.ts

@@ -32,12 +32,12 @@ class iamCarousel extends HTMLElement {
           <slot></slot>
         </div>
  
-        <div class="carousel__controls">
+        <div class="carousel__controls" part="controls">
           
         </div>
 
-        <button class="btn btn-prev" data-go="0" disabled>Prev</button>
-        <button class="btn btn-next" data-go="2">Next</button>
+        <button class="btn btn-prev" data-go="0" disabled  part="prev">Prev</button>
+        <button class="btn btn-next" data-go="2" part="next">Next</button>
 
       </div>
     </div>
@@ -49,6 +49,8 @@ class iamCarousel extends HTMLElement {
     
     const carouselElement = this.shadowRoot.querySelector('.carousel');
     const row = this.querySelector('.row');
+    const thumbnailImages = JSON.parse(this.dataset.thumbnails);
+
     const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
 
     let itemCount = this.querySelectorAll(':scope > .row > .col').length
@@ -61,10 +63,24 @@ class iamCarousel extends HTMLElement {
     if(this.classList.contains('hide-controls'))
       carouselElement.classList.add('hide-controls');
 
+    if (thumbnailImages?.length) {
+      carouselControls.classList.add('thumbnails');
+    }
+
     // populate the pips
     let pips = "";
     for (let i = 1; i <= itemCount; i++) {
-      pips += `<button class="control-${i}" data-slide="${i}" ${i == 1 ? "aria-current":""}>Slide ${i}</button>`;
+      let pipContent = null;
+      let pipClass = '';
+
+      if (thumbnailImages.length) {
+        pipClass = 'has-thumbnail';
+        pipContent = `<img src="${thumbnailImages[i - 1].src}" alt="Slide ${i}" height="148"/>`;
+      } else {
+        pipContent = `Slide ${i}`;
+      }
+
+      pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? "aria-current":""}>${pipContent}</button>`;
     }
     carouselControls.innerHTML = pips;
 

package/assets/ts/components/collapsible-side/collapsible-side.component.ts

@@ -26,14 +26,14 @@ class iamCollapsibleSideMenu extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
       <div class="container" part="container">
 
-        <div class="side-menu">
-          <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse">Open or close Collapsible menu</button>
-          <div class="side-menu-content closed">
+        <div class="side-menu" part="side-menu">
+          <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse" part="btn">Open or close Collapsible menu</button>
+          <div class="side-menu-content closed" part="side-menu-content">
             <slot name="menu"></slot>
           </div>
         </div>
 
-        <div class="main-content">
+        <div class="main-content" part="main-content">
           <slot></slot>
         </div>
 
@@ -67,7 +67,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
     }
     
 
-    if(this.hasAttribute('open')){
+    if(this.hasAttribute('open') && window.innerWidth > 992){
       sideMenu.classList.add('open'); 
       button.setAttribute('aria-expanded', true);
     }

package/assets/ts/components/fileupload/fileupload.component.ts

@@ -26,13 +26,15 @@ class iamFileupload extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="file-upload">
-      <span class="file-upload__title">Upload file</span>
+      <span class="file-upload__title" part="title">Upload file</span>
       <p class="helper-text"><slot name="helper"></slot></p>
-      <button class="btn btn-primary"><slot name="btn"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>
+      <button class="btn btn-primary" type="button" part="button"><slot name="btn"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>
       <div class="drop-area"></div>
       <hr/>
       <slot></slot>
-      <div class="files"><slot name="files"></slot></div>
+      <div class="files" part="files"><slot name="files"></slot></div>
+      <span class="invalid-feedback ext">Some files did not match the accpeted extension type.</span>
+      <span class="invalid-feedback size">Some files Were too large to upload.</span>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -51,6 +53,30 @@ class iamFileupload extends HTMLElement {
 
     fileupload(this,wrapper);
   }
+
+  
+  static get observedAttributes() {
+    return ["data-filename"];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal) {
+
+    switch (attrName) {
+      case "data-filename": {
+        if(oldVal != newVal){
+
+          const filesWrapper = this.shadowRoot.querySelector('.files');
+          
+          filesWrapper.innerHTML = `<span class="file">${newVal} <button data-file="${newVal}">Remove</button></span>`;
+
+        }
+        break;
+      }
+    }
+  }
+
+
+  
 }
 
 export default iamFileupload;

package/assets/ts/components/filterlist/filterlist.component.ts

@@ -40,9 +40,9 @@ class iamFilterlist extends HTMLElement {
     <div class="form-control__wrapper">
       <label for="search" class="visually-hidden">Search</label>
       <span class="suffix" role="presentation"><slot name="icon"></slot></span>
-      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" />
+      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" part="search-input" />
     </div>
-    <div class="list__wrapper">
+    <div class="list__wrapper" part="wrapper">
       <slot></slot>
     </div>
     `;

package/assets/ts/components/inline-edit/inline-edit.component.ts

@@ -26,10 +26,10 @@ class iamInlineEdit extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     
     <slot></slot>
-    <div class="btns">
-      <button class="btn btn-action" id="save"><i class="fa-regular fa-save m-0"></i> Save</button><button class="btn btn-action" id="cancel">Cancel</button>
+    <div class="btns" part="btns">
+      <button class="btn btn-action" id="save" part="save-btn"><i class="fa-regular fa-save m-0"></i> Save</button><button class="btn btn-action" id="cancel" part="cancel-btn">Cancel</button>
     </div>
-    <div class="status pe-none">
+    <div class="status pe-none" part="status">
       <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saving"><i class="fa-regular fa-spinner fa-spin me-1"></i> Saving...</span>
       <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saved"><i class="fa-regular fa-check me-1"></i> Saved</span>
       <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="notsaved"><i class="fa-regular fa-circle-info me-1"></i> Not Saved</span>

package/assets/ts/components/multiselect/multiselect.component.ts

@@ -29,9 +29,9 @@ class iamMultiselect extends HTMLElement {
     <div class="wrapper">
       
       <slot name="checked"></slot>
-      <input name="search" id="search" autocomplete="off" required />
+      <input name="search" id="search" autocomplete="off" required part="search-input"/>
       <span class="admin-panel feedback">This field is required</span>
-      <div class="admin-panel dropdown">
+      <div class="admin-panel dropdown" part="dropdown">
         <slot></slot>
       </div>
       <button id="clear"><span class="visually-hidden">Clear</span></button>
@@ -142,8 +142,9 @@ class iamMultiselect extends HTMLElement {
 
         let checkbox = label.querySelector('input');
         let searchValue = checkbox.value;
+        let labelText = label.textContent;
         
-        if(searchValue.toLowerCase().includes(search.value.toLowerCase())){
+        if(searchValue.toLowerCase().includes(search.value.toLowerCase()) || labelText.toLowerCase().includes(search.value.toLowerCase())){
           label.removeAttribute('slot')
         }
         else {

package/assets/ts/components/notification/notification.component.ts

@@ -41,7 +41,7 @@ class iamNotification extends HTMLElement {
     <div class="notification">
       <div class="notification__icon"><slot name="icon"></slot></div>
       <div class="notification__inner"><div class="notification__text"><slot></slot></div>${ buttons.length ? `<div class="notification__btns"><slot name="btns"></slot></div>` : '' }</div>
-      ${ this.hasAttribute('data-dismiss') ? `<div class="notification__dismiss"><button data-dismiss-button>Dismiss</button></div>` : ''}
+      ${ this.hasAttribute('data-dismiss') ? `<div class="notification__dismiss"><button data-dismiss-button part="dismiss-btn">Dismiss</button></div>` : ''}
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));

package/assets/ts/components/table/table.component.ts

@@ -242,7 +242,10 @@ class iamTable extends HTMLElement {
 
 
       tableModule.makeTableFunctional(this.table, this.form, this.pagination, this);
-      tableModule.filterTable(this.table, this.form,this);
+      
+      if(!this.hasAttribute('data-no-submit'))
+        tableModule.filterTable(this.table, this.form,this);
+
       tableModule.populateDataQueries(this.table, this.form);
     }
 
@@ -256,6 +259,22 @@ class iamTable extends HTMLElement {
 
     });
 
+    // Push up the pagination events
+    this.pagination.addEventListener('update-show', (event) => {
+
+      let show = event.detail.show;
+
+      const updateEvent = new CustomEvent("update-show", { detail: { show: show } });
+      this.dispatchEvent(updateEvent);
+    });
+
+    this.pagination.addEventListener('update-page', (event) => {
+
+      let page = event.detail.page;
+
+      const updateEvent = new CustomEvent("update-page", { detail: { page: page } });
+      this.dispatchEvent(updateEvent);
+    });
   }
 
 
@@ -265,6 +284,10 @@ class iamTable extends HTMLElement {
   
   attributeChangedCallback(attrName, oldVal, newVal) {
     
+    if(this.hasAttribute('data-no-submit')){
+      return false;
+    }
+
     this.pagination = this.shadowRoot.querySelector('iam-pagination');
 
     switch (attrName) {

package/assets/ts/modules/carousel.ts

@@ -5,8 +5,8 @@ function carousel(carouselElement, row) {
 
   let carouselInner = carouselElement.querySelector('.carousel__inner');
   let carouselControls = carouselElement.querySelector('.carousel__controls');
-  let itemCount = row.querySelectorAll('.col').length;
-
+  let itemCount = row.querySelectorAll(':scope > .col').length;
+  
   // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
   carouselInner.addEventListener('scroll', function(e){
     clearTimeout(scrollTimeout);
@@ -16,11 +16,20 @@ function carousel(carouselElement, row) {
       let scrollWidth = carouselInner.scrollWidth;
       let scrollLeft = carouselInner.scrollLeft;
       let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-      let lastItemOffset = row.querySelector('.col:last-child').offsetLeft + 50;
+     
+      let itemWidth = row.querySelector(':scope > .col').scrollWidth;
+      let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+      let lastItemInView = carouselInner.scrollLeft + scrollArea >= (lastItemOffset + 100);
+
+      let visibleItems = Math.round(scrollArea / itemWidth);
 
-      if(carouselInner.scrollLeft + scrollArea >= lastItemOffset)
-        targetSlide = itemCount;
+      //Check if theres room for more slides than we have
+      let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;
 
+      if(leftOverSpace > 0 && lastItemInView){
+        targetSlide = (Math.floor(itemCount / visibleItems) * visibleItems) + 1;
+      } 
+      
       Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button, index) => {
         button.removeAttribute('aria-current');
       });
@@ -34,7 +43,7 @@ function carousel(carouselElement, row) {
         carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
 
       // Disable the next button if the last item is in view
-      if(targetSlide == itemCount)
+      if(targetSlide > (itemCount - visibleItems))
         carouselElement.querySelector('.btn-next').setAttribute('disabled','disabled');
       else
         carouselElement.querySelector('.btn-next').removeAttribute('disabled');
@@ -56,11 +65,11 @@ function carousel(carouselElement, row) {
         });
         target.setAttribute('aria-current', true);
         
-        const el = row.querySelector(`*:nth-child(${target.getAttribute('data-slide')})`);
+        const el = row.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
 
         carouselInner.scroll({
           top: 0,
-          left: el.offsetLeft, 
+          left: el.offsetLeft - 100, 
           behavior: 'smooth'
         });
 
@@ -71,11 +80,25 @@ function carousel(carouselElement, row) {
   
   carouselElement.addEventListener('click', function(e){
 
+    let scrollArea = carouselInner.clientWidth;
+    let scrollWidth = carouselInner.scrollWidth;
+    let itemWidth = row.querySelector(':scope > .col').scrollWidth;
+
+    let visibleItems = Math.round(scrollArea / itemWidth);
+
+    let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+    let lastItemInView = carouselInner.scrollLeft + scrollArea >= (lastItemOffset + 100);
+
+    //Check if theres room for more slides than we have
+    let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;
+
+    let movement = lastItemInView && leftOverSpace > 0 ? leftOverSpace * itemWidth : carouselInner.clientWidth;
+
     for (var target = e.target; target && target != this; target = target.parentNode) {
       if (typeof target.matches == "function" && target.matches('.btn-next, .btn-prev')) {
         
         e.preventDefault();
-        let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - carouselInner.clientWidth : carouselInner.scrollLeft + carouselInner.clientWidth;
+        let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - movement : carouselInner.scrollLeft + carouselInner.clientWidth;
         
         carouselInner.scroll({
           top: 0,

package/assets/ts/modules/dialogs.ts

@@ -72,6 +72,14 @@ const extendDialogs = (body) => {
         btnElement.classList.remove('active');
       });
 
+      let closeEvent = new CustomEvent('dialog-closed', {
+        bubbles: true,
+        cancelable: true,
+        detail: { modalId: dialog.id }
+      });
+
+      event.target.dispatchEvent(closeEvent);
+
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
         "event": "closeModal",
@@ -111,7 +119,7 @@ const extendDialogs = (body) => {
 
         if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
 
-          if(!event.target.closest('input[type="radio"]')) // Weird bug when interacting with radio input fields within dialogs cuases it to 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 || [];

package/assets/ts/modules/dynamicEvents.ts

@@ -115,6 +115,9 @@ const runEvent = (element,event,eventType) => {
         element.setAttribute(event['attribute'],event['value']);
       });
       break;
+    case "focus":
+      document.querySelector(`${event['target']}`).focus();
+      break;
     case "removeAttribute":
       Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function(element,index){
         element.removeAttribute(event['attribute']);