@salla.sa/twilight-components 2.14.444 → 2.14.445

package/dist/components/salla-gifting.js

@@ -6,13 +6,14 @@ import { a as anime } from './anime.es.js';
 import { I as IconArrowLeft } from './arrow-left.js';
 import { C as Cancel } from './cancel.js';
 import { S as SIGiftSharing } from './gift-sharing.js';
-import { d as defineCustomElement$b } from './salla-button2.js';
-import { d as defineCustomElement$a } from './salla-datetime-picker2.js';
-import { d as defineCustomElement$9 } from './salla-file-upload2.js';
-import { d as defineCustomElement$8 } from './salla-list-tile2.js';
-import { d as defineCustomElement$7 } from './salla-loading2.js';
-import { d as defineCustomElement$6 } from './salla-modal2.js';
-import { d as defineCustomElement$5 } from './salla-placeholder2.js';
+import { d as defineCustomElement$c } from './salla-button2.js';
+import { d as defineCustomElement$b } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$a } from './salla-file-upload2.js';
+import { d as defineCustomElement$9 } from './salla-list-tile2.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';
+import { d as defineCustomElement$5 } from './salla-searchable-dropdown2.js';
 import { d as defineCustomElement$4 } from './salla-skeleton2.js';
 import { d as defineCustomElement$3 } from './salla-slider2.js';
 import { d as defineCustomElement$2 } from './salla-tel-input2.js';
