@salla.sa/twilight-components 2.11.2 → 2.11.4

package/dist/types/components.d.ts

@@ -7,7 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Color, Options } from "./components/salla-color-picker/interfaces";
 import { DateLimit, DateOption, LocaleKey } from "./components/salla-datetime-picker/interfaces";
-import { FetchServerConfigFunction, FilePondFile, FilePondInitialFile, LoadServerConfigFunction, ProcessServerConfigFunction, RemoveServerConfigFunction, RestoreServerConfigFunction, RevertServerConfigFunction, ServerUrl } from "./components/salla-file-upload/interfaces";
+import { FilePondFile } from "./components/salla-file-upload/interfaces";
 import { Item } from "./components/salla-loyalty/loyalty-schema";
 import { Phone } from "./components/salla-tel-input/interfaces";
 export namespace Components {
@@ -200,7 +200,7 @@ export namespace Components {
          */
         "appendTo": HTMLElement;
         /**
-          * Defines how the date will be formatted in the aria-label for calendar days,  using the same tokens as dateFormat. If you change this, you should choose a  value that will make sense if a screen reader reads it out loud.
+          * Defines how the date will be formatted in the aria-label for calendar days, using the same tokens as dateFormat. If you change this, you should choose a value that will make sense if a screen reader reads it out loud.
          */
         "ariaDateFormat": string;
         /**
@@ -208,7 +208,7 @@ export namespace Components {
          */
         "autoFillDefaultTime": boolean;
         /**
-          * Whether clicking on the input should open the picker.  Set it to false if you only want to open the calendar programmatically with [open()]
+          * Whether clicking on the input should open the picker. Set it to false if you only want to open the calendar programmatically with [open()]
          */
         "clickOpens": boolean;
         /**
@@ -220,7 +220,7 @@ export namespace Components {
          */
         "conjunction"?: string;
         /**
-          * A string of characters which are used to define how the date will be displayed in the input box.  The supported characters are defined in the table below.
+          * A string of characters which are used to define how the date will be displayed in the input box. The supported characters are defined in the table below.
          */
         "dateFormat": string;
         /**
@@ -228,7 +228,7 @@ export namespace Components {
          */
         "dateParser": (date: string, format: string) => Date;
         /**
-          * Sets the initial selected date(s). If you're using mode: "multiple" or a range calendar supply an  Array of Date objects or an Array of date strings which follow your dateFormat. Otherwise, you can supply  a single Date object or a date string.
+          * Sets the initial selected date(s). If you're using mode: "multiple" or a range calendar supply an Array of Date objects or an Array of date strings which follow your dateFormat. Otherwise, you can supply a single Date object or a date string.
          */
         "defaultDate": DateOption | DateOption[];
         /**
@@ -244,11 +244,11 @@ export namespace Components {
          */
         "defaultSeconds": number;
         /**
-          * Disables certain dates, preventing them from being selected.  See https://chmln.github.io/flatpickr/examples/#disabling-specific-dates
+          * Disables certain dates, preventing them from being selected. See https://chmln.github.io/flatpickr/examples/#disabling-specific-dates
          */
         "disable": DateLimit<DateOption>[];
         /**
-          * Set this to true to always use the non-native picker on mobile devices.  By default, Flatpickr utilizes native datetime widgets unless certain options (e.g. disable) are used.
+          * Set this to true to always use the non-native picker on mobile devices. By default, Flatpickr utilizes native datetime widgets unless certain options (e.g. disable) are used.
          */
         "disableMobile": boolean;
         /**
@@ -307,6 +307,10 @@ export namespace Components {
           * How the month should be displayed in the header of the calendar. If showMonths has a value greater than 1, the month is always shown as static.
          */
         "monthSelectorType": "dropdown" | "static";
+        /**
+          * the name for the input
+         */
+        "name": string;
         /**
           * HTML for the arrow icon, used to switch months.
          */
@@ -331,6 +335,10 @@ export namespace Components {
           * HTML for the left arrow icon, used to switch months.
          */
         "prevArrow": string;
+        /**
+          * Whether this input i required or not
+         */
+        "required": boolean;
         /**
           * Whether to display the current month name in shorthand mode, e.g. "Sep" instead "September"
          */
@@ -397,10 +405,6 @@ export namespace Components {
           * Enable or disable the revert processing button
          */
         "allowRevert": boolean;
-        /**
-          * Append intial file
-         */
-        "appendFile": (file: FilePondInitialFile) => Promise<FilePondInitialFile[]>;
         /**
           * Set to true to enable custom validity messages. FilePond will throw an error when a parent form is submitted and it contains invalid files.
          */
@@ -424,7 +428,7 @@ export namespace Components {
         /**
           * Show credits at the bottom of the upload element. Structure is like [{label,url}]
          */
-        "credits"?: false;
+        "credits": false;
         /**
           * Sets the disabled attribute to the output field
          */
@@ -441,10 +445,18 @@ export namespace Components {
           * When enabled, files are validated before they are dropped. A file is not added when it's invalid.
          */
         "dropValidation": boolean;
+        /**
+          * If current file has id, pass it here, to be passed back in the `removed` event
+         */
+        "fileId"?: number;
         /**
           * Set to true to require the file to be successfully reverted before continuing.
          */
         "forceRevert": boolean;
+        /**
+          * json formData to be injected in the submit request
+         */
+        "formData": string;
         /**
           * The icon used for process actions
          */
@@ -477,99 +489,15 @@ export namespace Components {
           * 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
          */
         "itemInsertLocation": 'before' | 'after' | ((a: FilePondFile, b: FilePondFile) => number);
-        /**
-          * Label used for abort load button
-         */
-        "labelButtonAbortItemLoad": string;
-        /**
-          * Label used for abort upload button
-         */
-        "labelButtonAbortItemProcessing": string;
-        /**
-          * Label used for upload button
-         */
-        "labelButtonProcessItem": string;
-        /**
-          * Label used for remove button
-         */
-        "labelButtonRemoveItem": string;
-        /**
-          * Label used for retry load button
-         */
-        "labelButtonRetryItemLoad": string;
-        /**
-          * Label used for retry upload button
-         */
-        "labelButtonRetryItemProcessing": string;
-        /**
-          * Label used for undo upload button
-         */
-        "labelButtonUndoItemProcessing": string;
         /**
           * The decimal separator used to render numbers. By default this is determined automatically.
          */
         "labelDecimalSeparator": string;
-        /**
-          * Label used when file load failed
-         */
-        "labelFileLoadError": string;
-        /**
-          * Label used while loading a file
-         */
-        "labelFileLoading": string;
-        /**
-          * Label used when uploading a file
-         */
-        "labelFileProcessing": string;
-        /**
-          * Label used when upload was cancelled
-         */
-        "labelFileProcessingAborted": string;
-        /**
-          * Label used when file upload has completed
-         */
-        "labelFileProcessingComplete": string;
-        /**
-          * Label used when something went wrong during file upload
-         */
-        "labelFileProcessingError": string;
-        /**
-          * Label used when something went wrong during reverting the file upload
-         */
-        "labelFileProcessingRevertError": string;
-        /**
-          * Label used to indicate something went wrong when removing the file
-         */
-        "labelFileRemoveError": string;
-        /**
-          * Label used when no file size information was received
-         */
-        "labelFileSizeNotAvailable": string;
-        /**
-          * Label used while waiting for file size information.
-         */
-        "labelFileWaitingForSize": string;
         /**
           * 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
           * @default `${salla.lang.get('common.uploader.drag_and_drop')}<span class="filepond--label-action"> ${salla.lang.get('common.uploader.browse')} </span>`
          */
         "labelIdle": string;
-        /**
-          * Label shown when the field contains invalid files and is validated by the parent form.
-         */
-        "labelInvalidField": string;
-        /**
-          * Label used to indicate to the user that an action can be cancelled.
-         */
-        "labelTapToCancel": string;
-        /**
-          * Label used to indicate to the user that an action can be retried.
-         */
-        "labelTapToRetry": string;
-        /**
-          * Label used to indicate to the user that an action can be undone.
-         */
-        "labelTapToUndo": string;
         /**
           * The thousdands separator used to render numbers. By default this is determined automatically.
          */
@@ -583,31 +511,33 @@ export namespace Components {
          */
         "maxParallelUploads": number;
         /**
-          * Sets the required attribute to the output field
+          * The submit request method.
          */
-        "required": boolean;
+        "method": string;
+        /**
+          * File input name for the native formData
+         */
+        "name": string;
+        /**
+          * File input name in the request payload
+         */
+        "payloadName": string;
         /**
-          * A server configuration object describing how FilePond should interact with the server.
+          * Sets the required attribute to the output field
          */
-        "serverConfig": string | {
-    url?: string
-    timeout?: number
-    headers?: { [key: string]: string | boolean | number };
-    process?: string | ServerUrl | ProcessServerConfigFunction | null;
-    revert?: string | ServerUrl | RevertServerConfigFunction | null;
-    restore?: string | ServerUrl | RestoreServerConfigFunction | null;
-    load?: string | ServerUrl | LoadServerConfigFunction | null;
-    fetch?: string | ServerUrl | FetchServerConfigFunction | null;
-    remove?: RemoveServerConfigFunction | null;
-  };
+        "required": boolean;
         /**
           * 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.
          */
         "storeAsFile": boolean;
+        /**
+          * The url to submit the image into.
+         */
+        "url": string;
         /**
           * The uploaded image link or URL
          */
-        "uploadedImage": string;
+        "value": string;
     }
     interface SallaGifting {
         /**
@@ -1969,7 +1899,7 @@ declare namespace LocalJSX {
          */
         "appendTo"?: HTMLElement;
         /**
-          * Defines how the date will be formatted in the aria-label for calendar days,  using the same tokens as dateFormat. If you change this, you should choose a  value that will make sense if a screen reader reads it out loud.
+          * Defines how the date will be formatted in the aria-label for calendar days, using the same tokens as dateFormat. If you change this, you should choose a value that will make sense if a screen reader reads it out loud.
          */
         "ariaDateFormat"?: string;
         /**
@@ -1977,7 +1907,7 @@ declare namespace LocalJSX {
          */
         "autoFillDefaultTime"?: boolean;
         /**
-          * Whether clicking on the input should open the picker.  Set it to false if you only want to open the calendar programmatically with [open()]
+          * Whether clicking on the input should open the picker. Set it to false if you only want to open the calendar programmatically with [open()]
          */
         "clickOpens"?: boolean;
         /**
@@ -1989,7 +1919,7 @@ declare namespace LocalJSX {
          */
         "conjunction"?: string;
         /**
-          * A string of characters which are used to define how the date will be displayed in the input box.  The supported characters are defined in the table below.
+          * A string of characters which are used to define how the date will be displayed in the input box. The supported characters are defined in the table below.
          */
         "dateFormat"?: string;
         /**
@@ -1997,7 +1927,7 @@ declare namespace LocalJSX {
          */
         "dateParser"?: (date: string, format: string) => Date;
         /**
-          * Sets the initial selected date(s). If you're using mode: "multiple" or a range calendar supply an  Array of Date objects or an Array of date strings which follow your dateFormat. Otherwise, you can supply  a single Date object or a date string.
+          * Sets the initial selected date(s). If you're using mode: "multiple" or a range calendar supply an Array of Date objects or an Array of date strings which follow your dateFormat. Otherwise, you can supply a single Date object or a date string.
          */
         "defaultDate"?: DateOption | DateOption[];
         /**
@@ -2013,11 +1943,11 @@ declare namespace LocalJSX {
          */
         "defaultSeconds"?: number;
         /**
-          * Disables certain dates, preventing them from being selected.  See https://chmln.github.io/flatpickr/examples/#disabling-specific-dates
+          * Disables certain dates, preventing them from being selected. See https://chmln.github.io/flatpickr/examples/#disabling-specific-dates
          */
         "disable"?: DateLimit<DateOption>[];
         /**
-          * Set this to true to always use the non-native picker on mobile devices.  By default, Flatpickr utilizes native datetime widgets unless certain options (e.g. disable) are used.
+          * Set this to true to always use the non-native picker on mobile devices. By default, Flatpickr utilizes native datetime widgets unless certain options (e.g. disable) are used.
          */
         "disableMobile"?: boolean;
         /**
@@ -2076,6 +2006,10 @@ declare namespace LocalJSX {
           * How the month should be displayed in the header of the calendar. If showMonths has a value greater than 1, the month is always shown as static.
          */
         "monthSelectorType"?: "dropdown" | "static";
+        /**
+          * the name for the input
+         */
+        "name"?: string;
         /**
           * HTML for the arrow icon, used to switch months.
          */
@@ -2104,6 +2038,10 @@ declare namespace LocalJSX {
           * HTML for the left arrow icon, used to switch months.
          */
         "prevArrow"?: string;
+        /**
+          * Whether this input i required or not
+         */
+        "required"?: boolean;
         /**
           * Whether to display the current month name in shorthand mode, e.g. "Sep" instead "September"
          */
@@ -2210,10 +2148,18 @@ declare namespace LocalJSX {
           * When enabled, files are validated before they are dropped. A file is not added when it's invalid.
          */
         "dropValidation"?: boolean;
+        /**
+          * If current file has id, pass it here, to be passed back in the `removed` event
+         */
+        "fileId"?: number;
         /**
           * Set to true to require the file to be successfully reverted before continuing.
          */
         "forceRevert"?: boolean;
+        /**
+          * json formData to be injected in the submit request
+         */
+        "formData"?: string;
         /**
           * The icon used for process actions
          */
@@ -2246,99 +2192,15 @@ declare namespace LocalJSX {
           * 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
          */
         "itemInsertLocation"?: 'before' | 'after' | ((a: FilePondFile, b: FilePondFile) => number);
-        /**
-          * Label used for abort load button
-         */
-        "labelButtonAbortItemLoad"?: string;
-        /**
-          * Label used for abort upload button
-         */
-        "labelButtonAbortItemProcessing"?: string;
-        /**
-          * Label used for upload button
-         */
-        "labelButtonProcessItem"?: string;
-        /**
-          * Label used for remove button
-         */
-        "labelButtonRemoveItem"?: string;
-        /**
-          * Label used for retry load button
-         */
-        "labelButtonRetryItemLoad"?: string;
-        /**
-          * Label used for retry upload button
-         */
-        "labelButtonRetryItemProcessing"?: string;
-        /**
-          * Label used for undo upload button
-         */
-        "labelButtonUndoItemProcessing"?: string;
         /**
           * The decimal separator used to render numbers. By default this is determined automatically.
          */
         "labelDecimalSeparator"?: string;
-        /**
-          * Label used when file load failed
-         */
-        "labelFileLoadError"?: string;
-        /**
-          * Label used while loading a file
-         */
-        "labelFileLoading"?: string;
-        /**
-          * Label used when uploading a file
-         */
-        "labelFileProcessing"?: string;
-        /**
-          * Label used when upload was cancelled
-         */
-        "labelFileProcessingAborted"?: string;
-        /**
-          * Label used when file upload has completed
-         */
-        "labelFileProcessingComplete"?: string;
-        /**
-          * Label used when something went wrong during file upload
-         */
-        "labelFileProcessingError"?: string;
-        /**
-          * Label used when something went wrong during reverting the file upload
-         */
-        "labelFileProcessingRevertError"?: string;
-        /**
-          * Label used to indicate something went wrong when removing the file
-         */
-        "labelFileRemoveError"?: string;
-        /**
-          * Label used when no file size information was received
-         */
-        "labelFileSizeNotAvailable"?: string;
-        /**
-          * Label used while waiting for file size information.
-         */
-        "labelFileWaitingForSize"?: string;
         /**
           * 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
           * @default `${salla.lang.get('common.uploader.drag_and_drop')}<span class="filepond--label-action"> ${salla.lang.get('common.uploader.browse')} </span>`
          */
         "labelIdle"?: string;
-        /**
-          * Label shown when the field contains invalid files and is validated by the parent form.
-         */
-        "labelInvalidField"?: string;
-        /**
-          * Label used to indicate to the user that an action can be cancelled.
-         */
-        "labelTapToCancel"?: string;
-        /**
-          * Label used to indicate to the user that an action can be retried.
-         */
-        "labelTapToRetry"?: string;
-        /**
-          * Label used to indicate to the user that an action can be undone.
-         */
-        "labelTapToUndo"?: string;
         /**
           * The thousdands separator used to render numbers. By default this is determined automatically.
          */
@@ -2351,40 +2213,42 @@ declare namespace LocalJSX {
           * The maxmimum number of files that can be uploaded in parallel
          */
         "maxParallelUploads"?: number;
+        /**
+          * The submit request method.
+         */
+        "method"?: string;
+        /**
+          * File input name for the native formData
+         */
+        "name"?: string;
         /**
           * Event emitted when the file is about to be removed. Returns boolean value.
          */
-        "onRemove"?: (event: SallaFileUploadCustomEvent<any>) => void;
+        "onRemoved"?: (event: SallaFileUploadCustomEvent<any>) => void;
         /**
           * Event emitted when the file has been uploaded and link to the file has been recieved from the server. Returns string value.
          */
         "onUploaded"?: (event: SallaFileUploadCustomEvent<string>) => void;
         /**
-          * Sets the required attribute to the output field
+          * File input name in the request payload
          */
-        "required"?: boolean;
+        "payloadName"?: string;
         /**
-          * A server configuration object describing how FilePond should interact with the server.
+          * Sets the required attribute to the output field
          */
-        "serverConfig"?: string | {
-    url?: string
-    timeout?: number
-    headers?: { [key: string]: string | boolean | number };
-    process?: string | ServerUrl | ProcessServerConfigFunction | null;
-    revert?: string | ServerUrl | RevertServerConfigFunction | null;
-    restore?: string | ServerUrl | RestoreServerConfigFunction | null;
-    load?: string | ServerUrl | LoadServerConfigFunction | null;
-    fetch?: string | ServerUrl | FetchServerConfigFunction | null;
-    remove?: RemoveServerConfigFunction | null;
-  };
+        "required"?: boolean;
         /**
           * 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.
          */
         "storeAsFile"?: boolean;
+        /**
+          * The url to submit the image into.
+         */
+        "url"?: string;
         /**
           * The uploaded image link or URL
          */
-        "uploadedImage"?: string;
+        "value"?: string;
     }
     interface SallaGifting {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "2.11.2",
+  "version": "2.11.4",
   "license": "GPL-3.0",
   "author": "Salla Team <support@salla.dev> (https://salla.dev)",
   "bugs": {
@@ -76,10 +76,11 @@
     "typescript": "^4.4.3"
   },
   "dependencies": {
-    "@salla.sa/twilight": "^2.11.2",
-    "@salla.sa/twilight-tailwind-theme": "^2.11.2",
+    "@salla.sa/twilight": "^2.11.4",
+    "@salla.sa/twilight-tailwind-theme": "^2.11.4",
     "animejs": "^3.2.1",
     "filepond": "^4.30.4",
+    "filepond-plugin-file-poster": "^2.5.1",
     "filepond-plugin-file-validate-size": "^2.2.7",
     "filepond-plugin-file-validate-type": "^1.2.8",
     "filepond-plugin-image-edit": "^1.6.3",
@@ -92,5 +93,5 @@
     "vanilla-lazyload": "^17.8.3",
     "vanilla-picker": "^2.12.1"
   },
-  "gitHead": "d3068ae117446d50b43dae4d9c721bce74b89935"
+  "gitHead": "4f80255b82e000a0f4322ba0f013ebdc77ef7f20"
 }