@salla.sa/twilight-components 2.14.525 → 2.14.527

package/dist/components/salla-basket-gap.js

@@ -265,10 +265,11 @@ const SallaBasketGap$1 = /*@__PURE__*/ proxyCustomElement(class SallaBasketGap e
         const discountLabel = this.getDiscountLabel(product);
         return (h("div", { key: product.id, class: "s-basket-gap-card" }, h("a", { href: product.url, class: "s-basket-gap-card-image" }, h("img", { class: "lazy", src: this.placeholder, "data-src": product.image?.url, alt: product.image?.alt || product.name })), h("div", { class: "s-basket-gap-card-info" }, h("h3", { class: "s-basket-gap-card-name" }, h("a", { href: product.url }, product.name)), product.is_on_sale
             ? h("div", { class: "s-basket-gap-card-sale-price" }, h("span", { innerHTML: salla.money(product.sale_price) }), h("del", { innerHTML: salla.money(product.regular_price) }))
-            : h("span", { class: "s-basket-gap-card-price", innerHTML: salla.money(product.price) }), product.weight_label && (h("span", { class: "s-basket-gap-card-weight" }, this.weightLabel, " ", product.weight_label))), (product.promotion_title || product.discount_ends || product.is_on_sale) && (h("div", { class: "s-basket-gap-card-offer" }, h("i", { class: "sicon-gift" }), discountLabel && h("span", null, discountLabel), product.discount_ends && [
-            h("salla-count-down", { date: this.formatDate(product.discount_ends), "end-of-day": true, digits: "en" }),
+            : h("span", { class: "s-basket-gap-card-price", innerHTML: salla.money(product.price) }), product.weight_label && (h("span", { class: "s-basket-gap-card-weight" }, this.weightLabel, " ", product.weight_label))), h("div", { class: "s-basket-gap-card-actions" }, (product.promotion_title || product.discount_ends || product.is_on_sale) && (h("div", { class: "s-basket-gap-card-offer" }, h("i", { class: "sicon-gift" }), discountLabel && h("span", null, discountLabel), product.discount_ends && [
+            // auto-segments drops the days box under 24h left, and the hours box under 1h.
+            h("salla-count-down", { date: this.formatDate(product.discount_ends), "end-of-day": true, digits: "en", "auto-segments": true }),
             h("i", { class: "sicon-alarm" }),
-        ])), h("salla-add-product-button", { class: "s-basket-gap-card-btn", "product-id": product.id, "product-status": product.status, "product-type": product.type }, this.addToCartLabel)));
+        ])), h("salla-add-product-button", { class: "s-basket-gap-card-btn", "product-id": product.id, "product-status": product.status, "product-type": product.type }, this.addToCartLabel))));
     }
     render() {
         if (!this.canRender)

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

@@ -4866,6 +4866,9 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         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;
@@ -4923,6 +4926,8 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         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,
         };
@@ -5001,9 +5006,10 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
             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,
             };
@@ -5014,6 +5020,16 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
                 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;
@@ -5069,6 +5085,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
                     this.viewMode = "main";
                     this.districtName = "";
                     this.mapLocationData = null;
+                    this.invalidatePendingGeocode();
                     this.mapStep = 'map';
                     this.addressDescription = '';
                 }
@@ -5283,6 +5300,8 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
     }
     resetState() {
         this.viewMode = "main";
+        this.mapLocationData = null;
+        this.invalidatePendingGeocode();
         this.autoGeolocationTriggered = false;
         this.selectedCountry = null;
         this.selectedRegion = null;
@@ -5967,6 +5986,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
     async handleAddNewAddress() {
         this.viewMode = "add-address";
         this.mapLocationData = null;
+        this.invalidatePendingGeocode();
         this.autoGeolocationTriggered = false;
         this.fetchAddressToken();
         const intent = this.getStoredIntent();
@@ -5988,6 +6008,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
     handleBackToAddressList() {
         this.viewMode = "main";
         this.mapLocationData = null;
+        this.invalidatePendingGeocode();
         this.mapStep = 'map';
         this.addressDescription = '';
         this.autoGeolocationTriggered = false;
@@ -6015,6 +6036,51 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
             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)
@@ -6027,6 +6093,11 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
     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');
@@ -6089,6 +6160,9 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
             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;
@@ -6880,6 +6954,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         }
         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")
@@ -6887,13 +6962,13 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
             : 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$4("form", { onSubmit: handleSubmit }, this.renderGuestDeliveryForm(), h$4("div", { class: "s-bullet-delivery-form-actions s-bullet-delivery-form-actions--single", style: { padding: '24px' } }, h$4("salla-button", { type: "submit", loading: this.savingAddress, disabled: !hasMapLoc || this.savingAddress, width: "wide" }, submitLabel), !this.isLoggedIn && (h$4("button", { type: "button", class: "s-bullet-delivery-login-prompt", onClick: () => this.handleLogin() }, Salla.lang.get('pages.checkout.login_to_use_saved_addresses'))))));