@@ -30,7 +31,7 @@ var Alert = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const sallaGiftingCss = ".s-gifting-steps-wrapper{transition:0.2s cubic-bezier(0.55, 0, 0.1, 1) 0s}.s-gifting-select{background-image:url(\"data:image/svg+xml;utf8,<svg version='1.1' fill='gray' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><title>keyboard_arrow_down</title><path d='M9.875 11.104l6.125 6.125 6.125-6.125 1.875 1.875-8 8-8-8z'></path></svg>\");background-size:24px;background-repeat:no-repeat;background-position:99%;appearance:none}[dir=rtl] .s-gifting-select{background-position:5px}.s-gifting-widget-vertical .s-list-tile-item [slot=title]{display:flex;align-items:center;gap:1.5rem}.s-gifting-widget-vertical .s-list-tile-item-content{width:100%}";
+const sallaGiftingCss = ".s-gifting-steps-wrapper{transition:0.2s cubic-bezier(0.55, 0, 0.1, 1) 0s}.s-gifting-select{background-image:url(\"data:image/svg+xml;utf8,<svg version='1.1' fill='gray' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><title>keyboard_arrow_down</title><path d='M9.875 11.104l6.125 6.125 6.125-6.125 1.875 1.875-8 8-8-8z'></path></svg>\");background-size:24px;background-repeat:no-repeat;background-position:99%;appearance:none}[dir=rtl] .s-gifting-select{background-position:5px}.s-gifting-widget-vertical .s-list-tile-item [slot=title]{display:flex;align-items:center;gap:1.5rem}.s-gifting-widget-vertical .s-list-tile-item-content{width:100%}.s-gifting-modal .s-searchable-dropdown-trigger{border-color:#d1d5db}.s-gifting-modal .s-searchable-dropdown-trigger:hover:not(.s-searchable-dropdown-trigger--disabled){border-color:#d1d5db}.s-gifting-modal .s-searchable-dropdown-trigger--open,.s-gifting-modal .s-searchable-dropdown-trigger:focus{border-color:var(--color-primary, #00897b);box-shadow:0 0 0 1px var(--color-primary, #00897b)}.s-gifting-modal .s-searchable-dropdown-trigger-placeholder{color:#000}";
 
 const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting extends HTMLElement {
     constructor() {
@@ -53,7 +54,17 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
         this.regions = [];
         this.selectedRegionId = undefined;
         this.isKSA = false;
+        this.selectedCountry = null;
+        this.selectedRegion = null;
+        this.displayedCities = [];
+        this.selectedCity = null;
+        this.searchingCities = false;
+        this.enableCityAjaxSearch = false;
+        this.citySearchQuery = '';
         this.step2Animated = false;
+        this.citySearchTimer = null;
+        this.citySearchCounter = 0;
+        this.locationRequestCounter = 0;
         this.showTextArea = false;
         /// Gift Form Data
         this.selectedImage = undefined;
@@ -67,6 +78,50 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
          * The form selector to be used to get the form data
          */
         this.formSelector = 'form.product-form, form.form--product-options';
+        this.handleCitySearch = (query) => {
+            this.citySearchQuery = query;
+            if (!this.enableCityAjaxSearch)
+                return;
+            if (this.citySearchTimer)
+                clearTimeout(this.citySearchTimer);
+            const requestId = ++this.citySearchCounter;
+            this.citySearchTimer = setTimeout(async () => {
+                this.searchingCities = true;
+                try {
+                    const cities = await this.fetchCities(query);
+                    if (requestId === this.citySearchCounter) {
+                        this.displayedCities = cities;
+                    }
+                }
+                catch (e) {
+                    if (requestId === this.citySearchCounter) {
+                        this.displayedCities = [];
+                    }
+                }
+                finally {
+                    if (requestId === this.citySearchCounter) {
+                        this.searchingCities = false;
+                    }
+                }
+            }, SallaGifting.CITY_SEARCH_DEBOUNCE_MS);
+        };
+        this.handleCitySelected = (city) => {
+            this.selectedCity = city;
+            this.receiverCity = String(city.id);
+            this.clearError('receiver.city_id');
+        };
+        this.handleCityDropdownClosed = () => {
+            this.citySearchQuery = '';
+            if (this.citySearchTimer) {
+                clearTimeout(this.citySearchTimer);
+                this.citySearchTimer = null;
+            }
+            ++this.citySearchCounter;
+            this.displayedCities = this.gift?.cities ?? [];
+            this.searchingCities = false;
+        };
+        this.handleCountryDropdownClosed = () => { };
+        this.handleRegionDropdownClosed = () => { };
         salla.lang.onLoaded(() => {
             this.selectImageOrUpload = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
             this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_for_your_gift');
@@ -340,24 +395,58 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
         this.receiverName = event.target.value;
         this.clearError('receiver.name');
     }
-    handleReceiverCity(event) {
-        this.receiverCity = event.target.value;
-        this.clearError('receiver.city_id');
+    resetCityState() {
+        if (this.citySearchTimer) {
+            clearTimeout(this.citySearchTimer);
+            this.citySearchTimer = null;
+        }
+        ++this.citySearchCounter;
+        this.gift = { ...this.gift, cities: [] };
+        this.displayedCities = [];
+        this.receiverCity = undefined;
+        this.selectedCity = null;
+        this.citySearchQuery = '';
+        this.searchingCities = false;
+        this.enableCityAjaxSearch = false;
+    }
+    setInitialCities(cities) {
+        this.gift = { ...this.gift, cities };
+        this.displayedCities = cities;
+        this.enableCityAjaxSearch = cities.length >= SallaGifting.CITY_AJAX_THRESHOLD;
+    }
+    async fetchCities(query = '') {
+        if (!this.selectedCountryId)
+            return [];
+        if (this.isKSA && !this.selectedRegionId)
+            return [];
+        const params = [
+            'for_branch=0',
+            `country_id=${this.selectedCountryId}`,
+        ];
+        if (this.isKSA && this.selectedRegionId) {
+            params.push(`region_id=${this.selectedRegionId}`);
+        }
+        if (query?.trim()) {
+            params.push(`query=${encodeURIComponent(query.trim())}`);
+        }
+        const response = await salla.api.request(`shipping/cities?${params.join('&')}`);
+        return response?.data ?? [];
     }
-    async handleCountryChange(event) {
-        const countryId = Number(event.target.value);
+    async handleCountrySelected(country) {
+        const countryId = country?.id;
+        this.selectedCountry = country ?? null;
         this.selectedCountryId = countryId;
+        this.selectedCountryCode = country?.country_code;
+        this.isKSA = country?.country_code === 'SA';
         this.clearError('receiver.country');
-        // Find the selected country and store its country_code
-        const selectedCountry = this.gift?.countries?.find(country => country.id == countryId);
-        this.selectedCountryCode = selectedCountry?.country_code;
-        this.isKSA = selectedCountry?.country_code === 'SA';
-        // Reset region and city
+        // Reset region and city; bump request counter so in-flight loads from a
+        // previous country/region selection get discarded when they resolve.
         this.regions = [];
         this.selectedRegionId = undefined;
-        this.gift = { ...this.gift, cities: [] };
-        this.receiverCity = undefined;
-        if (!countryId || this.gift?.countries?.length === 0) {
+        this.selectedRegion = null;
+        this.resetCityState();
+        const requestId = ++this.locationRequestCounter;
+        if (!countryId) {
             this.selectedCountryCode = undefined;
             this.isKSA = false;
             this.setWrapperHeight(2, 0, 0);
@@ -369,16 +458,22 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
             this.setWrapperHeight(2, 0, 0);
             try {
                 const response = await salla.api.request(`shipping/countries/${countryId}/regions`);
+                if (requestId !== this.locationRequestCounter)
+                    return;
                 if (response && response.data) {
                     this.regions = response.data;
                 }
             }
             catch (error) {
+                if (requestId !== this.locationRequestCounter)
+                    return;
                 console.error('Error fetching regions:', error);
             }
             finally {
-                this.loadingRegions = false;
-                this.setWrapperHeight(2, 0, 0);
+                if (requestId === this.locationRequestCounter) {
+                    this.loadingRegions = false;
+                    this.setWrapperHeight(2, 0, 0);
+                }
             }
         }
         else {
@@ -386,41 +481,51 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
             this.loadingCities = true;
             this.setWrapperHeight(2, 0, 0);
             try {
-                const response = await salla.api.request(`shipping/cities?for_branch=0&country_id=${countryId}`);
-                if (response && response.data) {
-                    this.gift = { ...this.gift, cities: response.data };
-                }
+                const cities = await this.fetchCities();
+                if (requestId !== this.locationRequestCounter)
+                    return;
+                this.setInitialCities(cities);
             }
             catch (error) {
+                if (requestId !== this.locationRequestCounter)
+                    return;
                 console.error('Error fetching cities:', error);
             }
             finally {
-                this.loadingCities = false;
+                if (requestId === this.locationRequestCounter) {
+                    this.loadingCities = false;
+                }
             }
         }
     }
-    async handleRegionChange(event) {
-        const regionId = Number(event.target.value);
+    async handleRegionSelected(region) {
+        const regionId = region?.id;
+        this.selectedRegion = region ?? null;
         this.selectedRegionId = regionId;
         this.clearError('receiver.region');
-        // Reset city when region changes
-        this.gift = { ...this.gift, cities: [] };
-        this.receiverCity = undefined;
+        // Reset city when region changes; bump request counter so any earlier
+        // in-flight city fetch (for a previous region) is discarded on resolve.
+        this.resetCityState();
+        const requestId = ++this.locationRequestCounter;
         if (!regionId)
             return;
         this.loadingCities = true;
         try {
-            const response = await salla.api.request(`shipping/cities?for_branch=0&country_id=${this.selectedCountryId}&region_id=${regionId}`);
-            if (response && response.data) {
-                this.gift = { ...this.gift, cities: response.data };
-            }
+            const cities = await this.fetchCities();
+            if (requestId !== this.locationRequestCounter)
+                return;
+            this.setInitialCities(cities);
         }
         catch (error) {
+            if (requestId !== this.locationRequestCounter)
+                return;
             console.error('Error fetching cities:', error);
         }
         finally {
-            this.loadingCities = false;
-            this.setWrapperHeight(2, 0, 0);
+            if (requestId === this.locationRequestCounter) {
+                this.loadingCities = false;
+                this.setWrapperHeight(2, 0, 0);
+            }
         }
     }
     handleUploadImage(img) {
@@ -565,7 +670,7 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
     }
     render() {
         return [
-            h("div", { key: '2bc4ff1b223c9b1f2e50e36c7f6e6f0448f5a51d' }, h("salla-list-tile", { key: 'b5cf74b6d00c292a1c654c695d316a0a34e70c30', class: this.generateClass() }, h("div", { key: '2e229e46039a9bbf071bc65534733c9da61545f8', slot: "title" }, this.vertical ? h("span", { innerHTML: SIGiftSharing }) : '', h("h3", { key: 'b067244c213dd0c3c64f795f07b4c27f57c661f5' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'a8804b65526bfde36bbb82302d667bc10052ff4b', slot: "subtitle" }, h("div", { key: 'cf2ca350ab3884baa192ce1c043719eb8f9a0120' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'f68182d4324c4b56893b63e046e4298c519e449e', slot: "action" }, h("salla-button", { key: '6cf71ec0311dfe7804f4634ae1203e0ae65150be', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '9b00d0c0c7a594e7e9635a79a6b4a472da73ebe3', name: "widget-btn-content" }, h("div", { key: 'a73ed9d6322c4484180f68e7c8fb7a3b4e5bdb8a', class: "s-gifting-widget-action-content" }, h("span", { key: '0ce7ec753ab1ec30269127a8426a36d55d983a6e', innerHTML: SIGiftSharing }), " \u00A0", h("span", { key: 'ae35a5669a30e7abb61e5d540224c2be5baae82a' }, this.sectionBtnText)))))), h("salla-modal", { key: 'dee19984ecc71f6e10c330121361359d00408448', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '10eee2481652b157c44b16d34097ffcce9325d81', slot: "loading" }, h("div", { key: '325446006a0bf5d6d480c8935912fe976ccd453d', class: "s-gifting-skeleton" }, h("div", { key: 'f256cc302b946906262450f0bb023912d034aa13', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '75bf0e81841a4c41e4105f19bd3e4fbf67ece325', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '64661720e2f94f6d8b86087d3a03538a1a419202', class: "s-gifting-modal-title" }, h("div", { key: 'd5000d6903f5a7b61beb6a0a88291953e1344ba3', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '07efd33b877468df617bab4cd2f1b73e73f2d284', height: '15px', width: '150px' })))), h("div", { key: '6fb9d9abf7e211a6ecc45ee50283d37d1755b220', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: 'ed76848f4c017334dea4f12c07ec6556646c397f', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'cfe3e107536dac9e5b1524770eb6990ab3b6460b', height: '230px' }), h("salla-skeleton", { key: 'a35af25d98f5758bf442759841536fed09f6cdd2', height: '10px', width: '150px' }), h("salla-skeleton", { key: '6950704fb24a07807542723f2752b6a734090d42', height: '30px' }), h("salla-skeleton", { key: 'bd65f98a07ee8d041434b9b475ce4c355318f586', height: '40px' })))), h("slot", { key: 'e946b5c7a4146d0118d321d860d332d17c3f931e', name: "header" }), !!this.hasError ?
+            h("div", { key: 'db700f9ec96a6974f3b815bb017ebe97ae8fe5c0' }, h("salla-list-tile", { key: '1e2fd1c0b375c85fcd4af1ea071c36879e6913c5', class: this.generateClass() }, h("div", { key: 'a9d02c933bc13bf8765e7e91ce08b2c9495954e5', slot: "title" }, this.vertical ? h("span", { innerHTML: SIGiftSharing }) : '', h("h3", { key: '56bd850368806c6ed5770ea5f6b0339749a77dfa' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'fbb4940fd3e3578f2f5a479d9d44be8dfbda7e43', slot: "subtitle" }, h("div", { key: 'fb7e8532984fbfc6fd61c55a6d44d7cdbb4bc9a2' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '04f27f1ddbfa0b06be111b6c3176fbda5ea6d43a', slot: "action" }, h("salla-button", { key: 'fe71a1a773e5275ede7d1b3ea535c330688028b7', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: 'd62127d30254df2d8add55e0e1dbcfefb686e359', name: "widget-btn-content" }, h("div", { key: '5ddbb695af142baf3bb6986627f97a7a7607eb31', class: "s-gifting-widget-action-content" }, h("span", { key: '7820fb6abd9d7a9c1035c0f80191a3ff2a4c5fe8', innerHTML: SIGiftSharing }), " \u00A0", h("span", { key: '2cfc69862d3d087375efaed3bcec0ff0c1587989' }, this.sectionBtnText)))))), h("salla-modal", { key: '32c19391248ba6186f43fea59493171079e7bf07', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'e4b5829416314f25793158dae0c530b8057b4085', slot: "loading" }, h("div", { key: '6ee873add5868f105b7ec7291c2a8c8fc033c588', class: "s-gifting-skeleton" }, h("div", { key: '40aae38f8b2d62b434394811a3ef6d8bc00f6f32', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'a652cd74a16d0db662ea4a518ebfab366a3c3899', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'edb4a1477893246e98207aeba7bfb5af686f20b9', class: "s-gifting-modal-title" }, h("div", { key: '83ef942b15450cc59ad32d8c5b3ba43a32bcb29c', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'd9041c777a2fa0aa7ffc752958c7441916a02f85', height: '15px', width: '150px' })))), h("div", { key: 'fe3bb9dad01becba87486c4886037fd67b059919', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '08bd8304b66264b70f6df68e64da3560a1f75461', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'bbea0d7ff0c846897af2ef5d3696b252a2f4e662', height: '230px' }), h("salla-skeleton", { key: '8cb1fde02e31a1accabd2e26409983e7ba56eeb1', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'f80a986b953278bac41505506adf8d611566a167', height: '30px' }), h("salla-skeleton", { key: 'f7eccce69b619de385872642e1fb62b2cf6c3082', height: '40px' })))), h("slot", { key: 'd299e46040193b441f8171d05e0048849e3df8d5', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
@@ -578,14 +683,14 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
                             h("span", { class: "s-gifting-error" }, this.errors['sender_name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['receiver.name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.mobile'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['receiver.mobile']) : ''), this.isPhysical() &&
-                            h("div", { class: this.step2ItemClass(this.errors?.['receiver.country'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverCountryFieldLabel), h("select", { name: "country", class: "s-form-control", onChange: (event) => this.handleCountryChange(event), required: true }, h("option", { value: "" }, this.selectCountry), this.gift?.countries?.map((country) => (h("option", { value: country.id }, country.name)))), this.errors && this.errors['receiver.country'] ?
+                            h("div", { class: this.step2ItemClass(this.errors?.['receiver.country'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-country` }, this.receiverCountryFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCountry, items: this.gift?.countries ?? [], selectedItem: this.selectedCountry, disabled: !this.gift?.countries?.length, required: true, inputId: `${this.hostId}-country`, searchable: false, keepParentScroll: true, onItemSelected: (e) => this.handleCountrySelected(e.detail), onDropdownClosed: () => this.handleCountryDropdownClosed() }), this.errors && this.errors['receiver.country'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.country']) : ''), this.isPhysical() && this.isKSA &&
-                            h("div", { class: this.step2ItemClass(this.errors?.['receiver.region'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverRegionFieldLabel), h("select", { name: "region", class: "s-form-control", onChange: (event) => this.handleRegionChange(event), disabled: this.loadingRegions }, h("option", { value: "", selected: true }, this.loadingRegions ? salla.lang.get('common.elements.loading') : this.selectRegion), this.regions?.map((region) => (h("option", { value: region.id }, region.name)))), this.errors && this.errors['receiver.region'] ?
+                            h("div", { class: this.step2ItemClass(this.errors?.['receiver.region'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-region` }, this.receiverRegionFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectRegion, items: this.regions ?? [], selectedItem: this.selectedRegion, loading: this.loadingRegions, disabled: this.loadingRegions || !this.regions?.length, required: true, inputId: `${this.hostId}-region`, searchable: false, keepParentScroll: true, onItemSelected: (e) => this.handleRegionSelected(e.detail), onDropdownClosed: () => this.handleRegionDropdownClosed() }), this.errors && this.errors['receiver.region'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.region']) : ''), this.isPhysical() &&
-                            h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverCityFieldLabel), h("select", { name: "city", "aria-label": salla.lang.get('blocks.buy_as_gift.select_city'), class: "s-form-control", onChange: (event) => this.handleReceiverCity(event), disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId) }, h("option", { value: "", selected: true }, this.loadingCities ? salla.lang.get('common.elements.loading') : this.selectCity), this.gift?.cities?.map((city) => (h("option", { value: city.id }, city.name)))), this.errors && this.errors['receiver.city_id'] ?
+                            h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-city` }, this.receiverCityFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCity, items: this.displayedCities, selectedItem: this.selectedCity, loading: this.loadingCities, searching: this.searchingCities, disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId), required: true, inputId: `${this.hostId}-city`, searchQuery: this.citySearchQuery, clientSearch: !this.enableCityAjaxSearch, dropUp: true, keepParentScroll: true, onItemSelected: (e) => this.handleCitySelected(e.detail), onSearchInput: (e) => this.handleCitySearch(e.detail), onDropdownClosed: () => this.handleCityDropdownClosed() }), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() &&
                             h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo)), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, h("a", { href: "#!", innerHTML: IconArrowLeft, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: '579cbbcc59818051def887c38e4d0eed6e690737', name: "footer" })))
+                    ], h("slot", { key: 'bd8cd1628ed4282b177f0ddcd5fb93289c47b4d6', name: "footer" })))
         ];
     }
     static get style() { return sallaGiftingCss; }
@@ -641,6 +746,13 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
         "regions": [32],
         "selectedRegionId": [32],
         "isKSA": [32],
+        "selectedCountry": [32],
+        "selectedRegion": [32],
+        "displayedCities": [32],
+        "selectedCity": [32],
+        "searchingCities": [32],
+        "enableCityAjaxSearch": [32],
+        "citySearchQuery": [32],
         "parsedFormData": [32],
         "showTextArea": [32],
         "selectedImage": [32],
@@ -662,11 +774,13 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
         "close": [64],
         "goToStep2": [64]
     }]);
+SallaGifting$1.CITY_AJAX_THRESHOLD = 400;
+SallaGifting$1.CITY_SEARCH_DEBOUNCE_MS = 100;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-gifting", "salla-button", "salla-datetime-picker", "salla-file-upload", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-slider", "salla-tel-input"];
+    const components = ["salla-gifting", "salla-button", "salla-datetime-picker", "salla-file-upload", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-searchable-dropdown", "salla-skeleton", "salla-slider", "salla-tel-input"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-gifting":
             if (!customElements.get(tagName)) {
@@ -675,35 +789,40 @@ function defineCustomElement$1() {
             break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "salla-datetime-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "salla-file-upload":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "salla-list-tile":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "salla-modal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "salla-placeholder":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-searchable-dropdown":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

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

@@ -39,6 +39,7 @@ const SallaOrderEdit$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderEdit e
         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;
@@ -81,6 +82,9 @@ const SallaOrderEdit$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderEdit e
         };
         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) {
@@ -434,6 +438,13 @@ const SallaOrderEdit$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderEdit e
             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);
@@ -483,7 +494,7 @@ const SallaOrderEdit$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderEdit e
         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) {
@@ -491,7 +502,7 @@ const SallaOrderEdit$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderEdit e
                     }
                     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('/ ');
@@ -500,7 +511,7 @@ const SallaOrderEdit$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderEdit e
             ? 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) {
@@ -540,7 +551,8 @@ const SallaOrderEdit$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderEdit e
         "addProductLoading": [32],
         "addProductConfirmLoading": [32],
         "mobileProductsModalMounted": [32],
-        "isMobileViewport": [32]
+        "isMobileViewport": [32],
+        "isRTL": [32]
     }, [[0, "orderEditProductSelected", "handleProductSelected"], [0, "orderItemUpdated", "handleItemUpdated"], [0, "orderItemRemoved", "handleItemRemoved"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/salla-searchable-dropdown2.js

@@ -23,6 +23,13 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
         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 = '';
@@ -36,14 +43,18 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
             }
         };
         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;
@@ -54,34 +65,7 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
             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() {
@@ -144,9 +128,11 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
             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());
@@ -163,6 +149,36 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
         }
         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;
@@ -179,18 +195,18 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
     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) {
@@ -231,6 +247,8 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
         "searchQuery": [1, "search-query"],
         "clientSearch": [4, "client-search"],
         "dropUp": [4, "drop-up"],
+        "searchable": [4],
+        "keepParentScroll": [4, "keep-parent-scroll"],
         "isOpen": [32],
         "focusedIndex": [32],
         "clientSearchQuery": [32]

package/dist/esm/{filepond-BFX6xxhJ.js → filepond-D3RXwxDJ.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjquqEh1.js';
+import { d as getDefaultExportFromCjs } from './index-DNtvpIPH.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {