@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/map/components/features/layers/overlayLayers/RoadRestrictionLayer.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_RASTER_LAYER_FORMAT, DEFAULT_TILE_SIZE, ENGINE_TYPE_HARP, ENGINE_TYPE_P2D, } from '../../../constants';
+import Layer from './Layer';
+import { useMapContext } from '../../../MapContext';
+import { isVectorBased } from '../../../../utils/rendering';
+// Layer for rendering truck road signs
+const createRoadRestrictionLayer = (engineType, devicePixelRatio) => (api, useWebGL, baseLayerName, language) => {
+    // @ts-ignore-next-line: according to the Here docs, the engine type exists
+    const trafficTileService = api.platform?.getRasterTileService({
+        resource: 'blank',
+        format: DEFAULT_RASTER_LAYER_FORMAT,
+        queryParams: {
+            lang: language,
+            // Increase size of road sign for pixel maps and high resolutions, otherwise the icons are too small
+            ppi: engineType === ENGINE_TYPE_P2D && devicePixelRatio > 1 ? 200 : 100,
+            features: 'vehicle_restrictions:active_and_inactive',
+        },
+    });
+    // @ts-ignore-next-line: according to the Here docs, the engine type exists
+    const trafficTileProvider1 = new H.service.rasterTile.Provider(trafficTileService, {
+        engineType,
+        tileSize: DEFAULT_TILE_SIZE,
+    });
+    const trafficTileLayer = new H.map.layer.TileLayer(trafficTileProvider1);
+    console.log('createRoadRestrictionLayer');
+    return trafficTileLayer;
+};
+const RoadRestrictionLayer = (props) => {
+    const { enableWebGL, baseLayer, devicePixelRatio } = useMapContext();
+    const engineType = isVectorBased(enableWebGL, baseLayer) ? ENGINE_TYPE_HARP : ENGINE_TYPE_P2D;
+    const restrictionLayerCreator = createRoadRestrictionLayer(engineType, devicePixelRatio);
+    return _jsx(Layer, { ...props, createLayer: restrictionLayerCreator });
+};
+export default RoadRestrictionLayer;

package/src/components/map/components/features/layers/overlayLayers/TrafficLayer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import Layer from './Layer';
+export type TrafficLayerProps = Omit<React.ComponentProps<typeof Layer>, 'createLayer'> & {};
+declare const TrafficLayer: (props: TrafficLayerProps) => import("react/jsx-runtime").JSX.Element;
+export default TrafficLayer;

package/src/components/map/components/features/layers/overlayLayers/TrafficLayer.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_RASTER_LAYER_FORMAT, DEFAULT_TILE_SIZE, ENGINE_TYPE_HARP, ENGINE_TYPE_P2D, } from '../../../constants';
+import Layer from './Layer';
+import { useMapContext } from '../../../MapContext';
+import { isVectorBased } from '../../../../utils/rendering';
+const createRasterTrafficLayer = (api, useWebGL, baseLayerName, language) => {
+    // Traffic
+    const baseTrafficUrl = new H.service.Url('https', 'traffic.maps.hereapi.com');
+    // @ts-ignore-next-line: according to the Here docs, the engine type exists
+    const trafficTileService = api.platform?.getRasterTileService({
+        baseUrl: baseTrafficUrl,
+        format: DEFAULT_RASTER_LAYER_FORMAT,
+        path: 'v3',
+        resource: 'flow',
+        queryParams: {
+            apikey: api.credentials?.apikey,
+            lang: language,
+            ppi: 400,
+            style: 'explore.day',
+        },
+    });
+    // @ts-ignore-next-line: according to the Here docs, the engine type exists
+    const trafficTileProvider = new H.service.rasterTile.Provider(trafficTileService, {
+        engineType: ENGINE_TYPE_P2D,
+        tileSize: DEFAULT_TILE_SIZE,
+    });
+    const trafficTileLayer = new H.map.layer.TileLayer(trafficTileProvider);
+    return trafficTileLayer;
+};
+const createVectorTrafficLayer = (api, useWebGL, baseLayerName) => {
+    // @ts-ignore-next-line
+    const providerTrafficFlow = new H.service.trafficVectorTile.Provider(
+    // @ts-ignore-next-line
+    api.platform?.getTrafficVectorTileService({ layer: 'flow' }), 
+    // @ts-ignore-next-line
+    new H.map.render.harp.Style({}), { engineType: ENGINE_TYPE_HARP });
+    // @ts-ignore-next-line:
+    const trafficFlowLayer = new H.map.layer.TileLayer(providerTrafficFlow, { min: 2, max: 24 });
+    return trafficFlowLayer;
+};
+const TrafficLayer = (props) => {
+    const mapContext = useMapContext();
+    const layerCreator = isVectorBased(mapContext.enableWebGL, mapContext.baseLayer)
+        ? createVectorTrafficLayer
+        : createRasterTrafficLayer;
+    return _jsx(Layer, { ...props, createLayer: layerCreator });
+};
+export default TrafficLayer;

package/src/components/map/components/features/settings/MapSettingsItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type MapSettingsItemProps = {
+    activeIcon?: JSX.Element;
+    inactiveIcon?: JSX.Element;
+    isActive?: boolean;
+    className?: string;
+    label?: string | JSX.Element;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+};
+declare const MapSettingsItem: (props: MapSettingsItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MapSettingsItem;

package/src/components/map/components/features/settings/MapSettingsItem.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+const MapSettingsItem = (props) => {
+    const { onClick = noop, activeIcon, inactiveIcon, isActive = false, label, className = '' } = props;
+    const activeIconClassNames = classNames('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-block' : 'display-none', activeIcon?.props.className || '');
+    const inactiveIconClassNames = classNames('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-none' : 'display-block', inactiveIcon?.props.className || '');
+    const defaultIcon = activeIcon &&
+        React.cloneElement(activeIcon, {
+            className: activeIconClassNames,
+        });
+    const highlightedIcon = inactiveIcon &&
+        React.cloneElement(inactiveIcon, {
+            className: inactiveIconClassNames,
+        });
+    const mapSettingsItemClassNames = classNames('MapSettingsItem', 'display-flex align-items-center gap-10', 'text-color-darker', label && 'margin--5', className);
+    return (_jsxs("div", { className: mapSettingsItemClassNames, onClick: onClick, children: [label && (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'margin-left--5', children: [highlightedIcon, defaultIcon] }), _jsx("div", { className: 'flex-1-1 line-height-16 padding-right-5', children: label })] })), !label && (_jsxs(_Fragment, { children: [highlightedIcon, defaultIcon] }))] }));
+};
+export default MapSettingsItem;

package/src/components/map/components/features/settings/MapSettingsPanel.d.ts

@@ -0,0 +1,6 @@
+import { type PropsWithChildren } from 'react';
+export type MapSettingsPanelProps = {
+    className?: string;
+};
+declare const MapSettingsPanel: (props: PropsWithChildren<MapSettingsPanelProps>) => import("react/jsx-runtime").JSX.Element;
+export default MapSettingsPanel;

package/src/components/map/components/features/settings/MapSettingsPanel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { motion } from 'framer-motion';
+const MapSettingsPanel = (props) => {
+    const { className = '', children } = props;
+    const panelClassNames = classNames('MapSettingsPanel', className);
+    return (_jsx(motion.div, { initial: { opacity: 0, y: 100 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0.5, y: 200 }, transition: {
+            duration: 0.15,
+            ease: 'easeInOut',
+        }, className: panelClassNames, children: children }));
+};
+export default MapSettingsPanel;

package/src/components/map/components/features/settings/MapSettingsTile.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type MapSettingsTileProps = {
+    onToggle?: () => void;
+    tooltip?: React.ReactNode;
+    panel?: React.ReactNode;
+    items?: JSX.Element[] | undefined;
+    activeIcon?: JSX.Element | undefined;
+    inactiveIcon?: JSX.Element | undefined;
+    isActive?: boolean;
+    buttonClassName?: string;
+    className?: string;
+};
+declare const MapSettingsTile: (props: MapSettingsTileProps) => import("react/jsx-runtime").JSX.Element;
+export default MapSettingsTile;