+        return (h$4("form", { onSubmit: handleSubmit }, this.renderGuestDeliveryForm(), h$4("div", { class: "s-bullet-delivery-form-actions s-bullet-delivery-form-actions--single", style: { padding: '24px' } }, h$4("salla-button", { type: "submit", loading: this.savingAddress, disabled: isConfirmStep ? this.savingAddress : !canAdvanceToConfirm, width: "wide" }, submitLabel), !this.isLoggedIn && (h$4("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$4("div", { class: "s-bullet-delivery-branch-search" }, h$4("div", { class: "s-bullet-delivery-search-row" }, h$4("div", { class: "s-bullet-delivery-search s-bullet-delivery-branch-search-wrap" }, h$4("span", { class: "s-bullet-delivery-search-icon s-bullet-delivery-branch-search-icon", innerHTML: Search, "aria-hidden": "true" }), h$4("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$4("button", { type: "button", class: {
@@ -6945,7 +7020,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         let submitLabel;
         if (mapMode) {
             if (this.mapStep === 'map') {
-                canSubmit = hasMapLoc;
+                canSubmit = this.canConfirmMapLocation();
                 submitLabel = Salla.lang.get('pages.checkout.confirm_location');
             }
             else {
@@ -6970,7 +7045,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         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;
             }
@@ -7294,6 +7369,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         "mapReady": [32],
         "mapStep": [32],
         "addressDescription": [32],
+        "reverseGeocoding": [32],
         "newAddressForm": [32],
         "open": [64],
         "close": [64]

package/dist/components/salla-map2.js

@@ -432,7 +432,7 @@ class Loader {
 }
 Loader.CALLBACK_NAME = '_dk_google_maps_loader_cb';
 
-const sallaMapCss = "";
+const sallaMapCss = ".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}";
 
 const SallaMap = /*@__PURE__*/ proxyCustomElement(class SallaMap extends HTMLElement {
     constructor() {
@@ -491,8 +491,45 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class SallaMap extends HTMLEle
     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
@@ -631,8 +668,9 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class SallaMap extends HTMLEle
         }
     }
     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 ||
@@ -642,20 +680,42 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class SallaMap extends HTMLEle
                 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
      */
@@ -689,12 +749,8 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class SallaMap extends HTMLEle
                         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)
@@ -702,11 +758,11 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class SallaMap extends HTMLEle
     }
     // 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 : SILocation }), 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 : SILocation }), 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) })));
     }
     get host() { return this; }
     static get style() { return sallaMapCss; }
@@ -734,6 +790,7 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class SallaMap extends HTMLEle
         "mapElement": [32],
         "selectedLat": [32],
         "selectedLng": [32],
+        "reportValidity": [64],
         "open": [64]
     }]);
 function defineCustomElement() {

package/dist/components/salla-product-options2.js

@@ -363,6 +363,14 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
             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;
@@ -425,7 +433,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         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);
@@ -569,9 +577,19 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         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`]) {
@@ -936,7 +954,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
     }
     //@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 });

package/dist/components/salla-tel-input2.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const sallaTelInputCss = ".iti{width:100%;position:relative;display:inline-block}.iti *{box-sizing:border-box;-moz-box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;direction:ltr !important;margin-top:0 !important;margin-bottom:0 !important;padding-left:95px !important;padding-right:15px !important;margin-left:0 !important}.iti__flag-container{width:100%;position:absolute;top:0;bottom:0;left:0;padding:1px}.iti__selected-flag{width:80px;z-index:1;position:relative;display:flex;align-items:center;height:100%;float:left;padding:0 15px;box-shadow:none !important;outline:none !important}.ltr .iti__selected-flag{justify-content:flex-end}.iti__selected-flag:before{content:\"\";display:block;width:1px;height:70%;background:#eee;position:absolute;top:15%;right:0}.iti__selected-flag .iti__flag{display:none}.iti__arrow{width:15px;height:15px;line-height:15px;position:absolute;left:10px;top:50%;transform:translateY(-50%)}.iti__arrow:after{content:url(\"data:image/svg+xml,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><title>keyboard_arrow_down</title><path d='M9.875 11.104l6.125 6.125 6.125-6.125 1.875 1.875-8 8-8-8z'></path></svg>\");font-size:16px;color:#999;opacity:0.65}.iti__arrow--up:after{transform:rotate(180deg)}.iti__country-list{width:100%;max-height:160px;position:absolute;top:100%;left:0;z-index:2;list-style:none;margin:0;padding:0;margin:5px 0 0 0;border-radius:5px;box-shadow:0px 2px 4px 2px rgba(0, 0, 0, 0.05);border:1px solid #f5f7f9;background-color:white;white-space:nowrap;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.iti__country-list::-webkit-scrollbar{width:4px}.dark .iti__country-list{background-color:rgb(82, 82, 91);border-color:rgb(82, 82, 91)}.iti__country-list li{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;padding:8px 10px;transition:background-color 0.3s}.iti__country-list li span{font-size:12px}.iti__country-list li:hover,.iti__country-list li.highlighted{background-color:rgba(0, 0, 0, 0.05)}.iti__country-list--dropup{bottom:100%;top:unset;margin:0 0 5px 0}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px;margin:0 0 0 5px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #eee}.iti__country{padding:5px 10px;outline:none}.iti__dial-code{font-family:Arial;color:#999;unicode-bidi:plaintext;letter-spacing:1px}.iti__country.iti__highlight{background-color:rgba(0, 0, 0, 0.05)}.iti__flag-box,.iti__country-name,.iti__dial-code{vertical-align:middle}.iti__country-name{flex:auto;margin:0;padding:0 10px;white-space:normal;line-height:1.3}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{left:0}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-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{background-color:transparent}.iti--separate-dial-code .iti__selected-dial-code{unicode-bidi:plaintext;direction:ltr;letter-spacing:1px;font-family:\"Arial\", serif;font-size:13px}.iti--container{top:-18px !important;left:0 !important;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{inset:0;margin:20px;width:calc(100% - 40px);position:fixed;z-index:9999}.iti-mobile .iti__country-list{max-height:100%;width:100%;inset:0}.iti-mobile .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-size:5652px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:14px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cr{height:12px;background-position:-1115px 0px}.iti__flag.iti__cu{height:10px;background-position:-1137px 0px}.iti__flag.iti__cv{height:12px;background-position:-1159px 0px}.iti__flag.iti__cw{height:14px;background-position:-1181px 0px}.iti__flag.iti__cx{height:10px;background-position:-1203px 0px}.iti__flag.iti__cy{height:14px;background-position:-1225px 0px}.iti__flag.iti__cz{height:14px;background-position:-1247px 0px}.iti__flag.iti__de{height:12px;background-position:-1269px 0px}.iti__flag.iti__dg{height:10px;background-position:-1291px 0px}.iti__flag.iti__dj{height:14px;background-position:-1313px 0px}.iti__flag.iti__dk{height:15px;background-position:-1335px 0px}.iti__flag.iti__dm{height:10px;background-position:-1357px 0px}.iti__flag.iti__do{height:14px;background-position:-1379px 0px}.iti__flag.iti__dz{height:14px;background-position:-1401px 0px}.iti__flag.iti__ea{height:14px;background-position:-1423px 0px}.iti__flag.iti__ec{height:14px;background-position:-1445px 0px}.iti__flag.iti__ee{height:13px;background-position:-1467px 0px}.iti__flag.iti__eg{height:14px;background-position:-1489px 0px}.iti__flag.iti__eh{height:10px;background-position:-1511px 0px}.iti__flag.iti__er{height:10px;background-position:-1533px 0px}.iti__flag.iti__es{height:14px;background-position:-1555px 0px}.iti__flag.iti__et{height:10px;background-position:-1577px 0px}.iti__flag.iti__eu{height:14px;background-position:-1599px 0px}.iti__flag.iti__fi{height:12px;background-position:-1621px 0px}.iti__flag.iti__fj{height:10px;background-position:-1643px 0px}.iti__flag.iti__fk{height:10px;background-position:-1665px 0px}.iti__flag.iti__fm{height:11px;background-position:-1687px 0px}.iti__flag.iti__fo{height:15px;background-position:-1709px 0px}.iti__flag.iti__fr{height:14px;background-position:-1731px 0px}.iti__flag.iti__ga{height:15px;background-position:-1753px 0px}.iti__flag.iti__gb{height:10px;background-position:-1775px 0px}.iti__flag.iti__gd{height:12px;background-position:-1797px 0px}.iti__flag.iti__ge{height:14px;background-position:-1819px 0px}.iti__flag.iti__gf{height:14px;background-position:-1841px 0px}.iti__flag.iti__gg{height:14px;background-position:-1863px 0px}.iti__flag.iti__gh{height:14px;background-position:-1885px 0px}.iti__flag.iti__gi{height:10px;background-position:-1907px 0px}.iti__flag.iti__gl{height:14px;background-position:-1929px 0px}.iti__flag.iti__gm{height:14px;background-position:-1951px 0px}.iti__flag.iti__gn{height:14px;background-position:-1973px 0px}.iti__flag.iti__gp{height:14px;background-position:-1995px 0px}.iti__flag.iti__gq{height:14px;background-position:-2017px 0px}.iti__flag.iti__gr{height:14px;background-position:-2039px 0px}.iti__flag.iti__gs{height:10px;background-position:-2061px 0px}.iti__flag.iti__gt{height:13px;background-position:-2083px 0px}.iti__flag.iti__gu{height:11px;background-position:-2105px 0px}.iti__flag.iti__gw{height:10px;background-position:-2127px 0px}.iti__flag.iti__gy{height:12px;background-position:-2149px 0px}.iti__flag.iti__hk{height:14px;background-position:-2171px 0px}.iti__flag.iti__hm{height:10px;background-position:-2193px 0px}.iti__flag.iti__hn{height:10px;background-position:-2215px 0px}.iti__flag.iti__hr{height:10px;background-position:-2237px 0px}.iti__flag.iti__ht{height:12px;background-position:-2259px 0px}.iti__flag.iti__hu{height:10px;background-position:-2281px 0px}.iti__flag.iti__ic{height:14px;background-position:-2303px 0px}.iti__flag.iti__id{height:14px;background-position:-2325px 0px}.iti__flag.iti__ie{height:10px;background-position:-2347px 0px}.iti__flag.iti__il{height:15px;background-position:-2369px 0px}.iti__flag.iti__im{height:10px;background-position:-2391px 0px}.iti__flag.iti__in{height:14px;background-position:-2413px 0px}.iti__flag.iti__io{height:10px;background-position:-2435px 0px}.iti__flag.iti__iq{height:14px;background-position:-2457px 0px}.iti__flag.iti__ir{height:12px;background-position:-2479px 0px}.iti__flag.iti__is{height:15px;background-position:-2501px 0px}.iti__flag.iti__it{height:14px;background-position:-2523px 0px}.iti__flag.iti__je{height:12px;background-position:-2545px 0px}.iti__flag.iti__jm{height:10px;background-position:-2567px 0px}.iti__flag.iti__jo{height:10px;background-position:-2589px 0px}.iti__flag.iti__jp{height:14px;background-position:-2611px 0px}.iti__flag.iti__ke{height:14px;background-position:-2633px 0px}.iti__flag.iti__kg{height:12px;background-position:-2655px 0px}.iti__flag.iti__kh{height:13px;background-position:-2677px 0px}.iti__flag.iti__ki{height:10px;background-position:-2699px 0px}.iti__flag.iti__km{height:12px;background-position:-2721px 0px}.iti__flag.iti__kn{height:14px;background-position:-2743px 0px}.iti__flag.iti__kp{height:10px;background-position:-2765px 0px}.iti__flag.iti__kr{height:14px;background-position:-2787px 0px}.iti__flag.iti__kw{height:10px;background-position:-2809px 0px}.iti__flag.iti__ky{height:10px;background-position:-2831px 0px}.iti__flag.iti__kz{height:10px;background-position:-2853px 0px}.iti__flag.iti__la{height:14px;background-position:-2875px 0px}.iti__flag.iti__lb{height:14px;background-position:-2897px 0px}.iti__flag.iti__lc{height:10px;background-position:-2919px 0px}.iti__flag.iti__li{height:12px;background-position:-2941px 0px}.iti__flag.iti__lk{height:10px;background-position:-2963px 0px}.iti__flag.iti__lr{height:11px;background-position:-2985px 0px}.iti__flag.iti__ls{height:14px;background-position:-3007px 0px}.iti__flag.iti__lt{height:12px;background-position:-3029px 0px}.iti__flag.iti__lu{height:12px;background-position:-3051px 0px}.iti__flag.iti__lv{height:10px;background-position:-3073px 0px}.iti__flag.iti__ly{height:10px;background-position:-3095px 0px}.iti__flag.iti__ma{height:14px;background-position:-3117px 0px}.iti__flag.iti__mc{height:15px;background-position:-3139px 0px}.iti__flag.iti__md{height:10px;background-position:-3160px 0px}.iti__flag.iti__me{height:10px;background-position:-3182px 0px}.iti__flag.iti__mf{height:14px;background-position:-3204px 0px}.iti__flag.iti__mg{height:14px;background-position:-3226px 0px}.iti__flag.iti__mh{height:11px;background-position:-3248px 0px}.iti__flag.iti__mk{height:10px;background-position:-3270px 0px}.iti__flag.iti__ml{height:14px;background-position:-3292px 0px}.iti__flag.iti__mm{height:14px;background-position:-3314px 0px}.iti__flag.iti__mn{height:10px;background-position:-3336px 0px}.iti__flag.iti__mo{height:14px;background-position:-3358px 0px}.iti__flag.iti__mp{height:10px;background-position:-3380px 0px}.iti__flag.iti__mq{height:14px;background-position:-3402px 0px}.iti__flag.iti__mr{height:14px;background-position:-3424px 0px}.iti__flag.iti__ms{height:10px;background-position:-3446px 0px}.iti__flag.iti__mt{height:14px;background-position:-3468px 0px}.iti__flag.iti__mu{height:14px;background-position:-3490px 0px}.iti__flag.iti__mv{height:14px;background-position:-3512px 0px}.iti__flag.iti__mw{height:14px;background-position:-3534px 0px}.iti__flag.iti__mx{height:12px;background-position:-3556px 0px}.iti__flag.iti__my{height:10px;background-position:-3578px 0px}.iti__flag.iti__mz{height:14px;background-position:-3600px 0px}.iti__flag.iti__na{height:14px;background-position:-3622px 0px}.iti__flag.iti__nc{height:10px;background-position:-3644px 0px}.iti__flag.iti__ne{height:15px;background-position:-3666px 0px}.iti__flag.iti__nf{height:10px;background-position:-3686px 0px}.iti__flag.iti__ng{height:10px;background-position:-3708px 0px}.iti__flag.iti__ni{height:12px;background-position:-3730px 0px}.iti__flag.iti__nl{height:14px;background-position:-3752px 0px}.iti__flag.iti__no{height:15px;background-position:-3774px 0px}.iti__flag.iti__np{height:15px;background-position:-3796px 0px}.iti__flag.iti__nr{height:10px;background-position:-3811px 0px}.iti__flag.iti__nu{height:10px;background-position:-3833px 0px}.iti__flag.iti__nz{height:10px;background-position:-3855px 0px}.iti__flag.iti__om{height:10px;background-position:-3877px 0px}.iti__flag.iti__pa{height:14px;background-position:-3899px 0px}.iti__flag.iti__pe{height:14px;background-position:-3921px 0px}.iti__flag.iti__pf{height:14px;background-position:-3943px 0px}.iti__flag.iti__pg{height:15px;background-position:-3965px 0px}.iti__flag.iti__ph{height:10px;background-position:-3987px 0px}.iti__flag.iti__pk{height:14px;background-position:-4009px 0px}.iti__flag.iti__pl{height:13px;background-position:-4031px 0px}.iti__flag.iti__pm{height:14px;background-position:-4053px 0px}.iti__flag.iti__pn{height:10px;background-position:-4075px 0px}.iti__flag.iti__pr{height:14px;background-position:-4097px 0px}.iti__flag.iti__ps{height:10px;background-position:-4119px 0px}.iti__flag.iti__pt{height:14px;background-position:-4141px 0px}.iti__flag.iti__pw{height:13px;background-position:-4163px 0px}.iti__flag.iti__py{height:11px;background-position:-4185px 0px}.iti__flag.iti__qa{height:8px;background-position:-4207px 0px}.iti__flag.iti__re{height:14px;background-position:-4229px 0px}.iti__flag.iti__ro{height:14px;background-position:-4251px 0px}.iti__flag.iti__rs{height:14px;background-position:-4273px 0px}.iti__flag.iti__ru{height:14px;background-position:-4295px 0px}.iti__flag.iti__rw{height:14px;background-position:-4317px 0px}.iti__flag.iti__sa{height:14px;background-position:-4339px 0px}.iti__flag.iti__sb{height:10px;background-position:-4361px 0px}.iti__flag.iti__sc{height:10px;background-position:-4383px 0px}.iti__flag.iti__sd{height:10px;background-position:-4405px 0px}.iti__flag.iti__se{height:13px;background-position:-4427px 0px}.iti__flag.iti__sg{height:14px;background-position:-4449px 0px}.iti__flag.iti__sh{height:10px;background-position:-4471px 0px}.iti__flag.iti__si{height:10px;background-position:-4493px 0px}.iti__flag.iti__sj{height:15px;background-position:-4515px 0px}.iti__flag.iti__sk{height:14px;background-position:-4537px 0px}.iti__flag.iti__sl{height:14px;background-position:-4559px 0px}.iti__flag.iti__sm{height:15px;background-position:-4581px 0px}.iti__flag.iti__sn{height:14px;background-position:-4603px 0px}.iti__flag.iti__so{height:14px;background-position:-4625px 0px}.iti__flag.iti__sr{height:14px;background-position:-4647px 0px}.iti__flag.iti__ss{height:10px;background-position:-4669px 0px}.iti__flag.iti__st{height:10px;background-position:-4691px 0px}.iti__flag.iti__sv{height:12px;background-position:-4713px 0px}.iti__flag.iti__sx{height:14px;background-position:-4735px 0px}.iti__flag.iti__sy{height:14px;background-position:-4757px 0px}.iti__flag.iti__sz{height:14px;background-position:-4779px 0px}.iti__flag.iti__ta{height:10px;background-position:-4801px 0px}.iti__flag.iti__tc{height:10px;background-position:-4823px 0px}.iti__flag.iti__td{height:14px;background-position:-4845px 0px}.iti__flag.iti__tf{height:14px;background-position:-4867px 0px}.iti__flag.iti__tg{height:13px;background-position:-4889px 0px}.iti__flag.iti__th{height:14px;background-position:-4911px 0px}.iti__flag.iti__tj{height:10px;background-position:-4933px 0px}.iti__flag.iti__tk{height:10px;background-position:-4955px 0px}.iti__flag.iti__tl{height:10px;background-position:-4977px 0px}.iti__flag.iti__tm{height:14px;background-position:-4999px 0px}.iti__flag.iti__tn{height:14px;background-position:-5021px 0px}.iti__flag.iti__to{height:10px;background-position:-5043px 0px}.iti__flag.iti__tr{height:14px;background-position:-5065px 0px}.iti__flag.iti__tt{height:12px;background-position:-5087px 0px}.iti__flag.iti__tv{height:10px;background-position:-5109px 0px}.iti__flag.iti__tw{height:14px;background-position:-5131px 0px}.iti__flag.iti__tz{height:14px;background-position:-5153px 0px}.iti__flag.iti__ua{height:14px;background-position:-5175px 0px}.iti__flag.iti__ug{height:14px;background-position:-5197px 0px}.iti__flag.iti__um{height:11px;background-position:-5219px 0px}.iti__flag.iti__un{height:14px;background-position:-5241px 0px}.iti__flag.iti__us{height:11px;background-position:-5263px 0px}.iti__flag.iti__uy{height:14px;background-position:-5285px 0px}.iti__flag.iti__uz{height:10px;background-position:-5307px 0px}.iti__flag.iti__va{height:15px;background-position:-5329px 0px}.iti__flag.iti__vc{height:14px;background-position:-5346px 0px}.iti__flag.iti__ve{height:14px;background-position:-5368px 0px}.iti__flag.iti__vg{height:10px;background-position:-5390px 0px}.iti__flag.iti__vi{height:14px;background-position:-5412px 0px}.iti__flag.iti__vn{height:14px;background-position:-5434px 0px}.iti__flag.iti__vu{height:12px;background-position:-5456px 0px}.iti__flag.iti__wf{height:14px;background-position:-5478px 0px}.iti__flag.iti__ws{height:10px;background-position:-5500px 0px}.iti__flag.iti__xk{height:15px;background-position:-5522px 0px}.iti__flag.iti__ye{height:14px;background-position:-5544px 0px}.iti__flag.iti__yt{height:14px;background-position:-5566px 0px}.iti__flag.iti__za{height:14px;background-position:-5588px 0px}.iti__flag.iti__zm{height:14px;background-position:-5610px 0px}.iti__flag.iti__zw{height:10px;background-position:-5632px 0px}.iti__flag{height:15px;box-shadow:0px 0px 1px 0px #888;background-image:url(\"https://cdn.salla.network/images/flags.png\");background-repeat:no-repeat;background-color:#f5f7f9;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-image:url(\"https://cdn.salla.network/images/flags@2x.png\")}}.iti__flag.iti__np{background-color:transparent}";
+const sallaTelInputCss = ".iti{width:100%;position:relative;display:inline-block}.iti *{box-sizing:border-box;-moz-box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;direction:ltr !important;margin-top:0 !important;margin-bottom:0 !important;padding-left:95px !important;padding-right:15px !important;margin-left:0 !important}.iti__country-container{width:100%;position:absolute;top:0;bottom:0;left:0;padding:1px}.iti__selected-country{width:80px;z-index:1;position:relative;display:flex;align-items:center;height:100%;float:left;padding:0 15px;box-shadow:none !important;outline:none !important;background:transparent;border:0}.ltr .iti__selected-country,[dir=ltr] .iti__selected-country{justify-content:flex-end}.iti__selected-country:before{content:\"\";display:block;width:1px;height:70%;background:#eee;position:absolute;top:15%;right:0}.iti__selected-country .iti__flag{display:none}.iti__selected-country-primary{display:flex;align-items:center;height:100%}.iti__arrow{width:15px;height:15px;line-height:15px;position:absolute;left:10px;top:50%;transform:translateY(-50%)}.iti__arrow:after{content:url(\"data:image/svg+xml,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><title>keyboard_arrow_down</title><path d='M9.875 11.104l6.125 6.125 6.125-6.125 1.875 1.875-8 8-8-8z'></path></svg>\");font-size:16px;color:#999;opacity:0.65}.iti__arrow--up:after{transform:rotate(180deg)}.iti__country-list{width:100%;max-height:160px;position:absolute;top:100%;left:0;z-index:2;list-style:none;margin:0;padding:0;margin:5px 0 0 0;border-radius:5px;box-shadow:0px 2px 4px 2px rgba(0, 0, 0, 0.05);border:1px solid #f5f7f9;background-color:white;white-space:nowrap;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.iti__country-list::-webkit-scrollbar{width:4px}.dark .iti__country-list{background-color:rgb(82, 82, 91);border-color:rgb(82, 82, 91)}.iti__country-list li{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;padding:8px 10px;transition:background-color 0.3s}.iti__country-list li span{font-size:12px}.iti__country-list li:hover,.iti__country-list li.highlighted{background-color:rgba(0, 0, 0, 0.05)}.iti__country-list--dropup{bottom:100%;top:unset;margin:0 0 5px 0}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__country .iti__flag{display:inline-block;width:20px;margin:0 0 0 5px;flex-shrink:0}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #eee}.iti__country{padding:5px 10px;outline:none}.iti__dial-code{font-family:Arial;color:#999;unicode-bidi:plaintext;letter-spacing:1px}.iti__country.iti__highlight{background-color:rgba(0, 0, 0, 0.05)}.iti__country .iti__flag,.iti__country-name,.iti__dial-code{vertical-align:middle}.iti__country-name{flex:auto;margin:0;padding:0 10px;white-space:normal;line-height:1.3}.iti--allow-dropdown .iti__country-container{left:0}.iti--allow-dropdown .iti__country-container:hover{cursor:pointer}.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__country-container:hover .iti__selected-country,.iti--allow-dropdown input[readonly]+.iti__country-container:hover .iti__selected-country{background-color:transparent}.iti__selected-dial-code{unicode-bidi:plaintext;direction:ltr;letter-spacing:1px;font-family:\"Arial\", serif;font-size:13px}.iti--container{top:-18px !important;left:0 !important;padding:1px}.iti--container:hover{cursor:pointer}.iti--container.iti--fullscreen-popup{inset:0;margin:20px;width:calc(100% - 40px);position:fixed;z-index:9999}.iti--container.iti--fullscreen-popup .iti__country-list{max-height:100%;width:100%;inset:0}.iti--container.iti--fullscreen-popup .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-size:5652px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:14px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cr{height:12px;background-position:-1115px 0px}.iti__flag.iti__cu{height:10px;background-position:-1137px 0px}.iti__flag.iti__cv{height:12px;background-position:-1159px 0px}.iti__flag.iti__cw{height:14px;background-position:-1181px 0px}.iti__flag.iti__cx{height:10px;background-position:-1203px 0px}.iti__flag.iti__cy{height:14px;background-position:-1225px 0px}.iti__flag.iti__cz{height:14px;background-position:-1247px 0px}.iti__flag.iti__de{height:12px;background-position:-1269px 0px}.iti__flag.iti__dg{height:10px;background-position:-1291px 0px}.iti__flag.iti__dj{height:14px;background-position:-1313px 0px}.iti__flag.iti__dk{height:15px;background-position:-1335px 0px}.iti__flag.iti__dm{height:10px;background-position:-1357px 0px}.iti__flag.iti__do{height:14px;background-position:-1379px 0px}.iti__flag.iti__dz{height:14px;background-position:-1401px 0px}.iti__flag.iti__ea{height:14px;background-position:-1423px 0px}.iti__flag.iti__ec{height:14px;background-position:-1445px 0px}.iti__flag.iti__ee{height:13px;background-position:-1467px 0px}.iti__flag.iti__eg{height:14px;background-position:-1489px 0px}.iti__flag.iti__eh{height:10px;background-position:-1511px 0px}.iti__flag.iti__er{height:10px;background-position:-1533px 0px}.iti__flag.iti__es{height:14px;background-position:-1555px 0px}.iti__flag.iti__et{height:10px;background-position:-1577px 0px}.iti__flag.iti__eu{height:14px;background-position:-1599px 0px}.iti__flag.iti__fi{height:12px;background-position:-1621px 0px}.iti__flag.iti__fj{height:10px;background-position:-1643px 0px}.iti__flag.iti__fk{height:10px;background-position:-1665px 0px}.iti__flag.iti__fm{height:11px;background-position:-1687px 0px}.iti__flag.iti__fo{height:15px;background-position:-1709px 0px}.iti__flag.iti__fr{height:14px;background-position:-1731px 0px}.iti__flag.iti__ga{height:15px;background-position:-1753px 0px}.iti__flag.iti__gb{height:10px;background-position:-1775px 0px}.iti__flag.iti__gd{height:12px;background-position:-1797px 0px}.iti__flag.iti__ge{height:14px;background-position:-1819px 0px}.iti__flag.iti__gf{height:14px;background-position:-1841px 0px}.iti__flag.iti__gg{height:14px;background-position:-1863px 0px}.iti__flag.iti__gh{height:14px;background-position:-1885px 0px}.iti__flag.iti__gi{height:10px;background-position:-1907px 0px}.iti__flag.iti__gl{height:14px;background-position:-1929px 0px}.iti__flag.iti__gm{height:14px;background-position:-1951px 0px}.iti__flag.iti__gn{height:14px;background-position:-1973px 0px}.iti__flag.iti__gp{height:14px;background-position:-1995px 0px}.iti__flag.iti__gq{height:14px;background-position:-2017px 0px}.iti__flag.iti__gr{height:14px;background-position:-2039px 0px}.iti__flag.iti__gs{height:10px;background-position:-2061px 0px}.iti__flag.iti__gt{height:13px;background-position:-2083px 0px}.iti__flag.iti__gu{height:11px;background-position:-2105px 0px}.iti__flag.iti__gw{height:10px;background-position:-2127px 0px}.iti__flag.iti__gy{height:12px;background-position:-2149px 0px}.iti__flag.iti__hk{height:14px;background-position:-2171px 0px}.iti__flag.iti__hm{height:10px;background-position:-2193px 0px}.iti__flag.iti__hn{height:10px;background-position:-2215px 0px}.iti__flag.iti__hr{height:10px;background-position:-2237px 0px}.iti__flag.iti__ht{height:12px;background-position:-2259px 0px}.iti__flag.iti__hu{height:10px;background-position:-2281px 0px}.iti__flag.iti__ic{height:14px;background-position:-2303px 0px}.iti__flag.iti__id{height:14px;background-position:-2325px 0px}.iti__flag.iti__ie{height:10px;background-position:-2347px 0px}.iti__flag.iti__il{height:15px;background-position:-2369px 0px}.iti__flag.iti__im{height:10px;background-position:-2391px 0px}.iti__flag.iti__in{height:14px;background-position:-2413px 0px}.iti__flag.iti__io{height:10px;background-position:-2435px 0px}.iti__flag.iti__iq{height:14px;background-position:-2457px 0px}.iti__flag.iti__ir{height:12px;background-position:-2479px 0px}.iti__flag.iti__is{height:15px;background-position:-2501px 0px}.iti__flag.iti__it{height:14px;background-position:-2523px 0px}.iti__flag.iti__je{height:12px;background-position:-2545px 0px}.iti__flag.iti__jm{height:10px;background-position:-2567px 0px}.iti__flag.iti__jo{height:10px;background-position:-2589px 0px}.iti__flag.iti__jp{height:14px;background-position:-2611px 0px}.iti__flag.iti__ke{height:14px;background-position:-2633px 0px}.iti__flag.iti__kg{height:12px;background-position:-2655px 0px}.iti__flag.iti__kh{height:13px;background-position:-2677px 0px}.iti__flag.iti__ki{height:10px;background-position:-2699px 0px}.iti__flag.iti__km{height:12px;background-position:-2721px 0px}.iti__flag.iti__kn{height:14px;background-position:-2743px 0px}.iti__flag.iti__kp{height:10px;background-position:-2765px 0px}.iti__flag.iti__kr{height:14px;background-position:-2787px 0px}.iti__flag.iti__kw{height:10px;background-position:-2809px 0px}.iti__flag.iti__ky{height:10px;background-position:-2831px 0px}.iti__flag.iti__kz{height:10px;background-position:-2853px 0px}.iti__flag.iti__la{height:14px;background-position:-2875px 0px}.iti__flag.iti__lb{height:14px;background-position:-2897px 0px}.iti__flag.iti__lc{height:10px;background-position:-2919px 0px}.iti__flag.iti__li{height:12px;background-position:-2941px 0px}.iti__flag.iti__lk{height:10px;background-position:-2963px 0px}.iti__flag.iti__lr{height:11px;background-position:-2985px 0px}.iti__flag.iti__ls{height:14px;background-position:-3007px 0px}.iti__flag.iti__lt{height:12px;background-position:-3029px 0px}.iti__flag.iti__lu{height:12px;background-position:-3051px 0px}.iti__flag.iti__lv{height:10px;background-position:-3073px 0px}.iti__flag.iti__ly{height:10px;background-position:-3095px 0px}.iti__flag.iti__ma{height:14px;background-position:-3117px 0px}.iti__flag.iti__mc{height:15px;background-position:-3139px 0px}.iti__flag.iti__md{height:10px;background-position:-3160px 0px}.iti__flag.iti__me{height:10px;background-position:-3182px 0px}.iti__flag.iti__mf{height:14px;background-position:-3204px 0px}.iti__flag.iti__mg{height:14px;background-position:-3226px 0px}.iti__flag.iti__mh{height:11px;background-position:-3248px 0px}.iti__flag.iti__mk{height:10px;background-position:-3270px 0px}.iti__flag.iti__ml{height:14px;background-position:-3292px 0px}.iti__flag.iti__mm{height:14px;background-position:-3314px 0px}.iti__flag.iti__mn{height:10px;background-position:-3336px 0px}.iti__flag.iti__mo{height:14px;background-position:-3358px 0px}.iti__flag.iti__mp{height:10px;background-position:-3380px 0px}.iti__flag.iti__mq{height:14px;background-position:-3402px 0px}.iti__flag.iti__mr{height:14px;background-position:-3424px 0px}.iti__flag.iti__ms{height:10px;background-position:-3446px 0px}.iti__flag.iti__mt{height:14px;background-position:-3468px 0px}.iti__flag.iti__mu{height:14px;background-position:-3490px 0px}.iti__flag.iti__mv{height:14px;background-position:-3512px 0px}.iti__flag.iti__mw{height:14px;background-position:-3534px 0px}.iti__flag.iti__mx{height:12px;background-position:-3556px 0px}.iti__flag.iti__my{height:10px;background-position:-3578px 0px}.iti__flag.iti__mz{height:14px;background-position:-3600px 0px}.iti__flag.iti__na{height:14px;background-position:-3622px 0px}.iti__flag.iti__nc{height:10px;background-position:-3644px 0px}.iti__flag.iti__ne{height:15px;background-position:-3666px 0px}.iti__flag.iti__nf{height:10px;background-position:-3686px 0px}.iti__flag.iti__ng{height:10px;background-position:-3708px 0px}.iti__flag.iti__ni{height:12px;background-position:-3730px 0px}.iti__flag.iti__nl{height:14px;background-position:-3752px 0px}.iti__flag.iti__no{height:15px;background-position:-3774px 0px}.iti__flag.iti__np{height:15px;background-position:-3796px 0px}.iti__flag.iti__nr{height:10px;background-position:-3811px 0px}.iti__flag.iti__nu{height:10px;background-position:-3833px 0px}.iti__flag.iti__nz{height:10px;background-position:-3855px 0px}.iti__flag.iti__om{height:10px;background-position:-3877px 0px}.iti__flag.iti__pa{height:14px;background-position:-3899px 0px}.iti__flag.iti__pe{height:14px;background-position:-3921px 0px}.iti__flag.iti__pf{height:14px;background-position:-3943px 0px}.iti__flag.iti__pg{height:15px;background-position:-3965px 0px}.iti__flag.iti__ph{height:10px;background-position:-3987px 0px}.iti__flag.iti__pk{height:14px;background-position:-4009px 0px}.iti__flag.iti__pl{height:13px;background-position:-4031px 0px}.iti__flag.iti__pm{height:14px;background-position:-4053px 0px}.iti__flag.iti__pn{height:10px;background-position:-4075px 0px}.iti__flag.iti__pr{height:14px;background-position:-4097px 0px}.iti__flag.iti__ps{height:10px;background-position:-4119px 0px}.iti__flag.iti__pt{height:14px;background-position:-4141px 0px}.iti__flag.iti__pw{height:13px;background-position:-4163px 0px}.iti__flag.iti__py{height:11px;background-position:-4185px 0px}.iti__flag.iti__qa{height:8px;background-position:-4207px 0px}.iti__flag.iti__re{height:14px;background-position:-4229px 0px}.iti__flag.iti__ro{height:14px;background-position:-4251px 0px}.iti__flag.iti__rs{height:14px;background-position:-4273px 0px}.iti__flag.iti__ru{height:14px;background-position:-4295px 0px}.iti__flag.iti__rw{height:14px;background-position:-4317px 0px}.iti__flag.iti__sa{height:14px;background-position:-4339px 0px}.iti__flag.iti__sb{height:10px;background-position:-4361px 0px}.iti__flag.iti__sc{height:10px;background-position:-4383px 0px}.iti__flag.iti__sd{height:10px;background-position:-4405px 0px}.iti__flag.iti__se{height:13px;background-position:-4427px 0px}.iti__flag.iti__sg{height:14px;background-position:-4449px 0px}.iti__flag.iti__sh{height:10px;background-position:-4471px 0px}.iti__flag.iti__si{height:10px;background-position:-4493px 0px}.iti__flag.iti__sj{height:15px;background-position:-4515px 0px}.iti__flag.iti__sk{height:14px;background-position:-4537px 0px}.iti__flag.iti__sl{height:14px;background-position:-4559px 0px}.iti__flag.iti__sm{height:15px;background-position:-4581px 0px}.iti__flag.iti__sn{height:14px;background-position:-4603px 0px}.iti__flag.iti__so{height:14px;background-position:-4625px 0px}.iti__flag.iti__sr{height:14px;background-position:-4647px 0px}.iti__flag.iti__ss{height:10px;background-position:-4669px 0px}.iti__flag.iti__st{height:10px;background-position:-4691px 0px}.iti__flag.iti__sv{height:12px;background-position:-4713px 0px}.iti__flag.iti__sx{height:14px;background-position:-4735px 0px}.iti__flag.iti__sy{height:14px;background-position:-4757px 0px}.iti__flag.iti__sz{height:14px;background-position:-4779px 0px}.iti__flag.iti__ta{height:10px;background-position:-4801px 0px}.iti__flag.iti__tc{height:10px;background-position:-4823px 0px}.iti__flag.iti__td{height:14px;background-position:-4845px 0px}.iti__flag.iti__tf{height:14px;background-position:-4867px 0px}.iti__flag.iti__tg{height:13px;background-position:-4889px 0px}.iti__flag.iti__th{height:14px;background-position:-4911px 0px}.iti__flag.iti__tj{height:10px;background-position:-4933px 0px}.iti__flag.iti__tk{height:10px;background-position:-4955px 0px}.iti__flag.iti__tl{height:10px;background-position:-4977px 0px}.iti__flag.iti__tm{height:14px;background-position:-4999px 0px}.iti__flag.iti__tn{height:14px;background-position:-5021px 0px}.iti__flag.iti__to{height:10px;background-position:-5043px 0px}.iti__flag.iti__tr{height:14px;background-position:-5065px 0px}.iti__flag.iti__tt{height:12px;background-position:-5087px 0px}.iti__flag.iti__tv{height:10px;background-position:-5109px 0px}.iti__flag.iti__tw{height:14px;background-position:-5131px 0px}.iti__flag.iti__tz{height:14px;background-position:-5153px 0px}.iti__flag.iti__ua{height:14px;background-position:-5175px 0px}.iti__flag.iti__ug{height:14px;background-position:-5197px 0px}.iti__flag.iti__um{height:11px;background-position:-5219px 0px}.iti__flag.iti__un{height:14px;background-position:-5241px 0px}.iti__flag.iti__us{height:11px;background-position:-5263px 0px}.iti__flag.iti__uy{height:14px;background-position:-5285px 0px}.iti__flag.iti__uz{height:10px;background-position:-5307px 0px}.iti__flag.iti__va{height:15px;background-position:-5329px 0px}.iti__flag.iti__vc{height:14px;background-position:-5346px 0px}.iti__flag.iti__ve{height:14px;background-position:-5368px 0px}.iti__flag.iti__vg{height:10px;background-position:-5390px 0px}.iti__flag.iti__vi{height:14px;background-position:-5412px 0px}.iti__flag.iti__vn{height:14px;background-position:-5434px 0px}.iti__flag.iti__vu{height:12px;background-position:-5456px 0px}.iti__flag.iti__wf{height:14px;background-position:-5478px 0px}.iti__flag.iti__ws{height:10px;background-position:-5500px 0px}.iti__flag.iti__xk{height:15px;background-position:-5522px 0px}.iti__flag.iti__ye{height:14px;background-position:-5544px 0px}.iti__flag.iti__yt{height:14px;background-position:-5566px 0px}.iti__flag.iti__za{height:14px;background-position:-5588px 0px}.iti__flag.iti__zm{height:14px;background-position:-5610px 0px}.iti__flag.iti__zw{height:10px;background-position:-5632px 0px}.iti__flag{height:15px;box-shadow:0px 0px 1px 0px #888;background-image:url(\"https://cdn.salla.network/images/flags.png\");background-repeat:no-repeat;background-color:#f5f7f9;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-image:url(\"https://cdn.salla.network/images/flags@2x.png\")}}.iti__flag.iti__np{background-color:transparent}";
 
 const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput extends HTMLElement {
     /**
@@ -14,7 +14,7 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput exten
         if (this.TelInput)
             return;
         try {
-            const telInputModule = await import('./index3.js').then(function (n) { return n.i; });
+            const telInputModule = await import('./intlTelInput.js').then(function (n) { return n.i; });
             this.TelInput = telInputModule.default;
         }
         catch (error) {
@@ -57,11 +57,17 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput exten
             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,
@@ -73,6 +79,7 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput exten
      * @return {boolean}
      */
     async isValid() {
+        await this.whenReady();
         this.reset();
         if (this.iti.isValidNumber())
             return true;
@@ -83,7 +90,7 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput exten
         }
         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;
     }
@@ -93,14 +100,22 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput exten
         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('./utils.js'),
             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();
@@ -129,10 +144,11 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput exten
         }
     }
     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(() => { });
     }
     get host() { return this; }
     static get style() { return sallaTelInputCss; }