@yoobic/yobi 8.5.0-2 → 8.5.0-20

package/dist/collection/components/form/form-uploader/form-uploader.js

@@ -1,6 +1,6 @@
 import { FormFieldType } from '@shared/interfaces';
-import { getMimeType, isFile, isWeb, translate, urlToFileBlob } from '@shared/utils';
-import { Component, Element, Event, h, Host, Method, Prop, Watch } from '@stencil/core';
+import { getFileByPath, getMimeType, isBlob, isFile, isNativeFilePath, isNativeMobile, isWeb, saveToLocalFile, translate, urlToFileBlob } from '@shared/utils';
+import { h, Host } from '@stencil/core';
 import { create, registerPlugin } from 'filepond';
 import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
 import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
@@ -68,35 +68,32 @@ export class YooFormUploaderComponent {
     }
   }
   async onInitFilePond() {
-    var _a, _b;
     if (this.inputElement && !this.readonly) {
       this.onInitPondOptions();
       this.pond = create(this.inputElement, this.pondOptions);
-      if (this.multiple && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-        await Promise.all(this.value.map(async (file) => {
-          if (file._downloadURL) {
-            urlToFileBlob(file._downloadURL).then((blob) => {
-              if (blob) {
-                if (file._filename) {
-                  blob.name = file._filename;
-                }
-                this.pond.addFile(blob);
-              }
-            });
-          }
-          else if (isFile(file)) {
-            await this.addFileToPond(file, this.value);
-          }
-        }));
-      }
-      else if ((_b = this.value) === null || _b === void 0 ? void 0 : _b._downloadURL) {
-        const item = this.value;
-        const file = await urlToFileBlob(item._downloadURL);
-        await this.addFileToPond(file, item);
-      }
-      else if (!this.multiple && isFile(this.value)) {
-        await this.pond.addFile(this.value);
-      }
+      const finalValue = this.multiple ? this.value : [this.value];
+      const metadata = { init_file: true }; // Prevent addFiles when initing pond 
+      await Promise.all((finalValue || []).map(async (file) => {
+        if (!file) {
+          return;
+        }
+        if (isNativeFilePath(file)) {
+          const fileObject = await getFileByPath(file);
+          await this.pond.addFile(file, {
+            file: {
+              name: fileObject.name,
+              size: fileObject.size
+            },
+            metadata
+          });
+        }
+        else if (isFile(file)) {
+          await this.addFileToPond(file, this.value, metadata);
+        }
+        else if (file._downloadURL) {
+          await this.pond.addFile(await urlToFileBlob(file._downloadURL), { metadata });
+        }
+      }));
       this.pond.on('error', (err, file) => {
         if (err && (file === null || file === void 0 ? void 0 : file.id)) {
           this.getFilesAndUpdateInput(file.id);
@@ -113,18 +110,19 @@ export class YooFormUploaderComponent {
       };
     }
   }
-  async addFileToPond(file, item) {
+  async addFileToPond(file, item, metadata) {
     if (file) {
       if (item === null || item === void 0 ? void 0 : item._filename) {
         file['name'] = item._filename;
       }
-      await this.pond.addFile(file);
+      await this.pond.addFile(file, { metadata });
     }
   }
-  getFilesAndUpdateInput(invalidId) {
+  async getFilesAndUpdateInput(invalidId) {
     const pondFiles = this.pond.getFiles();
     if (pondFiles === null || pondFiles === void 0 ? void 0 : pondFiles.length) {
-      let finalFile = pondFiles.map((file) => {
+      let finalFile = await Promise.all(pondFiles.map(async (file, index) => {
+        var _a;
         // tag file with invalid id
         if (file.id === invalidId) {
           file.file['invalid'] = true;
@@ -141,8 +139,16 @@ export class YooFormUploaderComponent {
         }
         this.uploadedIds.push(file.id);
         // return instance to the actual file
+        if (isNativeMobile()) {
+          if (await file.getMetadata('init_file')) {
+            return this.multiple ? this.value[index] : this.value;
+          }
+          if (isBlob(file.file)) {
+            return (_a = (await saveToLocalFile(file.file, file.file.name))) === null || _a === void 0 ? void 0 : _a.nativeURL;
+          }
+        }
         return file.file;
-      });
+      }));
       finalFile = this.multiple ? finalFile : finalFile[0];
       setValueAndValidateInput(finalFile, this);
     }
@@ -209,12 +215,10 @@ export class YooFormUploaderComponent {
     return this.validity;
   }
   renderReadonly() {
-    return (h("div", { class: "readonly" },
-      h("yoo-form-carousel", { mediaType: "document", isPdf: this.isPdf, allowSwipeDownDismiss: false, mediaSrc: isArray(this.document) ? this.document : [this.document] })));
+    return (h("div", { class: "readonly" }, h("yoo-form-carousel", { mediaType: "document", isPdf: this.isPdf, allowSwipeDownDismiss: false, mediaSrc: isArray(this.document) ? this.document : [this.document] })));
   }
   renderEditable() {
-    return (h("div", { class: "container" },
-      h("input", { name: "file", ref: (el) => (this.inputElement = el), type: "file" })));
+    return (h("div", { class: "container" }, h("input", { name: "file", ref: (el) => (this.inputElement = el), type: "file" })));
   }
   render() {
     return (h(Host, { class: {
@@ -225,362 +229,374 @@ export class YooFormUploaderComponent {
       } }, this.readonly ? this.renderReadonly() : this.renderEditable()));
   }
   static get is() { return "yoo-form-uploader"; }
-  static get originalStyleUrls() { return {
-    "$": ["form-uploader.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["form-uploader.css"]
-  }; }
-  static get properties() { return {
-    "forceVTT": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Force file to be converted into vtt formt"
+  static get originalStyleUrls() {
+    return {
+      "$": ["form-uploader.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["form-uploader.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "forceVTT": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Force file to be converted into vtt formt"
+        },
+        "attribute": "force-v-t-t",
+        "reflect": false
       },
-      "attribute": "force-v-t-t",
-      "reflect": false
-    },
-    "document": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IFileInterface | IFileInterface[]",
-        "resolved": "IFileInterface | IFileInterface[]",
-        "references": {
-          "IFileInterface": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "document": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IFileInterface | IFileInterface[]",
+          "resolved": "IFileInterface | IFileInterface[]",
+          "references": {
+            "IFileInterface": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "File path"
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "File path"
-      }
-    },
-    "cssClass": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Custom class to add to the pond panel root, so we can overide the default style"
-      },
-      "attribute": "css-class",
-      "reflect": false
-    },
-    "tagFile": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Tag file with document uploader for broker to create file"
+      "cssClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Custom class to add to the pond panel root, so we can overide the default style"
+        },
+        "attribute": "css-class",
+        "reflect": false
       },
-      "attribute": "tag-file",
-      "reflect": false
-    },
-    "isPdf": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "tagFile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Tag file with document uploader for broker to create file"
+        },
+        "attribute": "tag-file",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "isPdf": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-pdf",
+        "reflect": false
       },
-      "attribute": "is-pdf",
-      "reflect": false
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | IFileInterface[] | IFileInterface",
-        "resolved": "IFileInterface | IFileInterface[] | string",
-        "references": {
-          "IFileInterface": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | IFileInterface[] | IFileInterface",
+          "resolved": "IFileInterface | IFileInterface[] | string",
+          "references": {
+            "IFileInterface": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
       },
-      "attribute": "value",
-      "reflect": false
-    },
-    "validators": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(Validator<boolean> | IValidatorEntry)[]",
-        "resolved": "(IValidatorEntry | Validator<boolean>)[]",
-        "references": {
-          "Validator": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          },
-          "IValidatorEntry": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "validators": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(Validator<boolean> | IValidatorEntry)[]",
+          "resolved": "(IValidatorEntry | Validator<boolean>)[]",
+          "references": {
+            "Validator": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            },
+            "IValidatorEntry": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
       },
-      "defaultValue": "[]"
-    },
-    "asyncValidators": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "AsyncValidator<boolean>[]",
-        "resolved": "AsyncValidator<boolean>[]",
-        "references": {
-          "AsyncValidator": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "asyncValidators": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "AsyncValidator<boolean>[]",
+          "resolved": "AsyncValidator<boolean>[]",
+          "references": {
+            "AsyncValidator": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "extensions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "multiple": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "multiple",
-      "reflect": false
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "maxFiles": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Define the maximum number of files that can be selecetd when the prop `multiple` is\nset to true"
-      },
-      "attribute": "max-files",
-      "reflect": false
-    },
-    "maxFileSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Define the maximum size of file that can be selected"
-      },
-      "attribute": "max-file-size",
-      "reflect": false,
-      "defaultValue": "'1000MB'"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "extensions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "attribute": "readonly",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "validityChanged",
-      "name": "validityChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiple",
+        "reflect": false
       },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "inputBlurred",
