@reltio/components 1.4.877 → 1.4.881

package/cjs/components/ReltioGridLayout/ReltioGridLayout.js

@@ -0,0 +1,117 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importStar(require("react"));
+var react_grid_layout_1 = __importDefault(require("react-grid-layout"));
+var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var helpers_1 = require("./helpers");
+var styles_1 = require("./styles");
+var ReltioGridLayout = function (_a) {
+    var _b;
+    var views = _a.views, layout = _a.layout, layoutOptions = _a.layoutOptions, onLayoutChanged = _a.onLayoutChanged, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, classes = _a.classes;
+    var ref = react_1.useRef();
+    var styles = styles_1.useStyles();
+    var _c = react_1.useState(null), fullscreenItemId = _c[0], setFullscreenItemId = _c[1];
+    var _d = react_1.useState(0), width = _d[0], setWidth = _d[1];
+    var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
+    var processedLayout = react_1.useMemo(function () { return helpers_1.reltioLayoutToReactGridLayout(layout); }, [layout]);
+    var onReltioLayoutChanged = ramda_1.pipe(helpers_1.reactGridLayoutToReltioLayout, helpers_1.copyPropsFromPreviousLayout(['autosizing'], layout), onLayoutChanged);
+    var handleDrop = function (layout, layoutItem, e) {
+        if (onDrop) {
+            onDrop(helpers_1.reactGridLayoutToReltioLayout(layout), helpers_1.reactGridLayoutItemToReltioLayoutItem(layoutItem), e);
+        }
+    };
+    var onToggleFullscreen = react_1.useCallback(function (id) { return setFullscreenItemId(function (prevId) { return (prevId ? null : id); }); }, []);
+    var isFullscreenEnabled = fullscreenItemId !== null;
+    var onItemHeightResize = react_1.useCallback(function (height, layoutId) {
+        var isLayoutChanged = false;
+        var newLayout = layout.map(function (layoutItem) {
+            if (layoutItem.id === layoutId && height) {
+                var newHeight = helpers_1.calcHeight(height, layoutOptions);
+                if (layoutItem.height !== newHeight) {
+                    isLayoutChanged = true;
+                    return __assign(__assign({}, layoutItem), { minHeight: newHeight, maxHeight: newHeight, height: newHeight });
+                }
+            }
+            return layoutItem;
+        });
+        if (isLayoutChanged) {
+            onLayoutChanged(newLayout);
+        }
+    }, [layout, layoutOptions, onLayoutChanged]);
+    var getAutosizeComponent = function (layoutItemId) {
+        return (react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: function (width, height) {
+                onItemHeightResize(height, layoutItemId);
+            } }));
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
+        react_1.default.createElement(react_grid_layout_1.default, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: classnames_1.default(styles.gridLayout, (_b = {}, _b[styles.gridFullscreen] = isFullscreenEnabled, _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
+            var isItemFullscreen = fullscreenItemId === layoutItem.i;
+            var isAutosize = (helpers_1.getReltioLayoutItemById(layout, layoutItem.i) || {}).autosizing;
+            var autosizeComponent = isAutosize ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) } : {};
+            return (react_1.default.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames_1.default({ fullscreen: isItemFullscreen }, classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
+        }))));
+};
+ReltioGridLayout.defaultProps = {
+    layoutOptions: {
+        cols: 4,
+        rowHeight: 30,
+        margin: [15, 15]
+    },
+    onConfigChanged: ramda_1.identity,
+    onLayoutChanged: ramda_1.identity,
+    classes: {}
+};
+ReltioGridLayout.propTypes = {
+    views: prop_types_1.default.array,
+    layout: prop_types_1.default.array,
+    layoutOptions: prop_types_1.default.object,
+    onConfigChanged: prop_types_1.default.func,
+    onLayoutChanged: prop_types_1.default.func,
+    onDrop: prop_types_1.default.func,
+    onRemove: prop_types_1.default.func,
+    LayoutItem: prop_types_1.default.elementType,
+    draggableHandle: prop_types_1.default.string,
+    isDroppable: prop_types_1.default.bool,
+    droppingItem: prop_types_1.default.object,
+    classes: prop_types_1.default.shape({
+        item: prop_types_1.default.string
+    })
+};
+exports.default = react_1.memo(ReltioGridLayout);

package/cjs/components/ReltioGridLayout/helpers.js

