@salla.sa/twilight-components 2.14.440 → 2.14.442

package/dist/components/salla-delivery-promise.js

@@ -2,9 +2,10 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './salla-button2.js';
-import { d as defineCustomElement$4 } from './salla-loading2.js';
-import { d as defineCustomElement$3 } from './salla-modal2.js';
+import { d as defineCustomElement$6 } from './salla-button2.js';
+import { d as defineCustomElement$5 } from './salla-loading2.js';
+import { d as defineCustomElement$4 } from './salla-modal2.js';
+import { d as defineCustomElement$3 } from './salla-searchable-dropdown2.js';
 import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 
 const DEBUG_KEY = 'salla-delivery-promise-debug';
@@ -14,9 +15,10 @@ function log(message, data) {
     }
 }
 /** Fetch available cities for a product's delivery promises. */
-async function fetchCities(productId) {
-    log('fetchCities start', { productId });
-    const response = await salla.api.request(salla.url.api(`products/${productId}/delivery-promises/cities`));
+async function fetchCities(productId, keyword) {
+    log('fetchCities start', { productId, keyword });
+    const queryString = keyword != null ? `?keyword=${encodeURIComponent(keyword)}` : '';
+    const response = await salla.api.request(salla.url.api(`products/${productId}/delivery-promises/cities${queryString}`));
     if (!response.success || !Array.isArray(response.data) || response.data.length === 0) {
         log('fetchCities: no data', { response });
         return { cities: [] };
@@ -44,15 +46,6 @@ async function fetchDeliveryMessage(productId, id, optionType, isLoginCycleEnabl
     return message || null;
 }
 
-/** Filters cities by Arabic/English name (used inside the city-change modal). */
-function filterCitiesForModal(cities, query) {
-    const q = query.trim().toLowerCase();
-    if (!q) {
-        return [...cities];
-    }
-    return cities.filter(city => city.name.toLowerCase().includes(q) || (city.name_en || '').toLowerCase().includes(q));
-}
-
 const INTENT_KEY = 'bullet_delivery_intent';
 function getIntentStorage() {
     const rememberLastSession = Boolean(salla.config.get('store.settings.bullet_delivery.settings.remember_last_session'));
@@ -167,21 +160,24 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
         this.selectedCity = null;
         this.isLoadingCities = false;
         // ── City-change modal state (non–login-cycle) ─────────────────────────
-        this.modalSearchQuery = '';
         this.cityPendingSelection = null;
-        this.isCityPopoverOpen = false;
+        this.modalCities = [];
+        this.isSearchingCities = false;
+        this.citySearchCounter = 0;
         // ═══════════════════════════════════════════════════════════════════════
         //  Login-cycle (bullet delivery) integration
         // ═══════════════════════════════════════════════════════════════════════
         this.onBulletDeliveryConfirmed = () => {
             this.applyBulletIntent();
         };
-        this.handleModalSearchInput = (event) => {
-            this.modalSearchQuery = event.target.value;
-            this.isCityPopoverOpen = true;
-        };
-        this.handleModalComboboxActivate = () => {
-            this.isCityPopoverOpen = true;
+        this.handleCitySearch = (keyword) => {
+            clearTimeout(this.citySearchTimer);
+            if (!keyword.trim()) {
+                this.modalCities = [...this.cities];
+                this.isSearchingCities = false;
+                return;
+            }
+            this.citySearchTimer = setTimeout(() => this.searchCitiesRemote(keyword), 300);
         };
         // ═══════════════════════════════════════════════════════════════════════
         //  Header click (dispatches to correct flow)
@@ -290,7 +286,6 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
                 if (autoCity) {
                     log("delivery promise standard flow autoCity found", autoCity);
                     this.selectedCity = autoCity;
-                    this.modalSearchQuery = getCityDisplayName(autoCity);
                 }
                 await this.loadDeliveryMessage(cityId, 'city');
             }
@@ -329,14 +324,29 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
         if (!this.cityModalRef)
             return;
         this.cityPendingSelection = null;
-        this.isCityPopoverOpen = false;
+        this.modalCities = [...this.cities];
         await this.cityModalRef.setTitle(this.labels.changeCityTitle);
         await this.cityModalRef.open();
     }
-    handleModalSelectCity(city) {
-        this.cityPendingSelection = city;
-        this.modalSearchQuery = getCityDisplayName(city);
-        this.isCityPopoverOpen = false;
+    async searchCitiesRemote(keyword) {
+        const requestId = ++this.citySearchCounter;
+        this.isSearchingCities = true;
+        try {
+            const { cities } = await fetchCities(this.productId, keyword);
+            if (requestId !== this.citySearchCounter)
+                return;
+            this.modalCities = cities;
+        }
+        catch {
+            if (requestId !== this.citySearchCounter)
+                return;
+            this.modalCities = [];
+        }
+        finally {
+            if (requestId === this.citySearchCounter) {
+                this.isSearchingCities = false;
+            }
+        }
     }
     async handleConfirmCityModal() {
         if (!this.cityPendingSelection) {
@@ -364,14 +374,11 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
         return h("div", { class: "s-delivery-promise-message" }, this.deliveryMessage);
     }
     renderCityModalBody() {
-        const filtered = filterCitiesForModal(this.cities, this.modalSearchQuery);
-        return (h("div", { class: "s-delivery-promise-modal-body" }, h("label", { class: "s-delivery-promise-modal-field-label", htmlFor: "s-delivery-promise-modal-search" }, this.labels.cityFieldLabel, h("span", { class: "s-delivery-promise-required", "aria-hidden": "true" }, " *")), h("div", { class: "s-delivery-promise-modal-combobox" }, h("div", { class: "s-delivery-promise-modal-search", onClick: this.handleModalComboboxActivate }, h("i", { class: "sicon-search", "aria-hidden": "true" }), h("input", { id: "s-delivery-promise-modal-search", type: "text", class: "form-input", placeholder: this.labels.modalSearchPlaceholder, value: this.modalSearchQuery, onInput: this.handleModalSearchInput, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isCityPopoverOpen ? 'true' : 'false', "aria-controls": "s-delivery-promise-modal-listbox" })), h("div", { id: "s-delivery-promise-modal-listbox", class: "s-delivery-promise-modal-popover", role: "listbox", hidden: !this.isCityPopoverOpen }, h("div", { class: "s-delivery-promise-modal-list s-scrollbar" }, filtered.length === 0 ? (h("div", { class: "s-delivery-promise-modal-empty" }, this.labels.noResults)) : (filtered.map(city => (h("button", { key: city.id, type: "button", role: "option", class: {
-                's-delivery-promise-modal-item': true,
-                's-delivery-promise-modal-item--selected': this.cityPendingSelection?.id === city.id,
-            }, "aria-selected": this.cityPendingSelection?.id === city.id ? 'true' : 'false', onClick: e => {
-                e.stopPropagation();
-                this.handleModalSelectCity(city);
-            } }, h("span", { class: "s-delivery-promise-modal-item-name" }, city.name), this.cityPendingSelection?.id === city.id ? h("i", { class: "sicon-check", "aria-hidden": "true" }) : null)))))))));
+        return (h("div", { class: "s-delivery-promise-modal-body" }, h("salla-searchable-dropdown", { label: this.labels.cityFieldLabel, placeholder: this.labels.modalSearchPlaceholder, items: this.modalCities, selectedItem: this.cityPendingSelection, searching: this.isSearchingCities, required: true, noResultsText: this.labels.noResults, inputId: "s-delivery-promise-modal-search", onItemSelected: (e) => {
+                this.cityPendingSelection = e.detail;
+            }, onSearchInput: (e) => {
+                this.handleCitySearch(e.detail);
+            } })));
     }
     renderCityChangeModal() {
         if (this.isLoginCycleEnabled)
@@ -406,15 +413,15 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
         "cities": [32],
         "selectedCity": [32],
         "isLoadingCities": [32],
-        "modalSearchQuery": [32],
         "cityPendingSelection": [32],
-        "isCityPopoverOpen": [32]
+        "modalCities": [32],
+        "isSearchingCities": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-delivery-promise", "salla-button", "salla-loading", "salla-modal", "salla-skeleton"];
+    const components = ["salla-delivery-promise", "salla-button", "salla-loading", "salla-modal", "salla-searchable-dropdown", "salla-skeleton"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-delivery-promise":
             if (!customElements.get(tagName)) {
@@ -423,15 +430,20 @@ function defineCustomElement$1() {
             break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-searchable-dropdown":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/esm/{filepond-Crf00c7G.js → filepond--H5Je975.js}

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

package/dist/esm/{filepond-plugin-file-poster-B3uKBJe-.js → filepond-plugin-file-poster-C7qRk6qw.js}

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

package/dist/esm/{filepond-plugin-file-validate-size-CWVDRdsV.js → filepond-plugin-file-validate-size-DFV1VUlm.js}

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

package/dist/esm/{filepond-plugin-file-validate-type-VQGNZwF9.js → filepond-plugin-file-validate-type-7MrehGt0.js}

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

package/dist/esm/{filepond-plugin-image-edit-DOhXVk8j.js → filepond-plugin-image-edit-BACaZzDG.js}

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

package/dist/esm/{filepond-plugin-image-exif-orientation-Co8jzTVW.js → filepond-plugin-image-exif-orientation-Ckgi2RjT.js}

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

package/dist/esm/{filepond-plugin-image-preview-gQWAQlCp.js → filepond-plugin-image-preview-CXxZ1JZ2.js}

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

package/dist/esm/{functions-D8zpoRMj.js → functions-le7E3Z-D.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from './index-XEcnGv2r.js';
+import { h } from './index-CU41HKIU.js';
 
 function nearestLowerMultiple(number, multipleOf = window.matchMedia('(min-width: 768px)').matches ? 3 : 2) {
     return number < multipleOf ? number : number - (number % multipleOf);

package/dist/esm/{index-DX6k_dv6.js → index-C-JheRmw.js}

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