@salla.sa/twilight-components 1.6.2 → 1.6.4

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

@@ -0,0 +1,1435 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Prop, State, h, Method, 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';
+export class SallaFileUpload {
+  constructor() {
+    /**
+     * Sets the required attribute to the output field
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute to the output field
+     */
+    this.disabled = false;
+    /**
+     * Enable or disable drag n' drop
+     */
+    this.allowDrop = true;
+    /**
+     * 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
+     */
+    this.allowReplace = true;
+    /**
+     * Enable or disable the revert processing button
+     */
+    this.allowRevert = true;
+    /**
+     * 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
+     */
+    this.maxFilesCount = null;
+    /**
+     * 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.
+     * Set to a compare function to automatically sort items when added
+     */
+    this.itemInsertLocation = 'after';
+    /**
+     * 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 = null;
+    /**
+     * 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
+     */
+    this.chunkSize = 5000000;
+    /**
+     * Amount of times, and delayes, between retried uploading of a chunk
+     */
+    this.chunkRetryDelays = [500, 1000, 3000];
+    /// Labels Props
+    /**
+     * The decimal separator used to render numbers. By default this is determined automatically.
+     */
+    this.labelDecimalSeparator = undefined;
+    /**
+     * The thousdands separator used to render numbers. By default this is determined automatically.
+     */
+    this.labelThousandsSeparator = undefined;
+    /**
+     * Default label shown to indicate this is a drop area.
+     * FilePond will automatically bind browse file events to the element with CSS class .filepond--label-action
+     */
+    this.labelIdle = `${salla.lang.get('common.uploader.drag_and_drop')}<span class="filepond--label-action"> ${salla.lang.get('common.uploader.browse')} </span>`;
+    /**
+     * Label shown when the field contains invalid files and is validated by the parent form.
+     */
+    this.labelInvalidField = salla.lang.get("common.uploader.invalid_field");
+    /**
+     * Label used while waiting for file size information.
+     */
+    this.labelFileWaitingForSize = salla.lang.get('common.uploader.waiting_file_info');
+    /**
+     * Label used when no file size information was received
+     */
+    this.labelFileSizeNotAvailable = salla.lang.get('common.uploader.size_not_available');
+    /**
+     * Label used while loading a file
+     */
+    this.labelFileLoading = salla.lang.get('common.elements.loading');
+    /**
+     * Label used when file load failed
+     */
+    this.labelFileLoadError = salla.lang.get('common.uploader.failed_to_load');
+    /**
+     * Label used when uploading a file
+     */
+    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 = [];
+  }
+  ;
+  /**
+   * Append intial file
+   */
+  async appendFile(file) {
+    return this.pond.files = [file];
+  }
+  /// Hooks
+  /// Styles
+  componentDidLoad() {
+    this.pond = this.intiFilePond();
+  }
+  intiFilePond() {
+    FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginImageExifOrientation, FilePondPluginFileValidateSize, FilePondPluginImageEdit);
+    return FilePond.create(document.querySelector('.filepond'), {
+      files: this.files,
+      required: this.required,
+      disabled: this.disabled,
+      allowDrop: this.allowDrop,
+      allowBrowse: this.allowBrowse,
+      allowPaste: this.allowPaste,
+      allowMultiple: this.allowMultiple,
+      allowReplace: this.allowReplace,
+      allowRevert: this.allowRevert,
+      allowProcess: this.allowProcess,
+      allowReorder: this.allowReorder,
+      storeAsFile: this.storeAsFile,
+      forceRevert: this.forceRevert,
+      maxFiles: this.maxFilesCount,
+      maxParallelUploads: this.maxParallelUploads,
+      checkValidity: this.checkValidity,
+      itemInsertLocation: this.itemInsertLocation,
+      itemInsertInterval: this.itemInsertInterval,
+      credits: this.credits,
+      dropOnPage: this.dropOnPage,
+      dropOnElement: this.dropOnElement,
+      dropValidation: this.dropValidation,
+      ignoredFiles: this.ignoredFiles,
+      server: this.serverConfig,
+      instantUpload: this.instantUpload,
+      chunkUploads: this.chunkUploads,
+      chunkForce: this.chunkForce,
+      chunkSize: this.chunkSize,
+      chunkRetryDelays: this.chunkRetryDelays,
+      labelDecimalSeparator: this.labelDecimalSeparator,
+      labelThousandsSeparator: this.labelThousandsSeparator,
+      labelIdle: this.labelIdle,
+      labelInvalidField: this.labelInvalidField,
+      labelFileWaitingForSize: this.labelFileWaitingForSize,
+      beforeRemoveFile: (file_deleted) => new Promise((resolve) => {
+        this.remove.emit(file_deleted);
+        resolve(true);
+      }),
+    });
+  }
+  render() {
+    return (h(Host, { lass: "s-file-upload" },
+      h("input", { type: "file", class: "s-file-upload-wrapper filepond", name: "filepond" })));
+  }
+  static get is() { return "salla-file-upload"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-file-upload.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-file-upload.css"]
+  }; }
+  static get properties() { return {
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the required attribute to the output field"
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the disabled attribute to the output field"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "allowDrop": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable or disable drag n' drop"
+      },
+      "attribute": "allow-drop",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "allowBrowse": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable or disable file browser"
+      },
+      "attribute": "allow-browse",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "allowPaste": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable or disable pasting of files. Pasting files is not supported on all browesrs."
+      },
+      "attribute": "allow-paste",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "allowMultiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable or disable adding multiple files"
+      },
+      "attribute": "allow-multiple",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "allowReplace": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Allow drop to replace a file, only works when allowMultiple is false"
+      },
+      "attribute": "allow-replace",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "allowRevert": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable or disable the revert processing button"
+      },
+      "attribute": "allow-revert",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "allowRemove": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When set to false the remove button is hidden and disabled"
+      },
+      "attribute": "allow-remove",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "allowProcess": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable or disable the process button"
+      },
+      "attribute": "allow-process",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "allowReorder": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "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"
+    },
+    "storeAsFile": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "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"
+    },
+    "forceRevert": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to require the file to be successfully reverted before continuing."
+      },
+      "attribute": "force-revert",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "maxFilesCount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The maximum number of files that the pond can handle"
+      },
+      "attribute": "max-files-count",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "maxParallelUploads": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The maxmimum number of files that can be uploaded in parallel"
+      },
+      "attribute": "max-parallel-uploads",
+      "reflect": false,
+      "defaultValue": "2"
+    },
+    "checkValidity": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "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"
+    },
+    "itemInsertLocation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'before' | 'after' | ((a: FilePondFile, b: FilePondFile) => number)",
+        "resolved": "\"after\" | \"before\" | ((a: FilePondFile, b: FilePondFile) => number)",
+        "references": {
+          "FilePondFile": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to 'after' to add files to end of list (when dropped at the top of the list or added using browse or paste), \nset to 'before' to add files at start of list. \nSet to a compare function to automatically sort items when added"
+      },
+      "attribute": "item-insert-location",
+      "reflect": false,
+      "defaultValue": "'after'"
+    },
+    "itemInsertInterval": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The interval to use before showing each item being added to the list"
+      },
+      "attribute": "item-insert-interval",
+      "reflect": false,
+      "defaultValue": "75"
+    },
+    "credits": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "false",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Show credits at the bottom of the upload element.\nStructure is like [{label,url}]"
+      },
+      "attribute": "credits",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "dropOnPage": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "FilePond will catch all files dropped on the webpage"
+      },
+      "attribute": "drop-on-page",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "dropOnElement": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Require drop on the FilePond element itself to catch the file."
+      },
+      "attribute": "drop-on-element",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "dropValidation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "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"
+    },
+    "ignoredFiles": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<any>",
+        "resolved": "any[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Ignored file names when handling dropped directories. Dropping directories is not supported on all browsers."
+      },
+      "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  } | null",
+        "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": "null"
+    },
+    "instantUpload": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Immediately upload new files to the server"
+      },
+      "attribute": "instant-upload",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "chunkUploads": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable chunked uploads, when enabled will automatically cut up files in chunkSize chunks before upload."
+      },
+      "attribute": "chunk-uploads",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "chunkForce": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Force chunks even for files smaller than the set chunkSize"
+      },
+      "attribute": "chunk-force",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "chunkSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of a chunk in bytes"
+      },
+      "attribute": "chunk-size",
+      "reflect": false,
+      "defaultValue": "5000000"
+    },
+    "chunkRetryDelays": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<number>",
+        "resolved": "number[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Amount of times, and delayes, between retried uploading of a chunk"
+      },
+      "defaultValue": "[500, 1000, 3000]"
+    },
+    "labelDecimalSeparator": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The decimal separator used to render numbers. By default this is determined automatically."
+      },
+      "attribute": "label-decimal-separator",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "labelThousandsSeparator": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The thousdands separator used to render numbers. By default this is determined automatically."
+      },
+      "attribute": "label-thousands-separator",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "labelIdle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default label shown to indicate this is a drop area. \nFilePond will automatically bind browse file events to the element with CSS class .filepond--label-action"
+      },
+      "attribute": "label-idle",
+      "reflect": false,
+      "defaultValue": "`${salla.lang.get('common.uploader.drag_and_drop')}<span class=\"filepond--label-action\"> ${salla.lang.get('common.uploader.browse')} </span>`"
+    },
+    "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,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The icon used for remove actions"
+      },
+      "attribute": "icon-remove",
+      "reflect": false,
+      "defaultValue": "'<svg>...</svg>'"
+    },
+    "iconProcess": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The icon used for process actions"
+      },
+      "attribute": "icon-process",
+      "reflect": false,
+      "defaultValue": "'<svg>...</svg>'"
+    },
+    "iconRetry": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The icon used for retry actions"
+      },
+      "attribute": "icon-retry",
+      "reflect": false,
+      "defaultValue": "'<svg>...</svg>'"
+    },
+    "iconUndo": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The icon used for undo actions"
+      },
+      "attribute": "icon-undo",
+      "reflect": false,
+      "defaultValue": "'<svg>...</svg>'"
+    }
+  }; }
+  static get states() { return {
+    "pond": {},
+    "files": {}
+  }; }
+  static get events() { return [{
+      "method": "remove",
+      "name": "remove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "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": []
+      }
+    }
+  }; }
+}