@salla.sa/twilight-components 2.14.521 → 2.14.522

package/dist/components/salla-login-modal2.js

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './salla-button2.js';
 import { d as defineCustomElement$2 } from './salla-loading2.js';
 import { d as defineCustomElement$1 } from './salla-modal2.js';
 
@@ -374,13 +375,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-login-modal", "salla-loading", "salla-modal"];
+    const components = ["salla-login-modal", "salla-button", "salla-loading", "salla-modal"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-login-modal":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SallaLoginModal);
             }
             break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

package/dist/components/salla-loyalty-point2.js

@@ -11,7 +11,8 @@ import { S as SICalendar } from './calendar.js';
 import { I as IphoneXIcon } from './iphone-x.js';
 import { S as SILocation } from './location.js';
 import { S as SIShipping } from './shipping.js';
-import { d as defineCustomElement$3 } from './salla-badge2.js';
+import { d as defineCustomElement$4 } from './salla-badge2.js';
+import { d as defineCustomElement$3 } from './salla-button2.js';
 import { d as defineCustomElement$2 } from './salla-loading2.js';
 import { d as defineCustomElement$1 } from './salla-modal2.js';
 
@@ -246,7 +247,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-loyalty-point", "salla-badge", "salla-loading", "salla-modal"];
+    const components = ["salla-loyalty-point", "salla-badge", "salla-button", "salla-loading", "salla-modal"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-loyalty-point":
             if (!customElements.get(tagName)) {
@@ -254,6 +255,11 @@ function defineCustomElement() {
             }
             break;
         case "salla-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/components/salla-modal2.js

@@ -4,16 +4,20 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { C as Cancel } from './cancel.js';
 import { A as AlertEngineIcon, C as CheckCircle2 } from './check-circle2.js';
+import { I as IconArrowLeft } from './arrow-left.js';
+import { a as arrowRight } from './arrow-right.js';
 import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$2 } from './salla-button2.js';
 import { d as defineCustomElement$1 } from './salla-loading2.js';
 
-const sallaModalCss = "@media screen and (max-width: 470px){.modal-is-open{position:fixed;width:100%}}";
+const sallaModalCss = "@media screen and (max-width: 470px){.modal-is-open{position:fixed;width:100%}}.s-modal-back{position:absolute;top:0.35rem;inset-inline-start:0.35rem;z-index:1;margin:0 !important;line-height:0}.s-modal-back .s-button-element,.s-modal-back .s-button-icon{margin:0 !important}";
 
 const SallaModal = /*@__PURE__*/ proxyCustomElement(class SallaModal extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.modalVisibilityChanged = createEvent(this, "modalVisibilityChanged", 7);
+        this.modalBack = createEvent(this, "modalBack", 7);
         /**
          * Sets the modal to be closable. Defaults to `true`
          */
@@ -58,6 +62,10 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class SallaModal extends HTM
          * Set the style of the header icon.
          */
         this.iconStyle = undefined;
+        /**
+         * Show a back button in the header corner. Defaults to `false`
+         */
+        this.showBack = false;
         salla.event.on('modal::open', target => target == this.host.id && this.open());
         salla.event.on('modal::close', target => target == this.host.id && this.close());
         this.modalTitle = this.host.getAttribute('modal-title');
@@ -139,6 +147,9 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class SallaModal extends HTM
         salla.event.dispatch('modal::close', { reason });
         this.host.removeAttribute('visible');
     }
+    handleBack() {
+        this.modalBack.emit();
+    }
     iconBlockClasses() {
         return {
             's-modal-icon': true,
@@ -151,13 +162,18 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class SallaModal extends HTM
     getWidth() {
         return this.isLoading ? (this.hasSkeleton ? 'md' : 'xs') : this.width;
     }
+    getBackIcon() {
+        return document.documentElement.getAttribute('dir') === 'rtl' ? arrowRight : IconArrowLeft;
+    }
     //todo:: pref for each modal
     render() {
         this.host.id = this.host.id || 'salla-modal';
         if (this.isLoading) {
             return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog", onKeyUp: e => this.handleKeyUp(e) }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("slot", { name: "loading" }, h("salla-loading", null)), h("div", { class: "s-hidden" }, h("slot", null))))));
         }
-        return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.centered } }, this.isClosable ?
+        return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.centered } }, this.showBack ?
+            h("salla-button", { class: "s-modal-back", shape: "icon", color: "light", size: "medium", "aria-label": "Back", onClick: () => this.handleBack() }, h("span", { innerHTML: this.getBackIcon() }))
+            : '', this.isClosable ?
             h("button", { class: "s-modal-close", onClick: () => this.closeModal("closeButtonClick"), type: "button" }, h("span", { innerHTML: Cancel }))
             : '', this.modalTitle || this.subTitle ?
             h("div", { class: "s-modal-header-inner" }, h("slot", { name: 'icon' }, !!this.iconStyle ?
@@ -186,6 +202,7 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class SallaModal extends HTM
         "subTitle": [1, "sub-title"],
         "centered": [4],
         "iconStyle": [1, "icon-style"],
+        "showBack": [516, "show-back"],
         "modalTitle": [32],
         "open": [64],
         "close": [64],
@@ -199,13 +216,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-modal", "salla-loading"];
+    const components = ["salla-modal", "salla-button", "salla-loading"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-modal":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SallaModal);
             }
             break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();

package/dist/components/salla-order-options-modal2.js

@@ -130,13 +130,17 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
         }
         return pass;
     }
