@salla.sa/twilight-components 2.9.41 → 2.9.42

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

@@ -0,0 +1,393 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Host, h, Prop, Method, State, Event } from '@stencil/core';
+import Location from '../../assets/svg/location.svg';
+import Edit from '../../assets/svg/edit.svg';
+import CurrentLocation from '../../assets/svg/location-target.svg';
+import LocationMarker from '../../assets/svg/location-marker.svg';
+import styles from './map-styles';
+// import google maps
+import { Loader } from 'google-maps';
+export class SallaMap {
+  constructor() {
+    // state variables
+    this.modalActivityTitle = 'Activity Location';
+    this.confirmButtonTitle = 'Confirm';
+    this.locateButtonTitle = 'Locate';
+    this.locateButtonEdit = 'Edit';
+    this.searchInputValue = null;
+    /**
+     * Sets the search bar visibility.
+     */
+    this.seachable = false;
+    /**
+     * Sets the start location.
+     */
+    // start in mecca 🕋 ❤️
+    this.lat = 21.419421;
+    this.lng = 39.82553;
+    /**
+     * Sets the search bar visibility.
+     */
+    this.apiKey = null;
+    /**
+     * 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.checkout.confirm_address');
+      this.locateButtonEdit = salla.lang.get('common.elements.edit');
+    });
+  }
+  formatAddress(address) {
+    return address.length > 25 ? address.substring(0, 25) + '...' : address;
+  }
+  getPositionAddress(location) {
+    if (this.seachable) {
+      // 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) {
+          this.searchInputValue = results[0].formatted_address;
+          this.searchInput.value = 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: {
+          lat: this.lat,
+          lng: this.lng,
+        },
+        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.seachable) {
+        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;
+          }
+        });
+      }
+      // add listener to map
+      google.maps.event.addListener(this.map, 'click', e => {
+        this.searchInputValue = null;
+        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.searchInputValue ? this.searchInputValue : null,
+        });
+      });
+      // get current location
+      this.getCurrentLocation();
+    });
+  }
+  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.currentLocationChanged.emit({
+          lat: position.coords.latitude,
+          lng: position.coords.longitude,
+          address: this.searchInputValue ? this.searchInputValue : null,
+        });
+      });
+    }
+  }
+  /**
+   * Open location component
+   */
+  async open() {
+    var _a, _b;
+    // only init google maps on modal open :) to save resources
+    if (!this.map)
+      this.initGoogleMaps({
+        libraries: this.seachable ? ['places', 'search'] : [],
+        language: salla.config.get('user.language_code') ||
+          ((_a = document.querySelector("meta[charset='UTF-8']")) === null || _a === void 0 ? void 0 : _a.getAttribute('lang')) ||
+          'ar',
+      }, this.mapElement);
+    return (_b = this.locationModal) === null || _b === void 0 ? void 0 : _b.open();
+  }
+  // rendering functions
+  getLocationModal() {
+    return (h("div", null,
+      h("div", { class: "s-map-title" }, this.modalActivityTitle),
+      h("div", { class: "s-map-modal-body" },
+        h("div", { class: "s-map-element ", ref: el => (this.mapElement = el) }),
+        this.seachable && (h("div", { class: "s-map-search-wrapper" },
+          h("input", { class: "s-map-search-input", ref: el => (this.searchInput = el) }))),
+        h("salla-button", { class: "s-map-my-location-icon", onClick: () => {
+            this.getCurrentLocation();
+          }, shape: "icon", color: "primary" },
+          h("span", { class: "s-map-location-icon", innerHTML: CurrentLocation })),
+        h("salla-button", { color: "primary", width: "wide", onClick: () => {
+            let points = {
+              lat: this.lat,
+              lng: this.lng,
+              address: this.searchInputValue ? this.searchInputValue : null,
+            };
+            salla.event.emit('salla-map::selected', points);
+            this.selected.emit(points);
+            this.locationModal.close();
+          } }, this.confirmButtonTitle))));
+  }
+  // render
+  render() {
+    return (h(Host, { class: "s-map-wrapper" },
+      h("salla-modal", { class: "s-map-modal-wrapper", ref: modal => {
+          this.locationModal = modal;
+        } }, this.getLocationModal()),
+      h("slot", { name: "button" },
+        h("salla-button", { onClick: () => {
+            this.open();
+          }, color: "primary", class: "s-map-location-button" },
+          h("span", { class: "s-map-location-icon", innerHTML: this.searchInputValue ? Edit : Location }),
+          this.searchInputValue ? (h("div", null,
+            this.locateButtonEdit,
+            " | ",
+            this.formatAddress(this.searchInputValue))) : (this.locateButtonTitle)))));
+  }
+  static get is() { return "salla-map"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-map.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-map.css"]
+  }; }
+  static get properties() { return {
+    "seachable": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the search bar visibility."
+      },
+      "attribute": "seachable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "lat": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the start location."
+      },
+      "attribute": "lat",
+      "reflect": false,
+      "defaultValue": "21.419421"
+    },
+    "lng": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "lng",
+      "reflect": false,
+      "defaultValue": "39.82553"
+    },
+    "apiKey": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the search bar visibility."
+      },
+      "attribute": "api-key",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "zoom": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets start map zoom."
+      },
+      "attribute": "zoom",
+      "reflect": false,
+      "defaultValue": "10"
+    },
+    "theme": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets map style."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "'light'"
+    }
+  }; }
+  static get states() { return {
+    "modalActivityTitle": {},
+    "confirmButtonTitle": {},
+    "locateButtonTitle": {},
+    "locateButtonEdit": {},
+    "searchInputValue": {},
+    "searchInput": {},
+    "mapElement": {}
+  }; }
+  static get events() { return [{
+      "method": "selected",
+      "name": "selected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Custome DOM event emitter when location is selected"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "mapClicked",
+      "name": "mapClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Custome DOM event emitter when map is clicked"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "currentLocationChanged",
+      "name": "currentLocationChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Custome DOM event emitter when current location is selected"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "Open location component",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export { SallaLocalizationModal as SallaLocalizationModal } from '../types/compo
 export { SallaLoginModal as SallaLoginModal } from '../types/components/salla-login-modal/salla-login-modal';
 export { SallaLoyalty as SallaLoyalty } from '../types/components/salla-loyalty/salla-loyalty';
 export { SallaLoyaltyPrizeItem as SallaLoyaltyPrizeItem } from '../types/components/salla-loyalty/salla-loyalty-prize-item';
+export { SallaMap as SallaMap } from '../types/components/salla-map/salla-map';
 export { SallaModal as SallaModal } from '../types/components/salla-modal/salla-modal';
 export { SallaOfferModal as SallaOfferModal } from '../types/components/salla-offer-modal/salla-offer-modal';
 export { SallaPlaceholder as SallaPlaceholder } from '../types/components/salla-placeholder/salla-placeholder';