@salla.sa/twilight-components
Version:
Salla Web Component
1,507 lines • 293 kB
TypeScript
/* eslint-disable */
/* tslint:disable */
/**
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { Option } from "./components/salla-booking-field/interfaces";
import { AddressCreatedEvent, BulletDeliveryConfirmedEvent, HeaderContextUpdateEvent } from "./components/salla-bullet-delivery/interfaces";
import { Color, Options } from "./components/salla-color-picker/interfaces";
import { Comment, CommentType } from "./components/salla-comments/interfaces";
import { CustomField } from "./components/salla-user-profile/interfaces";
import { DateLimit, DateOption, LocaleKey } from "./components/salla-datetime-picker/interfaces";
import { FilePondFile } from "./components/salla-file-upload/interfaces";
import { FilePondErrorDescription } from "filepond/types/index";
import { Filter } from "./components/salla-filters/interfaces";
import { Item, LoyaltyProgram } from "./components/salla-loyalty/loyalty-schema";
import { Sources } from "./components/salla-menu/interfaces";
import { BundleProduct, BundleSection, SelectedOption } from "./components/salla-multiple-bundle-product/interfaces";
import { Notification } from "./components/salla-notifications/interfaces";
import { OrderProduct, ProductOption } from "./components/salla-order-details/interfaces";
import { Order, OrderQueryParameters } from "./components/salla-orders/interface";
import { Donation, Option as Option1 } from "./components/salla-product-options/interfaces";
import { SallaSliderProps } from "./components/salla-slider/salla-slider";
import { Review } from "./components/salla-review-card/interfaces";
import { ReviewType, SortingOption, Source } from "./components/salla-reviews/interfaces";
import { Phone } from "./components/salla-tel-input/interfaces";
export { Option } from "./components/salla-booking-field/interfaces";
export { AddressCreatedEvent, BulletDeliveryConfirmedEvent, HeaderContextUpdateEvent } from "./components/salla-bullet-delivery/interfaces";
export { Color, Options } from "./components/salla-color-picker/interfaces";
export { Comment, CommentType } from "./components/salla-comments/interfaces";
export { CustomField } from "./components/salla-user-profile/interfaces";
export { DateLimit, DateOption, LocaleKey } from "./components/salla-datetime-picker/interfaces";
export { FilePondFile } from "./components/salla-file-upload/interfaces";
export { FilePondErrorDescription } from "filepond/types/index";
export { Filter } from "./components/salla-filters/interfaces";
export { Item, LoyaltyProgram } from "./components/salla-loyalty/loyalty-schema";
export { Sources } from "./components/salla-menu/interfaces";
export { BundleProduct, BundleSection, SelectedOption } from "./components/salla-multiple-bundle-product/interfaces";
export { Notification } from "./components/salla-notifications/interfaces";
export { OrderProduct, ProductOption } from "./components/salla-order-details/interfaces";
export { Order, OrderQueryParameters } from "./components/salla-orders/interface";
export { Donation, Option as Option1 } from "./components/salla-product-options/interfaces";
export { SallaSliderProps } from "./components/salla-slider/salla-slider";
export { Review } from "./components/salla-review-card/interfaces";
export { ReviewType, SortingOption, Source } from "./components/salla-reviews/interfaces";
export { Phone } from "./components/salla-tel-input/interfaces";
export namespace Components {
/**
* @salla /ui-components
* The `salla-accordion` component represents an accordion element.
* Use this component to encapsulate content within a collapsible section.
*/
interface SallaAccordion {
/**
* Whether the accordion has a border. Default is false.
* @default false
*/
"bordered": boolean;
/**
* Detect if accordion collapsed or not.
* @default true
*/
"collapsed": boolean;
/**
* Should the accordion be collapsible or not. Default is true.
* @default true
*/
"collapsible": boolean;
/**
* The size of the accordion elements.
* @default "md"
*/
"size": "sm" | "md" | "lg";
}
/**
* @salla /ui-components
* The `salla-accordion-body` component represents the body/content of an accordion.
*/
interface SallaAccordionBody {
}
/**
* @salla /ui-components
* The `salla-accordion-head` component represents the header of an accordion.
* Available slots:
* - `title`: The main title content
* - `progress`: Progress indicator content
* - `html`: Raw HTML content (optional)
* - `note`: Note content displayed at the end
*/
interface SallaAccordionHead {
/**
* Current collapsed state
* @default true
*/
"collapsed": boolean;
/**
* Should the accordion be collapsible or not.
* @default false
*/
"collapsible": boolean;
}
interface SallaAddProductButton {
/**
* Channels.
*/
"channels": string;
/**
* Donating amount.
*/
"donatingAmount": number;
/**
* Has Pre Order
* @default false
*/
"hasPreOrder": boolean;
/**
* Listen to product options availability.
*/
"notifyOptionsAvailability": boolean;
/**
* Product id
*/
"productId": any;
/**
* Product Status.Defaults to `sale`
* @default 'sale'
*/
"productStatus": 'sale' | 'out' | 'out-and-notify';
/**
* Product type. Defaults to `product`
* @default 'product'
*/
"productType": 'product' | 'service' | 'codes' | 'digital' | 'food' | 'donating' | 'group_products' | 'booking' | 'financial_support';
/**
* Product Quantity
*/
"quantity": number;
/**
* Support Quick Pay Button
*/
"quickBuy": boolean;
/**
* Subscribed Options ex: "[[139487,2394739],[1212,1544]]"
*/
"subscribedOptions": string;
/**
* Support themes that have a sticky bar
*/
"supportStickyBar": boolean;
}
interface SallaAdvertisement {
}
interface SallaAlert {
/**
* Icon type (defaults to variant)
*/
"icon"?: 'info' | 'success' | 'warning' | 'error' | 'none';
/**
* Message text
*/
"message": string;
/**
* Variant theme
* @default 'info'
*/
"variant": 'info' | 'success' | 'warning' | 'error';
}
interface SallaAppInstallAlert {
}
interface SallaAppsIcons {
/**
* The title to display.
*/
"appsTitle": string;
/**
* Flag to show or hide title.
*/
"hideTitle": boolean;
/**
* Display flag to horizontal/vertical.
*/
"vertical": boolean;
}
interface SallaBookingField {
/**
* The booking option configuration
*/
"option": Option;
/**
* The ID of the product for which the booking is being made
*/
"productId": number;
}
interface SallaBottomAlert {
/**
* Button label - used when type is link and popup
*/
"actionLabel": string;
/**
* Button url - used when type is link
*/
"actionUrl": string;
/**
* Alert Icon class from salla icons library - ex: sicon-user
*/
"icon": string;
/**
* Alert Message
*/
"message": string;
/**
* Alert Type
* @default 'popup'
*/
"type": 'link' | 'popup' | 'banner';
}
/**
* @name SallaBreadcrumb
* @description A StencilJS component for rendering breadcrumb navigation.
* @tag salla-breadcrumb
*/
interface SallaBreadcrumb {
}
interface SallaBulletDelivery {
/**
* Closes the bullet delivery modal
*/
"close": () => Promise<HTMLElement>;
/**
* Opens the bullet delivery modal
*/
"open": () => Promise<void>;
}
interface SallaButton {
/**
* Button Color
* @default 'primary'
*/
"color": 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'gray' | 'dark';
/**
* Add `disabled` attribute
*/
"disable": () => Promise<HTMLElement>;
/**
* Is the button currently disabled
* @default false
*/
"disabled": boolean;
/**
* Remove `disabled` attribute
*/
"enable": () => Promise<HTMLElement>;
/**
* Button Fill
* @default 'solid'
*/
"fill": 'solid' | 'outline' | 'none';
/**
* Button with href as normal link
*/
"href": string;
/**
* Run loading animation
*/
"load": () => Promise<HTMLElement>;
/**
* If there is need to change loader position, pass the position
* @default 'after'
*/
"loaderPosition": 'start' | 'end' | 'center' | 'after';
/**
* Is the button currently loading
* @default false
*/
"loading": boolean;
/**
* Changing the body of the button
* @param html
*/
"setText": (html: string) => Promise<HTMLElement>;
/**
* Button Type
* @default 'btn'
*/
"shape": 'link' | 'icon' | 'btn';
/**
* Button Size
* @default 'medium'
*/
"size": 'small' | 'large' | 'medium';
/**
* Stop loading animation
*/
"stop": () => Promise<HTMLElement>;
/**
* Determines the type of the rendered button. By default, the type is set to "button," making it a general-purpose button. Setting `type` to "submit" makes the button behave as a submit button within a form, triggering form submission. Possible values for `type` include "button," "submit," "reset," and "menu.". Possible values and their usage are as follows: "button" (default, used for general button functionality), "reset" (resets form fields to their default values), and "menu" (represents a button that, when activated, displays a context menu).
* @default "button"
*/
"type": string;
/**
* Button Width
* @default 'normal'
*/
"width": 'wide' | 'normal';
}
interface SallaCartItemOffers {
/**
* The unique identifier of the cart item
*/
"itemId": number;
/**
* JSON string containing the offers associated with the cart item
*/
"offers": string;
/**
* The original price of the product in the cart
*/
"productPrice": number;
/**
* The quantity of the cart item
*/
"quantity": number;
}
interface SallaCartSummary {
/**
* Animate product Image to cart summary
* @param image the image element to animate
*/
"animateToCart": (image: any) => Promise<void>;
/**
* Show cart label
*/
"showCartLabel": boolean;
}
interface SallaColorPicker {
/**
* Close/Hide the picker.
*/
"closePicker": () => Promise<void>;
/**
* Initial color for the picker.
*/
"color": string;
/**
* Release all resources used by this picker instance.
*/
"destroyPicker": () => Promise<void>;
/**
* Whether to enable adjusting the alpha channel.
* @default false
*/
"enableAlpha": boolean;
/**
* How to display the selected color in the text field (the text field still supports input in any format).
* @default 'hex'
*/
"format": 'hex' | 'hsl' | 'rgb';
/**
* Move the popup to a different parent, optionally opening it at the same time. (Usually a new .parent and .color).
* @param option Whether to open the popup immediately.
* @param openImmediately
*/
"movePopUp": (options: Options, openImmediately: boolean) => Promise<void>;
/**
* File input name for the native formData
* @default 'color'
*/
"name": string;
/**
* Show/open the picker.
*/
"openPicker": () => Promise<void>;
/**
* Set if the color picker input is required or not
* @default false
*/
"required": boolean;
/**
* Set/initialize the picker's color. Color name, RGBA/HSLA/HEX string, or RGBA array.
* @param color If true, won't trigger onChange.
* @param triggerEvent
*/
"setColorValue": (color: string, triggerEvent: boolean) => Promise<void>;
/**
* Set the picker options. (Usually a new .parent and .color).
* @param options
*/
"setPickerOption": (options: Options) => Promise<void>;
/**
* Whether to have a "Cancel" button which closes the popup.
* @default false
*/
"showCancelButton": boolean;
/**
* Whether to show a text field for color value editing.
* @default true
*/
"showTextField": boolean;
}
interface SallaCommentForm {
/**
* The ID of the item(as defined in the type), where the comment is for. defaults to `salla.config.get('page.id')`
*/
"itemId"?: string | number;
/**
* To show the avatar or not in the comment form
*/
"showAvatar": boolean;
/**
* Type of entity the comment is being submitted for. Defaults to `salla.url.is_page('page-single') ? 'page' : 'product'`
*/
"type": 'product' | 'page' | 'blog';
}
interface SallaCommentItem {
/**
* Single Comment Instance
*/
"comment": Comment;
/**
* Hide Bought
*/
"hideBought": Boolean;
}
interface SallaComments {
/**
* Block Title
*/
"blockTitle": string;
/**
* Hide Bought
* @default false
*/
"hideBought": boolean;
/**
* Load more text
*/
"hideForm": boolean;
/**
* Hide Title
*/
"hideTitle": boolean;
/**
* Page or product ID
*/
"itemId": number;
/**
* Load more text
*/
"loadMoreText": string;
/**
* Reloads the comments data from the server
*/
"reload": () => Promise<void>;
/**
* Show or hide avatar
* @default false
*/
"showFormAvatar": boolean;
/**
* Sort comments
*/
"sort": string | 'latest' | 'oldest' | 'bottom_rating' | 'top_rating';
/**
* Determines if the comments are testimonials
* @default false
*/
"testimonials": boolean;
/**
* Comment Type
* @default CommentType.PAGE
*/
"type": CommentType.PAGE | CommentType.PRODUCT | CommentType.BLOG;
}
/**
* its to easy to use, currenlty its support select & checkbox input as trigger for show/hide the dom
* the dom you can put it like this data-show-when="{name of the field} {= or !=} {value of the field}"
*/
interface SallaConditionalFields {
}
interface SallaConditionalOffer {
}
interface SallaContacts {
/**
* Section title for social block of footer.
*/
"contactsTitle": string;
/**
* Flag to toggle title visibility.
*/
"hideTitle": boolean;
/**
* Flag to toggle list of contents whether vertical or horizontal.
*/
"horizontal": boolean;
/**
* Flag condition to show icon only or icon with label
*/
"iconsOnly": boolean;
/**
* Conditional flag to check whether the content is header or not.
*/
"isHeader": boolean;
}
interface SallaCookiesBar {
/**
* Accept cookies consent.
*/
"accept": () => Promise<HTMLElement>;
/**
* Reject cookies consent.
*/
"reject": () => Promise<HTMLElement>;
}
interface SallaCountDown {
/**
* If true, the count down numbers will be appear in a boxes
*/
"boxed": boolean;
/**
* The button href to show with the countdown
*/
"buttonHref"?: string;
/**
* The button icon to show with the countdown
*/
"buttonIcon"?: string;
/**
* The button text to show with the countdown
*/
"buttonText"?: string;
/**
* The color of the count down
* @default 'dark'
*/
"color": 'primary' | 'light' | 'dark';
/**
* The date to count down to Format: MMM DD, YYYY HH:mm:ss (e.g. Jan 2, 2023 16:37:52)
*/
"date": string;
/**
* The digits lang to show in the count down
* @default 'auto'
*/
"digits": 'en' | 'auto';
/**
* End the count down
*/
"endCountDown": () => Promise<void>;
/**
* If true, the count down will end at the end of the day
*/
"endOfDay": boolean;
/**
* The text to show when the count down ends
*/
"endText": string;
/**
* If true, applies compact horizontal layout
*/
"horizontal"?: boolean;
/**
* Show labels for each count down number
*/
"labeled": boolean;
/**
* The pre-order date Format: { availability_date: string, end_date: string } availability_date: The date to count down to Format: MMM DD, YYYY HH:mm:ss (e.g. Jan 2, 2023 16:37:52) end_date: The date to count down to Format: MMM DD, YYYY HH:mm:ss (e.g. Jan 2, 2023 16:37:52)
*/
"preOrder"?: PreOrder | string;
/**
* The prefix text to show before the countdown
*/
"prefixText"?: string;
/**
* The size of the count down
* @default 'md'
*/
"size": 'sm' | 'md' | 'lg';
/**
* If true, renders a slot for an action button alongside the countdown
*/
"withButton"?: boolean;
}
interface SallaCustomFields {
/**
* The list of custom fields to render. Can be a JSON string or an array of objects.
*/
"fields": string | CustomField[];
/**
* The URL to send file uploads to.
*/
"fileUploadUrl": string;
/**
* Gets the current values of all fields, formatted for submission.
*/
"getFieldValues": () => Promise<{ [key: string]: unknown; }>;
/**
* Whether the fields can be edited by the user.
* @default true
*/
"isEditable": boolean;
/**
* Update the displayed fields programmatically.
*/
"setFields": (fields: CustomField[]) => Promise<void>;
/**
* Validates all required fields and updates the error state. Returns true if valid.
*/
"validateFields": () => Promise<boolean>;
}
interface SallaDatetimePicker {
/**
* Allows the user to enter a date directly into the input field. By default, direct entry is disabled.
* @default true
*/
"allowInput": boolean;
/**
* Allows the preloading of an invalid date. When disabled, the field will be cleared if the provided date is invalid
* @default false
*/
"allowInvalidPreload": boolean;
/**
* Exactly the same as date format, but for the altInput field.
* @default "F j, Y"
*/
"altFormat": string;
/**
* Show the user a readable date (as per altFormat), but return something totally different to the server.
* @default false
*/
"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.
* @default undefined
*/
"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.
* @default "F j, Y"
*/
"ariaDateFormat": string;
/**
* Whether the default time should be auto-filled when the input is empty and gains or loses focus.
* @default true
*/
"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()]
* @default true
*/
"clickOpens": boolean;
/**
* Whether calendar should close after date selection or not
* @default true
*/
"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.
* @default "Y-m-d"
*/
"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
* @default 12
*/
"defaultHour": number;
/**
* Initial value of the minute element, when no date is selected
* @default 0
*/
"defaultMinute": number;
/**
* Initial value of the seconds element, when no date is selected
* @default 0
*/
"defaultSeconds": number;
/**
* Disables certain dates, preventing them from being selected. See https://chmln.github.io/flatpickr/examples/#disabling-specific-dates
* @default []
*/
"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.
* @default false
*/
"disableMobile": boolean;
/**
* Whether the input is disabled
* @default false
*/
"disabled": boolean;
/**
* Disables all dates except these specified. See https://chmln.github.io/flatpickr/examples/#disabling-all-dates-except-select-few
* @default [(_) => true]
*/
"enable": DateLimit<DateOption>[];
/**
* Enables seconds selection in the time picker.
* @default false
*/
"enableSeconds": boolean;
/**
* Enables the time picker
* @default false
*/
"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)
* @default 1
*/
"hourIncrement": number;
/**
* Displays the calendar inline
* @default false
*/
"inline": boolean;
/**
* The locale, either as a string (e.g. "ar", "en") or as an object. See https://chmln.github.io/flatpickr/localization/
* @default "en"
*/
"locale": LocaleKey;
/**
* The maximum date that a user can pick to (inclusive).
* @default null
*/
"maxDate": DateOption;
/**
* The minimum date that a user can start picking from (inclusive).
* @default null
*/
"maxTime": DateOption;
/**
* The minimum date that a user can start picking from (inclusive).
* @default null
*/
"minDate": DateOption;
/**
* The minimum time that a user can start picking from (inclusive).
* @default null
*/
"minTime": DateOption;
/**
* Adjusts the step for the minute input (incl. scrolling) Defaults to 5
* @default 5
*/
"minuteIncrement": number;
/**
* Date selection mode, defaults to "single"
* @default "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.
* @default "dropdown"
*/
"monthSelectorType": "dropdown" | "static";
/**
* the name for the input
*/
"name": string;
/**
* HTML for the arrow icon, used to switch months.
* @default '<span class="sicon-keyboard_arrow_right"></span>'
*/
"nextArrow": string;
/**
* Hides the day selection in calendar. Use it along with enableTime to create a time picker.
* @default false
*/
"noCalendar": boolean;
/**
* Placeholder text to show on the input element
* @default salla.lang.get('blocks.buy_as_gift.select_send_date_and_time')
*/
"placeholder": string;
/**
* How the calendar should be positioned with regards to the input. Defaults to "auto"
* @default "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.
* @default '<span class="sicon-keyboard_arrow_left"></span>'
*/
"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"
* @default false
*/
"shorthandCurrentMonth": boolean;
/**
* The number of months to be shown at the same time when displaying the calendar.
* @default 1
*/
"showMonths": number;
/**
* Position the calendar inside the wrapper and next to the input element*.
* @default false
*/
"static": boolean;
/**
* Displays time picker in 24 hour mode without AM/PM selection when enabled.
* @default false
*/
"time_24hr": boolean;
/**
* Two way data binding to retrieve the selected date[time] value
* @default null
*/
"value": string;
/**
* Enables display of week numbers in calendar.
* @default false
*/
"weekNumbers": boolean;
/**
* See https://chmln.github.io/flatpickr/examples/#flatpickr-external-elements
* @default false
*/
"wrap": boolean;
}
interface SallaDrawer {
/**
* Align drawer content to center, defaults to `false`
* @default false
*/
"centered": boolean;
/**
* close the drawer
*/
"close": () => Promise<HTMLElement>;
/**
* open the drawer on rendering
* @default false
*/
"hasSkeleton": boolean;
/**
* Set the style of the header icon.
* @default undefined
*/
"iconStyle": 'error' | 'success' | 'primary' | 'normal';
/**
* Sets the drawer to be closable. Defaults to `true`
* @default true
*/
"isClosable": boolean;
/**
* Show loading in the middle
* @default false
*/
"isLoading": boolean;
/**
* Start loading
*/
"loading": () => Promise<HTMLElement>;
/**
* Avoid padding in the drawer body or not, defaults to `false`
* @default false
*/
"noPadding": boolean;
/**
* Open the drawer
*/
"open": () => Promise<HTMLElement>;
/**
* The position of the drawer (left or right)
* @default 'right'
*/
"position": 'left' | 'right';
/**
* Change the Drawer Title
* @param drawerTitle
*/
"setTitle": (drawerTitle: any) => Promise<HTMLElement>;
/**
* Stop the loading
*/
"stopLoading": () => Promise<HTMLElement>;
/**
* Set drawer sub title.
* @default ''
*/
"subTitle": string;
/**
* Show subtitle before the title or not, defaults to `false` (after the title)
* @default false
*/
"subTitleFirst": boolean;
/**
* open the drawer on rendering
* @default false
*/
"visible": boolean;
/**
* The width of the drawer
* @default 'md'
*/
"width": 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
}
interface SallaFileUpload {
/**
* Accepted file types
* @default "image/png, image/jpeg, image/jpg, image/gif"
*/
"accept": string;
/**
* Enable or disable file browser
* @default true
*/
"allowBrowse": boolean;
/**
* Enable or disable drag n' drop
* @default true
*/
"allowDrop": boolean;
/**
* Enable or disable preview mode
* @default true
*/
"allowImagePreview": 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
* @default true
*/
"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
* @default true
*/
"allowReplace": boolean;
/**
* Enable or disable the revert processing button
* @default true
*/
"allowRevert": boolean;
/**
* to prepare the upload url automatically pass this prop, ex to upload attach file in cart Item.
*/
"cartItemId"?: string;
/**
* 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
* @default [500, 1000, 3000]
*/
"chunkRetryDelays": Array<number>;
/**
* The size of a chunk in bytes
* @default 5000000
*/
"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.
* @default true
*/
"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;
/**
* If current file has id, pass it here, to be passed back in the `removed` event
*/
"fileId"?: number;
/**
* Fixed image poster height, overrides min and max preview height
* @default null
*/
"filePosterHeight": number;
/**
* The uploaded files as json `[{url:"...", id:123}]` for delete possibility
*/
"files": string;
/**
* Set to true to require the file to be successfully reverted before continuing.
*/
"forceRevert": boolean;
/**
* json formData to be injected in the submit request
* @default "{}"
*/
"formData": string;
/**
* The original height of the uploader, will be used to reset the height after the image is removed.
*/
"height": string;
/**
* The icon used for process actions
* @default '<svg>...</svg>'
*/
"iconProcess": string;
/**
* The icon used for remove actions
* @default '<svg>...</svg>'
*/
"iconRemove": string;
/**
* The icon used for retry actions
* @default '<svg>...</svg>'
*/
"iconRetry": string;
/**
* The icon used for undo actions
* @default '<svg>...</svg>'
*/
"iconUndo": string;
/**
* Ignored file names when handling dropped directories. Dropping directories is not supported on all browsers.
* @default ['.ds_store', 'thumbs.db', 'desktop.ini']
*/
"ignoredFiles": Array<any>;
/**
* Fixed image preview height, overrides min and max preview height
* @default null
*/
"imagePreviewHeight": number;
/**
* Immediately upload new files to the server
*/
"instantUpload": boolean;
/**
* The interval to use before showing each item being added to the list
* @default 75
*/
"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
* @default 'after'
*/
"itemInsertLocation": 'before' | 'after' | ((a: FilePondFile, b: FilePondFile) => number);
/**
* The decimal separator used to render numbers. By default this is determined automatically.
* @default undefined
*/
"labelDecimalSeparator": 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;
/**
* The thousdands separator used to render numbers. By default this is determined automatically.
* @default undefined
*/
"labelThousandsSeparator": string;
/**
* The maximum size of a file, for instance 2MB or 750KB
*/
"maxFileSize": `${number}MB` | `${number}KB}`;
/**
* The maximum number of files that the pond can handle
* @default 1
*/
"maxFilesCount": number;
/**
* The maxmimum number of files that can be uploaded in parallel
* @default 3
*/
"maxParallelUploads": number;
/**
* The submit request method.
* @default 'POST'
*/
"method": string;
/**
* File input name for the native formData
*/
"name"?: string;
/**
* File input name in the request payload
*/
"payloadName": string;
/**
* Allow to pass extra params to be sent with the upload request
* @default {}
*/
"payloadParams"?: Record<string, unknown>;
/**
* Set the component to be profile image uploader with a preview and a circular shape
* @default false
*/
"profileImage": boolean;
/**
* Sets the required attribute to the output field
*/
"required": boolean;
/**
* Method to set option for filepond
*/
"setOption": (key: string, value: string | number) => Promise<void>;
/**
* 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;
/**
* Type to be sent to backend
*/
"type": string;
/**
* The url to submit the image into.
*/
"url": string;
/**
* The uploaded image link or URL
*/
"value": any;
}
interface SallaFilters {
/**
* Apply filter action.
*/
"applyFilters": () => Promise<void>;
/**
* Array of filter options
*/
"filters"?: Filter[];
/**
* Method to get filter data.
*/
"getFilters": () => Promise<any>;
/**
* Reset selected filters.
*/
"resetFilters": () => Promise<void>;
}
interface SallaFiltersWidget {
/**
* Selected filter options value.
*/
"filtersData": object;
/**
* Filter option along with possible values.
*/
"option": Filter;
/**
* Reset selected filter options.
*/
"reset": () => Promise<void>;
/**
* Asynchronously sets the height of a widget element to its current height, allowing for smooth transitions. This function is often used in scenarios where the widget's content changes dynamically, and animating the height adjustment is desired for a smoother user experience.
* @param delay - Optional. The delay (in milliseconds) before updating the widget height. Defaults to 250 milliseconds.
* @returns - A Promise that resolves once the widget height is set after the specified delay.
* @example // Set widget height with the default delay (250 milliseconds) await setWidgetHeight(); // Set widget height with a custom delay (e.g., 500 milliseconds) await setWidgetHeight(500);
*/
"setWidgetHeight": (delay?: number) => Promise<void>;
/**
* Action to show more or less filter options.
*/
"showMore": () => Promise<void>;
/**
* Action to toggle widget open or closed (expand/ collapse).
*/
"toggleWidget": () => Promise<void>;
/**
* Show more or less filter options.
*/
"withLoadMore": boolean;
}
interface SallaGifting {
/**
* Hide / close the gifting modal window
*/
"close": () => Promise<HTMLElement>;
/**
* The form selector to be used to get the form data
* @default 'form.product-form, form.form--product-options'
*/
"formSelector": string;
/**
* Go to the step 2
*/
"goToStep2": () => Promise<void>;
/**
* Show / Open the gifting modal window
*/
"open": () => Promise<any>;
/**
* Is Physcial products
*/
"physicalProducts": boolean;
/**
* The product id for which the gifting system is required.
*/
"productId": number;
/**
* Is Vertical widget
*/
"vertical": boolean;
/**
* Widget subtitle
*/
"widgetSubtitle": string;
/**
* Widget title
*/
"widgetTitle": string;
}
interface SallaHook {
/**
* Mounts a given HTML element into the hook position.
* @param element The element to inject.
*/
"mount": (element: HTMLElement) => Promise<void>;
/**
* The unique name to identify the hook position.
*/
"name": string;
}
interface SallaInfiniteScroll {
/**
* Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
* @default false
*/
"autoload": boolean;
/**
* Class selector to know the container if it's not the host `<salla-infinite-scroll>`
* @default 'salla-infinite-scroll'
*/
"container": string;
/**
* Class selector to know list items
* @default 'salla-infinite-scroll > *'
*/
"item": string;
/**
* Load more text
*/
"loadMoreText": string;
/**
* Next Page element
* @default ''
*/
"nextPage": string;
}
interface SallaInstallment {
/**
* Country code
* @default salla.config.get('user.country_code')
*/
"country": string;
/**
* Currency code
* @default salla.config.get('user.currency_code')
*/
"currency": string;
/**
* Language code
* @default salla.config.get('user.language_code')
*/
"language": string;
/**
* Current product price
*/
"price": string;
}
interface SallaListTile {
/**
* Designates the component as anchor and applies the `href` attribute.
* @default undefined
*/
"href": string | undefined;
/**
* Designates the target attribute. This should only be applied when using the `href` prop.
* @default "_self"
*/
"target": "_blank" | "_self" | "_parent" | "_top" | "framename";
}
interface SallaLoading {
/**
* Spinner background color.
* @default "#e5e7eb"
*/
"bgColor": string;
/**
* Spinner content color.
* @default undefined
*/
"color": string;
/**
* Sets the diameter of the circle in pixels, Defaults to `32`
* @default 32
*/
"size": number | string;
/**
* Sets the stroke of the circle (border) in pixels, Defaults to `4`
* @default 2
*/
"width": number | string;
}
interface SallaLocalizationModal {
/**
* Hide the component
*/
"close": () => Promise<HTMLElement>;
/**
* Current currency (existing or newly selected)
*/
"currency": string;
/**
* Current language (existing or newly selected)
*/
"language": string;
/**
* open the component
*/
"open": () => Promise<any>;
/**
* To show the trigger button or not
* @default false
*/
"showTrigger": boolean;
/**
* Change currency and language to the selected ones.
*/
"submit": () => Promise<void>;
}
interface SallaLoginModal {
/**
* The API endpoint for authentication
*/
"api": string;
/**
* Custom headers to be sent with API requests
*/
"headers": { [key: string]: string } | string;
/**
* Display the login inline
*/
"inline": boolean;
/**
* Does the merchant allow to login using email
*/
"isEmailAllowed": boolean;
/**
* Does the merchant require registration with email & mobile
* @default false
*/
"isEmailRequired": boolean;
/**
* Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
* @default true
*/
"isMobileAllowed": boolean;
/**
* Open login component
*/
"open": (_event?: any) => Promise<void | HTMLElement>;
/**
* The store ID for authentication
*/
"storeId": string | number;
/**
* Once the api verify success, it will be login the customer in web pages
* @default true
*/
"supportWebAuth": boolean;
/**
* Reload after a successful login
* @default false
*/
"withoutReload": boolean;
}
interface SallaLoyalty {
/**
* Does the merchant allow to login using email
* @default true
*/
"allowEmail": boolean;
/**
* Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
* @default true
*/
"allowMobile": boolean;
/**
* Hide loyalty modal
*/
"close": () => Promise<HTMLElement>;
/**
* Available customer points with which they can exchange.
*/
"customerPoints": number;
/**
* Exchange loyalty points with the selected prize item
* @param loyalty_prize_id
*/
"exchangeLoyaltyPoint": () => Promise<any>;
/**
* Message to show for guest users.
*/
"guestMessage": string;
/**
* Show loyalty modal
*/
"open": () => Promise<any>;
/**
* The exchanged prize point
*/
"prizePoints": string | number;
/**
* The prize title
*/
"prizeTitle": string;
/**
* Does the merchant require registration with email & mobile
* @default false
*/
"requireEmail": boolean;
/**
* Cancel Exchanged prizes
*/
"resetExchange": () => Promise<any>;
}
interface SallaLoyaltyPrizeItem {
/**
* Prize item to be displayed in this component.
*/
"item": Item;
}
interface SallaLoyaltyProgram {
}
interface SallaMaintenanceAlert {
}
interface SallaMap {
/**
* Sets google api key value, default Merchant key
*/
"apiKey": string;
/**
* Latitude coordinate, defaults to current user location
*/
"lat": number;
/**
* Longitude coordinate, defaults to current user location
*/
"lng": number;
/**
* Modal Title
*/
"modalTitle": string;
/**
* File i