@salla.sa/twilight-components
Version:
Salla Web Component
1,542 lines (1,541 loc) • 231 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 { Color, Options } from "./components/salla-color-picker/interfaces";
import { Comment, CommentType } from "./components/salla-comments/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 { Notification } from "./components/salla-notifications/interfaces";
import { OrderQueryParameters } from "./components/salla-orders/interface";
import { Donation, Option as Option1 } from "./components/salla-product-options/interfaces";
import { ReviewType, SortingOption, Source } from "./components/salla-reviews/interfaces";
import { Phone } from "./components/salla-tel-input/interfaces";
import { CustomField } from "./components/salla-user-profile/interfaces";
export { Option } from "./components/salla-booking-field/interfaces";
export { Color, Options } from "./components/salla-color-picker/interfaces";
export { Comment, CommentType } from "./components/salla-comments/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 { Notification } from "./components/salla-notifications/interfaces";
export { OrderQueryParameters } from "./components/salla-orders/interface";
export { Donation, Option as Option1 } from "./components/salla-product-options/interfaces";
export { ReviewType, SortingOption, Source } from "./components/salla-reviews/interfaces";
export { Phone } from "./components/salla-tel-input/interfaces";
export { CustomField } from "./components/salla-user-profile/interfaces";
export namespace Components {
interface SallaAddProductButton {
/**
* Channels.
*/
"channels": string;
/**
* Donating amount.
*/
"donatingAmount": number;
/**
* 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 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 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 SallaCountDown {
/**
* If true, the count down numbers will be appear in a boxes
*/
"boxed": boolean;
/**
* 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;
/**
* Show labels for each count down number
*/
"labeled": boolean;
/**
* The size of the count down
* @default 'md'
*/
"size": 'sm' | 'md' | 'lg';
}
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 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;
/**
* 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>;
/**
* 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 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)
* @default salla.config.get('user.currency_code')
*/
"currency": string;
/**
* Current language (existing or newly selected)
* @default salla.config.get('user.language_code')
*/
"language": string;
/**
* open the component
*/
"open": () => Promise<any>;
/**
* 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 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 input name for the native formData
* @default 'location'
*/
"name": string;
/**
* Open location component
*/
"open": () => Promise<HTMLElement>;
/**
* Disable or enable actions
* @default false
*/
"readonly": boolean;
/**
* Set if the location input is required or not
* @default false
*/
"required": boolean;
/**
* Sets the search bar visibility.
* @default false
*/
"searchable": boolean;
/**
* Sets map style.
* @default 'light'
*/
"theme": string;
/**
* Sets start map zoom.
* @default 10
*/
"zoom": number;
}
interface SallaMenu {
/**
* Limiting the number of menu items
*/
"limit": number;
/**
* The source of the menu, specifying whether it is a header or footer menu.
* @default "header"
*/
"source": Sources;
/**
* The source value, a stringified JSON representation of the menu content.
*/
"sourceValue"?: string;
/**
* Boolean indicating whether the menu is a top navigation menu.
*/
"topnav": boolean;
/**
* Boolean indicating whether to use React Link elements for menu links.
* @default false
*/
"useReactLink": boolean;
}
interface SallaMetadata {
/**
* The entity type.
* @default 'product'
*/
"entity": string;
/**
* The id of the product/the endity to which the specs are going to be fetched for.
*/
"entityId": number | number[] | string;
}
interface SallaModal {
/**
* Align modal content to center, defaults to `false`
* @default false
*/
"centered": boolean;
/**
* close the modal
*/
"close": () => Promise<HTMLElement>;
/**
* open the modal on rendering
* @default false
*/
"hasSkeleton": boolean;
/**
* Set the style of the header icon.
* @default undefined
*/
"iconStyle": 'error' | 'success' | 'primary' | 'normal';
/**
* Sets the modal 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 modal body or not, defaults to `false`
* @default false
*/
"noPadding": boolean;
/**
* Open the modal
*/
"open": () => Promise<HTMLElement>;
/**
* The position of the modal
* @default 'middle'
*/
"position": 'top' | 'middle' | 'bottom';
/**
* Change the Modal Title
* @param modalTitle
*/
"setTitle": (modalTitle: any) => Promise<HTMLElement>;
/**
* Stop the loading
*/
"stopLoading": () => Promise<HTMLElement>;
/**
* Set modal sub title.
* @default ''
*/
"subTitle": string;
/**
* Show subtitle before the title or not, defaults to `false` (after the title)
* @default false
*/
"subTitleFirst": boolean;
/**
* open the modal on rendering
* @default false
*/
"visible": boolean;
/**
* The size of the modal
* @default 'md'
*/
"width": 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
}
interface SallaNotificationItem {
/**
* Notification instance to render.
*/
"notification": Notification;
}
interface SallaNotifications {
/**
* Number of notifications to load per request.
* @default 10
*/
"itemPerPage": number;
/**
* Load more text
*/
"loadMoreText": string;
}
/**
* `salla-offer` is a StencilJS component that displays offers, categories, products, banks, and discount information.
* It uses the `salla-slider` component for carousel functionality.
* @csspart custom - Custom CSS part to target specific elements in the component.
* @example <salla-offer product-id="123"></salla-offer>
*/
interface SallaOffer {
/**
* Custom Card Component for the Salla Products List. This component allows you to customize the appearance of individual product cards within a Salla Products List.
* @example <salla-products-list product-card-component="my-custom-card-style1" ... <salla-products-list product-card-component="my-custom-card-style2" ...
* @default 'custom-salla-product-card'
*/
"productCardComponent": string;
}
interface SallaOfferModal {
/**
* Show the available offers for the product
* @param product_id
*/
"open": (product_id: number) => Promise<any>;
/**
* Show offer details
* @param offer
*/
"showOffer": (offer: any) => Promise<void>;
}
interface SallaOrderSummary {
/**
* The order ID to fetch items from
*/
"orderId"?: number;
}
interface SallaOrders {
/**
* Load more text
*/
"loadMoreText": string;
/**
* Query Parameter to send along with the fetch request
*/
"params": OrderQueryParameters;
}
interface SallaPayments {
/**
* Array of the payments/items that are not supported, ex: ["sbc", "made-in-ksa", "cod", "mada", ""].
* @default []
*/
"exclude": string[];
}
interface SallaPlaceholder {
/**
* Defines the alignment of contents. Defaults to [`left`]
* @default 'left'
*/
"alignment": 'left' | 'center' | 'right';
/**
* Custom icon to display, defaults to [`Inbox`], can be any valid svg icon or inline element with font icon
* @default Inbox
*/
"icon": string;
/**
* The size of the icon. Defaults to [`md`] = 45px for font icon & width/height: 3.5rem for svg icon
* @default 'md'
*/
"iconSize": 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
}
interface SallaPriceRange {
/**
* Currently selected price filter data
*/
"filtersData": any;
/**
* Maximum price threshold value
*/
"maxPrice": any;
/**
* Minimum price threshold value
*/
"minPrice": any;
/**
* Product price range filter option object instance
*/
"option": Filter;
/**
* reset the price range inputs
*/
"reset": () => Promise<void>;
}
interface SallaProductAvailability {
/**
* Notification channels
*/
"channels": 'sms' | 'email' | 'sms,email';
/**
* is current user already subscribed
* @default false
*/
"isSubscribed": boolean;
/**
* Listen to product options availability.
* @default false
*/
"notifyOptionsAvailability": boolean;
/**
* product id that can visitor subscribe to its availability notification
*/
"productId": number;
}
interface SallaProductCard {
/**
* Full image card.
*/
"fullImage": boolean;
/**
* Hide add to cart button.
*/
"hideAddBtn": boolean;
/**
* Horizontal card.
*/
"horizontal": boolean;
/**
* Special card.
*/
"isSpecial": boolean;
/**
* Minimal card.
*/
"minimal": boolean;
/**
* Product information.
*/
"product": string | object;
/**