package/src/components/map/components/features/settings/MapSettingsTile.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { AnimatePresence } from 'framer-motion';
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+import { usePopper } from 'react-popper';
+import OverlayTrigger from '../../../../overlay/OverlayTrigger';
+import Tooltip from '../../../../tooltip/Tooltip';
+import useClickOutside from '../../../../../hooks/useClickOutside';
+import MenuItemList from '../../../../menuItems/MenuItemList';
+import MenuItem from '../../../../menuItems/MenuItem';
+import { isMobileScreen } from '../../../../../utils/deviceUtils';
+const TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;
+const TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;
+const getComponentWithTooltip = (component, tooltip) => {
+    return (_jsx(OverlayTrigger, { placement: Tooltip.TOP, delay: { show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }, overlay: _jsx(Tooltip, { id: 'tooltip', width: 'auto', children: tooltip }), children: component }));
+};
+const MapSettingsTile = (props) => {
+    const { onToggle = noop, activeIcon, inactiveIcon, isActive = false, panel, items, className, buttonClassName, tooltip, ...remainingProps } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const handleToggle = () => {
+        const newState = !isOpen;
+        setIsOpen(newState);
+        onToggle(newState);
+        buttonRef.current.blur();
+    };
+    const handleClosePanel = () => {
+        if (isOpen && panel) {
+            setIsOpen(false);
+            onToggle(false);
+            buttonRef.current.blur();
+        }
+    };
+    const buttonRef = useClickOutside(handleClosePanel);
+    const [toggleRef, setToggleRef] = useState(null);
+    const [refDropdownMenu, setRefDropdownMenu] = useState(null);
+    const { styles, attributes } = usePopper(toggleRef, refDropdownMenu, {
+        placement: 'top-end',
+        modifiers: isOpen && isMobileScreen()
+            ? [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [-60, -60],
+                    },
+                },
+            ]
+            : [],
+    });
+    const dropdownWrapperRef = useClickOutside((event) => {
+        if (toggleRef?.contains(event.target)) {
+            return;
+        }
+        if (isOpen) {
+            setIsOpen(false);
+            onToggle(false);
+        }
+    });
+    const wrapperClasses = classNames('MapSettingsTile', className);
+    const buttonClasses = classNames('MapSettingsButton', isOpen && 'active', buttonClassName);
+    const activeIconClassNames = classNames('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-block' : 'display-none', activeIcon?.props.className || '');
+    const inactiveIconClassNames = classNames('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-none' : 'display-block', inactiveIcon?.props.className || '');
+    const button = (_jsxs("div", { className: buttonClasses, onClick: handleToggle, children: [activeIcon &&
+                React.cloneElement(activeIcon, {
+                    className: activeIconClassNames,
+                }), inactiveIcon &&
+                React.cloneElement(inactiveIcon, {
+                    className: inactiveIconClassNames,
+                })] }));
+    return (_jsxs("div", { className: wrapperClasses, ref: buttonRef, ...remainingProps, children: [!items && (_jsxs(_Fragment, { children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, _jsx("div", { className: 'overflow-hidden', children: _jsx(AnimatePresence, { children: isOpen && panel && panel }) })] })), items && (_jsxs("div", { className: 'MapSettingsTile-inner position-relative', ref: setToggleRef, children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, _jsx(AnimatePresence, { children: _jsx("div", { className: 'dropdown', ref: dropdownWrapperRef, children: isOpen && items && (_jsx(MenuItemList, { className: 'margin-bottom-10 shadow-smooth border-none', ref: setRefDropdownMenu, style: { ...styles.popper, minWidth: '180px' }, ...attributes.popper, children: items?.map((item, index) => {
+                                    if (item.type.isMapSettingsDropdownHeader) {
+                                        return item;
+                                    }
+                                    return _jsx(MenuItem, { value: item }, index);
+                                }) })) }) })] }))] }));
+};
+export default MapSettingsTile;