-      "name": "inputBlurred",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "inputFocused",
-      "name": "inputFocused",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "maxFiles": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define the maximum number of files that can be selecetd when the prop `multiple` is\nset to true"
+        },
+        "attribute": "max-files",
+        "reflect": false
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "inputChanged",
-      "name": "inputChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "maxFileSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define the maximum size of file that can be selected"
+        },
+        "attribute": "max-file-size",
+        "reflect": false,
+        "defaultValue": "'1000MB'"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": false
       }
-    }]; }
-  static get methods() { return {
-    "removeFiles": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "validityChanged",
+        "name": "validityChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "inputBlurred",
+        "name": "inputBlurred",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "inputFocused",
+        "name": "inputFocused",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "inputChanged",
+        "name": "inputChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "removeFiles": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "required",
-      "methodName": "onRequireChanged"
-    }, {
-      "propName": "readonly",
-      "methodName": "onReadonlyChanged"
-    }, {
-      "propName": "maxFiles",
-      "methodName": "onMaxFilesChange"
-    }, {
-      "propName": "maxFileSize",
-      "methodName": "onMaxFileSizeChange"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "required",
+        "methodName": "onRequireChanged"
+      }, {
+        "propName": "readonly",
+        "methodName": "onReadonlyChanged"
+      }, {
+        "propName": "maxFiles",
+        "methodName": "onMaxFilesChange"
+      }, {
+        "propName": "maxFileSize",
+        "methodName": "onMaxFileSizeChange"
+      }];
+  }
 }