@iamproperty/components 5.6.1-beta11 → 5.6.1-beta13

package/assets/ts/modules/fileupload.ts

@@ -12,6 +12,20 @@ function fileupload(fileupload: Element, wrapper: Element) {
   const cloneInput = input.cloneNode();
   dropArea.append(cloneInput);
 
+  let checkFileExt = function(filename){
+
+    if(!input.hasAttribute('accept'))
+      return true;
+
+    const nameExtension = filename.split('.').pop();
+    const acceptedTypes = input.getAttribute('accept');
+
+    if(acceptedTypes.includes(nameExtension))
+      return true;
+  
+    return false;
+  }
+
   wrapper.addEventListener('click', (event) => {
 
     if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')){
@@ -19,7 +33,10 @@ function fileupload(fileupload: Element, wrapper: Element) {
       const button = event.target.closest('.btn-primary');
 
       // If the input allows multiples then use the buffer clone input
-      const inputTrigger = cloneInput;
+      
+      errorMsgExt.classList.remove('d-block');
+      errorMsgSize.classList.remove('d-block');
+      const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;
 
       inputTrigger.click();
     }
@@ -29,7 +46,6 @@ function fileupload(fileupload: Element, wrapper: Element) {
 
     if (event && event.target instanceof HTMLElement && event.target.closest('.files button')){
 
-
       const dt = new DataTransfer();
       const { files } = input;
       const button = event.target.closest('.files button');
@@ -44,74 +60,51 @@ function fileupload(fileupload: Element, wrapper: Element) {
       
       input.files = dt.files // Assign the updates list
 
-
-      if(input.files.length == 0){
-        const emptyEvent = new Event('empty');
-        fileupload.dispatchEvent(emptyEvent);
-      }
-
       const changeEvent = new Event('change');
       input.dispatchEvent(changeEvent);
-      
-      const elementChangeEvent = new Event('elementChange');
-      fileupload.dispatchEvent(elementChangeEvent);
     }
   });
 
-
-  let checkFileExt = function(filename){
-
-    if(!input.hasAttribute('accept'))
-      return true;
-
-    const nameExtension = filename.split('.').pop();
-    const acceptedTypes = input.getAttribute('accept');
-
-    if(acceptedTypes.includes(nameExtension))
-      return true;
-  
-    return false;
-  }
-
   // Buffer input change event
   cloneInput.addEventListener('change', (event) => {
 
-    errorMsgExt.classList.remove('d-block');
-    errorMsgSize.classList.remove('d-block');
-    const filesArray = [...input.files, ...cloneInput.files];
-    
-    let fileNames = [];
-
-    const dt = new DataTransfer();
+    if(input.hasAttribute('multiple')){
 
-    for (let i = 0; i < filesArray.length; i++) {
-      const file = filesArray[i]
+      const filesArray = [...input.files, ...cloneInput.files];
+      
+      let fileNames = [];
 
-      const size = file.size/1000;
+      const dt = new DataTransfer();
 
-      if(!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize) && checkFileExt(file.name))
-        dt.items.add(file) // here you exclude the file. thus removing it.
+      for (let i = 0; i < filesArray.length; i++) {
+        const file = filesArray[i]
 
+        const size = file.size/1000;
 
-      if(!checkFileExt(file.name)){
-        errorMsgExt.classList.add('d-block');
-      }
+        if(!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize) && checkFileExt(file.name))
+          dt.items.add(file) // here you exclude the file. thus removing it.
+  
+  
+        if(!checkFileExt(file.name)){
+          errorMsgExt.classList.add('d-block');
+        }
+  
+        if(size > maxSize){
+          errorMsgSize.classList.add('d-block');
+        }
 
-      if(size > maxSize){
-        errorMsgSize.classList.add('d-block');
+        fileNames.push(file.name);
       }
 
-
-      fileNames.push(file.name);
+      input.files = dt.files;
+    }
+    else {
+      
+      input.files = cloneInput.files;
     }
 
-    input.files = dt.files;
-    
     const changeEvent = new Event('change');
     input.dispatchEvent(changeEvent);
-
-    const elementChangeEvent = new Event('elementChange');
-    fileupload.dispatchEvent(elementChangeEvent);
   });
 
 
@@ -132,23 +125,49 @@ function fileupload(fileupload: Element, wrapper: Element) {
 
   input.addEventListener('change', (event) => {
 
+    if(input.files.length == 1) {
+
+      let file = input.files[0];
+
+      const size = file.size/1000;
+
+      if(!checkFileExt(file.name)){
+        errorMsgExt.classList.add('d-block');
+
+        const dt = new DataTransfer();
+        input.files = dt.files;
+      }
+      if(size > maxSize){
+        errorMsgSize.classList.add('d-block');
+
+        const dt = new DataTransfer();
+        input.files = dt.files;
+      }
+    }
+    
     // Reset
     filesWrapper.innerHTML = '';
 
-    for (const file of input.files)
+    for (const file of input.files){
       filesWrapper.innerHTML += `<span class="file">${file.name} <button data-file="${file.name}">Remove</button></span>`;
+    }
+
+    const elementChangeEvent = new CustomEvent('elementchange', {detail: {"files": input.files}});
+    fileupload.dispatchEvent(elementChangeEvent);
+
+    if(input.files.length == 0){
+      const emptyEvent = new CustomEvent('empty');
+      fileupload.dispatchEvent(emptyEvent);
+    }
   });
 
   if(fileupload.hasAttribute('data-filename')){
     
-    filesWrapper.innerHTML = '';
-
     let filename = fileupload.getAttribute('data-filename');
 
     if(filename)
       filesWrapper.innerHTML += `<span class="file">${filename} <button data-file="${filename}">Remove</button></span>`;
   }
-
 }
 
-export default fileupload;
+export default fileupload;

package/dist/components.es.js

@@ -453,7 +453,7 @@ const N = /* @__PURE__ */ m(ne, [["render", Le]]), Se = {
   },
   created() {
     this.$nextTick(function() {
-      import("./fileupload.component.min-d04c9cbf.mjs").then((t) => {
+      import("./fileupload.component.min-1941bab6.mjs").then((t) => {
         window.customElements.get("iam-fileupload") || window.customElements.define("iam-fileupload", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -483,7 +483,7 @@ const qe = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./accordion.component.min-0f3749d3.mjs").then((t) => {
+      import("./accordion.component.min-9c045157.mjs").then((t) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -619,7 +619,7 @@ const Va = /* @__PURE__ */ m(ze, [["render", Be]]), Oe = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./carousel.component.min-f4ba4195.mjs").then((t) => {
+      import("./carousel.component.min-dbd0a1ae.mjs").then((t) => {
         window.customElements.get("iam-carousel") || window.customElements.define("iam-carousel", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -646,7 +646,7 @@ const Fa = /* @__PURE__ */ m(Oe, [["render", Ue]]), We = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./header.component.min-0983036c.mjs").then((t) => {
+      import("./header.component.min-6ce9f8cf.mjs").then((t) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1042,7 +1042,7 @@ const Ua = /* @__PURE__ */ m(yt, [["render", Et]]), Ht = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-8947100c.mjs").then((t) => {
+      import("./nav.component.min-2ee34530.mjs").then((t) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1162,7 +1162,7 @@ const Xt = {
   name: "Tabs",
   created() {
     this.$nextTick(function() {
-      import("./tabs.component.min-22fd4142.mjs").then((t) => {
+      import("./tabs.component.min-90dcc089.mjs").then((t) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1309,7 +1309,7 @@ function pa(t, a, e, i, r, s) {
 }
 const Za = /* @__PURE__ */ m(ma, [["render", pa]]);
 /*!
-  * iamKey v5.6.1-beta11
+  * iamKey v5.6.1-beta13
   * Copyright 2022-2024 iamproperty
   */
 function ha(t, a) {
@@ -1479,7 +1479,7 @@ const ts = /* @__PURE__ */ m($a, [["render", ka]]), Aa = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./actionbar.component.min-0ca7ff8f.mjs").then((t) => {
+      import("./actionbar.component.min-4314469e.mjs").then((t) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1494,7 +1494,7 @@ function xa(t, a, e, i, r, s) {
 }
 const as = /* @__PURE__ */ m(Aa, [["render", xa]]);
 /*!
-  * iamKey v5.6.1-beta11
+  * iamKey v5.6.1-beta13
   * Copyright 2022-2024 iamproperty
   */
 class R extends HTMLElement {
@@ -1619,7 +1619,7 @@ const ss = /* @__PURE__ */ m(Sa, [["render", qa]]), Ta = {
   name: "Address Lookup",
   mounted() {
     this.$nextTick(function() {
-      import("./address-lookup.component.min-c3186305.mjs").then((t) => {
+      import("./address-lookup.component.min-d3b27db0.mjs").then((t) => {
         window.customElements.get("iam-address-lookup") || window.customElements.define("iam-address-lookup", t.default);
       }).catch((t) => {
         console.log(t.message);