@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.3

package/DeviceUtils.js

@@ -1,2 +1,2 @@
-import { hasTouch as _hasTouch, isDesktop as _isDesktop, isMobile as _isMobile, isMobileScreen as _isMobileScreen, MOBILE_SCREEN as _MOBILE_SCREEN, SCREEN_SM as _SCREEN_SM, SCREEN_MD as _SCREEN_MD, SCREEN_LG as _SCREEN_LG, SCREEN_XL as _SCREEN_XL, inIframe as _inIframe, toggleZoomOnMobile as _toggleZoomOnMobile, } from './utils/deviceUtils';
-export { _hasTouch as hasTouch, _isDesktop as isDesktop, _isMobile as isMobile, _isMobileScreen as isMobileScreen, _MOBILE_SCREEN as MOBILE_SCREEN, _SCREEN_SM as SCREEN_SM, _SCREEN_MD as SCREEN_MD, _SCREEN_LG as SCREEN_LG, _SCREEN_XL as SCREEN_XL, _inIframe as inIframe, _toggleZoomOnMobile as toggleZoomOnMobile, };
+import { hasTouch as _hasTouch, isDesktop as _isDesktop, isMobile as _isMobile, isMobileScreen as _isMobileScreen, isRetinaDevice as _isRetinaDevice, MOBILE_SCREEN as _MOBILE_SCREEN, SCREEN_SM as _SCREEN_SM, SCREEN_MD as _SCREEN_MD, SCREEN_LG as _SCREEN_LG, SCREEN_XL as _SCREEN_XL, inIframe as _inIframe, toggleZoomOnMobile as _toggleZoomOnMobile, } from './utils/deviceUtils';
+export { _hasTouch as hasTouch, _isDesktop as isDesktop, _isMobile as isMobile, _isMobileScreen as isMobileScreen, _isRetinaDevice as isRetinaDevice, _MOBILE_SCREEN as MOBILE_SCREEN, _SCREEN_SM as SCREEN_SM, _SCREEN_MD as SCREEN_MD, _SCREEN_LG as SCREEN_LG, _SCREEN_XL as SCREEN_XL, _inIframe as inIframe, _toggleZoomOnMobile as toggleZoomOnMobile, };

package/components/bottomSheet/BottomSheet.d.ts

@@ -1,18 +1,67 @@
 import React, { MutableRefObject, PropsWithChildren, ReactNode } from 'react';
 export type BottomSheetProps = {
+    /**
+     * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.
+     * Default value is: `false`
+     */
     show: boolean;
+    /**
+     * Callback for when the sheet closes.
+     */
     onClose?: (isShown: boolean) => void;
+    /**
+     * The width of the bottom sheet. This is useful for desktop when not using the entire screen width.
+     * When no width is given it will take the width of the content and maximum `100%` of the screen.
+     * So it this case you might want to apply a `max-width-xxx` via `className` to control it better.
+     */
     width?: number | string;
+    /**
+     * The height of the bottom sheet. If no height is given, the height is automatically
+     * calculated from the content.
+     */
     height?: number | string;
+    /**
+     * The title content shown in the header. If no title is given, the bottom sheet header is not shown.
+     */
     title?: string | ReactNode;
+    /**
+     * Defines whether or not the close button is shown.
+     * Default value is: `true`
+     */
     showCloseButton?: boolean;
+    /**
+     * Defines whether or not the maximize button in the header is shown.
+     * Default value is: `false`
+     */
     showMaximizeButton?: boolean;
+    /**
+     * The callback function triggered when the maximize button is clicked and the height changes.
+     */
     onHeightChange?: VoidFunction;
+    /**
+     * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.
+     * Default value is: `false`
+     */
     detach?: boolean;
+    /**
+     * Defines the amount of pixels for the sheet.
+     * Default value is: `15`
+     */
+    detachOffset?: number;
+    /**
+     * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.
+     * Default value is: `false`
+     */
     useBackdrop?: boolean;
+    /**
+     * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.
+     */
     onBackdropClick?: VoidFunction;
-    bodyRef?: MutableRefObject<HTMLDivElement>;
+    /** A react ref added to the bottom sheet body. */
+    bodyRef?: MutableRefObject<HTMLDivElement | null>;
+    /** Additional classes to be set on the body element. */
     bodyClassName?: string;
+    /** Additional classes to be set on the wrapping element. */
     className?: string;
 };
 declare const BottomSheet: (props: BottomSheetProps & PropsWithChildren) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/components/bottomSheet/BottomSheet.js