@@ -0,0 +1,65 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcHeight = exports.copyPropsFromPreviousLayout = exports.getReltioLayoutItemById = exports.reactGridLayoutToReltioLayout = exports.reltioLayoutToReactGridLayout = exports.reactGridLayoutItemToReltioLayoutItem = exports.reltioLayoutItemToReactGridLayoutItem = exports.getReltioViewId = void 0;
+var ramda_1 = require("ramda");
+var getReltioViewId = function (id) { return id.split(/\d+_/)[1]; };
+exports.getReltioViewId = getReltioViewId;
+var reltioLayoutItemToReactGridLayoutItem = function (_a) {
+    var x = _a.x, y = _a.y, width = _a.width, height = _a.height, id = _a.id, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, isStatic = _a.isStatic;
+    return ({
+        x: x,
+        y: y,
+        w: width,
+        h: height,
+        minW: minWidth,
+        minH: minHeight,
+        maxW: maxWidth,
+        maxH: maxHeight,
+        i: id,
+        static: isStatic
+    });
+};
+exports.reltioLayoutItemToReactGridLayoutItem = reltioLayoutItemToReactGridLayoutItem;
+var reactGridLayoutItemToReltioLayoutItem = function (_a) {
+    var x = _a.x, y = _a.y, w = _a.w, h = _a.h, maxW = _a.maxW, minW = _a.minW, minH = _a.minH, maxH = _a.maxH, i = _a.i, obj = __rest(_a, ["x", "y", "w", "h", "maxW", "minW", "minH", "maxH", "i"]);
+    return ({
+        x: x,
+        y: y,
+        width: w,
+        height: h,
+        minWidth: minW,
+        minHeight: minH,
+        maxWidth: maxW,
+        maxHeight: maxH,
+        id: i,
+        isStatic: obj.static
+    });
+};
+exports.reactGridLayoutItemToReltioLayoutItem = reactGridLayoutItemToReltioLayoutItem;
+var reltioLayoutToReactGridLayout = function (layout) { return (layout || []).map(exports.reltioLayoutItemToReactGridLayoutItem); };
+exports.reltioLayoutToReactGridLayout = reltioLayoutToReactGridLayout;
+var reactGridLayoutToReltioLayout = function (layout) { return (layout || []).map(exports.reactGridLayoutItemToReltioLayoutItem); };
+exports.reactGridLayoutToReltioLayout = reactGridLayoutToReltioLayout;
+exports.getReltioLayoutItemById = ramda_1.curry(function (layout, id) { return (layout || []).find(ramda_1.propEq('id', id)); });
+var updateExtraPropsInLayoutItem = ramda_1.curry(function (props, from, to) { return ramda_1.mergeAll([to, ramda_1.pick(props, from)]); });
+exports.copyPropsFromPreviousLayout = ramda_1.curry(function (props, oldReltioLayout, reltioLayout) {
+    return (reltioLayout || []).map(function (layoutItem) {
+        return ramda_1.pipe(ramda_1.prop('id'), exports.getReltioLayoutItemById(oldReltioLayout), ramda_1.defaultTo({}), updateExtraPropsInLayoutItem(props, ramda_1.__, layoutItem))(layoutItem);
+    });
+});
+var calcHeight = function (height, options) {
+    var margin = options.margin, rowHeight = options.rowHeight;
+    return Math.ceil((height + margin[1]) / (rowHeight + margin[1]));
+};
+exports.calcHeight = calcHeight;

package/cjs/components/ReltioGridLayout/icons/ResizeIcon.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RESIZE_ICON = void 0;
+exports.RESIZE_ICON = "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path stroke=\"#505050\" stroke-opacity=\".54\" d=\"M9.5 0v10M0 9.5h9M7.5 4v4M4 7.5h3\"/>\n</svg>";

