@salla.sa/twilight-components 2.14.596 → 2.14.597

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

@@ -2,27 +2,27 @@ export declare class SallaButton {
     private text;
     host: HTMLElement;
     /**
-     * Button Type
+     * The shape/variant of the button. Can be 'link' (text-only style), 'icon' (circular icon button), or 'btn' (standard button). Default is 'btn'.
      */
     shape: 'link' | 'icon' | 'btn';
     /**
-     * Button Color
+     * The color theme of the button. Available options: 'primary', 'success', 'warning', 'danger', 'light', 'gray', 'dark'. Default is 'primary'.
      */
     color: 'primary' | 'success' | 'warning' | 'danger' | 'light' | 'gray' | 'dark';
     /**
-     * Button Fill
+     * The fill style of the button. 'solid' (filled background), 'outline' (bordered, transparent background), or 'none'. Default is 'solid'.
      */
     fill: 'solid' | 'outline' | 'none';
     /**
-     * Button Size
+     * The size of the button. Can be 'small', 'medium', or 'large'. Default is 'medium'.
      */
     size: 'small' | 'large' | 'medium';
     /**
-     * Button Width
+     * The width of the button. 'wide' makes the button full-width, 'normal' uses auto width. Default is 'normal'.
      */
     width: 'wide' | 'normal';
     /**
-     * Is the button currently loading
+     * Shows a loading spinner on the button. Default is false.
      */
     loading: boolean;
     /**
@@ -32,27 +32,19 @@ export declare class SallaButton {
      */
     enableLoader: boolean;
     /**
-     * Is the button currently disabled
+     * Disables the button, preventing user interaction. Default is false.
      */
     disabled: boolean;
     /**
-     * If there is need to change loader position, pass the position
+     * Position of the loading spinner. Can be 'start', 'end', 'center', or 'after' (after the button text). Default is 'after'.
      */
     loaderPosition: 'start' | 'end' | 'center' | 'after';
     /**
-     * Button with href as normal link
+     * When provided, renders the button as an anchor (`<a>`) element with this URL.
      */
     href: string;
     /**
-     * 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).
+     * The HTML type attribute for the button. 'button' (default, general-purpose), 'submit' (submits forms), or 'reset' (resets form fields).
      */
     type: string;
     /**

package/dist/types/components/salla-cart-item-offers/salla-cart-item-offers.d.ts

@@ -23,8 +23,11 @@ export declare class SallaCartItemOffers {
     receivedOffer: string;
     discountAmountLabel: string;
     showMoreOffers: string;
+    private langUnsubscribe;
     private readonly icons;
     private visibleOffersCount;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): Promise<void>;
     componentDidLoad(): void;
     private parseOffers;

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

@@ -5,8 +5,8 @@ export declare class SallaCartSummary {
     cartSummaryTotal: number;
     cartLabel: string;
     /**
-     * Show cart label
-     * */
+     * Whether to show the cart label text alongside the cart icon. Default is false (icon only).
+     */
     showCartLabel: boolean;
     /**
      * Animate product Image to cart summary

package/dist/types/components/salla-comment-form/salla-comment-form.d.ts

@@ -1,6 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class SallaCommentForm {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Type of entity the comment is being submitted for. Defaults to `salla.url.is_page('page-single') ? 'page' : 'product'`
      */

package/dist/types/components/salla-comments/salla-comment-item.d.ts

@@ -1,6 +1,8 @@
 import { Comment } from './interfaces';
 export declare class SallaCommentItem {
-    constructor();
+    private langUnsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     host: HTMLElement;
     private likeBtn;

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

@@ -1,6 +1,9 @@
 import { CommentType, type Pagination, type Comment, type CommentSort } from './interfaces';
 export declare class SallaComments {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Page or product ID
      */

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

@@ -2,7 +2,11 @@
  * @slot contact - Replaces contact item, has replaceable props `{icon}`, `{value}`.
  */
 export declare class SallaContacts {
+    private langUnsubscribe;
+    private langTitle;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private readonly contactSlot;
     /**
      * Section title for social block of footer.

package/dist/types/components/salla-count-down/salla-count-down.d.ts

@@ -1,5 +1,8 @@
 export declare class SallaCountDown {
+    private langUnsubscribe;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * The date to count down to.
      *
@@ -48,24 +51,24 @@ export declare class SallaCountDown {
      * */
     buttonIcon?: string;
     /**
-     * If true, the count down numbers will be appear in a boxes
-     * */
+     * Whether to display countdown numbers in boxed containers. Default is false.
+     */
     boxed: boolean;
     /**
-     * The size of the count down
-     * */
+     * The size of the countdown display. Can be 'sm', 'md', or 'lg'. Default is 'md'.
+     */
     size: 'sm' | 'md' | 'lg';
     /**
-     * The color of the count down
-     * */
+     * The color theme of the countdown. Can be 'primary', 'light', or 'dark'. Default is 'dark'.
+     */
     color: 'primary' | 'light' | 'dark';
     /**
-     * Show labels for each count down number
-     * */
+     * Whether to show labels (day, hour, minute, second) below each countdown number. Default is false.
+     */
     labeled: boolean;
     /**
-     * The text to show when the count down ends
-     * */
+     * Custom text to display when the countdown ends. If not provided, uses the default localized message.
+     */
     endText: string;
     /**
      * Background color of each box when boxed is enabled.
@@ -85,12 +88,12 @@ export declare class SallaCountDown {
      * */
     listPadding: string;
     /**
-     * The digits lang to show in the count down
-     * */
+     * The language/format for displaying digits. 'en' for English numerals, 'auto' for localized numerals. Default is 'auto'.
+     */
     digits: 'en' | 'auto';
     /**
-     * If true, the count down will end at the end of the day
-     * */
+     * Whether to set the countdown end time to the end of the specified day (23:59:59). Default is false.
+     */
     endOfDay: boolean;
     /**
      * If true, hides days segment when days = 0, and hides hours segment when both days and hours = 0.

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;
     /**
@@ -16,6 +17,7 @@ export declare class SallaFileUpload {
      */
     private loadFilePond;
     constructor();
+    connectedCallback(): void;
     private fileUploader;
     private hiddenInput;
     filepond: FilePondType;

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-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,6 +14,7 @@ export interface OrderSummary {
     discounts?: Discount[];
     cod_cost?: Total;
     shipping_cost?: Total;
+    has_remaining_amount?: boolean;
     paid_amount?: Total;
     remaining_amount?: Total;
     refund_amount?: Total;

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;