@@ -3,12 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import { motion } from 'framer-motion';
 import isFunction from 'lodash/fp/isFunction';
+import { motion } from 'framer-motion';
 import { getOrCreatePortalRoot } from '../../utils/portalRoot';
 const OFFSET_POSITION = -1000;
+const DEFAULT_OFFSET_PX = 15;
 const BottomSheet = (props) => {
-    const { show = false, onClose, width, height, title, detach = false, useBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { } } = props, remainingProps = __rest(props, ["show", "onClose", "width", "height", "title", "detach", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
+    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, useBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { } } = props, remainingProps = __rest(props, ["show", "onClose", "width", "height", "title", "detach", "detachOffset", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
     const [isShown, setIsShown] = useState(show);
     const [isMaxHeight, setIsMaxHeight] = useState(false);
     useEffect(() => setIsShown(show), [show]);
@@ -31,14 +32,18 @@ const BottomSheet = (props) => {
         setIsMaxHeight(newValue);
         onHeightChange();
     };
-    const sheetClasses = classNames('bottom-sheet', 'position-fixed left-0', !width && 'width-100pct', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detach ? 'margin-15 rounded' : 'rounded-top-left rounded-top-right', className && className);
+    const sheetClasses = classNames('bottom-sheet', 'position-fixed left-0', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detach ? 'rounded' : 'rounded-top-left rounded-top-right', className && className);
     const sheetBodyClasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);
     const sheetHeight = isMaxHeight ? window.innerHeight : height;
     // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.
     // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.
     // That is the reason why there is no "AnimatePresence" with an "exit" animation here.
     // Instead, we change the "animate" values.
-    return createPortal(_jsxs(_Fragment, { children: [_jsxs(motion.div, Object.assign({}, remainingProps, { className: sheetClasses, style: { width }, initial: { opacity: 0 }, animate: {
+    return createPortal(_jsxs(_Fragment, { children: [_jsxs(motion.div, Object.assign({}, remainingProps, { className: sheetClasses, style: {
+                    width,
+                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',
+                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,
+                }, initial: { opacity: 0 }, animate: {
                     opacity: isShown ? 1 : 0,
                     y: 0,
                     bottom: isShown ? 0 : OFFSET_POSITION,

package/components/map/utils/eventHandling.d.ts

@@ -1,3 +1,13 @@
+export function createEnhancedMapEvent(event: any, mapApi: any): EnhancedMapEvent | {
+    map: any;
+};
+export function createEnhancedListener(listener: any, mapApi: any): (event: any) => any;
+export function addEventListenerMap(hMapObject: any, eventListenerMap: {} | undefined, mapApi: any): void;
+export function removeEventListenerMap(hMapObject: any): any;
+export function checkAndUpdateEventListenerMap(hMapObject: any, props: any, nextProps: any): void;
+export function createTapOnDblTapPreventer(eventListenerMap: any, delayBetweenTaps?: number): any;
+export function getMouseButton(event: any): any;
+export function isRightClick(event: any): boolean;
 export namespace EventUtils {
     export namespace MOUSE_BUTTONS {
         const LEFT: number;
@@ -27,16 +37,6 @@ export namespace EventUtils {
     export { getMouseButton };
     export { isRightClick };
 }
-export function createEnhancedMapEvent(event: any, mapApi: any): EnhancedMapEvent | {
-    map: any;
-};
-export function createEnhancedListener(listener: any, mapApi: any): (event: any) => any;
-export function addEventListenerMap(hMapObject: any, eventListenerMap: {} | undefined, mapApi: any): void;
-export function removeEventListenerMap(hMapObject: any): any;
-export function checkAndUpdateEventListenerMap(hMapObject: any, props: any, nextProps: any): void;
-export function createTapOnDblTapPreventer(eventListenerMap: any, delayBetweenTaps?: number): any;
-export function getMouseButton(event: any): any;
-export function isRightClick(event: any): boolean;
 declare class EnhancedMapEvent {
     constructor(event: any, mapApi: any);
     viewportX: any;

package/components/map/utils/eventHandling.js

@@ -1,32 +1,3 @@
-export const EventUtils = {
-    MOUSE_BUTTONS: {
-        LEFT: 0,
-        MIDDLE: 1,
-        RIGHT: 2,
-    },
-    POINTER_DOWN: 'pointerdown',
-    POINTER_UP: 'pointerup',
-    POINTER_MOVE: 'pointermove',
-    POINTER_ENTER: 'pointerenter',
-    POINTER_LEAVE: 'pointerleave',
-    POINTER_CANCEL: 'pointercancel',
-    DRAG_START: 'dragstart',
-    DRAG: 'drag',
-    DRAG_END: 'dragend',
-    TAP: 'tap',
-    DBL_TAP: 'dbltap',
-    LONGPRESS: 'longpress',
-    CONTEXTMENU: 'contextmenu',
-    CONTEXTMENU_CLOSE: 'contextmenuclose',
-    MAP_VIEW_CHANGE_START: 'mapviewchangestart',
-    MAP_VIEW_CHANGE: 'mapviewchange',
-    MAP_VIEW_CHANGE_END: 'mapviewchangeend',
-    BASE_LAYER_CHANGE: 'baselayerchange',
-    ENGINE_CHANGE: 'enginechange',
-    createTapOnDblTapPreventer,
-    getMouseButton,
-    isRightClick,
-};
 class MapTimeGuard {
     constructor(delay = 250) {
         this.delayTime = delay;
@@ -112,3 +83,32 @@ export const getMouseButton = event => {
 export const isRightClick = event => {
     return getMouseButton(event) === EventUtils.MOUSE_BUTTONS.RIGHT;
 };
+export const EventUtils = {
+    MOUSE_BUTTONS: {
+        LEFT: 0,
+        MIDDLE: 1,
+        RIGHT: 2,
+    },
+    POINTER_DOWN: 'pointerdown',
+    POINTER_UP: 'pointerup',
+    POINTER_MOVE: 'pointermove',
+    POINTER_ENTER: 'pointerenter',
+    POINTER_LEAVE: 'pointerleave',
+    POINTER_CANCEL: 'pointercancel',
+    DRAG_START: 'dragstart',
+    DRAG: 'drag',
+    DRAG_END: 'dragend',
+    TAP: 'tap',
+    DBL_TAP: 'dbltap',
+    LONGPRESS: 'longpress',
+    CONTEXTMENU: 'contextmenu',
+    CONTEXTMENU_CLOSE: 'contextmenuclose',
+    MAP_VIEW_CHANGE_START: 'mapviewchangestart',
+    MAP_VIEW_CHANGE: 'mapviewchange',
+    MAP_VIEW_CHANGE_END: 'mapviewchangeend',
+    BASE_LAYER_CHANGE: 'baselayerchange',
+    ENGINE_CHANGE: 'enginechange',
+    createTapOnDblTapPreventer,
+    getMouseButton,
+    isRightClick,
+};

package/lib/es/DeviceUtils.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toggleZoomOnMobile = exports.inIframe = exports.SCREEN_XL = exports.SCREEN_LG = exports.SCREEN_MD = exports.SCREEN_SM = exports.MOBILE_SCREEN = exports.isMobileScreen = exports.isMobile = exports.isDesktop = exports.hasTouch = void 0;
+exports.toggleZoomOnMobile = exports.inIframe = exports.SCREEN_XL = exports.SCREEN_LG = exports.SCREEN_MD = exports.SCREEN_SM = exports.MOBILE_SCREEN = exports.isRetinaDevice = exports.isMobileScreen = exports.isMobile = exports.isDesktop = exports.hasTouch = void 0;
 const deviceUtils_1 = require("./utils/deviceUtils");
 Object.defineProperty(exports, "hasTouch", { enumerable: true, get: function () { return deviceUtils_1.hasTouch; } });
 Object.defineProperty(exports, "isDesktop", { enumerable: true, get: function () { return deviceUtils_1.isDesktop; } });
 Object.defineProperty(exports, "isMobile", { enumerable: true, get: function () { return deviceUtils_1.isMobile; } });
 Object.defineProperty(exports, "isMobileScreen", { enumerable: true, get: function () { return deviceUtils_1.isMobileScreen; } });
+Object.defineProperty(exports, "isRetinaDevice", { enumerable: true, get: function () { return deviceUtils_1.isRetinaDevice; } });
 Object.defineProperty(exports, "MOBILE_SCREEN", { enumerable: true, get: function () { return deviceUtils_1.MOBILE_SCREEN; } });
 Object.defineProperty(exports, "SCREEN_SM", { enumerable: true, get: function () { return deviceUtils_1.SCREEN_SM; } });
 Object.defineProperty(exports, "SCREEN_MD", { enumerable: true, get: function () { return deviceUtils_1.SCREEN_MD; } });

package/lib/es/components/bottomSheet/BottomSheet.d.ts

@@ -1,18 +1,67 @@
 import React, { MutableRefObject, PropsWithChildren, ReactNode } from 'react';
 export type BottomSheetProps = {
+    /**
+     * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.
+     * Default value is: `false`
+     */
     show: boolean;
+    /**
+     * Callback for when the sheet closes.
+     */
     onClose?: (isShown: boolean) => void;
+    /**
+     * The width of the bottom sheet. This is useful for desktop when not using the entire screen width.
+     * When no width is given it will take the width of the content and maximum `100%` of the screen.
+     * So it this case you might want to apply a `max-width-xxx` via `className` to control it better.
+     */
     width?: number | string;
+    /**
+     * The height of the bottom sheet. If no height is given, the height is automatically
+     * calculated from the content.
+     */
     height?: number | string;
+    /**
+     * The title content shown in the header. If no title is given, the bottom sheet header is not shown.
+     */
     title?: string | ReactNode;
+    /**
+     * Defines whether or not the close button is shown.
+     * Default value is: `true`
+     */
     showCloseButton?: boolean;
+    /**
+     * Defines whether or not the maximize button in the header is shown.
+     * Default value is: `false`
+     */
     showMaximizeButton?: boolean;
+    /**
+     * The callback function triggered when the maximize button is clicked and the height changes.
+     */
     onHeightChange?: VoidFunction;
+    /**
+     * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.
+     * Default value is: `false`
+     */
     detach?: boolean;
+    /**
+     * Defines the amount of pixels for the sheet.
+     * Default value is: `15`
+     */
+    detachOffset?: number;
+    /**
+     * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.
+     * Default value is: `false`
+     */
     useBackdrop?: boolean;
+    /**
+     * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.
+     */
     onBackdropClick?: VoidFunction;
-    bodyRef?: MutableRefObject<HTMLDivElement>;
+    /** A react ref added to the bottom sheet body. */
+    bodyRef?: MutableRefObject<HTMLDivElement | null>;
+    /** Additional classes to be set on the body element. */
     bodyClassName?: string;
+    /** Additional classes to be set on the wrapping element. */
     className?: string;
 };
 declare const BottomSheet: (props: BottomSheetProps & PropsWithChildren) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/lib/es/components/bottomSheet/BottomSheet.js

@@ -5,12 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
 const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
+const framer_motion_1 = require("framer-motion");
 const portalRoot_1 = require("../../utils/portalRoot");
 const OFFSET_POSITION = -1000;
+const DEFAULT_OFFSET_PX = 15;
 const BottomSheet = (props) => {
-    const { show = false, onClose, width, height, title, detach = false, useBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { } } = props, remainingProps = tslib_1.__rest(props, ["show", "onClose", "width", "height", "title", "detach", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
+    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, useBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { } } = props, remainingProps = tslib_1.__rest(props, ["show", "onClose", "width", "height", "title", "detach", "detachOffset", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
     const [isShown, setIsShown] = (0, react_1.useState)(show);
     const [isMaxHeight, setIsMaxHeight] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => setIsShown(show), [show]);
@@ -33,14 +34,18 @@ const BottomSheet = (props) => {
         setIsMaxHeight(newValue);
         onHeightChange();
     };
-    const sheetClasses = (0, classnames_1.default)('bottom-sheet', 'position-fixed left-0', !width && 'width-100pct', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detach ? 'margin-15 rounded' : 'rounded-top-left rounded-top-right', className && className);
+    const sheetClasses = (0, classnames_1.default)('bottom-sheet', 'position-fixed left-0', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detach ? 'rounded' : 'rounded-top-left rounded-top-right', className && className);
     const sheetBodyClasses = (0, classnames_1.default)('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);
     const sheetHeight = isMaxHeight ? window.innerHeight : height;
     // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.
     // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.
     // That is the reason why there is no "AnimatePresence" with an "exit" animation here.
     // Instead, we change the "animate" values.
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, Object.assign({}, remainingProps, { className: sheetClasses, style: { width }, initial: { opacity: 0 }, animate: {
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, Object.assign({}, remainingProps, { className: sheetClasses, style: {
+                    width,
+                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',
+                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,
+                }, initial: { opacity: 0 }, animate: {
                     opacity: isShown ? 1 : 0,
                     y: 0,
                     bottom: isShown ? 0 : OFFSET_POSITION,

package/lib/es/components/map/utils/eventHandling.d.ts

@@ -1,3 +1,13 @@
+export function createEnhancedMapEvent(event: any, mapApi: any): EnhancedMapEvent | {
+    map: any;
+};
+export function createEnhancedListener(listener: any, mapApi: any): (event: any) => any;
+export function addEventListenerMap(hMapObject: any, eventListenerMap: {} | undefined, mapApi: any): void;
+export function removeEventListenerMap(hMapObject: any): any;
+export function checkAndUpdateEventListenerMap(hMapObject: any, props: any, nextProps: any): void;
+export function createTapOnDblTapPreventer(eventListenerMap: any, delayBetweenTaps?: number): any;
+export function getMouseButton(event: any): any;
+export function isRightClick(event: any): boolean;
 export namespace EventUtils {
     export namespace MOUSE_BUTTONS {
         const LEFT: number;
@@ -27,16 +37,6 @@ export namespace EventUtils {
     export { getMouseButton };
     export { isRightClick };
 }
-export function createEnhancedMapEvent(event: any, mapApi: any): EnhancedMapEvent | {
-    map: any;
-};
-export function createEnhancedListener(listener: any, mapApi: any): (event: any) => any;
-export function addEventListenerMap(hMapObject: any, eventListenerMap: {} | undefined, mapApi: any): void;
-export function removeEventListenerMap(hMapObject: any): any;
-export function checkAndUpdateEventListenerMap(hMapObject: any, props: any, nextProps: any): void;
-export function createTapOnDblTapPreventer(eventListenerMap: any, delayBetweenTaps?: number): any;
-export function getMouseButton(event: any): any;
-export function isRightClick(event: any): boolean;
 declare class EnhancedMapEvent {
     constructor(event: any, mapApi: any);
     viewportX: any;

package/lib/es/components/map/utils/eventHandling.js

@@ -1,35 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isRightClick = exports.getMouseButton = exports.createTapOnDblTapPreventer = exports.checkAndUpdateEventListenerMap = exports.removeEventListenerMap = exports.addEventListenerMap = exports.createEnhancedListener = exports.createEnhancedMapEvent = exports.EventUtils = void 0;
-exports.EventUtils = {
-    MOUSE_BUTTONS: {
-        LEFT: 0,
-        MIDDLE: 1,
-        RIGHT: 2,
-    },
-    POINTER_DOWN: 'pointerdown',
-    POINTER_UP: 'pointerup',
-    POINTER_MOVE: 'pointermove',
-    POINTER_ENTER: 'pointerenter',
-    POINTER_LEAVE: 'pointerleave',
-    POINTER_CANCEL: 'pointercancel',
-    DRAG_START: 'dragstart',
-    DRAG: 'drag',
-    DRAG_END: 'dragend',
-    TAP: 'tap',
-    DBL_TAP: 'dbltap',
-    LONGPRESS: 'longpress',
-    CONTEXTMENU: 'contextmenu',
-    CONTEXTMENU_CLOSE: 'contextmenuclose',
-    MAP_VIEW_CHANGE_START: 'mapviewchangestart',
-    MAP_VIEW_CHANGE: 'mapviewchange',
-    MAP_VIEW_CHANGE_END: 'mapviewchangeend',
-    BASE_LAYER_CHANGE: 'baselayerchange',
-    ENGINE_CHANGE: 'enginechange',
-    createTapOnDblTapPreventer: exports.createTapOnDblTapPreventer,
-    getMouseButton: exports.getMouseButton,
-    isRightClick: exports.isRightClick,
-};
+exports.EventUtils = exports.isRightClick = exports.getMouseButton = exports.createTapOnDblTapPreventer = exports.checkAndUpdateEventListenerMap = exports.removeEventListenerMap = exports.addEventListenerMap = exports.createEnhancedListener = exports.createEnhancedMapEvent = void 0;
 class MapTimeGuard {
     constructor(delay = 250) {
         this.delayTime = delay;
@@ -123,3 +94,32 @@ const isRightClick = event => {
     return (0, exports.getMouseButton)(event) === exports.EventUtils.MOUSE_BUTTONS.RIGHT;
 };
 exports.isRightClick = isRightClick;
+exports.EventUtils = {
+    MOUSE_BUTTONS: {
+        LEFT: 0,
+        MIDDLE: 1,
+        RIGHT: 2,
+    },
+    POINTER_DOWN: 'pointerdown',
+    POINTER_UP: 'pointerup',
+    POINTER_MOVE: 'pointermove',
+    POINTER_ENTER: 'pointerenter',
+    POINTER_LEAVE: 'pointerleave',
+    POINTER_CANCEL: 'pointercancel',
+    DRAG_START: 'dragstart',
+    DRAG: 'drag',
+    DRAG_END: 'dragend',
+    TAP: 'tap',
+    DBL_TAP: 'dbltap',
+    LONGPRESS: 'longpress',
+    CONTEXTMENU: 'contextmenu',
+    CONTEXTMENU_CLOSE: 'contextmenuclose',
+    MAP_VIEW_CHANGE_START: 'mapviewchangestart',
+    MAP_VIEW_CHANGE: 'mapviewchange',
+    MAP_VIEW_CHANGE_END: 'mapviewchangeend',
+    BASE_LAYER_CHANGE: 'baselayerchange',
+    ENGINE_CHANGE: 'enginechange',
+    createTapOnDblTapPreventer: exports.createTapOnDblTapPreventer,
+    getMouseButton: exports.getMouseButton,
+    isRightClick: exports.isRightClick,
+};

package/lib/es/utils/buttonEffect.js

@@ -14,7 +14,8 @@ const createButtonRipple = (event, target = null) => {
     }
     // The TouchEvent does not contain clientX/clientY by definition. Most browsers will emulate/add it, though.
     // Nevertheless, we read the client values from the first touch object to be compliant.
-    if (event instanceof TouchEvent) {
+    // Note: some browsers don't provide the global "TouchEvent" constructor!
+    if (!!TouchEvent && event instanceof TouchEvent) {
         const firstTouch = event.touches[0];
         circle.style.left = `${firstTouch.clientX - buttonRect.left - radius}px`;
         circle.style.top = `${firstTouch.clientY - buttonRect.top - radius}px`;

package/lib/es/utils/deviceUtils.d.ts

@@ -7,5 +7,6 @@ export const SCREEN_XL: 1700;
 export function isMobileScreen(): boolean;
 export function isMobile(): boolean;
 export function isDesktop(): boolean;
+export function isRetinaDevice(): boolean;
 export function inIframe(): boolean;
 export function toggleZoomOnMobile(): void;

package/lib/es/utils/deviceUtils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toggleZoomOnMobile = exports.inIframe = exports.isDesktop = exports.isMobile = exports.isMobileScreen = exports.SCREEN_XL = exports.SCREEN_LG = exports.SCREEN_MD = exports.SCREEN_SM = exports.MOBILE_SCREEN = exports.hasTouch = void 0;
+exports.toggleZoomOnMobile = exports.inIframe = exports.isRetinaDevice = exports.isDesktop = exports.isMobile = exports.isMobileScreen = exports.SCREEN_XL = exports.SCREEN_LG = exports.SCREEN_MD = exports.SCREEN_SM = exports.MOBILE_SCREEN = exports.hasTouch = void 0;
 const cssuseragent_1 = require("./cssuseragent");
 // As "cssuseragent" is accessing the html dom object directly without checking whether it exists or not,
 // we need to initialize only when html really exists. This avoids issues when running the UIKIT in a web-worker
@@ -40,6 +40,8 @@ const isMobile = () => document && document.documentElement.classList.contains('
 exports.isMobile = isMobile;
 const isDesktop = () => document && document.documentElement.classList.contains('ua-desktop');
 exports.isDesktop = isDesktop;
+const isRetinaDevice = () => window.devicePixelRatio > 1;
+exports.isRetinaDevice = isRetinaDevice;
 const inIframe = () => {
     try {
         return window.self !== window.top;

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.2"
+    "version": "0.16.4-beta.3"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.4-beta.2",
+    "version": "0.16.4-beta.3",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {

package/utils/buttonEffect.js

@@ -11,7 +11,8 @@ export const createButtonRipple = (event, target = null) => {
     }
     // The TouchEvent does not contain clientX/clientY by definition. Most browsers will emulate/add it, though.
     // Nevertheless, we read the client values from the first touch object to be compliant.
-    if (event instanceof TouchEvent) {
+    // Note: some browsers don't provide the global "TouchEvent" constructor!
+    if (!!TouchEvent && event instanceof TouchEvent) {
         const firstTouch = event.touches[0];
         circle.style.left = `${firstTouch.clientX - buttonRect.left - radius}px`;
         circle.style.top = `${firstTouch.clientY - buttonRect.top - radius}px`;

package/utils/deviceUtils.d.ts

@@ -7,5 +7,6 @@ export const SCREEN_XL: 1700;
 export function isMobileScreen(): boolean;
 export function isMobile(): boolean;
 export function isDesktop(): boolean;
+export function isRetinaDevice(): boolean;
 export function inIframe(): boolean;
 export function toggleZoomOnMobile(): void;

package/utils/deviceUtils.js

@@ -33,6 +33,7 @@ export const SCREEN_XL = 1700;
 export const isMobileScreen = () => window.matchMedia(`(max-width: ${MOBILE_SCREEN}px)`).matches;
 export const isMobile = () => document && document.documentElement.classList.contains('ua-mobile');
 export const isDesktop = () => document && document.documentElement.classList.contains('ua-desktop');
+export const isRetinaDevice = () => window.devicePixelRatio > 1;
 export const inIframe = () => {
     try {
         return window.self !== window.top;

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.2"
+    "version": "0.16.4-beta.3"
 }