@iamproperty/components 5.6.1-beta3 → 5.6.1-beta5

package/assets/sass/components/collapsible-side.scss

@@ -185,7 +185,14 @@
 ::slotted(*[slot="menu"]) {
   padding-left: rem(24);
 
+
+
+  
   @include media-breakpoint-up(sm) {
+    padding-left: rem(40);
+  }
+  
+  @include media-breakpoint-up(md) {
     padding-left: var(--container-padding-x-md);
   }
 }
@@ -215,7 +222,7 @@
     padding-left: rem(40)!important;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(md) {
     padding-left: var(--container-padding-x-md)!important;
   }
   &:after {

package/assets/sass/components/fileupload.scss

@@ -130,6 +130,7 @@
     user-select: none;
     max-width: 100%;
     min-width: 100%;
+    margin-bottom: 1rem;
 
     &.focus {
       

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/collapsible-side/collapsible-side.component.ts

@@ -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

@@ -28,7 +28,7 @@ class iamFileupload extends HTMLElement {
     <div class="file-upload">
       <span class="file-upload__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"><slot name="btn"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>
       <div class="drop-area"></div>
       <hr/>
       <slot></slot>

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

@@ -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/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('input[type="radio"]') && !event.target.closest('input[type="file"]') && !event.target.closest('iam-fileupload')) // Weird bug when interacting with radio input fields within dialogs cuases it to close
             dialog.close()
           
           window.dataLayer = window.dataLayer || [];

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;