@salla.sa/twilight-components 2.14.427 → 2.14.429

package/dist/cjs/{salla-bullet-delivery.cjs.entry.js → salla-bullet-delivery_2.cjs.entry.js}

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-BEj17I33.js');
-var search = require('./search-c7Aa7lM9.js');
-var location = require('./location-DIyESLuI.js');
+var index = require('./index-D3xsx646.js');
 var keyboard_arrow_right = require('./keyboard_arrow_right-BayM_Il2.js');
+var location = require('./location-DIyESLuI.js');
+var search = require('./search-c7Aa7lM9.js');
 
 /**
  * API Service for salla-bullet-delivery component
@@ -26,6 +26,19 @@ async function withApiErrorHandling(fn, fallback, logLabel) {
         return fallback;
     }
 }
+const apiCache = new Map();
+const CACHE_TTL = 5 * 60 * 1000;
+function getCached(key) {
+    const entry = apiCache.get(key);
+    if (!entry || Date.now() - entry.timestamp > CACHE_TTL) {
+        apiCache.delete(key);
+        return null;
+    }
+    return entry.data;
+}
+function setCache(key, data) {
+    apiCache.set(key, { data, timestamp: Date.now() });
+}
 /** Uses country code from API (e.g. 'SA'). */
 const isSaudiArabia = (countryCode) => String(countryCode).toUpperCase() === 'SA';
 /**
@@ -37,53 +50,94 @@ const bulletDeliveryAPI = {
      * Get available countries from Salla shipping API
      * @param forBranch - when true, use for_branch=1 (e.g. for pickup/branches tab)
      */
