@salla.sa/twilight-components 2.14.598 → 2.14.600

package/dist/collection/components/salla-order-totals-card/salla-order-totals-card.js

@@ -3,21 +3,62 @@
  */
 import { h, Host } from "@stencil/core";
 export class SallaOrderTotalsCard {
-    handleOrderChange(newValue) {
-        if (newValue) {
-            this.setSummaryFromProp(newValue);
+    // `amounts` wins over the legacy `order` whenever both are set
+    refreshSummary() {
+        if (this.amounts) {
+            this.setSummaryFromAmounts(this.amounts);
+        }
+        else if (this.order) {
+            this.setSummaryFromOrder(this.order);
         }
         else {
             this.summary = undefined;
         }
     }
+    handleAmountsChange() {
+        this.refreshSummary();
+    }
+    handleOrderChange() {
+        this.refreshSummary();
+    }
     async componentWillLoad() {
         await Salla.onReady();
-        if (this.order) {
-            this.setSummaryFromProp(this.order);
+        this.refreshSummary();
+    }
+    normalizeAmounts(value) {
+        const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+        return {
+            sub_total: parsed.sub_total,
+            total: parsed.total,
+            shipping_cost: parsed.shipping_cost,
+            cod_cost: parsed.cash_on_delivery,
+            paid_amount: parsed.paid_amount,
+            remaining_amount: parsed.remaining_amount,
+            refund_amount: parsed.refund_amount,
+            options: parsed.options,
+            options_total: parsed.options_total,
+            tax: parsed.tax
+                ? {
+                    percent: typeof parsed.tax.percent === 'string' ? parseFloat(parsed.tax.percent) : parsed.tax.percent,
+                    amount: parsed.tax.amount,
+                }
+                : undefined,
+            discounts: parsed.discounts?.map((d) => ({
+                name: d.title,
+                discount: typeof d.discount === 'string' ? parseFloat(d.discount) : d.discount,
+            })),
+        };
+    }
+    setSummaryFromAmounts(value) {
+        try {
+            this.summary = this.normalizeAmounts(value);
+        }
+        catch (error) {
+            salla.logger.error('Failed to parse amounts data', error);
+            this.summary = undefined;
         }
     }
-    setSummaryFromProp(value) {
+    setSummaryFromOrder(value) {
         try {
             const parsedValue = typeof value === 'string' ? JSON.parse(value) : value;
             this.summary = parsedValue;
@@ -72,6 +113,31 @@ export class SallaOrderTotalsCard {
     }
     static get properties() {
         return {
+            "amounts": {
+                "type": "string",
+                "attribute": "amounts",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Amounts",
+                    "resolved": "Amounts | string",
+                    "references": {
+                        "Amounts": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-order-totals-card/interfaces.ts::Amounts"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Order totals object (new schema). Accepts a JSON string or object with amounts."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "order": {
                 "type": "string",
                 "attribute": "order",
@@ -91,7 +157,7 @@ export class SallaOrderTotalsCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Order summary object. Accepts a JSON string or object containing the order totals."
+                    "text": "Legacy order object for backward compatibility. Prefer using `amounts` instead."
                 },
                 "getter": false,
                 "setter": false,
@@ -106,6 +172,9 @@ export class SallaOrderTotalsCard {
     }
     static get watchers() {
         return [{
+                "propName": "amounts",
+                "methodName": "handleAmountsChange"
+            }, {
                 "propName": "order",
                 "methodName": "handleOrderChange"
             }];

package/dist/collection/components/salla-scopes/salla-scopes.css

@@ -173,6 +173,20 @@
 .s-scopes-input:where([dir="rtl"], [dir="rtl"] *) {
   margin-left: 0.75rem;
 }
+.s-scopes-icon {
+  display: inline-block;
+  height: 2rem;
+  width: 2rem;
+  border-radius: var(--s-radius, 0.25rem);
+  object-fit: contain;
+  vertical-align: middle;
+}
+.s-scopes-icon:where([dir="ltr"], [dir="ltr"] *) {
+  margin-right: 0.75rem;
+}
+.s-scopes-icon:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.75rem;
+}
 .s-scopes-label {
   display: flex;
   flex-grow: 1;

package/dist/collection/components/salla-scopes/salla-scopes.js

@@ -157,7 +157,7 @@ export class SallaScopees {
         return h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, h("span", { slot: "title" }, salla.lang.get("blocks.scope.branch_looking_for_not_found")), h("span", { slot: "description" }, salla.lang.get("blocks.scope.our_services_not_available_in_this_branch")));
     }
     defaultContent() {
-        return [h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes?.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, h("input", { id: `${this.selection} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), h("label", { htmlFor: `${this.selection} + '_scope_' + ${scope.id}`, class: "s-scopes-label s-scopes-clickable" }, h("span", null, scope.name))))), this.footerContent()];
+        return [h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes?.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, h("input", { id: `${this.selection} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), h("label", { htmlFor: `${this.selection} + '_scope_' + ${scope.id}`, class: "s-scopes-label s-scopes-clickable" }, h("span", null, scope.icon && h("img", { src: scope.icon, alt: "", loading: "lazy", class: "s-scopes-icon" }), scope.name))))), this.footerContent()];
     }
     availabilityContent() {
         return h("div", { class: "s-scopes-container" }, this.scopes?.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, h("h2", { class: { "s-scopes-label": true, "s-scopes-clickable": this.mode === ModeType.DEFAULT } }, h("span", null, scope.name)), h("h2", { style: { 'color': scope?.availability?.color }, class: `s-scopes-${scope?.availability?.key}` }, scope?.availability?.label))));

package/dist/collection/components/salla-search/salla-search.js

@@ -69,12 +69,22 @@ export class SallaSearch {
                 Helper.saveProductSource('search');
                 this.commitSearchHistory(this.search_term);
                 salla.event.emit('salla-search::product.clicked', [{ product, position }]);
+                this.modal?.close();
             },
             recommendationClick: (term, source) => {
                 salla.event.emit('salla-search::recommendation.clicked', { term, source });
             },
         };
-        salla.event.on('search::open', () => this.open());
+    }
+    connectedCallback() {
+        this.searchOpenListener = () => this.open();
+        salla.event.on('search::open', this.searchOpenListener);
+    }
+    disconnectedCallback() {
+        if (this.searchOpenListener) {
+            salla.event.off('search::open', this.searchOpenListener);
+            this.searchOpenListener = undefined;
+        }
     }
     async open() {
         if (!this.hasLoadedPopularSearches) {

package/dist/collection/components/salla-tabs/salla-tab-content.js

@@ -19,6 +19,12 @@ export class SallaTabContent {
             name: this.name
         };
     }
+    componentWillLoad() {
+        const parent = this.host.closest('salla-tabs');
+        if (parent?.activeTab === this.name) {
+            this.isSelected = true;
+        }
+    }
     unselect() {
         this.isSelected = false;
     }
@@ -30,7 +36,7 @@ export class SallaTabContent {
             's-tabs-content': true,
             's-tabs-content-selected': this.isSelected
         };
-        return (h("div", { key: '3107faffd358504438b464be5000682d403e1b22', class: classes }, h("slot", { key: 'e6fc9e480389b54f9e6e20a7c8ccdb880a4ee6d4' })));
+        return (h("div", { key: '251a33f54b1a8bb0fc4a424de86fe9e443ef6cf1', class: classes }, h("slot", { key: 'f7244cb7f510b7bde6ff34a64ef4ce043392b4fa' })));
     }
     static get is() { return "salla-tab-content"; }
     static get originalStyleUrls() {
@@ -58,7 +64,7 @@ export class SallaTabContent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set name of the tab content. Mainly used as a key to s\nynchronize the content with it's respective header."
+                    "text": "Set name of the tab content. Mainly used as a key to synchronize the content with its respective header."
                 },
                 "getter": false,
                 "setter": false,
@@ -92,4 +98,5 @@ export class SallaTabContent {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/components/salla-tabs/salla-tabs.js

@@ -9,18 +9,26 @@ import { h } from "@stencil/core";
 export class SallaTabs {
     constructor() {
         /**
-         * Background color
+         * Background color for the tabs header section. Accepts any CSS color value.
          */
         this.backgroundColor = undefined;
         /**
-         * Align tabs vertically.
+         * Whether to display tabs in a vertical layout. Default is false (horizontal layout).
          */
         this.vertical = false;
     }
-    componentWillLoad() {
+    componentDidLoad() {
         this.createGroup().then(() => {
-            const [group] = this.tabGroup;
-            this.selectGroup(group);
+            if (this.activeTab) {
+                const group = this.tabGroup.find(g => g.header.name === this.activeTab);
+                if (group) {
+                    this.selectGroup(group);
+                }
+            }
+            else {
+                const [group] = this.tabGroup;
+                this.selectGroup(group);
+            }
         });
     }
     onSelectedTab(event) {
@@ -49,8 +57,9 @@ export class SallaTabs {
         group.content.selected();
     }
     render() {
+        const headerStyle = this.backgroundColor ? { 'background-color': this.backgroundColor } : {};
         return [
-            h("div", { key: 'de6455b0d68cb3e174771ad7be1bc95141d61df1', class: "s-tabs" }, h("div", { key: '57c21f00a709723fa0be789f388b3defb391bcb2', class: "s-tabs-header" }, h("slot", { key: 'b5107fab289f9d7c661ddd7c4cfea4795eb7bb19', name: "header" })), h("div", { key: '344d142adc8f6adbc70baf4009e2d594fdbaea06', class: "s-tabs-content-wrapper" }, h("slot", { key: 'acd41f2ebb7120a2c043d17740e5fd4d2db95276', name: "content" })))
+            h("div", { key: 'd6f4e42f48cc3275f210718af56ff2fbbdb3e4a2', class: "s-tabs" }, h("div", { key: 'cdc798c1408536a3d56797b9bba071b246c01bbe', class: "s-tabs-header", style: headerStyle }, h("slot", { key: '7ba75a8985d78246faeef7c491452a5b82dbfa21', name: "header" })), h("div", { key: '0672eb44f6664cc3926a9780718f818f3b1ff507', class: "s-tabs-content-wrapper" }, h("slot", { key: '761a54a862372d9546763c814cc96ccb802f9b64', name: "content" })))
         ];
     }
     static get is() { return "salla-tabs"; }
@@ -79,7 +88,7 @@ export class SallaTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Background color"
+                    "text": "Background color for the tabs header section. Accepts any CSS color value."
                 },
                 "getter": false,
                 "setter": false,
@@ -99,12 +108,31 @@ export class SallaTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Align tabs vertically."
+                    "text": "Whether to display tabs in a vertical layout. Default is false (horizontal layout)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "activeTab": {
+                "type": "string",
+                "attribute": "active-tab",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial active tab name for SSR. When provided, child components (salla-tab-header/salla-tab-content)\nwill use this value to set their initial active state. If not provided, first tab becomes active after hydration."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }

package/dist/collection/utils/ssr-helpers.js

@@ -0,0 +1,105 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+/**
+ * SSR Helper Utilities
+ * These utilities provide a clean, reusable pattern for handling SSR-safe value resolution
+ * across components. The pattern: use provided prop value -> fallback to SDK when available -> use default.
+ */
+/**
+ * Resolves a value using the SSR-safe pattern:
+ * 1. If prop value is provided, use it directly
+ * 2. If prop not provided and salla SDK is available, use SDK getter
+ * 3. If prop not provided and salla SDK not available (SSR), use fallback
+ *
+ * @param propValue - The value provided via component prop (can be undefined)
+ * @param sdkGetter - Function to get value from SDK when available
+ * @param fallback - Default value when neither prop nor SDK is available
+ * @returns The resolved value
+ *
+ * @example
+ * // Simple config value
+ * const color = getSdkValueOrFallback(
+ *   this.color,
+ *   () => salla.config.get('theme.color.primary', '#5dd5c4'),
+ *   '#5dd5c4'
+ * );
+ *
+ * @example
+ * // With async SDK call
+ * const title = getSdkValueOrFallback(
+ *   this.title,
+ *   () => salla.lang.get('common.titles.products'),
+ *   'Products'
+ * );
+ */
+export function getSdkValueOrFallback(propValue, sdkGetter, fallback) {
+    if (propValue !== undefined && propValue !== null) {
+        return propValue;
+    }
+    if (typeof salla !== 'undefined') {
+        return sdkGetter();
+    }
+    return fallback;
+}
+/**
+ * Async version for SDK calls that require onReady or async operations.
+ * Automatically calls salla.onReady() before executing sdkGetter.
+ *
+ * @param propValue - The value provided via component prop
+ * @param sdkGetter - Function to get value from SDK (onReady is called automatically)
+ * @param fallback - Default value when neither prop nor SDK is available
+ * @returns Promise resolving to the value
+ *
+ * @example
+ * const color = await getSdkValueOrFallbackAsync(
+ *   this.color,
+ *   () => salla.config.get('theme.color.primary', '#5dd5c4'),
+ *   '#5dd5c4'
+ * );
+ */
+export async function getSdkValueOrFallbackAsync(propValue, sdkGetter, fallback) {
+    if (propValue !== undefined && propValue !== null) {
+        return propValue;
+    }
+    if (typeof salla !== 'undefined') {
+        await salla.onReady();
+        return await sdkGetter();
+    }
+    return fallback;
+}
+/**
+ * SSR-safe check for salla SDK availability.
+ * Returns true in client-side context where salla is loaded.
+ *
+ * @returns boolean indicating if salla SDK is available
+ */
+export function isSallaSdkAvailable() {
+    return typeof salla !== 'undefined';
+}
+/**
+ * Persists the active scope to both salla.storage and a cookie (same structure),
+ * so the scope is readable server-side. Use this everywhere the scope changes to
+ * keep storage and cookie in sync.
+ *
+ * @param scope - The scope object to persist (e.g. { type, id, ... })
+ */
+export function setScope(scope) {
+    salla.storage.set('scope', scope);
+    if (typeof document !== 'undefined') {
+        document.cookie = `scope=${encodeURIComponent(JSON.stringify(scope))}; path=/; max-age=31536000; SameSite=Lax`;
+    }
+}
+/**
+ * SSR-safe document.dir access.
+ * Returns the document direction or fallback.
+ *
+ * @param fallback - Default direction ('rtl' or 'ltr')
+ * @returns The direction value
+ */
+export function getDocumentDir(fallback = 'rtl') {
+    if (typeof document !== 'undefined' && document.dir) {
+        return document.dir;
+    }
+    return fallback;
+}