package/cjs/components/ReltioGridLayout/styles.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ResizeIcon_svg_1 = require("./icons/ResizeIcon.svg");
+exports.useStyles = styles_1.makeStyles(function (_) { return ({
+    gridLayout: {
+        position: 'relative',
+        width: '100%',
+        '& .react-grid-item': {
+            '&.react-grid-placeholder': {
+                background: 'rgba(0, 0, 0, 0.03)',
+                border: '2px dashed rgba(0, 0, 0, 0.3)',
+                borderRadius: '3px',
+                transitionDuration: '100ms',
+                zIndex: 7,
+                userSelect: 'none',
+                '& .react-resizable-handle': {
+                    display: 'none'
+                }
+            },
+            '&.static .react-resizable-handle': {
+                display: 'none'
+            },
+            '&.cssTransforms': {
+                transitionProperty: 'transform'
+            },
+            '&.resizing': {
+                zIndex: 9,
+                willChange: 'width, height',
+                pointerEvents: 'none'
+            },
+            '&.react-draggable-dragging': {
+                transition: 'none',
+                zIndex: 8,
+                willChange: 'transform',
+                '& .react-resizable-handle': {
+                    backgroundImage: 'none'
+                }
+            },
+            '& .react-resizable-handle': {
+                position: 'absolute',
+                width: '17px',
+                height: '17px',
+                bottom: 0,
+                right: 0,
+                zIndex: 20,
+                backgroundImage: "url('" + mdm_sdk_1.svg2Url(ResizeIcon_svg_1.RESIZE_ICON) + "')",
+                backgroundRepeat: 'no-repeat',
+                backgroundOrigin: 'content-box',
+                boxSizing: 'border-box',
+                cursor: 'se-resize'
+            },
+            '&.fullscreen': {
+                visibility: 'visible',
+                position: 'unset',
+                width: '100% !important',
+                height: '100% !important',
+                transform: 'translate(0) !important'
+            }
+        }
+    },
+    gridFullscreen: {
+        height: '100% !important',
+        overflowY: 'hidden',
+        '& .react-resizable-handle, & .react-grid-item': {
+            visibility: 'hidden'
+        }
+    }
+}); });

package/cjs/components/ReltioMap/EntityMarker/EntityMarker.js

@@ -0,0 +1,93 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var api_1 = require("@react-google-maps/api");
+var ProfileCard_1 = __importDefault(require("../../ProfileCard/ProfileCard"));
+var Popper_1 = __importDefault(require("../../Popper/Popper"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var contexts_1 = require("../../../contexts");
+var marker_inline_svg_1 = require("./icons/marker.inline.svg");
+var marker_hover_inline_svg_1 = require("./icons/marker-hover.inline.svg");
+var styles_1 = require("./styles");
+var HIDE_DEBOUNCE_INTERVAL = 50;
+var MARKER_WIDTH = 22;
+var MARKER_HEIGHT = 32;
+var MARKER_CARD_MARGIN = 8;
+var hoveredMarkerIcon = mdm_sdk_1.svg2Url(marker_hover_inline_svg_1.HOVERED_MARKER);
+var markerIcon = mdm_sdk_1.svg2Url(marker_inline_svg_1.MARKER);
+var EntityMarker = function (_a) {
+    var marker = _a.marker, onClick = _a.onClick, otherProps = __rest(_a, ["marker", "onClick"]);
+    var styles = styles_1.useStyles();
+    var popperAnchor = react_1.useRef();
+    var _b = react_1.useState(false), hovered = _b[0], setHovered = _b[1];
+    var activeEntityUri = react_1.useContext(contexts_1.EntityMarkerContext).activeEntityUri;
+    var isActive = ramda_1.pathEq(['entity', 'uri'], activeEntityUri, marker);
+    var position = { lat: marker.point.lat, lng: marker.point.lng };
+    var setHoveredDebounced = react_1.useCallback(mdm_sdk_1.debounce(setHovered, HIDE_DEBOUNCE_INTERVAL), []);
+    var onMouseOver = react_1.useCallback(function () { return setHoveredDebounced(true); }, [setHoveredDebounced]);
+    var onMouseOut = react_1.useCallback(function () { return setHoveredDebounced(false); }, [setHoveredDebounced]);
+    var handleClick = react_1.useCallback(function () { return onClick(marker); }, [onClick, marker]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Popper_1.default, { anchorEl: popperAnchor.current, open: hovered, className: styles.popper, modal: false, placement: "top" },
+            react_1.default.createElement(ProfileCard_1.default, { entity: marker.entity, onMouseOver: onMouseOver, onMouseOut: onMouseOut })),
+        react_1.default.createElement(api_1.Marker, __assign({ icon: {
+                url: hovered || isActive ? hoveredMarkerIcon : markerIcon,
+                // needed for IE:
+                scaledSize: new google.maps.Size(MARKER_WIDTH, MARKER_HEIGHT) //eslint-disable-line
+            }, position: position, onClick: handleClick, visible: marker.visible !== false, onMouseOver: onMouseOver, onMouseOut: onMouseOut }, otherProps)),
+        react_1.default.createElement(api_1.InfoBox, { options: {
+                alignBottom: true,
+                pane: 'mapPane',
+                pixelOffset: new google.maps.Size(0, -(MARKER_HEIGHT + MARKER_CARD_MARGIN)),
+                closeBoxURL: '',
+                enableEventPropagation: true,
+                disableAutoPan: true
+            }, position: position },
+            react_1.default.createElement("span", { ref: popperAnchor }))));
+};
+exports.default = react_1.memo(EntityMarker);

