@pega/cosmos-react-core 7.0.0-build.9.1 → 7.0.0-rc.1

package/lib/components/Location/LocationView.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useRef, useState, useEffect } from 'react';
+import { useContext, useRef, useState, useEffect, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Progress from '../Progress';
 import { Status } from '../Badges';
-import { loadMapsAPI, getCoords, toGoogleLatLng, getPlaceById, isLatLngObject, getAddress } from './utils';
+import { createUID } from '../../utils';
+import useTheme from '../../hooks/useTheme';
+import { omitProps } from '../../styles';
+import { loadMapsAPI, toGoogleLatLng, getPlaceById, isLatLngObject, getAddress } from './utils';
 import MapsContext from './MapsContext';
 export const StyledLocationError = styled(Status) `
   position: absolute;
@@ -13,27 +16,27 @@ export const StyledLocationError = styled(Status) `
   transform: translate(-50%, -50%);
 `;
 StyledLocationError.defaultProps = defaultThemeProp;
-export const StyledLocationView = styled.div(props => {
-    const { height, theme } = props;
+export const StyledLocationView = styled.div.withConfig(omitProps('height'))(({ height, theme }) => {
     return css `
-    height: ${height};
-    position: relative;
-    flex: auto;
-    border-radius: ${theme.base['border-radius']};
-    mask-image: radial-gradient(white, black);
-    -webkit-mask-image: radial-gradient(white, black);
-  `;
+      min-height: inherit;
+      height: ${height};
+      position: relative;
+      flex: auto;
+      border-radius: ${theme.base['border-radius']};
+      mask-image: radial-gradient(white, black);
+      -webkit-mask-image: radial-gradient(white, black);
+    `;
 });
 StyledLocationView.defaultProps = defaultThemeProp;
