@iamproperty/components 5.6.1-beta4 → 5.6.1-beta6

package/assets/sass/_components.scss

@@ -40,4 +40,44 @@ iam-search .optional-text {
   .tabs {
     --tabs-gradient: linear-gradient(90deg, rgba(38,38,38,0), rgba(38,38,38,1));
   }
+}
+
+// Table dark mode support
+iam-table {
+
+  tbody tr {
+    
+    @include dark-mode(){
+      
+      --hover-background: var(--colour-canvas);
+
+      &:is(:hover,:focus-within,.hover) {
+        background: var(--row-bg);
+      }
+    }
+  }
+}
+
+@container (width > 23.4375em) {
+
+  iam-table.table--cta:not(.table--loading):not(:has(tr:first-child td:first-child:last-child)) {
+
+    tr > *:not(:first-child):last-child {
+
+      @media screen and (prefers-color-scheme: dark) {
+        
+        background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
+      }
+    }
+  }
+}
+
+iam-table {
+
+  tr:has([type="checkbox"]:checked){
+
+    @include dark-mode(){
+      --row-bg: #000000;
+    }
+  }
 }

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/sass/components/multiselect.scss

@@ -127,12 +127,16 @@ button {
 }
 
 
-
 .wrapper:is(:focus-within) .dropdown {
 
   display: var(--display-panel, none);
 }
 
+.wrapper .dropdown:hover {
+
+  display: var(--display-panel, none);
+}
+
 
 // Inline edit
 :host-context(:focus-within) {

package/assets/sass/components/table.global.scss

@@ -23,15 +23,6 @@ iam-table {
       --row-bg: var(--hover-background);
       background: var(--row-bg);
     }
-
-    @include dark-mode(){
-      
-      --hover-background: var(--colour-canvas);
-
-      &:is(:hover,:focus-within,.hover) {
-        background: var(--row-bg);
-      }
-    }
   }
 
   &[data-expandable] [data-expand-button][aria-expanded] {
@@ -219,10 +210,6 @@ iam-table {
       cursor: default;
       padding-bottom: 0;
 
-      @media screen and (prefers-color-scheme: dark) {
-        
-      background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
-      }
       a {
         white-space: nowrap;
         padding-right: 0.2rem;
@@ -434,10 +421,6 @@ iam-table {
 
   tr:has([type="checkbox"]:checked){
     --row-bg: #E0E0E0;
-
-    @include dark-mode(){
-      --row-bg: #000000;
-    }
   }
 }
 

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;