package/cjs/components/ReltioMap/EntityMarker/icons/marker-hover.inline.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HOVERED_MARKER = void 0;
+exports.HOVERED_MARKER = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"22px\" height=\"32px\" viewBox=\"0 0 22 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>View / Map / Marker / Large (hover)</title>\n    <defs>\n        <radialGradient cx=\"50%\" cy=\"50.2950175%\" fx=\"50%\" fy=\"50.2950175%\" r=\"49.7049825%\" gradientTransform=\"translate(0.500000,0.502950),scale(0.777778,1.000000),rotate(90.000000),scale(1.000000,1.293560),translate(-0.500000,-0.502950)\" id=\"radialGradient-1\">\n            <stop stop-color=\"#000000\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"100%\"></stop>\n        </radialGradient>\n        <path d=\"M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,21 C22,21.5522847 21.5522847,22 21,22 L15.7283832,22.0012846 C15.5422129,22.2445529 15.3664776,22.4802332 15.1984183,22.7122576 C13.7560833,24.7035592 13,26.2846074 13,27.5 L13,27.5 L12.9945143,27.6492623 C12.9181651,28.6841222 12.0543618,29.5 11,29.5 C9.8954305,29.5 9,28.6045695 9,27.5 L9,27.5 L8.99485006,27.3298651 C8.91582184,26.0024976 7.93016704,24.2171459 6.23940611,22.000704 L1,22 C0.44771525,22 6.76353751e-17,21.5522847 0,21 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L21,0 Z\" id=\"path-2\"></path>\n    </defs>\n    <g id=\"View-/-Map-/-Marker-/-Large-(hover)\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <ellipse id=\"Oval\" fill=\"url(#radialGradient-1)\" opacity=\"0.32\" cx=\"11\" cy=\"28.5\" rx=\"6\" ry=\"4.66666667\"></ellipse>\n        <mask id=\"mask-3\" fill=\"white\">\n            <use xlink:href=\"#path-2\"></use>\n        </mask>\n        <use id=\"Path-2\" fill=\"#FFFFFF\" xlink:href=\"#path-2\"></use>\n        <rect id=\"Entity-type\" fill=\"#24A8E8\" mask=\"url(#mask-3)\" x=\"0\" y=\"0\" width=\"22\" height=\"32\"></rect>\n        <path d=\"M20,2 L20,20 L14.755,20 L14.6905172,20.0815309 C14.3562717,20.5012516 14.0578656,20.8886742 13.7817711,21.2616986 L13.5786724,21.5390469 C11.92787,23.8181606 11.079024,25.6311217 11.0052669,27.2674145 L11.0052669,27.2674145 L11,27.5 L10.9968324,27.3203844 C10.9285422,25.3781621 9.75347502,23.1598866 7.22124201,20.0010865 L2,20 L2,2 L20,2 Z\" id=\"Path\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" mask=\"url(#mask-3)\"></path>\n    </g>\n</svg>";