-const StyledMap = styled.div(({ height, disabled, status, eMessage, theme: { base: { 'disabled-opacity': disabledOpacity } } }) => {
+const StyledMap = styled.div(({ disabled, status, theme: { base: { 'disabled-opacity': disabledOpacity } } }) => {
     return css `
-      height: ${height};
+      position: absolute;
+      inset: 0;
       ${disabled &&
         css `
         opacity: ${disabledOpacity};
       `}
       ${status === 'error' &&
-        eMessage &&
         css `
         opacity: ${disabledOpacity};
       `}
@@ -49,14 +52,19 @@ var LoadStatus;
 const hasPlaceId = (obj) => {
     return typeof obj === 'object' && obj.placeId && typeof obj.placeId === 'string';
 };
-const LocationView = (props) => {
-    const { location = 'current', zoomLevel = 13, height = '25rem', centerMapOnChange = false, onClick, onError, disabled = false, ...restProps } = props;
+/* cSpell:ignore 'ABCDEFGHIJKLMNOPQRSTUVWYZ' */
+const markerLabels = 'ABCDEFGHIJKLMNOPQRSTUVWYZ';
+const LocationView = forwardRef(function LocationView(props, ref) {
+    const { pins = [], zoomLevel = 13, height = '25rem', centerMapOnChange = false, onClick, onError, disabled = false, loading = false, drawRoute = false, ...restProps } = props;
     const { name, ...providerOpts } = useContext(MapsContext);
     const [status, setStatus] = useState(LoadStatus.Init);
     const [eMessage, setEMessage] = useState('');
     const mapElemRef = useRef();
     const map = useRef();
-    const marker = useRef();
+    const markers = useRef([]);
+    const ds = useRef();
+    const dr = useRef();
+    const theme = useTheme();
     const onMapClick = (e) => {
         if (!isLatLngObject(e.latLng))
             return;
@@ -82,17 +90,15 @@ const LocationView = (props) => {
         if (mapElemRef.current) {
             const position = toGoogleLatLng({ latitude: 0, longitude: 0 });
             map.current = new google.maps.Map(mapElemRef.current, {
+                mapId: createUID(),
                 center: position,
                 zoom: 2,
                 draggable: !disabled,
                 draggableCursor: 'auto',
                 draggingCursor: 'move'
             });
-            marker.current = new google.maps.Marker({
-                map: map.current,
-                position
-            });
-            marker.current?.setVisible(false);
+            ds.current = new google.maps.DirectionsService();
+            dr.current = new google.maps.DirectionsRenderer({ suppressMarkers: true });
         }
     };
     useEffect(() => {
@@ -102,10 +108,10 @@ const LocationView = (props) => {
         return () => google.maps.event.removeListener(l);
     }, [onClick, map.current]);
     useEffect(() => {
-        let unMounted = false;
+        let mounted = true;
         loadMapsAPI(name, providerOpts)
             .then(() => {
-            if (!unMounted) {
+            if (mounted) {
                 initialize();
                 setStatus(LoadStatus.Ready);
             }
@@ -116,38 +122,85 @@ const LocationView = (props) => {
             onError?.(error);
         });
         return () => {
-            unMounted = true;
+            mounted = false;
             if (map.current)
                 google.maps.event.clearInstanceListeners(map.current);
         };
     }, []);
     useEffect(() => {
-        getCoords(location)
-            .then(coords => {
-            if (map.current) {
-                map.current.setOptions({
-                    zoom: zoomLevel,
-                    draggable: !disabled
-                });
-                const googleLatLng = toGoogleLatLng(coords);
-                marker.current?.setPosition(googleLatLng);
-                marker.current?.setVisible(true);
-                if (centerMapOnChange) {
-                    map.current.setCenter(googleLatLng);
-                }
-                if (status !== LoadStatus.Ready)
-                    setStatus(LoadStatus.Ready);
+        if (status !== LoadStatus.Ready ||
+            !map.current ||
+            !dr.current ||
+            !ds.current ||
+            // FIXME: Workaround for marker library not being imported
+            !google.maps.marker)
+            return;
+        if (drawRoute && pins.length > 1) {
+            dr.current.setMap(map.current);
+            const request = {
+                origin: toGoogleLatLng({ latitude: pins[0].latitude, longitude: pins[0].longitude }),
+                destination: toGoogleLatLng({
+                    latitude: pins[pins.length - 1].latitude,
+                    longitude: pins[pins.length - 1].longitude
+                }),
+                waypoints: pins.slice(1, pins.length - 1).map(l => {
+                    return {
+                        stopover: true,
+                        location: toGoogleLatLng({
+                            latitude: l.latitude,
+                            longitude: l.longitude
+                        })
+                    };
+                }),
+                travelMode: google.maps.TravelMode.DRIVING
+            };
+            ds.current.route(request).then(dr.current.setDirections.bind(dr.current), onError);
+        }
+        const bounds = new google.maps.LatLngBounds();
+        markers.current = pins.map(({ latitude, longitude, title, selected }, index) => {
+            const gCoords = toGoogleLatLng({ latitude, longitude });
+            const contentConfig = {
+                glyphColor: theme.base.colors.white
+            };
+            if (pins.length > 1) {
+                const glyphWrapper = document.createElement('span');
+                glyphWrapper.style.fontSize = '0.9rem';
+                glyphWrapper.style.paddingTop = '0.1rem';
+                glyphWrapper.innerHTML = markerLabels[index % markerLabels.length];
+                contentConfig.glyph = glyphWrapper;
             }
-        })
-            .catch((error) => {
-            if (status !== LoadStatus.Error)
-                setStatus(LoadStatus.Error);
-            marker.current?.setVisible(false);
-            setEMessage(error.message);
-            onError?.(error);
+            if (selected) {
+                contentConfig.background = theme.base.colors.red.dark;
+                contentConfig.borderColor = theme.base.colors.red.dark;
+                contentConfig.scale = 1.15;
+            }
+            const content = new google.maps.marker.PinElement(contentConfig);
+            const marker = new google.maps.marker.AdvancedMarkerElement({
+                map: map.current,
+                position: gCoords,
+                title,
+                content: content.element
+            });
+            bounds.extend(gCoords);
+            return marker;
         });
-    }, [location, status, zoomLevel, disabled, centerMapOnChange, onError]);
-    return (_jsxs(StyledLocationView, { height: height, children: [_jsx(StyledMap, { ref: mapElemRef, height: height, disabled: disabled, status: status, eMessage: eMessage, ...restProps }), status === LoadStatus.Init && _jsx(Progress, { placement: 'local' }), status === LoadStatus.Error && eMessage && (_jsx(StyledLocationError, { "aria-label": eMessage, variant: 'info', children: eMessage }))] }));
-};
+        if (centerMapOnChange) {
+            if (pins.length === 1) {
+                map.current.setCenter(toGoogleLatLng(pins[0]));
+                map.current.setZoom(zoomLevel);
+            }
+            else if (pins.length > 1) {
+                map.current.fitBounds(bounds);
+            }
+        }
+        return () => {
+            markers.current.forEach(m => {
+                m.map = null;
+            });
+            dr.current?.setMap(null);
+        };
+    }, [JSON.stringify(pins), status, zoomLevel, disabled, drawRoute, centerMapOnChange, onError]);
+    return (_jsxs(StyledLocationView, { height: height, ref: ref, children: [_jsx(StyledMap, { ref: mapElemRef, disabled: disabled, status: status, ...restProps }), (status === LoadStatus.Init || loading) && _jsx(Progress, { placement: 'local' }), status === LoadStatus.Error && eMessage && (_jsx(StyledLocationError, { "aria-label": eMessage, variant: 'info', children: eMessage }))] }));
+});
 export default LocationView;
 //# sourceMappingURL=LocationView.js.map

package/lib/components/Location/LocationView.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocationView.js","sourceRoot":"","sources":["../../../src/components/Location/LocationView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnC,OAAO,EACL,WAAW,EACX,SAAS,EACT,cAAc,EACd,YAAY,EACZ,cAAc,EACd,UAAU,EACX,MAAM,SAAS,CAAC;AAEjB,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;CAKhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAsB,KAAK,CAAC,EAAE;IACxE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAEhC,OAAO,GAAG,CAAA;cACE,MAAM;;;qBAGC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;GAG7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAM1B,CAAC,EACC,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAC9C,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;gBACE,MAAM;QACd,QAAQ;QACV,GAAG,CAAA;mBACU,eAAe;OAC3B;QACC,MAAM,KAAK,OAAO;QACpB,QAAQ;QACR,GAAG,CAAA;mBACU,eAAe;OAC3B;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiC1C,IAAK,UAIJ;AAJD,WAAK,UAAU;IACb,2BAAa,CAAA;IACb,6BAAe,CAAA;IACf,6BAAe,CAAA;AACjB,CAAC,EAJI,UAAU,KAAV,UAAU,QAId;AAED,MAAM,UAAU,GAAG,CAAC,GAAQ,EAA2D,EAAE;IACvF,OAAO,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,CAAC,OAAO,IAAI,OAAO,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC;AACnF,CAAC,CAAC;AAEF,MAAM,YAAY,GAA0B,CAAC,KAAwB,EAAE,EAAE;IACvE,MAAM,EACJ,QAAQ,GAAG,SAAS,EACpB,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,OAAO,EAChB,iBAAiB,GAAG,KAAK,EACzB,OAAO,EACP,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,IAAI,EAAE,GAAG,YAAY,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAa,UAAU,CAAC,IAAI,CAAC,CAAC;IAClE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,MAAM,EAAkB,CAAC;IAC5C,MAAM,GAAG,GAAG,MAAM,EAAmB,CAAC;IACtC,MAAM,MAAM,GAAG,MAAM,EAAsB,CAAC;IAE5C,MAAM,UAAU,GAAG,CAAC,CAA4B,EAAE,EAAE;QAClD,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC;YAAE,OAAO;QAEtC,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE;YACjB,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;gBACvC,OAAO,EAAE,CAAC;oBACR,GAAG,SAAS;oBACZ,QAAQ,EAAE,CAAC,CAAC,MAAO,CAAC,GAAG,EAAE;oBACzB,SAAS,EAAE,CAAC,CAAC,MAAO,CAAC,GAAG,EAAE;iBAC3B,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;SACJ;aAAM;YACL,UAAU,CAAC;gBACT,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE;gBACxB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE;aAC1B,CAAC;iBACC,IAAI,CAAC,OAAO,CAAC;iBACb,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;SACjC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,MAAM,QAAQ,GAAG,cAAc,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;YAC/D,GAAG,CAAC,OAAO,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,EAAE;gBACpD,MAAM,EAAE,QAAQ;gBAChB,IAAI,EAAE,CAAC;gBACP,SAAS,EAAE,CAAC,QAAQ;gBACpB,eAAe,EAAE,MAAM;gBACvB,cAAc,EAAE,MAAM;aACvB,CAAC,CAAC;YACH,MAAM,CAAC,OAAO,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;gBACtC,GAAG,EAAE,GAAG,CAAC,OAAO;gBAChB,QAAQ;aACT,CAAC,CAAC;YACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;SACnC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QAErC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,WAAW,CAAC,IAAI,EAAE,YAAY,CAAC;aAC5B,IAAI,CAAC,GAAG,EAAE;YACT,IAAI,CAAC,SAAS,EAAE;gBACd,UAAU,EAAE,CAAC;gBACb,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;aAC7B;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAY,EAAE,EAAE;YACtB,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAC5B,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAC3B,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;YACjB,IAAI,GAAG,CAAC,OAAO;gBAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACzE,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,QAAS,CAAC;aACjB,IAAI,CAAC,MAAM,CAAC,EAAE;YACb,IAAI,GAAG,CAAC,OAAO,EAAE;gBACf,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC;oBACrB,IAAI,EAAE,SAAS;oBACf,SAAS,EAAE,CAAC,QAAQ;iBACrB,CAAC,CAAC;gBACH,MAAM,YAAY,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;gBAE5C,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;gBAC1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;gBAEjC,IAAI,iBAAiB,EAAE;oBACrB,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;iBACrC;gBACD,IAAI,MAAM,KAAK,UAAU,CAAC,KAAK;oBAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;aAC9D;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAY,EAAE,EAAE;YACtB,IAAI,MAAM,KAAK,UAAU,CAAC,KAAK;gBAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAC7D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;YAClC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAC3B,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAAiB,EAAE,OAAO,CAAC,CAAC,CAAC;IAExE,OAAO,CACL,MAAC,kBAAkB,IAAC,MAAM,EAAE,MAAM,aAChC,KAAC,SAAS,IACR,GAAG,EAAE,UAAiC,EACtC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,KACd,SAAS,GACb,EACD,MAAM,KAAK,UAAU,CAAC,IAAI,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,GAAG,EAC5D,MAAM,KAAK,UAAU,CAAC,KAAK,IAAI,QAAQ,IAAI,CAC1C,KAAC,mBAAmB,kBAAa,QAAQ,EAAE,OAAO,EAAC,MAAM,YACtD,QAAQ,GACW,CACvB,IACkB,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useContext, useRef, useState, useEffect } from 'react';\nimport type { FC, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { BaseProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport { Status } from '../Badges';\n\nimport type { LatLng } from './types';\nimport {\n  loadMapsAPI,\n  getCoords,\n  toGoogleLatLng,\n  getPlaceById,\n  isLatLngObject,\n  getAddress\n} from './utils';\nimport type BaseLocationProps from './Location.types';\nimport MapsContext from './MapsContext';\n\nexport const StyledLocationError = styled(Status)`\n  position: absolute;\n  top: 40%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n`;\n\nStyledLocationError.defaultProps = defaultThemeProp;\n\nexport const StyledLocationView = styled.div<{ height?: string }>(props => {\n  const { height, theme } = props;\n\n  return css`\n    height: ${height};\n    position: relative;\n    flex: auto;\n    border-radius: ${theme.base['border-radius']};\n    mask-image: radial-gradient(white, black);\n    -webkit-mask-image: radial-gradient(white, black);\n  `;\n});\n\nStyledLocationView.defaultProps = defaultThemeProp;\n\nconst StyledMap = styled.div<{\n  height?: string;\n  status: string;\n  disabled: boolean;\n  eMessage: string;\n}>(\n  ({\n    height,\n    disabled,\n    status,\n    eMessage,\n    theme: {\n      base: { 'disabled-opacity': disabledOpacity }\n    }\n  }) => {\n    return css`\n      height: ${height};\n      ${disabled &&\n      css`\n        opacity: ${disabledOpacity};\n      `}\n      ${status === 'error' &&\n      eMessage &&\n      css`\n        opacity: ${disabledOpacity};\n      `}\n    `;\n  }\n);\n\nStyledMap.defaultProps = defaultThemeProp;\n\nexport interface LocationViewProps extends BaseLocationProps, BaseProps {\n  /**\n   * Location string as either coordinates, name of a place, or 'current' for the current location.\n   * @default 'current'\n   */\n  location?: LatLng | string | 'current';\n\n  /**\n   * Set to true to always center the map when the selected location changes. Toggling this from false to true will re-center map on the last pinned location.\n   * @default false\n   */\n  centerMapOnChange?: boolean;\n  /**\n   * Height of the map container.\n   * @default '25rem'\n   */\n  height?: string;\n  /**\n   * How much the map should zoom.\n   * @default 13\n   */\n  zoomLevel?: number;\n  /** Callback fired when user clicks on a location on the map. This function will be passed the coordinates of the location that was clicked. */\n  onClick?: (\n    coords: LatLng & {\n      name?: string;\n      address?: string;\n    }\n  ) => void;\n}\n\nenum LoadStatus {\n  Init = 'init',\n  Ready = 'ready',\n  Error = 'error'\n}\n\nconst hasPlaceId = (obj: any): obj is google.maps.IconMouseEvent & { placeId: string } => {\n  return typeof obj === 'object' && obj.placeId && typeof obj.placeId === 'string';\n};\n\nconst LocationView: FC<LocationViewProps> = (props: LocationViewProps) => {\n  const {\n    location = 'current',\n    zoomLevel = 13,\n    height = '25rem',\n    centerMapOnChange = false,\n    onClick,\n    onError,\n    disabled = false,\n    ...restProps\n  } = props;\n  const { name, ...providerOpts } = useContext(MapsContext);\n  const [status, setStatus] = useState<LoadStatus>(LoadStatus.Init);\n  const [eMessage, setEMessage] = useState('');\n  const mapElemRef = useRef<HTMLDivElement>();\n  const map = useRef<google.maps.Map>();\n  const marker = useRef<google.maps.Marker>();\n\n  const onMapClick = (e: google.maps.MapMouseEvent) => {\n    if (!isLatLngObject(e.latLng)) return;\n\n    if (hasPlaceId(e)) {\n      getPlaceById(e.placeId).then(placeInfo => {\n        onClick?.({\n          ...placeInfo,\n          latitude: e.latLng!.lat(),\n          longitude: e.latLng!.lng()\n        });\n      });\n    } else {\n      getAddress({\n        latitude: e.latLng.lat(),\n        longitude: e.latLng.lng()\n      })\n        .then(onClick)\n        .catch(err => onError?.(err));\n    }\n  };\n\n  const initialize = () => {\n    if (mapElemRef.current) {\n      const position = toGoogleLatLng({ latitude: 0, longitude: 0 });\n      map.current = new google.maps.Map(mapElemRef.current, {\n        center: position,\n        zoom: 2,\n        draggable: !disabled,\n        draggableCursor: 'auto',\n        draggingCursor: 'move'\n      });\n      marker.current = new google.maps.Marker({\n        map: map.current,\n        position\n      });\n      marker.current?.setVisible(false);\n    }\n  };\n\n  useEffect(() => {\n    if (!onClick || !map.current) return;\n\n    const l = map.current.addListener('click', onMapClick);\n    return () => google.maps.event.removeListener(l);\n  }, [onClick, map.current]);\n\n  useEffect(() => {\n    let unMounted = false;\n    loadMapsAPI(name, providerOpts)\n      .then(() => {\n        if (!unMounted) {\n          initialize();\n          setStatus(LoadStatus.Ready);\n        }\n      })\n      .catch((error: Error) => {\n        setStatus(LoadStatus.Error);\n        setEMessage(error.message);\n        onError?.(error);\n      });\n\n    return () => {\n      unMounted = true;\n      if (map.current) google.maps.event.clearInstanceListeners(map.current);\n    };\n  }, []);\n\n  useEffect(() => {\n    getCoords(location!)\n      .then(coords => {\n        if (map.current) {\n          map.current.setOptions({\n            zoom: zoomLevel,\n            draggable: !disabled\n          });\n          const googleLatLng = toGoogleLatLng(coords);\n\n          marker.current?.setPosition(googleLatLng);\n          marker.current?.setVisible(true);\n\n          if (centerMapOnChange) {\n            map.current.setCenter(googleLatLng);\n          }\n          if (status !== LoadStatus.Ready) setStatus(LoadStatus.Ready);\n        }\n      })\n      .catch((error: Error) => {\n        if (status !== LoadStatus.Error) setStatus(LoadStatus.Error);\n        marker.current?.setVisible(false);\n        setEMessage(error.message);\n        onError?.(error);\n      });\n  }, [location, status, zoomLevel, disabled, centerMapOnChange, onError]);\n\n  return (\n    <StyledLocationView height={height}>\n      <StyledMap\n        ref={mapElemRef as Ref<HTMLDivElement>}\n        height={height}\n        disabled={disabled}\n        status={status}\n        eMessage={eMessage}\n        {...restProps}\n      />\n      {status === LoadStatus.Init && <Progress placement='local' />}\n      {status === LoadStatus.Error && eMessage && (\n        <StyledLocationError aria-label={eMessage} variant='info'>\n          {eMessage}\n        </StyledLocationError>\n      )}\n    </StyledLocationView>\n  );\n};\n\nexport default LocationView;\n"]}
+{"version":3,"file":"LocationView.js","sourceRoot":"","sources":["../../../src/components/Location/LocationView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef, useState, useEffect, forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { RefElement, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport { Status } from '../Badges';\nimport { createUID } from '../../utils';\nimport useTheme from '../../hooks/useTheme';\nimport { omitProps } from '../../styles';\n\nimport type { LatLng, Pin } from './Location.types';\nimport { loadMapsAPI, toGoogleLatLng, getPlaceById, isLatLngObject, getAddress } from './utils';\nimport MapsContext from './MapsContext';\n\nexport const StyledLocationError = styled(Status)`\n  position: absolute;\n  top: 40%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n`;\n\nStyledLocationError.defaultProps = defaultThemeProp;\n\nexport const StyledLocationView = styled.div.withConfig<{ height?: string }>(omitProps('height'))(\n  ({ height, theme }) => {\n    return css`\n      min-height: inherit;\n      height: ${height};\n      position: relative;\n      flex: auto;\n      border-radius: ${theme.base['border-radius']};\n      mask-image: radial-gradient(white, black);\n      -webkit-mask-image: radial-gradient(white, black);\n    `;\n  }\n);\n\nStyledLocationView.defaultProps = defaultThemeProp;\n\nconst StyledMap = styled.div<{\n  status: string;\n  disabled: boolean;\n}>(\n  ({\n    disabled,\n    status,\n    theme: {\n      base: { 'disabled-opacity': disabledOpacity }\n    }\n  }) => {\n    return css`\n      position: absolute;\n      inset: 0;\n      ${disabled &&\n      css`\n        opacity: ${disabledOpacity};\n      `}\n      ${status === 'error' &&\n      css`\n        opacity: ${disabledOpacity};\n      `}\n    `;\n  }\n);\n\nStyledMap.defaultProps = defaultThemeProp;\n\nexport type LocationViewProps = WithAttributes<\n  'div',\n  {\n    /**\n     * Array of location objects.\n     * @default []\n     */\n    pins?: Pin[];\n    /**\n     * Set to true to always center the map when the selected location changes. Toggling this from false to true will re-center map on the last pinned location.\n     * @default false\n     */\n    centerMapOnChange?: boolean;\n    /**\n     * Height of the map container.\n     * @default '25rem'\n     */\n    height?: string;\n    /**\n     * How much the map should zoom.\n     * @default 13\n     */\n    zoomLevel?: number;\n    /** Callback fired when user clicks on a location on the map. This function will be passed the coordinates of the location that was clicked. */\n    onClick?: (\n      locationData: LatLng & {\n        name?: string;\n        address?: string;\n      }\n    ) => void;\n    /**\n     * Renders loading indicator when true. Informs the user location resolution is in progress.\n     */\n    loading?: boolean;\n    /**\n     * Disables dragging and clicking when true.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Indicates if route between pins should be rendered.\n     * @default false\n     */\n    drawRoute?: boolean;\n\n    /** Callback fired when an error occurs. This function gets called with one argument of type Error. */\n    onError?: (error: Error) => void;\n  }\n>;\n\nenum LoadStatus {\n  Init = 'init',\n  Ready = 'ready',\n  Error = 'error'\n}\n\nconst hasPlaceId = (obj: any): obj is google.maps.IconMouseEvent & { placeId: string } => {\n  return typeof obj === 'object' && obj.placeId && typeof obj.placeId === 'string';\n};\n\n/* cSpell:ignore 'ABCDEFGHIJKLMNOPQRSTUVWYZ' */\nconst markerLabels = 'ABCDEFGHIJKLMNOPQRSTUVWYZ';\n\nconst LocationView = forwardRef<RefElement<LocationViewProps>, PropsWithoutRef<LocationViewProps>>(\n  function LocationView(props, ref) {\n    const {\n      pins = [],\n      zoomLevel = 13,\n      height = '25rem',\n      centerMapOnChange = false,\n      onClick,\n      onError,\n      disabled = false,\n      loading = false,\n      drawRoute = false,\n      ...restProps\n    } = props;\n    const { name, ...providerOpts } = useContext(MapsContext);\n    const [status, setStatus] = useState<LoadStatus>(LoadStatus.Init);\n    const [eMessage, setEMessage] = useState('');\n    const mapElemRef = useRef<HTMLDivElement>();\n    const map = useRef<google.maps.Map>();\n    const markers = useRef<google.maps.marker.AdvancedMarkerElement[]>([]);\n    const ds = useRef<google.maps.DirectionsService>();\n    const dr = useRef<google.maps.DirectionsRenderer>();\n    const theme = useTheme();\n\n    const onMapClick = (e: google.maps.MapMouseEvent) => {\n      if (!isLatLngObject(e.latLng)) return;\n\n      if (hasPlaceId(e)) {\n        getPlaceById(e.placeId).then(placeInfo => {\n          onClick?.({\n            ...placeInfo,\n            latitude: e.latLng!.lat(),\n            longitude: e.latLng!.lng()\n          });\n        });\n      } else {\n        getAddress({\n          latitude: e.latLng.lat(),\n          longitude: e.latLng.lng()\n        })\n          .then(onClick)\n          .catch(err => onError?.(err));\n      }\n    };\n\n    const initialize = () => {\n      if (mapElemRef.current) {\n        const position = toGoogleLatLng({ latitude: 0, longitude: 0 });\n        map.current = new google.maps.Map(mapElemRef.current, {\n          mapId: createUID(),\n          center: position,\n          zoom: 2,\n          draggable: !disabled,\n          draggableCursor: 'auto',\n          draggingCursor: 'move'\n        });\n        ds.current = new google.maps.DirectionsService();\n        dr.current = new google.maps.DirectionsRenderer({ suppressMarkers: true });\n      }\n    };\n\n    useEffect(() => {\n      if (!onClick || !map.current) return;\n\n      const l = map.current.addListener('click', onMapClick);\n      return () => google.maps.event.removeListener(l);\n    }, [onClick, map.current]);\n\n    useEffect(() => {\n      let mounted = true;\n      loadMapsAPI(name, providerOpts)\n        .then(() => {\n          if (mounted) {\n            initialize();\n            setStatus(LoadStatus.Ready);\n          }\n        })\n        .catch((error: Error) => {\n          setStatus(LoadStatus.Error);\n          setEMessage(error.message);\n          onError?.(error);\n        });\n\n      return () => {\n        mounted = false;\n        if (map.current) google.maps.event.clearInstanceListeners(map.current);\n      };\n    }, []);\n\n    useEffect(() => {\n      if (\n        status !== LoadStatus.Ready ||\n        !map.current ||\n        !dr.current ||\n        !ds.current ||\n        // FIXME: Workaround for marker library not being imported\n        !google.maps.marker\n      )\n        return;\n\n      if (drawRoute && pins.length > 1) {\n        dr.current.setMap(map.current);\n        const request: google.maps.DirectionsRequest = {\n          origin: toGoogleLatLng({ latitude: pins[0].latitude, longitude: pins[0].longitude }),\n          destination: toGoogleLatLng({\n            latitude: pins[pins.length - 1].latitude,\n            longitude: pins[pins.length - 1].longitude\n          }),\n          waypoints: pins.slice(1, pins.length - 1).map(l => {\n            return {\n              stopover: true,\n              location: toGoogleLatLng({\n                latitude: l.latitude,\n                longitude: l.longitude\n              })\n            };\n          }),\n          travelMode: google.maps.TravelMode.DRIVING\n        };\n\n        ds.current.route(request).then(dr.current.setDirections.bind(dr.current), onError);\n      }\n\n      const bounds = new google.maps.LatLngBounds();\n\n      markers.current = pins.map(({ latitude, longitude, title, selected }, index) => {\n        const gCoords = toGoogleLatLng({ latitude, longitude });\n\n        const contentConfig: google.maps.marker.PinElementOptions = {\n          glyphColor: theme.base.colors.white\n        };\n        if (pins.length > 1) {\n          const glyphWrapper = document.createElement('span');\n          glyphWrapper.style.fontSize = '0.9rem';\n          glyphWrapper.style.paddingTop = '0.1rem';\n          glyphWrapper.innerHTML = markerLabels[index % markerLabels.length];\n          contentConfig.glyph = glyphWrapper;\n        }\n        if (selected) {\n          contentConfig.background = theme.base.colors.red.dark;\n          contentConfig.borderColor = theme.base.colors.red.dark;\n          contentConfig.scale = 1.15;\n        }\n        const content = new google.maps.marker.PinElement(contentConfig);\n        const marker = new google.maps.marker.AdvancedMarkerElement({\n          map: map.current,\n          position: gCoords,\n          title,\n          content: content.element\n        });\n        bounds.extend(gCoords);\n        return marker;\n      });\n\n      if (centerMapOnChange) {\n        if (pins.length === 1) {\n          map.current.setCenter(toGoogleLatLng(pins[0]));\n          map.current.setZoom(zoomLevel);\n        } else if (pins.length > 1) {\n          map.current.fitBounds(bounds);\n        }\n      }\n\n      return () => {\n        markers.current.forEach(m => {\n          m.map = null;\n        });\n        dr.current?.setMap(null);\n      };\n    }, [JSON.stringify(pins), status, zoomLevel, disabled, drawRoute, centerMapOnChange, onError]);\n\n    return (\n      <StyledLocationView height={height} ref={ref}>\n        <StyledMap\n          ref={mapElemRef as Ref<HTMLDivElement>}\n          disabled={disabled}\n          status={status}\n          {...restProps}\n        />\n        {(status === LoadStatus.Init || loading) && <Progress placement='local' />}\n        {status === LoadStatus.Error && eMessage && (\n          <StyledLocationError aria-label={eMessage} variant='info'>\n            {eMessage}\n          </StyledLocationError>\n        )}\n      </StyledLocationView>\n    );\n  }\n);\n\nexport default LocationView;\n"]}

package/lib/components/Location/index.d.ts

@@ -5,6 +5,6 @@ export type { LocationViewProps } from './LocationView';
 export { default as MapsContext } from './MapsContext';
 export { default as LocationDisplay } from './LocationDisplay';
 export type { LocationDisplayProps } from './LocationDisplay';
-export type { LatLng } from './types';
-export { isValueACoordinate } from './utils';
+export type { LatLng, Pin, Location } from './Location.types';
+export { isValueACoordinate, getCoords } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Location/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Location/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Location/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/lib/components/Location/index.js

@@ -2,5 +2,5 @@ export { default as LocationInput } from './LocationInput';
 export { default as LocationView } from './LocationView';
 export { default as MapsContext } from './MapsContext';
 export { default as LocationDisplay } from './LocationDisplay';
-export { isValueACoordinate } from './utils';
+export { isValueACoordinate, getCoords } from './utils';
 //# sourceMappingURL=index.js.map

package/lib/components/Location/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Location/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAG/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default as LocationInput } from './LocationInput';\nexport type { LocationInputProps } from './LocationInput';\nexport { default as LocationView } from './LocationView';\nexport type { LocationViewProps } from './LocationView';\nexport { default as MapsContext } from './MapsContext';\nexport { default as LocationDisplay } from './LocationDisplay';\nexport type { LocationDisplayProps } from './LocationDisplay';\nexport type { LatLng } from './types';\nexport { isValueACoordinate } from './utils';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Location/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAG/D,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default as LocationInput } from './LocationInput';\nexport type { LocationInputProps } from './LocationInput';\nexport { default as LocationView } from './LocationView';\nexport type { LocationViewProps } from './LocationView';\nexport { default as MapsContext } from './MapsContext';\nexport { default as LocationDisplay } from './LocationDisplay';\nexport type { LocationDisplayProps } from './LocationDisplay';\nexport type { LatLng, Pin, Location } from './Location.types';\nexport { isValueACoordinate, getCoords } from './utils';\n"]}

package/lib/components/Location/utils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="google.maps" />
-import type { Bias, LatLng, ProviderOpts, Location } from './types';
+import type { Bias, LatLng, ProviderOpts, Location } from './Location.types';
 export declare function loadMapsAPI(name?: string, opts?: ProviderOpts): Promise<void>;
 /**
  * Identifies coordinates in degree format
@@ -37,7 +37,7 @@ export declare function getPlacePredictions(location: string, bias?: Bias): Prom
 export declare function getPlace(location: string, mapElement?: HTMLDivElement): Promise<LatLng>;
 export declare function getPlaceById(placeId: string, sessionToken?: google.maps.places.AutocompleteSessionToken, mapElement?: HTMLDivElement): Promise<Location>;
 /** Returns coordinations for given input: either coords, address or current position. */
-export declare function getCoords(coords: string | LatLng, mapElement?: HTMLDivElement): Promise<LatLng>;
+export declare function getCoords(coords: string | 'current' | LatLng, mapElement?: HTMLDivElement): Promise<LatLng>;
 export declare function getAddress(coords: LatLng): Promise<{
     name: string;
     address?: string;

package/lib/components/Location/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Location/utils.ts"],"names":[],"mappings":";AAaA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAgB,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiIlF,wBAAsB,WAAW,CAAC,IAAI,GAAE,MAAW,EAAE,IAAI,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CAYvF;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEpE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAE1D;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAE3D;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAOzD;AA6BD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAwBhD;AAED,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC,CAc5D;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAEjE;AAED;;GAEG;AACH,wBAAsB,mBAAmB,CACvC,QAAQ,EAAE,MAAM,EAChB,IAAI,GAAE,IAAS,GACd,OAAO,CAAC;IACT,gBAAgB,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,sBAAsB,EAAE,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,wBAAwB,CAAC;CACpD,CAAC,CAwCD;AAED,wBAAsB,QAAQ,CAC5B,QAAQ,EAAE,MAAM,EAChB,UAAU,GAAE,cAA8C,GACzD,OAAO,CAAC,MAAM,CAAC,CAkBjB;AAED,wBAAsB,YAAY,CAChC,OAAO,EAAE,MAAM,EACf,YAAY,GAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,wBAA4E,EAC7G,UAAU,GAAE,cAA8C,GACzD,OAAO,CAAC,QAAQ,CAAC,CAgBnB;AAED,yFAAyF;AACzF,wBAAsB,SAAS,CAC7B,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,UAAU,CAAC,EAAE,cAAc,GAC1B,OAAO,CAAC,MAAM,CAAC,CA2BjB;AAED,wBAAsB,UAAU,CAC9B,MAAM,EAAE,MAAM,GACb,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC,CAkClF;AAED,eAAO,MAAM,cAAc,QAAS,GAAG,8BAStC,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Location/utils.ts"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAgB,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA0H3F,wBAAsB,WAAW,CAAC,IAAI,GAAE,MAAW,EAAE,IAAI,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CAkBvF;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEpE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAE1D;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAE3D;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAOzD;AA6BD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAmChD;AAED,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC,CAc5D;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAEjE;AAED;;GAEG;AACH,wBAAsB,mBAAmB,CACvC,QAAQ,EAAE,MAAM,EAChB,IAAI,GAAE,IAAS,GACd,OAAO,CAAC;IACT,gBAAgB,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,sBAAsB,EAAE,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,wBAAwB,CAAC;CACpD,CAAC,CAwCD;AAED,wBAAsB,QAAQ,CAC5B,QAAQ,EAAE,MAAM,EAChB,UAAU,GAAE,cAA8C,GACzD,OAAO,CAAC,MAAM,CAAC,CAsBjB;AAED,wBAAsB,YAAY,CAChC,OAAO,EAAE,MAAM,EACf,YAAY,GAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,wBAA4E,EAC7G,UAAU,GAAE,cAA8C,GACzD,OAAO,CAAC,QAAQ,CAAC,CAgBnB;AAED,yFAAyF;AACzF,wBAAsB,SAAS,CAC7B,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,EACnC,UAAU,CAAC,EAAE,cAAc,GAC1B,OAAO,CAAC,MAAM,CAAC,CAuCjB;AAED,wBAAsB,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC,CAkCD;AAED,eAAO,MAAM,cAAc,QAAS,GAAG,8BAStC,CAAC"}

package/lib/components/Location/utils.js

@@ -1,13 +1,15 @@
-import { hasProp, loadScript } from '../../utils';
-import { CoordsCannotBeParsedError, GeocoderFailedError, GeolocationUnsupportedError, GoogleMapsAPINotFoundError, IsNotAnObjectError, LocationNotFoundError, ProviderNotSupportedError, QUERY_FIELDS, QUERY_TYPES } from './types';
-const GOOGLE_MAPS_SCRIPT_ID = 'google-map';
+import { Loader } from '@googlemaps/js-api-loader';
+import { hasProp } from '../../utils';
+import { CoordsCannotBeParsedError, GeocoderFailedError, GeolocationUnsupportedError, GoogleMapsAPINotFoundError, IsNotAnObjectError, LocationNotFoundError, ProviderNotSupportedError, QUERY_FIELDS, QUERY_TYPES } from './Location.types';
 const DegreeRegexChunks = [
     /^[-+]?/,
     // latitude degrees
     /([0-9]|[1-8][0-9]|90)(\.\d+)?°/,
     /\s?/,
     // latitude direction
-    /(N|S)?\s/,
+    /(N|S)?/,
+    // sepeartor between latitude and longitude
+    /(,|,\s|\s)/,
     /[-+]?/,
     // longitude degrees
     /([0-9]|[1-9][0-9]|1[0-7][0-9]|180)(\.\d+)?°/,
@@ -22,16 +24,18 @@ const DMRegexChunks = [
     /([0-9]|[1-8][0-9]|90)°/,
     /\s?/,
     // latitude minutes
-    /[0-5][0-9](\.\d+)?('|’)/,
+    /([0-9]|[0-5][0-9])(\.\d+)?('|’)/,
     /\s?/,
     // latitude direction
-    /(N|S)?\s/,
+    /(N|S)?/,
+    // sepeartor between latitude and longitude
+    /(,|,\s|\s)/,
     /[-+]?/,
     // longitude degrees
     /([0-9]|[1-9][0-9]|1[0-7][0-9]|180)°/,
     /\s?/,
     // longitude minutes
-    /[0-5][0-9](\.\d+)?('|’)/,
+    /([0-9]|[0-5][0-9])(\.\d+)?('|’)/,
     /\s?/,
     // longitude direction
     /(W|E)?$/
@@ -43,22 +47,24 @@ const DMSRegexChunks = [
     /([0-9]|[1-8][0-9]|90)°/,
     /\s?/,
     // latitude minutes
-    /[0-5][0-9]('|’)/,
+    /([0-9]|[0-5][0-9])('|’)/,
     /\s?/,
     // latitude seconds
-    /[0-5][0-9](\.\d+)?("|″)/,
+    /([0-9]|[0-5][0-9])(\.\d+)?("|″)/,
     /\s?/,
     // latitude direction
-    /(N|S)?\s/,
+    /(N|S)?/,
+    // sepeartor between latitude and longitude
+    /(,|,\s|\s)/,
     /[-+]?/,
     // longitude degrees
     /([0-9]|[1-9][0-9]|1[0-7][0-9]|180)°/,
     /\s?/,
     // longitude minutes
-    /[0-5][0-9]('|’)/,
+    /([0-9]|[0-5][0-9])('|’)/,
     /\s?/,
     // longitude seconds
-    /[0-5][0-9](\.\d+)?("|″)/,
+    /([0-9]|[0-5][0-9])(\.\d+)?("|″)/,
     /\s?/,
     // longitude direction
     /(W|E)?$/
@@ -68,7 +74,7 @@ const decimalRegexChunks = [
     /^[-+]?/,
     /([0-9]|[1-8][0-9]|90)/,
     /(\.\d+)?/,
-    /,(\s)?/,
+    /(,|\s|,\s)/,
     /[-+]?/,
     /([0-9]|[1-9][0-9]|1[0-7][0-9]|180)/,
     /(\.\d+)?$/
@@ -80,23 +86,15 @@ const providers = {
         loadedPromise: null,
         loadedApiKey: '',
         loadAPI(opts) {
-            const params = new URLSearchParams(Object.entries({
-                key: opts.apiKey,
+            const loader = new Loader({
+                version: '3.55',
+                apiKey: opts.apiKey,
                 region: opts.region,
                 language: opts.language,
-                libraries: 'places'
-            }).filter(([, value]) => value !== undefined)).toString();
-            const loadedScript = document.getElementById(GOOGLE_MAPS_SCRIPT_ID);
-            if (loadedScript) {
-                loadedScript.remove();
-                // https://stackoverflow.com/questions/29930274/fixing-you-have-included-the-google-maps-api-multiple-times-on-this-page-this
-                delete window.google;
-            }
-            return new Promise((resolve, reject) => {
-                loadScript(`https://maps.googleapis.com/maps/api/js?${params}`, function onLoad() {
-                    this.id = GOOGLE_MAPS_SCRIPT_ID;
-                    return resolve();
-                }, () => reject(new Error(GoogleMapsAPINotFoundError)));
+                libraries: ['places', 'marker']
+            });
+            return loader.load().then(() => { }, () => {
+                throw new Error(GoogleMapsAPINotFoundError);
             });
         }
     },
