@salla.sa/twilight-components 2.14.525 → 2.14.526

package/dist/cjs/{vanilla-picker-CHauTUo6.js → vanilla-picker-DOFw7Ga1.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-_SuY2Qj7.js');
+var index = require('./index-CL2v3rWe.js');
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/collection/components/salla-bullet-delivery/salla-bullet-delivery.js

@@ -68,6 +68,9 @@ export class SallaBulletDelivery {
         this.gmapRef = null;
         /** Guards against re-prompting for geolocation each time the map (re)initializes within one flow. */
         this.autoGeolocationTriggered = false;
+        /** Identifies the latest reverse-geocode call so a resolved-but-superseded callback (same
+         *  coordinates re-picked, or the map left) can be told apart from the current one. */
+        this.geocodeRequestId = 0;
         // Core state
         this.activeTab = "address";
         this.isLoggedIn = false;
@@ -125,6 +128,8 @@ export class SallaBulletDelivery {
         this.mapReady = false;
         this.mapStep = 'map';
         this.addressDescription = '';
+        /** True while reverse-geocoding a map-click/geolocation pick (no place from the map component itself). */
+        this.reverseGeocoding = false;
         this.newAddressForm = {
             ...SallaBulletDelivery.INITIAL_ADDRESS_FORM,
         };
@@ -203,9 +208,10 @@ export class SallaBulletDelivery {
             const detail = event.detail;
             if (!detail?.position?.lat || !detail?.position?.lng)
                 return;
+            const { lat, lng } = detail.position;
             this.mapLocationData = {
-                lat: detail.position.lat,
-                lng: detail.position.lng,
+                lat,
+                lng,
                 shortAddress: detail.place?.placeId ?? detail.place?.place_id ?? undefined,
                 formattedAddress: detail.place?.formattedAddress ?? detail.place?.formatted_address ?? undefined,
             };
@@ -216,6 +222,16 @@ export class SallaBulletDelivery {
                 if (marker)
                     marker.gmpDraggable = false;
             }, 100);
+            // Map click / geolocation / programmatic moves don't resolve a `place` (unlike search-select),
+            // so fall back to reverse geocoding — otherwise the confirmation card renders with a blank address.
+            if (!this.mapLocationData.formattedAddress) {
+                this.reverseGeocodeLocation(lat, lng);
+            }
+            else {
+                // A place was already resolved (search/autocomplete select) — invalidate any reverse-geocode
+                // still in flight for a previous map-click pick so its callback can't later overwrite this.
+                this.invalidatePendingGeocode();
+            }
         };
         this.handleMapReady = () => {
             this.mapReady = true;
@@ -271,6 +287,7 @@ export class SallaBulletDelivery {
                     this.viewMode = "main";
                     this.districtName = "";
                     this.mapLocationData = null;
+                    this.invalidatePendingGeocode();
                     this.mapStep = 'map';
                     this.addressDescription = '';
                 }
@@ -485,6 +502,8 @@ export class SallaBulletDelivery {
     }
     resetState() {
         this.viewMode = "main";
+        this.mapLocationData = null;
+        this.invalidatePendingGeocode();
         this.autoGeolocationTriggered = false;
         this.selectedCountry = null;
         this.selectedRegion = null;
@@ -1169,6 +1188,7 @@ export class SallaBulletDelivery {
     async handleAddNewAddress() {
         this.viewMode = "add-address";
         this.mapLocationData = null;
+        this.invalidatePendingGeocode();
         this.autoGeolocationTriggered = false;
         this.fetchAddressToken();
         const intent = this.getStoredIntent();
@@ -1190,6 +1210,7 @@ export class SallaBulletDelivery {
     handleBackToAddressList() {
         this.viewMode = "main";
         this.mapLocationData = null;
+        this.invalidatePendingGeocode();
         this.mapStep = 'map';
         this.addressDescription = '';
         this.autoGeolocationTriggered = false;
@@ -1217,6 +1238,51 @@ export class SallaBulletDelivery {
             this.loadingToken = false;
         }
     }
+    /** Invalidate any reverse-geocode currently in flight — call whenever the map pick is abandoned
+     *  (tab switch, modal close/reopen) so a stale callback can't resurrect old location state later. */
+    invalidatePendingGeocode() {
+        this.reverseGeocoding = false;
+        this.geocodeRequestId++;
+    }
+    /** Falls back to a "lat, lng" label when no address text is available — keeps the customer able
+     *  to confirm the pin they placed instead of being stuck with a blank address and no recovery path. */
+    applyCoordsFallback(lat, lng) {
+        this.mapLocationData = {
+            ...this.mapLocationData,
+            formattedAddress: this.mapLocationData?.formattedAddress ?? `${lat.toFixed(6)}, ${lng.toFixed(6)}`,
+        };
+    }
+    /** Reverse-geocode a lat/lng into a display address — mirrors salla-map.tsx's getPositionAddress. */
+    reverseGeocodeLocation(lat, lng) {
+        const Geocoder = window.google?.maps?.Geocoder;
+        if (!Geocoder) {
+            // No Geocoder available at all — nothing pending to invalidate, but bump the id anyway in
+            // case an earlier request (started while the SDK was still available) is still in flight.
+            this.geocodeRequestId++;
+            this.applyCoordsFallback(lat, lng);
+            return;
+        }
+        this.reverseGeocoding = true;
+        const requestId = ++this.geocodeRequestId;
+        new Geocoder().geocode({ location: { lat, lng } }, (results, status) => {
+            // Ignore stale responses — a newer pick (even at the same coordinates) started since,
+            // or the map was left and `geocodeRequestId` was bumped to invalidate this call.
+            if (requestId !== this.geocodeRequestId)
+                return;
+            this.reverseGeocoding = false;
+            if (status === window.google.maps.GeocoderStatus.OK && results?.[0]) {
+                this.mapLocationData = {
+                    ...this.mapLocationData,
+                    formattedAddress: results[0].formatted_address,
+                    shortAddress: this.mapLocationData?.shortAddress ?? results[0].place_id,
+                };
+            }
+            else {
+                log('Reverse geocoding failed for map location', status);
+                this.applyCoordsFallback(lat, lng);
+            }
+        });
+    }
     /** Bias autocomplete toward the current selection (or the initial center) — mirrors checkout's map-page. */
     updateLocationBias() {
         if (!this.gmapRef)
@@ -1229,6 +1295,11 @@ export class SallaBulletDelivery {
     hasMapLocation() {
         return this.mapLocationData?.lat != null && this.mapLocationData?.lng != null;
     }
+    /** Only let the user advance past the map step once a real address resolved — otherwise a failed
+     *  reverse-geocode (bad status, no results) would silently admit a blank confirmation card. */
+    canConfirmMapLocation() {
+        return this.hasMapLocation() && !this.reverseGeocoding && !!this.mapLocationData?.formattedAddress;
+    }
     // TODO: replace with actual setting key once dashboard setting is built
     get isMapSettingEnabled() {
         return Salla.config.get('store.settings.bullet_delivery.settings.map_enabled');
@@ -1291,6 +1362,9 @@ export class SallaBulletDelivery {
             this.activeTab = tab;
             if (this.viewMode === 'add-address') {
                 this.viewMode = 'main';
+                // Leaving the add-address map flow abandons any reverse-geocode still in flight —
+                // otherwise its callback could resurrect stale location state if the customer returns.
+                this.invalidatePendingGeocode();
             }
             this.showCartWillBeClearedBanner = false;
             this.allocationOutOfCoverageMessage = null;
@@ -2082,6 +2156,7 @@ export class SallaBulletDelivery {
         }
         const hasMapLoc = this.hasMapLocation();
         const isConfirmStep = this.mapStep === 'confirm' && hasMapLoc;
+        const canAdvanceToConfirm = this.canConfirmMapLocation();
         const submitLabel = isConfirmStep
             ? (this.savingAddress
                 ? Salla.lang.get("pages.checkout.loading")
@@ -2089,13 +2164,13 @@ export class SallaBulletDelivery {
             : Salla.lang.get('pages.checkout.confirm_location');
         const handleSubmit = (e) => {
             e.preventDefault();
-            if (!isConfirmStep && hasMapLoc) {
+            if (!isConfirmStep && canAdvanceToConfirm) {
                 this.mapStep = 'confirm';
                 return;
             }
             this.handleSubmitAddAddress(e);
         };
-        return (h("form", { onSubmit: handleSubmit }, this.renderGuestDeliveryForm(), h("div", { class: "s-bullet-delivery-form-actions s-bullet-delivery-form-actions--single", style: { padding: '24px' } }, h("salla-button", { type: "submit", loading: this.savingAddress, disabled: !hasMapLoc || this.savingAddress, width: "wide" }, submitLabel), !this.isLoggedIn && (h("button", { type: "button", class: "s-bullet-delivery-login-prompt", onClick: () => this.handleLogin() }, Salla.lang.get('pages.checkout.login_to_use_saved_addresses'))))));
+        return (h("form", { onSubmit: handleSubmit }, this.renderGuestDeliveryForm(), h("div", { class: "s-bullet-delivery-form-actions s-bullet-delivery-form-actions--single", style: { padding: '24px' } }, h("salla-button", { type: "submit", loading: this.savingAddress, disabled: isConfirmStep ? this.savingAddress : !canAdvanceToConfirm, width: "wide" }, submitLabel), !this.isLoggedIn && (h("button", { type: "button", class: "s-bullet-delivery-login-prompt", onClick: () => this.handleLogin() }, Salla.lang.get('pages.checkout.login_to_use_saved_addresses'))))));
     }
     renderBranchSearch() {
         return (h("div", { class: "s-bullet-delivery-branch-search" }, h("div", { class: "s-bullet-delivery-search-row" }, h("div", { class: "s-bullet-delivery-search s-bullet-delivery-branch-search-wrap" }, h("span", { class: "s-bullet-delivery-search-icon s-bullet-delivery-branch-search-icon", innerHTML: Search, "aria-hidden": "true" }), h("input", { type: "text", class: "s-bullet-delivery-branch-search-input form-input", placeholder: Salla.lang.get("pages.checkout.search_for_city_or_branch"), value: this.branchSearchQuery, onInput: (e) => this.handleBranchSearch(e), autocomplete: "off" })), h("button", { type: "button", class: {
@@ -2147,7 +2222,7 @@ export class SallaBulletDelivery {
         let submitLabel;
         if (mapMode) {
             if (this.mapStep === 'map') {
-                canSubmit = hasMapLoc;
+                canSubmit = this.canConfirmMapLocation();
                 submitLabel = Salla.lang.get('pages.checkout.confirm_location');
             }
             else {
@@ -2172,7 +2247,7 @@ export class SallaBulletDelivery {
         const hasAddressesToGoBack = this.savedAddresses.length > 0 || hasSessionAddressIntent(this.getStoredIntent());
         const handleFormSubmit = (e) => {
             e.preventDefault();
-            if (mapMode && this.mapStep === 'map' && hasMapLoc) {
+            if (mapMode && this.mapStep === 'map' && canSubmit) {
                 this.mapStep = 'confirm';
                 return;
             }
@@ -2512,6 +2587,7 @@ export class SallaBulletDelivery {
             "mapReady": {},
             "mapStep": {},
             "addressDescription": {},
+            "reverseGeocoding": {},
             "newAddressForm": {}
         };
     }

package/dist/collection/components/salla-map/salla-map.css

@@ -1,4 +1,23 @@
 /*
 * Salla Location Component: location popup modal
 * You can use these classes to target the elements in the component.
-*/
+*/
+.s-map-wrapper {
+  position: relative;
+}
+.s-map-value-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.s-map-wrapper.s-has-error .s-map-location-button {
+  outline: 2px solid rgb(248, 113, 113);
+  outline-offset: 2px;
+}

package/dist/collection/components/salla-map/salla-map.js

@@ -60,8 +60,45 @@ export class SallaMap {
     formatAddress(address) {
         return address.length > 25 ? address.substring(0, 25) + '...' : address;
     }
+    /** Treat numeric `0` as valid; reject null/undefined/blank/NaN (incl. whitespace). */
+    hasCoordinate(value) {
+        if (value === null || value === undefined) {
+            return false;
+        }
+        if (typeof value === 'number') {
+            return Number.isFinite(value);
+        }
+        const trimmed = String(value).trim();
+        if (trimmed === '') {
+            return false;
+        }
+        return Number.isFinite(Number(trimmed));
+    }
+    /**
+     * Prefer confirmed selection; fall back to lat/lng props so cart/order-form
+     * options with an existing location keep a valid form value before geocode finishes.
+     */
     getLatLng() {
-        return this.selectedLat && this.selectedLng ? `${this.selectedLat}, ${this.selectedLng}` : null;
+        const lat = this.hasCoordinate(this.selectedLat) ? this.selectedLat : this.lat;
+        const lng = this.hasCoordinate(this.selectedLng) ? this.selectedLng : this.lng;
+        return this.hasCoordinate(lat) && this.hasCoordinate(lng) ? `${lat}, ${lng}` : '';
+    }
+    syncMapInputValue() {
+        if (!this.mapInput) {
+            return;
+        }
+        this.mapInput.value = this.getLatLng();
+        this.mapInput.setCustomValidity('');
+    }
+    focusLocateControl() {
+        const locateButton = this.host.querySelector('.s-map-location-button');
+        locateButton?.focus?.();
+    }
+    componentWillLoad() {
+        if (this.hasCoordinate(this.lat) && this.hasCoordinate(this.lng)) {
+            this.selectedLat = this.lat;
+            this.selectedLng = this.lng;
+        }
     }
     getPositionAddress(location, submit = false) {
         // get address and set it to search input
@@ -200,8 +237,9 @@ export class SallaMap {
         }
     }
     componentDidLoad() {
+        this.syncMapInputValue();
         // if lat and lng provided then get the formatted address
-        if (this.lat && this.lng) {
+        if (this.hasCoordinate(this.lat) && this.hasCoordinate(this.lng)) {
             // get address
             fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${this.lat},${this.lng}&key=${this.apiKey}&language=${salla.config.get('user.language_code') ||
                 document.documentElement.lang ||
@@ -211,20 +249,42 @@ export class SallaMap {
                 if (res.status === 'OK') {
                     this.formattedAddress = res.results[0].formatted_address;
                     this.searchInputValue = res.results[0].formatted_address;
-                    this.searchInput.value = res.results[0].formatted_address;
+                    if (this.searchInput) {
+                        this.searchInput.value = res.results[0].formatted_address;
+                    }
                     this.selectedLng = this.lng;
                     this.selectedLat = this.lat;
+                    this.syncMapInputValue();
                 }
             });
         }
         this.mapInput.addEventListener('invalid', e => {
+            // Keep native constraint validation, but move focus to the visible control
+            // so Chromium does not throw "An invalid form control is not focusable".
+            e.preventDefault();
+            this.host.classList.add('s-has-error');
+            this.focusLocateControl();
             this.invalidInput.emit(e);
         });
         this.mapInput.addEventListener('input', () => {
             this.mapInput.setCustomValidity('');
-            this.mapInput.reportValidity();
+            this.host.classList.remove('s-has-error');
         });
     }
+    /**
+     * Validate the selected location when the field is required.
+     * Native required still applies on a focusable visually-hidden input; this method
+     * syncs value first and routes focus to the visible locate control via `invalid`.
+     */
+    async reportValidity() {
+        this.syncMapInputValue();
+        if (!this.mapInput || !this.required || this.readonly || this.getLatLng()) {
+            this.mapInput?.setCustomValidity('');
+            this.host.classList.remove('s-has-error');
+            return true;
+        }
+        return this.mapInput.reportValidity();
+    }
     /**
      * Open location component
      */
@@ -258,12 +318,8 @@ export class SallaMap {
                         this.selectedLat = points.lat;
                         this.selectedLng = points.lng;
                         this.getPositionAddress(new google.maps.LatLng(points.lat, points.lng), true);
-                        if (!this.selectedLat || !this.selectedLng) {
-                            this.mapInput.value = null;
-                        }
-                        else {
-                            this.mapInput.value = `${this.selectedLat}, ${this.selectedLng}`;
-                        }
+                        this.syncMapInputValue();
+                        this.host.classList.remove('s-has-error');
                         this.mapInput.dispatchEvent(new window.Event('change', { bubbles: true }));
                         this.locationModal.close();
                     } }, this.confirmButtonTitle)
@@ -271,11 +327,11 @@ export class SallaMap {
     }
     // render
     render() {
-        return (h(Host, { key: '47e8a611d43d82613c87b8fce6742f318add9b74', class: "s-map-wrapper" }, h("salla-modal", { key: 'f21d703131da061ba0d5a991a9d73a42062e293b', class: "s-map-modal-wrapper", noPadding: true, ref: modal => {
+        return (h(Host, { key: '20ed1a1d4099e817164c3764341d473c1b735add', class: "s-map-wrapper" }, h("salla-modal", { key: '77309d82d11bbae677a935aef0e02588c5f9fbfa', class: "s-map-modal-wrapper", noPadding: true, ref: modal => {
                 this.locationModal = modal;
-            } }, this.getLocationModal()), h("slot", { key: '21754ee3e232c0ea2a0b0d89fd43fe136eca19dd', name: "button" }, h("salla-button", { key: 'dffc15443da0a75f9cc216edb86b58e0f661bef9', onClick: () => {
+            } }, this.getLocationModal()), h("slot", { key: '57e6d352f42a3321a98925dd4136eaf0fdbb06b0', name: "button" }, h("salla-button", { key: 'a0c39395b18ca41f2ea31c5c5729b2ba20c17a16', onClick: () => {
                 this.open();
-            }, color: "primary", class: "s-map-location-button" }, h("span", { key: '868ac864b392c39cf1314ecfd3d1e45365daad30', class: "s-map-location-icon", innerHTML: this.formattedAddress ? Edit : Location }), this.formattedAddress ? (h("div", null, this.locateButtonEdit, " | ", this.formatAddress(this.formattedAddress))) : (this.locateButtonTitle))), h("input", { key: 'db8f6bbbe9a89debc626402983a98efc34b2130c', class: "s-hidden", name: this.name, required: this.required, value: this.getLatLng(), ref: color => this.mapInput = color })));
+            }, color: "primary", class: "s-map-location-button" }, h("span", { key: 'b9478a06c198812edeacab794fb63699ea72fd6b', class: "s-map-location-icon", innerHTML: this.formattedAddress ? Edit : Location }), this.formattedAddress ? (h("div", null, this.locateButtonEdit, " | ", this.formatAddress(this.formattedAddress))) : (this.locateButtonTitle))), h("input", { key: 'd1619a934c72218d4d00b651e95743ad8d14a7a2', class: "s-map-value-input", name: this.name, required: this.required, value: this.getLatLng(), tabIndex: -1, "aria-hidden": "true", ref: input => (this.mapInput = input) })));
     }
     static get is() { return "salla-map"; }
     static get originalStyleUrls() {
@@ -570,6 +626,23 @@ export class SallaMap {
     }
     static get methods() {
         return {
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validate the selected location when the field is required.\nNative required still applies on a focusable visually-hidden input; this method\nsyncs value first and routes focus to the visible locate control via `invalid`.",
+                    "tags": []
+                }
+            },
             "open": {
                 "complexType": {
                     "signature": "() => Promise<HTMLElement>",

package/dist/collection/components/salla-product-options/salla-product-options.js

@@ -190,6 +190,14 @@ export class SallaProductOptions {
             if (el.disabled || el.closest('.hidden')) {
                 continue;
             }
+            // Prefer map component validation so focus lands on the locate button.
+            const map = el.closest('salla-map');
+            if (map && typeof map.reportValidity === 'function') {
+                if (!(await map.reportValidity())) {
+                    pass = false;
+                }
+                continue;
+            }
             //if there is only one invalid option, return false
             if ('reportValidity' in el && !el.reportValidity()) {
                 pass = false;
@@ -252,7 +260,7 @@ export class SallaProductOptions {
         const optionElement = event.target.closest('.s-product-options-option');
         if (event.target.value ||
             ((option.type === DisplayType.FILE || option.type === DisplayType.IMAGE) && event.type === 'added') ||
-            (option.type === DisplayType.MAP && event.type === 'selected' && (event.target.lat && event.target.lng))) {
+            (option.type === DisplayType.MAP && event.type === 'selected' && Number.isFinite(Number(event.target.lat)) && Number.isFinite(Number(event.target.lng)))) {
             setTimeout(() => {
                 optionElement.classList.remove('s-product-options-option-error');
             }, 200);
@@ -396,9 +404,19 @@ export class SallaProductOptions {
         return true;
     }
     getLatLng(value, type) {
-        return value
-            ? value.split(',')[type === 'lat' ? 0 : 1]
-            : '';
+        if (typeof value !== 'string' || !value.trim()) {
+            return undefined;
+        }
+        const segment = value.split(',')[type === 'lat' ? 0 : 1];
+        if (segment == null) {
+            return undefined;
+        }
+        const trimmed = segment.trim();
+        if (trimmed === '') {
+            return undefined;
+        }
+        const parsed = Number(trimmed);
+        return Number.isFinite(parsed) ? parsed : undefined;
     }
     getDisplayForType(option) {
         if (this[`${option.type}Option`]) {
@@ -763,7 +781,7 @@ export class SallaProductOptions {
     }
     //@ts-ignore
     mapOption(option) {
-        return h("salla-map", { zoom: 15, lat: this.getLatLng(option.value, 'lat'), lng: this.getLatLng(option.value, 'lng'), name: this.generateInputName(option.id), searchable: true, required: option.required, onInvalidInput: (e) => this.invalidHandler(e, option), onSelected: e => this.changedHandler(e, option) });
+        return h("salla-map", { zoom: 15, lat: this.getLatLng(option.value, 'lat'), lng: this.getLatLng(option.value, 'lng'), name: this.generateInputName(option.id), searchable: true, required: !option.visibility_condition && option.required, onInvalidInput: (e) => this.invalidHandler(e, option), onSelected: e => this.changedHandler(e, option) });
     }
     colorPickerOption(option) {
         return h("salla-color-picker", { onSubmitted: e => this.changedHandler(e, option), name: this.generateInputName(option.id), required: !option.visibility_condition && option.required, onInvalidInput: (e) => this.invalidHandler(e, option), color: option.value });
@@ -1255,6 +1273,10 @@ export class SallaProductOptions {
                         "HTMLInputElement": {
                             "location": "global",
                             "id": "global::HTMLInputElement"
+                        },
+                        "HTMLSallaMapElement": {
+                            "location": "global",
+                            "id": "global::HTMLSallaMapElement"
                         }
                     },
                     "return": "Promise<boolean>"

package/dist/collection/components/salla-tel-input/salla-tel-input.css

@@ -29,7 +29,7 @@
   padding-right: 15px !important;
   margin-left: 0 !important;
 }
-.iti__flag-container {
+.iti__country-container {
   width: 100%;
   position: absolute;
   top: 0;
@@ -37,7 +37,7 @@
   left: 0;
   padding: 1px;
 }
-.iti__selected-flag {
+.iti__selected-country {
   width: 80px;
   z-index: 1;
   position: relative;
@@ -48,11 +48,13 @@
   padding: 0 15px;
   box-shadow: none !important;
   outline: none !important;
+  background: transparent;
+  border: 0;
 }
-.ltr .iti__selected-flag {
+.ltr .iti__selected-country, [dir=ltr] .iti__selected-country {
   justify-content: flex-end;
 }
-.iti__selected-flag:before {
+.iti__selected-country:before {
   content: "";
   display: block;
   width: 1px;
@@ -62,9 +64,14 @@
   top: 15%;
   right: 0;
 }
-.iti__selected-flag .iti__flag {
+.iti__selected-country .iti__flag {
   display: none;
 }
+.iti__selected-country-primary {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
 .iti__arrow {
   width: 15px;
   height: 15px;
@@ -134,10 +141,11 @@
     white-space: normal;
   }
 }
-.iti__flag-box {
+.iti__country .iti__flag {
   display: inline-block;
   width: 20px;
   margin: 0 0 0 5px;
+  flex-shrink: 0;
 }
 .iti__divider {
   padding-bottom: 5px;
@@ -157,7 +165,7 @@
 .iti__country.iti__highlight {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.iti__flag-box, .iti__country-name, .iti__dial-code {
+.iti__country .iti__flag, .iti__country-name, .iti__dial-code {
   vertical-align: middle;
 }
 .iti__country-name {
@@ -167,21 +175,21 @@
   white-space: normal;
   line-height: 1.3;
 }
-.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
+.iti--allow-dropdown .iti__country-container {
   left: 0;
 }
-.iti--allow-dropdown .iti__flag-container:hover {
+.iti--allow-dropdown .iti__country-container:hover {
   cursor: pointer;
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
+.iti--allow-dropdown input[disabled] + .iti__country-container:hover,
+.iti--allow-dropdown input[readonly] + .iti__country-container:hover {
   cursor: default;
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
+.iti--allow-dropdown input[disabled] + .iti__country-container:hover .iti__selected-country,
+.iti--allow-dropdown input[readonly] + .iti__country-container:hover .iti__selected-country {
   background-color: transparent;
 }
-.iti--separate-dial-code .iti__selected-dial-code {
+.iti__selected-dial-code {
   unicode-bidi: plaintext;
   direction: ltr;
   letter-spacing: 1px;
@@ -197,19 +205,19 @@
   cursor: pointer;
 }
 
-.iti-mobile .iti--container {
+.iti--container.iti--fullscreen-popup {
   inset: 0;
   margin: 20px;
   width: calc(100% - 40px);
   position: fixed;
   z-index: 9999;
 }
-.iti-mobile .iti__country-list {
+.iti--container.iti--fullscreen-popup .iti__country-list {
   max-height: 100%;
   width: 100%;
   inset: 0;
 }
-.iti-mobile .iti__country {
+.iti--container.iti--fullscreen-popup .iti__country {
   padding: 10px 10px;
   line-height: 1.5em;
 }

package/dist/collection/components/salla-tel-input/salla-tel-input.js

@@ -51,11 +51,17 @@ export class SallaTelInput {
             this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
         });
     }
+    // Init is async and v26 loads the validation utils lazily; both must settle.
+    async whenReady() {
+        await this.initPromise;
+        await this.utilsReady;
+    }
     /**
      * Get current values
      * @return {{mobile:number,countryCode:'SA'|string}}
      */
     async getValues() {
+        await this.initPromise;
         return {
             [this.name]: this.phone = this.phoneInput.value,
             countryCode: this.countryCode = this.countryCodeInput.value,
@@ -67,6 +73,7 @@ export class SallaTelInput {
      * @return {boolean}
      */
     async isValid() {
+        await this.whenReady();
         this.reset();
         if (this.iti.isValidNumber())
             return true;
@@ -77,7 +84,7 @@ export class SallaTelInput {
         }
         this.phoneInput.classList.add("s-has-error");
         let errorCode = this.iti.getValidationError();
-        this.errorMsg.innerText = this.errorMap[errorCode] || '';
+        this.errorMsg.innerText = this.errorMap[errorCode] || this.invalidNumber || '';
         salla.logger.info('Phone number (' + this.countryCode + ' - ' + this.phone + ') is not valid, error code ' + errorCode);
         return false;
     }
@@ -87,14 +94,22 @@ export class SallaTelInput {
         salla.helpers.inputDigitsOnly(this.phoneInput);
         this.iti = this.TelInput(this.phoneInput, {
             initialCountry: this.countryCode?.toLowerCase() || 'sa',
-            preferredCountries: ['sa', 'ae', 'kw', 'bh', 'qa', 'iq', 'om', 'ye', 'eg', 'jo', 'ps', 'sd', 'lb', 'dz', 'tn', 'ma', 'ly'],
+            countryOrder: ['sa', 'ae', 'kw', 'bh', 'qa', 'iq', 'om', 'ye', 'eg', 'jo', 'ps', 'sd', 'lb', 'dz', 'tn', 'ma', 'ly'],
             excludeCountries: ['sy', 'ir', 'cu', 'kp'],
             formatOnDisplay: false,
             separateDialCode: true,
             autoPlaceholder: 'aggressive',
-            utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/21.2.7/js/utils.min.js',
+            // v26 adds a country-search box to the dropdown by default. Keep it off to
+            // preserve the previous (v18) dropdown UX and avoid shipping an unstyled input.
+            countrySearch: false,
+            // v26 dropped the `utilsScript` URL option in favour of `loadUtils`. We load the
+            // utils bundled with the installed package as a lazy chunk (no CDN, version-locked),
+            // which carries the up-to-date libphonenumber metadata (e.g. Oman 7[3-5] mobiles).
+            loadUtils: () => import('intl-tel-input/utils'),
             dropdownContainer: this.host
         });
+        // Rejects if the lazy utils chunk fails; swallow so validation still runs.
+        this.utilsReady = this.iti.promise.catch(() => { });
         this.autofocus && this.phoneInput.focus();
         this.phoneInput.addEventListener("countrychange", () => {
             let data = this.iti.getSelectedCountryData();
@@ -123,10 +138,11 @@ export class SallaTelInput {
         }
     }
     render() {
-        return (h(Host, { key: '727fa47d71bd8fd98f76c66b3bafb2348a586303', class: "s-tel-input" }, h("input", { key: '19f5d3e2ff8902733e21f39038f716b18ae065ae', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: 'ad6b735fa4d5574b8717f460171c13a56a031451', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '07c8732dc276613fc5ed2928a2d47af51c49d942', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+        return (h(Host, { key: '1b928e13a8d7784cba93a8a9295d5e2da59380ec', class: "s-tel-input" }, h("input", { key: '351a4e2ba8865b613a7c52127ef312f834116a59', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: 'cac78f5eede19008d46a126c8c96cd963947de1f', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '7aedcb3f86d491f4789226f12812c7023d749eba', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
     }
     componentDidLoad() {
-        this.initTelInput();
+        this.initPromise = this.initTelInput();
+        this.initPromise.catch(() => { });
     }
     static get is() { return "salla-tel-input"; }
     static get originalStyleUrls() {