package/cjs/components/ReltioMap/EntityMarker/icons/marker.inline.svg.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MARKER = void 0;
+exports.MARKER = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"22px\" height=\"32px\" viewBox=\"0 0 22 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>View / Map / Marker / Large</title>\n    <defs>\n        <radialGradient cx=\"50%\" cy=\"50.2950175%\" fx=\"50%\" fy=\"50.2950175%\" r=\"49.7049825%\" gradientTransform=\"translate(0.500000,0.502950),scale(0.777778,1.000000),rotate(90.000000),scale(1.000000,1.293560),translate(-0.500000,-0.502950)\" id=\"radialGradient-1\">\n            <stop stop-color=\"#000000\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"100%\"></stop>\n        </radialGradient>\n        <path d=\"M20,1 C20.5522847,1 21,1.44771525 21,2 L21,20 C21,20.5522847 20.5522847,21 20,21 L15.2374606,21.0021908 C14.9306693,21.3935449 14.6510143,21.7632851 14.3885453,22.1256523 C12.8309725,24.2760522 12,26.0137017 12,27.5 C12,28.0522847 11.5522847,28.5 11,28.5 C10.4477153,28.5 10,28.0522847 10,27.5 C10,25.7886708 8.84033182,23.6810997 6.73798027,21.0014567 L2,21 C1.44771525,21 1,20.5522847 1,20 L1,2 C1,1.44771525 1.44771525,1 2,1 L20,1 Z\" id=\"path-2\"></path>\n    </defs>\n    <g id=\"View-/-Map-/-Marker-/-Large\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <ellipse id=\"Oval\" fill=\"url(#radialGradient-1)\" opacity=\"0.12\" cx=\"11\" cy=\"28.5\" rx=\"4.5\" ry=\"3.5\"></ellipse>\n        <path d=\"M21,0 C21.5522847,-1.01453063e-16 22,0.44771525 22,1 L22,21 C22,21.5522847 21.5522847,22 21,22 L15.7283832,22.0012846 C15.5422129,22.2445529 15.3664776,22.4802332 15.1984183,22.7122576 C13.7560833,24.7035592 13,26.2846074 13,27.5 L13,27.5 L12.9945143,27.6492623 C12.9181651,28.6841222 12.0543618,29.5 11,29.5 C9.8954305,29.5 9,28.6045695 9,27.5 L9,27.5 L8.99485006,27.3298651 C8.91582184,26.0024976 7.93016704,24.2171459 6.23940611,22.000704 L1,22 C0.44771525,22 6.76353751e-17,21.5522847 0,21 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L21,0 Z\" id=\"Path-3\" fill=\"#FFFFFF\"></path>\n        <mask id=\"mask-3\" fill=\"white\">\n            <use xlink:href=\"#path-2\"></use>\n        </mask>\n        <use id=\"Path-2\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" xlink:href=\"#path-2\"></use>\n        <rect id=\"Entity-type\" fill=\"#24A8E8\" mask=\"url(#mask-3)\" x=\"0\" y=\"0\" width=\"22\" height=\"32\"></rect>\n    </g>\n</svg>";

package/cjs/components/ReltioMap/EntityMarker/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    popper: {
+        maxWidth: '263px',
+        minWidth: '150px',
+        boxShadow: '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2)',
+        backgroundColor: 'white',
+        borderRadius: '2px'
+    }
+});

package/cjs/components/ReltioMap/MapControls/MapControlContainer/MapControlContrainer.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapControlContainer = void 0;
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var MapControlContainer = function (_a) {
+    var children = _a.children, className = _a.className, position = _a.position, map = _a.map;
+    var _b = react_1.useState(null), controlElement = _b[0], setControlElement = _b[1];
+    react_1.useEffect(function () {
+        var controlDiv = document.createElement('div');
+        var divIndex = map.controls[position].length;
+        map.controls[position].push(controlDiv);
+        setControlElement(controlDiv);
+        return function () {
+            map.controls[position].removeAt(divIndex);
+        };
+    }, [map, position]);
+    react_1.useEffect(function () {
+        if (controlElement && className) {
+            controlElement.classList.add(className);
+        }
+    }, [className, controlElement]);
+    if (controlElement) {
+        return react_dom_1.createPortal(children, controlElement);
+    }
+    return null;
+};
+exports.MapControlContainer = MapControlContainer;

package/cjs/components/ReltioMap/MapControls/TopCenterMapControls/TopCenterMapControls.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopCenterMapControls = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var FormControlLabel_1 = __importDefault(require("@material-ui/core/FormControlLabel"));
+var Checkbox_1 = __importDefault(require("@material-ui/core/Checkbox"));
+var styles_1 = require("./styles");
+var TopCenterMapControls = function (_a) {
+    var isSearchOnMapMove = _a.isSearchOnMapMove, onChangeIsSearchOnMapMove = _a.onChangeIsSearchOnMapMove;
+    var styles = styles_1.useStyles();
+    var onChange = function (event) {
+        onChangeIsSearchOnMapMove(event.target.checked);
+    };
+    return (react_1.default.createElement(FormControlLabel_1.default, { classes: {
+            root: styles.container,
+            label: styles.label
+        }, control: react_1.default.createElement(Checkbox_1.default, { checked: isSearchOnMapMove, onChange: onChange, color: "primary", className: styles.checkbox }), label: ui_i18n_1.default.text('Search as I move the map') }));
+};
+exports.TopCenterMapControls = TopCenterMapControls;

