@salla.sa/twilight-components 1.6.3 → 1.6.5

package/dist/types/components.d.ts

@@ -5,6 +5,10 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { DateLimit, DateOption, Hook, LocaleKey } from "./components/salla-datetime-picker/interfaces";
+import { FetchServerConfigFunction, FilePondFile, FilePondInitialFile, LoadServerConfigFunction, ProcessServerConfigFunction, RemoveServerConfigFunction, RestoreServerConfigFunction, RevertServerConfigFunction, ServerUrl } 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 {
     interface SallaAddProductButton {
         /**
@@ -93,6 +97,498 @@ export namespace Components {
     }
     interface SallaConditionalFields {
     }
+    interface SallaDatetimePicker {
+        /**
+          * Allows the user to enter a date directly into the input field. By default, direct entry is disabled.
+         */
+        "allowInput": boolean;
+        /**
+          * Allows the preloading of an invalid date. When disabled, the field will be cleared if the provided date is invalid
+         */
+        "allowInvalidPreload": boolean;
+        /**
+          * Exactly the same as date format, but for the altInput field.
+         */
+        "altFormat": string;
+        /**
+          * Show the user a readable date (as per altFormat), but return something totally different to the server.
+         */
+        "altInput": boolean;
+        /**
+          * This class will be added to the input element created by the altInput option. Note that altInput already inherits classes from the original input.
+         */
+        "altInputClass": string;
+        /**
+          * Instead of body, appends the calendar to the specified node instead.
+         */
+        "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.
+         */
+        "ariaDateFormat": string;
+        /**
+          * Whether the default time should be auto-filled when the input is empty and gains or loses focus.
+         */
+        "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()]
+         */
+        "clickOpens": boolean;
+        /**
+          * Whether calendar should close after date selection or not
+         */
+        "closeOnSelect": boolean;
+        /**
+          * When in "multiple" mode, conjunction is used to separate dates in the entry field.
+         */
+        "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.
+         */
+        "dateFormat": string;
+        /**
+          * A custom datestring parser
+         */
+        "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.
+         */
+        "defaultDate": DateOption | DateOption[];
+        /**
+          * Initial value of the hour element, when no date is selected
+         */
+        "defaultHour": number;
+        /**
+          * Initial value of the minute element, when no date is selected
+         */
+        "defaultMinute": number;
+        /**
+          * Initial value of the seconds element, when no date is selected
+         */
+        "defaultSeconds": number;
+        /**
+          * 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.
+         */
+        "disableMobile": boolean;
+        /**
+          * Disables all dates except these specified. See https://chmln.github.io/flatpickr/examples/#disabling-all-dates-except-select-few
+         */
+        "enable": DateLimit<DateOption>[];
+        /**
+          * Enables seconds selection in the time picker.
+         */
+        "enableSeconds": boolean;
+        /**
+          * Enables the time picker
+         */
+        "enableTime": boolean;
+        /**
+          * Allows using a custom date formatting function instead of the built-in handling for date formats using dateFormat, altFormat, etc.
+         */
+        "formatDate": (date: Date, format: string, locale: Object) => string;
+        /**
+          * Adjusts the step for the hour input (incl. scrolling)
+         */
+        "hourIncrement": number;
+        /**
+          * Displays the calendar inline
+         */
+        "inline": boolean;
+        /**
+          * The locale, either as a string (e.g. "ar", "en") or as an object. See https://chmln.github.io/flatpickr/localization/
+         */
+        "locale": LocaleKey;
+        /**
+          * The maximum date that a user can pick to (inclusive).
+         */
+        "maxDate": DateOption;
+        /**
+          * The minimum date that a user can start picking from (inclusive).
+         */
+        "maxTime": DateOption;
+        /**
+          * The minimum date that a user can start picking from (inclusive).
+         */
+        "minDate": DateOption;
+        /**
+          * The minimum time that a user can start picking from (inclusive).
+         */
+        "minTime": DateOption;
+        /**
+          * Adjusts the step for the minute input (incl. scrolling) Defaults to 5
+         */
+        "minuteIncrement": number;
+        /**
+          * Date selection mode, defaults to "single"
+         */
+        "mode": "single" | "multiple" | "range" | "time";
+        /**
+          * 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";
+        /**
+          * HTML for the arrow icon, used to switch months.
+         */
+        "nextArrow": string;
+        /**
+          * Hides the day selection in calendar. Use it along with enableTime to create a time picker.
+         */
+        "noCalendar": boolean;
+        /**
+          * Fires when the selected dates have changed - when a date is picked or cleared, by user or programmatically.
+         */
+        "onChange": Hook | Hook[];
+        /**
+          * Fires when the calendar is closed
+         */
+        "onClose": Hook | Hook[];
+        /**
+          * Fires for every day cell in the calendar, where the fourth argument is the html element of the cell.  See https://chmln.github.io/flatpickr/events/#ondaycreate
+         */
+        "onDayCreate": Hook | Hook[];
+        /**
+          * Fires before the calendar instance is destroyed
+         */
+        "onDestroy": Hook | Hook[];
+        /**
+          * Fires when valid keyboard input for calendar is detected
+         */
+        "onKeyDown": Hook | Hook[];
+        /**
+          * Fires after the month has changed
+         */
+        "onMonthChange": Hook | Hook[];
+        /**
+          * Fires after the calendar is opened
+         */
+        "onOpen": Hook | Hook[];
+        /**
+          * Fires after the configuration for the calendar is parsed
+         */
+        "onParseConfig": Hook | Hook[];
+        /**
+          * Fires once the calendar instance is ready
+         */
+        "onReady": Hook | Hook[];
+        /**
+          * Like onChange, but fires immediately after any date changes
+         */
+        "onValueUpdate": Hook | Hook[];
+        /**
+          * Fires after the year has changed
+         */
+        "onYearChange": Hook | Hook[];
+        /**
+          * Placeholder text to show on the input element
+         */
+        "placeholder": string;
+        /**
+          * How the calendar should be positioned with regards to the input. Defaults to "auto"
+         */
+        "position": "auto" | "above" | "below" | "auto left" | "auto center" | "auto right" | "above left" | "above center" | "above right" | "below left" | "below center" | "below right" | ((self: any, customElement: HTMLElement | undefined) => void);
+        /**
+          * The element off of which the calendar will be positioned. Defaults to the date input
+         */
+        "positionElement": HTMLElement;
+        /**
+          * HTML for the left arrow icon, used to switch months.
+         */
+        "prevArrow": string;
+        /**
+          * Whether to display the current month name in shorthand mode, e.g. "Sep" instead "September"
+         */
+        "shorthandCurrentMonth": boolean;
+        /**
+          * The number of months to be shown at the same time when displaying the calendar.
+         */
+        "showMonths": number;
+        /**
+          * Position the calendar inside the wrapper and next to the input element*.
+         */
+        "static": boolean;
+        /**
+          * Displays time picker in 24 hour mode without AM/PM selection when enabled.
+         */
+        "time_24hr": boolean;
+        /**
+          * Two way data binding to retrieve the selected date[time] value
+         */
+        "value": string;
+        /**
+          * Enables display of week numbers in calendar.
+         */
+        "weekNumbers": boolean;
+        /**
+          * See https://chmln.github.io/flatpickr/examples/#flatpickr-external-elements
+         */
+        "wrap": boolean;
+    }
+    interface SallaFileUpload {
+        /**
+          * Enable or disable file browser
+         */
+        "allowBrowse": boolean;
+        /**
+          * Enable or disable drag n' drop
+         */
+        "allowDrop": boolean;
+        /**
+          * Enable or disable adding multiple files
+         */
+        "allowMultiple": boolean;
+        /**
+          * Enable or disable pasting of files. Pasting files is not supported on all browesrs.
+         */
+        "allowPaste": boolean;
+        /**
+          * Enable or disable the process button
+         */
+        "allowProcess": boolean;
+        /**
+          * When set to false the remove button is hidden and disabled
+         */
+        "allowRemove": boolean;
+        /**
+          * 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.
+         */
+        "allowReorder": boolean;
+        /**
+          * Allow drop to replace a file, only works when allowMultiple is false
+         */
+        "allowReplace": boolean;
+        /**
+          * 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.
+         */
+        "checkValidity": boolean;
+        /**
+          * Force chunks even for files smaller than the set chunkSize
+         */
+        "chunkForce": boolean;
+        /**
+          * Amount of times, and delayes, between retried uploading of a chunk
+         */
+        "chunkRetryDelays": Array<number>;
+        /**
+          * The size of a chunk in bytes
+         */
+        "chunkSize": number;
+        /**
+          * Enable chunked uploads, when enabled will automatically cut up files in chunkSize chunks before upload.
+         */
+        "chunkUploads": boolean;
+        /**
+          * Show credits at the bottom of the upload element. Structure is like [{label,url}]
+         */
+        "credits"?: false;
+        /**
+          * Sets the disabled attribute to the output field
+         */
+        "disabled": boolean;
+        /**
+          * Require drop on the FilePond element itself to catch the file.
+         */
+        "dropOnElement": boolean;
+        /**
+          * FilePond will catch all files dropped on the webpage
+         */
+        "dropOnPage": boolean;
+        /**
+          * When enabled, files are validated before they are dropped. A file is not added when it's invalid.
+         */
+        "dropValidation": boolean;
+        /**
+          * Set to true to require the file to be successfully reverted before continuing.
+         */
+        "forceRevert": boolean;
+        /**
+          * The icon used for process actions
+         */
+        "iconProcess": string;
+        /**
+          * The icon used for remove actions
+         */
+        "iconRemove": string;
+        /**
+          * The icon used for retry actions
+         */
+        "iconRetry": string;
+        /**
+          * The icon used for undo actions
+         */
+        "iconUndo": string;
+        /**
+          * Ignored file names when handling dropped directories. Dropping directories is not supported on all browsers.
+         */
+        "ignoredFiles": Array<any>;
+        /**
+          * Immediately upload new files to the server
+         */
+        "instantUpload": boolean;
+        /**
+          * The interval to use before showing each item being added to the list
+         */
+        "itemInsertInterval": number;
+        /**
+          * 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
+         */
+        "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.
+         */
+        "labelThousandsSeparator": string;
+        /**
+          * The maximum number of files that the pond can handle
+         */
+        "maxFilesCount": number;
+        /**
+          * The maxmimum number of files that can be uploaded in parallel
+         */
+        "maxParallelUploads": number;
+        /**
+          * Sets the required attribute to the output field
+         */
+        "required": boolean;
+        /**
+          * A server configuration object describing how FilePond should interact with the server.
+         */
+        "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;
+  } | null;
+        /**
+          * 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;
+    }
+    interface SallaGifting {
+        /**
+          * Hide the gifting modal window
+         */
+        "close": () => Promise<HTMLElement>;
+        /**
+          * Go to the step 2
+         */
+        "goToStep2": () => Promise<void>;
+        /**
+          * Show the gifting modal window
+         */
+        "open": () => Promise<any>;
+        /**
+          * The product id for which the gifting system is required.
+         */
+        "productId": number;
+    }
     interface SallaInfiniteScroll {
         /**
           * Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
@@ -169,7 +665,7 @@ export namespace Components {
         /**
           * open the component
          */
-        "open": () => Promise<boolean>;
+        "open": () => Promise<any>;
         /**
           * Change currency and language to the selected ones.
          */
@@ -240,6 +736,9 @@ export namespace Components {
          */
         "resetExchange": () => Promise<any>;
     }
+    interface SallaLoyaltyPrizeItem {
+        "item": Item;
+    }
     interface SallaModal {
         /**
           * Align modal content to center, defaults to `false`
@@ -317,7 +816,7 @@ export namespace Components {
           * Show offer details
           * @param offer
          */
-        "showOffer": (offer: any) => Promise<HTMLElement>;
+        "showOffer": (offer: any) => Promise<void>;
     }
     interface SallaPlaceholder {
         /**
@@ -382,7 +881,7 @@ export namespace Components {
         /**
           * Show the rating modal
          */
-        "open": () => Promise<NodeJS.Timeout>;
+        "open": () => Promise<any>;
         /**
           * The order id, to rate on its products & shipping
          */
@@ -438,19 +937,121 @@ export namespace Components {
          */
         "oval": boolean;
     }
-    interface SallaSkeleton {
+    interface SallaSelect {
         /**
-          * Set the skeleton height
+          * Enable multiple item selection
          */
-        "height": string;
+        "autocomplete": boolean;
         /**
-          * Set the shape type of the skeleton is it circle or normal
+          * Enable autofocus
          */
-        "type": 'circle' | 'normal';
+        "autofocus": boolean;
         /**
-          * Set the skeleton width
+          * Changes display of selections to chips
          */
-        "width": string;
+        "chips": boolean;
+        /**
+          * Applied when using clearable and the input is dirty
+         */
+        "clearIcon": string;
+        /**
+          * Add input clear functionality, default icon is `sicon-cancel`
+         */
+        "clearable": boolean;
+        /**
+          * Applies specified color to the control.
+         */
+        "color": 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'gray' | 'dark';
+        /**
+          * Disable the input
+         */
+        "disabled": boolean;
+        /**
+          * Remove elevation or box shadow.
+         */
+        "flat": boolean;
+        /**
+          * Hides hint if any
+         */
+        "hideDetail": boolean;
+        /**
+          * Hint text
+         */
+        "hint": string;
+        /**
+          * Set property of items’s disabled value
+         */
+        "itemDisabled": string;
+        /**
+          * Set property of items’s text value
+         */
+        "itemText": string;
+        /**
+          * Set property of items’s value - must be primitive.  Dot notation is supported.
+         */
+        "itemValue": string;
+        /**
+          * Can be an array of objects or array of strings.  When using objects, will look for a text, value and disabled keys.
+         */
+        "items": any[];
+        /**
+          * Sets label
+         */
+        "label": string;
+        /**
+          * Displays linear progress bar.
+         */
+        "loading": boolean;
+        /**
+          * Specifies which color is applied to the progress bar.
+         */
+        "loadingColor": string;
+        /**
+          * Enable multiple item selection
+         */
+        "multiple": boolean;
+        /**
+          * Forces hint to always be visible.
+         */
+        "persistHint": boolean;
+        /**
+          * Sets the input’s placeholder text.
+         */
+        "placeholder": string;
+        /**
+          * Enable multiple item selection
+         */
+        "required": boolean;
+        /**
+          * Changes the selection behavior to return the object directly  rather than the value specified with item-value
+         */
+        "returnObject": boolean;
+        /**
+          * Define appearance of the component
+         */
+        "shape": 'underline' | 'outlined';
+        /**
+          * Sizing options
+         */
+        "size": 'x-large' | 'large' | 'normal' | 'small' | 'x-small';
+        /**
+          * The selected value
+         */
+        "value": any;
+    }
+    interface SallaSkeleton {
+        /**
+          * Set the skeleton height
+         */
+        "height": string;
+        /**
+          * Set the shape type of the skeleton is it circle or normal
+         */
+        "type": 'circle' | 'normal';
+        /**
+          * Set the skeleton width
+         */
+        "width": string;
     }
     interface SallaSocialShare {
         /**
@@ -583,6 +1184,18 @@ export interface SallaAddProductButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSallaAddProductButtonElement;
 }
+export interface SallaDatetimePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSallaDatetimePickerElement;
+}
+export interface SallaFileUploadCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSallaFileUploadElement;
+}
+export interface SallaLoyaltyPrizeItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSallaLoyaltyPrizeItemElement;
+}
 export interface SallaTabHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSallaTabHeaderElement;
@@ -614,6 +1227,24 @@ declare global {
         prototype: HTMLSallaConditionalFieldsElement;
         new (): HTMLSallaConditionalFieldsElement;
     };
+    interface HTMLSallaDatetimePickerElement extends Components.SallaDatetimePicker, HTMLStencilElement {
+    }
+    var HTMLSallaDatetimePickerElement: {
+        prototype: HTMLSallaDatetimePickerElement;
+        new (): HTMLSallaDatetimePickerElement;
+    };
+    interface HTMLSallaFileUploadElement extends Components.SallaFileUpload, HTMLStencilElement {
+    }
+    var HTMLSallaFileUploadElement: {
+        prototype: HTMLSallaFileUploadElement;
+        new (): HTMLSallaFileUploadElement;
+    };
+    interface HTMLSallaGiftingElement extends Components.SallaGifting, HTMLStencilElement {
+    }
+    var HTMLSallaGiftingElement: {
+        prototype: HTMLSallaGiftingElement;
+        new (): HTMLSallaGiftingElement;
+    };
     interface HTMLSallaInfiniteScrollElement extends Components.SallaInfiniteScroll, HTMLStencilElement {
     }
     var HTMLSallaInfiniteScrollElement: {
@@ -656,6 +1287,12 @@ declare global {
         prototype: HTMLSallaLoyaltyElement;
         new (): HTMLSallaLoyaltyElement;
     };
+    interface HTMLSallaLoyaltyPrizeItemElement extends Components.SallaLoyaltyPrizeItem, HTMLStencilElement {
+    }
+    var HTMLSallaLoyaltyPrizeItemElement: {
+        prototype: HTMLSallaLoyaltyPrizeItemElement;
+        new (): HTMLSallaLoyaltyPrizeItemElement;
+    };
     interface HTMLSallaModalElement extends Components.SallaModal, HTMLStencilElement {
     }
     var HTMLSallaModalElement: {
@@ -716,6 +1353,12 @@ declare global {
         prototype: HTMLSallaSearchElement;
         new (): HTMLSallaSearchElement;
     };
+    interface HTMLSallaSelectElement extends Components.SallaSelect, HTMLStencilElement {
+    }
+    var HTMLSallaSelectElement: {
+        prototype: HTMLSallaSelectElement;
+        new (): HTMLSallaSelectElement;
+    };
     interface HTMLSallaSkeletonElement extends Components.SallaSkeleton, HTMLStencilElement {
     }
     var HTMLSallaSkeletonElement: {
@@ -768,6 +1411,9 @@ declare global {
         "salla-add-product-button": HTMLSallaAddProductButtonElement;
         "salla-button": HTMLSallaButtonElement;
         "salla-conditional-fields": HTMLSallaConditionalFieldsElement;
+        "salla-datetime-picker": HTMLSallaDatetimePickerElement;
+        "salla-file-upload": HTMLSallaFileUploadElement;
+        "salla-gifting": HTMLSallaGiftingElement;
         "salla-infinite-scroll": HTMLSallaInfiniteScrollElement;
         "salla-installment": HTMLSallaInstallmentElement;
         "salla-list-tile": HTMLSallaListTileElement;
@@ -775,6 +1421,7 @@ declare global {
         "salla-localization-modal": HTMLSallaLocalizationModalElement;
         "salla-login-modal": HTMLSallaLoginModalElement;
         "salla-loyalty": HTMLSallaLoyaltyElement;
+        "salla-loyalty-prize-item": HTMLSallaLoyaltyPrizeItemElement;
         "salla-modal": HTMLSallaModalElement;
         "salla-offer-modal": HTMLSallaOfferModalElement;
         "salla-placeholder": HTMLSallaPlaceholderElement;
@@ -785,6 +1432,7 @@ declare global {
         "salla-rating-stars": HTMLSallaRatingStarsElement;
         "salla-scopes": HTMLSallaScopesElement;
         "salla-search": HTMLSallaSearchElement;
+        "salla-select": HTMLSallaSelectElement;
         "salla-skeleton": HTMLSallaSkeletonElement;
         "salla-social-share": HTMLSallaSocialShareElement;
         "salla-swiper": HTMLSallaSwiperElement;
@@ -870,6 +1518,484 @@ declare namespace LocalJSX {
     }
     interface SallaConditionalFields {
     }
+    interface SallaDatetimePicker {
+        /**
+          * Allows the user to enter a date directly into the input field. By default, direct entry is disabled.
+         */
+        "allowInput"?: boolean;
+        /**
+          * Allows the preloading of an invalid date. When disabled, the field will be cleared if the provided date is invalid
+         */
+        "allowInvalidPreload"?: boolean;
+        /**
+          * Exactly the same as date format, but for the altInput field.
+         */
+        "altFormat"?: string;
+        /**
+          * Show the user a readable date (as per altFormat), but return something totally different to the server.
+         */
+        "altInput"?: boolean;
+        /**
+          * This class will be added to the input element created by the altInput option. Note that altInput already inherits classes from the original input.
+         */
+        "altInputClass"?: string;
+        /**
+          * Instead of body, appends the calendar to the specified node instead.
+         */
+        "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.
+         */
+        "ariaDateFormat"?: string;
+        /**
+          * Whether the default time should be auto-filled when the input is empty and gains or loses focus.
+         */
+        "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()]
+         */
+        "clickOpens"?: boolean;
+        /**
+          * Whether calendar should close after date selection or not
+         */
+        "closeOnSelect"?: boolean;
+        /**
+          * When in "multiple" mode, conjunction is used to separate dates in the entry field.
+         */
+        "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.
+         */
+        "dateFormat"?: string;
+        /**
+          * A custom datestring parser
+         */
+        "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.
+         */
+        "defaultDate"?: DateOption | DateOption[];
+        /**
+          * Initial value of the hour element, when no date is selected
+         */
+        "defaultHour"?: number;
+        /**
+          * Initial value of the minute element, when no date is selected
+         */
+        "defaultMinute"?: number;
+        /**
+          * Initial value of the seconds element, when no date is selected
+         */
+        "defaultSeconds"?: number;
+        /**
+          * 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.
+         */
+        "disableMobile"?: boolean;
+        /**
+          * Disables all dates except these specified. See https://chmln.github.io/flatpickr/examples/#disabling-all-dates-except-select-few
+         */
+        "enable"?: DateLimit<DateOption>[];
+        /**
+          * Enables seconds selection in the time picker.
+         */
+        "enableSeconds"?: boolean;
+        /**
+          * Enables the time picker
+         */
+        "enableTime"?: boolean;
+        /**
+          * Allows using a custom date formatting function instead of the built-in handling for date formats using dateFormat, altFormat, etc.
+         */
+        "formatDate"?: (date: Date, format: string, locale: Object) => string;
+        /**
+          * Adjusts the step for the hour input (incl. scrolling)
+         */
+        "hourIncrement"?: number;
+        /**
+          * Displays the calendar inline
+         */
+        "inline"?: boolean;
+        /**
+          * The locale, either as a string (e.g. "ar", "en") or as an object. See https://chmln.github.io/flatpickr/localization/
+         */
+        "locale"?: LocaleKey;
+        /**
+          * The maximum date that a user can pick to (inclusive).
+         */
+        "maxDate"?: DateOption;
+        /**
+          * The minimum date that a user can start picking from (inclusive).
+         */
+        "maxTime"?: DateOption;
+        /**
+          * The minimum date that a user can start picking from (inclusive).
+         */
+        "minDate"?: DateOption;
+        /**
+          * The minimum time that a user can start picking from (inclusive).
+         */
+        "minTime"?: DateOption;
+        /**
+          * Adjusts the step for the minute input (incl. scrolling) Defaults to 5
+         */
+        "minuteIncrement"?: number;
+        /**
+          * Date selection mode, defaults to "single"
+         */
+        "mode"?: "single" | "multiple" | "range" | "time";
+        /**
+          * 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";
+        /**
+          * HTML for the arrow icon, used to switch months.
+         */
+        "nextArrow"?: string;
+        /**
+          * Hides the day selection in calendar. Use it along with enableTime to create a time picker.
+         */
+        "noCalendar"?: boolean;
+        /**
+          * Fires when the selected dates have changed - when a date is picked or cleared, by user or programmatically.
+         */
+        "onChange"?: Hook | Hook[];
+        /**
+          * Fires when the calendar is closed
+         */
+        "onClose"?: Hook | Hook[];
+        /**
+          * Fires for every day cell in the calendar, where the fourth argument is the html element of the cell.  See https://chmln.github.io/flatpickr/events/#ondaycreate
+         */
+        "onDayCreate"?: Hook | Hook[];
+        /**
+          * Fires before the calendar instance is destroyed
+         */
+        "onDestroy"?: Hook | Hook[];
+        /**
+          * Fires when valid keyboard input for calendar is detected
+         */
+        "onKeyDown"?: Hook | Hook[];
+        /**
+          * Fires after the month has changed
+         */
+        "onMonthChange"?: Hook | Hook[];
+        /**
+          * Fires after the calendar is opened
+         */
+        "onOpen"?: Hook | Hook[];
+        /**
+          * Fires after the configuration for the calendar is parsed
+         */
+        "onParseConfig"?: Hook | Hook[];
+        "onPicked"?: (event: SallaDatetimePickerCustomEvent<any>) => void;
+        /**
+          * Fires once the calendar instance is ready
+         */
+        "onReady"?: Hook | Hook[];
+        /**
+          * Like onChange, but fires immediately after any date changes
+         */
+        "onValueUpdate"?: Hook | Hook[];
+        /**
+          * Fires after the year has changed
+         */
+        "onYearChange"?: Hook | Hook[];
+        /**
+          * Placeholder text to show on the input element
+         */
+        "placeholder"?: string;
+        /**
+          * How the calendar should be positioned with regards to the input. Defaults to "auto"
+         */
+        "position"?: "auto" | "above" | "below" | "auto left" | "auto center" | "auto right" | "above left" | "above center" | "above right" | "below left" | "below center" | "below right" | ((self: any, customElement: HTMLElement | undefined) => void);
+        /**
+          * The element off of which the calendar will be positioned. Defaults to the date input
+         */
+        "positionElement"?: HTMLElement;
+        /**
+          * HTML for the left arrow icon, used to switch months.
+         */
+        "prevArrow"?: string;
+        /**
+          * Whether to display the current month name in shorthand mode, e.g. "Sep" instead "September"
+         */
+        "shorthandCurrentMonth"?: boolean;
+        /**
+          * The number of months to be shown at the same time when displaying the calendar.
+         */
+        "showMonths"?: number;
+        /**
+          * Position the calendar inside the wrapper and next to the input element*.
+         */
+        "static"?: boolean;
+        /**
+          * Displays time picker in 24 hour mode without AM/PM selection when enabled.
+         */
+        "time_24hr"?: boolean;
+        /**
+          * Two way data binding to retrieve the selected date[time] value
+         */
+        "value"?: string;
+        /**
+          * Enables display of week numbers in calendar.
+         */
+        "weekNumbers"?: boolean;
+        /**
+          * See https://chmln.github.io/flatpickr/examples/#flatpickr-external-elements
+         */
+        "wrap"?: boolean;
+    }
+    interface SallaFileUpload {
+        /**
+          * Enable or disable file browser
+         */
+        "allowBrowse"?: boolean;
+        /**
+          * Enable or disable drag n' drop
+         */
+        "allowDrop"?: boolean;
+        /**
+          * Enable or disable adding multiple files
+         */
+        "allowMultiple"?: boolean;
+        /**
+          * Enable or disable pasting of files. Pasting files is not supported on all browesrs.
+         */
+        "allowPaste"?: boolean;
+        /**
+          * Enable or disable the process button
+         */
+        "allowProcess"?: boolean;
+        /**
+          * When set to false the remove button is hidden and disabled
+         */
+        "allowRemove"?: boolean;
+        /**
+          * 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.
+         */
+        "allowReorder"?: boolean;
+        /**
+          * Allow drop to replace a file, only works when allowMultiple is false
+         */
+        "allowReplace"?: boolean;
+        /**
+          * Enable or disable the revert processing button
+         */
+        "allowRevert"?: boolean;
+        /**
+          * Set to true to enable custom validity messages.  FilePond will throw an error when a parent form is submitted and it contains invalid files.
+         */
+        "checkValidity"?: boolean;
+        /**
+          * Force chunks even for files smaller than the set chunkSize
+         */
+        "chunkForce"?: boolean;
+        /**
+          * Amount of times, and delayes, between retried uploading of a chunk
+         */
+        "chunkRetryDelays"?: Array<number>;
+        /**
+          * The size of a chunk in bytes
+         */
+        "chunkSize"?: number;
+        /**
+          * Enable chunked uploads, when enabled will automatically cut up files in chunkSize chunks before upload.
+         */
+        "chunkUploads"?: boolean;
+        /**
+          * Show credits at the bottom of the upload element. Structure is like [{label,url}]
+         */
+        "credits"?: false;
+        /**
+          * Sets the disabled attribute to the output field
+         */
+        "disabled"?: boolean;
+        /**
+          * Require drop on the FilePond element itself to catch the file.
+         */
+        "dropOnElement"?: boolean;
+        /**
+          * FilePond will catch all files dropped on the webpage
+         */
+        "dropOnPage"?: boolean;
+        /**
+          * When enabled, files are validated before they are dropped. A file is not added when it's invalid.
+         */
+        "dropValidation"?: boolean;
+        /**
+          * Set to true to require the file to be successfully reverted before continuing.
+         */
+        "forceRevert"?: boolean;
+        /**
+          * The icon used for process actions
+         */
+        "iconProcess"?: string;
+        /**
+          * The icon used for remove actions
+         */
+        "iconRemove"?: string;
+        /**
+          * The icon used for retry actions
+         */
+        "iconRetry"?: string;
+        /**
+          * The icon used for undo actions
+         */
+        "iconUndo"?: string;
+        /**
+          * Ignored file names when handling dropped directories. Dropping directories is not supported on all browsers.
+         */
+        "ignoredFiles"?: Array<any>;
+        /**
+          * Immediately upload new files to the server
+         */
+        "instantUpload"?: boolean;
+        /**
+          * The interval to use before showing each item being added to the list
+         */
+        "itemInsertInterval"?: number;
+        /**
+          * 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
+         */
+        "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.
+         */
+        "labelThousandsSeparator"?: string;
+        /**
+          * The maximum number of files that the pond can handle
+         */
+        "maxFilesCount"?: number;
+        /**
+          * The maxmimum number of files that can be uploaded in parallel
+         */
+        "maxParallelUploads"?: number;
+        "onRemove"?: (event: SallaFileUploadCustomEvent<any>) => void;
+        /**
+          * Sets the required attribute to the output field
+         */
+        "required"?: boolean;
+        /**
+          * A server configuration object describing how FilePond should interact with the server.
+         */
+        "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;
+  } | null;
+        /**
+          * 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;
+    }
+    interface SallaGifting {
+        /**
+          * The product id for which the gifting system is required.
+         */
+        "productId"?: number;
+    }
     interface SallaInfiniteScroll {
         /**
           * Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
@@ -984,6 +2110,10 @@ declare namespace LocalJSX {
          */
         "requireEmail"?: boolean;
     }
+    interface SallaLoyaltyPrizeItem {
+        "item"?: Item;
+        "onPrizeItemSelected"?: (event: SallaLoyaltyPrizeItemCustomEvent<Item>) => void;
+    }
     interface SallaModal {
         /**
           * Align modal content to center, defaults to `false`
@@ -1108,6 +2238,108 @@ declare namespace LocalJSX {
          */
         "oval"?: boolean;
     }
+    interface SallaSelect {
+        /**
+          * Enable multiple item selection
+         */
+        "autocomplete"?: boolean;
+        /**
+          * Enable autofocus
+         */
+        "autofocus"?: boolean;
+        /**
+          * Changes display of selections to chips
+         */
+        "chips"?: boolean;
+        /**
+          * Applied when using clearable and the input is dirty
+         */
+        "clearIcon"?: string;
+        /**
+          * Add input clear functionality, default icon is `sicon-cancel`
+         */
+        "clearable"?: boolean;
+        /**
+          * Applies specified color to the control.
+         */
+        "color"?: 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'gray' | 'dark';
+        /**
+          * Disable the input
+         */
+        "disabled"?: boolean;
+        /**
+          * Remove elevation or box shadow.
+         */
+        "flat"?: boolean;
+        /**
+          * Hides hint if any
+         */
+        "hideDetail"?: boolean;
+        /**
+          * Hint text
+         */
+        "hint"?: string;
+        /**
+          * Set property of items’s disabled value
+         */
+        "itemDisabled"?: string;
+        /**
+          * Set property of items’s text value
+         */
+        "itemText"?: string;
+        /**
+          * Set property of items’s value - must be primitive.  Dot notation is supported.
+         */
+        "itemValue"?: string;
+        /**
+          * Can be an array of objects or array of strings.  When using objects, will look for a text, value and disabled keys.
+         */
+        "items"?: any[];
+        /**
+          * Sets label
+         */
+        "label"?: string;
+        /**
+          * Displays linear progress bar.
+         */
+        "loading"?: boolean;
+        /**
+          * Specifies which color is applied to the progress bar.
+         */
+        "loadingColor"?: string;
+        /**
+          * Enable multiple item selection
+         */
+        "multiple"?: boolean;
+        /**
+          * Forces hint to always be visible.
+         */
+        "persistHint"?: boolean;
+        /**
+          * Sets the input’s placeholder text.
+         */
+        "placeholder"?: string;
+        /**
+          * Enable multiple item selection
+         */
+        "required"?: boolean;
+        /**
+          * Changes the selection behavior to return the object directly  rather than the value specified with item-value
+         */
+        "returnObject"?: boolean;
+        /**
+          * Define appearance of the component
+         */
+        "shape"?: 'underline' | 'outlined';
+        /**
+          * Sizing options
+         */
+        "size"?: 'x-large' | 'large' | 'normal' | 'small' | 'x-small';
+        /**
+          * The selected value
+         */
+        "value"?: any;
+    }
     interface SallaSkeleton {
         /**
           * Set the skeleton height
@@ -1205,6 +2437,7 @@ declare namespace LocalJSX {
           * Event Emitter
          */
         "onEnterClicked"?: (event: SallaTelInputCustomEvent<any>) => void;
+        "onPhoneEntered"?: (event: SallaTelInputCustomEvent<Phone>) => void;
         /**
           * Current mobile number
          */
@@ -1232,6 +2465,9 @@ declare namespace LocalJSX {
         "salla-add-product-button": SallaAddProductButton;
         "salla-button": SallaButton;
         "salla-conditional-fields": SallaConditionalFields;
+        "salla-datetime-picker": SallaDatetimePicker;
+        "salla-file-upload": SallaFileUpload;
+        "salla-gifting": SallaGifting;
         "salla-infinite-scroll": SallaInfiniteScroll;
         "salla-installment": SallaInstallment;
         "salla-list-tile": SallaListTile;
@@ -1239,6 +2475,7 @@ declare namespace LocalJSX {
         "salla-localization-modal": SallaLocalizationModal;
         "salla-login-modal": SallaLoginModal;
         "salla-loyalty": SallaLoyalty;
+        "salla-loyalty-prize-item": SallaLoyaltyPrizeItem;
         "salla-modal": SallaModal;
         "salla-offer-modal": SallaOfferModal;
         "salla-placeholder": SallaPlaceholder;
@@ -1249,6 +2486,7 @@ declare namespace LocalJSX {
         "salla-rating-stars": SallaRatingStars;
         "salla-scopes": SallaScopes;
         "salla-search": SallaSearch;
+        "salla-select": SallaSelect;
         "salla-skeleton": SallaSkeleton;
         "salla-social-share": SallaSocialShare;
         "salla-swiper": SallaSwiper;
@@ -1266,6 +2504,9 @@ declare module "@stencil/core" {
             "salla-add-product-button": LocalJSX.SallaAddProductButton & JSXBase.HTMLAttributes<HTMLSallaAddProductButtonElement>;
             "salla-button": LocalJSX.SallaButton & JSXBase.HTMLAttributes<HTMLSallaButtonElement>;
             "salla-conditional-fields": LocalJSX.SallaConditionalFields & JSXBase.HTMLAttributes<HTMLSallaConditionalFieldsElement>;
+            "salla-datetime-picker": LocalJSX.SallaDatetimePicker & JSXBase.HTMLAttributes<HTMLSallaDatetimePickerElement>;
+            "salla-file-upload": LocalJSX.SallaFileUpload & JSXBase.HTMLAttributes<HTMLSallaFileUploadElement>;
+            "salla-gifting": LocalJSX.SallaGifting & JSXBase.HTMLAttributes<HTMLSallaGiftingElement>;
             "salla-infinite-scroll": LocalJSX.SallaInfiniteScroll & JSXBase.HTMLAttributes<HTMLSallaInfiniteScrollElement>;
             "salla-installment": LocalJSX.SallaInstallment & JSXBase.HTMLAttributes<HTMLSallaInstallmentElement>;
             "salla-list-tile": LocalJSX.SallaListTile & JSXBase.HTMLAttributes<HTMLSallaListTileElement>;
@@ -1273,6 +2514,7 @@ declare module "@stencil/core" {
             "salla-localization-modal": LocalJSX.SallaLocalizationModal & JSXBase.HTMLAttributes<HTMLSallaLocalizationModalElement>;
             "salla-login-modal": LocalJSX.SallaLoginModal & JSXBase.HTMLAttributes<HTMLSallaLoginModalElement>;
             "salla-loyalty": LocalJSX.SallaLoyalty & JSXBase.HTMLAttributes<HTMLSallaLoyaltyElement>;
+            "salla-loyalty-prize-item": LocalJSX.SallaLoyaltyPrizeItem & JSXBase.HTMLAttributes<HTMLSallaLoyaltyPrizeItemElement>;
             "salla-modal": LocalJSX.SallaModal & JSXBase.HTMLAttributes<HTMLSallaModalElement>;
             "salla-offer-modal": LocalJSX.SallaOfferModal & JSXBase.HTMLAttributes<HTMLSallaOfferModalElement>;
             "salla-placeholder": LocalJSX.SallaPlaceholder & JSXBase.HTMLAttributes<HTMLSallaPlaceholderElement>;
@@ -1283,6 +2525,7 @@ declare module "@stencil/core" {
             "salla-rating-stars": LocalJSX.SallaRatingStars & JSXBase.HTMLAttributes<HTMLSallaRatingStarsElement>;
             "salla-scopes": LocalJSX.SallaScopes & JSXBase.HTMLAttributes<HTMLSallaScopesElement>;
             "salla-search": LocalJSX.SallaSearch & JSXBase.HTMLAttributes<HTMLSallaSearchElement>;
+            "salla-select": LocalJSX.SallaSelect & JSXBase.HTMLAttributes<HTMLSallaSelectElement>;
             "salla-skeleton": LocalJSX.SallaSkeleton & JSXBase.HTMLAttributes<HTMLSallaSkeletonElement>;
             "salla-social-share": LocalJSX.SallaSocialShare & JSXBase.HTMLAttributes<HTMLSallaSocialShareElement>;
             "salla-swiper": LocalJSX.SallaSwiper & JSXBase.HTMLAttributes<HTMLSallaSwiperElement>;