@salla.sa/twilight-components 2.14.443 → 2.14.445

package/dist/collection/components/salla-order-edit/salla-order-edit.js

@@ -25,6 +25,7 @@ export class SallaOrderEdit {
         this.addProductConfirmLoading = false;
         this.mobileProductsModalMounted = false;
         this.isMobileViewport = false;
+        this.isRTL = true;
         // Plain field (not @State): scroll-loading guard never affects rendering, so avoid re-render churn.
         this.mobileProductsListLoading = false;
         this.confirming = false;
@@ -67,6 +68,9 @@ export class SallaOrderEdit {
         };
         this.defaultProductsListSource = 'latest';
         this.debouncedProductSearch = salla.helpers.debounce((query) => this.applyProductSearch(query), 500);
+        salla.onReady(() => {
+            this.isRTL = salla.config.get('theme.is_rtl', true);
+        });
     }
     getParsedExcludedCategories() {
         if (!this.excludedCategories) {
@@ -420,6 +424,13 @@ export class SallaOrderEdit {
             this.navigateToOrder();
         }
     }
+    returnToOrderDetails() {
+        this.confirming = true;
+        this.navigateToOrder();
+    }
+    getConfirmButtonIconClass() {
+        return this.isRTL ? 'sicon-keyboard_arrow_left' : 'sicon-keyboard_arrow_right';
+    }
     async cancelEditSession() {
         try {
             await salla.order.api.cancelEditSession(this.orderId);
@@ -469,7 +480,7 @@ export class SallaOrderEdit {
         const hasRemainingAmount = preview?.totals?.remaining_amount?.amount > 0;
         const hasRefundAmount = preview?.totals?.refund_amount?.amount > 0;
         const taxAmount = preview?.totals?.tax?.amount?.amount;
-        return (h("salla-modal", { ref: modal => (this.saveModal = modal), width: "md", onModalVisibilityChanged: async (e) => {
+        return (h("salla-modal", { ref: modal => (this.saveModal = modal), width: "md", isClosable: false, onModalVisibilityChanged: async (e) => {
                 if (!e.detail) {
                     this.editPreview = null;
                     if (!this.confirming) {
@@ -477,7 +488,7 @@ export class SallaOrderEdit {
                     }
                     this.confirming = false;
                 }
-            } }, h("div", { class: "s-order-edit-modal" }, h("h2", { class: "s-order-edit-modal-title" }, salla.lang.getWithDefault('pages.orders.edit_summary_title', 'ملخص الطلب بعد التعديل')), preview?.items?.length > 0 && (h("div", { class: "s-order-edit-modal-items" }, preview.items.map(item => {
+            } }, h("div", { class: "s-order-edit-modal" }, h("h2", { class: "s-order-edit-modal-title" }, salla.lang.getWithDefault('pages.orders.edit_summary_title', 'ملخص الطلب بعد التعديل')), h("p", { class: "s-order-edit-modal-subtitle" }, salla.lang.getWithDefault('pages.orders.cart_edits_saved', 'Your cart edits have been saved')), preview?.items?.length > 0 && (h("div", { class: "s-order-edit-modal-items" }, preview.items.map(item => {
             const orderItem = this.order?.items?.find(oi => oi.id == item.id);
             const imageUrl = orderItem?.product?.image?.url;
             const optionsLabel = item.options?.join('/ ');
@@ -486,7 +497,7 @@ export class SallaOrderEdit {
             ? salla.lang.getWithDefault('pages.orders.pay_difference', 'دفع فارق المبلغ')
             : hasRefundAmount
                 ? salla.lang.getWithDefault('pages.orders.confirm_and_receive_difference', 'تأكيد واستلام فارق المبلغ')
-                : salla.lang.getWithDefault('pages.orders.confirm_changes', 'تأكيد التعديلات'), h("i", { class: "sicon-keyboard_arrow_left s-order-edit-modal-btn-icon" }))))));
+                : salla.lang.getWithDefault('pages.orders.confirm_changes', 'تأكيد التعديلات'), h("i", { class: `${this.getConfirmButtonIconClass()} s-order-edit-modal-btn-icon` })), h("salla-button", { color: 'gray', fill: "outline", onClick: () => this.returnToOrderDetails() }, salla.lang.getWithDefault('pages.orders.back_to_order_details', 'العودة إلى تفاصيل الطلب'))))));
     }
     render() {
         if (this.loading) {
@@ -595,7 +606,8 @@ export class SallaOrderEdit {
             "addProductLoading": {},
             "addProductConfirmLoading": {},
             "mobileProductsModalMounted": {},
-            "isMobileViewport": {}
+            "isMobileViewport": {},
+            "isRTL": {}
         };
     }
     static get listeners() {

package/dist/collection/components/salla-searchable-dropdown/salla-searchable-dropdown.js

@@ -16,6 +16,13 @@ export class SallaSearchableDropdown {
         this.searchQuery = '';
         this.clientSearch = false;
         this.dropUp = false;
+        this.searchable = true;
+        /**
+         * 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.
+         */
+        this.keepParentScroll = false;
         this.isOpen = false;
         this.focusedIndex = -1;
         this.clientSearchQuery = '';
@@ -29,14 +36,18 @@ export class SallaSearchableDropdown {
             }
         };
         this.handleTriggerKeyDown = (e) => {
-            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-                e.preventDefault();
-                if (!this.isOpen)
+            if (!this.isOpen) {
+                if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                    e.preventDefault();
                     this.open();
+                }
+                else if (e.key === 'Escape') {
+                    this.close();
+                }
+                return;
             }
-            else if (e.key === 'Escape') {
-                this.close();
-            }
+            // When open without a search input, the trigger keeps focus and drives item navigation.
+            this.navigateItems(e);
         };
         this.handleSearchInputChange = (e) => {
             const value = e.target.value;
@@ -47,34 +58,7 @@ export class SallaSearchableDropdown {
             this.focusedIndex = -1;
         };
         this.handleSearchKeyDown = (e) => {
-            const visibleItems = this.filteredItems;
-            const itemCount = visibleItems.length;
-            switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    this.focusedIndex = itemCount > 0
-                        ? (this.focusedIndex + 1) % itemCount
-                        : -1;
-                    this.scrollFocusedIntoView();
-                    break;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    this.focusedIndex = itemCount > 0
-                        ? (this.focusedIndex - 1 + itemCount) % itemCount
-                        : -1;
-                    this.scrollFocusedIntoView();
-                    break;
-                case 'Enter':
-                    e.preventDefault();
-                    if (this.focusedIndex >= 0 && this.focusedIndex < itemCount) {
-                        this.selectItem(visibleItems[this.focusedIndex]);
-                    }
-                    break;
-                case 'Escape':
-                    e.preventDefault();
-                    this.close();
-                    break;
-            }
+            this.navigateItems(e);
         };
     }
     connectedCallback() {
@@ -137,9 +121,11 @@ export class SallaSearchableDropdown {
             return;
         this.isOpen = true;
         this.focusedIndex = -1;
-        this.scrollableAncestor = this.findScrollableAncestor();
-        if (this.scrollableAncestor) {
-            this.scrollableAncestor.style.overflow = 'visible';
+        if (!this.keepParentScroll) {
+            this.scrollableAncestor = this.findScrollableAncestor();
+            if (this.scrollableAncestor) {
+                this.scrollableAncestor.style.overflow = 'visible';
+            }
         }
         this.dropdownOpened.emit();
         requestAnimationFrame(() => this.searchInputRef?.focus());
@@ -156,6 +142,36 @@ export class SallaSearchableDropdown {
         }
         this.dropdownClosed.emit();
     }
+    navigateItems(e) {
+        const visibleItems = this.filteredItems;
+        const itemCount = visibleItems.length;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.focusedIndex = itemCount > 0
+                    ? (this.focusedIndex + 1) % itemCount
+                    : -1;
+                this.scrollFocusedIntoView();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.focusedIndex = itemCount > 0
+                    ? (this.focusedIndex - 1 + itemCount) % itemCount
+                    : -1;
+                this.scrollFocusedIntoView();
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (this.focusedIndex >= 0 && this.focusedIndex < itemCount) {
+                    this.selectItem(visibleItems[this.focusedIndex]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this.close();
+                break;
+        }
+    }
     scrollFocusedIntoView() {
         if (this.focusedIndex < 0)
             return;
@@ -172,18 +188,18 @@ export class SallaSearchableDropdown {
     render() {
         const hasSelection = this.selectedItem != null;
         const listboxId = `${this.inputId}-listbox`;
-        return (h(Host, { key: '3545a75c07ae7c2a2c82ee54fa710f6f5d8bcfce', class: "s-searchable-dropdown" }, h("div", { key: '022fb98602228c5837cadb758f24f00956fafc22', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: '24e09036df24d45ce74799ec06b20b03df866866', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '94277d1659f2b22c96de02a77a37920eefff13ef', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: '077e0662f0570c1bf9339577e7699d75f9b337de', class: {
+        return (h(Host, { key: 'c529f2b61adbc38aa1e5403da6fdb985fe256baa', class: "s-searchable-dropdown" }, h("div", { key: '88ab96afd36421fdf965b79298fa14f435adbcef', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: '6ee8a2d0428e1347e36eabec32a3129897481abc', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '8473884ec18e73c72c79e7749264bd9c24c56ae9', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: 'bffbea7ff0cb9466c8a852a841a21ed8351ef92d', class: {
                 's-searchable-dropdown-trigger': true,
                 's-searchable-dropdown-trigger--disabled': this.disabled || this.loading,
                 's-searchable-dropdown-trigger--open': this.isOpen,
-            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: '134a95003036f1c8a7df91a06542178e6ec12c04', class: {
+            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: 'e3aee1ffe1b80a9ef21f4c9cca02de0a590b0825', class: {
                 'sicon-keyboard_arrow_down': true,
                 's-searchable-dropdown-trigger-icon': true,
                 's-searchable-dropdown-trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: 'be6eb6c94d4b73c27959722ccb4bc87722035d1c', class: {
+            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: '7a19f2d6847b3e0dda5e0ea509df91a2f48fa098', class: {
                 's-searchable-dropdown-panel': true,
                 's-searchable-dropdown-panel--up': this.dropUp,
-            }, ref: (el) => (this.panelRef = el) }, h("div", { key: 'd97ce90a0fd26043a45c1a45616f8fde621e8ac5', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: 'c7683e2dd873306e18afea983bb410827d883796', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: '64c4259b6c5453a9b1cb5985c58c65dd01ec139f', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId })), h("div", { key: '9748f507fcb884b520ffc847800cc3543546b8ce', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
+            }, ref: (el) => (this.panelRef = el) }, this.searchable && (h("div", { key: '601529f76a09762a57fe7b7663ecfa1505462367', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: 'f91e464e7efed3759837880b5a7593daa4f84ecb', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: 'f72a7e12d0a6e90bab3983258c9b08aa286bc897', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId }))), h("div", { key: '495aa88fc76d3d17956db7277cc98aff08b4c1af', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
     }
     renderListContent() {
         if (this.searching || this.loading) {
@@ -477,6 +493,46 @@ export class SallaSearchableDropdown {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "searchable": {
+                "type": "boolean",
+                "attribute": "searchable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "keepParentScroll": {
+                "type": "boolean",
+                "attribute": "keep-parent-scroll",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the dropdown will NOT override the nearest scrollable ancestor's\n`overflow` to `visible` while open. Use this when the host (e.g. a modal\nbody) needs to keep its own scrolling intact while the dropdown is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }