@rio-cloud/rio-uikit 1.13.1 → 2.0.0-beta.1

package/lib/es/components/map/components/features/basics/InfoBubble.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
-const react_1 = tslib_1.__importStar(require("react"));
-const server_1 = tslib_1.__importDefault(require("react-dom/server"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-// Default offset is defined according to the incidents layer marker
-const DEFAULT_OFFSET_X = 0;
-const DEFAULT_OFFSET_Y = 0;
-const InfoBubble = (props) => {
-    const { api, content, position, markerOffset, onClose = noop_1.default } = props;
-    const handleStateChange = (event) => {
-        if (event.target.getState() === 'closed') {
-            onClose();
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        let infoBubble;
-        if (api?.map && api?.ui) {
-            // Fix the position so the info bubble doesn't overlap the marker
-            const screenPosition = api.map.geoToScreen(position);
-            screenPosition.x += markerOffset?.x ?? DEFAULT_OFFSET_X;
-            screenPosition.y += markerOffset?.y ?? DEFAULT_OFFSET_Y;
-            infoBubble = new H.ui.InfoBubble(api.map.screenToGeo(screenPosition.x, screenPosition.y), {
-                onStateChange: handleStateChange,
-                content: react_1.default.isValidElement(content)
-                    ? server_1.default.renderToStaticMarkup(content)
-                    : content,
-            });
-            api.ui.addBubble(infoBubble);
-        }
-        return () => {
-            if (infoBubble) {
-                try {
-                    api?.ui?.removeBubble(infoBubble);
-                }
-                catch (error) {
-                    // silence error that is cased when switching map types and the bubble cannot be removed
-                    // from the old map instance
-                }
-            }
-        };
-    }, [api]);
-    return null;
-};
-exports.default = InfoBubble;

package/lib/es/components/map/components/features/basics/Marker.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { type EventListenerMap } from '../../../utils/eventHandling';
-import type { Position } from '../../../utils/mapTypes';
-export type MarkerIcon = string | React.ReactElement;
-export declare const isHMapIcon: (icon: MarkerIcon | H.map.DomIcon | undefined) => icon is H.map.Icon;
-export declare const isDomMakerNeeded: (icon: MarkerIcon | H.map.DomIcon | undefined) => boolean;
-export declare const getOrCreateIcon: (icon: MarkerIcon | H.map.DomIcon | undefined) => H.map.DomIcon | H.map.Icon;
-export type MarkerProps = {
-    position: Position;
-    icon?: MarkerIcon;
-    eventListenerMap?: EventListenerMap;
-    customData?: object;
-    draggable?: boolean;
-};
-declare const Marker: (props: MarkerProps) => null;
-export default Marker;

package/lib/es/components/map/components/features/basics/Marker.js

@@ -1,97 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOrCreateIcon = exports.isDomMakerNeeded = exports.isHMapIcon = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const server_1 = tslib_1.__importDefault(require("react-dom/server"));
-const eventHandling_1 = require("../../../utils/eventHandling");
-const MapContext_1 = require("../../MapContext");
-const isHMapIcon = (icon) => icon instanceof H.map.Icon;
-exports.isHMapIcon = isHMapIcon;
-const isDomMakerNeeded = (icon) => (!icon ? false : !(0, exports.isHMapIcon)(icon));
-exports.isDomMakerNeeded = isDomMakerNeeded;
-// Note:
-// H.map.Marker:    A "normal" marker that uses a static image as an icon.
-//                  Large numbers of markers of this types can be added to the map very quickly and efficiently.
-// H.map.Dom:       A marker which supports HTML (and SVG) content, which can be dynamic.
-//                  Markers of this type are best displayed individually or in small sets.
-// It is also important to note that Markers and DomMarkers are rendered in separate rendering steps.
-// Markers are rendered in the map scene and therefore appear behind any DomMarkers which are rendered
-// as an overlay on top of the map.
-const getOrCreateIcon = (icon) => {
-    if ((0, exports.isHMapIcon)(icon) || icon instanceof H.map.DomIcon) {
-        return icon || '';
-    }
-    const renderedIcon = react_1.default.isValidElement(icon) ? server_1.default.renderToStaticMarkup(icon) : icon;
-    return new H.map.DomIcon(renderedIcon);
-};
-exports.getOrCreateIcon = getOrCreateIcon;
-const setupMarker = (props, api) => {
-    const { position, customData, icon, draggable, eventListenerMap } = props;
-    const MarkerConstructor = (0, exports.isDomMakerNeeded)(icon) ? H.map.DomMarker : H.map.Marker;
-    const marker = new MarkerConstructor(position, {
-        icon: icon && (0, exports.getOrCreateIcon)(icon),
-    });
-    marker.setData(customData);
-    marker.draggable = !!draggable;
-    api.map?.addObject(marker);
-    (0, eventHandling_1.addEventListenerMap)(marker, eventListenerMap, api.map);
-    return marker;
-};
-const destroyMarker = (marker, api) => {
-    (0, eventHandling_1.removeEventListenerMap)(marker);
-    if (api.map?.getObjects().includes(marker)) {
-        api.map.removeObject(marker);
-    }
-    marker.dispose();
-};
-const Marker = (props) => {
-    const { position, customData, icon, eventListenerMap } = props;
-    const { api } = (0, MapContext_1.useMapContext)();
-    const markerRef = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
-        markerRef.current = setupMarker(props, api);
-        return () => {
-            if (markerRef.current) {
-                destroyMarker(markerRef.current, api);
-                markerRef.current = undefined;
-            }
-        };
-    }, []);
-    // Update marker position
-    (0, react_1.useEffect)(() => {
-        if (markerRef.current) {
-            markerRef.current.setGeometry(position);
-        }
-    }, [position, markerRef.current]);
-    // Update marker custom data
-    (0, react_1.useEffect)(() => {
-        if (markerRef.current) {
-            markerRef.current.setData(customData);
-        }
-    }, [customData, markerRef.current]);
-    // Update EventListenerMap
-    (0, react_1.useEffect)(() => {
-        if (markerRef.current) {
-            // use exports to make methods accessible for stubbing
-            const mapApi = (0, eventHandling_1.removeEventListenerMap)(markerRef.current);
-            (0, eventHandling_1.addEventListenerMap)(markerRef.current, eventListenerMap, mapApi);
-        }
-    }, [eventListenerMap, markerRef.current]);
-    // If icon type changed, we need to change the marker type
-    (0, react_1.useEffect)(() => {
-        if (!(markerRef.current && icon)) {
-            return;
-        }
-        if ((0, exports.isDomMakerNeeded)(icon)) {
-            destroyMarker(markerRef.current, api);
-            markerRef.current = setupMarker(props, api);
-        }
-        else {
-            const domIcon = (0, exports.getOrCreateIcon)(icon);
-            domIcon && markerRef.current.setIcon(domIcon);
-        }
-    }, [icon, markerRef.current]);
-    return null;
-};
-exports.default = Marker;

