@hestia-earth/ui-components 0.42.0 → 0.42.2

package/fesm2022/hestia-earth-ui-components.mjs

@@ -47,8 +47,8 @@ import * as semver from 'semver';
 import { parse } from 'papaparse';
 import omit from 'lodash.omit';
 import { validationsByMessage } from '@hestia-earth/data-validation';
-import moment from 'moment';
-import 'moment/locale/en-gb';
+import { format, subDays, parseISO } from 'date-fns';
+import { enGB } from 'date-fns/locale';
 import { v4 } from 'uuid';
 import { MarkdownComponent } from 'ngx-markdown';
 import { linkHorizontal } from 'd3-shape';
@@ -716,7 +716,7 @@ const HE_MAP_LOADED = new InjectionToken('Google Maps API Loaded');
  * @param libraries
  * @returns
  */
-const loadMapApi = (apiKey, libraries = ['visualization', 'drawing']) => (httpClient) => of(`${loadMapUrl}?${buildMapsUrl({ key: [apiKey], libraries })}`).pipe(mergeMap(url => httpClient.jsonp(url, 'callback')), shareReplay({ bufferSize: 1, refCount: true }), delay(100), map(() => true), catchError(e => {
+const loadMapApi = (apiKey, libraries = ['visualization']) => (httpClient) => of(`${loadMapUrl}?${buildMapsUrl({ key: [apiKey], libraries })}`).pipe(mergeMap(url => httpClient.jsonp(url, 'callback')), shareReplay({ bufferSize: 1, refCount: true }), delay(100), map(() => true), catchError(e => {
     console.error(e);
     return of(false);
 }));
@@ -2595,16 +2595,44 @@ class MapsDrawingComponent {
     loadData() {
         this.shapes = polygonsFromFeature(this.feature());
         this.shapes.forEach(polygon => polygon.setMap(this.map()?.googleMap));
-        const drawingManager = new google.maps.drawing.DrawingManager({
-            drawingControlOptions: {
-                position: google.maps.ControlPosition.TOP_CENTER,
-                drawingModes: this.modes() || [google.maps.drawing.OverlayType.POLYGON]
-            },
-            polygonOptions: strokeStyle
-        });
-        drawingManager.setMap(this.map()?.googleMap);
-        this.listeners.push(google.maps.event.addListener(drawingManager, 'polygoncomplete', polygon => this.onPolygonAdded(polygon)));
-        this.listeners.push(google.maps.event.addListener(drawingManager, 'markercomplete', marker => this.onMarkerAdded(marker)));
+        const map = this.map()?.googleMap;
+        if (!map) {
+            return;
+        }
+        const modes = this.modes() || ['polygon'];
+        const controls = modes
+            .map(mode => {
+            const m = mode.toLowerCase();
+            if (m === 'polygon')
+                return 'Polygon';
+            if (m === 'marker' || m === 'point')
+                return 'Point';
+            return null;
+        })
+            .filter(Boolean);
+        map.data.setControls(controls);
+        map.data.setControlPosition(google.maps.ControlPosition.TOP_CENTER);
+        map.data.setStyle(strokeStyle);
+        this.listeners.push(map.data.addListener('addfeature', (event) => {
+            const feature = event.feature;
+            const geometry = feature.getGeometry();
+            map.data.remove(feature);
+            if (geometry?.getType() === 'Polygon') {
+                const polygon = new google.maps.Polygon({
+                    paths: geometry.getArray().map(path => path.getArray()),
+                    ...strokeStyle
+                });
+                polygon.setMap(map);
+                this.onPolygonAdded(polygon);
+            }
+            else if (geometry?.getType() === 'Point') {
+                const marker = new google.maps.Marker({
+                    position: geometry.get(),
+                    map: map
+                });
+                this.onMarkerAdded(marker);
+            }
+        }));
     }
     mapInitialized() {
         setTimeout(() => this.loadData());
@@ -12510,7 +12538,7 @@ const calculateCycleStartDateEnabled = (properties, property) => {
 const calculateCycleStartDate = (properties, property) => {
     const cycleDuration = siblingProperty(properties, property, 'cycleDuration');
     const endDate = siblingProperty(properties, property, 'endDate');
-    return moment(endDate.value).locale('en-gb').subtract(cycleDuration.value, 'days').format('YYYY-MM-DD');
+    return format(subDays(parseISO(endDate.value), cycleDuration.value), 'yyyy-MM-dd', { locale: enGB });
 };
 
 const siteLocation = ({ latitude, longitude }) => latitude && longitude