@iamproperty/components 5.6.0 → 5.6.1-beta10

package/assets/sass/elements/progress.scss

@@ -18,12 +18,10 @@ progress {
   border: none;
 }
 
-progress:before {
-  content: attr(value)'%';
+label[data-percent]:has(progress):before {
+  content: attr(data-percent)'%';
   vertical-align: 0;
   line-height: 1;
-  
-  /*Position text over the progress bar */
   position:absolute;
   top: auto;
   left:auto;
@@ -33,6 +31,10 @@ progress:before {
   font-weight: bold;
 }
 
+progress[data-progress]:before {
+  content: attr(data-progress)'%';
+}
+
 progress::-webkit-progress-bar {
   background-color: var(--colour-light);
   border-radius: rem(5);
@@ -42,30 +44,170 @@ progress::-webkit-progress-value {
   border-radius: rem(5);
 }
 
+// #region inline progress
+:is(label, .label):has(.progress--inline){ 
+
+  font-size: 1rem;
+  color: var(--colour-body);
+  
+  &:before {
+    bottom: -0.25em;
+  }
 
+  progress.progress--inline {
 
+    width: 100%;
 
-progress::-moz-progress-bar {
-  /* style rules */
+  }
 }
 
+// #endregion
 
-// #region inline progress
+// #region Circular
+label:has(.progress--circular){
 
-:is(label, .label):has(.progress--inline){ 
+  --max-width: #{rem(200)};
+  --pt: #{rem(90)};
+  --pt-percent: 45%;
+  --bar-width: #{rem(20)};
+  --value-fs: #{rem(48)};
+  --value-pb: #{rem(32)};
+  --label-fs: #{rem(18)};
 
-  font-size: 1rem;
-color: var(--colour-body);
-  
-  
-  progress.progress--inline {
+  position: relative;
+  z-index: 1;
+  max-width: var(--max-width);
+  margin-bottom: 2rem;
 
-    width: 100%;
+  padding-right: 0;
+  aspect-ratio: 1/1;
+  height: auto;
+  width: 100%;
+  text-align: center;
+  padding-top: min(calc(var(--pt-percent) + var(--value-pb)), calc(var(--pt) + var(--value-pb)));
+  padding-inline: var(--value-pb);
+
+  display: inline-block;
+  font-size: var(--label-fs);
+  line-height: 1;
+}
+
+label:has(.progress--circular.progress--md){
+  --max-width: #{rem(170)};
+  --pt: #{rem(76.5)};
+  --pt-percent: 45%;
+  --bar-width: #{rem(20)};
+  --value-pb: #{rem(24)};
+}
+
+label:has(.progress--circular.progress--sm){
+  --max-width: #{rem(120)};
+  --pt: #{rem(54)};
+  --pt-percent: 45%;
+  --bar-width: #{rem(16)};
+  --value-fs: #{rem(24)};
+
+  --value-pb: #{rem(16)};
+  --label-fs: #{rem(12)};
+}
+
+// Responsive-ish settings
+*:has(> label > .progress--circular){
   
-    &:before {
-      bottom: -0.25em;
-    }
+  container-type: inline-size;
+}
+
+@container (width <= 10.625rem) {
+
+  label:has(.progress--circular:not(.progress--sm):not(.progress--md)){
+    --max-width: #{rem(170)};
+    --pt: #{rem(76.5)};
+    --pt-percent: 45%;
+    --bar-width: #{rem(20)};
+    --value-pb: #{rem(24)};
+  }
+}
+
+@container (width <= 7.5rem) {
+
+  label:has(.progress--circular:not(.progress--sm):not(.progress--md)){
+  --max-width: #{rem(120)};
+  --pt: #{rem(54)};
+  --pt-percent: 45%;
+  --bar-width: #{rem(16)};
+  --value-fs: #{rem(24)};
+
+  --value-pb: #{rem(16)};
+  --label-fs: #{rem(12)};
   }
 }
 
+
+
+
+label:has(.progress--circular) + label:has(.progress--circular) {
+  margin-left: 2rem;
+}
+
+// Needed to allow it to be animated
+@property --progress {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
+.progress--circular {
+
+  --progress-shown: var(--progress, 0%);
+  position: absolute;
+  z-index: -2;
+  top: 0;
+  left: 0;
+  margin: 0;
+  background: red;
+  background: conic-gradient(var(--colour, var(--colour-info)) var(--progress-shown), var(--colour-light) var(--progress-shown) calc(100% - var(--progress-shown)));
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+  box-shadow: #{rem(3)} #{rem(3)} #{rem(6)} rgba(0, 0, 0, 20%);
+  transition: --progress 1s;
+}
+
+.progress--circular::-webkit-progress-bar,
+.progress--circular::-webkit-progress-value {
+  opacity: 0;
+}
+
+
+.progress--circular::-moz-progress-bar {
+  opacity: 0;
+}
+
+label[data-percent]:has(.progress--circular):before {
+
+  top: var(--pt-percent);
+  left:50%;
+  right:auto;
+  bottom: auto;
+  color: var(--colour-heading);
+  transform: translate(-50%,-50%);
+  font-size: var(--value-fs);
+  line-height: 1;
+  z-index: 2;
+  text-indent: 0;
+}
+
+label:has(.progress--circular):after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  aspect-ratio: 1/1;
+  width: calc(100% - var(--bar-width) - var(--bar-width));
+  background-color: var(--colour-canvas);
+  border-radius: 50%;
+}
+
 // #endregion

package/assets/sass/foundations/reboot.scss

@@ -182,12 +182,12 @@ details {
   var(--padding-inline) [container-end]
   var(--full-width-start) [full-width-end];
 
-  &:not(:has(.container:last-child)){
+  &:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)){
     padding-bottom: 1rem;
   }
 }
 
-main > :not(.full-width, .container, iam-header, [class*="bg-"]) {
+main > :not(.full-width, .container, iam-header, iam-collapsible-side, [class*="bg-"]) {
   grid-column: content;
 }
 
@@ -196,7 +196,7 @@ main > :is(.full-width, .container, iam-header) {
   grid-column: container;
 }
 
-main > :is(.full-width, [class*="bg-"]) {
+main > :is(.full-width, [class*="bg-"], iam-collapsible-side) {
   grid-column: full-width;
 }
 

package/assets/sass/foundations/root.scss

@@ -97,7 +97,7 @@ $root: ':root'!default;
 @include light-mode() {
 
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.invert-colours) {
+  html:not(.dark-theme) [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.invert-colours) {
 
     @each $color, $value in $theme-colors {
       --colour-#{$color}: #{$value};
@@ -120,7 +120,7 @@ $root: ':root'!default;
 @include dark-mode() {
 
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-  [class*="bg-"]:not(.bg-canvas):not(.bg-canvas-2) {
+  [class*="bg-"]:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light) {
 
     @include reset-colours();
     --colour-body: #{$primary};

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,17 @@ 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>
       </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>
     `;

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>` : ''}
@@ -65,6 +65,7 @@ class iamCard extends HTMLElement {
     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(parentNode)
       parentNode.setAttribute('tabindex','-1');
@@ -177,6 +178,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>

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

@@ -24,20 +24,20 @@ class iamCollapsibleSideMenu extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
-    <div class="container">
+      <div class="container" part="container">
 
-      <div class="side-menu">
-        <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm">Open or close Collapsible menu</button>
-        <div class="side-menu-content closed">
-          <slot name="menu"></slot>
+        <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>
 
-      <div class="main-content">
-        <slot></slot>
-      </div>
+        <div class="main-content" part="main-content">
+          <slot></slot>
+        </div>
 
-    </div>
+      </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
@@ -65,7 +65,13 @@ class iamCollapsibleSideMenu extends HTMLElement {
       this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('h4');
       this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('main-content__title');
     }
-      
+    
+
+    if(this.hasAttribute('open') && window.innerWidth > 992){
+      sideMenu.classList.add('open'); 
+      button.setAttribute('aria-expanded', true);
+    }
+
     // Open the menu
     button.addEventListener('click', (event) => {
 

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

@@ -26,13 +26,13 @@ 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>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));

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>
@@ -47,6 +47,7 @@ class iamInlineEdit extends HTMLElement {
     
     let label = this.querySelector('label');
     let input = this.querySelector('input, textarea, select');
+    let preview = this.querySelector('.preview');
 
     let statusSaving = this.shadowRoot.querySelector('#saving');
     let statusSaved = this.shadowRoot.querySelector('#saved');
@@ -92,8 +93,14 @@ class iamInlineEdit extends HTMLElement {
       input.blur();
       inlineEdit.blur();
 
-
       statusSaving.classList.remove('d-none');
+
+      if(preview){
+
+        console.log(input.value)
+
+        preview.innerHTML = input.value;
+      }
     });
 
     // Save
@@ -174,6 +181,10 @@ class iamInlineEdit extends HTMLElement {
           inlineEdit.dispatchEvent(saveEvent);
 
           statusSaving.classList.remove('d-none');
+              
+          if(preview){
+            preview.innerHTML = input.value;
+          }
         }
         else if(!inlineEdit.querySelector('.inline-feedback')){
           statusNotSaved.classList.remove('d-none');

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/modules/dialogs.ts

@@ -111,7 +111,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 || [];
@@ -130,12 +130,20 @@ const extendDialogs = (body) => {
     event.stopPropagation();
 
       let btn = event.target.closest('.dialog__wrapper > button');
-      let parent = event.target.closest('.dialog__wrapper > button').parentNode;
+      let parent = btn.parentNode;
       let dataEvent = "openPopover"
       let popover = parent.querySelector(':scope > dialog');
       
-      if(document.querySelector('*:not([data-keep-open]) > dialog[open]') && document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover)
-        document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
+
+      // 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,index) => {
@@ -227,7 +235,7 @@ 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.classList.contains('dialog--multi')){
+  if(!dialog.querySelector(':scope .mh-lg') && !dialog.classList.contains('dialog--multi')){
     dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
 
     let dialogContent = dialog.querySelector('.mh-lg');

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']);

package/assets/ts/modules/fileupload.ts

@@ -50,6 +50,9 @@ function fileupload(fileupload: Element, wrapper: Element) {
 
       const changeEvent = new Event('change');
       input.dispatchEvent(changeEvent);
+      
+      const elementChangeEvent = new Event('elementChange');
+      fileupload.dispatchEvent(elementChangeEvent);
     }
   });
 
@@ -121,20 +124,6 @@ function fileupload(fileupload: Element, wrapper: Element) {
       filesWrapper.innerHTML += `<span class="file">${filename} <button data-file="${filename}">Remove</button></span>`;
   }
 
-
-  // Change the filename
-  wrapper.addEventListener('click', (event) => {
-
-    if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')){
-
-      const button = event.target.closest('.btn-primary');
-
-      // If the input allows multiples then use the buffer clone input
-      const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;
-
-      inputTrigger.click();
-    }
-  });
 }
 
 export default fileupload;

package/assets/ts/modules/helpers.ts

@@ -100,6 +100,12 @@ export const addGlobalEvents = (body) => {
     }
   });
 
+  Array.from(document.querySelectorAll('label progress')).forEach((progress,index) => {
+    let label = progress.closest('label');
+
+    label.setAttribute('data-percent',progress.getAttribute('value'));
+  });
+
   return null
 }