package/lib/es/components/map/components/features/basics/Polygon.d.ts

@@ -1,11 +0,0 @@
-import type { Position } from '../../../utils/mapTypes';
-import type { EventListenerMap } from '../../../utils/eventHandling';
-export { colorMapColdplay, colorMapWarmup, colorMapGray, colorMapBrand, colorMapStatus, colorMapMarker, colorMapRating, colorMapHighlight, } from './polygonColors';
-export type PolygonPoints = Position[] & Record<string, any>;
-export type PolygonProps = {
-    points: PolygonPoints;
-    style?: H.map.SpatialStyle;
-    eventListenerMap?: EventListenerMap;
-};
-declare const Polygon: (props: PolygonProps) => null;
-export default Polygon;

package/lib/es/components/map/components/features/basics/Polygon.js

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorMapHighlight = exports.colorMapRating = exports.colorMapMarker = exports.colorMapStatus = exports.colorMapBrand = exports.colorMapGray = exports.colorMapWarmup = exports.colorMapColdplay = void 0;
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
-const MapContext_1 = require("../../MapContext");
-const hooks_1 = require("../../../utils/hooks");
-var polygonColors_1 = require("./polygonColors");
-Object.defineProperty(exports, "colorMapColdplay", { enumerable: true, get: function () { return polygonColors_1.colorMapColdplay; } });
-Object.defineProperty(exports, "colorMapWarmup", { enumerable: true, get: function () { return polygonColors_1.colorMapWarmup; } });
-Object.defineProperty(exports, "colorMapGray", { enumerable: true, get: function () { return polygonColors_1.colorMapGray; } });
-Object.defineProperty(exports, "colorMapBrand", { enumerable: true, get: function () { return polygonColors_1.colorMapBrand; } });
-Object.defineProperty(exports, "colorMapStatus", { enumerable: true, get: function () { return polygonColors_1.colorMapStatus; } });
-Object.defineProperty(exports, "colorMapMarker", { enumerable: true, get: function () { return polygonColors_1.colorMapMarker; } });
-Object.defineProperty(exports, "colorMapRating", { enumerable: true, get: function () { return polygonColors_1.colorMapRating; } });
-Object.defineProperty(exports, "colorMapHighlight", { enumerable: true, get: function () { return polygonColors_1.colorMapHighlight; } });
-const createGeometry = (points) => {
-    const lineString = new H.geo.LineString();
-    points.forEach(p => {
-        if ((0, isNil_1.default)(p.lat) || (0, isNil_1.default)(p.lng) || Number.isNaN(p.lat) || Number.isNaN(p.lng)) {
-            return;
-        }
-        lineString.pushLatLngAlt(p.lat, p.lng, 0);
-    });
-    return new H.geo.Polygon(lineString);
-};
-const Polygon = (props) => {
-    const { points, style = H.map.SpatialStyle.DEFAULT_STYLE, eventListenerMap } = props;
-    const { api } = (0, MapContext_1.useMapContext)();
-    const [polygon, setPolygon] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
-        const newPolygon = new H.map.Polygon(createGeometry(points), { style });
-        api.map?.addObject(newPolygon);
-        setPolygon(newPolygon);
-        return () => {
-            if (api.map?.getObjects().includes(newPolygon)) {
-                api.map?.removeObject(newPolygon);
-            }
-            newPolygon.dispose();
-        };
-    }, [api.map]);
-    (0, react_1.useEffect)(() => {
-        if (polygon) {
-            polygon.setGeometry(createGeometry(points));
-        }
-    }, [points]);
-    (0, hooks_1.useUpdateProp)(polygon, 'setStyle', style);
-    (0, hooks_1.useUpdateEventListenerMap)(polygon, eventListenerMap);
-    return null;
-};
-exports.default = Polygon;