package/cjs/components/ReltioMap/MapControls/TopCenterMapControls/styles.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    container: {
+        height: '28px',
+        marginRight: '7px',
+        marginLeft: 0
+    },
+    label: {
+        fontSize: '11px',
+        alignSelf: 'center',
+        lineHeight: '13px',
+        marginLeft: '2px',
+        letterSpacing: 0
+    },
+    checkbox: {
+        width: '20px',
+        height: '20px',
+        padding: '5px',
+        '& svg': {
+            width: '16px',
+            height: '16px'
+        }
+    }
+});

package/cjs/components/ReltioMap/MapControls/TopRightMapControls/TopRightMapControls.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopRightMapControls = exports.ButtonWithTooltip = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var HOCs_1 = require("../../../../HOCs");
+var HighlightOff_1 = __importDefault(require("@material-ui/icons/HighlightOff"));
+var constants_1 = require("../../constants");
+var Radius_1 = __importDefault(require("../../../../icons/Radius"));
+var Draw_1 = __importDefault(require("../../../../icons/Draw"));
+var styles_1 = require("./styles");
+exports.ButtonWithTooltip = HOCs_1.withTooltip(Button_1.default);
+var getIcon = function (mode) {
+    switch (mode) {
+        case constants_1.MAP_DRAWING_MODES.CIRCLE:
+            return Radius_1.default;
+        case constants_1.MAP_DRAWING_MODES.POLYGON:
+            return Draw_1.default;
+        default:
+            return null;
+    }
+};
+var TopRightMapControls = function (_a) {
+    var drawingMode = _a.drawingMode, _b = _a.drawingModes, drawingModes = _b === void 0 ? [] : _b, hasActiveOverlay = _a.hasActiveOverlay, onDrawingModeChanged = _a.onDrawingModeChanged, onClearOverlay = _a.onClearOverlay;
+    var styles = styles_1.useStyles();
+    var changeDrawingModeTo = function (drawingMode) { return function () {
+        onDrawingModeChanged(drawingMode);
+    }; };
+    return (react_1.default.createElement("div", { className: styles.container }, drawingMode || hasActiveOverlay ? (react_1.default.createElement(exports.ButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Clear area'), className: styles.button, onClick: hasActiveOverlay ? onClearOverlay : changeDrawingModeTo(null) },
+        react_1.default.createElement(HighlightOff_1.default, { className: styles.icon }))) : (drawingModes.map(function (mode) {
+        var Icon = getIcon(mode);
+        return (react_1.default.createElement(exports.ButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Draw area'), key: mode, className: styles.button, onClick: changeDrawingModeTo(mode) },
+            react_1.default.createElement(Icon, { className: styles.icon })));
+    }))));
+};
+exports.TopRightMapControls = TopRightMapControls;

package/cjs/components/ReltioMap/MapControls/TopRightMapControls/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    container: {
+        margin: '2px',
+        display: 'flex',
+        alignItems: 'center'
+    },
+    button: {
+        color: 'rgba(0,0,0,0.54)',
+        padding: 0,
+        height: '24px',
+        width: '24px',
+        minWidth: 0
+    },
+    icon: {
+        width: '20px',
+        height: '20px'
+    }
+});

package/cjs/components/ReltioMap/constants.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_MINIMUM_SCALE_RADIUS = exports.DEFAULT_OVERLAY_OPTIONS = exports.MAP_DRAWING_MODES = void 0;
+exports.MAP_DRAWING_MODES = {
+    CIRCLE: 'circle',
+    POLYGON: 'polygon'
+};
+exports.DEFAULT_OVERLAY_OPTIONS = {
+    fillColor: 'rgb(242,82,82)',
+    fillOpacity: 0.1,
+    strokeWeight: 2,
+    strokeColor: '#F25252',
+    clickable: false,
+    editable: true,
+    zIndex: 1
+};
+exports.MAP_MINIMUM_SCALE_RADIUS = 0.001;