/* 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 { Coupon } from "./components/salla-cart-coupons/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 { Point, Prize } from "./components/salla-loyalty-program/interfaces"; 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 { OrderEditItem, OrderEditProductOption, OrderEditSelectedOptions } from "./components/salla-order-edit/interfaces"; import { Product } from "@salla.sa/twilight/types/common"; 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 { DropdownItem } from "./components/salla-searchable-dropdown/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 { Coupon } from "./components/salla-cart-coupons/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 { Point, Prize } from "./components/salla-loyalty-program/interfaces"; 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 { OrderEditItem, OrderEditProductOption, OrderEditSelectedOptions } from "./components/salla-order-edit/interfaces"; export { Product } from "@salla.sa/twilight/types/common"; 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 { DropdownItem } from "./components/salla-searchable-dropdown/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 SallaBadge { /** * The background color of the badge * @default 'light' */ "bg": 'transparent' | 'light' | 'primary-100'; /** * The text color of the badge * @default 'black' */ "color": 'black' | 'primary-900'; /** * The size of the badge * @default 'sm' */ "size": 'xs' | 'sm' | 'md'; } 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'; } interface SallaBoughtTogether { /** * Maximum number of recommendations to fetch. Max is 4. * @default 3 */ "limit": number; } /** * @name SallaBreadcrumb * @description A StencilJS component for rendering breadcrumb navigation. * @tag salla-breadcrumb */ interface SallaBreadcrumb { } interface SallaBulletDelivery { /** * Closes the bullet delivery modal */ "close": () => Promise; /** * Opens the bullet delivery modal */ "open": () => Promise; } interface SallaButton { /** * Button Color * @default 'primary' */ "color": 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'gray' | 'dark'; /** * Add `disabled` attribute */ "disable": () => Promise; /** * Is the button currently disabled * @default false */ "disabled": boolean; /** * Remove `disabled` attribute */ "enable": () => Promise; /** * Button Fill * @default 'solid' */ "fill": 'solid' | 'outline' | 'none'; /** * Button with href as normal link */ "href": string; /** * Run loading animation */ "load": () => Promise; /** * 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; /** * Button Type * @default 'btn' */ "shape": 'link' | 'icon' | 'btn'; /** * Button Size * @default 'medium' */ "size": 'small' | 'large' | 'medium'; /** * Stop loading animation */ "stop": () => Promise; /** * 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 SallaCartCoupons { /** * Business Decision: No visual selected state needed UX Flow: Click coupon → populate input → auto-apply (streamlined experience) */ "selectCoupon": (couponCode: string) => Promise; } interface SallaCartItemOffers { /** * The unique identifier of the cart item */ "itemId": string; /** * 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; /** * Show cart label */ "showCartLabel": boolean; } interface SallaCashbackBanner { } interface SallaColorPicker { /** * Close/Hide the picker. */ "closePicker": () => Promise; /** * Initial color for the picker. */ "color": string; /** * Release all resources used by this picker instance. */ "destroyPicker": () => Promise; /** * 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; /** * File input name for the native formData * @default 'color' */ "name": string; /** * Show/open the picker. */ "openPicker": () => Promise; /** * 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; /** * Set the picker options. (Usually a new .parent and .color). * @param options */ "setPickerOption": (options: Options) => Promise; /** * 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; /** * 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; /** * Show cookies settings bar to allow updating consent. */ "open": () => Promise; /** * Reject cookies consent. */ "reject": () => Promise; } interface SallaCountDown { /** * If true, hides days segment when days = 0, and hides hours segment when both days and hours = 0. Matches salla-timer behaviour. Off by default for backward compatibility. * @default false */ "autoSegments": boolean; /** * Background color of each box when boxed is enabled. Accepts any valid CSS color value (e.g. '#1a3c34', 'var(--color-primary)') */ "boxColor": string; /** * Theme color name to use as the box background when boxed is enabled. Maps to the corresponding CSS variable (e.g. 'primary' → var(--color-primary)). Available values: 'primary' | 'primary-dark' | 'primary-light' | 'primary-reverse' | 'main' Takes precedence over box-color when both are set. */ "boxTheme": string; /** * 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. Supported formats: Parsed as KSA time (UTC+3): - "YYYY-MM-DD HH:mm:ss" (e.g. "2023-05-22 16:37:52") - "YYYY-M-D HH:mm:ss" (e.g. "2023-5-22 16:37:52") unpadded month/day accepted - "YYYY-MM-DD" (e.g. "2023-05-22") counts down to 23:59:59 of that day - "YYYY-M-D" (e.g. "2026-5-15", "2026-05-5") unpadded month/day accepted - "MM-DD-YYYY" (e.g. "04-28-2026") counts down to 23:59:59 of that day - "MM-DD-YYYY,HH:mm:ss am/pm" (e.g. "12-23-2026,03:23:00 pm") Parsed as browser local time: - "YYYY/MM/DD HH:mm:ss" (e.g. "2023/05/22 16:37:52") - "YYYY/MM/DD" (e.g. "2023/05/22") counts down to 23:59:59 of that day - "MM/DD/YYYY HH:mm:ss" (e.g. "05/22/2023 16:37:52") - "MM/DD/YYYY" (e.g. "05/22/2023") counts down to 23:59:59 of that day */ "date": string; /** * The digits lang to show in the count down * @default 'auto' */ "digits": 'en' | 'auto'; /** * End the count down */ "endCountDown": () => Promise; /** * 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; /** * Horizontal padding applied to the list (e.g. '20px', '1rem', '5%'). Defaults to no padding. */ "listPadding": string; /** * 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; /** * Validates all required fields and updates the error state. Returns true if valid. */ "validateFields": () => Promise; } 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[]; /** * 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[]; /** * 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 '' */ "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 '' */ "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; } /** * @name SallaDeliveryPromise * @description Displays delivery promise message (from BE) with city selection * @tag salla-delivery-promise */ interface SallaDeliveryPromise { } interface SallaDrawer { /** * Align drawer content to center, defaults to `false` * @default false */ "centered": boolean; /** * close the drawer */ "close": () => Promise; /** * 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; /** * Avoid padding in the drawer body or not, defaults to `false` * @default false */ "noPadding": boolean; /** * Open the drawer */ "open": () => Promise; /** * The position of the drawer (left or right) * @default 'right' */ "position": 'left' | 'right'; /** * Change the Drawer Title * @param drawerTitle */ "setTitle": (drawerTitle: any) => Promise; /** * Stop the loading */ "stopLoading": () => Promise; /** * 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 SallaEditOrderButton { /** * The order ID to fetch details for. Falls back to the current page order ID. */ "orderId"?: string | number; } 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; /** * 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 '...' */ "iconProcess": string; /** * The icon used for remove actions * @default '...' */ "iconRemove": string; /** * The icon used for retry actions * @default '...' */ "iconRetry": string; /** * The icon used for undo actions * @default '...' */ "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; /** * 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')} ${salla.lang.get('common.uploader.browse')} ` */ "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; /** * 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; /** * 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; /** * Array of filter options */ "filters"?: Filter[]; /** * Method to get filter data. */ "getFilters": () => Promise; /** * Reset selected filters. */ "resetFilters": () => Promise; } interface SallaFiltersWidget { /** * Selected filter options value. */ "filtersData": object; /** * Filter option along with possible values. */ "option": Filter; /** * Reset selected filter options. */ "reset": () => Promise; /** * 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; /** * Action to show more or less filter options. */ "showMore": () => Promise; /** * Action to toggle widget open or closed (expand/ collapse). */ "toggleWidget": () => Promise; /** * Show more or less filter options. */ "withLoadMore": boolean; } /** * @name SallaFulfillmentMethods * @description Displays product fulfillment options (pickup and delivery) as two side-by-side cards * @tag salla-fulfillment-methods */ interface SallaFulfillmentMethods { } interface SallaGifting { /** * Hide / close the gifting modal window */ "close": () => Promise; /** * 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; /** * Show / Open the gifting modal window */ "open": () => Promise; /** * Is Physical products (alias of `physicalProducts` for themes passing `physical`) */ "physical": boolean; /** * Is Physical 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; /** * 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 `` * @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; /** * Current currency (existing or newly selected) */ "currency": string; /** * Current language (existing or newly selected) */ "language": string; /** * open the component */ "open": () => Promise; /** * To show the trigger button or not * @default false */ "showTrigger": boolean; /** * Change currency and language to the selected ones. */ "submit": () => Promise; } 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; /** * 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; /** * Available customer points with which they can exchange. */ "customerPoints": number; /** * Exchange loyalty points with the selected prize item * @param loyalty_prize_id */ "exchangeLoyaltyPoint": () => Promise; /** * Message to show for guest users. */ "guestMessage": string; /** * Show loyalty modal */ "open": () => Promise; /** * 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; } interface SallaLoyaltyBanner { } interface SallaLoyaltyHero { /** * Description of the program */ "description": string; /** * Optional image to display in the background */ "image": string; /** * Name of the program */ "name": string; } interface SallaLoyaltyPanel { /** * Available customer points with which they can exchange. */ "customerPoints": number; /** * The exchanged prize point */ "prizePoints": string | number; /** * The prize title */ "prizeTitle": string; } interface SallaLoyaltyPoint { "point": Point; } interface SallaLoyaltyPointsBanner { } interface SallaLoyaltyPrizeItem { /** * Prize item to be displayed in this component. */ "item": Item; } interface SallaLoyaltyProgram { } interface SallaLoyaltyReward { "group": string; "prize": Prize; /** * @default 'md' */ "size": 'xs' | 'md'; } 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; /** * 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; /** * When true (footer menu only), appends a link to open cookie preferences. Use as `with-cookie-preferences` in markup. */ "withCookiePreferences"?: 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; /** * 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; /** * Avoid padding in the modal body or not, defaults to `false` * @default false */ "noPadding": boolean; /** * Open the modal */ "open": () => Promise; /** * The position of the modal * @default 'middle' */ "position": 'top' | 'middle' | 'bottom'; /** * Change the Modal Title * @param modalTitle */ "setTitle": (modalTitle: any) => Promise; /** * Stop the loading */ "stopLoading": () => Promise; /** * 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'; } /** * Example usage with new nested structure: * */ interface SallaMultipleBundleProduct { /** * The bundled sections data, given as a JSON string or parsed object. */ "bundleSections": string; } interface SallaMultipleBundleProductCart { /** * The list of sections belonging to a bundle product. * @default [] */ "sections": BundleSection[]; } interface SallaMultipleBundleProductDetails { "canSelectBundleProduct": (sectionId: string | number, productId: string | number) => Promise; /** * The list of sections belonging to a bundle product. * @default [] */ "sections": BundleSection[]; } interface SallaMultipleBundleProductOptionsModal { /** * Closes the modal manually. */ "close": () => Promise; /** * Opens the modal manually. */ "open": () => Promise; /** * Refreshes the internal options tracking state manually. */ "refreshOptionsState": () => Promise; } interface SallaMultipleBundleProductSlider { /** * When true, the selected product cannot be deselected (single-product section with min = 1). * @default false */ "isSelectionLocked": boolean; /** * The data for the current bundle section being rendered in this slider. */ "section": BundleSection; /** * The zero-based index of this section within the overall bundle. */ "sectionIndex": number; /** * A dictionary tracking which product IDs are currently selected per section. * @default {} */ "selectedProducts": { [sectionId: string]: Set }; /** * Maximum selectable products for this section (empty max → all products in section). * @default 0 */ "selectionLimit": number; } interface SallaNextOrderCoupon { } 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 */ 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 Promise; /** * Show offer details * @param offer */ "showOffer": (offer: any) => Promise; } /** * @salla /ui-components * The `salla-order-details` component renders a collapsible summary for an order product with optional options list. * It uses the salla-accordion component to provide collapsible functionality. */ interface SallaOrderDetails { /** * The payload containing order data, stringified JSON or literal object. */ "orderDetails": string | OrderProduct; } /** * @salla /ui-components * The `salla-order-details-multiple-bundle-product` component renders a collapsible summary for an order multiple bundle product with optional options list. * It uses the salla-accordion component to provide collapsible functionality. */ interface SallaOrderDetailsMultipleBundleProduct { /** * Whether the accordion should be collapsible */ "collapsible"?: boolean; /** * Placeholder image URL when product image is not available * @default salla.url.cdn('images/s-empty.png') */ "placeholderImage": string; /** * The product data to display */ "productDetails": OrderProduct; } /** * @salla /ui-components * The `salla-order-details-options` component renders product options for order details. * It displays various types of options including colors, images, files, maps, and text values. */ interface SallaOrderDetailsOptions { /** * Whether to show the options in a bordered container * @default true */ "bordered"?: boolean; /** * Product options to display */ "options"?: ProductOption[] | string; /** * Placeholder image URL when option image is not available * @default 'images/placeholder.png' */ "placeholderImage": string; } /** * @salla /ui-components * The `salla-order-edit` component * as an editable card with quantity controls, editable options, and an order summary. */ interface SallaOrderEdit { /** * JSON-encoded array of category IDs to exclude from the products list (e.g. "[1,2,3]"). */ "excludedCategories": string; /** * Pre-loaded order data (JSON string). */ "orderData": string; /** * The order ID to edit */ "orderId": string | number; } /** * @salla /ui-components * The `salla-order-edit-item` component renders a single editable order item card * with quantity controls, editable product options, and a remove button. */ interface SallaOrderEditItem { /** * Item data object */ "item": OrderEditItem; /** * Parent order ID (for API calls) */ "orderId": string | number; } interface SallaOrderEditProductCard { "product": Product | string; } interface SallaOrderSummary { /** * The order ID to fetch items from */ "orderId"?: number; } interface SallaOrderTotalsCard { /** * Order summary object. Accepts a JSON string or object containing the order totals. */ "order"?: string | Order; } 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; } 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 { /** * Compact list layout for drawers and lists. */ "compact": boolean; /** * 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 SallaProductCardEmbed { /** * Optional alignment for the embedded card. */ "align"?: 'left' | 'right' | 'center'; /** * Product identifier used to fetch product details. */ "productId": string | number; } interface SallaProductOptions { /** * Bundle context information for bundle products. When provided, the component will use bundle naming convention for form inputs. Expected format: { sectionId: string|number, sectionIndex: number, productId: string|number } Can be passed as a string (JSON) or object */ "bundleContext"?: string | object; /** * 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 ``` 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; /** * Enable user-initiated validation mode so invalid fields will scroll into view */ "enableUserInitiatedValidation": () => Promise; /** * Switch the component to cart-item mode: fill selected options, enable disabled-out-of-stock, and skip product price updates. Used by themes when treating a product page as a cart item editor. */ "enterCartMode": () => Promise; /** * Get a specific option by its id. */ "getOption": (option_id: any) => Promise; /** * Get the current options state, including selected values/details. */ "getOptionsData": () => Promise; /** * Get selected options. */ "getSelectedOptions": () => Promise; /** * 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; /** * 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. * @default salla.config.get('page.id') */ "productId": number | string; /** * Report options form validity. */ "reportValidity": () => Promise; /** * Sets the options data for the product * @param optionsData - Array of product options */ "setOptionsData": (optionsData: Option1[]) => Promise; /** * 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; /** * Validate options and trigger scrolling to the first invalid option if any */ "validateAndScroll": () => Promise; } interface SallaProductSizeGuide { /** * Hide the size-guide modal window */ "close": () => Promise; /** * Show the size-guide modal window */ "open": (product_id: number) => Promise; } interface SallaProductsList { /** * Autoload next page when scroll * @default false */ "autoload": boolean; /** * Compact cards for drawer/list layouts */ "compactCards": 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 the next products page. */ "loadMore": () => Promise; /** * 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 Promise; /** * Row cards */ "rowCards": boolean; /** * Set parsed filters data from URI * @param filters */ "setFilters": (filters: any) => Promise; /** * 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' | 'reorder' | 'recently'; /** * 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} */ "sourceValue": any; } interface SallaProductsSlider { /** * autoplay option for products slider */ "autoplay": boolean; /** * Title of the block - works only if slider is true * @type {string} * @default '' */ "blockTitle": string; /** * Display 'ALL' URL * @type {string} * @default '' */ "displayAllUrl": string; /** * 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"]' 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; /** * Custom Card Component for the Salla Products Slider. This component allows you to customize the appearance of individual product cards within a Salla Products Slider. * @example ; /** * Source of the products, if api will get the products from the API, if json will get the products from the products prop * @type {string} * @default '' */ "source": 'categories' | 'latest' | 'related' | 'brands' | 'json' | 'tags' | 'selected' | 'offers' | 'landing-page' | 'wishlist' | 'top-rated' | 'recently'; /** * The source value, cloud be different values as following: - array of ids when `source` in ['categories', 'brands', 'tags', 'selected'] - products payload when `source` = 'json' - product_id when `source` = 'related' * @type {string} */ "sourceValue": string; /** * Sub title of the block - works only if slider is true * @type {string} * @default '' */ "subTitle": string; } interface SallaProgressBar { /** * Progress bar color, defaults to: `salla.config.get('theme.color.primary', "#ffd5c4")` */ "color": string; /** * You can just pass the donation as json string ex: `{"target_message":null,"target_date":"2023-04-18","target_end_date":"2023-04-18","target_amount":400,"collected_amount":380,"can_donate":true}` */ "donation": string | Donation; /** * Big Title, before the progress bar. */ "header": string; /** * Set height for the wrapper. * @default "10px" */ "height": string; /** * Hide units above the progress bar */ "hideUnits": boolean; /** * Subtitle under the progress bar or instead of it if the target not being set. */ "message": string; /** * Stripped effect for tje progress bar. */ "stripped": boolean; /** * The goal of the progress bar */ "target": number; /** * The unite to be added after the numbers, defaults to: `salla.config.currency().symbol` */ "unit": string; /** * The progress so far as of the goal. */ "value": number; } interface SallaQuantityInput { /** * Cart Item Id */ "cartItemId": any; /** * decrease quantity by one. * @return HTMLSallaQuantityInputElement */ "decrease": () => Promise; /** * increase quantity by one. * @return HTMLSallaQuantityInputElement */ "increase": () => Promise; /** * set quantity by one. * @return HTMLSallaQuantityInputElement */ "setValue": (value: any, fireChangeEvent?: boolean) => Promise; } interface SallaQuickBuy { /** * Product amount in base currency (SAR). * @type {number} * @default 0 */ "amount": number; /** * Show Apple Pay only * @type {boolean} */ "applePayOnly": boolean; /** * Cart ID, when you need to applePay for existed cart * @type {string} */ "cartId": string; /** * base currency * @type {string} * @default SAR */ "currency": string; /** * To be passed to purchaseNow request * @type {boolean} */ "isRequireShipping": boolean; /** * Product options, if is empty will get the data from the document.querySelector('salla-product-options[product-id="X"]') * @type {object} * @default {} */ "options": {}; /** * Product ID. * @type {string} */ "productId": string; /** * Product type. * @type {string} * @default 'product' */ "productType": string; /** * Button type. * @type {string} * @default buy */ "type": 'plain' | 'buy' | 'donate' | 'book' | 'pay' | 'order'; /** * Custom host for Apple Pay validate merchant URL. When set, the validate URL will use this host instead of the store URL. * @type {string} */ "validateHost": string; } interface SallaQuickOrder { /** * agreement text from server or from props * @default salla.lang.get( 'pages.checkout.show_full_agreement' ) */ "agreementText": string; /** * quick order confirm pay button text * @default 'اشتر الآن' */ "confirmPayButtonTitle": string; /** * is email required * @default false */ "isEmailRequired": boolean; /** * quick order pay button text * @default 'اطلب المنتج' */ "payButtonTitle": string; /** * product id local or from page */ "productId": string; /** * Quick Order Style * @default 'default' */ "quickOrderStyle": 'gray' | 'white' | 'default'; /** * quick order title * @default 'ليش تنتظر؟' */ "quickOrderTitle": string; /** * quick order sub title * @default 'احصل على المنتج مباشرة الآن' */ "subTitle": string; /** * product id local or from page */ "thanksMessage": string; } interface SallaRatingModal { /** * Show the rating modal */ "close": () => Promise; /** * Show the rating modal */ "open": () => Promise; /** * The order id, to rate on its products & shipping */ "orderId": number; } interface SallaRatingStars { /** * Allows the rating to be editable. * @default false */ "editable": boolean; /** * Sets input name. * @default 'rating' */ "name": string; /** * Number of reviews to display. * @default 0 */ "reviews": number; /** * Sets the height and width of the component. Defaults to medium. * @default 'medium' */ "size": "large" | "medium" | "small" | "mini"; /** * The rating value. */ "value": number; /** * Show the description label. */ "withLabel": boolean; } interface SallaReviewCard { /** * The review object to render, containing review text, stars, product info, and images. */ "review": Partial; } interface SallaReviews { /** * Controls the visibility of a link to the reviews page. When set to `true`, a link will be displayed allowing users to navigate to the full reviews section. * @type {boolean} */ "displayAllLink": boolean; /** * Specifies whether to hide customer information in the component. When set to true, customer information will be hidden. Defaults to false, meaning customer information will be displayed. * @default false */ "hideCustomerInfo": boolean; /** * Defines the maximum number of reviews to retrieve from the API. * @type {number} * @default 5 */ "limit": number; /** * Specifies the sorting criteria for the fetched reviews. Available options: - "top_rating": Sorts reviews based on top ratings. - "random": Sorts reviews randomly. - "latest": Sorts reviews based on the latest ones (default). * @type {SortingOption} * @default latest */ "sort": SortingOption; /** * Specifies the data source for reviews. Valid options include: - 'categories': Retrieves reviews for specific product categories. - 'products': Retrieves reviews for individual products. - 'json': Retrieves reviews from a custom JSON payload provided in `sourceValue`. When using 'json' as the source, a valid payload must be provided in `sourceValue`. * @type {Source} * @default "store" */ "source"?: Source; /** * Provides data specific to the chosen source. Required when using 'categories', 'products', or 'json' as the source: - 'categories': An array of category IDs. - 'products': An array of product IDs. - 'json': A custom JSON object containing review data. * @type {string | object | Array} */ "sourceValue"?: string | object | Array; /** * Specifies the type of reviews to fetch. Available options: - "all": Fetches reviews from all sources. - "store": Fetches reviews specific to the store. - "products": Fetches reviews specific to products. * @type {ReviewType} * @default store */ "type": ReviewType; } interface SallaReviewsPage { } interface SallaReviewsSummary { /** * Product ID */ "itemId": number; } interface SallaRewardAction { "prize": Prize; } interface SallaRewardCard { /** * The prize item */ "prize": Prize; } interface SallaRewardDetails { "prize": Prize; } interface SallaRewardExchange { "prize": Prize; /** * @default null */ "productId": number | null; } interface SallaScopes { /** * Closes the scope modal. */ "close": () => Promise; /** * Submit form to change exsiting scope. */ "handleSubmit": () => Promise; /** * Opens the scope modal. */ "open": (mode?: any, product_id?: number) => Promise; /** * Dictates when to show the search field * @default 6 */ "searchDisplayLimit": number; /** * Optionally open the modal or enforce the pop-up to the viewer * @default 'optional' */ "selection": 'optional' | 'mandatory'; } interface SallaSearch { /** * Sets the height of the input * @default 60 */ "height": number; /** * Set the component display without modal window. Defaults to `false` * @default false */ "inline": boolean; /** * Maximum number of words allowed in the input * @default 5 */ "maxWords": number; /** * Adds a border radius to the input. Half of the height. * @default false */ "oval": boolean; /** * Set the component to display as a placeholder (button) that will open the modal. Defaults to `false` * @default false */ "placeholder": boolean; /** * Show submit action buttons at the end. * @default false */ "showAction": boolean; } interface SallaSearchableDropdown { /** * @default false */ "clientSearch": boolean; /** * @default false */ "disabled": boolean; /** * @default false */ "dropUp": boolean; /** * @default '' */ "inputId": string; /** * @default [] */ "items": DropdownItem[]; /** * When true, the dropdown will NOT override the nearest scrollable ancestor's `overflow` to `visible` while open. Use this when the host (e.g. a modal body) needs to keep its own scrolling intact while the dropdown is open. * @default false */ "keepParentScroll": boolean; "label": string; /** * @default false */ "loading": boolean; /** * @default '' */ "noResultsText": string; /** * @default '' */ "placeholder": string; /** * @default false */ "required": boolean; /** * @default '' */ "searchQuery": string; /** * @default true */ "searchable": boolean; /** * @default false */ "searching": boolean; /** * @default null */ "selectedItem": DropdownItem | null; } interface SallaSkeleton { /** * Set the skeleton height * @default '100%' */ "height": string; /** * Set the shape type of the skeleton is it circle or normal * @default 'normal' */ "type": 'circle' | 'normal'; /** * Set the skeleton width * @default '100%' */ "width": string; } interface SallaSlider { /** * Show/hide display all button beside arrows * @default false */ "arrowsCentered": boolean; /** * Auto Height slider * @default false */ "autoHeight": boolean; /** * Enable autoplay - working with `type="carousel" only` * @default false */ "autoPlay": boolean; /** * Show/hide slider block sub title * @default '' */ "blockSubtitle": string; /** * Show/hide slider block title * @default '' */ "blockTitle": string; /** * Enable center mode - working with `type="carousel" only` * @default false */ "centered": boolean; /** * Show/hide arrows * @default false */ "controlsOuter": boolean; /** * Slider direction. Default: document.documentElement.dir */ "direction": string; /** * Show/hide display all button beside arrows * @default '' */ "displayAllUrl": string; /** * Get slider slides * */ "getSlides": () => Promise; /** * Get thumbs slider slides * */ "getThumbsSlides": () => Promise; /** * Get thumbs slider updateSize * */ "getThumbsUpdateSize": () => Promise; /** * Disable thumbs slider and show it as a grid * @default false */ "gridThumbs": boolean; /** * Enable call a specific slide by index from thumbnails or color option in `salla-slider-options` component, works only if `data-img-id` and `data-slid-index` attributes are set on each slide * @default false */ "listenToThumbnailsOption": boolean; /** * Run slider in loop, Don't use it for slides with custom components inside it, because it may cause re-render issue * @default false */ "loop": boolean; /** * Enable pagination * @default false */ "pagination": boolean; /** * Show/hide arrows * @default true */ "showControls": boolean; /** * Show/hide thumbs slider arrows * @default true */ "showThumbsControls": boolean; /** * Run transition to the next slide. * @param speed - Transition duration (in ms). * @param runCallbacks - Set it to false (by default it is true) and transition will not produce transition events. * */ "slideNext": (speed?: number, runCallbacks?: boolean) => Promise; /** * Does the same as .slideNext but for the case when used with enabled loop. So this method will slide to next slide with realIndex matching to next index * @param speed - Transition duration (in ms). * @param runCallbacks - Set it to false (by default it is true) and transition will not produce transition events. * */ "slideNextLoop": (speed?: number, runCallbacks?: boolean) => Promise; /** * Run transition to the previous slide. * @param speed - Transition duration (in ms). * @param runCallbacks - Set it to false (by default it is true) and transition will not produce transition events. * */ "slidePrev": (speed?: number, runCallbacks?: boolean) => Promise; /** * Does the same as .slidePrev but for the case when used with enabled loop. So this method will slide to previous slide with realIndex matching to previous index * @param speed - Transition duration (in ms). * @param runCallbacks - Set it to false (by default it is true) and transition will not produce transition events. * */ "slidePrevLoop": (speed?: number, runCallbacks?: boolean) => Promise; /** * Reset slider position to currently active slide for the duration equal to 'speed' parameter. * @param speed - Transition duration (in ms). * @param runCallbacks - Set it to false (by default it is true) and transition will not produce transition events. * */ "slideReset": (speed?: number, runCallbacks?: boolean) => Promise; /** * Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter. * @param index - Index number of slide. * @param speed - Transition duration (in ms). * @param runCallbacks - Set it to false (by default it is true) and transition will not produce transition events. * */ "slideTo": (index: number, speed?: number, runCallbacks?: boolean) => Promise; /** * Reset slider position to closest slide/snap point for the duration equal to 'speed' parameter. * @param speed - Transition duration (in ms). * @param runCallbacks - Set it to false (by default it is true) and transition will not produce transition events. * */ "slideToClosest": (speed?: number, runCallbacks?: boolean) => Promise; /** * Does the same as .slideTo but for the case when used with enabled loop. So this method will slide to slides with realIndex matching to passed index * @param speed - Transition duration (in ms). * @param runCallbacks - Set it to false (by default it is true) and transition will not produce transition events. * */ "slideToLoop": (index: number, speed?: number, runCallbacks?: boolean) => Promise; /** * Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object * @example let slider = document.querySelector('salla-slider'); slider.sliderConfig = { slidesPerView: 1, spaceBetween : 30, lazy: true, } */ "sliderConfig": any; /** * Get thumbs slider update * */ "sliderInit": () => Promise; /** * Returns the Swiper instance to allow direct manipulation * @returns The Swiper slider instance */ "sliderInstance": () => Promise; /** * slidesPerView * @default "auto" */ "slidesPerView": string; /** * When enabled and there is exactly one slide in the `items` slot, render without initializing Swiper (single slide mode). * @default false */ "staticWhenSingle": boolean; /** * Thumbs Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object * @example let slider = document.querySelector('salla-slider'); slider.thumbsConfig = { slidesPerView: 1, spaceBetween : 30, lazy: true, } */ "thumbsConfig": any; /** * Does the same as .slideTo but for the case when used with enabled loop. So this method will slide to slides with realIndex matching to passed index * @param speed - Transition duration (in ms). * @param runCallbacks - Set it to false (by default it is true) and transition will not produce transition events. * */ "thumbsSlideTo": (index: number, speed?: number, runCallbacks?: boolean) => Promise; /** * Get thumbs slider update * */ "thumbsSliderInit": () => Promise; /** * Get thumbs slider slides * */ "thumbsSliderInstance": () => Promise; /** * Get thumbs slider update * */ "thumbsSliderUpdate": () => Promise; /** * Get thumbs slider updateSlides * */ "thumbsSliderUpdateSlides": () => Promise; /** * Set the type of the slider Default: '' * @default '' */ "type": 'carousel' | 'fullscreen' | 'thumbs' | 'default' | 'hero' | 'testimonials' | 'blog' | 'fullwidth' | ''; /** * You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper This method also includes subcall of the following methods which you can use separately: * */ "update": () => Promise; /** * Force slider to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter * @param speed - Transition duration (in ms). * */ "updateAutoHeight": (speed?: number) => Promise; /** * recalculate slider progress * */ "updateProgress": () => Promise; /** * Get slider slides * */ "updateSize": () => Promise; /** * recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript * */ "updateSlides": () => Promise; /** * update active/prev/next classes on slides and bullets * */ "updateSlidesClasses": () => Promise; /** * Vertical or Horizontal main slider * @default false */ "vertical": boolean; /** * Vertical or Horizontal thumbs slider * @default false */ "verticalThumbs": boolean; } interface SallaSocial { } interface SallaSocialShare { /** * Activate or open the share menu. */ "open": () => Promise; /** * selected platforms to share | all platforms * @default 'facebook,twitter,whatsapp,email,copy_link' */ "platforms": string; /** * Asynchronously initializes the "AddToAny" (a2a) social sharing tool on the current page. If the global object `window.a2a` is available, it initializes the tool with the 'page' mode. The 'page' mode is typically used to enable sharing of the current webpage. * @remarks This function is designed to be used in scenarios where dynamic loading or refreshing of social sharing tools is needed. Ensure that the AddToAny script is properly included in the HTML document before calling this function. * @example // Call the refresh function to initialize AddToAny on the page. await refresh(); * @throws {Error} Throws an error if the AddToAny script is not properly included or if there are issues during initialization. * @async * @returns A promise that resolves once the initialization is complete. */ "refresh": () => Promise; /** * page url that will be shared custom | current page url * @default "" */ "url": string; /** * page url name that will be shared custom | current page url * @default "" */ "urlName": string; } interface SallaTabContent { /** * Expose self for the parent. */ "getChild": () => Promise<{ selected: any; unselect: any; name: string; }>; /** * Set name of the tab content. Mainly used as a key to s ynchronize the content with it's respective header. */ "name": string; } interface SallaTabHeader { /** * The class applied to the currently active(selected) tab * @default undefined */ "activeClass": string; /** * Center tab items in the given flex. * @default false */ "centered": boolean; /** * Expose self for the parent. */ "getChild": () => Promise<{ selected: any; unselect: any; name: string; id: string; }>; /** * Set the height of the tab bar * @default undefined */ "height": number | string; /** * Header identifier name to sync with the content. */ "name": string; } interface SallaTabs { /** * Background color * @default undefined */ "backgroundColor": string; /** * Align tabs vertically. * @default false */ "vertical": boolean; } interface SallaTelInput { /** * Automatically focus telephone input */ "autofocus": boolean; /** * Current country_code * @default salla.config.get('user.country_code', 'SA') || 'SA' */ "countryCode": string; /** * input name * @default false */ "disabled": boolean; /** * Get current values * @return */ "getValues": () => Promise<{ [x: string]: any; countryCode: string; countryKey: any; }>; /** * Is current data valid or not * @return */ "isValid": () => Promise; /** * input name * @default 'phone' */ "name": string; /** * Current mobile number */ "phone": string; } interface SallaTieredOffer { } interface SallaTooltip { /** * The ID of the target element to which the tooltip is attached */ "targetId": string; /** * The text content to display in the tooltip */ "text": string; /** * The theme of the tooltip (default, dark) * @default 'default' */ "theme": string; } interface SallaTrustBadges { /** * For dark footers, show white version of icons. * @default false */ "dark": boolean; } interface SallaUserMenu { /** * To display the trigger as an avatar only * @default false */ "avatarOnly": boolean; /** * To display only the list without the dropdown functionality * @default false */ "inline": boolean; /** * To Make the dropdown menu relative to parent element or not * @default false */ "relativeDropdown": boolean; /** * To display the dropdown header in mobile sheet * @default false */ "showHeader": boolean; /** * To show the trigger button or not * @default false */ "showTrigger": boolean; } /** * The SallaUserProfile is a versatile user profile form * generator within the Salla platform, offering localization support, * customizable fields, and seamless integration with the Salla API. * It dynamically fetches translated strings for labels and messages from the * Salla localization object, allowing for a multilingual user interface. Users * retrieval from the Salla configuration and includes fields for first name, * last name, birthday, gender, email, mobile, and custom additions. Form * validation and submission are handled through various event handlers, ensuring * proper field handling and user input validation. The component supports file * uploads for photo fields and includes a dedicated phone number input field. * The componentWillLoad lifecycle method fetches additional user profile * information from the API during initialization. Overall, this component * provides an efficient and adaptable solution for creating user profiles with a * rich set of features and customization options. */ interface SallaUserProfile { /** * The minimum allowed age for a user. Users with a birthdate indicating an age less than this value will be considered invalid. Defaults to 10. * @default 10 */ "minAge": number; } interface SallaUserSettings { } interface SallaVerify { /** * should auto reloading the page after success verification * @default true */ "autoReload": boolean; /** * Should render component without modal * @default 'modal' */ "display": 'inline' | 'modal'; /** * Get current code * @return */ "getCode": () => Promise; /** * Open verifying modal * @param data */ "open": (data: any) => Promise; /** * Once the api verify success, it will be login the customer in web pages * @default true */ "supportWebAuth": boolean; /** * Verifying method * @default 'mobile' */ "type": 'mobile' | 'email'; } interface SallaWallet { } } export interface SallaAccordionHeadCustomEvent extends CustomEvent { detail: T; target: HTMLSallaAccordionHeadElement; } export interface SallaAddProductButtonCustomEvent extends CustomEvent { detail: T; target: HTMLSallaAddProductButtonElement; } export interface SallaBookingFieldCustomEvent extends CustomEvent { detail: T; target: HTMLSallaBookingFieldElement; } export interface SallaBulletDeliveryCustomEvent extends CustomEvent { detail: T; target: HTMLSallaBulletDeliveryElement; } export interface SallaColorPickerCustomEvent extends CustomEvent { detail: T; target: HTMLSallaColorPickerElement; } export interface SallaCommentFormCustomEvent extends CustomEvent { detail: T; target: HTMLSallaCommentFormElement; } export interface SallaCustomFieldsCustomEvent extends CustomEvent { detail: T; target: HTMLSallaCustomFieldsElement; } export interface SallaDatetimePickerCustomEvent extends CustomEvent { detail: T; target: HTMLSallaDatetimePickerElement; } export interface SallaDrawerCustomEvent extends CustomEvent { detail: T; target: HTMLSallaDrawerElement; } export interface SallaFileUploadCustomEvent extends CustomEvent { detail: T; target: HTMLSallaFileUploadElement; } export interface SallaFiltersCustomEvent extends CustomEvent { detail: T; target: HTMLSallaFiltersElement; } export interface SallaFiltersWidgetCustomEvent extends CustomEvent { detail: T; target: HTMLSallaFiltersWidgetElement; } export interface SallaLoyaltyPrizeItemCustomEvent extends CustomEvent { detail: T; target: HTMLSallaLoyaltyPrizeItemElement; } export interface SallaLoyaltyRewardCustomEvent extends CustomEvent { detail: T; target: HTMLSallaLoyaltyRewardElement; } export interface SallaMapCustomEvent extends CustomEvent { detail: T; target: HTMLSallaMapElement; } export interface SallaModalCustomEvent extends CustomEvent { detail: T; target: HTMLSallaModalElement; } export interface SallaMultipleBundleProductOptionsModalCustomEvent extends CustomEvent { detail: T; target: HTMLSallaMultipleBundleProductOptionsModalElement; } export interface SallaMultipleBundleProductSliderCustomEvent extends CustomEvent { detail: T; target: HTMLSallaMultipleBundleProductSliderElement; } export interface SallaOrderEditItemCustomEvent extends CustomEvent { detail: T; target: HTMLSallaOrderEditItemElement; } export interface SallaOrderEditProductCardCustomEvent extends CustomEvent { detail: T; target: HTMLSallaOrderEditProductCardElement; } export interface SallaPriceRangeCustomEvent extends CustomEvent { detail: T; target: HTMLSallaPriceRangeElement; } export interface SallaProductOptionsCustomEvent extends CustomEvent { detail: T; target: HTMLSallaProductOptionsElement; } export interface SallaProductsListCustomEvent extends CustomEvent { detail: T; target: HTMLSallaProductsListElement; } export interface SallaQuickBuyCustomEvent extends CustomEvent { detail: T; target: HTMLSallaQuickBuyElement; } export interface SallaQuickOrderCustomEvent extends CustomEvent { detail: T; target: HTMLSallaQuickOrderElement; } export interface SallaRewardActionCustomEvent extends CustomEvent { detail: T; target: HTMLSallaRewardActionElement; } export interface SallaRewardCardCustomEvent extends CustomEvent { detail: T; target: HTMLSallaRewardCardElement; } export interface SallaRewardDetailsCustomEvent extends CustomEvent { detail: T; target: HTMLSallaRewardDetailsElement; } export interface SallaSearchableDropdownCustomEvent extends CustomEvent { detail: T; target: HTMLSallaSearchableDropdownElement; } export interface SallaSliderCustomEvent extends CustomEvent { detail: T; target: HTMLSallaSliderElement; } export interface SallaTabHeaderCustomEvent extends CustomEvent { detail: T; target: HTMLSallaTabHeaderElement; } export interface SallaTelInputCustomEvent extends CustomEvent { detail: T; target: HTMLSallaTelInputElement; } export interface SallaVerifyCustomEvent extends CustomEvent { detail: T; target: HTMLSallaVerifyElement; } declare global { /** * @salla /ui-components * The `salla-accordion` component represents an accordion element. * Use this component to encapsulate content within a collapsible section. */ interface HTMLSallaAccordionElement extends Components.SallaAccordion, HTMLStencilElement { } var HTMLSallaAccordionElement: { prototype: HTMLSallaAccordionElement; new (): HTMLSallaAccordionElement; }; /** * @salla /ui-components * The `salla-accordion-body` component represents the body/content of an accordion. */ interface HTMLSallaAccordionBodyElement extends Components.SallaAccordionBody, HTMLStencilElement { } var HTMLSallaAccordionBodyElement: { prototype: HTMLSallaAccordionBodyElement; new (): HTMLSallaAccordionBodyElement; }; interface HTMLSallaAccordionHeadElementEventMap { "accordionToggle": Object; } /** * @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 HTMLSallaAccordionHeadElement extends Components.SallaAccordionHead, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaAccordionHeadElement, ev: SallaAccordionHeadCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaAccordionHeadElement, ev: SallaAccordionHeadCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaAccordionHeadElement: { prototype: HTMLSallaAccordionHeadElement; new (): HTMLSallaAccordionHeadElement; }; interface HTMLSallaAddProductButtonElementEventMap { "success": any; "failed": any; } interface HTMLSallaAddProductButtonElement extends Components.SallaAddProductButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaAddProductButtonElement, ev: SallaAddProductButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaAddProductButtonElement, ev: SallaAddProductButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaAddProductButtonElement: { prototype: HTMLSallaAddProductButtonElement; new (): HTMLSallaAddProductButtonElement; }; interface HTMLSallaAdvertisementElement extends Components.SallaAdvertisement, HTMLStencilElement { } var HTMLSallaAdvertisementElement: { prototype: HTMLSallaAdvertisementElement; new (): HTMLSallaAdvertisementElement; }; interface HTMLSallaAlertElement extends Components.SallaAlert, HTMLStencilElement { } var HTMLSallaAlertElement: { prototype: HTMLSallaAlertElement; new (): HTMLSallaAlertElement; }; interface HTMLSallaAppInstallAlertElement extends Components.SallaAppInstallAlert, HTMLStencilElement { } var HTMLSallaAppInstallAlertElement: { prototype: HTMLSallaAppInstallAlertElement; new (): HTMLSallaAppInstallAlertElement; }; interface HTMLSallaAppsIconsElement extends Components.SallaAppsIcons, HTMLStencilElement { } var HTMLSallaAppsIconsElement: { prototype: HTMLSallaAppsIconsElement; new (): HTMLSallaAppsIconsElement; }; interface HTMLSallaBadgeElement extends Components.SallaBadge, HTMLStencilElement { } var HTMLSallaBadgeElement: { prototype: HTMLSallaBadgeElement; new (): HTMLSallaBadgeElement; }; interface HTMLSallaBookingFieldElementEventMap { "invalidInput": any; } interface HTMLSallaBookingFieldElement extends Components.SallaBookingField, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaBookingFieldElement, ev: SallaBookingFieldCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaBookingFieldElement, ev: SallaBookingFieldCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaBookingFieldElement: { prototype: HTMLSallaBookingFieldElement; new (): HTMLSallaBookingFieldElement; }; interface HTMLSallaBottomAlertElement extends Components.SallaBottomAlert, HTMLStencilElement { } var HTMLSallaBottomAlertElement: { prototype: HTMLSallaBottomAlertElement; new (): HTMLSallaBottomAlertElement; }; interface HTMLSallaBoughtTogetherElement extends Components.SallaBoughtTogether, HTMLStencilElement { } var HTMLSallaBoughtTogetherElement: { prototype: HTMLSallaBoughtTogetherElement; new (): HTMLSallaBoughtTogetherElement; }; /** * @name SallaBreadcrumb * @description A StencilJS component for rendering breadcrumb navigation. * @tag salla-breadcrumb */ interface HTMLSallaBreadcrumbElement extends Components.SallaBreadcrumb, HTMLStencilElement { } var HTMLSallaBreadcrumbElement: { prototype: HTMLSallaBreadcrumbElement; new (): HTMLSallaBreadcrumbElement; }; interface HTMLSallaBulletDeliveryElementEventMap { "bulletDeliveryConfirmed": BulletDeliveryConfirmedEvent; "bulletDeliveryClosed": void; "addressCreated": AddressCreatedEvent; "headerContextUpdate": HeaderContextUpdateEvent; } interface HTMLSallaBulletDeliveryElement extends Components.SallaBulletDelivery, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaBulletDeliveryElement, ev: SallaBulletDeliveryCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaBulletDeliveryElement, ev: SallaBulletDeliveryCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaBulletDeliveryElement: { prototype: HTMLSallaBulletDeliveryElement; new (): HTMLSallaBulletDeliveryElement; }; interface HTMLSallaButtonElement extends Components.SallaButton, HTMLStencilElement { } var HTMLSallaButtonElement: { prototype: HTMLSallaButtonElement; new (): HTMLSallaButtonElement; }; interface HTMLSallaCartCouponsElement extends Components.SallaCartCoupons, HTMLStencilElement { } var HTMLSallaCartCouponsElement: { prototype: HTMLSallaCartCouponsElement; new (): HTMLSallaCartCouponsElement; }; interface HTMLSallaCartItemOffersElement extends Components.SallaCartItemOffers, HTMLStencilElement { } var HTMLSallaCartItemOffersElement: { prototype: HTMLSallaCartItemOffersElement; new (): HTMLSallaCartItemOffersElement; }; interface HTMLSallaCartSummaryElement extends Components.SallaCartSummary, HTMLStencilElement { } var HTMLSallaCartSummaryElement: { prototype: HTMLSallaCartSummaryElement; new (): HTMLSallaCartSummaryElement; }; interface HTMLSallaCashbackBannerElement extends Components.SallaCashbackBanner, HTMLStencilElement { } var HTMLSallaCashbackBannerElement: { prototype: HTMLSallaCashbackBannerElement; new (): HTMLSallaCashbackBannerElement; }; interface HTMLSallaColorPickerElementEventMap { "colorChanged": Color; "invalidInput": any; "submitted": Color; "popupOpened": Color; "popupClosed": Color; } interface HTMLSallaColorPickerElement extends Components.SallaColorPicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaColorPickerElement, ev: SallaColorPickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaColorPickerElement, ev: SallaColorPickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaColorPickerElement: { prototype: HTMLSallaColorPickerElement; new (): HTMLSallaColorPickerElement; }; interface HTMLSallaCommentFormElementEventMap { "commentAdded": { id?: number; avatar?: string; name?: string; content?: string; is_pending?: boolean; created_at?: { date?: string }; images: string[]; }; } interface HTMLSallaCommentFormElement extends Components.SallaCommentForm, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaCommentFormElement, ev: SallaCommentFormCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaCommentFormElement, ev: SallaCommentFormCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaCommentFormElement: { prototype: HTMLSallaCommentFormElement; new (): HTMLSallaCommentFormElement; }; interface HTMLSallaCommentItemElement extends Components.SallaCommentItem, HTMLStencilElement { } var HTMLSallaCommentItemElement: { prototype: HTMLSallaCommentItemElement; new (): HTMLSallaCommentItemElement; }; interface HTMLSallaCommentsElement extends Components.SallaComments, HTMLStencilElement { } var HTMLSallaCommentsElement: { prototype: HTMLSallaCommentsElement; new (): HTMLSallaCommentsElement; }; /** * 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 HTMLSallaConditionalFieldsElement extends Components.SallaConditionalFields, HTMLStencilElement { } var HTMLSallaConditionalFieldsElement: { prototype: HTMLSallaConditionalFieldsElement; new (): HTMLSallaConditionalFieldsElement; }; interface HTMLSallaConditionalOfferElement extends Components.SallaConditionalOffer, HTMLStencilElement { } var HTMLSallaConditionalOfferElement: { prototype: HTMLSallaConditionalOfferElement; new (): HTMLSallaConditionalOfferElement; }; interface HTMLSallaContactsElement extends Components.SallaContacts, HTMLStencilElement { } var HTMLSallaContactsElement: { prototype: HTMLSallaContactsElement; new (): HTMLSallaContactsElement; }; interface HTMLSallaCookiesBarElement extends Components.SallaCookiesBar, HTMLStencilElement { } var HTMLSallaCookiesBarElement: { prototype: HTMLSallaCookiesBarElement; new (): HTMLSallaCookiesBarElement; }; interface HTMLSallaCountDownElement extends Components.SallaCountDown, HTMLStencilElement { } var HTMLSallaCountDownElement: { prototype: HTMLSallaCountDownElement; new (): HTMLSallaCountDownElement; }; interface HTMLSallaCustomFieldsElementEventMap { "fieldChanged": { fieldId: string | number; value: unknown; isValid: boolean; }; "fileUploaded": { fieldId: string | number; file: File; isValid: boolean; }; } interface HTMLSallaCustomFieldsElement extends Components.SallaCustomFields, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaCustomFieldsElement, ev: SallaCustomFieldsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaCustomFieldsElement, ev: SallaCustomFieldsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaCustomFieldsElement: { prototype: HTMLSallaCustomFieldsElement; new (): HTMLSallaCustomFieldsElement; }; interface HTMLSallaDatetimePickerElementEventMap { "picked": any; "invalidInput": any; } interface HTMLSallaDatetimePickerElement extends Components.SallaDatetimePicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaDatetimePickerElement, ev: SallaDatetimePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaDatetimePickerElement, ev: SallaDatetimePickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaDatetimePickerElement: { prototype: HTMLSallaDatetimePickerElement; new (): HTMLSallaDatetimePickerElement; }; /** * @name SallaDeliveryPromise * @description Displays delivery promise message (from BE) with city selection * @tag salla-delivery-promise */ interface HTMLSallaDeliveryPromiseElement extends Components.SallaDeliveryPromise, HTMLStencilElement { } var HTMLSallaDeliveryPromiseElement: { prototype: HTMLSallaDeliveryPromiseElement; new (): HTMLSallaDeliveryPromiseElement; }; interface HTMLSallaDrawerElementEventMap { "drawerVisibilityChanged": Boolean; } interface HTMLSallaDrawerElement extends Components.SallaDrawer, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaDrawerElement, ev: SallaDrawerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaDrawerElement, ev: SallaDrawerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaDrawerElement: { prototype: HTMLSallaDrawerElement; new (): HTMLSallaDrawerElement; }; interface HTMLSallaEditOrderButtonElement extends Components.SallaEditOrderButton, HTMLStencilElement { } var HTMLSallaEditOrderButtonElement: { prototype: HTMLSallaEditOrderButtonElement; new (): HTMLSallaEditOrderButtonElement; }; interface HTMLSallaFileUploadElementEventMap { "added": { error: FilePondErrorDescription | null, file: FilePondFile }; "invalidInput": any; "uploaded": string; "removed": FilePondFile; } interface HTMLSallaFileUploadElement extends Components.SallaFileUpload, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaFileUploadElement, ev: SallaFileUploadCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaFileUploadElement, ev: SallaFileUploadCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaFileUploadElement: { prototype: HTMLSallaFileUploadElement; new (): HTMLSallaFileUploadElement; }; interface HTMLSallaFiltersElementEventMap { "changed": any; } interface HTMLSallaFiltersElement extends Components.SallaFilters, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaFiltersElement, ev: SallaFiltersCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaFiltersElement, ev: SallaFiltersCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaFiltersElement: { prototype: HTMLSallaFiltersElement; new (): HTMLSallaFiltersElement; }; interface HTMLSallaFiltersWidgetElementEventMap { "changed": any; } interface HTMLSallaFiltersWidgetElement extends Components.SallaFiltersWidget, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaFiltersWidgetElement, ev: SallaFiltersWidgetCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaFiltersWidgetElement, ev: SallaFiltersWidgetCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaFiltersWidgetElement: { prototype: HTMLSallaFiltersWidgetElement; new (): HTMLSallaFiltersWidgetElement; }; /** * @name SallaFulfillmentMethods * @description Displays product fulfillment options (pickup and delivery) as two side-by-side cards * @tag salla-fulfillment-methods */ interface HTMLSallaFulfillmentMethodsElement extends Components.SallaFulfillmentMethods, HTMLStencilElement { } var HTMLSallaFulfillmentMethodsElement: { prototype: HTMLSallaFulfillmentMethodsElement; new (): HTMLSallaFulfillmentMethodsElement; }; interface HTMLSallaGiftingElement extends Components.SallaGifting, HTMLStencilElement { } var HTMLSallaGiftingElement: { prototype: HTMLSallaGiftingElement; new (): HTMLSallaGiftingElement; }; interface HTMLSallaHookElement extends Components.SallaHook, HTMLStencilElement { } var HTMLSallaHookElement: { prototype: HTMLSallaHookElement; new (): HTMLSallaHookElement; }; interface HTMLSallaInfiniteScrollElement extends Components.SallaInfiniteScroll, HTMLStencilElement { } var HTMLSallaInfiniteScrollElement: { prototype: HTMLSallaInfiniteScrollElement; new (): HTMLSallaInfiniteScrollElement; }; interface HTMLSallaInstallmentElement extends Components.SallaInstallment, HTMLStencilElement { } var HTMLSallaInstallmentElement: { prototype: HTMLSallaInstallmentElement; new (): HTMLSallaInstallmentElement; }; interface HTMLSallaListTileElement extends Components.SallaListTile, HTMLStencilElement { } var HTMLSallaListTileElement: { prototype: HTMLSallaListTileElement; new (): HTMLSallaListTileElement; }; interface HTMLSallaLoadingElement extends Components.SallaLoading, HTMLStencilElement { } var HTMLSallaLoadingElement: { prototype: HTMLSallaLoadingElement; new (): HTMLSallaLoadingElement; }; interface HTMLSallaLocalizationModalElement extends Components.SallaLocalizationModal, HTMLStencilElement { } var HTMLSallaLocalizationModalElement: { prototype: HTMLSallaLocalizationModalElement; new (): HTMLSallaLocalizationModalElement; }; interface HTMLSallaLoginModalElement extends Components.SallaLoginModal, HTMLStencilElement { } var HTMLSallaLoginModalElement: { prototype: HTMLSallaLoginModalElement; new (): HTMLSallaLoginModalElement; }; interface HTMLSallaLoyaltyElement extends Components.SallaLoyalty, HTMLStencilElement { } var HTMLSallaLoyaltyElement: { prototype: HTMLSallaLoyaltyElement; new (): HTMLSallaLoyaltyElement; }; interface HTMLSallaLoyaltyBannerElement extends Components.SallaLoyaltyBanner, HTMLStencilElement { } var HTMLSallaLoyaltyBannerElement: { prototype: HTMLSallaLoyaltyBannerElement; new (): HTMLSallaLoyaltyBannerElement; }; interface HTMLSallaLoyaltyHeroElement extends Components.SallaLoyaltyHero, HTMLStencilElement { } var HTMLSallaLoyaltyHeroElement: { prototype: HTMLSallaLoyaltyHeroElement; new (): HTMLSallaLoyaltyHeroElement; }; interface HTMLSallaLoyaltyPanelElement extends Components.SallaLoyaltyPanel, HTMLStencilElement { } var HTMLSallaLoyaltyPanelElement: { prototype: HTMLSallaLoyaltyPanelElement; new (): HTMLSallaLoyaltyPanelElement; }; interface HTMLSallaLoyaltyPointElement extends Components.SallaLoyaltyPoint, HTMLStencilElement { } var HTMLSallaLoyaltyPointElement: { prototype: HTMLSallaLoyaltyPointElement; new (): HTMLSallaLoyaltyPointElement; }; interface HTMLSallaLoyaltyPointsBannerElement extends Components.SallaLoyaltyPointsBanner, HTMLStencilElement { } var HTMLSallaLoyaltyPointsBannerElement: { prototype: HTMLSallaLoyaltyPointsBannerElement; new (): HTMLSallaLoyaltyPointsBannerElement; }; interface HTMLSallaLoyaltyPrizeItemElementEventMap { "prizeItemSelected": Item; } interface HTMLSallaLoyaltyPrizeItemElement extends Components.SallaLoyaltyPrizeItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaLoyaltyPrizeItemElement, ev: SallaLoyaltyPrizeItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaLoyaltyPrizeItemElement, ev: SallaLoyaltyPrizeItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaLoyaltyPrizeItemElement: { prototype: HTMLSallaLoyaltyPrizeItemElement; new (): HTMLSallaLoyaltyPrizeItemElement; }; interface HTMLSallaLoyaltyProgramElement extends Components.SallaLoyaltyProgram, HTMLStencilElement { } var HTMLSallaLoyaltyProgramElement: { prototype: HTMLSallaLoyaltyProgramElement; new (): HTMLSallaLoyaltyProgramElement; }; interface HTMLSallaLoyaltyRewardElementEventMap { "rewardModalOpen": Prize; "confirmModalOpen": Prize; } interface HTMLSallaLoyaltyRewardElement extends Components.SallaLoyaltyReward, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaLoyaltyRewardElement, ev: SallaLoyaltyRewardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaLoyaltyRewardElement, ev: SallaLoyaltyRewardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaLoyaltyRewardElement: { prototype: HTMLSallaLoyaltyRewardElement; new (): HTMLSallaLoyaltyRewardElement; }; interface HTMLSallaMaintenanceAlertElement extends Components.SallaMaintenanceAlert, HTMLStencilElement { } var HTMLSallaMaintenanceAlertElement: { prototype: HTMLSallaMaintenanceAlertElement; new (): HTMLSallaMaintenanceAlertElement; }; interface HTMLSallaMapElementEventMap { "selected": any; "mapClicked": any; "currentLocationChanged": any; "invalidInput": any; } interface HTMLSallaMapElement extends Components.SallaMap, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaMapElement, ev: SallaMapCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaMapElement, ev: SallaMapCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaMapElement: { prototype: HTMLSallaMapElement; new (): HTMLSallaMapElement; }; interface HTMLSallaMenuElement extends Components.SallaMenu, HTMLStencilElement { } var HTMLSallaMenuElement: { prototype: HTMLSallaMenuElement; new (): HTMLSallaMenuElement; }; interface HTMLSallaMetadataElement extends Components.SallaMetadata, HTMLStencilElement { } var HTMLSallaMetadataElement: { prototype: HTMLSallaMetadataElement; new (): HTMLSallaMetadataElement; }; interface HTMLSallaModalElementEventMap { "modalVisibilityChanged": Boolean; } interface HTMLSallaModalElement extends Components.SallaModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaModalElement, ev: SallaModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaModalElement, ev: SallaModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaModalElement: { prototype: HTMLSallaModalElement; new (): HTMLSallaModalElement; }; /** * Example usage with new nested structure: * */ interface HTMLSallaMultipleBundleProductElement extends Components.SallaMultipleBundleProduct, HTMLStencilElement { } var HTMLSallaMultipleBundleProductElement: { prototype: HTMLSallaMultipleBundleProductElement; new (): HTMLSallaMultipleBundleProductElement; }; interface HTMLSallaMultipleBundleProductCartElement extends Components.SallaMultipleBundleProductCart, HTMLStencilElement { } var HTMLSallaMultipleBundleProductCartElement: { prototype: HTMLSallaMultipleBundleProductCartElement; new (): HTMLSallaMultipleBundleProductCartElement; }; interface HTMLSallaMultipleBundleProductDetailsElement extends Components.SallaMultipleBundleProductDetails, HTMLStencilElement { } var HTMLSallaMultipleBundleProductDetailsElement: { prototype: HTMLSallaMultipleBundleProductDetailsElement; new (): HTMLSallaMultipleBundleProductDetailsElement; }; interface HTMLSallaMultipleBundleProductOptionsModalElementEventMap { "optionsSaved": { productId: number; selectedOptions: SelectedOption[]; sectionId?: string | number | null; productIndex?: number | null; }; "productSelected": { productId: number; sectionId: string | number; product?: BundleProduct; fromModal?: boolean; }; } interface HTMLSallaMultipleBundleProductOptionsModalElement extends Components.SallaMultipleBundleProductOptionsModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaMultipleBundleProductOptionsModalElement, ev: SallaMultipleBundleProductOptionsModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaMultipleBundleProductOptionsModalElement, ev: SallaMultipleBundleProductOptionsModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaMultipleBundleProductOptionsModalElement: { prototype: HTMLSallaMultipleBundleProductOptionsModalElement; new (): HTMLSallaMultipleBundleProductOptionsModalElement; }; interface HTMLSallaMultipleBundleProductSliderElementEventMap { "productSelected": { product: BundleProduct; sectionId: string | number }; "productOptionsSelected": { product: BundleProduct; sectionId: string | number; }; } interface HTMLSallaMultipleBundleProductSliderElement extends Components.SallaMultipleBundleProductSlider, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaMultipleBundleProductSliderElement, ev: SallaMultipleBundleProductSliderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaMultipleBundleProductSliderElement, ev: SallaMultipleBundleProductSliderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaMultipleBundleProductSliderElement: { prototype: HTMLSallaMultipleBundleProductSliderElement; new (): HTMLSallaMultipleBundleProductSliderElement; }; interface HTMLSallaNextOrderCouponElement extends Components.SallaNextOrderCoupon, HTMLStencilElement { } var HTMLSallaNextOrderCouponElement: { prototype: HTMLSallaNextOrderCouponElement; new (): HTMLSallaNextOrderCouponElement; }; interface HTMLSallaNotificationItemElement extends Components.SallaNotificationItem, HTMLStencilElement { } var HTMLSallaNotificationItemElement: { prototype: HTMLSallaNotificationItemElement; new (): HTMLSallaNotificationItemElement; }; interface HTMLSallaNotificationsElement extends Components.SallaNotifications, HTMLStencilElement { } var HTMLSallaNotificationsElement: { prototype: HTMLSallaNotificationsElement; new (): HTMLSallaNotificationsElement; }; /** * `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 */ interface HTMLSallaOfferElement extends Components.SallaOffer, HTMLStencilElement { } var HTMLSallaOfferElement: { prototype: HTMLSallaOfferElement; new (): HTMLSallaOfferElement; }; interface HTMLSallaOfferModalElement extends Components.SallaOfferModal, HTMLStencilElement { } var HTMLSallaOfferModalElement: { prototype: HTMLSallaOfferModalElement; new (): HTMLSallaOfferModalElement; }; /** * @salla /ui-components * The `salla-order-details` component renders a collapsible summary for an order product with optional options list. * It uses the salla-accordion component to provide collapsible functionality. */ interface HTMLSallaOrderDetailsElement extends Components.SallaOrderDetails, HTMLStencilElement { } var HTMLSallaOrderDetailsElement: { prototype: HTMLSallaOrderDetailsElement; new (): HTMLSallaOrderDetailsElement; }; /** * @salla /ui-components * The `salla-order-details-multiple-bundle-product` component renders a collapsible summary for an order multiple bundle product with optional options list. * It uses the salla-accordion component to provide collapsible functionality. */ interface HTMLSallaOrderDetailsMultipleBundleProductElement extends Components.SallaOrderDetailsMultipleBundleProduct, HTMLStencilElement { } var HTMLSallaOrderDetailsMultipleBundleProductElement: { prototype: HTMLSallaOrderDetailsMultipleBundleProductElement; new (): HTMLSallaOrderDetailsMultipleBundleProductElement; }; /** * @salla /ui-components * The `salla-order-details-options` component renders product options for order details. * It displays various types of options including colors, images, files, maps, and text values. */ interface HTMLSallaOrderDetailsOptionsElement extends Components.SallaOrderDetailsOptions, HTMLStencilElement { } var HTMLSallaOrderDetailsOptionsElement: { prototype: HTMLSallaOrderDetailsOptionsElement; new (): HTMLSallaOrderDetailsOptionsElement; }; /** * @salla /ui-components * The `salla-order-edit` component * as an editable card with quantity controls, editable options, and an order summary. */ interface HTMLSallaOrderEditElement extends Components.SallaOrderEdit, HTMLStencilElement { } var HTMLSallaOrderEditElement: { prototype: HTMLSallaOrderEditElement; new (): HTMLSallaOrderEditElement; }; interface HTMLSallaOrderEditItemElementEventMap { "orderItemUpdated": { itemId: string | number; quantity: number; options?: OrderEditSelectedOptions; optionDefinitions?: OrderEditProductOption[]; }; "orderItemRemoved": { itemId: string | number; }; } /** * @salla /ui-components * The `salla-order-edit-item` component renders a single editable order item card * with quantity controls, editable product options, and a remove button. */ interface HTMLSallaOrderEditItemElement extends Components.SallaOrderEditItem, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaOrderEditItemElement, ev: SallaOrderEditItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaOrderEditItemElement, ev: SallaOrderEditItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaOrderEditItemElement: { prototype: HTMLSallaOrderEditItemElement; new (): HTMLSallaOrderEditItemElement; }; interface HTMLSallaOrderEditProductCardElementEventMap { "orderEditProductSelected": { product: Product; }; } interface HTMLSallaOrderEditProductCardElement extends Components.SallaOrderEditProductCard, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaOrderEditProductCardElement, ev: SallaOrderEditProductCardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaOrderEditProductCardElement, ev: SallaOrderEditProductCardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaOrderEditProductCardElement: { prototype: HTMLSallaOrderEditProductCardElement; new (): HTMLSallaOrderEditProductCardElement; }; interface HTMLSallaOrderSummaryElement extends Components.SallaOrderSummary, HTMLStencilElement { } var HTMLSallaOrderSummaryElement: { prototype: HTMLSallaOrderSummaryElement; new (): HTMLSallaOrderSummaryElement; }; interface HTMLSallaOrderTotalsCardElement extends Components.SallaOrderTotalsCard, HTMLStencilElement { } var HTMLSallaOrderTotalsCardElement: { prototype: HTMLSallaOrderTotalsCardElement; new (): HTMLSallaOrderTotalsCardElement; }; interface HTMLSallaOrdersElement extends Components.SallaOrders, HTMLStencilElement { } var HTMLSallaOrdersElement: { prototype: HTMLSallaOrdersElement; new (): HTMLSallaOrdersElement; }; interface HTMLSallaPaymentsElement extends Components.SallaPayments, HTMLStencilElement { } var HTMLSallaPaymentsElement: { prototype: HTMLSallaPaymentsElement; new (): HTMLSallaPaymentsElement; }; interface HTMLSallaPlaceholderElement extends Components.SallaPlaceholder, HTMLStencilElement { } var HTMLSallaPlaceholderElement: { prototype: HTMLSallaPlaceholderElement; new (): HTMLSallaPlaceholderElement; }; interface HTMLSallaPriceRangeElementEventMap { "changed": any; } interface HTMLSallaPriceRangeElement extends Components.SallaPriceRange, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaPriceRangeElement, ev: SallaPriceRangeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaPriceRangeElement, ev: SallaPriceRangeCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaPriceRangeElement: { prototype: HTMLSallaPriceRangeElement; new (): HTMLSallaPriceRangeElement; }; interface HTMLSallaProductAvailabilityElement extends Components.SallaProductAvailability, HTMLStencilElement { } var HTMLSallaProductAvailabilityElement: { prototype: HTMLSallaProductAvailabilityElement; new (): HTMLSallaProductAvailabilityElement; }; interface HTMLSallaProductCardElement extends Components.SallaProductCard, HTMLStencilElement { } var HTMLSallaProductCardElement: { prototype: HTMLSallaProductCardElement; new (): HTMLSallaProductCardElement; }; interface HTMLSallaProductCardEmbedElement extends Components.SallaProductCardEmbed, HTMLStencilElement { } var HTMLSallaProductCardEmbedElement: { prototype: HTMLSallaProductCardEmbedElement; new (): HTMLSallaProductCardEmbedElement; }; interface HTMLSallaProductOptionsElementEventMap { "changed": any; } interface HTMLSallaProductOptionsElement extends Components.SallaProductOptions, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaProductOptionsElement, ev: SallaProductOptionsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaProductOptionsElement, ev: SallaProductOptionsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaProductOptionsElement: { prototype: HTMLSallaProductOptionsElement; new (): HTMLSallaProductOptionsElement; }; interface HTMLSallaProductSizeGuideElement extends Components.SallaProductSizeGuide, HTMLStencilElement { } var HTMLSallaProductSizeGuideElement: { prototype: HTMLSallaProductSizeGuideElement; new (): HTMLSallaProductSizeGuideElement; }; interface HTMLSallaProductsListElementEventMap { "productsFetched": any; } interface HTMLSallaProductsListElement extends Components.SallaProductsList, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaProductsListElement, ev: SallaProductsListCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaProductsListElement, ev: SallaProductsListCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaProductsListElement: { prototype: HTMLSallaProductsListElement; new (): HTMLSallaProductsListElement; }; interface HTMLSallaProductsSliderElement extends Components.SallaProductsSlider, HTMLStencilElement { } var HTMLSallaProductsSliderElement: { prototype: HTMLSallaProductsSliderElement; new (): HTMLSallaProductsSliderElement; }; interface HTMLSallaProgressBarElement extends Components.SallaProgressBar, HTMLStencilElement { } var HTMLSallaProgressBarElement: { prototype: HTMLSallaProgressBarElement; new (): HTMLSallaProgressBarElement; }; interface HTMLSallaQuantityInputElement extends Components.SallaQuantityInput, HTMLStencilElement { } var HTMLSallaQuantityInputElement: { prototype: HTMLSallaQuantityInputElement; new (): HTMLSallaQuantityInputElement; }; interface HTMLSallaQuickBuyElementEventMap { "validationFailed": { productId: string }; "requireLogin": { productId: string }; } interface HTMLSallaQuickBuyElement extends Components.SallaQuickBuy, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaQuickBuyElement, ev: SallaQuickBuyCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaQuickBuyElement, ev: SallaQuickBuyCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaQuickBuyElement: { prototype: HTMLSallaQuickBuyElement; new (): HTMLSallaQuickBuyElement; }; interface HTMLSallaQuickOrderElementEventMap { "quickOrderSubmited": any; } interface HTMLSallaQuickOrderElement extends Components.SallaQuickOrder, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaQuickOrderElement, ev: SallaQuickOrderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaQuickOrderElement, ev: SallaQuickOrderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaQuickOrderElement: { prototype: HTMLSallaQuickOrderElement; new (): HTMLSallaQuickOrderElement; }; interface HTMLSallaRatingModalElement extends Components.SallaRatingModal, HTMLStencilElement { } var HTMLSallaRatingModalElement: { prototype: HTMLSallaRatingModalElement; new (): HTMLSallaRatingModalElement; }; interface HTMLSallaRatingStarsElement extends Components.SallaRatingStars, HTMLStencilElement { } var HTMLSallaRatingStarsElement: { prototype: HTMLSallaRatingStarsElement; new (): HTMLSallaRatingStarsElement; }; interface HTMLSallaReviewCardElement extends Components.SallaReviewCard, HTMLStencilElement { } var HTMLSallaReviewCardElement: { prototype: HTMLSallaReviewCardElement; new (): HTMLSallaReviewCardElement; }; interface HTMLSallaReviewsElement extends Components.SallaReviews, HTMLStencilElement { } var HTMLSallaReviewsElement: { prototype: HTMLSallaReviewsElement; new (): HTMLSallaReviewsElement; }; interface HTMLSallaReviewsPageElement extends Components.SallaReviewsPage, HTMLStencilElement { } var HTMLSallaReviewsPageElement: { prototype: HTMLSallaReviewsPageElement; new (): HTMLSallaReviewsPageElement; }; interface HTMLSallaReviewsSummaryElement extends Components.SallaReviewsSummary, HTMLStencilElement { } var HTMLSallaReviewsSummaryElement: { prototype: HTMLSallaReviewsSummaryElement; new (): HTMLSallaReviewsSummaryElement; }; interface HTMLSallaRewardActionElementEventMap { "actionClick": MouseEvent; } interface HTMLSallaRewardActionElement extends Components.SallaRewardAction, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaRewardActionElement, ev: SallaRewardActionCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaRewardActionElement, ev: SallaRewardActionCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaRewardActionElement: { prototype: HTMLSallaRewardActionElement; new (): HTMLSallaRewardActionElement; }; interface HTMLSallaRewardCardElementEventMap { "areaClick": MouseEvent; "actionClick": MouseEvent; } interface HTMLSallaRewardCardElement extends Components.SallaRewardCard, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaRewardCardElement, ev: SallaRewardCardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaRewardCardElement, ev: SallaRewardCardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaRewardCardElement: { prototype: HTMLSallaRewardCardElement; new (): HTMLSallaRewardCardElement; }; interface HTMLSallaRewardDetailsElementEventMap { "actionClick": MouseEvent; } interface HTMLSallaRewardDetailsElement extends Components.SallaRewardDetails, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaRewardDetailsElement, ev: SallaRewardDetailsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaRewardDetailsElement, ev: SallaRewardDetailsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaRewardDetailsElement: { prototype: HTMLSallaRewardDetailsElement; new (): HTMLSallaRewardDetailsElement; }; interface HTMLSallaRewardExchangeElement extends Components.SallaRewardExchange, HTMLStencilElement { } var HTMLSallaRewardExchangeElement: { prototype: HTMLSallaRewardExchangeElement; new (): HTMLSallaRewardExchangeElement; }; interface HTMLSallaScopesElement extends Components.SallaScopes, HTMLStencilElement { } var HTMLSallaScopesElement: { prototype: HTMLSallaScopesElement; new (): HTMLSallaScopesElement; }; interface HTMLSallaSearchElement extends Components.SallaSearch, HTMLStencilElement { } var HTMLSallaSearchElement: { prototype: HTMLSallaSearchElement; new (): HTMLSallaSearchElement; }; interface HTMLSallaSearchableDropdownElementEventMap { "itemSelected": DropdownItem; "searchInput": string; "dropdownOpened": void; "dropdownClosed": void; } interface HTMLSallaSearchableDropdownElement extends Components.SallaSearchableDropdown, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaSearchableDropdownElement, ev: SallaSearchableDropdownCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaSearchableDropdownElement, ev: SallaSearchableDropdownCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaSearchableDropdownElement: { prototype: HTMLSallaSearchableDropdownElement; new (): HTMLSallaSearchableDropdownElement; }; interface HTMLSallaSkeletonElement extends Components.SallaSkeleton, HTMLStencilElement { } var HTMLSallaSkeletonElement: { prototype: HTMLSallaSkeletonElement; new (): HTMLSallaSkeletonElement; }; interface HTMLSallaSliderElementEventMap { "afterInit": any; "slideChange": any; "reachBeginning": any; "reachEnd": any; "slideChangeTransitionEnd": any; "slideChangeTransitionStart": any; "slideNextTransitionEnd": any; "slideNextTransitionStart": any; "slidePrevTransitionEnd": any; "slidePrevTransitionStart": any; "sliderMove": any; "touchSliderEnd": any; "touchSliderMove": any; "touchSliderStart": any; "sliderTransitionEnd": any; "sliderTransitionStart": any; } interface HTMLSallaSliderElement extends Components.SallaSlider, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaSliderElement, ev: SallaSliderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaSliderElement, ev: SallaSliderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaSliderElement: { prototype: HTMLSallaSliderElement; new (): HTMLSallaSliderElement; }; interface HTMLSallaSocialElement extends Components.SallaSocial, HTMLStencilElement { } var HTMLSallaSocialElement: { prototype: HTMLSallaSocialElement; new (): HTMLSallaSocialElement; }; interface HTMLSallaSocialShareElement extends Components.SallaSocialShare, HTMLStencilElement { } var HTMLSallaSocialShareElement: { prototype: HTMLSallaSocialShareElement; new (): HTMLSallaSocialShareElement; }; interface HTMLSallaTabContentElement extends Components.SallaTabContent, HTMLStencilElement { } var HTMLSallaTabContentElement: { prototype: HTMLSallaTabContentElement; new (): HTMLSallaTabContentElement; }; interface HTMLSallaTabHeaderElementEventMap { "tabSelected": any; } interface HTMLSallaTabHeaderElement extends Components.SallaTabHeader, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaTabHeaderElement, ev: SallaTabHeaderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaTabHeaderElement, ev: SallaTabHeaderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaTabHeaderElement: { prototype: HTMLSallaTabHeaderElement; new (): HTMLSallaTabHeaderElement; }; interface HTMLSallaTabsElement extends Components.SallaTabs, HTMLStencilElement { } var HTMLSallaTabsElement: { prototype: HTMLSallaTabsElement; new (): HTMLSallaTabsElement; }; interface HTMLSallaTelInputElementEventMap { "phoneEntered": Phone; } interface HTMLSallaTelInputElement extends Components.SallaTelInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaTelInputElement, ev: SallaTelInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaTelInputElement, ev: SallaTelInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaTelInputElement: { prototype: HTMLSallaTelInputElement; new (): HTMLSallaTelInputElement; }; interface HTMLSallaTieredOfferElement extends Components.SallaTieredOffer, HTMLStencilElement { } var HTMLSallaTieredOfferElement: { prototype: HTMLSallaTieredOfferElement; new (): HTMLSallaTieredOfferElement; }; interface HTMLSallaTooltipElement extends Components.SallaTooltip, HTMLStencilElement { } var HTMLSallaTooltipElement: { prototype: HTMLSallaTooltipElement; new (): HTMLSallaTooltipElement; }; interface HTMLSallaTrustBadgesElement extends Components.SallaTrustBadges, HTMLStencilElement { } var HTMLSallaTrustBadgesElement: { prototype: HTMLSallaTrustBadgesElement; new (): HTMLSallaTrustBadgesElement; }; interface HTMLSallaUserMenuElement extends Components.SallaUserMenu, HTMLStencilElement { } var HTMLSallaUserMenuElement: { prototype: HTMLSallaUserMenuElement; new (): HTMLSallaUserMenuElement; }; /** * The SallaUserProfile is a versatile user profile form * generator within the Salla platform, offering localization support, * customizable fields, and seamless integration with the Salla API. * It dynamically fetches translated strings for labels and messages from the * Salla localization object, allowing for a multilingual user interface. Users * retrieval from the Salla configuration and includes fields for first name, * last name, birthday, gender, email, mobile, and custom additions. Form * validation and submission are handled through various event handlers, ensuring * proper field handling and user input validation. The component supports file * uploads for photo fields and includes a dedicated phone number input field. * The componentWillLoad lifecycle method fetches additional user profile * information from the API during initialization. Overall, this component * provides an efficient and adaptable solution for creating user profiles with a * rich set of features and customization options. */ interface HTMLSallaUserProfileElement extends Components.SallaUserProfile, HTMLStencilElement { } var HTMLSallaUserProfileElement: { prototype: HTMLSallaUserProfileElement; new (): HTMLSallaUserProfileElement; }; interface HTMLSallaUserSettingsElement extends Components.SallaUserSettings, HTMLStencilElement { } var HTMLSallaUserSettingsElement: { prototype: HTMLSallaUserSettingsElement; new (): HTMLSallaUserSettingsElement; }; interface HTMLSallaVerifyElementEventMap { "verified": any; } interface HTMLSallaVerifyElement extends Components.SallaVerify, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLSallaVerifyElement, ev: SallaVerifyCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLSallaVerifyElement, ev: SallaVerifyCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLSallaVerifyElement: { prototype: HTMLSallaVerifyElement; new (): HTMLSallaVerifyElement; }; interface HTMLSallaWalletElement extends Components.SallaWallet, HTMLStencilElement { } var HTMLSallaWalletElement: { prototype: HTMLSallaWalletElement; new (): HTMLSallaWalletElement; }; interface HTMLElementTagNameMap { "salla-accordion": HTMLSallaAccordionElement; "salla-accordion-body": HTMLSallaAccordionBodyElement; "salla-accordion-head": HTMLSallaAccordionHeadElement; "salla-add-product-button": HTMLSallaAddProductButtonElement; "salla-advertisement": HTMLSallaAdvertisementElement; "salla-alert": HTMLSallaAlertElement; "salla-app-install-alert": HTMLSallaAppInstallAlertElement; "salla-apps-icons": HTMLSallaAppsIconsElement; "salla-badge": HTMLSallaBadgeElement; "salla-booking-field": HTMLSallaBookingFieldElement; "salla-bottom-alert": HTMLSallaBottomAlertElement; "salla-bought-together": HTMLSallaBoughtTogetherElement; "salla-breadcrumb": HTMLSallaBreadcrumbElement; "salla-bullet-delivery": HTMLSallaBulletDeliveryElement; "salla-button": HTMLSallaButtonElement; "salla-cart-coupons": HTMLSallaCartCouponsElement; "salla-cart-item-offers": HTMLSallaCartItemOffersElement; "salla-cart-summary": HTMLSallaCartSummaryElement; "salla-cashback-banner": HTMLSallaCashbackBannerElement; "salla-color-picker": HTMLSallaColorPickerElement; "salla-comment-form": HTMLSallaCommentFormElement; "salla-comment-item": HTMLSallaCommentItemElement; "salla-comments": HTMLSallaCommentsElement; "salla-conditional-fields": HTMLSallaConditionalFieldsElement; "salla-conditional-offer": HTMLSallaConditionalOfferElement; "salla-contacts": HTMLSallaContactsElement; "salla-cookies-bar": HTMLSallaCookiesBarElement; "salla-count-down": HTMLSallaCountDownElement; "salla-custom-fields": HTMLSallaCustomFieldsElement; "salla-datetime-picker": HTMLSallaDatetimePickerElement; "salla-delivery-promise": HTMLSallaDeliveryPromiseElement; "salla-drawer": HTMLSallaDrawerElement; "salla-edit-order-button": HTMLSallaEditOrderButtonElement; "salla-file-upload": HTMLSallaFileUploadElement; "salla-filters": HTMLSallaFiltersElement; "salla-filters-widget": HTMLSallaFiltersWidgetElement; "salla-fulfillment-methods": HTMLSallaFulfillmentMethodsElement; "salla-gifting": HTMLSallaGiftingElement; "salla-hook": HTMLSallaHookElement; "salla-infinite-scroll": HTMLSallaInfiniteScrollElement; "salla-installment": HTMLSallaInstallmentElement; "salla-list-tile": HTMLSallaListTileElement; "salla-loading": HTMLSallaLoadingElement; "salla-localization-modal": HTMLSallaLocalizationModalElement; "salla-login-modal": HTMLSallaLoginModalElement; "salla-loyalty": HTMLSallaLoyaltyElement; "salla-loyalty-banner": HTMLSallaLoyaltyBannerElement; "salla-loyalty-hero": HTMLSallaLoyaltyHeroElement; "salla-loyalty-panel": HTMLSallaLoyaltyPanelElement; "salla-loyalty-point": HTMLSallaLoyaltyPointElement; "salla-loyalty-points-banner": HTMLSallaLoyaltyPointsBannerElement; "salla-loyalty-prize-item": HTMLSallaLoyaltyPrizeItemElement; "salla-loyalty-program": HTMLSallaLoyaltyProgramElement; "salla-loyalty-reward": HTMLSallaLoyaltyRewardElement; "salla-maintenance-alert": HTMLSallaMaintenanceAlertElement; "salla-map": HTMLSallaMapElement; "salla-menu": HTMLSallaMenuElement; "salla-metadata": HTMLSallaMetadataElement; "salla-modal": HTMLSallaModalElement; "salla-multiple-bundle-product": HTMLSallaMultipleBundleProductElement; "salla-multiple-bundle-product-cart": HTMLSallaMultipleBundleProductCartElement; "salla-multiple-bundle-product-details": HTMLSallaMultipleBundleProductDetailsElement; "salla-multiple-bundle-product-options-modal": HTMLSallaMultipleBundleProductOptionsModalElement; "salla-multiple-bundle-product-slider": HTMLSallaMultipleBundleProductSliderElement; "salla-next-order-coupon": HTMLSallaNextOrderCouponElement; "salla-notification-item": HTMLSallaNotificationItemElement; "salla-notifications": HTMLSallaNotificationsElement; "salla-offer": HTMLSallaOfferElement; "salla-offer-modal": HTMLSallaOfferModalElement; "salla-order-details": HTMLSallaOrderDetailsElement; "salla-order-details-multiple-bundle-product": HTMLSallaOrderDetailsMultipleBundleProductElement; "salla-order-details-options": HTMLSallaOrderDetailsOptionsElement; "salla-order-edit": HTMLSallaOrderEditElement; "salla-order-edit-item": HTMLSallaOrderEditItemElement; "salla-order-edit-product-card": HTMLSallaOrderEditProductCardElement; "salla-order-summary": HTMLSallaOrderSummaryElement; "salla-order-totals-card": HTMLSallaOrderTotalsCardElement; "salla-orders": HTMLSallaOrdersElement; "salla-payments": HTMLSallaPaymentsElement; "salla-placeholder": HTMLSallaPlaceholderElement; "salla-price-range": HTMLSallaPriceRangeElement; "salla-product-availability": HTMLSallaProductAvailabilityElement; "salla-product-card": HTMLSallaProductCardElement; "salla-product-card-embed": HTMLSallaProductCardEmbedElement; "salla-product-options": HTMLSallaProductOptionsElement; "salla-product-size-guide": HTMLSallaProductSizeGuideElement; "salla-products-list": HTMLSallaProductsListElement; "salla-products-slider": HTMLSallaProductsSliderElement; "salla-progress-bar": HTMLSallaProgressBarElement; "salla-quantity-input": HTMLSallaQuantityInputElement; "salla-quick-buy": HTMLSallaQuickBuyElement; "salla-quick-order": HTMLSallaQuickOrderElement; "salla-rating-modal": HTMLSallaRatingModalElement; "salla-rating-stars": HTMLSallaRatingStarsElement; "salla-review-card": HTMLSallaReviewCardElement; "salla-reviews": HTMLSallaReviewsElement; "salla-reviews-page": HTMLSallaReviewsPageElement; "salla-reviews-summary": HTMLSallaReviewsSummaryElement; "salla-reward-action": HTMLSallaRewardActionElement; "salla-reward-card": HTMLSallaRewardCardElement; "salla-reward-details": HTMLSallaRewardDetailsElement; "salla-reward-exchange": HTMLSallaRewardExchangeElement; "salla-scopes": HTMLSallaScopesElement; "salla-search": HTMLSallaSearchElement; "salla-searchable-dropdown": HTMLSallaSearchableDropdownElement; "salla-skeleton": HTMLSallaSkeletonElement; "salla-slider": HTMLSallaSliderElement; "salla-social": HTMLSallaSocialElement; "salla-social-share": HTMLSallaSocialShareElement; "salla-tab-content": HTMLSallaTabContentElement; "salla-tab-header": HTMLSallaTabHeaderElement; "salla-tabs": HTMLSallaTabsElement; "salla-tel-input": HTMLSallaTelInputElement; "salla-tiered-offer": HTMLSallaTieredOfferElement; "salla-tooltip": HTMLSallaTooltipElement; "salla-trust-badges": HTMLSallaTrustBadgesElement; "salla-user-menu": HTMLSallaUserMenuElement; "salla-user-profile": HTMLSallaUserProfileElement; "salla-user-settings": HTMLSallaUserSettingsElement; "salla-verify": HTMLSallaVerifyElement; "salla-wallet": HTMLSallaWalletElement; } } declare namespace LocalJSX { /** * @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; /** * Emitted when the accordion head is clicked and the collapsed state changes. Only emitted when the component is collapsible. * @event accordionToggle * @type {Object} * @property {Object} detail.payload - The event payload * @property {boolean} detail.payload.collapsed - The new collapsed state */ "onAccordionToggle"?: (event: SallaAccordionHeadCustomEvent) => void; } interface SallaAddProductButton { /** * Channels. */ "channels"?: string; /** * Donating amount. */ "donatingAmount"?: number; /** * Has Pre Order * @default false */ "hasPreOrder"?: boolean; /** * Listen to product options availability. */ "notifyOptionsAvailability"?: boolean; /** * Custome DOM event emitter when product addition to cart fails. */ "onFailed"?: (event: SallaAddProductButtonCustomEvent) => void; /** * Custome DOM event emitter when product gets added to cart successfully. */ "onSuccess"?: (event: SallaAddProductButtonCustomEvent) => void; /** * 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 SallaBadge { /** * The background color of the badge * @default 'light' */ "bg"?: 'transparent' | 'light' | 'primary-100'; /** * The text color of the badge * @default 'black' */ "color"?: 'black' | 'primary-900'; /** * The size of the badge * @default 'sm' */ "size"?: 'xs' | 'sm' | 'md'; } interface SallaBookingField { /** * Event emitted when the input is invalid. */ "onInvalidInput"?: (event: SallaBookingFieldCustomEvent) => void; /** * 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'; } interface SallaBoughtTogether { /** * Maximum number of recommendations to fetch. Max is 4. * @default 3 */ "limit"?: number; } /** * @name SallaBreadcrumb * @description A StencilJS component for rendering breadcrumb navigation. * @tag salla-breadcrumb */ interface SallaBreadcrumb { } interface SallaBulletDelivery { /** * Emitted when a new address is created */ "onAddressCreated"?: (event: SallaBulletDeliveryCustomEvent) => void; /** * Emitted when the modal is closed */ "onBulletDeliveryClosed"?: (event: SallaBulletDeliveryCustomEvent) => void; /** * Emitted when the user confirms their selection */ "onBulletDeliveryConfirmed"?: (event: SallaBulletDeliveryCustomEvent) => void; /** * Emitted to sync with the global header (Delivering to: [location]) */ "onHeaderContextUpdate"?: (event: SallaBulletDeliveryCustomEvent) => void; } interface SallaButton { /** * Button Color * @default 'primary' */ "color"?: 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'gray' | 'dark'; /** * Is the button currently disabled * @default false */ "disabled"?: boolean; /** * Button Fill * @default 'solid' */ "fill"?: 'solid' | 'outline' | 'none'; /** * Button with href as normal link */ "href"?: string; /** * 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; /** * Button Type * @default 'btn' */ "shape"?: 'link' | 'icon' | 'btn'; /** * Button Size * @default 'medium' */ "size"?: 'small' | 'large' | 'medium'; /** * 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 SallaCartCoupons { } interface SallaCartItemOffers { /** * The unique identifier of the cart item */ "itemId": string; /** * 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 { /** * Show cart label */ "showCartLabel"?: boolean; } interface SallaCashbackBanner { } interface SallaColorPicker { /** * Initial color for the picker. */ "color"?: string; /** * 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'; /** * File input name for the native formData * @default 'color' */ "name"?: string; /** * Event whenever the color changes. */ "onColorChanged"?: (event: SallaColorPickerCustomEvent) => void; /** * Event emitted when the input is invalid. */ "onInvalidInput"?: (event: SallaColorPickerCustomEvent) => void; /** * Event emitter when the popup closes. */ "onPopupClosed"?: (event: SallaColorPickerCustomEvent) => void; /** * Event emitter when the popup opens. */ "onPopupOpened"?: (event: SallaColorPickerCustomEvent) => void; /** * Event emitter when the user clicks "Ok". */ "onSubmitted"?: (event: SallaColorPickerCustomEvent) => void; /** * Set if the color picker input is required or not * @default false */ "required"?: boolean; /** * 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; /** * Emitted after a comment is successfully added, carrying a locally-built Comment object for instant rendering. */ "onCommentAdded"?: (event: SallaCommentFormCustomEvent<{ id?: number; avatar?: string; name?: string; content?: string; is_pending?: boolean; created_at?: { date?: string }; images: string[]; }>) => void; /** * 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; /** * 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 { } interface SallaCountDown { /** * If true, hides days segment when days = 0, and hides hours segment when both days and hours = 0. Matches salla-timer behaviour. Off by default for backward compatibility. * @default false */ "autoSegments"?: boolean; /** * Background color of each box when boxed is enabled. Accepts any valid CSS color value (e.g. '#1a3c34', 'var(--color-primary)') */ "boxColor"?: string; /** * Theme color name to use as the box background when boxed is enabled. Maps to the corresponding CSS variable (e.g. 'primary' → var(--color-primary)). Available values: 'primary' | 'primary-dark' | 'primary-light' | 'primary-reverse' | 'main' Takes precedence over box-color when both are set. */ "boxTheme"?: string; /** * 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. Supported formats: Parsed as KSA time (UTC+3): - "YYYY-MM-DD HH:mm:ss" (e.g. "2023-05-22 16:37:52") - "YYYY-M-D HH:mm:ss" (e.g. "2023-5-22 16:37:52") unpadded month/day accepted - "YYYY-MM-DD" (e.g. "2023-05-22") counts down to 23:59:59 of that day - "YYYY-M-D" (e.g. "2026-5-15", "2026-05-5") unpadded month/day accepted - "MM-DD-YYYY" (e.g. "04-28-2026") counts down to 23:59:59 of that day - "MM-DD-YYYY,HH:mm:ss am/pm" (e.g. "12-23-2026,03:23:00 pm") Parsed as browser local time: - "YYYY/MM/DD HH:mm:ss" (e.g. "2023/05/22 16:37:52") - "YYYY/MM/DD" (e.g. "2023/05/22") counts down to 23:59:59 of that day - "MM/DD/YYYY HH:mm:ss" (e.g. "05/22/2023 16:37:52") - "MM/DD/YYYY" (e.g. "05/22/2023") counts down to 23:59:59 of that day */ "date"?: string; /** * The digits lang to show in the count down * @default 'auto' */ "digits"?: 'en' | 'auto'; /** * 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; /** * Horizontal padding applied to the list (e.g. '20px', '1rem', '5%'). Defaults to no padding. */ "listPadding"?: string; /** * 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; /** * Whether the fields can be edited by the user. * @default true */ "isEditable"?: boolean; /** * Emitted when a field's value changes. */ "onFieldChanged"?: (event: SallaCustomFieldsCustomEvent<{ fieldId: string | number; value: unknown; isValid: boolean; }>) => void; /** * Emitted when a file is successfully uploaded or encounters an error. */ "onFileUploaded"?: (event: SallaCustomFieldsCustomEvent<{ fieldId: string | number; file: File; isValid: boolean; }>) => void; } 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[]; /** * 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[]; /** * 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 '' */ "nextArrow"?: string; /** * Hides the day selection in calendar. Use it along with enableTime to create a time picker. * @default false */ "noCalendar"?: boolean; /** * Event emitted when the input is invalid. */ "onInvalidInput"?: (event: SallaDatetimePickerCustomEvent) => void; /** * Event emitted when the date input gets changed by the user when selecting file(s). */ "onPicked"?: (event: SallaDatetimePickerCustomEvent) => void; /** * 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 '' */ "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; } /** * @name SallaDeliveryPromise * @description Displays delivery promise message (from BE) with city selection * @tag salla-delivery-promise */ interface SallaDeliveryPromise { } interface SallaDrawer { /** * Align drawer content to center, defaults to `false` * @default false */ "centered"?: boolean; /** * 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; /** * Avoid padding in the drawer body or not, defaults to `false` * @default false */ "noPadding"?: boolean; /** * Event emitted when the drawer visibilty is changed. */ "onDrawerVisibilityChanged"?: (event: SallaDrawerCustomEvent) => void; /** * The position of the drawer (left or right) * @default 'right' */ "position"?: 'left' | 'right'; /** * 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 SallaEditOrderButton { /** * The order ID to fetch details for. Falls back to the current page order ID. */ "orderId"?: string | number; } 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; /** * 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 '...' */ "iconProcess"?: string; /** * The icon used for remove actions * @default '...' */ "iconRemove"?: string; /** * The icon used for retry actions * @default '...' */ "iconRetry"?: string; /** * The icon used for undo actions * @default '...' */ "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; /** * 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')} ${salla.lang.get('common.uploader.browse')} ` */ "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; /** * Event emitted when the file has been added */ "onAdded"?: (event: SallaFileUploadCustomEvent<{ error: FilePondErrorDescription | null, file: FilePondFile }>) => void; /** * Event emitted when the input is invalid */ "onInvalidInput"?: (event: SallaFileUploadCustomEvent) => void; /** * Event emitted when the file is about to be removed. Returns boolean value. */ "onRemoved"?: (event: SallaFileUploadCustomEvent) => void; /** * Event emitted when the file has been uploaded and link to the file has been recieved from the server. Returns string value. */ "onUploaded"?: (event: SallaFileUploadCustomEvent) => void; /** * File input name in the request payload */ "payloadName"?: string; /** * Allow to pass extra params to be sent with the upload request * @default {} */ "payloadParams"?: Record; /** * 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; /** * 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 { /** * Array of filter options */ "filters"?: Filter[]; /** * Custom event fired when the selected filters are changed. */ "onChanged"?: (event: SallaFiltersCustomEvent) => void; } interface SallaFiltersWidget { /** * Selected filter options value. */ "filtersData"?: object; /** * Custom event emitted up on filter option selection changes. */ "onChanged"?: (event: SallaFiltersWidgetCustomEvent) => void; /** * Filter option along with possible values. */ "option"?: Filter; /** * Show more or less filter options. */ "withLoadMore"?: boolean; } /** * @name SallaFulfillmentMethods * @description Displays product fulfillment options (pickup and delivery) as two side-by-side cards * @tag salla-fulfillment-methods */ interface SallaFulfillmentMethods { } interface SallaGifting { /** * The form selector to be used to get the form data * @default 'form.product-form, form.form--product-options' */ "formSelector"?: string; /** * Is Physical products (alias of `physicalProducts` for themes passing `physical`) */ "physical"?: boolean; /** * Is Physical 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 { /** * 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 `` * @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 { /** * Current currency (existing or newly selected) */ "currency"?: string; /** * Current language (existing or newly selected) */ "language"?: string; /** * To show the trigger button or not * @default false */ "showTrigger"?: boolean; } 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; /** * 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; /** * Available customer points with which they can exchange. */ "customerPoints"?: number; /** * Message to show for guest users. */ "guestMessage"?: string; /** * The exchanged prize point */ "prizePoints"?: string | number; /** * The prize title */ "prizeTitle"?: string; /** * Does the merchant require registration with email & mobile * @default false */ "requireEmail"?: boolean; } interface SallaLoyaltyBanner { } interface SallaLoyaltyHero { /** * Description of the program */ "description"?: string; /** * Optional image to display in the background */ "image"?: string; /** * Name of the program */ "name"?: string; } interface SallaLoyaltyPanel { /** * Available customer points with which they can exchange. */ "customerPoints"?: number; /** * The exchanged prize point */ "prizePoints"?: string | number; /** * The prize title */ "prizeTitle"?: string; } interface SallaLoyaltyPoint { "point"?: Point; } interface SallaLoyaltyPointsBanner { } interface SallaLoyaltyPrizeItem { /** * Prize item to be displayed in this component. */ "item"?: Item; /** * Event emmited when the user select this item. */ "onPrizeItemSelected"?: (event: SallaLoyaltyPrizeItemCustomEvent) => void; } interface SallaLoyaltyProgram { } interface SallaLoyaltyReward { "group"?: string; "onConfirmModalOpen"?: (event: SallaLoyaltyRewardCustomEvent) => void; "onRewardModalOpen"?: (event: SallaLoyaltyRewardCustomEvent) => void; "prize"?: Prize; /** * @default 'md' */ "size"?: 'xs' | 'md'; } 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; /** * Custom DOM event emitter when current location is selected */ "onCurrentLocationChanged"?: (event: SallaMapCustomEvent) => void; /** * Event emitted when the input is invalid. */ "onInvalidInput"?: (event: SallaMapCustomEvent) => void; /** * Custom DOM event emitter when map is clicked */ "onMapClicked"?: (event: SallaMapCustomEvent) => void; /** * Custom DOM event emitter when location is selected */ "onSelected"?: (event: SallaMapCustomEvent) => void; /** * 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; /** * When true (footer menu only), appends a link to open cookie preferences. Use as `with-cookie-preferences` in markup. */ "withCookiePreferences"?: 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; /** * 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; /** * Avoid padding in the modal body or not, defaults to `false` * @default false */ "noPadding"?: boolean; /** * Event emitted when the modal visibilty is changed. */ "onModalVisibilityChanged"?: (event: SallaModalCustomEvent) => void; /** * The position of the modal * @default 'middle' */ "position"?: 'top' | 'middle' | 'bottom'; /** * 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'; } /** * Example usage with new nested structure: * */ interface SallaMultipleBundleProduct { /** * The bundled sections data, given as a JSON string or parsed object. */ "bundleSections"?: string; } interface SallaMultipleBundleProductCart { /** * The list of sections belonging to a bundle product. * @default [] */ "sections"?: BundleSection[]; } interface SallaMultipleBundleProductDetails { /** * The list of sections belonging to a bundle product. * @default [] */ "sections"?: BundleSection[]; } interface SallaMultipleBundleProductOptionsModal { /** * Emitted when product options are successfully saved. */ "onOptionsSaved"?: (event: SallaMultipleBundleProductOptionsModalCustomEvent<{ productId: number; selectedOptions: SelectedOption[]; sectionId?: string | number | null; productIndex?: number | null; }>) => void; /** * Emitted when a product is selected or modified via the modal. */ "onProductSelected"?: (event: SallaMultipleBundleProductOptionsModalCustomEvent<{ productId: number; sectionId: string | number; product?: BundleProduct; fromModal?: boolean; }>) => void; } interface SallaMultipleBundleProductSlider { /** * When true, the selected product cannot be deselected (single-product section with min = 1). * @default false */ "isSelectionLocked"?: boolean; /** * Emitted when the user clicks the "options" button on a product card. */ "onProductOptionsSelected"?: (event: SallaMultipleBundleProductSliderCustomEvent<{ product: BundleProduct; sectionId: string | number; }>) => void; /** * Emitted when a product is clicked/toggled within the slider. */ "onProductSelected"?: (event: SallaMultipleBundleProductSliderCustomEvent<{ product: BundleProduct; sectionId: string | number }>) => void; /** * The data for the current bundle section being rendered in this slider. */ "section"?: BundleSection; /** * The zero-based index of this section within the overall bundle. */ "sectionIndex"?: number; /** * A dictionary tracking which product IDs are currently selected per section. * @default {} */ "selectedProducts"?: { [sectionId: string]: Set }; /** * Maximum selectable products for this section (empty max → all products in section). * @default 0 */ "selectionLimit"?: number; } interface SallaNextOrderCoupon { } 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 */ 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 ) => void; /** * Emitted when an item quantity or options are updated */ "onOrderItemUpdated"?: (event: SallaOrderEditItemCustomEvent<{ itemId: string | number; quantity: number; options?: OrderEditSelectedOptions; optionDefinitions?: OrderEditProductOption[]; }>) => void; /** * Parent order ID (for API calls) */ "orderId"?: string | number; } interface SallaOrderEditProductCard { "onOrderEditProductSelected"?: (event: SallaOrderEditProductCardCustomEvent<{ product: Product; }>) => void; "product"?: Product | string; } interface SallaOrderSummary { /** * The order ID to fetch items from */ "orderId"?: number; } interface SallaOrderTotalsCard { /** * Order summary object. Accepts a JSON string or object containing the order totals. */ "order"?: string | Order; } 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; /** * Custome event emitted when there is a change in price input. */ "onChanged"?: (event: SallaPriceRangeCustomEvent) => void; /** * Product price range filter option object instance */ "option"?: Filter; } 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 { /** * Compact list layout for drawers and lists. */ "compact"?: boolean; /** * 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 SallaProductCardEmbed { /** * Optional alignment for the embedded card. */ "align"?: 'left' | 'right' | 'center'; /** * Product identifier used to fetch product details. */ "productId"?: string | number; } interface SallaProductOptions { /** * Bundle context information for bundle products. When provided, the component will use bundle naming convention for form inputs. Expected format: { sectionId: string|number, sectionIndex: number, productId: string|number } Can be passed as a string (JSON) or object */ "bundleContext"?: string | object; /** * 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 ``` 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; /** * Hide the out of stock label. Will be used in the case of live validation such as cart page and inline checkout */ "hideOutLabel"?: string; /** * An event that emitted when any option is changed. */ "onChanged"?: (event: SallaProductOptionsCustomEvent) => void; /** * Product detail information. */ "options"?: string; /** * The id of the product to which the options are going to be fetched for. * @default salla.config.get('page.id') */ "productId"?: number | string; /** * 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 { } interface SallaProductsList { /** * Autoload next page when scroll * @default false */ "autoload"?: boolean; /** * Compact cards for drawer/list layouts */ "compactCards"?: 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 event fired when the the products fetched. */ "onProductsFetched"?: (event: SallaProductsListCustomEvent) => void; /** * 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 ; /** * Source of the products, if api will get the products from the API, if json will get the products from the products prop * @type {string} * @default '' */ "source"?: 'categories' | 'latest' | 'related' | 'brands' | 'json' | 'tags' | 'selected' | 'offers' | 'landing-page' | 'wishlist' | 'top-rated' | 'recently'; /** * The source value, cloud be different values as following: - array of ids when `source` in ['categories', 'brands', 'tags', 'selected'] - products payload when `source` = 'json' - product_id when `source` = 'related' * @type {string} */ "sourceValue"?: string; /** * Sub title of the block - works only if slider is true * @type {string} * @default '' */ "subTitle"?: string; } interface SallaProgressBar { /** * Progress bar color, defaults to: `salla.config.get('theme.color.primary', "#ffd5c4")` */ "color"?: string; /** * You can just pass the donation as json string ex: `{"target_message":null,"target_date":"2023-04-18","target_end_date":"2023-04-18","target_amount":400,"collected_amount":380,"can_donate":true}` */ "donation"?: string | Donation; /** * Big Title, before the progress bar. */ "header"?: string; /** * Set height for the wrapper. * @default "10px" */ "height"?: string; /** * Hide units above the progress bar */ "hideUnits"?: boolean; /** * Subtitle under the progress bar or instead of it if the target not being set. */ "message"?: string; /** * Stripped effect for tje progress bar. */ "stripped"?: boolean; /** * The goal of the progress bar */ "target"?: number; /** * The unite to be added after the numbers, defaults to: `salla.config.currency().symbol` */ "unit"?: string; /** * The progress so far as of the goal. */ "value"?: number; } interface SallaQuantityInput { /** * Cart Item Id */ "cartItemId"?: any; } interface SallaQuickBuy { /** * Product amount in base currency (SAR). * @type {number} * @default 0 */ "amount"?: number; /** * Show Apple Pay only * @type {boolean} */ "applePayOnly"?: boolean; /** * Cart ID, when you need to applePay for existed cart * @type {string} */ "cartId"?: string; /** * base currency * @type {string} * @default SAR */ "currency"?: string; /** * To be passed to purchaseNow request * @type {boolean} */ "isRequireShipping"?: boolean; /** * Emitted when Apple Pay button is clicked but user is not logged in. */ "onRequireLogin"?: (event: SallaQuickBuyCustomEvent<{ productId: string }>) => void; /** * Emitted when Apple Pay button is clicked but form validation fails. */ "onValidationFailed"?: (event: SallaQuickBuyCustomEvent<{ productId: string }>) => void; /** * Product options, if is empty will get the data from the document.querySelector('salla-product-options[product-id="X"]') * @type {object} * @default {} */ "options"?: {}; /** * Product ID. * @type {string} */ "productId"?: string; /** * Product type. * @type {string} * @default 'product' */ "productType"?: string; /** * Button type. * @type {string} * @default buy */ "type"?: 'plain' | 'buy' | 'donate' | 'book' | 'pay' | 'order'; /** * Custom host for Apple Pay validate merchant URL. When set, the validate URL will use this host instead of the store URL. * @type {string} */ "validateHost"?: string; } interface SallaQuickOrder { /** * agreement text from server or from props * @default salla.lang.get( 'pages.checkout.show_full_agreement' ) */ "agreementText"?: string; /** * quick order confirm pay button text * @default 'اشتر الآن' */ "confirmPayButtonTitle"?: string; /** * is email required * @default false */ "isEmailRequired"?: boolean; /** * Custome DOM event emitter when order gets submitted successfully. */ "onQuickOrderSubmited"?: (event: SallaQuickOrderCustomEvent) => void; /** * quick order pay button text * @default 'اطلب المنتج' */ "payButtonTitle"?: string; /** * product id local or from page */ "productId"?: string; /** * Quick Order Style * @default 'default' */ "quickOrderStyle"?: 'gray' | 'white' | 'default'; /** * quick order title * @default 'ليش تنتظر؟' */ "quickOrderTitle"?: string; /** * quick order sub title * @default 'احصل على المنتج مباشرة الآن' */ "subTitle"?: string; /** * product id local or from page */ "thanksMessage"?: string; } interface SallaRatingModal { /** * The order id, to rate on its products & shipping */ "orderId"?: number; } interface SallaRatingStars { /** * Allows the rating to be editable. * @default false */ "editable"?: boolean; /** * Sets input name. * @default 'rating' */ "name"?: string; /** * Number of reviews to display. * @default 0 */ "reviews"?: number; /** * Sets the height and width of the component. Defaults to medium. * @default 'medium' */ "size"?: "large" | "medium" | "small" | "mini"; /** * The rating value. */ "value"?: number; /** * Show the description label. */ "withLabel"?: boolean; } interface SallaReviewCard { /** * The review object to render, containing review text, stars, product info, and images. */ "review"?: Partial; } interface SallaReviews { /** * Controls the visibility of a link to the reviews page. When set to `true`, a link will be displayed allowing users to navigate to the full reviews section. * @type {boolean} */ "displayAllLink"?: boolean; /** * Specifies whether to hide customer information in the component. When set to true, customer information will be hidden. Defaults to false, meaning customer information will be displayed. * @default false */ "hideCustomerInfo"?: boolean; /** * Defines the maximum number of reviews to retrieve from the API. * @type {number} * @default 5 */ "limit"?: number; /** * Specifies the sorting criteria for the fetched reviews. Available options: - "top_rating": Sorts reviews based on top ratings. - "random": Sorts reviews randomly. - "latest": Sorts reviews based on the latest ones (default). * @type {SortingOption} * @default latest */ "sort"?: SortingOption; /** * Specifies the data source for reviews. Valid options include: - 'categories': Retrieves reviews for specific product categories. - 'products': Retrieves reviews for individual products. - 'json': Retrieves reviews from a custom JSON payload provided in `sourceValue`. When using 'json' as the source, a valid payload must be provided in `sourceValue`. * @type {Source} * @default "store" */ "source"?: Source; /** * Provides data specific to the chosen source. Required when using 'categories', 'products', or 'json' as the source: - 'categories': An array of category IDs. - 'products': An array of product IDs. - 'json': A custom JSON object containing review data. * @type {string | object | Array} */ "sourceValue"?: string | object | Array; /** * Specifies the type of reviews to fetch. Available options: - "all": Fetches reviews from all sources. - "store": Fetches reviews specific to the store. - "products": Fetches reviews specific to products. * @type {ReviewType} * @default store */ "type"?: ReviewType; } interface SallaReviewsPage { } interface SallaReviewsSummary { /** * Product ID */ "itemId": number; } interface SallaRewardAction { "onActionClick"?: (event: SallaRewardActionCustomEvent) => void; "prize"?: Prize; } interface SallaRewardCard { /** * Callback to be called when the action is clicked */ "onActionClick"?: (event: SallaRewardCardCustomEvent) => void; /** * Callback to be called when the area is clicked */ "onAreaClick"?: (event: SallaRewardCardCustomEvent) => void; /** * The prize item */ "prize"?: Prize; } interface SallaRewardDetails { "onActionClick"?: (event: SallaRewardDetailsCustomEvent) => void; "prize"?: Prize; } interface SallaRewardExchange { "prize"?: Prize; /** * @default null */ "productId"?: number | null; } interface SallaScopes { /** * Dictates when to show the search field * @default 6 */ "searchDisplayLimit"?: number; /** * Optionally open the modal or enforce the pop-up to the viewer * @default 'optional' */ "selection"?: 'optional' | 'mandatory'; } interface SallaSearch { /** * Sets the height of the input * @default 60 */ "height"?: number; /** * Set the component display without modal window. Defaults to `false` * @default false */ "inline"?: boolean; /** * Maximum number of words allowed in the input * @default 5 */ "maxWords"?: number; /** * Adds a border radius to the input. Half of the height. * @default false */ "oval"?: boolean; /** * Set the component to display as a placeholder (button) that will open the modal. Defaults to `false` * @default false */ "placeholder"?: boolean; /** * Show submit action buttons at the end. * @default false */ "showAction"?: boolean; } interface SallaSearchableDropdown { /** * @default false */ "clientSearch"?: boolean; /** * @default false */ "disabled"?: boolean; /** * @default false */ "dropUp"?: boolean; /** * @default '' */ "inputId"?: string; /** * @default [] */ "items"?: DropdownItem[]; /** * When true, the dropdown will NOT override the nearest scrollable ancestor's `overflow` to `visible` while open. Use this when the host (e.g. a modal body) needs to keep its own scrolling intact while the dropdown is open. * @default false */ "keepParentScroll"?: boolean; "label"?: string; /** * @default false */ "loading"?: boolean; /** * @default '' */ "noResultsText"?: string; "onDropdownClosed"?: (event: SallaSearchableDropdownCustomEvent) => void; "onDropdownOpened"?: (event: SallaSearchableDropdownCustomEvent) => void; "onItemSelected"?: (event: SallaSearchableDropdownCustomEvent) => void; "onSearchInput"?: (event: SallaSearchableDropdownCustomEvent) => void; /** * @default '' */ "placeholder"?: string; /** * @default false */ "required"?: boolean; /** * @default '' */ "searchQuery"?: string; /** * @default true */ "searchable"?: boolean; /** * @default false */ "searching"?: boolean; /** * @default null */ "selectedItem"?: DropdownItem | null; } interface SallaSkeleton { /** * Set the skeleton height * @default '100%' */ "height"?: string; /** * Set the shape type of the skeleton is it circle or normal * @default 'normal' */ "type"?: 'circle' | 'normal'; /** * Set the skeleton width * @default '100%' */ "width"?: string; } interface SallaSlider { /** * Show/hide display all button beside arrows * @default false */ "arrowsCentered"?: boolean; /** * Auto Height slider * @default false */ "autoHeight"?: boolean; /** * Enable autoplay - working with `type="carousel" only` * @default false */ "autoPlay"?: boolean; /** * Show/hide slider block sub title * @default '' */ "blockSubtitle"?: string; /** * Show/hide slider block title * @default '' */ "blockTitle"?: string; /** * Enable center mode - working with `type="carousel" only` * @default false */ "centered"?: boolean; /** * Show/hide arrows * @default false */ "controlsOuter"?: boolean; /** * Slider direction. Default: document.documentElement.dir */ "direction"?: string; /** * Show/hide display all button beside arrows * @default '' */ "displayAllUrl"?: string; /** * Disable thumbs slider and show it as a grid * @default false */ "gridThumbs"?: boolean; /** * Enable call a specific slide by index from thumbnails or color option in `salla-slider-options` component, works only if `data-img-id` and `data-slid-index` attributes are set on each slide * @default false */ "listenToThumbnailsOption"?: boolean; /** * Run slider in loop, Don't use it for slides with custom components inside it, because it may cause re-render issue * @default false */ "loop"?: boolean; /** * Event will fired right after initialization. */ "onAfterInit"?: (event: SallaSliderCustomEvent) => void; /** * Event will be fired when Swiper reach its beginning (initial position) */ "onReachBeginning"?: (event: SallaSliderCustomEvent) => void; /** * Event will be fired when Swiper reach last slide */ "onReachEnd"?: (event: SallaSliderCustomEvent) => void; /** * Event will be fired when currently active slide is changed */ "onSlideChange"?: (event: SallaSliderCustomEvent) => void; /** * Event will be fired after animation to other slide (next or previous). */ "onSlideChangeTransitionEnd"?: (event: SallaSliderCustomEvent) => void; /** * Event will be fired in the beginning of animation to other slide (next or previous). */ "onSlideChangeTransitionStart"?: (event: SallaSliderCustomEvent) => void; /** * Same as "slideChangeTransitionEnd" but for "forward" direction only */ "onSlideNextTransitionEnd"?: (event: SallaSliderCustomEvent) => void; /** * Same as "slideChangeTransitionStart" but for "forward" direction only */ "onSlideNextTransitionStart"?: (event: SallaSliderCustomEvent) => void; /** * Same as "slideChangeTransitionEnd" but for "backward" direction only */ "onSlidePrevTransitionEnd"?: (event: SallaSliderCustomEvent) => void; /** * Same as "slideChangeTransitionStart" but for "backward" direction only */ "onSlidePrevTransitionStart"?: (event: SallaSliderCustomEvent) => void; /** * Event will be fired when user touch and move finger over Swiper and move it. Receives touchmove event as an arguments. */ "onSliderMove"?: (event: SallaSliderCustomEvent) => void; /** * Event will be fired after transition. */ "onSliderTransitionEnd"?: (event: SallaSliderCustomEvent) => void; /** * Event will be fired in the beginning of transition. */ "onSliderTransitionStart"?: (event: SallaSliderCustomEvent) => void; /** * Event will be fired when user release Swiper. Receives touchend event as an arguments. */ "onTouchSliderEnd"?: (event: SallaSliderCustomEvent) => void; /** * Event will be fired when user touch and move finger over Swiper. Receives touchmove event as an arguments. */ "onTouchSliderMove"?: (event: SallaSliderCustomEvent) => void; /** * Event will be fired when user touch Swiper. Receives touchstart event as an arguments. */ "onTouchSliderStart"?: (event: SallaSliderCustomEvent) => void; /** * Enable pagination * @default false */ "pagination"?: boolean; /** * Show/hide arrows * @default true */ "showControls"?: boolean; /** * Show/hide thumbs slider arrows * @default true */ "showThumbsControls"?: boolean; /** * Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object * @example let slider = document.querySelector('salla-slider'); slider.sliderConfig = { slidesPerView: 1, spaceBetween : 30, lazy: true, } */ "sliderConfig"?: any; /** * slidesPerView * @default "auto" */ "slidesPerView"?: string; /** * When enabled and there is exactly one slide in the `items` slot, render without initializing Swiper (single slide mode). * @default false */ "staticWhenSingle"?: boolean; /** * Thumbs Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object * @example let slider = document.querySelector('salla-slider'); slider.thumbsConfig = { slidesPerView: 1, spaceBetween : 30, lazy: true, } */ "thumbsConfig"?: any; /** * Set the type of the slider Default: '' * @default '' */ "type"?: 'carousel' | 'fullscreen' | 'thumbs' | 'default' | 'hero' | 'testimonials' | 'blog' | 'fullwidth' | ''; /** * Vertical or Horizontal main slider * @default false */ "vertical"?: boolean; /** * Vertical or Horizontal thumbs slider * @default false */ "verticalThumbs"?: boolean; } interface SallaSocial { } interface SallaSocialShare { /** * selected platforms to share | all platforms * @default 'facebook,twitter,whatsapp,email,copy_link' */ "platforms"?: string; /** * page url that will be shared custom | current page url * @default "" */ "url"?: string; /** * page url name that will be shared custom | current page url * @default "" */ "urlName"?: string; } interface SallaTabContent { /** * Set name of the tab content. Mainly used as a key to s ynchronize the content with it's respective header. */ "name"?: string; } interface SallaTabHeader { /** * The class applied to the currently active(selected) tab * @default undefined */ "activeClass"?: string; /** * Center tab items in the given flex. * @default false */ "centered"?: boolean; /** * Set the height of the tab bar * @default undefined */ "height"?: number | string; /** * Header identifier name to sync with the content. */ "name"?: string; /** * Emits event object when clicked or selected. */ "onTabSelected"?: (event: SallaTabHeaderCustomEvent) => void; } interface SallaTabs { /** * Background color * @default undefined */ "backgroundColor"?: string; /** * Align tabs vertically. * @default false */ "vertical"?: boolean; } interface SallaTelInput { /** * Automatically focus telephone input */ "autofocus"?: boolean; /** * Current country_code * @default salla.config.get('user.country_code', 'SA') || 'SA' */ "countryCode"?: string; /** * input name * @default false */ "disabled"?: boolean; /** * input name * @default 'phone' */ "name"?: string; /** * Event emmitted when user enters a phone number. */ "onPhoneEntered"?: (event: SallaTelInputCustomEvent) => void; /** * Current mobile number */ "phone"?: string; } interface SallaTieredOffer { } interface SallaTooltip { /** * The ID of the target element to which the tooltip is attached */ "targetId"?: string; /** * The text content to display in the tooltip */ "text"?: string; /** * The theme of the tooltip (default, dark) * @default 'default' */ "theme"?: string; } interface SallaTrustBadges { /** * For dark footers, show white version of icons. * @default false */ "dark"?: boolean; } interface SallaUserMenu { /** * To display the trigger as an avatar only * @default false */ "avatarOnly"?: boolean; /** * To display only the list without the dropdown functionality * @default false */ "inline"?: boolean; /** * To Make the dropdown menu relative to parent element or not * @default false */ "relativeDropdown"?: boolean; /** * To display the dropdown header in mobile sheet * @default false */ "showHeader"?: boolean; /** * To show the trigger button or not * @default false */ "showTrigger"?: boolean; } /** * The SallaUserProfile is a versatile user profile form * generator within the Salla platform, offering localization support, * customizable fields, and seamless integration with the Salla API. * It dynamically fetches translated strings for labels and messages from the * Salla localization object, allowing for a multilingual user interface. Users * retrieval from the Salla configuration and includes fields for first name, * last name, birthday, gender, email, mobile, and custom additions. Form * validation and submission are handled through various event handlers, ensuring * proper field handling and user input validation. The component supports file * uploads for photo fields and includes a dedicated phone number input field. * The componentWillLoad lifecycle method fetches additional user profile * information from the API during initialization. Overall, this component * provides an efficient and adaptable solution for creating user profiles with a * rich set of features and customization options. */ interface SallaUserProfile { /** * The minimum allowed age for a user. Users with a birthdate indicating an age less than this value will be considered invalid. Defaults to 10. * @default 10 */ "minAge"?: number; } interface SallaUserSettings { } interface SallaVerify { /** * should auto reloading the page after success verification * @default true */ "autoReload"?: boolean; /** * Should render component without modal * @default 'modal' */ "display"?: 'inline' | 'modal'; /** * Event when success verification */ "onVerified"?: (event: SallaVerifyCustomEvent) => void; /** * Once the api verify success, it will be login the customer in web pages * @default true */ "supportWebAuth"?: boolean; /** * Verifying method * @default 'mobile' */ "type"?: 'mobile' | 'email'; } interface SallaWallet { } interface IntrinsicElements { "salla-accordion": SallaAccordion; "salla-accordion-body": SallaAccordionBody; "salla-accordion-head": SallaAccordionHead; "salla-add-product-button": SallaAddProductButton; "salla-advertisement": SallaAdvertisement; "salla-alert": SallaAlert; "salla-app-install-alert": SallaAppInstallAlert; "salla-apps-icons": SallaAppsIcons; "salla-badge": SallaBadge; "salla-booking-field": SallaBookingField; "salla-bottom-alert": SallaBottomAlert; "salla-bought-together": SallaBoughtTogether; "salla-breadcrumb": SallaBreadcrumb; "salla-bullet-delivery": SallaBulletDelivery; "salla-button": SallaButton; "salla-cart-coupons": SallaCartCoupons; "salla-cart-item-offers": SallaCartItemOffers; "salla-cart-summary": SallaCartSummary; "salla-cashback-banner": SallaCashbackBanner; "salla-color-picker": SallaColorPicker; "salla-comment-form": SallaCommentForm; "salla-comment-item": SallaCommentItem; "salla-comments": SallaComments; "salla-conditional-fields": SallaConditionalFields; "salla-conditional-offer": SallaConditionalOffer; "salla-contacts": SallaContacts; "salla-cookies-bar": SallaCookiesBar; "salla-count-down": SallaCountDown; "salla-custom-fields": SallaCustomFields; "salla-datetime-picker": SallaDatetimePicker; "salla-delivery-promise": SallaDeliveryPromise; "salla-drawer": SallaDrawer; "salla-edit-order-button": SallaEditOrderButton; "salla-file-upload": SallaFileUpload; "salla-filters": SallaFilters; "salla-filters-widget": SallaFiltersWidget; "salla-fulfillment-methods": SallaFulfillmentMethods; "salla-gifting": SallaGifting; "salla-hook": SallaHook; "salla-infinite-scroll": SallaInfiniteScroll; "salla-installment": SallaInstallment; "salla-list-tile": SallaListTile; "salla-loading": SallaLoading; "salla-localization-modal": SallaLocalizationModal; "salla-login-modal": SallaLoginModal; "salla-loyalty": SallaLoyalty; "salla-loyalty-banner": SallaLoyaltyBanner; "salla-loyalty-hero": SallaLoyaltyHero; "salla-loyalty-panel": SallaLoyaltyPanel; "salla-loyalty-point": SallaLoyaltyPoint; "salla-loyalty-points-banner": SallaLoyaltyPointsBanner; "salla-loyalty-prize-item": SallaLoyaltyPrizeItem; "salla-loyalty-program": SallaLoyaltyProgram; "salla-loyalty-reward": SallaLoyaltyReward; "salla-maintenance-alert": SallaMaintenanceAlert; "salla-map": SallaMap; "salla-menu": SallaMenu; "salla-metadata": SallaMetadata; "salla-modal": SallaModal; "salla-multiple-bundle-product": SallaMultipleBundleProduct; "salla-multiple-bundle-product-cart": SallaMultipleBundleProductCart; "salla-multiple-bundle-product-details": SallaMultipleBundleProductDetails; "salla-multiple-bundle-product-options-modal": SallaMultipleBundleProductOptionsModal; "salla-multiple-bundle-product-slider": SallaMultipleBundleProductSlider; "salla-next-order-coupon": SallaNextOrderCoupon; "salla-notification-item": SallaNotificationItem; "salla-notifications": SallaNotifications; "salla-offer": SallaOffer; "salla-offer-modal": SallaOfferModal; "salla-order-details": SallaOrderDetails; "salla-order-details-multiple-bundle-product": SallaOrderDetailsMultipleBundleProduct; "salla-order-details-options": SallaOrderDetailsOptions; "salla-order-edit": SallaOrderEdit; "salla-order-edit-item": SallaOrderEditItem; "salla-order-edit-product-card": SallaOrderEditProductCard; "salla-order-summary": SallaOrderSummary; "salla-order-totals-card": SallaOrderTotalsCard; "salla-orders": SallaOrders; "salla-payments": SallaPayments; "salla-placeholder": SallaPlaceholder; "salla-price-range": SallaPriceRange; "salla-product-availability": SallaProductAvailability; "salla-product-card": SallaProductCard; "salla-product-card-embed": SallaProductCardEmbed; "salla-product-options": SallaProductOptions; "salla-product-size-guide": SallaProductSizeGuide; "salla-products-list": SallaProductsList; "salla-products-slider": SallaProductsSlider; "salla-progress-bar": SallaProgressBar; "salla-quantity-input": SallaQuantityInput; "salla-quick-buy": SallaQuickBuy; "salla-quick-order": SallaQuickOrder; "salla-rating-modal": SallaRatingModal; "salla-rating-stars": SallaRatingStars; "salla-review-card": SallaReviewCard; "salla-reviews": SallaReviews; "salla-reviews-page": SallaReviewsPage; "salla-reviews-summary": SallaReviewsSummary; "salla-reward-action": SallaRewardAction; "salla-reward-card": SallaRewardCard; "salla-reward-details": SallaRewardDetails; "salla-reward-exchange": SallaRewardExchange; "salla-scopes": SallaScopes; "salla-search": SallaSearch; "salla-searchable-dropdown": SallaSearchableDropdown; "salla-skeleton": SallaSkeleton; "salla-slider": SallaSlider; "salla-social": SallaSocial; "salla-social-share": SallaSocialShare; "salla-tab-content": SallaTabContent; "salla-tab-header": SallaTabHeader; "salla-tabs": SallaTabs; "salla-tel-input": SallaTelInput; "salla-tiered-offer": SallaTieredOffer; "salla-tooltip": SallaTooltip; "salla-trust-badges": SallaTrustBadges; "salla-user-menu": SallaUserMenu; "salla-user-profile": SallaUserProfile; "salla-user-settings": SallaUserSettings; "salla-verify": SallaVerify; "salla-wallet": SallaWallet; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { /** * @salla /ui-components * The `salla-accordion` component represents an accordion element. * Use this component to encapsulate content within a collapsible section. */ "salla-accordion": LocalJSX.SallaAccordion & JSXBase.HTMLAttributes; /** * @salla /ui-components * The `salla-accordion-body` component represents the body/content of an accordion. */ "salla-accordion-body": LocalJSX.SallaAccordionBody & JSXBase.HTMLAttributes; /** * @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 */ "salla-accordion-head": LocalJSX.SallaAccordionHead & JSXBase.HTMLAttributes; "salla-add-product-button": LocalJSX.SallaAddProductButton & JSXBase.HTMLAttributes; "salla-advertisement": LocalJSX.SallaAdvertisement & JSXBase.HTMLAttributes; "salla-alert": LocalJSX.SallaAlert & JSXBase.HTMLAttributes; "salla-app-install-alert": LocalJSX.SallaAppInstallAlert & JSXBase.HTMLAttributes; "salla-apps-icons": LocalJSX.SallaAppsIcons & JSXBase.HTMLAttributes; "salla-badge": LocalJSX.SallaBadge & JSXBase.HTMLAttributes; "salla-booking-field": LocalJSX.SallaBookingField & JSXBase.HTMLAttributes; "salla-bottom-alert": LocalJSX.SallaBottomAlert & JSXBase.HTMLAttributes; "salla-bought-together": LocalJSX.SallaBoughtTogether & JSXBase.HTMLAttributes; /** * @name SallaBreadcrumb * @description A StencilJS component for rendering breadcrumb navigation. * @tag salla-breadcrumb */ "salla-breadcrumb": LocalJSX.SallaBreadcrumb & JSXBase.HTMLAttributes; "salla-bullet-delivery": LocalJSX.SallaBulletDelivery & JSXBase.HTMLAttributes; "salla-button": LocalJSX.SallaButton & JSXBase.HTMLAttributes; "salla-cart-coupons": LocalJSX.SallaCartCoupons & JSXBase.HTMLAttributes; "salla-cart-item-offers": LocalJSX.SallaCartItemOffers & JSXBase.HTMLAttributes; "salla-cart-summary": LocalJSX.SallaCartSummary & JSXBase.HTMLAttributes; "salla-cashback-banner": LocalJSX.SallaCashbackBanner & JSXBase.HTMLAttributes; "salla-color-picker": LocalJSX.SallaColorPicker & JSXBase.HTMLAttributes; "salla-comment-form": LocalJSX.SallaCommentForm & JSXBase.HTMLAttributes; "salla-comment-item": LocalJSX.SallaCommentItem & JSXBase.HTMLAttributes; "salla-comments": LocalJSX.SallaComments & JSXBase.HTMLAttributes; /** * 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}" */ "salla-conditional-fields": LocalJSX.SallaConditionalFields & JSXBase.HTMLAttributes; "salla-conditional-offer": LocalJSX.SallaConditionalOffer & JSXBase.HTMLAttributes; "salla-contacts": LocalJSX.SallaContacts & JSXBase.HTMLAttributes; "salla-cookies-bar": LocalJSX.SallaCookiesBar & JSXBase.HTMLAttributes; "salla-count-down": LocalJSX.SallaCountDown & JSXBase.HTMLAttributes; "salla-custom-fields": LocalJSX.SallaCustomFields & JSXBase.HTMLAttributes; "salla-datetime-picker": LocalJSX.SallaDatetimePicker & JSXBase.HTMLAttributes; /** * @name SallaDeliveryPromise * @description Displays delivery promise message (from BE) with city selection * @tag salla-delivery-promise */ "salla-delivery-promise": LocalJSX.SallaDeliveryPromise & JSXBase.HTMLAttributes; "salla-drawer": LocalJSX.SallaDrawer & JSXBase.HTMLAttributes; "salla-edit-order-button": LocalJSX.SallaEditOrderButton & JSXBase.HTMLAttributes; "salla-file-upload": LocalJSX.SallaFileUpload & JSXBase.HTMLAttributes; "salla-filters": LocalJSX.SallaFilters & JSXBase.HTMLAttributes; "salla-filters-widget": LocalJSX.SallaFiltersWidget & JSXBase.HTMLAttributes; /** * @name SallaFulfillmentMethods * @description Displays product fulfillment options (pickup and delivery) as two side-by-side cards * @tag salla-fulfillment-methods */ "salla-fulfillment-methods": LocalJSX.SallaFulfillmentMethods & JSXBase.HTMLAttributes; "salla-gifting": LocalJSX.SallaGifting & JSXBase.HTMLAttributes; "salla-hook": LocalJSX.SallaHook & JSXBase.HTMLAttributes; "salla-infinite-scroll": LocalJSX.SallaInfiniteScroll & JSXBase.HTMLAttributes; "salla-installment": LocalJSX.SallaInstallment & JSXBase.HTMLAttributes; "salla-list-tile": LocalJSX.SallaListTile & JSXBase.HTMLAttributes; "salla-loading": LocalJSX.SallaLoading & JSXBase.HTMLAttributes; "salla-localization-modal": LocalJSX.SallaLocalizationModal & JSXBase.HTMLAttributes; "salla-login-modal": LocalJSX.SallaLoginModal & JSXBase.HTMLAttributes; "salla-loyalty": LocalJSX.SallaLoyalty & JSXBase.HTMLAttributes; "salla-loyalty-banner": LocalJSX.SallaLoyaltyBanner & JSXBase.HTMLAttributes; "salla-loyalty-hero": LocalJSX.SallaLoyaltyHero & JSXBase.HTMLAttributes; "salla-loyalty-panel": LocalJSX.SallaLoyaltyPanel & JSXBase.HTMLAttributes; "salla-loyalty-point": LocalJSX.SallaLoyaltyPoint & JSXBase.HTMLAttributes; "salla-loyalty-points-banner": LocalJSX.SallaLoyaltyPointsBanner & JSXBase.HTMLAttributes; "salla-loyalty-prize-item": LocalJSX.SallaLoyaltyPrizeItem & JSXBase.HTMLAttributes; "salla-loyalty-program": LocalJSX.SallaLoyaltyProgram & JSXBase.HTMLAttributes; "salla-loyalty-reward": LocalJSX.SallaLoyaltyReward & JSXBase.HTMLAttributes; "salla-maintenance-alert": LocalJSX.SallaMaintenanceAlert & JSXBase.HTMLAttributes; "salla-map": LocalJSX.SallaMap & JSXBase.HTMLAttributes; "salla-menu": LocalJSX.SallaMenu & JSXBase.HTMLAttributes; "salla-metadata": LocalJSX.SallaMetadata & JSXBase.HTMLAttributes; "salla-modal": LocalJSX.SallaModal & JSXBase.HTMLAttributes; /** * Example usage with new nested structure: * */ "salla-multiple-bundle-product": LocalJSX.SallaMultipleBundleProduct & JSXBase.HTMLAttributes; "salla-multiple-bundle-product-cart": LocalJSX.SallaMultipleBundleProductCart & JSXBase.HTMLAttributes; "salla-multiple-bundle-product-details": LocalJSX.SallaMultipleBundleProductDetails & JSXBase.HTMLAttributes; "salla-multiple-bundle-product-options-modal": LocalJSX.SallaMultipleBundleProductOptionsModal & JSXBase.HTMLAttributes; "salla-multiple-bundle-product-slider": LocalJSX.SallaMultipleBundleProductSlider & JSXBase.HTMLAttributes; "salla-next-order-coupon": LocalJSX.SallaNextOrderCoupon & JSXBase.HTMLAttributes; "salla-notification-item": LocalJSX.SallaNotificationItem & JSXBase.HTMLAttributes; "salla-notifications": LocalJSX.SallaNotifications & JSXBase.HTMLAttributes; /** * `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": LocalJSX.SallaOffer & JSXBase.HTMLAttributes; "salla-offer-modal": LocalJSX.SallaOfferModal & JSXBase.HTMLAttributes; /** * @salla /ui-components * The `salla-order-details` component renders a collapsible summary for an order product with optional options list. * It uses the salla-accordion component to provide collapsible functionality. */ "salla-order-details": LocalJSX.SallaOrderDetails & JSXBase.HTMLAttributes; /** * @salla /ui-components * The `salla-order-details-multiple-bundle-product` component renders a collapsible summary for an order multiple bundle product with optional options list. * It uses the salla-accordion component to provide collapsible functionality. */ "salla-order-details-multiple-bundle-product": LocalJSX.SallaOrderDetailsMultipleBundleProduct & JSXBase.HTMLAttributes; /** * @salla /ui-components * The `salla-order-details-options` component renders product options for order details. * It displays various types of options including colors, images, files, maps, and text values. */ "salla-order-details-options": LocalJSX.SallaOrderDetailsOptions & JSXBase.HTMLAttributes; /** * @salla /ui-components * The `salla-order-edit` component * as an editable card with quantity controls, editable options, and an order summary. */ "salla-order-edit": LocalJSX.SallaOrderEdit & JSXBase.HTMLAttributes; /** * @salla /ui-components * The `salla-order-edit-item` component renders a single editable order item card * with quantity controls, editable product options, and a remove button. */ "salla-order-edit-item": LocalJSX.SallaOrderEditItem & JSXBase.HTMLAttributes; "salla-order-edit-product-card": LocalJSX.SallaOrderEditProductCard & JSXBase.HTMLAttributes; "salla-order-summary": LocalJSX.SallaOrderSummary & JSXBase.HTMLAttributes; "salla-order-totals-card": LocalJSX.SallaOrderTotalsCard & JSXBase.HTMLAttributes; "salla-orders": LocalJSX.SallaOrders & JSXBase.HTMLAttributes; "salla-payments": LocalJSX.SallaPayments & JSXBase.HTMLAttributes; "salla-placeholder": LocalJSX.SallaPlaceholder & JSXBase.HTMLAttributes; "salla-price-range": LocalJSX.SallaPriceRange & JSXBase.HTMLAttributes; "salla-product-availability": LocalJSX.SallaProductAvailability & JSXBase.HTMLAttributes; "salla-product-card": LocalJSX.SallaProductCard & JSXBase.HTMLAttributes; "salla-product-card-embed": LocalJSX.SallaProductCardEmbed & JSXBase.HTMLAttributes; "salla-product-options": LocalJSX.SallaProductOptions & JSXBase.HTMLAttributes; "salla-product-size-guide": LocalJSX.SallaProductSizeGuide & JSXBase.HTMLAttributes; "salla-products-list": LocalJSX.SallaProductsList & JSXBase.HTMLAttributes; "salla-products-slider": LocalJSX.SallaProductsSlider & JSXBase.HTMLAttributes; "salla-progress-bar": LocalJSX.SallaProgressBar & JSXBase.HTMLAttributes; "salla-quantity-input": LocalJSX.SallaQuantityInput & JSXBase.HTMLAttributes; "salla-quick-buy": LocalJSX.SallaQuickBuy & JSXBase.HTMLAttributes; "salla-quick-order": LocalJSX.SallaQuickOrder & JSXBase.HTMLAttributes; "salla-rating-modal": LocalJSX.SallaRatingModal & JSXBase.HTMLAttributes; "salla-rating-stars": LocalJSX.SallaRatingStars & JSXBase.HTMLAttributes; "salla-review-card": LocalJSX.SallaReviewCard & JSXBase.HTMLAttributes; "salla-reviews": LocalJSX.SallaReviews & JSXBase.HTMLAttributes; "salla-reviews-page": LocalJSX.SallaReviewsPage & JSXBase.HTMLAttributes; "salla-reviews-summary": LocalJSX.SallaReviewsSummary & JSXBase.HTMLAttributes; "salla-reward-action": LocalJSX.SallaRewardAction & JSXBase.HTMLAttributes; "salla-reward-card": LocalJSX.SallaRewardCard & JSXBase.HTMLAttributes; "salla-reward-details": LocalJSX.SallaRewardDetails & JSXBase.HTMLAttributes; "salla-reward-exchange": LocalJSX.SallaRewardExchange & JSXBase.HTMLAttributes; "salla-scopes": LocalJSX.SallaScopes & JSXBase.HTMLAttributes; "salla-search": LocalJSX.SallaSearch & JSXBase.HTMLAttributes; "salla-searchable-dropdown": LocalJSX.SallaSearchableDropdown & JSXBase.HTMLAttributes; "salla-skeleton": LocalJSX.SallaSkeleton & JSXBase.HTMLAttributes; "salla-slider": LocalJSX.SallaSlider & JSXBase.HTMLAttributes; "salla-social": LocalJSX.SallaSocial & JSXBase.HTMLAttributes; "salla-social-share": LocalJSX.SallaSocialShare & JSXBase.HTMLAttributes; "salla-tab-content": LocalJSX.SallaTabContent & JSXBase.HTMLAttributes; "salla-tab-header": LocalJSX.SallaTabHeader & JSXBase.HTMLAttributes; "salla-tabs": LocalJSX.SallaTabs & JSXBase.HTMLAttributes; "salla-tel-input": LocalJSX.SallaTelInput & JSXBase.HTMLAttributes; "salla-tiered-offer": LocalJSX.SallaTieredOffer & JSXBase.HTMLAttributes; "salla-tooltip": LocalJSX.SallaTooltip & JSXBase.HTMLAttributes; "salla-trust-badges": LocalJSX.SallaTrustBadges & JSXBase.HTMLAttributes; "salla-user-menu": LocalJSX.SallaUserMenu & JSXBase.HTMLAttributes; /** * The SallaUserProfile is a versatile user profile form * generator within the Salla platform, offering localization support, * customizable fields, and seamless integration with the Salla API. * It dynamically fetches translated strings for labels and messages from the * Salla localization object, allowing for a multilingual user interface. Users * retrieval from the Salla configuration and includes fields for first name, * last name, birthday, gender, email, mobile, and custom additions. Form * validation and submission are handled through various event handlers, ensuring * proper field handling and user input validation. The component supports file * uploads for photo fields and includes a dedicated phone number input field. * The componentWillLoad lifecycle method fetches additional user profile * information from the API during initialization. Overall, this component * provides an efficient and adaptable solution for creating user profiles with a * rich set of features and customization options. */ "salla-user-profile": LocalJSX.SallaUserProfile & JSXBase.HTMLAttributes; "salla-user-settings": LocalJSX.SallaUserSettings & JSXBase.HTMLAttributes; "salla-verify": LocalJSX.SallaVerify & JSXBase.HTMLAttributes; "salla-wallet": LocalJSX.SallaWallet & JSXBase.HTMLAttributes; } } }