@salla.sa/twilight-components 2.11.3 → 2.11.4

package/dist/collection/components/salla-file-upload/salla-file-upload.js

@@ -1,27 +1,28 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, Prop, State, h, Method, Element, Host, Event } from '@stencil/core';
+import { Component, Prop, State, h, Element, Host, Event } from '@stencil/core';
 import * as FilePond from 'filepond';
 import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
 import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
 import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
 import FilePondPluginImageEdit from 'filepond-plugin-image-edit';
 import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
+import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
 export class SallaFileUpload {
   constructor() {
     /**
-     * The uploaded image link or URL
+     * File input name for the native formData
      */
-    this.uploadedImage = undefined;
+    this.name = 'file';
     /**
-     * Sets the required attribute to the output field
+     * The submit request method.
      */
-    this.required = false;
+    this.method = 'POST';
     /**
-     * Sets the disabled attribute to the output field
+     * json formData to be injected in the submit request
      */
-    this.disabled = false;
+    this.formData = "{}";
     /**
      * Enable or disable drag n' drop
      */
@@ -30,14 +31,6 @@ export class SallaFileUpload {
      * Enable or disable file browser
      */
     this.allowBrowse = true;
-    /**
-     * Enable or disable pasting of files. Pasting files is not supported on all browesrs.
-     */
-    this.allowPaste = true;
-    /**
-     * Enable or disable adding multiple files
-     */
-    this.allowMultiple = false;
     /**
      * Allow drop to replace a file, only works when allowMultiple is false
      */
@@ -50,26 +43,6 @@ export class SallaFileUpload {
      * When set to false the remove button is hidden and disabled
      */
     this.allowRemove = true;
-    /**
-     * Enable or disable the process button
-     */
-    this.allowProcess = true;
-    /**
-     * Allow users to reorder files with drag and drop interaction.
-     * Note that this only works in single column mode.
-     * It also only works on browsers that support pointer events.
-     */
-    this.allowReorder = false;
-    /**
-     * Tells FilePond to store files in hidden file input elements so they can be posted along with normal form post.
-     * This only works if the browser supports the DataTransfer constructor (https://caniuse.com/mdn-api_datatransfer_datatransfer),
-     * this is the case on Firefox, Chrome, Chromium powered browsers and Safari version 14.1 and higher.
-     */
-    this.storeAsFile = false;
-    /**
-     * Set to true to require the file to be successfully reverted before continuing.
-     */
-    this.forceRevert = false;
     /**
      * The maximum number of files that the pond can handle
      */
@@ -78,11 +51,6 @@ export class SallaFileUpload {
      * The maxmimum number of files that can be uploaded in parallel
      */
     this.maxParallelUploads = 2;
-    /**
-     * Set to true to enable custom validity messages.
-     * FilePond will throw an error when a parent form is submitted and it contains invalid files.
-     */
-    this.checkValidity = false;
     /**
      * Set to 'after' to add files to end of list (when dropped at the top of the list or added using browse or paste),
      * set to 'before' to add files at start of list.
@@ -93,66 +61,14 @@ export class SallaFileUpload {
      * The interval to use before showing each item being added to the list
      */
     this.itemInsertInterval = 75;
-    /**
-     * Show credits at the bottom of the upload element.
-     * Structure is like [{label,url}]
-     */
-    this.credits = false;
-    /// DRAG and DROP Props
-    /**
-     * FilePond will catch all files dropped on the webpage
-     */
-    this.dropOnPage = false;
     /**
      * Require drop on the FilePond element itself to catch the file.
      */
     this.dropOnElement = true;
-    /**
-     * When enabled, files are validated before they are dropped. A file is not added when it's invalid.
-     */
-    this.dropValidation = false;
     /**
      * Ignored file names when handling dropped directories. Dropping directories is not supported on all browsers.
      */
     this.ignoredFiles = ['.ds_store', 'thumbs.db', 'desktop.ini'];
-    /// SERVER Configuration props
-    /**
-     * A server configuration object describing how FilePond should interact with the server.
-     */
-    this.serverConfig = {
-      process: async (_fieldName, file, _metadata, load, error, _progress, abort, _transfer, _options) => {
-        const formData = new FormData();
-        formData.append("image_url", file, file.name);
-        return await salla.product.uploadGiftImage(formData)
-          .then((resp) => {
-          this.uploadedImage = resp.data.url;
-          this.uploaded.emit(resp.data.url);
-          load('success');
-        }).catch(e => {
-          console.log(e);
-          error('error');
-        })
-          .finally(() => {
-          return {
-            abort: () => {
-              abort();
-            },
-          };
-        });
-      }
-    };
-    /**
-     * Immediately upload new files to the server
-     */
-    this.instantUpload = false;
-    /**
-     * Enable chunked uploads, when enabled will automatically cut up files in chunkSize chunks before upload.
-     */
-    this.chunkUploads = false;
-    /**
-     * Force chunks even for files smaller than the set chunkSize
-     */
-    this.chunkForce = false;
     /**
      * The size of a chunk in bytes
      */
@@ -176,131 +92,126 @@ export class SallaFileUpload {
      * @default `${salla.lang.get('common.uploader.drag_and_drop')}<span class="filepond--label-action"> ${salla.lang.get('common.uploader.browse')} </span>`
      */
     this.labelIdle = this.getLabel();
+    /// SVG Icons
     /**
-     * Label shown when the field contains invalid files and is validated by the parent form.
+     * The icon used for remove actions
      */
-    this.labelInvalidField = salla.lang.get("common.uploader.invalid_field");
+    this.iconRemove = '<svg>...</svg>';
     /**
-     * Label used while waiting for file size information.
+     * The icon used for process actions
      */
-    this.labelFileWaitingForSize = salla.lang.get('common.uploader.waiting_file_info');
+    this.iconProcess = '<svg>...</svg>';
     /**
-     * Label used when no file size information was received
+     * The icon used for retry actions
      */
-    this.labelFileSizeNotAvailable = salla.lang.get('common.uploader.size_not_available');
+    this.iconRetry = '<svg>...</svg>';
     /**
-     * Label used while loading a file
+     * The icon used for undo actions
      */
-    this.labelFileLoading = salla.lang.get('common.elements.loading');
+    this.iconUndo = '<svg>...</svg>';
+    /// STATES
     /**
-     * Label used when file load failed
+     * The array of file references
      */
-    this.labelFileLoadError = salla.lang.get('common.uploader.failed_to_load');
+    this.files = [];
     /**
-     * Label used when uploading a file
+     * Translations
      */
+    this.labelInvalidField = salla.lang.get("common.uploader.invalid_field");
+    this.labelFileWaitingForSize = salla.lang.get('common.uploader.waiting_file_info');
+    this.labelFileSizeNotAvailable = salla.lang.get('common.uploader.size_not_available');
+    this.labelFileLoading = salla.lang.get('common.elements.loading');
+    this.labelFileLoadError = salla.lang.get('common.uploader.failed_to_load');
     this.labelFileProcessing = salla.lang.get('common.uploader.uploading');
-    /**
-     * Label used when file upload has completed
-     */
     this.labelFileProcessingComplete = salla.lang.get('common.uploader.upload_completed');
-    /**
-     * Label used when upload was cancelled
-     */
     this.labelFileProcessingAborted = salla.lang.get('common.uploader.upload_cancelled');
-    /**
-     * Label used when something went wrong during file upload
-     */
     this.labelFileProcessingError = salla.lang.get('common.uploader.error_uploading');
-    /**
-     * Label used when something went wrong during reverting the file upload
-     */
     this.labelFileProcessingRevertError = salla.lang.get('common.uploader.error_reverting');
-    /**
-     * Label used to indicate something went wrong when removing the file
-     */
     this.labelFileRemoveError = salla.lang.get('common.uploader.error_removing');
-    /**
-     * Label used to indicate to the user that an action can be cancelled.
-     */
     this.labelTapToCancel = salla.lang.get("common.elements.cancel");
-    /**
-     * Label used to indicate to the user that an action can be retried.
-     */
     this.labelTapToRetry = salla.lang.get("common.elements.retry");
-    /**
-     * Label used to indicate to the user that an action can be undone.
-     */
     this.labelTapToUndo = salla.lang.get("common.uploader.revert");
-    /**
-     * Label used for remove button
-     */
     this.labelButtonRemoveItem = salla.lang.get("common.elements.remove");
-    /**
-     * Label used for abort load button
-     */
     this.labelButtonAbortItemLoad = salla.lang.get("common.elements.abort");
-    /**
-     * Label used for retry load button
-     */
     this.labelButtonRetryItemLoad = salla.lang.get("common.elements.retry");
-    /**
-     * Label used for abort upload button
-     */
     this.labelButtonAbortItemProcessing = salla.lang.get("common.uploader.abort_upload");
-    /**
-     * Label used for undo upload button
-     */
     this.labelButtonUndoItemProcessing = salla.lang.get("common.elements.undo");
-    /**
-     * Label used for retry upload button
-     */
     this.labelButtonRetryItemProcessing = `${salla.lang.get("common.elements.retry")} ${salla.lang.get("common.uploader.upload")}`;
-    /**
-     * Label used for upload button
-     */
     this.labelButtonProcessItem = salla.lang.get("common.uploader.upload");
-    /// SVG Icons
-    /**
-     * The icon used for remove actions
-     */
-    this.iconRemove = '<svg>...</svg>';
-    /**
-     * The icon used for process actions
-     */
-    this.iconProcess = '<svg>...</svg>';
-    /**
-     * The icon used for retry actions
-     */
-    this.iconRetry = '<svg>...</svg>';
-    /**
-     * The icon used for undo actions
-     */
-    this.iconUndo = '<svg>...</svg>';
-    /**
-     * The array of file references
-     */
-    this.files = [];
+    FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginImageExifOrientation, FilePondPluginFileValidateSize, FilePondPluginImageEdit, FilePondPluginFileValidateType, FilePondPluginFilePoster);
     salla.lang.onLoaded(() => {
       this.host.querySelectorAll('.filepond--drop-label>label').forEach(label => label.innerHTML = this.getLabel());
+      this.labelInvalidField = salla.lang.get("common.uploader.invalid_field");
+      this.labelFileWaitingForSize = salla.lang.get('common.uploader.waiting_file_info');
+      this.labelFileSizeNotAvailable = salla.lang.get('common.uploader.size_not_available');
+      this.labelFileLoading = salla.lang.get('common.elements.loading');
+      this.labelFileLoadError = salla.lang.get('common.uploader.failed_to_load');
+      this.labelFileProcessing = salla.lang.get('common.uploader.uploading');
+      this.labelFileProcessingComplete = salla.lang.get('common.uploader.upload_completed');
+      this.labelFileProcessingAborted = salla.lang.get('common.uploader.upload_cancelled');
+      this.labelFileProcessingError = salla.lang.get('common.uploader.error_uploading');
+      this.labelFileProcessingRevertError = salla.lang.get('common.uploader.error_reverting');
+      this.labelFileRemoveError = salla.lang.get('common.uploader.error_removing');
+      this.labelTapToCancel = salla.lang.get("common.elements.cancel");
+      this.labelTapToRetry = salla.lang.get("common.elements.retry");
+      this.labelTapToUndo = salla.lang.get("common.uploader.revert");
+      this.labelButtonRemoveItem = salla.lang.get("common.elements.remove");
+      this.labelButtonAbortItemLoad = salla.lang.get("common.elements.abort");
+      this.labelButtonRetryItemLoad = salla.lang.get("common.elements.retry");
+      this.labelButtonAbortItemProcessing = salla.lang.get("common.uploader.abort_upload");
+      this.labelButtonUndoItemProcessing = salla.lang.get("common.elements.undo");
+      this.labelButtonRetryItemProcessing = `${salla.lang.get("common.elements.retry")} ${salla.lang.get("common.uploader.upload")}`;
+      this.labelButtonProcessItem = salla.lang.get("common.uploader.upload");
     });
   }
+  getLabel() {
+    return this.host.getAttribute('label-idle') || `${salla.lang.get('common.uploader.drag_and_drop')}<span class="filepond--label-action"> ${salla.lang.get('common.uploader.browse')} </span>`;
+  }
   /**
-   * Append intial file
+   *
+   * This method will fire head request to get the file size, it's head request,so it will be too fast.
    */
-  async appendFile(file) {
-    return this.pond.files = [file];
+  getFileSize(url) {
+    let http = new XMLHttpRequest();
+    http.open('HEAD', url, false); // false = Synchronous
+    http.send(null); // it will stop here until this http request is complete
+    return http.status === 200 ? http.getResponseHeader('content-length') : '';
   }
-  getLabel() {
-    return this.host.getAttribute('label-idle') || `${salla.lang.get('common.uploader.drag_and_drop')}<span class="filepond--label-action"> ${salla.lang.get('common.uploader.browse')} </span>`;
+  getFiles() {
+    if (!this.value) {
+      return [];
+    }
+    try {
+      let files = [this.value];
+      return files.map(file => {
+        let metadata = { poster: file, name: file };
+        return {
+          source: this.fileId ? `${this.fileId}` : this.value,
+          options: {
+            type: 'local',
+            file: {
+              name: this.value.substring(this.value.lastIndexOf('/') + 1),
+              size: this.getFileSize(this.value)
+            },
+            metadata: metadata,
+          },
+        };
+      });
+    }
+    catch (e) {
+      salla.log('failed To get files from: ' + (this.value || this.fileId));
+    }
+    return [];
   }
-  componentDidLoad() {
-    this.pond = this.intiFilePond();
+  render() {
+    return (h(Host, { class: "s-file-upload" },
+      h("input", { type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: "image/png, image/jpeg, image/jpg, image/gif" })));
   }
-  intiFilePond() {
-    FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginImageExifOrientation, FilePondPluginFileValidateSize, FilePondPluginImageEdit, FilePondPluginFileValidateType);
-    return FilePond.create(this.fileUploader, {
-      files: this.files,
+  componentDidLoad() {
+    this.pond = FilePond.create(this.fileUploader, {
+      name: this.payloadName || this.name,
+      //@ts-ignore
+      files: this.getFiles(),
       required: this.required,
       disabled: this.disabled,
       allowDrop: this.allowDrop,
@@ -323,7 +234,43 @@ export class SallaFileUpload {
       dropOnElement: this.dropOnElement,
       dropValidation: this.dropValidation,
       ignoredFiles: this.ignoredFiles,
-      server: this.serverConfig,
+      server: {
+        url: this.url,
+        method: this.method,
+        // @ts-ignore
+        process: {
+          onload: response => {
+            let url = JSON.parse(response).data;
+            this.uploaded.emit(this.value = url.filePath || url.url);
+            return this.value;
+          },
+          headers: salla.api.getHeaders(),
+          onerror: response => {
+            try {
+              let field = JSON.parse(response).error.fields;
+              field = field[this.payloadName || this.name];
+              return (field && field[0]) || salla.lang.get('common.errors.error_occurred');
+            }
+            catch (e) {
+              salla.log('FileUpload:: Error', e);
+              return salla.lang.get('common.errors.error_occurred');
+            }
+          },
+          ondata: formData => {
+            if (this.payloadName && this.payloadName != this.name) {
+              formData.append(this.payloadName, this.pond.getFile(0).file);
+              formData.delete(this.name);
+            }
+            try {
+              Object.entries(JSON.parse(this.formData)).forEach((value) => value[1] && formData.append(value[0], value[1]));
+            }
+            catch (e) {
+              salla.log('Error to inject formData', e);
+            }
+            return formData;
+          }
+        },
+      },
       instantUpload: this.instantUpload,
       chunkUploads: this.chunkUploads,
       chunkForce: this.chunkForce,
@@ -332,23 +279,17 @@ export class SallaFileUpload {
       labelDecimalSeparator: this.labelDecimalSeparator,
       labelThousandsSeparator: this.labelThousandsSeparator,
       labelIdle: this.labelIdle,
+      //todo:: pass support types from props
       acceptedFileTypes: ['image/jpg', 'image/png', 'image/jpeg', 'image/gif', 'video/*'],
       labelInvalidField: this.labelInvalidField,
       labelFileWaitingForSize: this.labelFileWaitingForSize,
+      // onprocessfile: (error, file) =>salla.log(error, JSON.parse(file.serverId)),
       beforeRemoveFile: (file_deleted) => new Promise((resolve) => {
-        this.remove.emit(file_deleted);
-        setTimeout(() => {
-          // TODO: needs a better way
-          this.host.style.height = '120px !important';
-        }, 1000);
+        this.removed.emit(file_deleted);
         resolve(true);
       }),
     });
   }
-  render() {
-    return (h(Host, { class: "s-file-upload" },
-      h("input", { type: "file", name: "filepond", ref: ele => this.fileUploader = ele, class: "s-file-upload-wrapper s-file-upload-input", accept: "image/png, image/jpeg, image/jpg, image/gif" })));
-  }
   static get is() { return "salla-file-upload"; }
   static get originalStyleUrls() { return {
     "$": ["salla-file-upload.scss"]
@@ -357,7 +298,7 @@ export class SallaFileUpload {
     "$": ["salla-file-upload.css"]
   }; }
   static get properties() { return {
-    "uploadedImage": {
+    "value": {
       "type": "string",
       "mutable": true,
       "complexType": {
@@ -371,9 +312,113 @@ export class SallaFileUpload {
         "tags": [],
         "text": "The uploaded image link or URL"
       },
-      "attribute": "uploaded-image",
+      "attribute": "value",
+      "reflect": true
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "File input name for the native formData"
+      },
+      "attribute": "name",
       "reflect": false,
-      "defaultValue": "undefined"
+      "defaultValue": "'file'"
+    },
+    "payloadName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "File input name in the request payload"
+      },
+      "attribute": "payload-name",
+      "reflect": false
+    },
+    "fileId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If current file has id, pass it here, to be passed back in the `removed` event"
+      },
+      "attribute": "file-id",
+      "reflect": false
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The url to submit the image into."
+      },
+      "attribute": "url",
+      "reflect": false
+    },
+    "method": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The submit request method."
+      },
+      "attribute": "method",
+      "reflect": false,
+      "defaultValue": "'POST'"
+    },
+    "formData": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "json formData to be injected in the submit request"
+      },
+      "attribute": "form-data",
+      "reflect": false,
+      "defaultValue": "\"{}\""
     },
     "required": {
       "type": "boolean",
@@ -390,8 +435,7 @@ export class SallaFileUpload {
         "text": "Sets the required attribute to the output field"
       },
       "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "disabled": {
       "type": "boolean",
@@ -408,8 +452,7 @@ export class SallaFileUpload {
         "text": "Sets the disabled attribute to the output field"
       },
       "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "allowDrop": {
       "type": "boolean",
@@ -462,8 +505,7 @@ export class SallaFileUpload {
         "text": "Enable or disable pasting of files. Pasting files is not supported on all browesrs."
       },
       "attribute": "allow-paste",
-      "reflect": false,
-      "defaultValue": "true"
+      "reflect": false
     },
     "allowMultiple": {
       "type": "boolean",
@@ -480,8 +522,7 @@ export class SallaFileUpload {
         "text": "Enable or disable adding multiple files"
       },
       "attribute": "allow-multiple",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "allowReplace": {
       "type": "boolean",
@@ -552,8 +593,7 @@ export class SallaFileUpload {
         "text": "Enable or disable the process button"
       },
       "attribute": "allow-process",
-      "reflect": false,
-      "defaultValue": "true"
+      "reflect": false
     },
     "allowReorder": {
       "type": "boolean",
@@ -570,8 +610,7 @@ export class SallaFileUpload {
         "text": "Allow users to reorder files with drag and drop interaction.\nNote that this only works in single column mode.\nIt also only works on browsers that support pointer events."
       },
       "attribute": "allow-reorder",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "storeAsFile": {
       "type": "boolean",
@@ -588,8 +627,7 @@ export class SallaFileUpload {
         "text": "Tells FilePond to store files in hidden file input elements so they can be posted along with normal form post.\nThis only works if the browser supports the DataTransfer constructor (https://caniuse.com/mdn-api_datatransfer_datatransfer),\nthis is the case on Firefox, Chrome, Chromium powered browsers and Safari version 14.1 and higher."
       },
       "attribute": "store-as-file",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "forceRevert": {
       "type": "boolean",
@@ -606,8 +644,7 @@ export class SallaFileUpload {
         "text": "Set to true to require the file to be successfully reverted before continuing."
       },
       "attribute": "force-revert",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "maxFilesCount": {
       "type": "number",
@@ -660,8 +697,7 @@ export class SallaFileUpload {
         "text": "Set to true to enable custom validity messages.\nFilePond will throw an error when a parent form is submitted and it contains invalid files."
       },
       "attribute": "check-validity",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "itemInsertLocation": {
       "type": "string",
@@ -713,14 +749,13 @@ export class SallaFileUpload {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Show credits at the bottom of the upload element.\nStructure is like [{label,url}]"
       },
       "attribute": "credits",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "dropOnPage": {
       "type": "boolean",
@@ -737,8 +772,7 @@ export class SallaFileUpload {
         "text": "FilePond will catch all files dropped on the webpage"
       },
       "attribute": "drop-on-page",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "dropOnElement": {
       "type": "boolean",
@@ -773,8 +807,7 @@ export class SallaFileUpload {
         "text": "When enabled, files are validated before they are dropped. A file is not added when it's invalid."
       },
       "attribute": "drop-validation",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "ignoredFiles": {
       "type": "unknown",
@@ -796,53 +829,6 @@ export class SallaFileUpload {
       },
       "defaultValue": "['.ds_store', 'thumbs.db', 'desktop.ini']"
     },
-    "serverConfig": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | {\n    url?: string\n    timeout?: number\n    headers?: { [key: string]: string | boolean | number };\n    process?: string | ServerUrl | ProcessServerConfigFunction | null;\n    revert?: string | ServerUrl | RevertServerConfigFunction | null;\n    restore?: string | ServerUrl | RestoreServerConfigFunction | null;\n    load?: string | ServerUrl | LoadServerConfigFunction | null;\n    fetch?: string | ServerUrl | FetchServerConfigFunction | null;\n    remove?: RemoveServerConfigFunction | null;\n  }",
-        "resolved": "string | { url?: string; timeout?: number; headers?: { [key: string]: string | number | boolean; }; process?: string | ServerUrl | ProcessServerConfigFunction; revert?: string | ServerUrl | RevertServerConfigFunction; restore?: string | ServerUrl | RestoreServerConfigFunction; load?: string | ServerUrl | LoadServerConfigFunction; fetch?: string | ServerUrl | FetchServerConfigFunction; remove?: RemoveServerConfigFunction; }",
-        "references": {
-          "ServerUrl": {
-            "location": "import",
-            "path": "./interfaces"
-          },
-          "ProcessServerConfigFunction": {
-            "location": "import",
-            "path": "./interfaces"
-          },
-          "RevertServerConfigFunction": {
-            "location": "import",
-            "path": "./interfaces"
-          },
-          "RestoreServerConfigFunction": {
-            "location": "import",
-            "path": "./interfaces"
-          },
-          "LoadServerConfigFunction": {
-            "location": "import",
-            "path": "./interfaces"
-          },
-          "FetchServerConfigFunction": {
-            "location": "import",
-            "path": "./interfaces"
-          },
-          "RemoveServerConfigFunction": {
-            "location": "import",
-            "path": "./interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A server configuration object describing how FilePond should interact with the server."
-      },
-      "attribute": "server-config",
-      "reflect": false,
-      "defaultValue": "{\n      process: async (_fieldName, file, _metadata, load, error, _progress, abort, _transfer, _options) => {\n        const formData = new FormData();\n        formData.append(\"image_url\", file, file.name);\n        return await salla.product.uploadGiftImage(formData)\n          .then((resp) => {\n            this.uploadedImage = resp.data.url\n            this.uploaded.emit(resp.data.url);\n            load('success')\n          }).catch(e => {\n            console.log(e)\n            error('error')\n          })\n          .finally(() => {\n            return {\n              abort: () => {\n                abort();\n              },\n            };\n          })\n      }\n    }"
-    },
     "instantUpload": {
       "type": "boolean",
       "mutable": false,
@@ -858,8 +844,7 @@ export class SallaFileUpload {
         "text": "Immediately upload new files to the server"
       },
       "attribute": "instant-upload",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "chunkUploads": {
       "type": "boolean",
@@ -876,8 +861,7 @@ export class SallaFileUpload {
         "text": "Enable chunked uploads, when enabled will automatically cut up files in chunkSize chunks before upload."
       },
       "attribute": "chunk-uploads",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "chunkForce": {
       "type": "boolean",
@@ -894,8 +878,7 @@ export class SallaFileUpload {
         "text": "Force chunks even for files smaller than the set chunkSize"
       },
       "attribute": "chunk-force",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "chunkSize": {
       "type": "number",
@@ -992,384 +975,6 @@ export class SallaFileUpload {
       "reflect": false,
       "defaultValue": "this.getLabel()"
     },
-    "labelInvalidField": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label shown when the field contains invalid files and is validated by the parent form."
-      },
-      "attribute": "label-invalid-field",
-      "reflect": false,
-      "defaultValue": "salla.lang.get(\"common.uploader.invalid_field\")"
-    },
-    "labelFileWaitingForSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used while waiting for file size information."
-      },
-      "attribute": "label-file-waiting-for-size",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.uploader.waiting_file_info')"
-    },
-    "labelFileSizeNotAvailable": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used when no file size information was received"
-      },
-      "attribute": "label-file-size-not-available",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.uploader.size_not_available')"
-    },
-    "labelFileLoading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used while loading a file"
-      },
-      "attribute": "label-file-loading",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.loading')"
-    },
-    "labelFileLoadError": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used when file load failed"
-      },
-      "attribute": "label-file-load-error",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.uploader.failed_to_load')"
-    },
-    "labelFileProcessing": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used when uploading a file"
-      },
-      "attribute": "label-file-processing",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.uploader.uploading')"
-    },
-    "labelFileProcessingComplete": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used when file upload has completed"
-      },
-      "attribute": "label-file-processing-complete",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.uploader.upload_completed')"
-    },
-    "labelFileProcessingAborted": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used when upload was cancelled"
-      },
-      "attribute": "label-file-processing-aborted",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.uploader.upload_cancelled')"
-    },
-    "labelFileProcessingError": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used when something went wrong during file upload"
-      },
-      "attribute": "label-file-processing-error",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.uploader.error_uploading')"
-    },
-    "labelFileProcessingRevertError": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used when something went wrong during reverting the file upload"
-      },
-      "attribute": "label-file-processing-revert-error",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.uploader.error_reverting')"
-    },
-    "labelFileRemoveError": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used to indicate something went wrong when removing the file"
-      },
-      "attribute": "label-file-remove-error",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.uploader.error_removing')"
-    },
-    "labelTapToCancel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used to indicate to the user that an action can be cancelled."
-      },
-      "attribute": "label-tap-to-cancel",
-      "reflect": false,
-      "defaultValue": "salla.lang.get(\"common.elements.cancel\")"
-    },
-    "labelTapToRetry": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used to indicate to the user that an action can be retried."
-      },
-      "attribute": "label-tap-to-retry",
-      "reflect": false,
-      "defaultValue": "salla.lang.get(\"common.elements.retry\")"
-    },
-    "labelTapToUndo": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used to indicate to the user that an action can be undone."
-      },
-      "attribute": "label-tap-to-undo",
-      "reflect": false,
-      "defaultValue": "salla.lang.get(\"common.uploader.revert\")"
-    },
-    "labelButtonRemoveItem": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used for remove button"
-      },
-      "attribute": "label-button-remove-item",
-      "reflect": false,
-      "defaultValue": "salla.lang.get(\"common.elements.remove\")"
-    },
-    "labelButtonAbortItemLoad": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used for abort load button"
-      },
-      "attribute": "label-button-abort-item-load",
-      "reflect": false,
-      "defaultValue": "salla.lang.get(\"common.elements.abort\")"
-    },
-    "labelButtonRetryItemLoad": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used for retry load button"
-      },
-      "attribute": "label-button-retry-item-load",
-      "reflect": false,
-      "defaultValue": "salla.lang.get(\"common.elements.retry\")"
-    },
-    "labelButtonAbortItemProcessing": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used for abort upload button"
-      },
-      "attribute": "label-button-abort-item-processing",
-      "reflect": false,
-      "defaultValue": "salla.lang.get(\"common.uploader.abort_upload\")"
-    },
-    "labelButtonUndoItemProcessing": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used for undo upload button"
-      },
-      "attribute": "label-button-undo-item-processing",
-      "reflect": false,
-      "defaultValue": "salla.lang.get(\"common.elements.undo\")"
-    },
-    "labelButtonRetryItemProcessing": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used for retry upload button"
-      },
-      "attribute": "label-button-retry-item-processing",
-      "reflect": false,
-      "defaultValue": "`${salla.lang.get(\"common.elements.retry\")} ${salla.lang.get(\"common.uploader.upload\")}`"
-    },
-    "labelButtonProcessItem": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label used for upload button"
-      },
-      "attribute": "label-button-process-item",
-      "reflect": false,
-      "defaultValue": "salla.lang.get(\"common.uploader.upload\")"
-    },
     "iconRemove": {
       "type": "string",
       "mutable": false,
@@ -1444,8 +1049,28 @@ export class SallaFileUpload {
     }
   }; }
   static get states() { return {
-    "pond": {},
-    "files": {}
+    "files": {},
+    "labelInvalidField": {},
+    "labelFileWaitingForSize": {},
+    "labelFileSizeNotAvailable": {},
+    "labelFileLoading": {},
+    "labelFileLoadError": {},
+    "labelFileProcessing": {},
+    "labelFileProcessingComplete": {},
+    "labelFileProcessingAborted": {},
+    "labelFileProcessingError": {},
+    "labelFileProcessingRevertError": {},
+    "labelFileRemoveError": {},
+    "labelTapToCancel": {},
+    "labelTapToRetry": {},
+    "labelTapToUndo": {},
+    "labelButtonRemoveItem": {},
+    "labelButtonAbortItemLoad": {},
+    "labelButtonRetryItemLoad": {},
+    "labelButtonAbortItemProcessing": {},
+    "labelButtonUndoItemProcessing": {},
+    "labelButtonRetryItemProcessing": {},
+    "labelButtonProcessItem": {}
   }; }
   static get events() { return [{
       "method": "uploaded",
@@ -1463,8 +1088,8 @@ export class SallaFileUpload {
         "references": {}
       }
     }, {
-      "method": "remove",
-      "name": "remove",
+      "method": "removed",
+      "name": "removed",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -1478,30 +1103,5 @@ export class SallaFileUpload {
         "references": {}
       }
     }]; }
-  static get methods() { return {
-    "appendFile": {
-      "complexType": {
-        "signature": "(file: FilePondInitialFile) => Promise<FilePondInitialFile[]>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "FilePondInitialFile": {
-            "location": "import",
-            "path": "./interfaces"
-          }
-        },
-        "return": "Promise<FilePondInitialFile[]>"
-      },
-      "docs": {
-        "text": "Append intial file",
-        "tags": []
-      }
-    }
-  }; }
   static get elementRef() { return "host"; }
 }