package/lib/es/components/map/components/features/basics/Polyline.d.ts

@@ -1,14 +0,0 @@
-import { type EventListenerMap } from '../../../utils/eventHandling';
-export declare const MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = "Error in Polyline: Polyline without geometry makes no sense";
-export declare const WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = "Error in Polyline: property geometry must be of type H.geo.LineString";
-export type ArrowStyle = H.map.Polyline.Options;
-export type PolylineProps = {
-    hasArrows?: boolean;
-    arrowStyle?: ArrowStyle;
-    geometry: H.geo.LineString;
-    style?: H.map.SpatialStyle;
-    customData?: object;
-    eventListenerMap?: EventListenerMap;
-};
-declare const Polyline: (props: PolylineProps) => null;
-export default Polyline;

package/lib/es/components/map/components/features/basics/Polyline.js

@@ -1,82 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = void 0;
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const MapContext_1 = require("../../MapContext");
-const MapException_1 = tslib_1.__importDefault(require("../../../exceptions/MapException"));
-const hooks_1 = require("../../../utils/hooks");
-const eventHandling_1 = require("../../../utils/eventHandling");
-const rendering_1 = require("../../../utils/rendering");
-exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: Polyline without geometry makes no sense';
-exports.WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: property geometry must be of type H.geo.LineString';
-const Polyline = (props) => {
-    const { geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.DEFAULT_STYLE, customData, eventListenerMap, } = props;
-    const { api, enableWebGL, baseLayer } = (0, MapContext_1.useMapContext)();
-    const [polyline, setPolyline] = (0, react_1.useState)();
-    if (!geometry) {
-        throw new MapException_1.default(exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG);
-    }
-    if (!(geometry instanceof H.geo.LineString)) {
-        throw new MapException_1.default(exports.WRONG_GEOMETRY_PROPS_EXCEPTION_MSG);
-    }
-    (0, react_1.useEffect)(() => {
-        const lineGroup = new H.map.Group({ data: customData });
-        const line = new H.map.Polyline(geometry, { style });
-        if (hasArrows) {
-            let routeArrows;
-            if ((0, rendering_1.isVectorBased)(enableWebGL, baseLayer)) {
-                // WebGL way - Create a patterned polyline
-                routeArrows = new H.map.Polyline(geometry, {
-                    style: {
-                        strokeColor: 'rgba(42, 55, 64, 1)',
-                        lineWidth: 5,
-                        lineDash: [1.8, 4],
-                        // @ts-ignore-next-line - the types are outdated here
-                        lineDashImage: H.map.SpatialStyle.DashImage.ARROW,
-                        ...arrowStyle,
-                    },
-                });
-            }
-            else {
-                // Pixel map way - Create a patterned polyline
-                const defaultArrowStyle = {
-                    lineWidth: 2,
-                    fillColor: 'rgba(42, 55, 64, 1)',
-                    strokeColor: 'rgba(0, 0, 0, 0.8)',
-                    lineDash: [0, 4],
-                    lineTailCap: 'arrow-tail',
-                    lineHeadCap: 'arrow-head',
-                    ...arrowStyle,
-                };
-                const arrowLineStyle = new H.map.SpatialStyle({
-                    lineWidth: 10,
-                    strokeColor: 'rgba(255, 255, 255, 0)',
-                });
-                routeArrows = new H.map.Polyline(geometry, { style: arrowLineStyle, arrows: defaultArrowStyle });
-            }
-            // create a group that represents the route line and contains
-            // outline and the pattern
-            lineGroup.addObjects([line, routeArrows]);
-        }
-        else {
-            lineGroup.addObjects([line]);
-        }
-        api.map?.addObject(lineGroup);
-        setPolyline(lineGroup);
-        return () => {
-            (0, eventHandling_1.removeEventListenerMap)(lineGroup);
-            lineGroup.forEach(singleLine => {
-                lineGroup.removeObject(singleLine);
-                singleLine.dispose();
-            });
-            if (api.map?.getObjects().includes(lineGroup)) {
-                api.map.removeObject(lineGroup);
-            }
-            lineGroup.dispose();
-        };
-    }, [api.map, geometry, style, hasArrows, arrowStyle]);
-    (0, hooks_1.useUpdateEventListenerMap)(polyline, eventListenerMap);
-    return null;
-};
-exports.default = Polyline;

