@salla.sa/twilight-components
Version:
Salla Web Component
1,467 lines • 183 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`
*/
"productStatus": 'sale' | 'out' | 'out-and-notify';
/**
* Product type. Defaults to `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 {
"option": Option;
"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
*/
"type": 'link' | 'popup' | 'banner';
}
/**
* @name SallaBreadcrumb
* @description A StencilJS component for rendering breadcrumb navigation.
* @tag salla-breadcrumb
*/
interface SallaBreadcrumb {
}
interface SallaButton {
/**
* Button Color
*/
"color": 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'gray' | 'dark';
/**
* Add `disabled` attribute
*/
"disable": () => Promise<HTMLElement>;
/**
* Is the button currently disabled
*/
"disabled": boolean;
/**
* Remove `disabled` attribute
*/
"enable": () => Promise<HTMLElement>;
/**
* Button Fill
*/
"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
*/
"loaderPosition": 'start' | 'end' | 'center' | 'after';
/**
* Is the button currently loading
*/
"loading": boolean;
/**
* Changing the body of the button
* @param html
*/
"setText": (html: string) => Promise<HTMLElement>;
/**
* Button Type
*/
"shape": 'link' | 'icon' | 'btn';
/**
* Button Size
*/
"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).
*/
"type": string;
/**
* Button Width
*/
"width": 'wide' | 'normal';
}
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.
*/
"enableAlpha": boolean;
/**
* How to display the selected color in the text field (the text field still supports input in any format).
*/
"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
*/
"name": string;
/**
* Show/open the picker.
*/
"openPicker": () => Promise<void>;
/**
* Set if the color picker input is required or not
*/
"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.
*/
"showCancelButton": boolean;
/**
* Whether to show a text field for color value editing.
*/
"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
*/
"hideBought": boolean;
/**
* Load more text
*/
"hideForm": boolean;
/**
* Hide Title
*/
"hideTitle": boolean;
/**
* Page or product ID
*/
"itemId": number;
/**
* Load more text
*/
"loadMoreText": string;
"reload": () => Promise<void>;
/**
* Show or hide avatar
*/
"showFormAvatar": boolean;
/**
* Sort comments
*/
"sort": string | 'latest' | 'oldest' | 'bottom_rating' | 'top_rating';
/**
* Determines if the comments are testimonials
*/
"testimonials": boolean;
/**
* Comment Type
*/
"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
*/
"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
*/
"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
*/
"size": 'sm' | 'md' | 'lg';
}
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";
/**
* the name for the input
*/
"name": string;
/**
* 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;
/**
* 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 this input i required or not
*/
"required": boolean;
/**
* 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 {
/**
* Accepted file types
*/
"accept": string;
/**
* Enable or disable file browser
*/
"allowBrowse": boolean;
/**
* Enable or disable drag n' drop
*/
"allowDrop": boolean;
/**
* Enable or disable preview mode
*/
"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
*/
"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;
/**
* 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
*/
"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;
/**
* 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
*/
"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
*/
"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
*/
"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>;
/**
* Fixed image preview height, overrides min and max preview height
*/
"imagePreviewHeight": number;
/**
* 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);
/**
* The decimal separator used to render numbers. By default this is determined automatically.
*/
"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.
*/
"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
*/
"maxFilesCount": number;
/**
* The maxmimum number of files that can be uploaded in parallel
*/
"maxParallelUploads": number;
/**
* The submit request method.
*/
"method": string;
/**
* File input name for the native formData
*/
"name"?: string;
/**
* File input name in the request payload
*/
"payloadName": string;
/**
* Set the component to be profile image uploader with a preview and a circular shape
*/
"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>;
/**
* The product id for which the gifting system is required.
*/
"productId": number;
/**
* 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`
*/
"autoload": boolean;
/**
* Class selector to know the container if it's not the host `<salla-infinite-scroll>`
*/
"container": string;
/**
* Class selector to know list items
*/
"item": string;
/**
* Load more text
*/
"loadMoreText": string;
/**
* Next Page element
*/
"nextPage": string;
}
interface SallaInstallment {
/**
* Country code
*/
"country": string;
/**
* Currency code
*/
"currency": string;
/**
* Language code
*/
"language": string;
/**
* Current product price
*/
"price": string;
}
interface SallaListTile {
/**
* Designates the component as anchor and applies the `href` attribute.
*/
"href": string | undefined;
/**
* Designates the target attribute. This should only be applied when using the `href` prop.
*/
"target": "_blank" | "_self" | "_parent" | "_top" | "framename";
}
interface SallaLoading {
/**
* Spinner background color.
*/
"bgColor": string;
/**
* Spinner content color.
*/
"color": string;
/**
* Sets the diameter of the circle in pixels, Defaults to `32`
*/
"size": number | string;
/**
* Sets the stroke of the circle (border) in pixels, Defaults to `4`
*/
"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>;
/**
* Change currency and language to the selected ones.
*/
"submit": () => Promise<void>;
}
interface SallaLoginModal {
"api": string;
"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
*/
"isEmailRequired": boolean;
/**
* Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
*/
"isMobileAllowed": boolean;
/**
* Open login component
*/
"open": (_event?: any) => Promise<void | HTMLElement>;
"storeId": string | number;
/**
* Once the api verify success, it will be login the customer in web pages
*/
"supportWebAuth": boolean;
/**
* Reload after a successful login
*/
"withoutReload": boolean;
}
interface SallaLoyalty {
/**
* Does the merchant allow to login using email
*/
"allowEmail": boolean;
/**
* Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
*/
"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
*/
"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
*/
"name": string;
/**
* Open location component
*/
"open": () => Promise<HTMLElement>;
/**
* Disable or enable actions
*/
"readonly": boolean;
/**
* Set if the location input is required or not
*/
"required": boolean;
/**
* Sets the search bar visibility.
*/
"searchable": boolean;
/**
* Sets map style.
*/
"theme": string;
/**
* Sets start map zoom.
*/
"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.
*/
"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.
*/
"useReactLink": boolean;
}
interface SallaMetadata {
/**
* The entity type.
*/
"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`
*/
"centered": boolean;
/**
* close the modal
*/
"close": () => Promise<HTMLElement>;
/**
* open the modal on rendering
*/
"hasSkeleton": boolean;
/**
* Set the style of the header icon.
*/
"iconStyle": 'error' | 'success' | 'primary' | 'normal';
/**
* Sets the modal to be closable. Defaults to `true`
*/
"isClosable": boolean;
/**
* Show loading in the middle
*/
"isLoading": boolean;
/**
* Start loading
*/
"loading": () => Promise<HTMLElement>;
/**
* Avoid padding in the modal body or not, defaults to `false`
*/
"noPadding": boolean;
/**
* Open the modal
*/
"open": () => Promise<HTMLElement>;
/**
* The position of the modal
*/
"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.
*/
"subTitle": string;
/**
* Show subtitle before the title or not, defaults to `false` (after the title)
*/
"subTitleFirst": boolean;
/**
* open the modal on rendering
*/
"visible": boolean;
/**
* The size of the modal
*/
"width": 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
}
interface SallaNotificationItem {
/**
* Notification instance to render.
*/
"notification": Notification;
}
interface SallaNotifications {
/**
* Number of notifications to load per request.
*/
"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" ...
*/
"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 {
/**
* @type {number} order id to fetch items.
*/
"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", ""].
*/
"exclude": string[];
}
interface SallaPlaceholder {
/**
* Defines the alignment of contents. Defaults to [`left`]
*/
"alignment": 'left' | 'center' | 'right';
/**
* Custom icon to display, defaults to [`Inbox`], can be any valid svg icon or inline element with font icon
*/
"icon": string;
/**
* The size of the icon. Defaults to [`md`] = 45px for font icon & width/height: 3.5rem for svg icon
*/
"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
*/
"isSubscribed": boolean;
/**
* Listen to product options availability.
*/
"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;
/**
* Support shadow on hover.
*/
"shadowOnHover": boolean;
/**
* Show quantity.
*/
"showQuantity": boolean;
}
interface SallaProductOptions {
/**
* Configuration for customizing the display layout of product options. The `config` prop accepts a JSON string that specifies the layout type for rendering options. It allows customization of how single-option and multiple-option selections are displayed. Example Usage: ```html <salla-product-options options="{{ product.options }}" product-id="{{ product.id }}" unique-key="abc123" config='{ "single-option": { "type": "button" }, "multiple-option": { "type": "button" } }'> </salla-product-options> ``` Example Config JSON: ```json { "single-option": { "type": "button" }, "multiple-option": { "type": "default" } } ``` - `single-option`: - Defines the display style for single-option selections. - `type`: Supported values: - `"button"`: Displays options in a button-style grid layout. - `"default"`: Displays options as a dropdown (default). - `multiple-option`: - Defines the display style for multiple-option selections. - `type`: Supported values: - `"button"`: Displays options in a button-style grid layout. - `"default"`: Displays options as a list of checkboxes (default).
*/
"config": string;
/**
* Get a specific option by its id.
*/
"getOption": (option_id: any) => Promise<Option1>;
/**
* Get selected options.
*/
"getSelectedOptions": () => Promise<any[]>;
/**
* Get the id's of the selected options.
*/
"getSelectedOptionsData": () => Promise<{}>;
/**
* Return true if there is any out of stock options are selected and vise versa.
*/
"hasOutOfStockOption": () => Promise<boolean>;
/**
* Hide the out of stock label. Will be used in the case of live validation such as cart page and inline checkout
*/
"hideOutLabel": string;
/**
* Product detail information.
*/
"options": string;
/**
* The id of the product to which the options are going to be fetched for.
*/
"productId": number;
/**
* Report options form validity.
*/
"reportValidity": () => Promise<boolean>;
"setOptionsData": (optionsData: Option1[]) => Promise<void>;
/**
* A unique key used to generate distinct identifiers. This key is appended to a default value to ensure uniqueness across instances or components where differentiation is required.
*/
"uniqueKey": string;
}
interface SallaProductSizeGuide {
/**
* Hide the size-guide modal window
*/
"close": () => Promise<HTMLElement>;
/**
* Show the size-guide modal window
*/
"open": (product_id: number) => Promise<any>;
}
interface SallaProductsList {
/**
* Autoload next page when scroll
*/
"autoload": boolean;
/**
* should listen to filters events `salla-filters::changed` and re-render
*/
"filtersResults": boolean;
/**
* Horizontal cards
*/
"horizontalCards": boolean;
/**
* Specifies additional data to be included in the product fetch response. The value can be an array of strings or a JSON string. Example: - As an array: includes=["options"] - As a JSON string: includes='["options", "metadata", 'images']' The array or JSON string can include: - "options": Include product options in the response. - "images": Include product images in the response.
*/
"includes": string[];
/**
* Limit for number of products in the list.
*/
"limit": number;
/**
* Load more text
*/
"loadMoreText": string;
/**
* 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" ...
*/
"productCardComponent": string;
/**
* Reload the list of products (entire content of the component).
*/
"reload": () => Promise<void>;
/**
* Row cards
*/
"rowCards": boolean;
/**
* Set parsed filters data from URI
* @param filters
*/
"setFilters": (filters: any) => Promise<void>;
/**
* Sorting the list of products
*/
"sortBy"?: string | 'ourSuggest' | 'bestSell' | 'topRated' | 'priceFromTopToLow' | 'priceFromLowToTop';
/**
* The source of the products list
* @type {string}
*/
"source": 'categories' | 'latest' | 'related' | 'brands' | 'json' | 'search' | 'tags' | 'selected' | 'offers' | 'landing-page' | 'sales' | 'wishlist' | 'top-rated';
/**
* The source value, cloud be different values as following: - array of ids when `source` in ['categories', 'brands', 'tags', 'selected'] - keyword when `source` = 'search' - products payload when `source` = 'json' - product_id when `source` = 'related'
* @type {string}