@salla.sa/twilight-components 2.14.596 → 2.14.598

package/dist/types/components/salla-custom-fields/salla-custom-fields.d.ts

@@ -1,5 +1,9 @@
 import { type EventEmitter } from "../../stencil-public-runtime";
 import { type CustomField } from "../salla-user-profile/interfaces";
+/**
+ * The `salla-custom-fields` component renders custom form fields with validation support.
+ * Supports text and file upload fields with real-time validation.
+ */
 export declare class SallaCustomFields {
     /** The list of custom fields to render. Can be a JSON string or an array of objects. */
     fields: string | CustomField[];

package/dist/types/components/salla-file-upload/salla-file-upload.d.ts

@@ -8,6 +8,7 @@ interface PreviewFile {
     processing?: boolean;
 }
 export declare class SallaFileUpload {
+    private langUnsubscribe;
     private filePondLoaded;
     private FilePond;
     /**
@@ -15,7 +16,14 @@ export declare class SallaFileUpload {
      * This reduces initial bundle size by ~200-250KB
      */
     private loadFilePond;
+    /** true when the uploaded url must be saved on the profile as the avatar (avatar upload endpoint flag is on) */
+    private savesAvatarOnUpload;
+    /** the profile image uses the default `profile/update` url (no custom `url` given) */
+    private usesDefaultProfileUrl;
+    private avatarSaveGeneration;
+    private avatarSaveQueue;
     constructor();
+    connectedCallback(): void;
     private fileUploader;
     private hiddenInput;
     filepond: FilePondType;
@@ -376,6 +384,10 @@ export declare class SallaFileUpload {
     private markValidationRejected;
     private getUploadErrorMessageForFile;
     private notifyUploadError;
+    /**
+     * Save an already uploaded avatar url on the customer profile (text-only request).
+     */
+    private saveProfileAvatar;
     private removeFailedFile;
     private validateBeforeAddFile;
     private renderGalleryThumb;

package/dist/types/components/salla-filters/salla-filters.d.ts

@@ -1,11 +1,14 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Filter } from "./interfaces";
 export declare class SallaFilters {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): Promise<void>;
     host: HTMLElement;
     /**
-     * Array of filter options
+     * Array of filter options to display. Each filter contains key, label, type, and values for filtering products.
      */
     filters?: Filter[];
     private isReady;

package/dist/types/components/salla-filters-widget/salla-filters-widget.d.ts

@@ -1,5 +1,6 @@
 import { Filter } from "../salla-filters/interfaces";
 export declare class SallaFiltersWidget {
+    private langUnsubscribe;
     host: HTMLElement;
     /**
      * Show more or less filter options.
@@ -32,6 +33,7 @@ export declare class SallaFiltersWidget {
      */
     changed: any;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     /**
    * Asynchronously sets the height of a widget element to its current height, allowing for smooth transitions.

package/dist/types/components/salla-gifting/salla-gifting.d.ts

@@ -3,7 +3,10 @@ import { GiftResponse, GiftImage, Region, Cities, Country } from './gift-schema'
  * @slot widget-btn-content - Used to customize widget button content.
  */
 export declare class SallaGifting {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private modal;
     private uploader?;
     private stepsWrapper?;

package/dist/types/components/salla-hook/salla-hook.d.ts

@@ -1,3 +1,7 @@
+/**
+ * The `salla-hook` component serves as a placeholder for dynamic content injection.
+ * Used by the Salla hooks system to mount elements at specific locations.
+ */
 export declare class SallaHook {
     /** The unique name to identify the hook position. */
     name: string;

package/dist/types/components/salla-infinite-scroll/salla-infinite-scroll.d.ts

@@ -1,7 +1,10 @@
 /**
  */
 export declare class SallaInfiniteScroll {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Next Page element
      */

package/dist/types/components/salla-localization-modal/salla-localization-modal.d.ts

@@ -5,7 +5,10 @@
  * @slot currency - Replaces currency label, has replaceable props `{name}`, `{code}`, `{symbol}`, `{country_code}`.
  */
 export declare class SallaLocalizationModal {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private modal;
     private btn;
     private readonly languageSlot;
@@ -13,6 +16,7 @@ export declare class SallaLocalizationModal {
     private readonly languageNames;
     private readonly currenciesList;
     private readonly arabicCurrencies;
+    translationLoaded: boolean;
     languages: Array<any>;
     currencies: Array<any>;
     hasError: boolean;

package/dist/types/components/salla-login-modal/salla-login-modal.d.ts

@@ -65,6 +65,9 @@ export declare class SallaLoginModal {
      * Open login component
      */
     open(_event?: any): Promise<void | HTMLElement>;
+    private loginSucceeded;
+    /** Tell the listeners waiting for a login (e.g. `requireLoginThen`) that the popup was closed without one. */
+    private onVisibilityChanged;
     private close;
     private handleIframeReadyAction;
     private observeDarkModeChanges;

package/dist/types/components/salla-loyalty/salla-loyalty.d.ts

@@ -4,7 +4,10 @@ import { Item, LoyaltyProgram } from './loyalty-schema';
  * @slot points-applied-widget -  Widget to show information about the already exchanged points. It should have it's own resetting action and call the `resetExchange` method. If not provided, it will use the default value.
  */
 export declare class SallaLoyalty {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private modal;
     private confirmationModal;
     loyaltyProgram: LoyaltyProgram;

package/dist/types/components/salla-map/salla-map.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class SallaMap {
+    private langUnsubscribe;
     private map;
     private locationModal;
     private marker;
@@ -20,6 +21,8 @@ export declare class SallaMap {
     selectedLat: number;
     selectedLng: number;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private formatAddress;
     /** Treat numeric `0` as valid; reject null/undefined/blank/NaN (incl. whitespace). */
     private hasCoordinate;

package/dist/types/components/salla-notifications/salla-notifications.d.ts

@@ -1,6 +1,8 @@
 import { Pagination } from "../../interfaces";
 export declare class SallaNotifications {
-    constructor();
+    private langUnsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Load more text
      */

package/dist/types/components/salla-offer/salla-offer.d.ts

@@ -11,7 +11,10 @@ import { Offer, Currency, Category, Product } from './interfaces';
  * <salla-offer product-id="123"></salla-offer>
  */
 export declare class SallaOffer {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Custom Card Component for the Salla Products List.
      *

package/dist/types/components/salla-offer-modal/salla-offer-modal.d.ts

@@ -5,6 +5,7 @@ import Offer from "./offer-schema";
  * @slot category - Replaces Category badge, has replaceable props `{name}`, `{url}`.
  */
 export declare class SallaOfferModal {
+    private langUnsubscribe;
     private categorySlot;
     private modal;
     host: HTMLElement;
@@ -16,6 +17,8 @@ export declare class SallaOfferModal {
     productID: number;
     offer_type: string;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     translationLoaded: boolean;
     addToCartLabel: string;
     /**

package/dist/types/components/salla-order-branch/interfaces.d.ts

@@ -26,6 +26,7 @@ export interface OrderBranchPreparationTimeRange {
 export interface OrderBranch {
     id?: number | string;
     name?: string | null;
+    pickup_instructions?: string | null;
     location?: OrderBranchLocation | null;
     contacts?: string | OrderBranchContacts | null;
     preparation_time_range?: OrderBranchPreparationTimeRange | null;

package/dist/types/components/salla-order-branch/salla-order-branch.d.ts

@@ -1,4 +1,4 @@
-import { OrderBranch } from './interfaces';
+import type { OrderBranch } from './interfaces';
 /**
  * @salla/ui-components
  * The `salla-order-branch` component renders pickup branch details for thank-you pages.
@@ -8,18 +8,27 @@ export declare class SallaOrderBranch {
     stackCards: boolean;
     branchData?: OrderBranch;
     isLoading: boolean;
+    /** Bilingual defaults for keys introduced by this component; store/central translations win. */
+    private readonly translationDefaults;
     componentWillLoad(): Promise<void>;
+    /**
+     * Register bilingual (ar/en) defaults without overriding existing translations.
+     */
+    private registerTranslationDefaults;
     private getBranchData;
     private parseBranchResponse;
     private getApiErrorMessage;
     private notifyApiError;
     private label;
+    private bilingualLabel;
     private get preparationText();
     private unitLabel;
     private get workingHoursItems();
     private get branchAddress();
     private get mapUrl();
     private get phone();
+    private get pickupInstructions();
+    private renderPickupInstructions;
     private renderDetailsColumn;
     private renderWorkingHoursCard;
     private renderBranchIdentityCard;

package/dist/types/components/salla-order-summary/salla-order-summary.d.ts

@@ -1,5 +1,6 @@
 import { orderItem } from './interfaces';
 export declare class SallaOrderSummary {
+    private langUnsubscribe;
     copyCodeButtonTimeout: NodeJS.Timeout;
     /**
      * The order ID to fetch items from
@@ -14,6 +15,7 @@ export declare class SallaOrderSummary {
     private download_text;
     private isDigitalCard;
     private isDigitalProduct;
+    connectedCallback(): void;
     componentWillLoad(): Promise<void>;
     private copyToClipboardHandler;
     private getOrderItems;

package/dist/types/components/salla-order-totals-card/interfaces.d.ts

@@ -14,9 +14,10 @@ export interface OrderSummary {
     discounts?: Discount[];
     cod_cost?: Total;
     shipping_cost?: Total;
-    paid_amount?: Total;
-    remaining_amount?: Total;
-    refund_amount?: Total;
+    paid_amount?: Total | number;
+    remaining_amount?: Total | number;
+    has_remaining_amount?: boolean;
+    refund_amount?: Total | number;
     tax?: {
         percent: number;
         amount: Total;

package/dist/types/components/salla-order-totals-card/salla-order-totals-card.d.ts

@@ -12,5 +12,7 @@ export declare class SallaOrderTotalsCard {
     private renderTotalRow;
     private renderDiscountRow;
     private renderRefundRow;
+    /** Totals arrive either as a money object or a plain float, depending on the presenter. */
+    private toAmount;
     render(): any;
 }

package/dist/types/components/salla-orders/salla-orders.d.ts

@@ -2,7 +2,9 @@ import type { Order, OrderQueryParameters } from './interface';
 import type { Pagination } from '../../interfaces';
 type OrdersFilter = 'all' | 'archived' | 'waiting';
 export declare class SallaOrder {
-    constructor();
+    private langUnsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Query Parameter to send along with the fetch request
      */

package/dist/types/components/salla-placeholder/salla-placeholder.d.ts

@@ -3,7 +3,9 @@
  * @slot description - Additional content displayed below the title.
  */
 export declare class SallaPlaceholder {
-    constructor();
+    private langUnsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     translationLoaded: boolean;
     /**
      * Custom icon to display, defaults to [`Inbox`], can be any valid svg icon or inline element with font icon

package/dist/types/components/salla-price-range/salla-price-range.d.ts

@@ -1,5 +1,6 @@
 import { Filter, FilterValue } from "../salla-filters/interfaces";
 export declare class SallaPriceRange {
+    private langUnsubscribe;
     /**
      * Minimum price threshold value
      */
@@ -35,6 +36,7 @@ export declare class SallaPriceRange {
     maxInput: HTMLInputElement;
     filterValues: Array<FilterValue>;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * reset the price range inputs
      */

package/dist/types/components/salla-product-availability/salla-product-availability.d.ts

@@ -1,5 +1,9 @@
 export declare class SallaProductAvailability {
+    private langUnsubscribe;
+    private hostTitle;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private isUser;
     private modal;
     private channels_;

package/dist/types/components/salla-product-card/salla-product-card.d.ts

@@ -2,40 +2,41 @@
  * @slot add-to-cart-label - Add to cart label.
  */
 export declare class SallaProductCard {
+    private langUnsubscribe;
     /**
-   *  Product information.
+   * The product data to display. Can be a JSON string or a product object containing id, name, image, price, etc.
    */
     product: string | object;
     /**
-     *  Horizontal card.
+     * Whether to display the card in horizontal (landscape) layout. Default is false (vertical layout).
      */
     horizontal: boolean;
     /**
-     *  Support shadow on hover.
+     * Whether to add a shadow effect on hover. Default is false.
      */
     shadowOnHover: boolean;
     /**
-     *  Hide add to cart button.
+     * Whether to hide the "Add to Cart" button. Default is false (button is shown).
      */
     hideAddBtn: boolean;
     /**
-     *  Full image card.
+     * Whether to use a full-image card style where the image covers the entire card. Default is false.
      */
     fullImage: boolean;
     /**
-     *  Minimal card.
+     * Whether to use a minimal card style with reduced information. Default is false.
      */
     minimal: boolean;
     /**
-     *  Special card.
+     * Whether this is a special/featured product card with additional styling (like quantity pie chart). Default is false.
      */
     isSpecial: boolean;
     /**
-     *  Show quantity.
+     * Whether to show the product quantity in a badge. Default is false.
      */
     showQuantity: boolean;
     /**
-     *  Compact list layout for drawers and lists.
+     * Whether to use a compact card layout suitable for drawers and lists. Default is false.
      */
     compact: boolean;
     /**
@@ -66,6 +67,8 @@ export declare class SallaProductCard {
     private wishlistBtn;
     private addBtn;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private initCircleBar;
     private toggleFavoriteIcon;
     private isInWishlist;

package/dist/types/components/salla-product-options/salla-product-options.d.ts

@@ -1,7 +1,9 @@
 import { type EventEmitter } from '../../stencil-public-runtime';
 import { type Option, type Detail } from './interfaces';
 export declare class SallaProductOptions {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
     /**
      * Sets the options data for the product
      * @param optionsData - Array of product options

package/dist/types/components/salla-product-size-guide/salla-product-size-guide.d.ts

@@ -7,7 +7,10 @@ export interface SizeGuide {
  * @slot footer - The bottom section of the component.Empty by default.
  */
 export declare class SallaProductSizeGuide {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private modal;
     guides: Array<SizeGuide> | [];
     productId: number;

package/dist/types/components/salla-products-list/salla-products-list.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Product } from '@salla.sa/twilight/types/common';
 export declare class SallaProductsList {
+    private langUnsubscribe;
     /**
      * TODO:: order the logic like this:
      * Properties: List all @Prop decorated properties.

package/dist/types/components/salla-progress-bar/salla-progress-bar.d.ts

@@ -1,6 +1,11 @@
 import { Donation } from "../salla-product-options/interfaces";
 export declare class SallaProgressBar {
+    private langUnsubscribe;
+    private hasDonationTarget;
+    private donationEndDate;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * 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}`
      */

package/dist/types/components/salla-quick-buy/salla-quick-buy.d.ts

@@ -1,7 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import "@salla.sa/applepay/src/index";
 export declare class SallaQuickBuy {
-    constructor();
+    private langUnsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     host: HTMLElement;
     /**
      * Button type.

package/dist/types/components/salla-quick-order/salla-quick-order.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class SallaQuickOrder {
+    private langUnsubscribe;
     host: HTMLElement;
     private agreementModal;
     private nameInput;
@@ -61,6 +62,8 @@ export declare class SallaQuickOrder {
      */
     quickOrderSubmited: EventEmitter;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private getBtnColor;
     private getErrorMessage;
     private handleInvalidInput;

package/dist/types/components/salla-rating-modal/salla-rating-modal.d.ts

@@ -1,6 +1,9 @@
 import type OrderFeedbackResponse from "./order-feedback-response";
 export declare class SallaRatingModal {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     order: OrderFeedbackResponse | undefined;
     hasError: boolean;
     showContactWidget: boolean;

package/dist/types/components/salla-rating-stars/salla-rating-stars.d.ts

@@ -4,32 +4,32 @@ export declare class SallaRatingStars {
     reviewLabel: string;
     selectedStar: number;
     /**
-   * Sets input name.
-   */
+     * The name attribute for the rating input (used in forms). Default is 'rating'.
+     */
     name: string;
     /**
-    * Sets the height and width of the component. Defaults to medium.
-    */
+     * The size of the star icons. Can be 'large', 'medium', 'small', or 'mini'. Default is 'medium'.
+     */
     size: "large" | "medium" | "small" | "mini";
     /**
-    * The rating value.
-    */
+     * The current rating value (0-5). Used to display filled stars.
+     */
     value: number;
     /**
-   * Number of reviews to display.
-   */
+     * The number of reviews to display next to the stars. Default is 0 (hidden).
+     */
     reviews: number;
     /**
-    * Show the description label.
-    */
+     * Whether to show a descriptive label (e.g., "Excellent", "Good") next to the rating. Default is false.
+     */
     withLabel: boolean;
     /**
-    * Render the description label before the stars instead of after.
-    */
+     * Render the description label before the stars instead of after.
+     */
     labelBeforeStars: boolean;
     /**
-    * Allows the rating to be editable.
-    */
+     * Whether the rating is interactive/editable by the user. Default is false (display-only).
+     */
     editable: boolean;
     tag: boolean;
     host: HTMLElement;

package/dist/types/components/salla-review-card/salla-review-card.d.ts

@@ -1,4 +1,8 @@
 import type { Review } from "./interfaces";
+/**
+ * The `salla-review-card` component displays a product review with images, ratings, and product info.
+ * Supports image carousel with swipe gestures.
+ */
 export declare class SallaReviewCard {
     el: HTMLElement;
     /** The review object to render, containing review text, stars, product info, and images. */

package/dist/types/components/salla-reviews/salla-reviews.d.ts

@@ -1,6 +1,9 @@
 import { Source, Review, ReviewType, SortingOption } from "./interfaces";
 export declare class SallaReviews {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Controls the visibility of a link to the reviews page.
      *

package/dist/types/components/salla-scopes/salla-scopes.d.ts

@@ -3,7 +3,10 @@ import { ModeType, ProductAvailability, Scope } from './interfaces';
  * @slot footer - The bottom section of the component, used for form action. Utilizes the `handleSubmit` method to submit the form.
  */
 export declare class SallaScopees {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private changeBtn;
     private modal;
     private loadedScopes;

package/dist/types/components/salla-skeleton/salla-skeleton.d.ts

@@ -1,15 +1,15 @@
 export declare class SallaSkeleton {
     /**
-   *  Set the shape type of the skeleton is it circle or normal
-   */
+     * The shape type of the skeleton. 'circle' for circular skeletons (e.g., avatars), 'normal' for rectangular shapes. Default is 'normal'.
+     */
     type: 'circle' | 'normal';
     /**
-   *  Set the skeleton width
-   */
+     * The width of the skeleton. Can be any CSS width value (e.g., '100%', '50px', '2rem'). Default is '100%'.
+     */
     width: string;
     /**
-   *  Set the skeleton height
-   */
+     * The height of the skeleton. Can be any CSS height value (e.g., '100%', '50px', '2rem'). Default is '100%'.
+     */
     height: string;
     render(): any;
 }

package/dist/types/components/salla-slider/salla-slider.d.ts

@@ -5,6 +5,7 @@ import { Swiper as SwiperType } from 'swiper/types';
  * @slot thumbs - Thumbs slider items.
  */
 export declare class SallaSlider {
+    private langUnsubscribe;
     host: HTMLElement;
     constructor();
     /**
@@ -321,6 +322,7 @@ export declare class SallaSlider {
     private hasThumbSlot;
     private pre_defined_config;
     isStaticWhenSingle(): boolean;
+    connectedCallback(): void;
     componentWillLoad(): Promise<void>;
     getSwiperConfig(): {
         loop: boolean;

package/dist/types/components/salla-social/salla-social.d.ts

@@ -2,7 +2,10 @@
  * @slot social-item - Replaces social item, has replaceable keys `{icon}`, `{type} and {link}`.
  */
 export declare class SallaSocial {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private readonly socialSlot;
     links: any;
     host: HTMLElement;

package/dist/types/components/salla-tabs/salla-tab-header.d.ts

@@ -9,8 +9,8 @@ export declare class SallaTabHeader {
      */
     name: string;
     /**
-   * The class applied to the currently active(selected) tab
-   */
+     * The class applied to the currently active(selected) tab
+     */
     activeClass: string;
     /**
      * Set the height of the tab bar

package/dist/types/components/salla-tel-input/salla-tel-input.d.ts

@@ -1,13 +1,15 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Phone } from './interfaces';
 export declare class SallaTelInput {
+    private langUnsubscribe;
     private TelInput;
     /**
      * Lazy load intl-tel-input library
      * This reduces initial bundle size by ~80-90KB
      */
     private loadTelInput;
-    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Current mobile number
      */