@@ -112,9 +110,15 @@ export async function loadMapsAPI(name = '', opts) {
         throw new Error(IsNotAnObjectError);
     }
     const provider = providers[name] ?? providers.undefined;
-    if (!provider.loadedPromise || provider.loadedApiKey !== opts?.apiKey) {
-        provider.loadedApiKey = opts?.apiKey;
-        provider.loadedPromise = provider.loadAPI(opts);
+    if (!provider.loadedPromise) {
+        provider.loadedPromise = provider
+            .loadAPI(opts)
+            .then(() => {
+            provider.loadedApiKey = opts?.apiKey;
+        })
+            .catch(() => {
+            provider.loadedPromise = null;
+        });
     }
     return provider.loadedPromise;
 }
@@ -176,18 +180,26 @@ function convertDMSToDD({ degrees, minutes, seconds }, direction) {
  */
 export function parseDMS(input) {
     if (isValueDMSCoordinate(input)) {
-        const parts = input.split(/'|’|"|″|°|\s/);
-        const lat = convertDMSToDD({ degrees: Number(parts[0]), minutes: Number(parts[1]), seconds: Number(parts[2]) }, parts[3]);
-        const lng = convertDMSToDD({ degrees: Number(parts[4]), minutes: Number(parts[5]), seconds: Number(parts[6]) }, parts[7]);
+        const parts = input.split(/'|’|"\s?|″\s?|°|,?\s|,\s?/);
+        const lat = convertDMSToDD({
+            degrees: Number(parts[0]),
+            minutes: Number(parts[1]),
+            seconds: Number(parts[2])
+        }, parts[3]);
+        const lng = convertDMSToDD({
+            degrees: Number(parts[4]),
+            minutes: Number(parts[5]),
+            seconds: Number(parts[6])
+        }, parts[7]);
         return [lat, lng];
     }
     if (isValueDMCoordinate(input)) {
-        const parts = input.split(/'|’|°|\s/);
+        const parts = input.split(/'\s?|’\s?|°|,?\s|,\s?/);
         const lat = convertDMSToDD({ degrees: Number(parts[0]), minutes: Number(parts[1]) }, parts[2]);
         const lng = convertDMSToDD({ degrees: Number(parts[3]), minutes: Number(parts[4]) }, parts[5]);
         return [lat, lng];
     }
-    const parts = input.split(/°|\s/);
+    const parts = input.split(/°\s?|,?\s|,\s?/);
     const lat = convertDMSToDD({ degrees: Number(parts[0]) }, parts[1]);
     const lng = convertDMSToDD({ degrees: Number(parts[2]) }, parts[3]);
     return [lat, lng];
@@ -253,7 +265,11 @@ export async function getPlace(location, mapElement = document.createElement('di
     const placesService = new google.maps.places.PlacesService(mapElement);
     const { placePredictions, token } = await getPlacePredictions(location);
     return new Promise((resolve, reject) => {
-        placesService.getDetails({ placeId: placePredictions[0]?.place_id, fields: QUERY_FIELDS, sessionToken: token }, (place, pStatus) => {
+        placesService.getDetails({
+            placeId: placePredictions[0]?.place_id,
+            fields: QUERY_FIELDS,
+            sessionToken: token
+        }, (place, pStatus) => {
             if (pStatus === google.maps.places.PlacesServiceStatus.OK) {
                 resolve({
                     latitude: place?.geometry?.location?.lat() || NaN,
@@ -299,7 +315,20 @@ export async function getCoords(coords, mapElement) {
             latLng = parseDMS(coords);
         }
         else {
-            latLng = coords.split(',', 2).map(Number);
+            let splitter;
+            if (coords.includes(', ')) {
+                splitter = ', ';
+            }
+            else if (coords.includes(',')) {
+                splitter = ',';
+            }
+            else if (coords.includes(' ')) {
+                splitter = ' ';
+            }
+            else {
+                splitter = ', ';
+            }
+            latLng = coords.split(splitter).map(Number);
         }
         const [lat, lng] = latLng;
         if (Number.isNaN(lat) || Number.isNaN(lng) || lat === undefined || lng === undefined)