package/src/components/map/components/features/settings/ZoomButtons.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ZoomButtonsProps = {
+    onZoomIn?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onZoomOut?: (event: React.MouseEvent<HTMLDivElement>) => void;
+};
+declare const ZoomButtons: ({ onZoomIn, onZoomOut }: ZoomButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export default ZoomButtons;

package/src/components/map/components/features/settings/ZoomButtons.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { MapIcon, ZOOM_IN, ZOOM_OUT } from '../../../icons/MapIcon';
+const ZoomButtons = ({ onZoomIn, onZoomOut }) => {
+    const buttonClasses = classNames('ZoomButtons');
+    return (_jsxs("div", { className: buttonClasses, children: [_jsx("div", { className: 'MapSettingsTile', onClick: onZoomIn, children: _jsx(MapIcon, { name: ZOOM_IN, className: 'display-block hover-scale-110', height: 16, width: 16 }) }), _jsx("div", { className: 'MapSettingsTileSpacer' }), _jsx("div", { className: 'MapSettingsTile', onClick: onZoomOut, children: _jsx(MapIcon, { name: ZOOM_OUT, className: 'display-block hover-scale-110', height: 16, width: 16 }) })] }));
+};
+export default ZoomButtons;

package/src/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type MapAdditionalLayerSettingsProps = {
+    activeBuiltinLayers?: string[];
+    activeLayers?: string[];
+    layers?: JSX.Element[];
+    tooltip?: string | React.ReactNode;
+};
+declare const MapAdditionalLayerSettings: (props: MapAdditionalLayerSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default MapAdditionalLayerSettings;

package/src/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import isEmpty from 'lodash/fp/isEmpty';
+import union from 'lodash/fp/union';
+import MapSettingsTile from '../MapSettingsTile';
+import { MapIcon } from '../../../../icons/MapIcon';
+const MapAdditionalLayerSettings = (props) => {
+    const { activeBuiltinLayers = [], activeLayers = [], layers = [], ...remainingProps } = props;
+    const allActiveLayer = union(activeBuiltinLayers, activeLayers);
+    const isActive = !isEmpty(allActiveLayer);
+    return (_jsx(MapSettingsTile, { className: 'MapAdditionalLayerSettings', isActive: !isEmpty(allActiveLayer), activeIcon: isActive ? (_jsx(MapIcon, { name: 'rioglyph-layer-pois text-color-primary', className: 'MapAdditionalLayerIcon' })) : undefined, inactiveIcon: !isActive ? (_jsx(MapIcon, { name: 'rioglyph-layer-pois text-color-gray', className: 'MapAdditionalLayerIconInactive' })) : undefined, items: layers, ...remainingProps }));
+};
+export default MapAdditionalLayerSettings;

package/src/components/map/components/features/settings/builtinSettings/MapClusterSettings.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type MapClusterSettingsProps = {
+    onToggle?: (setShowCluster: boolean) => void;
+    onShowClusterChange?: (setShowCluster: boolean) => boolean;
+    showCluster?: boolean;
+    clusterEnabledLabel?: string | JSX.Element;
+    clusterDisabledLabel?: string | JSX.Element;
+    dropdownHeaderText?: string | JSX.Element;
+    tooltip?: string | React.ReactNode;
+};
+declare const MapClusterSettings: (props: MapClusterSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default MapClusterSettings;

package/src/components/map/components/features/settings/builtinSettings/MapClusterSettings.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import noop from 'lodash/fp/noop';
+import compact from 'lodash/fp/compact';
+import MapSettingsPanel from '../MapSettingsPanel';
+import MapSettingsItem from '../MapSettingsItem';
+import MapSettingsTile from '../MapSettingsTile';
+import { MapIcon, CLUSTER_ACTIVE, CLUSTER_INACTIVE, NO_CLUSTER_ACTIVE, NO_CLUSTER_INACTIVE, } from '../../../../icons/MapIcon';
+import MapSettingsDropdownHeader from '../items/MapSettingsDropdownHeader';
+const MapClusterSettings = (props) => {
+    const { showCluster = true, onShowClusterChange = noop, onToggle = noop, clusterEnabledLabel, clusterDisabledLabel, dropdownHeaderText, ...remainingProps } = props;
+    const handleShowCluster = (setShowCluster) => {
+        onShowClusterChange(setShowCluster);
+        onToggle(setShowCluster);
+    };
+    const hasLabels = !!clusterEnabledLabel || !!clusterDisabledLabel;
+    const dropdownHeader = dropdownHeaderText && (_jsx(MapSettingsDropdownHeader, { label: dropdownHeaderText }, 'mapClusterDropdownHeader'));
+    const enableClusterButtons = (_jsx(MapSettingsItem, { onClick: () => handleShowCluster(true), isActive: showCluster, activeIcon: _jsx(MapIcon, { name: CLUSTER_ACTIVE, className: 'MapClusterIcon' }), inactiveIcon: _jsx(MapIcon, { name: CLUSTER_INACTIVE, className: 'MapClusterIconInactive' }), label: clusterEnabledLabel }, 'enableClusterButtons'));
+    const disableClusterButton = (_jsx(MapSettingsItem, { onClick: () => handleShowCluster(false), isActive: !showCluster, activeIcon: _jsx(MapIcon, { name: NO_CLUSTER_ACTIVE, className: 'MapNoClusterIcon' }), inactiveIcon: _jsx(MapIcon, { name: NO_CLUSTER_INACTIVE, className: 'MapNoClusterIconInactive' }), label: clusterDisabledLabel }, 'disableClusterButton'));
+    return (_jsx(MapSettingsTile, { className: 'MapClusterSettings', isActive: showCluster, activeIcon: _jsx(MapIcon, { name: CLUSTER_INACTIVE }), inactiveIcon: _jsx(MapIcon, { name: NO_CLUSTER_INACTIVE }), items: hasLabels ? compact([dropdownHeader, enableClusterButtons, disableClusterButton]) : undefined, panel: !hasLabels && (_jsxs(MapSettingsPanel, { children: [enableClusterButtons, disableClusterButton] })), ...remainingProps }));
+};
+export default MapClusterSettings;

package/src/components/map/components/features/settings/builtinSettings/MapLayerSettings.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type MapLayerSettingsProps = {
+    activeBuiltinLayers?: string[];
+    activeLayers?: string[];
+    onMapLayerChange?: () => string;
+    layers?: JSX.Element[];
+    tooltip?: string | React.ReactNode;
+};
+declare const MapLayerSettings: (props: MapLayerSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default MapLayerSettings;

package/src/components/map/components/features/settings/builtinSettings/MapLayerSettings.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import isEmpty from 'lodash/fp/isEmpty';
+import map from 'lodash/fp/map';
+import union from 'lodash/fp/union';
+import noop from 'lodash/fp/noop';
+import MapSettingsPanel from '../MapSettingsPanel';
+import MapSettingsTile from '../MapSettingsTile';
+import { MapIcon } from '../../../../icons/MapIcon';
+const MapLayerSettings = (props) => {
+    const { activeBuiltinLayers = [], activeLayers = [], layers = [], onMapLayerChange = noop, ...remainingProps } = props;
+    const allActiveLayer = union(activeBuiltinLayers, activeLayers);
+    const hasLabels = !!layers.at(0)?.props.label;
+    const isActive = !isEmpty(allActiveLayer);
+    // Inject onMapLayerChange from the MapContext which will be handled
+    // in the main Map component.
+    const enrichedLayers = map(layer => React.cloneElement(layer, {
+        key: layer?.key ?? `MapLayerSettings_${crypto.randomUUID()}`,
+        activeBuiltinLayers,
+        onMapLayerChange,
+    }), layers);
+    return (_jsx(MapSettingsTile, { className: 'MapLayerSettings', isActive: isActive, activeIcon: isActive ? (_jsx(MapIcon, { name: 'rioglyph-construction text-color-primary', className: 'MapLayerIcon' })) : undefined, inactiveIcon: !isActive ? (_jsx(MapIcon, { name: 'rioglyph-construction text-color-gray', className: 'MapLayerIconInactive' })) : undefined, items: hasLabels ? enrichedLayers : undefined, panel: !hasLabels && _jsx(MapSettingsPanel, { children: enrichedLayers }), ...remainingProps }));
+};
+export default MapLayerSettings;

package/src/components/map/components/features/settings/builtinSettings/MapTypeSettings.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { MapType } from '../../../../utils/mapTypes';
+export type MapTypeSettingsProps = {
+    mapType?: string;
+    enableNightMap?: boolean;
+    onMapTypeChange?: (type: MapType) => void;
+    defaultTypeLabel?: string | JSX.Element;
+    truckTypeLabel?: string | JSX.Element;
+    terrainTypeLabel?: string | JSX.Element;
+    satelliteTypeLabel?: string | JSX.Element;
+    nightTypeLabel?: string | JSX.Element;
+    tooltip?: string | React.ReactNode;
+    dropdownHeaderText?: string | JSX.Element;
+};
+declare const MapTypeSettings: (props: MapTypeSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default MapTypeSettings;

package/src/components/map/components/features/settings/builtinSettings/MapTypeSettings.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import noop from 'lodash/fp/noop';
+import compact from 'lodash/fp/compact';
+import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_NIGHT, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, } from '../../../constants';
+import MapSettingsPanel from '../MapSettingsPanel';
+import MapSettingsItem from '../MapSettingsItem';
+import MapSettingsTile from '../MapSettingsTile';
+import { MapIcon, MAP_TYPE_FLAT_ACTIVE, MAP_TYPE_FLAT_INACTIVE, MAP_TYPE_FLAT_TRUCK_ACTIVE, MAP_TYPE_FLAT_TRUCK_INACTIVE, MAP_TYPE_SATELLITE_ACTIVE, MAP_TYPE_SATELLITE_INACTIVE, MAP_TYPE_TERRAIN_ACTIVE, MAP_TYPE_TERRAIN_INACTIVE, MAP_TYPE_NIGHT_ACTIVE, MAP_TYPE_NIGHT_INACTIVE, } from '../../../../icons/MapIcon';
+import MapSettingsDropdownHeader from '../items/MapSettingsDropdownHeader';
+const MapTypeSettings = (props) => {
+    const { mapType, onMapTypeChange = noop, enableNightMap = true, defaultTypeLabel, truckTypeLabel, terrainTypeLabel, satelliteTypeLabel, nightTypeLabel, dropdownHeaderText, ...remainingProps } = props;
+    const type = useMemo(() => ({
+        isDefault: mapType === MAP_TYPE_DEFAULT,
+        isFleetStyle: mapType === MAP_TYPE_FLEET_STYLE,
+        isTerrain: mapType === MAP_TYPE_TERRAIN,
+        isSatellite: mapType === MAP_TYPE_SATELLITE,
+        isNight: mapType === MAP_TYPE_NIGHT,
+    }), [mapType]);
+    const getIcon = (currentType) => {
+        if (currentType.isDefault) {
+            return _jsx(MapIcon, { name: MAP_TYPE_FLAT_INACTIVE });
+        }
+        if (currentType.isFleetStyle) {
+            return _jsx(MapIcon, { name: MAP_TYPE_FLAT_TRUCK_INACTIVE });
+        }
+        if (currentType.isTerrain) {
+            return _jsx(MapIcon, { name: MAP_TYPE_TERRAIN_INACTIVE });
+        }
+        if (currentType.isSatellite) {
+            return _jsx(MapIcon, { name: MAP_TYPE_SATELLITE_INACTIVE });
+        }
+        if (currentType.isNight) {
+            return _jsx(MapIcon, { name: MAP_TYPE_NIGHT_INACTIVE });
+        }
+    };
+    const dropdownHeader = dropdownHeaderText && (_jsx(MapSettingsDropdownHeader, { label: dropdownHeaderText }, 'mapTypeDropdownHeader'));
+    const mapTypeNight = (_jsx(MapSettingsItem, { className: 'MapTypeNight', onClick: () => onMapTypeChange(MAP_TYPE_NIGHT), isActive: type.isNight, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_NIGHT_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_NIGHT_INACTIVE }), label: nightTypeLabel }, 'MapTypeNight'));
+    const mapTypeSatellite = (_jsx(MapSettingsItem, { className: 'MapTypeSatellite', onClick: () => onMapTypeChange(MAP_TYPE_SATELLITE), isActive: type.isSatellite, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_SATELLITE_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_SATELLITE_INACTIVE }), label: satelliteTypeLabel }, 'MapTypeSatellite'));
+    const mapTypeTerrain = (_jsx(MapSettingsItem, { className: 'MapTypeTerrain', onClick: () => onMapTypeChange(MAP_TYPE_TERRAIN), isActive: type.isTerrain, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_TERRAIN_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_TERRAIN_INACTIVE }), label: terrainTypeLabel }, 'MapTypeTerrain'));
+    const mapTypeTruck = (_jsx(MapSettingsItem, { className: 'MapTypeFlatTruck', onClick: () => onMapTypeChange(MAP_TYPE_FLEET_STYLE), isActive: type.isFleetStyle, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_TRUCK_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_TRUCK_INACTIVE }), label: truckTypeLabel }, 'MapTypeFlatTruck'));
+    const mapTypeDefault = (_jsx(MapSettingsItem, { className: 'MapTypeFlat', onClick: () => onMapTypeChange(MAP_TYPE_DEFAULT), isActive: type.isDefault, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_INACTIVE }), label: defaultTypeLabel }, 'MapTypeFlat'));
+    const hasLabels = !!defaultTypeLabel || !!truckTypeLabel || !!terrainTypeLabel || !!satelliteTypeLabel || !!nightTypeLabel;
+    return (_jsx(MapSettingsTile, { className: 'MapTypeSettings', inactiveIcon: getIcon(type), items: hasLabels
+            ? compact([
+                dropdownHeader,
+                mapTypeNight,
+                mapTypeSatellite,
+                mapTypeTerrain,
+                mapTypeTruck,
+                mapTypeDefault,
+            ])
+            : undefined, panel: !hasLabels && (_jsxs(MapSettingsPanel, { children: [enableNightMap && mapTypeNight, mapTypeSatellite, mapTypeTerrain, mapTypeTruck, mapTypeDefault] })), ...remainingProps }));
+};
+export default MapTypeSettings;