package/lib/es/components/map/components/features/basics/TextMarker.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import Marker from './Marker';
-import type { Position } from '../../../utils/mapTypes';
-export declare const emptyTextException = "Error in TextMarker: TextMarker without text makes no sense";
-export declare const wrongTypeException = "Error in TextMarker: property text must be string type";
-export type TextMarkerProps = React.ComponentProps<typeof Marker> & {
-    position: Position;
-    text: string;
-};
-declare const TextMarker: (props: TextMarkerProps) => import("react/jsx-runtime").JSX.Element;
-export default TextMarker;

package/lib/es/components/map/components/features/basics/TextMarker.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrongTypeException = exports.emptyTextException = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Marker_1 = tslib_1.__importDefault(require("./Marker"));
-exports.emptyTextException = 'Error in TextMarker: TextMarker without text makes no sense';
-exports.wrongTypeException = 'Error in TextMarker: property text must be string type';
-const TextMarker = (props) => {
-    const { text, ...remainingProps } = props;
-    return ((0, jsx_runtime_1.jsx)(Marker_1.default, { ...remainingProps, icon: (0, jsx_runtime_1.jsx)("div", { className: 'bg-white padding-x-10 padding-y-5 rounded border border-color-light shadow-default user-select-none cursor-default', children: text }) }));
-};
-exports.default = TextMarker;

package/lib/es/components/map/components/features/basics/polygonColors.d.ts

@@ -1,252 +0,0 @@
-export declare const colorMapColdplay: {
-    'color-coldplay-wine': {
-        stroke: string;
-        fill: string;
-    };
-    'color-coldplay-aubergine': {
-        stroke: string;
-        fill: string;
-    };
-    'color-coldplay-kashmir': {
-        stroke: string;
-        fill: string;
-    };
-    'color-coldplay-fountain': {
-        stroke: string;
-        fill: string;
-    };
-    'color-coldplay-turquoise': {
-        stroke: string;
-        fill: string;
-    };
-    'color-coldplay-bermuda': {
-        stroke: string;
-        fill: string;
-    };
-    'color-coldplay-moos': {
-        stroke: string;
-        fill: string;
-    };
-    'color-coldplay-primrose': {
-        stroke: string;
-        fill: string;
-    };
-    'color-coldplay-khaki': {
-        stroke: string;
-        fill: string;
-    };
-};
-export declare const colorMapWarmup: {
-    'color-warmup-crimson': {
-        stroke: string;
-        fill: string;
-    };
-    'color-warmup-victoria': {
-        stroke: string;
-        fill: string;
-    };
-    'color-warmup-cadillac': {
-        stroke: string;
-        fill: string;
-    };
-    'color-warmup-raspberry': {
-        stroke: string;
-        fill: string;
-    };
-    'color-warmup-cerise': {
-        stroke: string;
-        fill: string;
-    };
-    'color-warmup-charm': {
-        stroke: string;
-        fill: string;
-    };
-    'color-warmup-salmon': {
-        stroke: string;
-        fill: string;
-    };
-    'color-warmup-cherokee': {
-        stroke: string;
-        fill: string;
-    };
-    'color-warmup-corn': {
-        stroke: string;
-        fill: string;
-    };
-};
-export declare const colorMapGray: {
-    'gray-darkest': {
-        stroke: string;
-        fill: string;
-    };
-    'gray-darker': {
-        stroke: string;
-        fill: string;
-    };
-    'gray-dark': {
-        stroke: string;
-        fill: string;
-    };
-    gray: {
-        stroke: string;
-        fill: string;
-    };
-    'gray-light': {
-        stroke: string;
-        fill: string;
-    };
-    'gray-lighter': {
-        stroke: string;
-        fill: string;
-    };
-    'gray-lightest': {
-        stroke: string;
-        fill: string;
-    };
-    'gray-decent': {
-        stroke: string;
-        fill: string;
-    };
-};
-export declare const colorMapBrand: {
-    'brand-primary': {
-        stroke: string;
-        fill: string;
-    };
-    'brand-secondary': {
-        stroke: string;
-        fill: string;
-    };
-    'brand-info': {
-        stroke: string;
-        fill: string;
-    };
-    'brand-success': {
-        stroke: string;
-        fill: string;
-    };
-    'brand-warning': {
-        stroke: string;
-        fill: string;
-    };
-    'brand-danger': {
-        stroke: string;
-        fill: string;
-    };
-};
-export declare const colorMapStatus: {
-    'color-status-available': {
-        stroke: string;
-        fill: string;
-    };
-    'color-status-driving': {
-        stroke: string;
-        fill: string;
-    };
-    'color-status-resting': {
-        stroke: string;
-        fill: string;
-    };
-    'color-status-working': {
-        stroke: string;
-        fill: string;
-    };
-};
-export declare const colorMapMarker: {
-    'color-map-marker-text': {
-        stroke: string;
-        fill: string;
-    };
-    'color-map-marker-active': {
-        stroke: string;
-        fill: string;
-    };
-    'color-map-marker-asset': {
-        stroke: string;
-        fill: string;
-    };
-    'color-map-marker-poi': {
-        stroke: string;
-        fill: string;
-    };
-    'color-map-marker-geofence': {
-        stroke: string;
-        fill: string;
-    };
-    'color-map-marker-route': {
-        stroke: string;
-        fill: string;
-    };
-    'color-map-marker-info': {
-        stroke: string;
-        fill: string;
-    };
-    'color-map-marker-success': {
-        stroke: string;
-        fill: string;
-    };
-    'color-map-marker-warning': {
-        stroke: string;
-        fill: string;
-    };
-    'color-map-marker-danger': {
-        stroke: string;
-        fill: string;
-    };
-};
-export declare const colorMapRating: {
-    'color-rating-1': {
-        stroke: string;
-        fill: string;
-    };
-    'color-rating-2': {
-        stroke: string;
-        fill: string;
-    };
-    'color-rating-3': {
-        stroke: string;
-        fill: string;
-    };
-    'color-rating-4': {
-        stroke: string;
-        fill: string;
-    };
-    'color-rating-5': {
-        stroke: string;
-        fill: string;
-    };
-};
-export declare const colorMapHighlight: {
-    'color-highlight-darkest': {
-        stroke: string;
-        fill: string;
-    };
-    'color-highlight-darker': {
-        stroke: string;
-        fill: string;
-    };
-    'color-highlight-dark': {
-        stroke: string;
-        fill: string;
-    };
-    'color-highlight': {
-        stroke: string;
-        fill: string;
-    };
-    'color-highlight-light': {
-        stroke: string;
-        fill: string;
-    };
-    'color-highlight-lighter': {
-        stroke: string;
-        fill: string;
-    };
-    'color-highlight-lightest': {
-        stroke: string;
-        fill: string;
-    };
-    'color-highlight-decent': {
-        stroke: string;
-        fill: string;
-    };
-};