@salla.sa/twilight-components 2.14.555 → 2.14.557

package/dist/esm/salla-map_2.entry.js

@@ -0,0 +1,832 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BLzx0e6P.js';
+import { L as Location } from './location-BO5AoBAP.js';
+
+var Edit = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>edit</title>
+<path d="M30.583 1.417c-1.828-1.829-5.019-1.829-6.847 0l-13.396 13.396c-0.161 0.161-0.279 0.361-0.341 0.581l-1.949 6.911c-0.131 0.464 0 0.964 0.341 1.305 0.253 0.252 0.593 0.389 0.943 0.389 0.121 0 0.243-0.016 0.361-0.051l6.911-1.949c0.22-0.061 0.419-0.179 0.581-0.34l10.455-10.453s0 0 0 0l2.941-2.941c1.887-1.888 1.887-4.96 0-6.848zM15.547 19.528l-4.284 1.208 1.208-4.284 9.265-9.265 3.076 3.076zM28.696 6.38l-1.999 1.999-3.076-3.076 1.999-1.999c0.849-0.848 2.227-0.848 3.076 0 0.848 0.848 0.848 2.227 0 3.076zM24 20c-0.737 0-1.333 0.597-1.333 1.333v4c0 2.205-1.795 4-4 4h-12c-2.205 0-4-1.795-4-4v-12c0-2.205 1.795-4 4-4h4c0.737 0 1.333-0.597 1.333-1.333s-0.596-1.333-1.333-1.333h-4c-3.676 0-6.667 2.991-6.667 6.667v12c0 3.676 2.991 6.667 6.667 6.667h12c3.676 0 6.667-2.991 6.667-6.667v-4c0-0.736-0.596-1.333-1.333-1.333z"></path>
+</svg>
+`;
+
+var CurrentLocation = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>location-target</title>
+<path d="M16 9.333c-3.676 0-6.667 2.991-6.667 6.667s2.991 6.667 6.667 6.667 6.667-2.991 6.667-6.667-2.991-6.667-6.667-6.667zM16 20c-2.205 0-4-1.795-4-4s1.795-4 4-4 4 1.795 4 4-1.795 4-4 4zM30.667 14.667h-1.401c-0.627-6.289-5.643-11.305-11.932-11.932v-1.401c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.401c-6.289 0.627-11.305 5.643-11.932 11.932h-1.401c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h1.401c0.628 6.289 5.643 11.305 11.932 11.932v1.401c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-1.401c6.289-0.628 11.305-5.643 11.932-11.932h1.401c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333zM16 26.667c-5.881 0-10.667-4.785-10.667-10.667s4.785-10.667 10.667-10.667 10.667 4.785 10.667 10.667-4.785 10.667-10.667 10.667z"></path>
+</svg>
+`;
+
+var LocationMarker = `<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="#5CD5C4"/>
+<path d="M18 10C17.0104 10 16.1458 10.1771 15.4062 10.5312C14.6562 10.8854 14.026 11.3542 13.5156 11.9375C13.0156 12.5104 12.6406 13.1667 12.3906 13.9062C12.1302 14.6458 12 15.401 12 16.1719C12 16.8906 12.2604 17.7656 12.7812 18.7969C13.3021 19.8281 13.8854 20.8333 14.5312 21.8125C15.1875 22.7812 15.8073 23.6406 16.3906 24.3906C16.9844 25.1302 17.349 25.5885 17.4844 25.7656C17.5469 25.8385 17.625 25.8958 17.7188 25.9375C17.8125 25.9792 17.9062 26 18 26C18.1042 26 18.1979 25.9792 18.2812 25.9375C18.375 25.8958 18.4531 25.8385 18.5156 25.7656C18.651 25.5885 19.0156 25.1302 19.6094 24.3906C20.1927 23.6406 20.8073 22.7812 21.4531 21.8125C22.1094 20.8333 22.6979 19.8281 23.2188 18.7969C23.7396 17.7656 24 16.8906 24 16.1719C24 15.401 23.8698 14.6458 23.6094 13.9062C23.3594 13.1667 22.9792 12.5104 22.4688 11.9375C21.9688 11.3542 21.3438 10.8854 20.5938 10.5312C19.8542 10.1771 18.9896 10 18 10ZM18 24.2812C17.5833 23.75 17.1094 23.1198 16.5781 22.3906C16.0365 21.651 15.526 20.901 15.0469 20.1406C14.5677 19.3698 14.1615 18.6302 13.8281 17.9219C13.4948 17.2135 13.3281 16.6302 13.3281 16.1719C13.3281 15.5885 13.4219 15.0052 13.6094 14.4219C13.7969 13.849 14.0781 13.3333 14.4531 12.875C14.8385 12.4167 15.3281 12.0469 15.9219 11.7656C16.5052 11.474 17.1979 11.3281 18 11.3281C18.8021 11.3281 19.4948 11.474 20.0781 11.7656C20.6719 12.0469 21.1562 12.4167 21.5312 12.875C21.9167 13.3333 22.2031 13.849 22.3906 14.4219C22.5781 15.0052 22.6719 15.5885 22.6719 16.1719C22.6719 16.6302 22.5052 17.2135 22.1719 17.9219C21.8385 18.6302 21.4323 19.3698 20.9531 20.1406C20.474 20.901 19.9688 21.651 19.4375 22.3906C18.8958 23.1198 18.4167 23.75 18 24.2812ZM18 13.3281C17.2604 13.3281 16.6302 13.5885 16.1094 14.1094C15.5885 14.6302 15.3281 15.2604 15.3281 16C15.3281 16.7396 15.5885 17.3698 16.1094 17.8906C16.6302 18.4115 17.2604 18.6719 18 18.6719C18.7396 18.6719 19.3698 18.4115 19.8906 17.8906C20.4115 17.3698 20.6719 16.7396 20.6719 16C20.6719 15.2604 20.4115 14.6302 19.8906 14.1094C19.3698 13.5885 18.7396 13.3281 18 13.3281ZM18 17.3281C17.6354 17.3281 17.3229 17.1979 17.0625 16.9375C16.8021 16.6771 16.6719 16.3646 16.6719 16C16.6719 15.6354 16.8021 15.3229 17.0625 15.0625C17.3229 14.8021 17.6354 14.6719 18 14.6719C18.3646 14.6719 18.6771 14.8021 18.9375 15.0625C19.1979 15.3229 19.3281 15.6354 19.3281 16C19.3281 16.3646 19.1979 16.6771 18.9375 16.9375C18.6771 17.1979 18.3646 17.3281 18 17.3281Z" fill="white"/>
+</svg>
+`;
+
+// export json
+const light = [
+    {
+        featureType: 'water',
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#e9e9e9',
+            },
+            {
+                lightness: 17,
+            },
+        ],
+    },
+    {
+        featureType: 'landscape',
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#f5f5f5',
+            },
+            {
+                lightness: 20,
+            },
+        ],
+    },
+    {
+        featureType: 'road.highway',
+        elementType: 'geometry.fill',
+        stylers: [
+            {
+                color: '#ffffff',
+            },
+            {
+                lightness: 17,
+            },
+        ],
+    },
+    {
+        featureType: 'road.highway',
+        elementType: 'geometry.stroke',
+        stylers: [
+            {
+                color: '#ffffff',
+            },
+            {
+                lightness: 29,
+            },
+            {
+                weight: 0.2,
+            },
+        ],
+    },
+    {
+        featureType: 'road.arterial',
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#ffffff',
+            },
+            {
+                lightness: 18,
+            },
+        ],
+    },
+    {
+        featureType: 'road.local',
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#ffffff',
+            },
+            {
+                lightness: 16,
+            },
+        ],
+    },
+    {
+        featureType: 'poi',
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#f5f5f5',
+            },
+            {
+                lightness: 21,
+            },
+        ],
+    },
+    {
+        featureType: 'poi.park',
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#dedede',
+            },
+            {
+                lightness: 21,
+            },
+        ],
+    },
+    {
+        elementType: 'labels.text.stroke',
+        stylers: [
+            {
+                visibility: 'on',
+            },
+            {
+                color: '#ffffff',
+            },
+            {
+                lightness: 16,
+            },
+        ],
+    },
+    {
+        elementType: 'labels.text.fill',
+        stylers: [
+            {
+                saturation: 36,
+            },
+            {
+                color: '#333333',
+            },
+            {
+                lightness: 40,
+            },
+        ],
+    },
+    {
+        elementType: 'labels.icon',
+        stylers: [
+            {
+                visibility: 'off',
+            },
+        ],
+    },
+    {
+        featureType: 'transit',
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#f2f2f2',
+            },
+            {
+                lightness: 19,
+            },
+        ],
+    },
+    {
+        featureType: 'administrative',
+        elementType: 'geometry.fill',
+        stylers: [
+            {
+                color: '#fefefe',
+            },
+            {
+                lightness: 20,
+            },
+        ],
+    },
+    {
+        featureType: 'administrative',
+        elementType: 'geometry.stroke',
+        stylers: [
+            {
+                color: '#fefefe',
+            },
+            {
+                lightness: 17,
+            },
+            {
+                weight: 1.2,
+            },
+        ],
+    },
+];
+const dark = [
+    {
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#242f3e',
+            },
+        ],
+    },
+    {
+        elementType: 'labels.text.fill',
+        stylers: [
+            {
+                color: '#746855',
+            },
+        ],
+    },
+    {
+        elementType: 'labels.text.stroke',
+        stylers: [
+            {
+                color: '#242f3e',
+            },
+        ],
+    },
+    {
+        featureType: 'administrative.locality',
+        elementType: 'labels.text.fill',
+        stylers: [
+            {
+                color: '#d59563',
+            },
+        ],
+    },
+    {
+        featureType: 'poi',
+        elementType: 'labels.text.fill',
+        stylers: [
+            {
+                color: '#d59563',
+            },
+        ],
+    },
+    {
+        featureType: 'poi.park',
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#263c3f',
+            },
+        ],
+    },
+    {
+        featureType: 'poi.park',
+        elementType: 'labels.text.fill',
+        stylers: [
+            {
+                color: '#6b9a76',
+            },
+        ],
+    },
+    {
+        featureType: 'road',
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#38414e',
+            },
+        ],
+    },
+    {
+        featureType: 'road',
+        elementType: 'geometry.stroke',
+        stylers: [
+            {
+                color: '#212a37',
+            },
+        ],
+    },
+    {
+        featureType: 'road',
+        elementType: 'labels.text.fill',
+        stylers: [
+            {
+                color: '#9ca5b3',
+            },
+        ],
+    },
+    {
+        featureType: 'road.highway',
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#746855',
+            },
+        ],
+    },
+    {
+        featureType: 'road.highway',
+        elementType: 'geometry.stroke',
+        stylers: [
+            {
+                color: '#1f2835',
+            },
+        ],
+    },
+    {
+        featureType: 'road.highway',
+        elementType: 'labels.text.fill',
+        stylers: [
+            {
+                color: '#f3d19c',
+            },
+        ],
+    },
+    {
+        featureType: 'transit',
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#2f3948',
+            },
+        ],
+    },
+    {
+        featureType: 'transit.station',
+        elementType: 'labels.text.fill',
+        stylers: [
+            {
+                color: '#d59563',
+            },
+        ],
+    },
+    {
+        featureType: 'water',
+        elementType: 'geometry',
+        stylers: [
+            {
+                color: '#17263c',
+            },
+        ],
+    },
+    {
+        featureType: 'water',
+        elementType: 'labels.text.fill',
+        stylers: [
+            {
+                color: '#515c6d',
+            },
+        ],
+    },
+    {
+        featureType: 'water',
+        elementType: 'labels.text.stroke',
+        stylers: [
+            {
+                color: '#17263c',
+            },
+        ],
+    },
+];
+var styles = {
+    light,
+    dark,
+};
+
+class Loader {
+    constructor(apiKey = null, options = {}) {
+        this.apiKey = apiKey;
+        this.options = options;
+        if (typeof window === 'undefined') {
+            throw new Error('google-maps is supported only in browser environment');
+        }
+    }
+    load() {
+        if (typeof this.api !== 'undefined') {
+            return Promise.resolve(this.api);
+        }
+        if (typeof this.loader !== 'undefined') {
+            return this.loader;
+        }
+        window[Loader.CALLBACK_NAME] = () => {
+            this.api = window['google'];
+            if (typeof this.resolve === 'undefined') {
+                throw new Error('Should not happen');
+            }
+            this.resolve(this.api);
+        };
+        window['gm_authFailure'] = () => {
+            if (typeof this.reject === 'undefined') {
+                throw new Error('Should not happen');
+            }
+            this.reject(new Error('google-maps: authentication error'));
+        };
+        return this.loader = new Promise((resolve, reject) => {
+            this.resolve = resolve;
+            this.reject = reject;
+            const script = document.createElement('script');
+            script.src = this.createUrl();
+            script.async = true;
+            script.onerror = (e) => reject(e);
+            document.head.appendChild(script);
+        });
+    }
+    createUrl() {
+        const parameters = [
+            `callback=${Loader.CALLBACK_NAME}`,
+        ];
+        if (this.apiKey) {
+            parameters.push(`key=${this.apiKey}`);
+        }
+        for (let name in this.options) {
+            if (this.options.hasOwnProperty(name)) {
+                let value = this.options[name];
+                if (name === 'version') {
+                    name = 'v';
+                }
+                if (name === 'libraries') {
+                    value = value.join(',');
+                }
+                parameters.push(`${name}=${value}`);
+            }
+        }
+        return `https://maps.googleapis.com/maps/api/js?${parameters.join('&')}`;
+    }
+}
+Loader.CALLBACK_NAME = '_dk_google_maps_loader_cb';
+
+const sallaMapCss = "/*!twlt*/.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}.visible{visibility:visible}.s-has-error{--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}.s-has-error:focus{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.s-has-error{--tw-border-opacity:1 !important;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;--tw-text-opacity:1 !important;color:rgb(239 68 68 / var(--tw-text-opacity, 1)) !important}.s-map-modal-title{position:relative;margin-top:1rem;margin-bottom:1rem;padding-left:1rem;padding-right:1rem}.s-map-location-icon{margin-right:0.5rem}.s-map-location-icon:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:0.5rem;margin-right:0px}.s-map-location-icon svg{height:1rem !important;width:1rem !important}.s-map-modal-body{position:relative;overflow:hidden}.s-map-element{height:400px;width:100%}.s-map-search-wrapper{position:absolute;top:0px;z-index:1;margin:1.25rem;width:-webkit-fill-available}.s-map-search-wrapper input{height:2.5rem;width:100%;padding:0.5rem}.s-map-search-wrapper input:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:right}.s-map-search-results{margin-top:0px;display:flex;height:6rem;flex-direction:column;padding:0.5rem}.s-map-modal-body .s-loading-container{position:absolute;margin:0px;padding:5rem}.s-map-my-location-button{position:absolute;bottom:1.5rem;left:0px;margin:0.5rem}.s-map-location-button .s-button-text{display:flex;align-items:center}.s-map-submit-button button{border-top-right-radius:0px;border-top-left-radius:0px;padding-top:12px;padding-bottom:12px}";
+
+const SallaMap = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selected = createEvent(this, "selected");
+        this.mapClicked = createEvent(this, "mapClicked");
+        this.currentLocationChanged = createEvent(this, "currentLocationChanged");
+        this.invalidInput = createEvent(this, "invalidInput");
+        this.defaultLat = 21.419421; //Mecca 🕋
+        this.defaultLng = 39.82553; //Mecca 🕋
+        // state variables
+        this.modalActivityTitle = salla.lang.get('pages.checkout.select_your_address_from_map');
+        this.confirmButtonTitle = salla.lang.get('pages.checkout.confirm_address');
+        this.locateButtonTitle = salla.lang.get('pages.cart.detect_location');
+        this.locateButtonEdit = salla.lang.get('common.elements.edit');
+        this.searchPlaceholder = salla.lang.get('pages.checkout.search_for_address');
+        this.searchInputValue = null;
+        this.formattedAddress = '';
+        this.geolocationError = false;
+        /**
+         * File input name for the native formData
+         */
+        this.name = 'location';
+        /**
+         * Set if the location input is required or not
+         */
+        this.required = false;
+        /**
+         * Disable or enable actions
+         */
+        this.readonly = false;
+        /**
+         * Sets the search bar visibility.
+         */
+        this.searchable = false;
+        /**
+         * Sets start map zoom.
+         */
+        this.zoom = 10;
+        /**
+         * Sets map style.
+         */
+        this.theme = 'light';
+        salla.lang.onLoaded(() => {
+            this.modalActivityTitle = salla.lang.get('pages.checkout.select_your_address_from_map');
+            this.confirmButtonTitle = salla.lang.get('pages.checkout.confirm_address');
+            this.locateButtonTitle = salla.lang.get('pages.cart.detect_location');
+            this.locateButtonEdit = salla.lang.get('common.elements.edit');
+            this.searchPlaceholder = salla.lang.get('pages.checkout.search_for_address');
+        });
+        salla.onReady(() => {
+            this.apiKey = salla.config.get('store.settings.keys.maps');
+        });
+    }
+    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() {
+        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
+        const Geocoder = new google.maps.Geocoder();
+        Geocoder.geocode({
+            location,
+        }, (results, status) => {
+            if (status === google.maps.GeocoderStatus.OK) {
+                if (this.searchable) {
+                    this.searchInputValue = results[0].formatted_address;
+                    this.searchInput.value = results[0].formatted_address;
+                }
+                if (submit) {
+                    this.formattedAddress = results[0].formatted_address;
+                }
+            }
+        });
+    }
+    initGoogleMaps(options, mapDOM) {
+        const loader = new Loader(this.apiKey, options);
+        loader.load().then(google => {
+            this.map = new google.maps.Map(mapDOM, {
+                center: (this.lat || this.lng) ? {
+                    lat: this.lat,
+                    lng: this.lng,
+                } : {
+                    lat: this.defaultLat,
+                    lng: this.defaultLng,
+                },
+                zoom: this.zoom,
+                zoomControl: true,
+                mapTypeControl: false,
+                scaleControl: false,
+                streetViewControl: false,
+                rotateControl: false,
+                fullscreenControl: false,
+                disableDefaultUI: false,
+            });
+            this.map.setOptions({
+                styles: this.theme === 'light' ? styles.light : styles.dark,
+            });
+            this.marker = new google.maps.Marker({
+                position: this.map.getCenter(),
+                map: this.map,
+                icon: {
+                    url: 'data:image/svg+xml;utf8,' + encodeURIComponent(LocationMarker),
+                    scaledSize: new google.maps.Size(30, 30),
+                },
+            });
+            if (this.searchable) {
+                const searchBox = new google.maps.places.SearchBox(this.searchInput);
+                google.maps.event.addListener(searchBox, 'places_changed', () => {
+                    const places = searchBox.getPlaces();
+                    // goto first place
+                    if (places.length > 0 && this.map) {
+                        this.map.setCenter(places[0].geometry.location);
+                        this.lat = places[0].geometry.location.lat();
+                        this.lng = places[0].geometry.location.lng();
+                        // set marker
+                        this.marker.setPosition(places[0].geometry.location);
+                        this.searchInputValue = places[0].formatted_address;
+                        this.formattedAddress = places[0].formatted_address;
+                    }
+                });
+            }
+            // add listener to map
+            google.maps.event.addListener(this.map, 'click', e => {
+                if (this.readonly)
+                    return;
+                this.marker.setPosition(e.latLng);
+                this.lat = e.latLng.lat();
+                this.lng = e.latLng.lng();
+                this.getPositionAddress(e.latLng);
+                this.mapClicked.emit({
+                    lat: e.latLng.lat(),
+                    lng: e.latLng.lng(),
+                    address: this.formattedAddress ? this.formattedAddress : null,
+                });
+            });
+            if (!this.lat && !this.lng) {
+                this.getCurrentLocation();
+                if (this.geolocationError) {
+                    this.map.setCenter({
+                        lat: this.lat,
+                        lng: this.lng,
+                    });
+                    this.marker.setPosition({
+                        lat: this.lat,
+                        lng: this.lng,
+                    });
+                }
+            }
+        });
+    }
+    getCurrentLocation() {
+        if (navigator.geolocation && this.map) {
+            navigator.geolocation.getCurrentPosition(position => {
+                // set map to this location
+                const mapOptions = {
+                    center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
+                    zoom: 15,
+                };
+                this.map.setOptions(mapOptions);
+                // set marker
+                this.marker.setPosition(mapOptions.center);
+                this.getPositionAddress(mapOptions.center);
+                this.lat = position.coords.latitude;
+                this.lng = position.coords.longitude;
+                this.currentLocationChanged.emit({
+                    lat: position.coords.latitude,
+                    lng: position.coords.longitude,
+                    address: this.formattedAddress ? this.formattedAddress : null,
+                });
+            }, this.handleLocationError.bind(this));
+        }
+        else {
+            salla.log('Geolocation is not supported by this browser.');
+            this.geolocationError = true;
+        }
+    }
+    handleLocationError(error) {
+        this.geolocationError = true;
+        switch (error.code) {
+            case error.PERMISSION_DENIED:
+                salla.log('User denied the request for Geolocation.');
+                break;
+            case error.POSITION_UNAVAILABLE:
+                salla.log('Location information is unavailable.');
+                break;
+            case error.TIMEOUT:
+                salla.log('The request to get user location timed out.');
+                break;
+            case error.UNKNOWN_ERROR:
+                salla.log('An unknown error occurred.');
+                break;
+        }
+    }
+    componentDidLoad() {
+        this.syncMapInputValue();
+        // if lat and lng provided then get the formatted address
+        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 ||
+                'ar'}`)
+                .then(res => res.json())
+                .then(res => {
+                if (res.status === 'OK') {
+                    this.formattedAddress = res.results[0].formatted_address;
+                    this.searchInputValue = 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.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
+     */
+    async open() {
+        // only init google maps on modal open :) to save resources
+        if (!this.map)
+            this.initGoogleMaps({
+                libraries: this.searchable ? ['places', 'search'] : [],
+                language: salla.config.get('user.language_code') ||
+                    document.documentElement.lang ||
+                    'ar',
+            }, this.mapElement);
+        return await this.locationModal.open();
+    }
+    // rendering functions
+    getLocationModal() {
+        return (h("div", null, h("div", { class: "s-map-modal-title" }, !!this.modalTitle ? this.modalTitle : this.modalActivityTitle), h("div", { class: "s-map-modal-body" }, h("div", { class: "s-map-element", ref: el => (this.mapElement = el) }), this.readonly ? "" :
+            [
+                this.searchable && (h("div", { class: "s-map-search-wrapper" }, h("input", { class: "s-map-search-input", ref: el => (this.searchInput = el), placeholder: this.searchPlaceholder }))),
+                h("salla-button", { class: "s-map-my-location-button", onClick: () => {
+                        this.getCurrentLocation();
+                    }, shape: "icon", color: "primary" }, h("span", { innerHTML: CurrentLocation })),
+                h("salla-button", { class: "s-map-submit-button", color: "primary", width: "wide", onClick: () => {
+                        let points = {
+                            lat: this.lat,
+                            lng: this.lng,
+                            address: this.formattedAddress ? this.formattedAddress : null,
+                        };
+                        salla.event.emit('salla-map::selected', points);
+                        this.selected.emit(points);
+                        this.selectedLat = points.lat;
+                        this.selectedLng = points.lng;
+                        this.getPositionAddress(new google.maps.LatLng(points.lat, points.lng), true);
+                        this.syncMapInputValue();
+                        this.host.classList.remove('s-has-error');
+                        this.mapInput.dispatchEvent(new window.Event('change', { bubbles: true }));
+                        this.locationModal.close();
+                    } }, this.confirmButtonTitle)
+            ])));
+    }
+    // render
+    render() {
+        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: '57e6d352f42a3321a98925dd4136eaf0fdbb06b0', name: "button" }, h("salla-button", { key: 'a0c39395b18ca41f2ea31c5c5729b2ba20c17a16', onClick: () => {
+                this.open();
+            }, 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) })));
+    }
+    get host() { return getElement(this); }
+};
+SallaMap.style = sallaMapCss;
+
+const sallaProgressBarCss = "/*!twlt*/.s-progress-bar-container{margin-bottom:0.625rem}.s-progress-bar-header{margin-bottom:0.375rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-progress-bar-target-section{margin-bottom:0.625rem;display:flex;justify-content:space-between;font-size:0.875rem;line-height:1.25rem}.s-progress-bar-wrapper{margin-bottom:0.375rem;width:100%;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.s-progress-bar-wrapper:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.s-progress-bar-progress{height:100%;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.s-progress-bar-message{margin-bottom:0.625rem;display:block;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.s-progress-bar-wrapper .s-progress-bar-progress-stripped{background-image:linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);background-size:30px 30px}.s-reviews-summary-progress .s-progress-bar-wrapper{margin-bottom:0px}.s-reviews-summary-progress .s-progress-bar-container{margin-bottom:0px}";
+
+const SallaProgressBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Set height for the wrapper.
+         */
+        this.height = "10px";
+        try {
+            if (this.donation) {
+                let donationJson = typeof this.donation == 'string' ? JSON.parse(this.donation) : this.donation;
+                if (donationJson.can_donate && donationJson.target_amount) {
+                    donationJson.target_end_date = donationJson.target_end_date == '0000-00-00' ? null : donationJson.target_end_date;
+                    this.value = donationJson.collected_amount;
+                    this.target = donationJson.target_amount;
+                    this.header = salla.lang.get('pages.products.target');
+                    this.message = donationJson.target_end_date ? salla.lang.get('pages.products.donation_target_date') + ' ' + donationJson.target_end_date : '';
+                }
+                else {
+                    //in case the product is not enabled target campaign
+                    this.message = donationJson.target_amount
+                        ? donationJson.target_message
+                        : '';
+                }
+            }
+        }
+        catch (e) {
+            salla.log('Wrong donation json');
+        }
+        salla.lang.onLoaded(() => {
+            this.header = this.header?.replace('pages.products.target', salla.lang.get('pages.products.target'));
+            this.message = this.message?.replace('pages.products.donation_target_date', salla.lang.get('pages.products.donation_target_date'));
+        });
+        salla.onReady(() => {
+            this.color = this.color || salla.config.get('theme.color.primary', "#ffd5c4");
+            if (!this.unit) {
+                this.unit = salla.config.currency().symbol;
+            }
+        });
+    }
+    getPercentage() {
+        return (this.value / this.target) * 100;
+    }
+    render() {
+        if (!this.target && !this.message) {
+            return '';
+        }
+        return (h("div", { class: "s-progress-bar-container" }, this.header ? h("div", { class: "s-progress-bar-header" }, this.header) : '', this.getProgressBar(), this.message ? h("span", { class: "s-progress-bar-message" }, this.message) : ''));
+    }
+    getProgressBar() {
+        return this.target ? [
+            !this.hideUnits ? (h("div", { class: "s-progress-bar-target-section" }, h("span", { innerHTML: `${salla.helpers.number(this.value)} ${this.unit}` }), h("span", { innerHTML: `${salla.helpers.number(this.target)} ${this.unit}` }))) : null,
+            h("div", { class: "s-progress-bar-wrapper", style: { height: this.height } }, h("div", { class: {
+                    "s-progress-bar-progress": true,
+                    's-progress-bar-progress-stripped': this.stripped
+                }, style: {
+                    width: `${this.getPercentage()}%`,
+                    backgroundColor: this.color
+                } }))
+        ] : null;
+    }
+};
+SallaProgressBar.style = sallaProgressBarCss;
+
+export { SallaMap as salla_map, SallaProgressBar as salla_progress_bar };