package/src/components/map/components/features/settings/buttons/MapBoundingBoxButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import MapSettingsTile from '../MapSettingsTile';
+export type MapBoundingBoxButtonProps = React.ComponentProps<typeof MapSettingsTile> & {
+    onToggle?: () => void;
+    isActive?: boolean;
+};
+declare const MapBoundingBoxButton: (props: MapBoundingBoxButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default MapBoundingBoxButton;

package/src/components/map/components/features/settings/buttons/MapBoundingBoxButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MapSettingsTile from '../MapSettingsTile';
+import { MapIcon, BOUNDING_BOX_ACTIVE, BOUNDING_BOX_INACTIVE } from '../../../../icons/MapIcon';
+const MapBoundingBoxButton = (props) => {
+    const { isActive = false, onToggle, ...remainingProps } = props;
+    return (_jsx(MapSettingsTile, { className: 'MapBoundingBoxButton', isActive: isActive, activeIcon: _jsx(MapIcon, { name: BOUNDING_BOX_ACTIVE, className: 'MapBoundingBoxButtonIcon' }), inactiveIcon: _jsx(MapIcon, { name: BOUNDING_BOX_INACTIVE, className: 'MapBoundingBoxButtonIconInactive' }), onToggle: onToggle, ...remainingProps }));
+};
+export default MapBoundingBoxButton;

package/src/components/map/components/features/settings/buttons/MapCenterMarkerButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import MapSettingsTile from '../MapSettingsTile';
+export type MapCenterMarkerButtonProps = React.ComponentProps<typeof MapSettingsTile> & {
+    onToggle?: () => void;
+    isActive?: boolean;
+};
+declare const MapCenterMarkerButton: (props: MapCenterMarkerButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default MapCenterMarkerButton;

package/src/components/map/components/features/settings/buttons/MapCenterMarkerButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MapSettingsTile from '../MapSettingsTile';
+import { MapIcon } from '../../../../icons/MapIcon';
+const MapCenterMarkerButton = (props) => {
+    const { isActive = false, onToggle, ...remainingProps } = props;
+    return (_jsx(MapSettingsTile, { className: 'MapCenterMarkerButton', isActive: isActive, activeIcon: isActive ? (_jsx(MapIcon, { name: 'rioglyph-position text-color-primary', className: 'MapCenterMarkerButtonIcon' })) : undefined, inactiveIcon: !isActive ? (_jsx(MapIcon, { name: 'rioglyph-position text-color-gray', className: 'MapCenterMarkerButtonIconInactive' })) : undefined, onToggle: onToggle, ...remainingProps }));
+};
+export default MapCenterMarkerButton;

package/src/components/map/components/features/settings/buttons/MapLockMarkerButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import MapSettingsTile from '../MapSettingsTile';
+export type MapLockMarkerButtonProps = React.ComponentProps<typeof MapSettingsTile> & {
+    onToggle?: () => void;
+    isActive?: boolean;
+};
+declare const MapLockMarkerButton: (props: MapLockMarkerButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default MapLockMarkerButton;

package/src/components/map/components/features/settings/buttons/MapLockMarkerButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MapSettingsTile from '../MapSettingsTile';
+import { MapIcon, LOCK_ACTIVE, LOCK_INACTIVE } from '../../../../icons/MapIcon';
+const MapLockMarkerButton = (props) => {
+    const { isActive = false, onToggle, ...remainingProps } = props;
+    return (_jsx(MapSettingsTile, { className: 'MapLockMarkerButton', isActive: isActive, activeIcon: _jsx(MapIcon, { name: LOCK_ACTIVE, className: 'MapLockMarkerButtonIcon' }), inactiveIcon: _jsx(MapIcon, { name: LOCK_INACTIVE, className: 'MapLockMarkerButtonIconInactive' }), onToggle: onToggle, ...remainingProps }));
+};
+export default MapLockMarkerButton;

package/src/components/map/components/features/settings/items/MapCustomerPoiSettingsItem.d.ts

@@ -0,0 +1,7 @@
+export type MapCustomerPoiSettingsItemProps = {
+    onToggle?: (setIsShown: boolean) => void;
+    isActive?: boolean;
+    label?: string | JSX.Element;
+};
+declare const MapCustomerPoiSettingsItem: (props: MapCustomerPoiSettingsItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MapCustomerPoiSettingsItem;

package/src/components/map/components/features/settings/items/MapCustomerPoiSettingsItem.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import noop from 'lodash/fp/noop';
+import MapSettingsItem from '../MapSettingsItem';
+import { MapIcon, SYSTEM_POIS_ACTIVE, SYSTEM_POIS_INACTIVE } from '../../../../icons/MapIcon';
+const MapCustomerPoiSettingsItem = (props) => {
+    const { isActive, onToggle = noop, ...remainingProps } = props;
+    const handleToggle = (setIsShown) => onToggle(setIsShown);
+    return (_jsx(MapSettingsItem, { className: 'MapCustomerPoi', onClick: () => handleToggle(false), isActive: isActive, activeIcon: _jsx(MapIcon, { name: SYSTEM_POIS_ACTIVE, className: 'MapPoiIcon' }), inactiveIcon: _jsx(MapIcon, { name: SYSTEM_POIS_INACTIVE, className: 'MapPoiIconInactive' }), ...remainingProps }));
+};
+export default MapCustomerPoiSettingsItem;

package/src/components/map/components/features/settings/items/MapLayerIncidentsItem.d.ts

@@ -0,0 +1,8 @@
+export type MapLayerIncidentsItemProps = {
+    activeBuiltinLayers?: string[];
+    label?: string | JSX.Element;
+    onToggle?: () => void;
+    onMapLayerChange?: (layer: string) => string;
+};
+declare const MapLayerIncidentsItem: (props: MapLayerIncidentsItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MapLayerIncidentsItem;

package/src/components/map/components/features/settings/items/MapLayerIncidentsItem.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import noop from 'lodash/fp/noop';
+import { MAP_LAYER_INCIDENTS } from '../../../constants';
+import MapSettingsItem from '../MapSettingsItem';
+import { MapIcon, CONSTRUCTION_ACTIVE, CONSTRUCTION_INACTIVE } from '../../../../icons/MapIcon';
+const MapLayerIncidentsItem = (props) => {
+    const { activeBuiltinLayers = [], onMapLayerChange = noop, onToggle = noop, ...remainingProps } = props;
+    const handleToggle = () => {
+        onMapLayerChange(MAP_LAYER_INCIDENTS);
+        onToggle();
+    };
+    return (_jsx(MapSettingsItem, { className: 'MapLayerIncidents', onClick: handleToggle, isActive: activeBuiltinLayers.includes(MAP_LAYER_INCIDENTS), activeIcon: _jsx(MapIcon, { name: CONSTRUCTION_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: CONSTRUCTION_INACTIVE }), ...remainingProps }));
+};
+export default MapLayerIncidentsItem;

package/src/components/map/components/features/settings/items/MapLayerRoadRestrictionsItem.d.ts

@@ -0,0 +1,8 @@
+export type MapLayerRoadRestrictionsItemProps = {
+    activeBuiltinLayers?: string[];
+    label?: string | JSX.Element;
+    onToggle?: () => void;
+    onMapLayerChange?: (layer: string) => string;
+};
+declare const MapLayerRoadRestrictionsItem: (props: MapLayerRoadRestrictionsItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MapLayerRoadRestrictionsItem;

package/src/components/map/components/features/settings/items/MapLayerRoadRestrictionsItem.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import noop from 'lodash/fp/noop';
+import { MAP_LAYER_ROAD_RESTRICTIONS } from '../../../constants';
+import MapSettingsItem from '../MapSettingsItem';
+import { MapIcon, ROAD_RESTRICTIONS_ACTIVE, ROAD_RESTRICTIONS_INACTIVE } from '../../../../icons/MapIcon';
+const MapLayerRoadRestrictionsItem = (props) => {
+    const { activeBuiltinLayers = [], onMapLayerChange = noop, onToggle = noop, ...remainingProps } = props;
+    const handleToggle = () => {
+        onMapLayerChange(MAP_LAYER_ROAD_RESTRICTIONS);
+        onToggle();
+    };
+    return (_jsx(MapSettingsItem, { className: 'MapLayerRoadRestrictions', onClick: handleToggle, isActive: activeBuiltinLayers.includes(MAP_LAYER_ROAD_RESTRICTIONS), activeIcon: _jsx(MapIcon, { name: ROAD_RESTRICTIONS_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: ROAD_RESTRICTIONS_INACTIVE }), ...remainingProps }));
+};
+export default MapLayerRoadRestrictionsItem;

package/src/components/map/components/features/settings/items/MapLayerTrafficItem.d.ts

@@ -0,0 +1,8 @@
+export type MapLayerTrafficItemProps = {
+    activeBuiltinLayers?: string[];
+    label?: string | JSX.Element;
+    onToggle?: () => void;
+    onMapLayerChange?: (layer: string) => string;
+};
+declare const MapLayerTrafficItem: (props: MapLayerTrafficItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MapLayerTrafficItem;

package/src/components/map/components/features/settings/items/MapLayerTrafficItem.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import noop from 'lodash/fp/noop';
+import { MAP_LAYER_TRAFFIC } from '../../../constants';
+import MapSettingsItem from '../MapSettingsItem';
+import { MapIcon, TRAFFIC_ACTIVE, TRAFFIC_INACTIVE } from '../../../../icons/MapIcon';
+const MapLayerTrafficItem = (props) => {
+    const { activeBuiltinLayers = [], onMapLayerChange = noop, onToggle = noop, ...remainingProps } = props;
+    const handleToggle = () => {
+        onMapLayerChange(MAP_LAYER_TRAFFIC);
+        onToggle();
+    };
+    return (_jsx(MapSettingsItem, { className: 'MapLayerTraffic', onClick: handleToggle, isActive: activeBuiltinLayers.includes(MAP_LAYER_TRAFFIC), activeIcon: _jsx(MapIcon, { name: TRAFFIC_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: TRAFFIC_INACTIVE }), ...remainingProps }));
+};
+export default MapLayerTrafficItem;

package/src/components/map/components/features/settings/items/MapSettingsDropdownHeader.d.ts

@@ -0,0 +1,7 @@
+import { type DropdownHeaderProps } from '../../../../../selects/DropdownHeader';
+export type MapSettingsDropdownHeaderProps = DropdownHeaderProps & {};
+declare const MapSettingsDropdownHeader: {
+    (props: MapSettingsDropdownHeaderProps): import("react/jsx-runtime").JSX.Element;
+    isMapSettingsDropdownHeader: boolean;
+};
+export default MapSettingsDropdownHeader;

package/src/components/map/components/features/settings/items/MapSettingsDropdownHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DropdownHeader from '../../../../../selects/DropdownHeader';
+const MapSettingsDropdownHeader = (props) => {
+    const { ...remainingProps } = props;
+    return _jsx(DropdownHeader, { className: 'MapSettingsDropdownHeader', ...remainingProps });
+};
+MapSettingsDropdownHeader.isMapSettingsDropdownHeader = true;
+export default MapSettingsDropdownHeader;

package/src/components/map/components/features/settings/items/MapWorkshopPoiSettingsItem.d.ts

@@ -0,0 +1,7 @@
+export type MapWorkshopPoiSettingsItemProps = {
+    onToggle?: (setIsShown: boolean) => void;
+    isActive?: boolean;
+    label?: string | JSX.Element;
+};
+declare const MapWorkshopPoiSettingsItem: (props: MapWorkshopPoiSettingsItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MapWorkshopPoiSettingsItem;