-    async getCountries(forBranch = false) {
-        return withApiErrorHandling(async () => {
-            const data = (await salla.api.request("shipping/countries", { params: { for_branch: forBranch ? 1 : 0 } }))?.data ?? [];
+    async getCountries(forBranch = false, query) {
+        const cacheKey = !query?.trim() ? `countries_${forBranch ? 1 : 0}` : null;
+        if (cacheKey) {
+            const cached = getCached(cacheKey);
+            if (cached)
+                return cached;
+        }
+        const result = await withApiErrorHandling(async () => {
+            const params = { for_branch: forBranch ? 1 : 0 };
+            if (forBranch) {
+                params.for_allocation = 1;
+            }
+            if (query?.trim())
+                params.query = query.trim();
+            const data = (await salla.api.request("shipping/countries", { params }))?.data ?? [];
             return data.map((c) => ({ id: c.id, code: c.code, name: c.name, has_regions: isSaudiArabia(c.code) }));
         }, [], 'Error getting countries');
+        if (cacheKey && result.length > 0)
+            setCache(cacheKey, result);
+        return result;
     },
     /**
      * Get regions for a country from Salla shipping API
      * Endpoint: GET /shipping/countries/<COUNTRY_ID>/region
      */
-    async getRegions(countryId) {
+    async getRegions(countryId, query) {
         if (!validId(countryId)) {
             console.warn(`${API_LOG_PREFIX}: getRegions called without valid country_id`);
             return [];
         }
-        return withApiErrorHandling(async () => {
-            const data = (await salla.api.request(`shipping/countries/${countryId}/regions`))?.data ?? [];
+        const cacheKey = !query?.trim() ? `regions_${countryId}` : null;
+        if (cacheKey) {
+            const cached = getCached(cacheKey);
+            if (cached)
+                return cached;
+        }
+        const result = await withApiErrorHandling(async () => {
+            const params = {};
+            if (query?.trim())
+                params.query = query.trim();
+            const data = (await salla.api.request(`shipping/countries/${countryId}/regions`, { params }))?.data ?? [];
             return data.map((r) => ({ id: r.id, name: r.name, code: r.code, country_id: Number(countryId) }));
         }, [], 'Error fetching regions');
+        if (cacheKey && result.length > 0)
+            setCache(cacheKey, result);
+        return result;
     },
     /**
      * Get cities from Salla shipping API
      * @param regionId - Optional; when provided (e.g. for SA), cities are filtered by region
      */
-    async getCities(countryId, regionId) {
+    async getCities(countryId, regionId, query) {
         if (!validId(countryId)) {
             console.warn(`${API_LOG_PREFIX}: getCities called without valid country_id`);
             return [];
         }
-        return withApiErrorHandling(async () => {
+        const cacheKey = !query?.trim() ? `cities_${countryId}_${regionId || 'all'}` : null;
+        if (cacheKey) {
+            const cached = getCached(cacheKey);
+            if (cached)
+                return cached;
+        }
+        const result = await withApiErrorHandling(async () => {
             const params = { for_branch: 0, country_id: countryId };
             if (regionId)
                 params.region_id = regionId;
+            if (query?.trim())
+                params.query = query.trim();
             const data = (await salla.api.request("shipping/cities", { params }))?.data ?? [];
             return data.map((c) => ({ id: c.id, name: c.name, country_id: countryId, ...(c.region_id != null && { region_id: c.region_id }) }));
         }, [], 'Error fetching cities');
+        if (cacheKey && result.length > 0)
+            setCache(cacheKey, result);
+        return result;
     },
     /**
      * Get districts from Salla shipping API
      */
-    async getDistricts(cityId) {
+    async getDistricts(cityId, query) {
         if (!validId(cityId)) {
             console.warn(`${API_LOG_PREFIX}: getDistricts called without valid city_id`);
             return [];
         }
         return withApiErrorHandling(async () => {
-            const raw = (await salla.api.request("shipping/districts", { params: { for_branch: 0, city_id: cityId } }))?.data;
+            const params = { for_branch: 0, city_id: cityId };
+            if (query?.trim())
+                params.query = query.trim();
+            const raw = (await salla.api.request("shipping/districts", { params }))?.data;
             const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.districts) ? raw.districts : []);
             return list.map((d) => ({ id: d.id, name: d.name, name_en: d.name_en, city_id: cityId }));
         }, [], 'Error fetching districts');
@@ -95,7 +149,14 @@ const bulletDeliveryAPI = {
         }, [], 'Error fetching user addresses');
     },
     async getBranches({ query, lat, lng, country_id, per_page = 20 } = {}) {
-        return withApiErrorHandling(async () => {
+        const hasSearchParams = query?.trim()?.length >= 2 || lat || lng;
+        const cacheKey = !hasSearchParams && country_id ? `branches_${country_id}` : null;
+        if (cacheKey) {
+            const cached = getCached(cacheKey);
+            if (cached)
+                return cached;
+        }
+        const result = await withApiErrorHandling(async () => {
             const params = { per_page };
             if (query?.trim().length >= 2)
                 params.query = query;
@@ -108,6 +169,9 @@ const bulletDeliveryAPI = {
             const res = await salla.api.request("branches", { params });
             return (Array.isArray(res?.data) ? res.data : []);
         }, [], 'Error fetching branches');
+        if (cacheKey && result.length > 0)
+            setCache(cacheKey, result);
+        return result;
     },
     async saveAddressLocation(payload) {
         return withApiErrorHandling(async () => {
@@ -119,7 +183,7 @@ const bulletDeliveryAPI = {
     },
     async setDeliveryScope(scopeId) {
         return withApiErrorHandling(async () => {
-            await salla.scope.change({ id: scopeId });
+            await salla.api.withoutNotifier(() => salla.scope.change({ id: scopeId }));
             salla.storage.set("scope", { ...(salla.storage.get("scope") || {}), id: scopeId });
             return true;
         }, false, 'Error setting delivery scope');
@@ -127,7 +191,7 @@ const bulletDeliveryAPI = {
     async allocateScope(payload) {
         const errMsg = (d) => d?.error?.message ?? d?.message ?? 'Failed to allocate scope';
         try {
-            const response = await salla.api.request("scopes/allocation", payload, 'post');
+            const response = await salla.api.withoutNotifier(() => salla.api.request("scopes/allocation", payload, 'post'));
             // SDK resolves with { data } and throws on non-2xx; any resolved value is success
             const data = response?.data ?? response;
             return { success: true, data: data };
@@ -139,6 +203,9 @@ const bulletDeliveryAPI = {
         }
     },
 };
+function clearApiCache() {
+    apiCache.clear();
+}
 
 /**
  * Helper functions for salla-bullet-delivery component
@@ -246,16 +313,10 @@ const GEO_ERROR_MESSAGES = {
 };
 const getGeolocationErrorMessage = (errorCode) => GEO_ERROR_MESSAGES[errorCode] ?? 'An error occurred while detecting location';
 
-var Store = `<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M1.14453 5.83032L1.14453 9.16486C1.14453 11.0511 1.14453 11.9943 1.73032 12.5803C2.3161 13.1663 3.25891 13.1663 5.14453 13.1663L9.14453 13.1663C11.0301 13.1663 11.9729 13.1663 12.5587 12.5803C13.1445 11.9943 13.1445 11.0511 13.1445 9.16486V5.83032"
-        stroke="currentcolor" stroke-linecap="round" />
-    <path
-        d="M9.14453 10.1619C8.68846 10.5667 7.9624 10.8285 7.14453 10.8285C6.32666 10.8285 5.60059 10.5667 5.14453 10.1619"
-        stroke="currentcolor" stroke-linecap="round" />
+var GetDirections = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-        d="M5.90256 4.44533C5.71455 5.12426 5.03086 6.29542 3.73185 6.46516C2.58488 6.61502 1.71497 6.11437 1.49277 5.90504C1.24779 5.7353 0.689441 5.19216 0.552703 4.85269C0.415966 4.51322 0.575492 3.77771 0.689441 3.47785L1.14495 2.15892C1.25615 1.82765 1.51646 1.04411 1.78334 0.779094C2.05022 0.514073 2.59054 0.502543 2.81294 0.502543L7.48329 0.502543C8.68543 0.519525 11.3139 0.491824 11.8335 0.502545C12.3532 0.513266 12.6654 0.948828 12.7565 1.13553C13.5318 3.01341 13.8333 4.08889 13.8333 4.54717C13.7321 5.03605 13.3133 5.95787 11.8335 6.36332C10.2956 6.7847 9.42363 5.96509 9.15007 5.65043M5.27015 5.65044C5.48665 5.91635 6.16578 6.45158 7.15029 6.46516C8.1348 6.47873 8.98485 5.79188 9.28681 5.44676C9.37227 5.34492 9.55687 5.04279 9.7483 4.44533"
-        stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" />
+        d="M7.94798 3.19336C11.1309 2.1083 12.7223 1.56578 13.5783 2.42174C14.4342 3.27771 13.8917 4.86914 12.8066 8.05201L12.0678 10.2195C11.2344 12.6639 10.8178 13.8861 10.131 13.9872C9.94631 14.0144 9.75517 13.9981 9.57248 13.9394C8.89297 13.7212 8.53377 12.4326 7.81538 9.8553C7.65604 9.28364 7.57637 8.99781 7.39494 8.7795C7.34228 8.71614 7.28386 8.65772 7.2205 8.60506C7.00219 8.42363 6.71636 8.34396 6.1447 8.18462C3.56741 7.46623 2.27876 7.10703 2.0606 6.42752C2.00195 6.24483 1.98558 6.05369 2.01277 5.86903C2.11392 5.18221 3.33613 4.76556 5.78054 3.93225L7.94798 3.19336Z"
+        stroke="#555555" stroke-width="1.2" />
 </svg>
     `;
 
@@ -309,17 +370,30 @@ var MiniMap = `<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns
     </svg>
     `;
 
-var GetDirections = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+var Store = `<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-        d="M7.94798 3.19336C11.1309 2.1083 12.7223 1.56578 13.5783 2.42174C14.4342 3.27771 13.8917 4.86914 12.8066 8.05201L12.0678 10.2195C11.2344 12.6639 10.8178 13.8861 10.131 13.9872C9.94631 14.0144 9.75517 13.9981 9.57248 13.9394C8.89297 13.7212 8.53377 12.4326 7.81538 9.8553C7.65604 9.28364 7.57637 8.99781 7.39494 8.7795C7.34228 8.71614 7.28386 8.65772 7.2205 8.60506C7.00219 8.42363 6.71636 8.34396 6.1447 8.18462C3.56741 7.46623 2.27876 7.10703 2.0606 6.42752C2.00195 6.24483 1.98558 6.05369 2.01277 5.86903C2.11392 5.18221 3.33613 4.76556 5.78054 3.93225L7.94798 3.19336Z"
-        stroke="#555555" stroke-width="1.2" />
+        d="M1.14453 5.83032L1.14453 9.16486C1.14453 11.0511 1.14453 11.9943 1.73032 12.5803C2.3161 13.1663 3.25891 13.1663 5.14453 13.1663L9.14453 13.1663C11.0301 13.1663 11.9729 13.1663 12.5587 12.5803C13.1445 11.9943 13.1445 11.0511 13.1445 9.16486V5.83032"
+        stroke="currentcolor" stroke-linecap="round" />
+    <path
+        d="M9.14453 10.1619C8.68846 10.5667 7.9624 10.8285 7.14453 10.8285C6.32666 10.8285 5.60059 10.5667 5.14453 10.1619"
+        stroke="currentcolor" stroke-linecap="round" />
+    <path
+        d="M5.90256 4.44533C5.71455 5.12426 5.03086 6.29542 3.73185 6.46516C2.58488 6.61502 1.71497 6.11437 1.49277 5.90504C1.24779 5.7353 0.689441 5.19216 0.552703 4.85269C0.415966 4.51322 0.575492 3.77771 0.689441 3.47785L1.14495 2.15892C1.25615 1.82765 1.51646 1.04411 1.78334 0.779094C2.05022 0.514073 2.59054 0.502543 2.81294 0.502543L7.48329 0.502543C8.68543 0.519525 11.3139 0.491824 11.8335 0.502545C12.3532 0.513266 12.6654 0.948828 12.7565 1.13553C13.5318 3.01341 13.8333 4.08889 13.8333 4.54717C13.7321 5.03605 13.3133 5.95787 11.8335 6.36332C10.2956 6.7847 9.42363 5.96509 9.15007 5.65043M5.27015 5.65044C5.48665 5.91635 6.16578 6.45158 7.15029 6.46516C8.1348 6.47873 8.98485 5.79188 9.28681 5.44676C9.37227 5.34492 9.55687 5.04279 9.7483 4.44533"
+        stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" />
 </svg>
     `;
 
-const sallaBulletDeliveryCss = "@supports (interpolate-size: allow-keywords) and (block-size: calc-size(auto, size)) {\n  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body, .s-bullet-delivery-inner {\n    @apply [interpolate-size:allow-keywords];\n  }\n  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body {\n    @apply [overflow:clip] [transition:block-size_500ms_ease];\n  }\n  .s-bullet-delivery-inner {\n    @apply [overflow:clip] [transition:block-size_500ms_ease];\n    block-size: calc-size(auto, size);\n  }\n}\n\n@keyframes s-bullet-delivery-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}";
+const sallaBulletDeliveryCss = "@supports (interpolate-size: allow-keywords) and (block-size: calc-size(auto, size)) {\n  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body, .s-bullet-delivery-inner {\n    @apply [interpolate-size:allow-keywords];\n  }\n  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body {\n    @apply [overflow:clip] [transition:block-size_500ms_ease];\n  }\n  .s-bullet-delivery-inner {\n    @apply [overflow:clip] [transition:block-size_500ms_ease];\n    block-size: calc-size(auto, size);\n  }\n}\n\n/* Allow searchable dropdown popover to paint outside the modal body */\n.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {\n  overflow: visible !important;\n}\n\n@keyframes s-bullet-delivery-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}";
 
 const BRANCH_SEARCH_DEBOUNCE_MS = 1000;
 const GEOLOCATION_TIMEOUT = 10000;
+const DEBUG_KEY = 'salla-bullet-delivery-debug';
+const OVERRIDE_IP_KEY = 'salla-bullet-delivery-override-ip';
+function log(message, data) {
+    if (localStorage.getItem(DEBUG_KEY)) {
+        data !== undefined ? console.log(message, data) : console.log(message);
+    }
+}
 const SallaBulletDelivery = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -332,6 +406,11 @@ const SallaBulletDelivery = class {
         this.pendingCartSubmitPromise = null;
         this.cartSubmitConfirmationPending = false;
         this.branchSearchDebounceTimer = null;
+        this.countrySearchTimer = null;
+        this.regionSearchTimer = null;
+        this.citySearchTimer = null;
+        this.districtSearchTimer = null;
+        this.citySearchCounter = 0;
         this.componentReady = false;
         this.pendingOpen = false;
         this.tabChanging = false;
@@ -358,7 +437,6 @@ const SallaBulletDelivery = class {
         /** True after saved addresses have been loaded (lazy: only when address tab is shown). */
         this.savedAddressesLoaded = false;
         // Core state
-        this.loading = true;
         this.activeTab = "address";
         this.isLoggedIn = false;
         this.viewMode = "main";
@@ -384,6 +462,7 @@ const SallaBulletDelivery = class {
         this.selectedBranch = null;
         this.branchSearchQuery = "";
         // Loading states
+        this.loadingCountries = false;
         this.loadingCities = false;
         this.loadingDistricts = false;
         this.loadingBranches = false;
@@ -392,11 +471,95 @@ const SallaBulletDelivery = class {
         this.savingAddress = false;
         this.loadingSavedAddresses = false;
         this.showCartWillBeClearedBanner = false;
+        // Searchable dropdown state
+        this.countrySearchQuery = '';
+        this.regionSearchQuery = '';
+        this.citySearchQuery = '';
+        this.districtSearchQuery = '';
+        this.searchingCountries = false;
+        this.searchingRegions = false;
+        this.searchingCities = false;
+        this.searchingDistricts = false;
+        this.displayedCountries = [];
+        this.displayedRegions = [];
+        this.displayedCities = [];
+        this.displayedDistricts = [];
         /** Shown when scopes/allocation returns 422 (address outside delivery coverage). Only on delivery tab. */
         this.allocationOutOfCoverageMessage = null;
         this.newAddressForm = {
             ...SallaBulletDelivery.INITIAL_ADDRESS_FORM,
         };
+        this.handleCountrySearch = (query) => {
+            this.countrySearchQuery = query;
+            return;
+        };
+        this.handleRegionSearch = (query) => {
+            this.regionSearchQuery = query;
+            return;
+        };
+        this.handleCitySearch = (query) => {
+            this.citySearchQuery = query;
+            if (this.citySearchTimer)
+                clearTimeout(this.citySearchTimer);
+            if (!query.trim()) {
+                this.displayedCities = this.cities;
+                this.searchingCities = false;
+                return;
+            }
+            if (query.trim().length < SallaBulletDelivery.DROPDOWN_SEARCH_MIN_CHARS)
+                return;
+            const requestId = ++this.citySearchCounter;
+            this.citySearchTimer = setTimeout(async () => {
+                this.searchingCities = true;
+                try {
+                    const isSA = isSaudiArabia(this.selectedCountry?.code ?? '');
+                    const regionId = isSA ? this.selectedRegion?.id : undefined;
+                    const results = await bulletDeliveryAPI.getCities(this.selectedCountry?.id, regionId, query);
+                    if (requestId === this.citySearchCounter) {
+                        this.displayedCities = results;
+                    }
+                }
+                catch {
+                    if (requestId === this.citySearchCounter) {
+                        this.displayedCities = this.cities;
+                    }
+                }
+                finally {
+                    if (requestId === this.citySearchCounter) {
+                        this.searchingCities = false;
+                    }
+                }
+            }, SallaBulletDelivery.DROPDOWN_SEARCH_DEBOUNCE_MS);
+        };
+        this.handleDistrictSearch = (query) => {
+            this.districtSearchQuery = query;
+            return;
+        };
+        this.handleCountryDropdownClosed = () => {
+            this.countrySearchQuery = '';
+            this.displayedCountries = this.countries;
+            this.searchingCountries = false;
+        };
+        this.handleRegionDropdownClosed = () => {
+            this.regionSearchQuery = '';
+            this.displayedRegions = this.regions;
+            this.searchingRegions = false;
+        };
+        this.handleCityDropdownClosed = () => {
+            this.citySearchQuery = '';
+            if (this.citySearchTimer) {
+                clearTimeout(this.citySearchTimer);
+                this.citySearchTimer = null;
+            }
+            ++this.citySearchCounter;
+            this.displayedCities = this.cities;
+            this.searchingCities = false;
+        };
+        this.handleDistrictDropdownClosed = () => {
+            this.districtSearchQuery = '';
+            this.displayedDistricts = this.districts;
+            this.searchingDistricts = false;
+        };
         /**
          * Submit add-address form: create address via API then switch back to list.
          */
@@ -435,10 +598,61 @@ const SallaBulletDelivery = class {
                 this.savingAddress = false;
             }
         };
+        this.handleCountrySelected = (item) => {
+            const country = this.countries.find(c => String(c.id) === String(item.id)) || item;
+            const isCountrySwitch = this.selectedCountry &&
+                country &&
+                this.selectedCountry.code !== country.code;
+            this.showCartWillBeClearedBanner = !!isCountrySwitch;
+            this.countrySearchQuery = '';
+            this.displayedCountries = this.countries;
+            this.applyCountryChange(country || null);
+        };
+        this.handleRegionSelected = (item) => {
+            const region = this.regions.find(r => String(r.id) === String(item.id)) || item;
+            this.selectedRegion = region || null;
+            this.regionSearchQuery = '';
+            this.displayedRegions = this.regions;
+            this.updateNewAddressForm({
+                region_id: region?.id,
+                city_id: undefined,
+                district_id: undefined,
+                city: undefined,
+                district: undefined,
+            });
+            if (region && this.selectedCountry) {
+                this.loadCities(this.selectedCountry.id, region.id);
+            }
+        };
+        this.handleCitySelected = (item) => {
+            const isSA = isSaudiArabia(this.selectedCountry?.code ?? '');
+            const city = this.cities.find(c => String(c.id) === String(item.id)) || item;
+            this.selectedCity = city || null;
+            this.selectedDistrict = null;
+            this.districtName = "";
+            this.citySearchQuery = '';
+            this.displayedCities = this.cities;
+            if (city) {
+                this.updateNewAddressForm({ city: city, district: undefined });
+                if (isSA) {
+                    this.loadDistricts(city.id);
+                }
+            }
+        };
+        this.handleDistrictSelected = (item) => {
+            const district = this.districts.find(d => String(d.id) === String(item.id)) || item;
+            this.selectedDistrict = district || null;
+            this.districtName = "";
+            this.districtSearchQuery = '';
+            this.displayedDistricts = this.districts;
+            if (district) {
+                this.updateNewAddressForm({ district });
+            }
+        };
     }
-    /** Whether to show delivery + pickup tabs. From store.settings.bullet_delivery.supports_pickup */
+    /** Whether to show delivery + pickup tabs. From store.shipping.support_pickup */
     get supportsPickup() {
-        return !!Salla.config.get("store.settings.bullet_delivery.supports_pickup");
+        return Boolean(Salla.config.get("store.shipping.support_pickup"));
     }
     /** The modal opening strategy: 'first_visit' | 'on_cart_click' | 'after_add_to_cart' */
     get openingType() {
@@ -457,10 +671,9 @@ const SallaBulletDelivery = class {
             this.pendingOpen = true;
             return;
         }
-        // Reset state and set loading before opening
+        // Reset state before opening
         this.resetState();
-        this.loading = true;
-        // Open modal immediately to show skeleton/loading state
+        // Open modal immediately — fields render right away with inline loading
         this.modal.open();
         Salla.event.dispatch("salla::bullet-delivery.modal.opened");
         try {
@@ -481,11 +694,16 @@ const SallaBulletDelivery = class {
                 this.activeTab = "address";
             }
             // Load countries always; load saved addresses only when address tab is active (lazy tab data).
+            if (this.isLoggedIn && this.activeTab === "address") {
+                this.loadingSavedAddresses = true;
+            }
             await Promise.all([
                 this.loadCountries(hasStoredAddressIds),
                 this.isLoggedIn && this.activeTab === "address"
                     ? this.loadSavedAddresses().then(() => {
                         this.savedAddressesLoaded = true;
+                    }).finally(() => {
+                        this.loadingSavedAddresses = false;
                     })
                     : Promise.resolve(),
             ]);
@@ -523,9 +741,6 @@ const SallaBulletDelivery = class {
             console.error("SallaBulletDelivery: Error loading data", e);
         }
         finally {
-            // Only hide loading after all data is loaded and UI is ready
-            this.loading = false;
-            this.modal?.stopLoading();
             this.overrideScopeSwitchUI();
         }
     }
@@ -560,12 +775,13 @@ const SallaBulletDelivery = class {
         this.branches = [];
         this.filteredBranches = [];
         this.newAddressForm = { ...SallaBulletDelivery.INITIAL_ADDRESS_FORM };
-        // Reset new state variables
         this.showCartWillBeClearedBanner = false;
         this.allocationOutOfCoverageMessage = null;
         this.locationError = "";
         this.savedAddressesLoaded = false;
         this.loadingSavedAddresses = false;
+        this.loadingCountries = false;
+        this.resetSearchState();
     }
     getIntentStorage() {
         const rememberLastSession = Boolean(Salla.config.get("store.settings.bullet_delivery.settings.remember_last_session"));
@@ -692,10 +908,14 @@ const SallaBulletDelivery = class {
                 ? bulletDeliveryAPI.getDistricts(Number(cityId))
                 : Promise.resolve([]),
         ]);
-        if (isSA)
+        if (isSA) {
             this.regions = regions;
+            this.displayedRegions = this.regions;
+        }
         this.cities = cities;
+        this.displayedCities = this.cities;
         this.districts = districts;
+        this.displayedDistricts = this.districts;
         this.loadingCities = false;
         this.loadingRegions = false;
         this.loadingDistricts = false;
@@ -738,41 +958,117 @@ const SallaBulletDelivery = class {
         const storage = this.getShownStorage();
         storage.set(this.sessionShownKey, true);
     }
+    getIPLocationConfig() {
+        const configPath = "store.shipping.delivery_location";
+        const ipAddress = {
+            countryId: Salla.config.get(`${configPath}.country_id`),
+            regionId: Salla.config.get(`${configPath}.region_id`),
+            cityId: Salla.config.get(`${configPath}.city_id`),
+            districtId: Salla.config.get(`${configPath}.district_id`),
+        };
+        return localStorage.getItem(OVERRIDE_IP_KEY) ?
+            JSON.parse(localStorage.getItem(OVERRIDE_IP_KEY)) : ipAddress;
+    }
     async loadCountries(skipEagerSubFetch = false) {
+        this.loadingCountries = true;
         const forBranch = this.activeTab === "branch";
-        this.countries = await bulletDeliveryAPI.getCountries(forBranch);
-        // Preselect country from bullet_delivery.customer_location.country (SA | EG | ...)
-        const configCountryCode = Salla.config.get("store.settings.bullet_delivery.customer_location.country");
-        const countryToSelect = configCountryCode && this.countries.length > 0
-            ? this.countries.find((c) => String(c.code).toUpperCase() ===
-                String(configCountryCode).toUpperCase())
-            : null;
-        if (countryToSelect) {
-            this.selectedCountry = countryToSelect;
-            this.updateNewAddressForm({
-                country_id: Number(this.selectedCountry.id),
-            });
-            // Skip eager sub-fetches when stored intent IDs exist — prefillFromSessionStorage
-            // will fire regions/cities/districts in parallel using the stored IDs directly.
-            if (!skipEagerSubFetch) {
-                if (isSaudiArabia(this.selectedCountry.code)) {
-                    await this.loadRegions(this.selectedCountry.id);
-                }
-                else {
-                    await this.loadCities(this.selectedCountry.id);
+        try {
+            this.countries = await bulletDeliveryAPI.getCountries(forBranch);
+            this.displayedCountries = this.countries;
+            const { countryId: configCountryId, regionId: configRegionId, cityId: configCityId, districtId: configDistrictId } = this.getIPLocationConfig();
+            log("getIPLocationConfig", this.getIPLocationConfig());
+            const countryToSelect = configCountryId && this.countries.length > 0
+                ? this.countries.find((c) => String(c.id) === String(configCountryId))
+                : null;
+            if (countryToSelect) {
+                this.selectedCountry = countryToSelect;
+                this.updateNewAddressForm({
+                    country_id: Number(this.selectedCountry.id),
+                });
+                // Skip eager sub-fetches when stored intent IDs exist — prefillFromSessionStorage
+                // will fire regions/cities/districts in parallel using the stored IDs directly.
+                if (!skipEagerSubFetch) {
+                    const hasIPLocationIds = configRegionId != null ||
+                        configCityId != null ||
+                        configDistrictId != null;
+                    if (hasIPLocationIds) {
+                        await this.prefillFromIPLocation(countryToSelect, {
+                            regionId: configRegionId,
+                            cityId: configCityId,
+                            districtId: configDistrictId,
+                        });
+                    }
+                    else if (isSaudiArabia(this.selectedCountry.code)) {
+                        await this.loadRegions(this.selectedCountry.id);
+                    }
+                    else {
+                        await this.loadCities(this.selectedCountry.id);
+                    }
                 }
             }
         }
+        finally {
+            this.loadingCountries = false;
+        }
+    }
+    async prefillFromIPLocation(country, ids) {
+        const isSA = isSaudiArabia(country.code);
+        const { regionId, cityId, districtId } = ids;
+        const [regions, cities, districts] = await Promise.all([
+            isSA ? bulletDeliveryAPI.getRegions(country.id) : Promise.resolve([]),
+            bulletDeliveryAPI.getCities(country.id, isSA && regionId != null ? regionId : undefined),
+            cityId != null
+                ? bulletDeliveryAPI.getDistricts(Number(cityId))
+                : Promise.resolve([]),
+        ]);
+        if (isSA) {
+            this.regions = regions;
+            this.displayedRegions = this.regions;
+        }
+        this.cities = cities;
+        this.displayedCities = this.cities;
+        this.districts = districts;
+        this.displayedDistricts = this.districts;
+        this.loadingRegions = false;
+        this.loadingCities = false;
+        this.loadingDistricts = false;
+        if (isSA && regionId != null) {
+            const region = this.regions.find((r) => String(r.id) === String(regionId));
+            if (region) {
+                this.selectedRegion = region;
+                this.updateNewAddressForm({ region_id: region.id });
+            }
+        }
+        if (cityId != null && this.cities.length > 0) {
+            const city = this.cities.find((c) => String(c.id) === String(cityId));
+            if (city) {
+                this.selectedCity = city;
+                this.updateNewAddressForm({ city_id: city.id, city });
+            }
+        }
+        if (districtId != null && this.districts.length > 0) {
+            const district = this.findPrefillDistrict(districtId);
+            if (district) {
+                this.selectedDistrict = district;
+                this.updateNewAddressForm({
+                    district_id: district.id,
+                    district,
+                });
+            }
+        }
     }
     async loadCities(countryId, regionId) {
         this.loadingCities = true;
         this.cities = [];
+        this.displayedCities = [];
         this.districts = [];
+        this.displayedDistricts = [];
         this.selectedCity = null;
         this.selectedDistrict = null;
         this.districtName = "";
         try {
             this.cities = await bulletDeliveryAPI.getCities(countryId, regionId);
+            this.displayedCities = this.cities;
         }
         finally {
             this.loadingCities = false;
@@ -781,10 +1077,12 @@ const SallaBulletDelivery = class {
     async loadDistricts(cityId) {
         this.loadingDistricts = true;
         this.districts = [];
+        this.displayedDistricts = [];
         this.selectedDistrict = null;
         this.districtName = "";
         try {
             this.districts = await bulletDeliveryAPI.getDistricts(cityId);
+            this.displayedDistricts = this.districts;
         }
         finally {
             this.loadingDistricts = false;
@@ -865,7 +1163,6 @@ const SallaBulletDelivery = class {
     }
     async loadSavedAddresses() {
         this.savedAddresses = await bulletDeliveryAPI.getSavedAddresses();
-        // If session address exists (guest intent before login), select it by default
         const intent = this.getStoredIntent();
         const hasSessionAddress = hasSessionAddressIntent(intent);
         if (hasSessionAddress) {
@@ -873,13 +1170,11 @@ const SallaBulletDelivery = class {
             this.selectedSavedAddress = null;
         }
         else {
-            // Select default address if available and valid
             const defaultAddress = this.savedAddresses.find((a) => a.is_default && a.is_in_coverage !== false);
             if (defaultAddress) {
                 this.selectedSavedAddress = defaultAddress;
             }
             else {
-                // Select first valid address
                 const validAddress = this.savedAddresses.find((a) => a.is_in_coverage !== false);
                 if (validAddress) {
                     this.selectedSavedAddress = validAddress;
@@ -891,12 +1186,22 @@ const SallaBulletDelivery = class {
         this.selectedCountry = newCountry;
         this.selectedRegion = null;
         this.regions = [];
+        this.displayedRegions = [];
         this.cities = [];
+        this.displayedCities = [];
         this.districts = [];
+        this.displayedDistricts = [];
         this.selectedCity = null;
         this.selectedDistrict = null;
         this.districtName = "";
         this.allocationOutOfCoverageMessage = null;
+        this.regionSearchQuery = '';
+        this.citySearchQuery = '';
+        this.districtSearchQuery = '';
+        this.searchingRegions = false;
+        this.searchingCities = false;
+        this.searchingDistricts = false;
+        this.clearSearchTimers();
         if (this.selectedCountry) {
             this.updateNewAddressForm({
                 country_id: Number(this.selectedCountry.id),
@@ -920,14 +1225,18 @@ const SallaBulletDelivery = class {
     async loadRegions(countryId) {
         this.loadingRegions = true;
         this.regions = [];
+        this.displayedRegions = [];
         this.selectedRegion = null;
         this.cities = [];
+        this.displayedCities = [];
         this.districts = [];
+        this.displayedDistricts = [];
         this.selectedCity = null;
         this.selectedDistrict = null;
         this.districtName = "";
         try {
             this.regions = await bulletDeliveryAPI.getRegions(countryId);
+            this.displayedRegions = this.regions;
         }
         finally {
             this.loadingRegions = false;
@@ -1004,6 +1313,29 @@ const SallaBulletDelivery = class {
             }
         }, BRANCH_SEARCH_DEBOUNCE_MS);
     }
+    clearSearchTimers() {
+        [this.countrySearchTimer, this.regionSearchTimer, this.citySearchTimer, this.districtSearchTimer]
+            .forEach(t => {
+            if (t)
+                clearTimeout(t);
+        });
+        this.countrySearchTimer = this.regionSearchTimer = this.citySearchTimer = this.districtSearchTimer = null;
+    }
+    resetSearchState() {
+        this.countrySearchQuery = '';
+        this.regionSearchQuery = '';
+        this.citySearchQuery = '';
+        this.districtSearchQuery = '';
+        this.searchingCountries = false;
+        this.searchingRegions = false;
+        this.searchingCities = false;
+        this.searchingDistricts = false;
+        this.displayedCountries = [];
+        this.displayedRegions = [];
+        this.displayedCities = [];
+        this.displayedDistricts = [];
+        this.clearSearchTimers();
+    }
     async loadBranchesWithLocation(lat, lng) {
         this.loadingBranches = true;
         try {
@@ -1128,14 +1460,26 @@ const SallaBulletDelivery = class {
             this.activeTab = tab;
             this.showCartWillBeClearedBanner = false;
             this.allocationOutOfCoverageMessage = null;
-            // Reload countries with for_branch=1 for pickup tab, for_branch=0 for delivery tab
+            this.resetSearchState();
             const forBranch = tab === "branch";
             this.countries = await bulletDeliveryAPI.getCountries(forBranch);
+            this.displayedCountries = this.countries;
             const previousCountryId = this.selectedCountry?.id;
             if (previousCountryId !== undefined && previousCountryId !== null) {
                 this.selectedCountry =
                     this.countries.find((c) => c.id === previousCountryId) || null;
             }
+            // Fallback to IP-detected country when carry-over fails
+            if (!this.selectedCountry) {
+                const { countryId: configCountryId } = this.getIPLocationConfig();
+                if (configCountryId && this.countries.length > 0) {
+                    this.selectedCountry =
+                        this.countries.find((c) => String(c.id) === String(configCountryId)) || null;
+                }
+                if (!this.selectedCountry && this.countries.length === 1) {
+                    this.selectedCountry = this.countries[0];
+                }
+            }
             // Load appropriate data when switching tabs if country is selected
             if (this.selectedCountry) {
                 if (tab === "branch") {
@@ -1385,7 +1729,6 @@ const SallaBulletDelivery = class {
                     (this.activeTab === "address"
                         ? Salla.lang.get("pages.checkout.address_out_of_coverage")
                         : Salla.lang.get("pages.checkout.failed_to_set_pickup"));
-                Salla.notify?.error(errorMessage);
                 this.allocationOutOfCoverageMessage = errorMessage;
                 this.confirmBtn?.stop();
                 this.confirming = false;
@@ -1430,6 +1773,7 @@ const SallaBulletDelivery = class {
             this.setStoredIntent(result);
             if (allocatedScopeId) {
                 await bulletDeliveryAPI.setDeliveryScope(allocatedScopeId);
+                clearApiCache();
             }
             const allocationConfirmedPayload = {
                 ...result,
@@ -1532,12 +1876,6 @@ const SallaBulletDelivery = class {
         wrapper.append(info, btn);
         return wrapper;
     }
-    renderSkeleton() {
-        return (index.h("div", { slot: "loading", class: "s-bullet-delivery-skeleton" }, index.h("div", { class: "s-bullet-delivery-skeleton-header" }, index.h("salla-skeleton", { class: "s-bullet-delivery-skeleton-title", height: "28px", width: "68%" }), index.h("salla-skeleton", { class: "s-bullet-delivery-skeleton-subtitle", height: "18px", width: "84%" })), index.h("div", { class: {
-                "s-bullet-delivery-skeleton-tabs": true,
-                "s-bullet-delivery-skeleton-tabs--single": !this.supportsPickup,
-            } }, index.h("div", { class: "s-bullet-delivery-skeleton-tab" }, index.h("salla-skeleton", { class: "s-bullet-delivery-skeleton-tab-icon", height: "32px", width: "32px" }), index.h("salla-skeleton", { class: "s-bullet-delivery-skeleton-tab-label", height: "18px", width: "92px" })), this.supportsPickup && (index.h("div", { class: "s-bullet-delivery-skeleton-tab" }, index.h("salla-skeleton", { class: "s-bullet-delivery-skeleton-tab-icon", height: "32px", width: "32px" }), index.h("salla-skeleton", { class: "s-bullet-delivery-skeleton-tab-label", height: "18px", width: "84px" })))), index.h("div", { class: "s-bullet-delivery-skeleton-content" }, index.h("div", { class: "s-bullet-delivery-skeleton-field" }, index.h("salla-skeleton", { class: "s-bullet-delivery-skeleton-field-label", height: "16px", width: "96px" }), index.h("salla-skeleton", { class: "s-bullet-delivery-skeleton-field-control", height: "56px", width: "100%" })), index.h("div", { class: "s-bullet-delivery-skeleton-field" }, index.h("salla-skeleton", { class: "s-bullet-delivery-skeleton-field-label", height: "16px", width: "104px" }), index.h("salla-skeleton", { class: "s-bullet-delivery-skeleton-field-control", height: "56px", width: "100%" })), index.h("div", { class: "s-bullet-delivery-skeleton-field" }, index.h("salla-skeleton", { class: "s-bullet-delivery-skeleton-field-label", height: "16px", width: "88px" }), index.h("salla-skeleton", { class: "s-bullet-delivery-skeleton-field-control", height: "56px", width: "100%" }))), index.h("div", { class: "s-bullet-delivery-skeleton-footer" }, index.h("salla-skeleton", { height: "52px", width: "100%" }))));
-    }
     renderTabs() {
         // Show tabs only when pickup is supported; otherwise delivery-only view with no tabs
         if (!this.supportsPickup)
@@ -1559,56 +1897,22 @@ const SallaBulletDelivery = class {
         return this.renderAlert(message);
     }
     renderCountrySelect() {
-        return (index.h("div", { class: "s-bullet-delivery-field" }, index.h("label", { class: "s-bullet-delivery-label", htmlFor: "bullet-delivery-country" }, Salla.lang.get("blocks.buy_as_gift.receiver_country"), index.h("span", { class: "text-red-500" }, " *")), index.h("select", { id: "bullet-delivery-country", class: "form-input", onChange: (e) => {
-                const select = e.target;
-                const countryId = Number.parseInt(select.value);
-                const country = this.countries.find((c) => c.id === countryId);
-                // A "switch" means the user already had a country and picked a different one
-                const isCountrySwitch = this.selectedCountry &&
-                    country &&
-                    this.selectedCountry.code !== country.code;
-                // Show the info banner whenever a country is changed to a different one
-                this.showCartWillBeClearedBanner = !!isCountrySwitch;
-                this.applyCountryChange(country || null);
-            } }, index.h("option", { value: "", disabled: true, selected: !this.selectedCountry }, Salla.lang.get("pages.checkout.select_country")), this.countries.map((country) => (index.h("option", { key: country.id, value: country.id, selected: this.selectedCountry?.id === country.id }, country.name))))));
-    }
-    renderSelectLoader() {
-        return (index.h("span", { class: "s-bullet-delivery-select-loader", "aria-hidden": "true" }, index.h("salla-skeleton", { height: "16px", width: "16px" })));
-    }
-    renderLoadingLabel(label, htmlFor, isLoading = false, isRequired = true) {
-        return (index.h("label", { class: "s-bullet-delivery-label", htmlFor: htmlFor }, index.h("span", { class: "s-bullet-delivery-label-content" }, index.h("span", null, label, isRequired && index.h("span", { class: "text-red-500" }, " *")), isLoading && this.renderSelectLoader())));
+        return (index.h("div", { class: "s-bullet-delivery-field" }, index.h("salla-searchable-dropdown", { label: Salla.lang.get("blocks.buy_as_gift.receiver_country"), placeholder: Salla.lang.get("pages.checkout.select_country"), items: this.displayedCountries, selectedItem: this.selectedCountry, loading: this.loadingCountries, searching: this.searchingCountries, disabled: this.countries.length <= 1, required: true, inputId: "bullet-delivery-country", searchQuery: this.countrySearchQuery, clientSearch: true, onItemSelected: (e) => this.handleCountrySelected(e.detail), onSearchInput: (e) => this.handleCountrySearch(e.detail), onDropdownClosed: () => this.handleCountryDropdownClosed() })));
     }
     /** Region select (SA only): shown when SA is selected; city and district disabled until region selected. */
     renderRegionSelect() {
         const isSA = isSaudiArabia(this.selectedCountry?.code ?? '');
         if (!isSA || !this.selectedCountry)
             return null;
-        return (index.h("div", { class: "s-bullet-delivery-field" }, this.renderLoadingLabel(Salla.lang.get("pages.checkout.region_field"), "bullet-delivery-region", this.loadingRegions), index.h("select", { id: "bullet-delivery-region", class: "form-input", disabled: this.loadingRegions || this.regions.length === 0, onChange: (e) => {
-                const select = e.target;
-                const regionId = Number.parseInt(select.value);
-                const region = this.regions.find((r) => r.id === regionId);
-                this.selectedRegion = region || null;
-                this.updateNewAddressForm({
-                    region_id: region?.id,
-                    city_id: undefined,
-                    district_id: undefined,
-                    city: undefined,
-                    district: undefined,
-                });
-                if (region && this.selectedCountry) {
-                    this.loadCities(this.selectedCountry.id, region.id);
-                }
-            } }, index.h("option", { value: "", disabled: true, selected: !this.selectedRegion }, Salla.lang.get("pages.checkout.select_region")), this.regions.map((region) => (index.h("option", { key: region.id, value: region.id, selected: this.selectedRegion?.id === region.id }, region.name))))));
+        return (index.h("div", { class: "s-bullet-delivery-field" }, index.h("salla-searchable-dropdown", { label: Salla.lang.get("pages.checkout.region_field"), placeholder: Salla.lang.get("pages.checkout.select_region"), items: this.displayedRegions, selectedItem: this.selectedRegion, loading: this.loadingRegions, searching: this.searchingRegions, disabled: this.loadingRegions || this.regions.length === 0, required: true, inputId: "bullet-delivery-region", searchQuery: this.regionSearchQuery, clientSearch: true, onItemSelected: (e) => this.handleRegionSelected(e.detail), onSearchInput: (e) => this.handleRegionSearch(e.detail), onDropdownClosed: () => this.handleRegionDropdownClosed() })));
     }
     renderCityDistrictSelects() {
-        // Guest form: region + district only for SA; other countries get country + city only
         const isSA = isSaudiArabia(this.selectedCountry?.code ?? '');
         const showDistrict = isSA;
         const showDistrictInput = showDistrict &&
             this.selectedCity &&
             !this.loadingDistricts &&
             this.districts.length === 0;
-        // For SA: city disabled until region selected; for non-SA: city disabled until country selected
         const cityDisabled = !this.selectedCountry ||
             (isSA && !this.selectedRegion) ||
             this.loadingCities ||
@@ -1617,39 +1921,11 @@ const SallaBulletDelivery = class {
             (isSA && !this.selectedRegion) ||
             !this.selectedCity ||
             this.loadingDistricts;
-        return (index.h("div", { class: "s-bullet-delivery-field-row" }, index.h("div", { class: "s-bullet-delivery-field" }, this.renderLoadingLabel(Salla.lang.get("blocks.buy_as_gift.receiver_city"), "bullet-delivery-city", this.loadingCities), index.h("select", { id: "bullet-delivery-city", class: "form-input", disabled: cityDisabled, onChange: (e) => {
-                const select = e.target;
-                const cityId = Number.parseInt(select.value);
-                const city = this.cities.find((c) => c.id === cityId);
-                this.selectedCity = city || null;
-                this.selectedDistrict = null;
-                this.districtName = "";
-                if (city) {
-                    this.updateNewAddressForm({ city: city, district: undefined });
-                    if (showDistrict) {
-                        this.loadDistricts(city.id);
-                    }
-                }
-            } }, index.h("option", { value: "", disabled: true, selected: !this.selectedCity }, Salla.lang.get("pages.checkout.select_city")), this.cities.map((city) => (index.h("option", { key: city.id, value: city.id, selected: this.selectedCity?.id === city.id }, city.name))))), showDistrict && (index.h("div", { class: "s-bullet-delivery-field" }, this.renderLoadingLabel(Salla.lang.get("pages.checkout.district_field"), "bullet-delivery-district", this.loadingDistricts && !showDistrictInput), showDistrictInput ? (index.h("input", { id: "bullet-delivery-district", type: "text", class: "form-input", placeholder: Salla.lang.get("pages.checkout.select_district"), value: this.districtName, disabled: districtDisabled, onInput: (e) => {
+        return (index.h("div", { class: "s-bullet-delivery-field-row" }, index.h("div", { class: "s-bullet-delivery-field" }, index.h("salla-searchable-dropdown", { label: Salla.lang.get("blocks.buy_as_gift.receiver_city"), placeholder: Salla.lang.get("pages.checkout.select_city"), items: this.displayedCities, selectedItem: this.selectedCity, loading: this.loadingCities, searching: this.searchingCities, disabled: cityDisabled, required: true, inputId: "bullet-delivery-city", searchQuery: this.citySearchQuery, onItemSelected: (e) => this.handleCitySelected(e.detail), onSearchInput: (e) => this.handleCitySearch(e.detail), onDropdownClosed: () => this.handleCityDropdownClosed(), dropUp: true })), showDistrict && (index.h("div", { class: "s-bullet-delivery-field" }, showDistrictInput ? (index.h("div", null, index.h("label", { class: "s-bullet-delivery-label", htmlFor: "bullet-delivery-district" }, Salla.lang.get("pages.checkout.district_field"), index.h("span", { class: "text-red-500" }, " *")), index.h("input", { id: "bullet-delivery-district", type: "text", class: "form-input", placeholder: Salla.lang.get("pages.checkout.select_district"), value: this.districtName, disabled: districtDisabled, onInput: (e) => {
                 const input = e.target;
                 this.districtName = input.value;
                 this.updateNewAddressForm({ district: undefined });
-            } })) : (index.h("select", { id: "bullet-delivery-district", class: "form-input", disabled: districtDisabled || this.districts.length === 0, onChange: (e) => {
-                const select = e.target;
-                const districtId = Number.parseInt(select.value);
-                const district = this.districts.find((d) => d.id === districtId);
-                this.selectedDistrict = district || null;
-                this.districtName = "";
-                if (district) {
-                    this.updateNewAddressForm({ district });
-                }
-            } }, index.h("option", { value: "", disabled: true, selected: !this.selectedDistrict }, Salla.lang.get("pages.checkout.select_district")), this.districts.map((district) => {
-            const langCode = Salla.config.get("user.language_code");
-            const label = langCode === "ar"
-                ? district.name
-                : (district.name_en ?? district.name);
-            return (index.h("option", { key: district.id, value: district.id, selected: this.selectedDistrict?.id === district.id }, label));
-        })))))));
+            } }))) : (index.h("salla-searchable-dropdown", { label: Salla.lang.get("pages.checkout.district_field"), placeholder: Salla.lang.get("pages.checkout.select_district"), items: this.displayedDistricts, selectedItem: this.selectedDistrict, loading: this.loadingDistricts, searching: this.searchingDistricts, disabled: districtDisabled || this.districts.length === 0, required: true, inputId: "bullet-delivery-district", searchQuery: this.districtSearchQuery, clientSearch: true, onItemSelected: (e) => this.handleDistrictSelected(e.detail), onSearchInput: (e) => this.handleDistrictSearch(e.detail), onDropdownClosed: () => this.handleDistrictDropdownClosed(), dropUp: true }))))));
     }
     renderSavedAddressesEmptyState() {
         return (index.h("div", { class: "s-bullet-delivery-saved-addresses-empty" }, index.h("div", { class: "s-bullet-delivery-saved-addresses-empty-icon", "aria-hidden": "true" }, index.h("svg", { width: "28", height: "28", viewBox: "0 0 28 29", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("title", null, "No Saved Adresses"), index.h("path", { d: "M20.16 0C21.4613 0 22.6773 0.341333 23.808 1.024C24.9387 1.70667 25.8347 2.61333 26.496 3.744C27.1787 4.91733 27.52 6.18667 27.52 7.552C27.52 9.45067 26.8267 11.232 25.44 12.896C24.4587 14.0907 23.0827 15.2427 21.312 16.352H21.28C20.9387 16.5653 20.5653 16.672 20.16 16.672C19.7547 16.672 19.3813 16.5653 19.04 16.352H19.008C17.2373 15.2213 15.8613 14.0693 14.88 12.896C13.4933 11.232 12.8 9.45067 12.8 7.552C12.8 6.18667 13.1413 4.91733 13.824 3.744C14.4853 2.61333 15.3813 1.70667 16.512 1.024C17.6427 0.341333 18.8587 0 20.16 0ZM11.488 1.984C9.67467 2.368 8.04267 3.14667 6.592 4.32C5.14133 5.49333 4.01067 6.92267 3.2 8.608C2.34667 10.3573 1.92 12.224 1.92 14.208C1.92 14.72 1.952 15.2427 2.016 15.776L2.08 15.744C2.57067 15.488 2.94933 15.3067 3.216 15.2C3.48267 15.0933 3.73867 15.0933 3.984 15.2C4.22933 15.3067 4.4 15.488 4.496 15.744C4.592 16 4.58667 16.256 4.48 16.512C4.37333 16.768 4.19733 16.9493 3.952 17.056C3.70667 17.1627 3.36 17.3227 2.912 17.536L2.656 17.664C2.57067 17.7067 2.48533 17.7387 2.4 17.76C2.89067 19.4667 3.70133 20.9973 4.832 22.352C5.96267 23.7067 7.296 24.7573 8.832 25.504C10.432 26.272 12.1173 26.656 13.888 26.656C15.4667 26.656 16.9813 26.3467 18.432 25.728C19.8187 25.1307 21.0667 24.288 22.176 23.2C21.92 23.0507 21.7653 22.8373 21.712 22.56C21.6587 22.2827 21.7013 22.0267 21.84 21.792C21.9787 21.5573 22.176 21.408 22.432 21.344C22.8373 21.2587 23.2 21.12 23.52 20.928C23.6907 20.8427 23.8613 20.8 24.032 20.8C24.8 19.5413 25.3333 18.176 25.632 16.704C25.6747 16.4267 25.808 16.2133 26.032 16.064C26.256 15.9147 26.496 15.8667 26.752 15.92C27.008 15.9733 27.2107 16.1173 27.36 16.352C27.5093 16.5867 27.552 16.832 27.488 17.088C27.0613 19.2853 26.1973 21.264 24.896 23.024C23.5947 24.784 22.0053 26.1547 20.128 27.136C18.1653 28.16 16.0853 28.672 13.888 28.672C11.3707 28.672 9.03467 28.0107 6.88 26.688C4.78933 25.408 3.12533 23.68 1.888 21.504C0.629333 19.264 0 16.832 0 14.208C0 11.904 0.490667 9.73867 1.472 7.712C2.41067 5.74933 3.728 4.09067 5.424 2.736C7.12 1.38133 9.01333 0.48 11.104 0.032C11.36 -0.032 11.6 0.0106667 11.824 0.16C12.048 0.309333 12.1867 0.522667 12.24 0.8C12.2933 1.07733 12.2453 1.328 12.096 1.552C11.9467 1.776 11.744 1.92 11.488 1.984ZM14.72 7.552C14.72 8.96 15.2533 10.304 16.32 11.584C17.1733 12.5867 18.3893 13.6 19.968 14.624C20.032 14.6453 20.096 14.656 20.16 14.656C20.224 14.656 20.288 14.6453 20.352 14.624C21.9307 13.6213 23.1467 12.608 24 11.584C25.0667 10.304 25.6 8.96 25.6 7.552C25.6 6.57067 25.3547 5.65333 24.864 4.8C24.3733 3.94667 23.7067 3.26933 22.864 2.768C22.0213 2.26667 21.12 2.016 20.16 2.016C19.2 2.016 18.2987 2.26667 17.456 2.768C16.6133 3.26933 15.9467 3.94667 15.456 4.8C14.9653 5.65333 14.72 6.57067 14.72 7.552ZM17.28 7.68C17.28 6.848 17.5627 6.13867 18.128 5.552C18.6933 4.96533 19.3707 4.672 20.16 4.672C20.9493 4.672 21.6267 4.96533 22.192 5.552C22.7573 6.13867 23.04 6.848 23.04 7.68C23.04 8.512 22.7573 9.216 22.192 9.792C21.6267 10.368 20.9493 10.656 20.16 10.656C19.3707 10.656 18.6933 10.368 18.128 9.792C17.5627 9.216 17.28 8.512 17.28 7.68ZM6.752 14.688C7.62667 14.7733 8.53333 15.0293 9.472 15.456C9.70667 15.5627 9.87733 15.744 9.984 16C10.0907 16.256 10.0907 16.512 9.984 16.768C9.87733 17.024 9.70133 17.2 9.456 17.296C9.21067 17.392 8.97067 17.3867 8.736 17.28C7.94667 16.9387 7.22133 16.736 6.56 16.672C6.28267 16.6293 6.064 16.5013 5.904 16.288C5.744 16.0747 5.68 15.8293 5.712 15.552C5.744 15.2747 5.86133 15.0507 6.064 14.88C6.26667 14.7093 6.496 14.6453 6.752 14.688ZM17.6 20.544C18.304 20.864 18.976 21.0987 19.616 21.248C19.872 21.312 20.0693 21.4613 20.208 21.696C20.3467 21.9307 20.3893 22.1813 20.336 22.448C20.2827 22.7147 20.144 22.9227 19.92 23.072C19.696 23.2213 19.4453 23.264 19.168 23.2C18.4213 23.0293 17.632 22.752 16.8 22.368C16.5653 22.2613 16.4 22.08 16.304 21.824C16.208 21.568 16.2133 21.312 16.32 21.056C16.4267 20.8 16.6027 20.624 16.848 20.528C17.0933 20.432 17.344 20.4373 17.6 20.544ZM12.832 17.44C13.0027 17.568 13.248 17.7493 13.568 17.984L14.496 18.688C14.7093 18.8587 14.8373 19.0773 14.88 19.344C14.9227 19.6107 14.8693 19.856 14.72 20.08C14.5707 20.304 14.368 20.4427 14.112 20.496C13.856 20.5493 13.6107 20.5013 13.376 20.352L11.744 19.072C11.5307 18.9227 11.4027 18.7093 11.36 18.432C11.3173 18.1547 11.3707 17.904 11.52 17.68C11.6693 17.456 11.872 17.3227 12.128 17.28C12.384 17.2373 12.6187 17.2907 12.832 17.44ZM20.16 8.672C20.416 8.672 20.64 8.576 20.832 8.384C21.024 8.192 21.12 7.95733 21.12 7.68C21.12 7.40267 21.024 7.16267 20.832 6.96C20.64 6.75733 20.416 6.656 20.16 6.656C19.904 6.656 19.68 6.75733 19.488 6.96C19.296 7.16267 19.2 7.40267 19.2 7.68C19.2 7.95733 19.296 8.192 19.488 8.384C19.68 8.576 19.904 8.672 20.16 8.672Z", fill: "#666666" }))), index.h("p", { class: "s-bullet-delivery-saved-addresses-empty-title" }, Salla.lang.get("pages.checkout.no_saved_addresses")), index.h("p", { class: "s-bullet-delivery-saved-addresses-empty-desc" }, Salla.lang.get("pages.checkout.add_address_simplify_shipping")), index.h("salla-button", { onClick: () => this.handleAddNewAddress(), onKeyUp: () => this.handleAddNewAddress() }, Salla.lang.get("pages.checkout.add_new_address"))));
@@ -1825,7 +2101,8 @@ const SallaBulletDelivery = class {
         const submitLabel = this.savingAddress
             ? Salla.lang.get("pages.checkout.loading")
             : Salla.lang.get("pages.checkout.confirm_address");
-        return (index.h("div", { class: "s-bullet-delivery-add-address" }, index.h("div", { class: "s-bullet-delivery-add-address-header" }, index.h("button", { type: "button", class: "s-bullet-delivery-add-address-title", onClick: () => this.handleBackToAddressList(), onKeyDown: (e) => e.key === "Enter" && this.handleBackToAddressList() }, index.h("span", { innerHTML: this.isRTL ? keyboard_arrow_right.ArrowRightIcon : keyboard_arrow_right.ArrowLeftIcon, "aria-hidden": "true" }), index.h("span", { class: "s-bullet-delivery-add-address-title-text" }, title))), index.h("form", { class: "s-bullet-delivery-add-address-form", onSubmit: (e) => this.handleSubmitAddAddress(e) }, this.renderGuestDeliveryForm(), index.h("div", { class: "s-bullet-delivery-form-actions s-bullet-delivery-form-actions--single" }, index.h("salla-button", { type: "submit", loading: this.savingAddress, disabled: !canSubmit || this.savingAddress, class: "s-bullet-delivery-add-address-submit" }, submitLabel)))));
+        const hasAddressesToGoBack = this.savedAddresses.length > 0 || hasSessionAddressIntent(this.getStoredIntent());
+        return (index.h("div", { class: "s-bullet-delivery-add-address" }, index.h("div", { class: "s-bullet-delivery-add-address-header" }, hasAddressesToGoBack ? (index.h("button", { type: "button", class: "s-bullet-delivery-add-address-title", onClick: () => this.handleBackToAddressList(), onKeyDown: (e) => e.key === "Enter" && this.handleBackToAddressList() }, index.h("span", { innerHTML: this.isRTL ? keyboard_arrow_right.ArrowRightIcon : keyboard_arrow_right.ArrowLeftIcon, "aria-hidden": "true" }), index.h("span", { class: "s-bullet-delivery-add-address-title-text" }, title))) : (index.h("span", { class: "s-bullet-delivery-add-address-title" }, index.h("span", { class: "s-bullet-delivery-add-address-title-text" }, title)))), index.h("form", { class: "s-bullet-delivery-add-address-form", onSubmit: (e) => this.handleSubmitAddAddress(e) }, this.renderGuestDeliveryForm(), index.h("div", { class: "s-bullet-delivery-form-actions s-bullet-delivery-form-actions--single" }, index.h("salla-button", { type: "submit", loading: this.savingAddress, disabled: !canSubmit || this.savingAddress, class: "s-bullet-delivery-add-address-submit" }, submitLabel)))));
     }
     renderFooter() {
         const showAddAddressInFooter = this.activeTab === "address" && this.isLoggedIn;
@@ -1968,9 +2245,9 @@ const SallaBulletDelivery = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8ca46eeae00aea840c260c599b10c7c544da1edc', class: "s-bullet-delivery" }, index.h("salla-modal", { key: '6197fa0b5f3d0a3479d37d9d54a2fe977a632215', ref: (modal) => {
+        return (index.h(index.Host, { key: '0daead232faa6590712faef140ab694b3324960e', class: "s-bullet-delivery" }, index.h("salla-modal", { key: '4f318a88c10b524d5f6b71a46cb93535d4b25a82', ref: (modal) => {
                 this.modal = modal;
-            }, isClosable: !this.isRequired && !this.shouldForceNonClosable(), class: "s-bullet-delivery-modal", isLoading: this.loading, width: "sm" }, this.loading ? (this.renderSkeleton()) : (index.h("div", { class: "s-bullet-delivery-inner" }, this.viewMode === "main" && this.renderMainView(), this.viewMode === "add-address" && this.renderAddAddressForm())))));
+            }, isClosable: !this.isRequired && !this.shouldForceNonClosable(), class: "s-bullet-delivery-modal", width: "sm" }, index.h("div", { key: '66f3d844ce325e47bfb52f941c038339f3f0cf6c', class: "s-bullet-delivery-inner" }, this.viewMode === "main" && this.renderMainView(), this.viewMode === "add-address" && this.renderAddAddressForm()))));
     }
     componentDidLoad() {
         // Mark component as ready
@@ -2069,6 +2346,224 @@ SallaBulletDelivery.INITIAL_ADDRESS_FORM = {
     postal_code: undefined,
     description: undefined,
 };
+SallaBulletDelivery.DROPDOWN_SEARCH_DEBOUNCE_MS = 400;
+SallaBulletDelivery.DROPDOWN_SEARCH_MIN_CHARS = 2;
 SallaBulletDelivery.style = sallaBulletDeliveryCss;
 
+const SallaSearchableDropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.itemSelected = index.createEvent(this, "itemSelected");
+        this.searchInput = index.createEvent(this, "searchInput");
+        this.dropdownOpened = index.createEvent(this, "dropdownOpened");
+        this.dropdownClosed = index.createEvent(this, "dropdownClosed");
+        this.placeholder = '';
+        this.items = [];
+        this.selectedItem = null;
+        this.loading = false;
+        this.searching = false;
+        this.disabled = false;
+        this.required = false;
+        this.noResultsText = '';
+        this.inputId = '';
+        this.searchQuery = '';
+        this.clientSearch = false;
+        this.dropUp = false;
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        this.clientSearchQuery = '';
+        this.scrollableAncestor = null;
+        this.handleTriggerClick = () => {
+            if (this.isOpen) {
+                this.close();
+            }
+            else {
+                this.open();
+            }
+        };
+        this.handleTriggerKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                if (!this.isOpen)
+                    this.open();
+            }
+            else if (e.key === 'Escape') {
+                this.close();
+            }
+        };
+        this.handleSearchInputChange = (e) => {
+            const value = e.target.value;
+            if (this.clientSearch) {
+                this.clientSearchQuery = value;
+            }
+            this.searchInput.emit(value);
+            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;
+            }
+        };
+    }
+    connectedCallback() {
+        this.boundHandleClickOutside = this.handleClickOutside.bind(this);
+        document.addEventListener('mousedown', this.boundHandleClickOutside);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.boundHandleClickOutside);
+        if (this.scrollableAncestor) {
+            this.scrollableAncestor.style.overflow = '';
+            this.scrollableAncestor = null;
+        }
+    }
+    onItemsChange() {
+        this.focusedIndex = -1;
+    }
+    normalizeArabic(text) {
+        return text.replace(/[أإآا]/g, 'ا');
+    }
+    get filteredItems() {
+        if (!this.clientSearch || !this.clientSearchQuery.trim()) {
+            return this.items;
+        }
+        const query = this.normalizeArabic(this.clientSearchQuery.trim().toLowerCase());
+        return this.items.filter(item => {
+            const normalizedName = this.normalizeArabic(item.name.toLowerCase());
+            const normalizedNameEn = item.name_en ? item.name_en.toLowerCase() : '';
+            return normalizedName.includes(query) || normalizedNameEn.includes(query);
+        });
+    }
+    getDisplayName(item) {
+        const lang = salla?.config?.get('user.language_code');
+        if (lang && lang !== 'ar' && item.name_en?.trim()) {
+            return item.name_en.trim();
+        }
+        return item.name;
+    }
+    handleClickOutside(e) {
+        if (!this.isOpen)
+            return;
+        const target = e.target;
+        if (!this.host.contains(target)) {
+            this.close();
+        }
+    }
+    findScrollableAncestor() {
+        let el = this.host.parentElement;
+        while (el) {
+            const style = getComputedStyle(el);
+            const overflowY = style.overflowY;
+            if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'hidden' || style.overflow === 'clip') {
+                return el;
+            }
+            el = el.parentElement;
+        }
+        return null;
+    }
+    open() {
+        if (this.disabled || this.loading)
+            return;
+        this.isOpen = true;
+        this.focusedIndex = -1;
+        this.scrollableAncestor = this.findScrollableAncestor();
+        if (this.scrollableAncestor) {
+            this.scrollableAncestor.style.overflow = 'visible';
+        }
+        this.dropdownOpened.emit();
+        requestAnimationFrame(() => this.searchInputRef?.focus());
+    }
+    close() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        this.clientSearchQuery = '';
+        if (this.scrollableAncestor) {
+            this.scrollableAncestor.style.overflow = '';
+            this.scrollableAncestor = null;
+        }
+        this.dropdownClosed.emit();
+    }
+    scrollFocusedIntoView() {
+        if (this.focusedIndex < 0)
+            return;
+        requestAnimationFrame(() => {
+            const listEl = this.panelRef?.querySelector('.s-searchable-dropdown-list');
+            const focused = listEl?.children[this.focusedIndex];
+            focused?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    selectItem(item) {
+        this.itemSelected.emit(item);
+        this.close();
+    }
+    render() {
+        const hasSelection = this.selectedItem != null;
+        const listboxId = `${this.inputId}-listbox`;
+        return (index.h(index.Host, { key: '1e413d4391362f274223724ab37f5842a196f936', class: "s-searchable-dropdown" }, index.h("div", { key: 'c1c0b595a458db8918bc7c72b949cd514d764613', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (index.h("label", { key: '576831e0383f561d5512792cb52d1c6d40156015', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && index.h("span", { key: '290e1edb52971f5af6c6555f82ad595e97c9994d', class: "s-searchable-dropdown-required" }, " *"))), index.h("div", { key: 'e3c9aaea5697839e67aab1b91d07cb825ee76c7b', 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 ? (index.h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (index.h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), index.h("i", { key: 'f1e95e38ebffc358a9045f0fd38dd205eb2a14bb', 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 && (index.h("div", { key: 'a5c6b4650d8de5467c1d53e67700168a0795ff0b', class: {
+                's-searchable-dropdown-panel': true,
+                's-searchable-dropdown-panel--up': this.dropUp,
+            }, ref: (el) => (this.panelRef = el) }, index.h("div", { key: '5ddf73d6d8cb96881ac6f94ef25a9f58b883a6c0', class: "s-searchable-dropdown-search-wrap" }, index.h("i", { key: 'ec52897c25962c6d1e84986f25bdac2dd8ecdac0', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), index.h("input", { key: 'e14dd7a0dae605dd37782cdd8c235e875105fcc9', 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 })), index.h("div", { key: '80daad72643001e400a9ff43444bbad5077ffa2d', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
+    }
+    renderListContent() {
+        if (this.searching || this.loading) {
+            return (index.h("div", { class: "s-searchable-dropdown-loading" }, index.h("svg", { class: "s-searchable-dropdown-spinner", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", opacity: "0.25" }), index.h("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" }))));
+        }
+        const visibleItems = this.filteredItems;
+        if (visibleItems.length === 0) {
+            return (index.h("div", { class: "s-searchable-dropdown-empty" }, this.noResultsText || salla?.lang?.get('common.elements.no_options') || 'No results found'));
+        }
+        return visibleItems.map((item, index$1) => {
+            const isSelected = this.selectedItem?.id === item.id;
+            const isFocused = this.focusedIndex === index$1;
+            return (index.h("button", { key: item.id, type: "button", role: "option", class: {
+                    's-searchable-dropdown-item': true,
+                    's-searchable-dropdown-item--selected': isSelected,
+                    's-searchable-dropdown-item--focused': isFocused && !isSelected,
+                }, "aria-selected": isSelected ? 'true' : 'false', onClick: () => this.selectItem(item) }, index.h("span", { class: {
+                    's-searchable-dropdown-item-name': true,
+                    's-searchable-dropdown-item-name--selected': isSelected,
+                } }, this.getDisplayName(item)), isSelected && (index.h("i", { class: "sicon-check s-searchable-dropdown-item-check", "aria-hidden": "true" }))));
+        });
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "items": ["onItemsChange"]
+    }; }
+};
+
 exports.salla_bullet_delivery = SallaBulletDelivery;
+exports.salla_searchable_dropdown = SallaSearchableDropdown;