-    /** Sum the additional_price of any pre-selected details. */
+    /**
+     * Sum the per-quantity fee (total_price = additional_price × qty) of any pre-selected details.
+     * Uses total_price so the total scales with product quantity; falls back to the per-unit
+     * additional_price only when total_price is absent. (CHOD-13172)
+     */
     seedOptionsPrice(orderOptions) {
         let sum = 0;
         orderOptions.forEach((opt) => {
             (opt.details || []).forEach((d) => {
                 if (d.is_selected)
-                    sum += Number(d.additional_price) || 0;
+                    sum += Number(d.total_price ?? d.additional_price) || 0;
             });
         });
         return sum;
@@ -162,7 +166,8 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
                 ? await el.getSelectedOptions()
                 : [];
             (selected || []).forEach((s) => {
-                selectedPrice += Number(s.additional_price) || 0;
+                // total_price already includes the product-quantity multiplier (CHOD-13172).
+                selectedPrice += Number(s.total_price ?? s.additional_price) || 0;
             });
         }
         this.liveTotal = this.basePrice + selectedPrice;
@@ -202,16 +207,16 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
         // salla.money returns HTML (sicon-sar icon) → render via innerHTML. Round
         // first so floating-point sum doesn't show as 1174.3799999999999.
         const totalHtml = salla.money(Math.round(this.liveTotal * 100) / 100);
-        return (h("salla-modal", { key: 'a7b7c31da2f5fd9f5f3ee601052f84e512368cee', ref: el => (this.modal = el), class: "s-order-options-modal-host", width: "md", "modal-title": this.title, onModalVisibilityChanged: (e) => {
+        return (h("salla-modal", { key: 'e84a40e1a27447d58ca5651a7ed76cbcf886495c', ref: el => (this.modal = el), class: "s-order-options-modal-host", width: "md", "modal-title": this.title, onModalVisibilityChanged: (e) => {
                 if (!e.detail)
                     this.handleClose();
-            } }, h("div", { key: '9a44c4dcec6f0e49a65217b1e1e2cd19ccc80c76', class: "s-order-options-modal-body" }, h("p", { key: '66c41a32e2130db4dc1aa402a31cfd6d519544b3', class: "s-order-options-modal-subtitle" }, this.subtitle), h("div", { key: 'fffe868427973b6426b8a2f8f33f48c017dfb7fb', class: "s-order-options-modal-fields" }, this.orderOptions.length > 0 && (h("salla-product-options", { key: this.sessionId, ref: el => {
+            } }, h("div", { key: 'fafa3cdeb22787d4a02f3fc8afb70770e1c3b4b5', class: "s-order-options-modal-body" }, h("p", { key: 'c563c24e1b8744f3248328ec16a18c5a668e7949', class: "s-order-options-modal-subtitle" }, this.subtitle), h("div", { key: '475599cc47435b077d2321573328321888e60aa6', class: "s-order-options-modal-fields" }, this.orderOptions.length > 0 && (h("salla-product-options", { key: this.sessionId, ref: el => {
                 if (!el)
                     return;
                 this.optionsRefs.set('order-options', el);
                 // Without seeding, first multi-select toggle wipes pre-selected defaults.
                 el.seedSelectedOptions?.();
-            }, "product-id": `order-options-${this.orderOptions[0]?.id}`, "unique-key": "order-options", options: JSON.stringify(this.orderOptions), "hide-out-label": "1", "no-padding": true })))), h("div", { key: '36f3a18380f05a8420d4bc32fa643bf596ac16fb', slot: "footer", class: "s-order-options-modal-footer" }, this.paymentMode === 'apple-pay' ? (h("div", { class: "s-order-options-modal-apple-pay-wrap" }, h("div", { class: "s-order-options-modal-apple-pay-total" }, h("span", { class: "s-order-options-modal-apple-pay-label" }, this.totalLabel), h("span", { class: "s-order-options-modal-apple-pay-amount", innerHTML: totalHtml })), h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', buttonstyle: "black", type: "buy", class: "s-order-options-modal-apple-pay", onClick: () => this.handleSubmit() }))) : (h("salla-button", { type: "button", color: "primary", fill: "solid", width: "wide", loading: this.isSubmitting, onClick: () => this.handleSubmit() }, h("span", { class: "s-order-options-modal-cta-content" }, h("span", { class: "s-order-options-modal-cta-text" }, this.submitLabel), h("span", { class: "s-order-options-modal-cta-total", innerHTML: totalHtml })))))));
+            }, "product-id": `order-options-${this.orderOptions[0]?.id}`, "unique-key": "order-options", options: JSON.stringify(this.orderOptions), "hide-out-label": "1", "no-padding": true })))), h("div", { key: 'e00641853937f745c8cc798c7f9e15b389faf540', slot: "footer", class: "s-order-options-modal-footer" }, this.paymentMode === 'apple-pay' ? (h("div", { class: "s-order-options-modal-apple-pay-wrap" }, h("div", { class: "s-order-options-modal-apple-pay-total" }, h("span", { class: "s-order-options-modal-apple-pay-label" }, this.totalLabel), h("span", { class: "s-order-options-modal-apple-pay-amount", innerHTML: totalHtml })), h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', buttonstyle: "black", type: "buy", class: "s-order-options-modal-apple-pay", onClick: () => this.handleSubmit() }))) : (h("salla-button", { type: "button", color: "primary", fill: "solid", width: "wide", loading: this.isSubmitting, onClick: () => this.handleSubmit() }, h("span", { class: "s-order-options-modal-cta-content" }, h("span", { class: "s-order-options-modal-cta-text" }, this.submitLabel), h("span", { class: "s-order-options-modal-cta-total", innerHTML: totalHtml })))))));
     }
     get host() { return this; }
     static get style() { return sallaOrderOptionsModalCss; }

package/dist/components/salla-price-range2.js

@@ -3,15 +3,9 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { I as IconArrowLeft } from './arrow-left.js';
+import { a as arrowRight } from './arrow-right.js';
 import { d as defineCustomElement$1 } from './salla-button2.js';
 
-var arrowRight = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>arrow-right</title>
-<path d="M29.217 15.465c-0.019-0.044-0.056-0.077-0.080-0.119-0.067-0.116-0.139-0.227-0.236-0.317-0.011-0.009-0.013-0.024-0.024-0.033l-10.667-9.333c-0.553-0.484-1.396-0.429-1.881 0.125-0.484 0.555-0.428 1.396 0.127 1.881l7.996 6.997h-20.452c-0.737 0-1.333 0.597-1.333 1.333s0.596 1.333 1.333 1.333h20.452l-7.996 6.997c-0.555 0.485-0.611 1.327-0.127 1.881 0.264 0.3 0.633 0.455 1.004 0.455 0.312 0 0.625-0.109 0.877-0.331l10.667-9.333c0.011-0.009 0.015-0.024 0.024-0.033 0.097-0.091 0.169-0.201 0.236-0.317 0.024-0.041 0.060-0.075 0.080-0.119 0.073-0.163 0.116-0.343 0.116-0.533s-0.043-0.371-0.116-0.535z"></path>
-</svg>
-`;
-
 const sallaPriceRangeCss = ":host{display:block}.rtl .rtl-range-slider,[dir=rtl] .rtl-range-slider{transform:rotateY(180deg)}.rtl .rtl-range-numbers,[dir=rtl] .rtl-range-numbers{flex-direction:row-reverse}.rtl .form-select,.rtl select,[dir=rtl] .form-select,[dir=rtl] select{background-position:left 0.5rem center;padding-right:12px}.rtl .menu-divide li:not(:last-child):after,[dir=rtl] .menu-divide li:not(:last-child):after{left:0;right:auto}input[type=range]::-webkit-slider-thumb{pointer-events:all;width:24px;height:24px;-webkit-appearance:none}[type=checkbox]:checked{background-size:80%}";
 
 const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class SallaPriceRange extends HTMLElement {

package/dist/components/salla-product-size-guide.js

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$9 } from './salla-button2.js';
 import { d as defineCustomElement$8 } from './salla-loading2.js';
 import { d as defineCustomElement$7 } from './salla-modal2.js';
 import { d as defineCustomElement$6 } from './salla-placeholder2.js';
@@ -81,13 +82,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-product-size-guide", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-tab-content", "salla-tab-header", "salla-tabs"];
+    const components = ["salla-product-size-guide", "salla-button", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-tab-content", "salla-tab-header", "salla-tabs"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-product-size-guide":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SallaProductSizeGuide$1);
             }
             break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();

package/dist/components/salla-user-menu.js

@@ -9,6 +9,7 @@ import { W as WishListIcon } from './star.js';
 import { C as Cancel } from './cancel.js';
 import { R as Rate } from './star2.js';
 import { l as loyaltyProgramIcon } from './gift.js';
+import { d as defineCustomElement$5 } from './salla-button2.js';
 import { d as defineCustomElement$4 } from './salla-loading2.js';
 import { d as defineCustomElement$3 } from './salla-login-modal2.js';
 import { d as defineCustomElement$2 } from './salla-modal2.js';
@@ -350,13 +351,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-user-menu", "salla-loading", "salla-login-modal", "salla-modal"];
+    const components = ["salla-user-menu", "salla-button", "salla-loading", "salla-login-modal", "salla-modal"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-user-menu":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SallaUserMenu$1);
             }
             break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();