cloudmr-ux 2.0.6 → 3.0.1

package/dist/CmrComponents/collapse/Collapse.js

@@ -0,0 +1,87 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { cloneElement } from "react";
+import "./Collapse.css";
+var CmrCollapse = function (props) {
+    var activeKey = props.activeKey, defaultActiveKey = props.defaultActiveKey, onChange = props.onChange, children = props.children;
+    defaultActiveKey = defaultActiveKey || [];
+    var _a = React.useState(defaultActiveKey), activeKeys = _a[0], setActiveKeys = _a[1];
+    // Sync activeKey prop with state
+    React.useEffect(function () {
+        if (activeKey !== undefined && activeKey !== activeKeys) {
+            if (Array.isArray(activeKey)) {
+                setActiveKeys(activeKey);
+            }
+            else {
+                setActiveKeys([activeKey]);
+            }
+        }
+    }, [activeKey]);
+    // Handle toggling panels
+    var onToggle = function (key) {
+        var newKeys = __spreadArray([], activeKeys, true);
+        var keyIndex = newKeys.indexOf(key);
+        if (keyIndex === -1) {
+            newKeys.push(key);
+        }
+        else {
+            newKeys.splice(keyIndex, 1);
+        }
+        setActiveKeys(newKeys);
+        if (onChange)
+            onChange(newKeys);
+    };
+    // Render children
+    var renderChildren = function () {
+        if (!children)
+            return null;
+        if (Array.isArray(children)) {
+            return children.map(function (child, index) {
+                var panelKey = index;
+                var expanded = activeKeys.includes(panelKey).toString();
+                // Make header clickable
+                var header = (_jsx("div", __assign({ onClick: function () { return onToggle(panelKey); }, style: { cursor: "pointer" } }, { children: child.props.header })));
+                return (_jsx(React.Fragment, { children: cloneElement(child, {
+                        expanded: expanded,
+                        // panelKey,
+                        onToggle: onToggle,
+                        header: header
+                    }) }, panelKey));
+            });
+        }
+        else {
+            // Handle single child case
+            var panelKey_1 = 0;
+            var expanded = activeKeys.includes(panelKey_1);
+            // Make header clickable
+            var header = (_jsx("div", __assign({ onClick: function () { return onToggle(panelKey_1); }, style: { cursor: "pointer" } }, { children: children.props.header })));
+            return cloneElement(children, {
+                expanded: expanded,
+                // panelKey,
+                onToggle: onToggle,
+                header: header
+            });
+        }
+    };
+    return (_jsx("div", __assign({ className: "cmr-collapse" }, { children: _jsx("div", { children: renderChildren() }) })));
+};
+export default CmrCollapse;

package/dist/CmrComponents/dialogue/Confirmation.d.ts

@@ -0,0 +1,20 @@
+type ExtraButton = {
+    text: string;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+    onClick: () => void;
+};
+export default function CmrConfirmation({ name, message, cancelText, confirmText, color, open, setOpen, confirmCallback, cancelCallback, cancellable, width, extraButtons, }: {
+    name: string | undefined;
+    message: string | undefined;
+    cancelText?: string;
+    confirmText?: string;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    confirmCallback?: () => void;
+    cancelCallback?: () => void;
+    cancellable?: boolean;
+    width?: number;
+    extraButtons?: ExtraButton[];
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CmrComponents/dialogue/Confirmation.js

@@ -0,0 +1,36 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import CmrButton from '../CmrButton/CmrButton';
+export default function CmrConfirmation(_a) {
+    var name = _a.name, message = _a.message, _b = _a.cancelText, cancelText = _b === void 0 ? 'Cancel' : _b, _c = _a.confirmText, confirmText = _c === void 0 ? 'Confirm' : _c, color = _a.color, open = _a.open, setOpen = _a.setOpen, _d = _a.confirmCallback, confirmCallback = _d === void 0 ? function () { } : _d, _e = _a.cancelCallback, cancelCallback = _e === void 0 ? function () { } : _e, _f = _a.cancellable, cancellable = _f === void 0 ? false : _f, width = _a.width, _g = _a.extraButtons, extraButtons = _g === void 0 ? [] : _g;
+    var handleClose = function () {
+        setOpen(false);
+    };
+    var handleConfirm = function () {
+        confirmCallback();
+        handleClose();
+    };
+    var handleCancel = function () {
+        cancelCallback();
+        handleClose();
+    };
+    return (_jsxs(Dialog, __assign({ open: open, onClose: handleClose }, { children: [_jsx(DialogTitle, { children: name ? name : 'Confirmation' }), _jsxs(DialogContent, __assign({ sx: { width: width } }, { children: [_jsx(DialogContentText, __assign({ alignContent: 'center' }, { children: message })), _jsxs(DialogActions, __assign({ className: 'mt-4' }, { children: [cancellable && (_jsx(CmrButton, __assign({ variant: "outlined", onClick: handleCancel }, { children: cancelText }))), extraButtons.map(function (btn, idx) { return (_jsx(CmrButton, __assign({ variant: "outlined", color: btn.color || 'success', onClick: function () {
+                                    btn.onClick();
+                                    handleClose();
+                                } }, { children: btn.text }), idx)); }), _jsx(CmrButton, __assign({ variant: "contained", color: color, onClick: handleConfirm }, { children: confirmText }))] }))] }))] })));
+}

package/dist/CmrComponents/dialogue/DeletionDialog.d.ts

@@ -0,0 +1,4 @@
+export default function CmrDeletionDialog(props: {
+    name: string | undefined;
+    deletionCallback: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/dialogue/DeletionDialog.js

@@ -0,0 +1,39 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+export default function CmrDeletionDialog(props) {
+    var _a = React.useState(true), open = _a[0], setOpen = _a[1];
+    var _b = React.useState(''), text = _b[0], setText = _b[1];
+    var handleClickOpen = function () {
+        setOpen(true);
+    };
+    var handleClose = function () {
+        setOpen(false);
+    };
+    var handleConfirm = function () {
+        if (text === props.name) {
+            props.deletionCallback();
+            setOpen(false);
+        }
+    };
+    var handleTextFieldChange = function (e) {
+        setText(e.target.value);
+    };
+    return (_jsx("div", { children: _jsxs(Dialog, __assign({ open: open, onClose: handleClose }, { children: [_jsx(DialogTitle, { children: "Confirmation" }), _jsxs(DialogContent, { children: [_jsx(DialogContentText, { children: "To delete the files, please type your full name below and confirm." }), _jsx(TextField, { autoFocus: true, margin: "dense", id: "name", type: "email", placeholder: props.name, fullWidth: true, inputProps: { style: { fontSize: "16pt" } }, variant: "standard", onChange: handleTextFieldChange })] }), _jsxs(DialogActions, { children: [_jsx("button", __assign({ className: 'btn btn-secondary', onClick: handleClose }, { children: "Cancel" })), _jsx("button", __assign({ className: 'btn btn-danger', onClick: handleConfirm }, { children: "Confirm" }))] })] })) }));
+}

package/dist/CmrComponents/dialogue/EditConfirmation.d.ts

@@ -0,0 +1,13 @@
+export interface EditConfirmationProps {
+    name?: string;
+    defaultText?: string;
+    message?: string;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    confirmCallback?: (text: string) => void;
+    cancellable?: boolean;
+    cancelCallback?: (edit: string) => void;
+    suffix?: string;
+}
+export default function CmrEditConfirmation({ name, message, defaultText, color, open, setOpen, confirmCallback, cancellable, cancelCallback, suffix }: EditConfirmationProps): import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/dialogue/EditConfirmation.js

@@ -0,0 +1,45 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import CmrButton from '../CmrButton/CmrButton';
+import { InputAdornment } from '@mui/material';
+import { useEffect } from "react";
+export default function CmrEditConfirmation(_a) {
+    var name = _a.name, message = _a.message, _b = _a.defaultText, defaultText = _b === void 0 ? '' : _b, color = _a.color, open = _a.open, setOpen = _a.setOpen, _c = _a.confirmCallback, confirmCallback = _c === void 0 ? function () { } : _c, _d = _a.cancellable, cancellable = _d === void 0 ? false : _d, _e = _a.cancelCallback, cancelCallback = _e === void 0 ? function () { } : _e, _f = _a.suffix, suffix = _f === void 0 ? '' : _f;
+    var _g = React.useState(defaultText), text = _g[0], setText = _g[1];
+    useEffect(function () {
+        if (open)
+            setText(defaultText);
+    }, [open]);
+    var handleClose = function () {
+        setOpen(false);
+    };
+    var handleConfirm = function () {
+        confirmCallback(text + suffix);
+        handleClose();
+    };
+    var handleCancel = function () {
+        cancelCallback(text + suffix);
+        handleClose();
+    };
+    return (_jsxs(Dialog, __assign({ maxWidth: "xs", fullWidth: true, open: open, onClose: handleCancel }, { children: [_jsx(DialogTitle, { children: name ? name : 'Confirmation' }), _jsxs(DialogContent, { children: [_jsx(DialogContentText, __assign({ alignContent: 'center' }, { children: message })), _jsx(DialogActions, { children: _jsx(TextField, { fullWidth: true, variant: 'standard', InputProps: {
+                                endAdornment: (_jsx(InputAdornment, __assign({ position: "end", sx: { whiteSpace: 'nowrap' } }, { children: suffix })))
+                            }, defaultValue: text, onChange: function (e) { return setText(e.target.value); } }) }), _jsxs(DialogActions, { children: [cancellable &&
+                                _jsx(CmrButton, __assign({ variant: "outlined", onClick: handleCancel }, { children: "Cancel" })), _jsx(CmrButton, __assign({ variant: "contained", color: color, onClick: handleConfirm }, { children: "Confirm" }))] })] })] })));
+}

package/dist/CmrComponents/double-slider/DualSlider.d.ts

@@ -0,0 +1,21 @@
+/**
+ * This dual slider (lil-gui styled) allows users to control the max and min of an interval simultaneously.
+ * The rendered interval (and number control) can be masked by a transformation - inverse pair.
+ * @param name
+ * @param min
+ * @param max
+ * @param setMin
+ * @param setMax
+ * @param transform transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
+ * @param inverse transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
+ * @constructor
+ */
+export declare const DualSlider: ({ name, min, max, setMin, setMax, transform, inverse }: {
+    name: string;
+    min: number;
+    max: number;
+    setMin?: ((min: number) => void) | undefined;
+    setMax?: ((max: number) => void) | undefined;
+    transform?: ((x: number) => number) | undefined;
+    inverse?: ((x: number) => number) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/double-slider/DualSlider.js

@@ -0,0 +1,152 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { useRef, useState } from "react";
+/**
+ * This dual slider (lil-gui styled) allows users to control the max and min of an interval simultaneously.
+ * The rendered interval (and number control) can be masked by a transformation - inverse pair.
+ * @param name
+ * @param min
+ * @param max
+ * @param setMin
+ * @param setMax
+ * @param transform transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
+ * @param inverse transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
+ * @constructor
+ */
+export var DualSlider = function (_a) {
+    var name = _a.name, min = _a.min, max = _a.max, setMin = _a.setMin, setMax = _a.setMax, _b = _a.transform, transform = _b === void 0 ? function (x) { return x; } : _b, _c = _a.inverse, inverse = _c === void 0 ? function (x) { return x; } : _c;
+    var _d = useState(0), leftSliderPosition = _d[0], setLeftSliderPosition = _d[1]; // Initial percentage for the left slider
+    var _e = useState(100), rightSliderPosition = _e[0], setRightSliderPosition = _e[1]; // Initial percentage for the right slider
+    var _f = useState(false), isHovering = _f[0], setIsHovering = _f[1];
+    var _g = useState(false), leftEditing = _g[0], setLeftEditing = _g[1];
+    var _h = useState(undefined), minOverride = _h[0], setMinOverride = _h[1];
+    var _j = useState(undefined), maxOverride = _j[0], setMaxOverride = _j[1];
+    if (minOverride)
+        min = minOverride;
+    if (maxOverride)
+        max = maxOverride;
+    var a = transform((max - min) * leftSliderPosition / 100 + min);
+    var b = transform((max - min) * rightSliderPosition / 100 + min);
+    var left = Math.min(a, b);
+    var right = Math.max(a, b);
+    var sliderRef = useRef(null); // Ref for the parent box
+    var handleDragStart = function (e, slider) {
+        // Prevent default behavior
+        e.preventDefault();
+        setLeftEditing(false);
+        setLeftIsNaN(false);
+        leftRef.current.blur();
+        setRightEditing(false);
+        setRightIsNaN(false);
+        rightRef.current.blur();
+        // Calculate initial positions
+        var startX = e.clientX;
+        // @ts-ignore
+        var sliderWidth = sliderRef.current.offsetWidth;
+        var handleMouseMove = function (e) {
+            var moveX = e.clientX - startX;
+            var newPosition = ((moveX / sliderWidth) * 100) + (slider === 'left' ? leftSliderPosition : rightSliderPosition);
+            // Prevent the slider from going outside the parent box
+            var clampedPosition = Math.min(100, Math.max(0, newPosition));
+            // Update the position of the slider
+            if (slider === 'left') {
+                setLeftSliderPosition(clampedPosition);
+                var a_1 = (max - min) * clampedPosition / 100 + min;
+                var b_1 = (max - min) * rightSliderPosition / 100 + min;
+                setMin && setMin(Math.min(a_1, b_1));
+                setMax && setMax(Math.max(a_1, b_1));
+            }
+            else if (slider === 'right') {
+                setRightSliderPosition(clampedPosition);
+                var a_2 = (max - min) * leftSliderPosition / 100 + min;
+                var b_2 = (max - min) * clampedPosition / 100 + min;
+                setMin && setMin(Math.min(a_2, b_2));
+                setMax && setMax(Math.max(a_2, b_2));
+            }
+        };
+        var handleMouseUp = function () {
+            // Remove event listeners once dragging is complete
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        // Add mouse move and mouse up listeners to document to handle drag
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+    var leftText = Math.abs(left) < 0.01 && left != 0 ? Number(left).toExponential(3).toUpperCase() : Number(left).toFixed(3);
+    var _k = useState(''), leftEditedText = _k[0], setLeftEditedText = _k[1];
+    var _l = useState(false), leftIsNaN = _l[0], setLeftIsNaN = _l[1];
+    var leftRef = useRef(null);
+    var _m = useState(false), rightEditing = _m[0], setRightEditing = _m[1];
+    var _o = useState(''), rightEditedText = _o[0], setRightEditedText = _o[1];
+    var _p = useState(false), rightIsNaN = _p[0], setRightIsNaN = _p[1];
+    var rightRef = useRef(null);
+    // Logic to handle right value box editing...
+    var rightText = Math.abs(right) < 0.01 && right != 0 ? Number(right).toExponential(3).toUpperCase() : Number(right).toFixed(3);
+    return _jsxs(Box, __assign({ sx: { display: 'flex', flexDirection: 'row', paddingLeft: '4px', paddingRight: '4px' }, height: 20 }, { children: [_jsx(Box, __assign({ flex: 0.322, fontSize: 16, color: '#3D3D3D', alignItems: 'center', display: 'flex', marginBottom: '1pt', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif' }, { children: name })), _jsxs(Box, __assign({ sx: { display: 'flex', flexDirection: 'row' }, flex: 1 }, { children: [_jsx("input", { ref: leftRef, style: { backgroundColor: '#f0f0f0', width: '45px', borderRadius: '2px', outline: "none", borderStyle: 'none', paddingLeft: '3px', paddingRight: '3px', lineHeight: '20px',
+                            whiteSpace: 'nowrap', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif', fontSize: '11px', color: leftIsNaN ? 'red' : 'black' }, value: (leftEditing) ? leftEditedText : leftText, onKeyDown: function (e) {
+                            if (e.key === 'Enter' && !leftIsNaN) {
+                                //@ts-ignore
+                                e.target.blur(); // This will cause the input to lose focus
+                            }
+                        }, onFocus: function (e) {
+                            setLeftEditedText(e.target.value);
+                            setLeftEditing(true);
+                        }, onChange: function (event) {
+                            setLeftIsNaN(isNaN(Number(event.target.value)));
+                            setLeftEditedText(event.target.value);
+                        }, onBlur: function (e) {
+                            var val = inverse(Number(leftEditedText));
+                            if (isNaN(val)) {
+                                return e.preventDefault();
+                            }
+                            setLeftEditing(false);
+                            setMin && setMin(val);
+                            var newMin = min;
+                            if (val < min) {
+                                setMinOverride(val);
+                                newMin = val;
+                            }
+                            var leftPosition = (val - newMin) / (max - newMin) * 100;
+                            setLeftSliderPosition(leftPosition);
+                        } }), _jsxs(Box, __assign({ sx: { backgroundColor: '#f0f0f0', flex: 1, marginLeft: '4px', marginRight: '4px', borderRadius: '2px', position: 'relative',
+                            overflow: 'hidden', opacity: isHovering ? 0.75 : 1
+                        }, ref: sliderRef, onMouseEnter: function () { return setIsHovering(true); }, onMouseLeave: function () { return setIsHovering(false); } }, { children: [_jsx(Box, __assign({ sx: { position: 'absolute', left: "calc(".concat(leftSliderPosition * 0.97, "% - 10px)"), width: '20px', height: '100%', cursor: 'ew-resize', zIndex: 1 }, onMouseDown: function (e) { return handleDragStart(e, 'left'); } }, { children: _jsx(Box, { sx: { position: 'absolute', left: '10px', width: '2px', height: '100%', backgroundColor: 'black' } }) })), _jsx(Box, __assign({ sx: { position: 'absolute', right: "calc(".concat((100 - rightSliderPosition) * 0.97, "% - 10px)"), width: '20px', height: '100%', cursor: 'ew-resize', zIndex: 1 }, onMouseDown: function (e) { return handleDragStart(e, 'right'); } }, { children: _jsx(Box, { sx: { position: 'absolute', right: '10px', width: '2px', height: '100%', backgroundColor: 'black' } }) }))] })), _jsx("input", { style: { backgroundColor: '#f0f0f0', width: '45px', borderRadius: '2px', outline: "none", borderStyle: 'none', paddingLeft: '3px', paddingRight: '3px', lineHeight: '20px',
+                            whiteSpace: 'nowrap', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif', fontSize: '11px', color: rightIsNaN ? 'red' : 'black' }, value: (rightEditing) ? rightEditedText : rightText, ref: rightRef, onKeyDown: function (e) {
+                            if (e.key === 'Enter' && !rightIsNaN) {
+                                //@ts-ignore
+                                e.target.blur(); // This will cause the input to lose focus
+                            }
+                        }, onFocus: function (e) {
+                            setRightEditedText(e.target.value);
+                            setRightEditing(true);
+                        }, onChange: function (event) {
+                            setRightIsNaN(isNaN(Number(event.target.value)));
+                            setRightEditedText(event.target.value);
+                        }, onBlur: function (e) {
+                            var val = inverse(Number(rightEditedText));
+                            if (isNaN(val)) {
+                                return e.preventDefault();
+                            }
+                            setRightEditing(false);
+                            setMax && setMax(val);
+                            var newMax = max;
+                            if (val > max) {
+                                setMaxOverride(val);
+                                newMax = val;
+                            }
+                            var rightPosition = (val - min) / (newMax - min) * 100;
+                            setRightSliderPosition(rightPosition);
+                        } })] }))] }));
+};

package/dist/CmrComponents/double-slider/InvertibleDualSlider.d.ts

@@ -0,0 +1,24 @@
+/**
+ * This dual slider (lil-gui styled) allows users to control the max and min of an interval simultaneously.
+ * The rendered interval (and number control) can be masked by a transformation - inverse pair.
+ * @param name
+ * @param min
+ * @param max
+ * @param setMin
+ * @param setMax
+ * @param reverse
+ * @param transform transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
+ * @param inverse transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
+ * @constructor
+ */
+export declare const InvertibleDualSlider: ({ name, min, max, setMin, setMax, reverse, transform, inverse, onFinalize }: {
+    name: string;
+    min: number;
+    max: number;
+    setMin?: ((min: number) => void) | undefined;
+    setMax?: ((max: number) => void) | undefined;
+    reverse?: boolean | undefined;
+    transform?: ((x: number) => number) | undefined;
+    inverse?: ((x: number) => number) | undefined;
+    onFinalize?: (() => void) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/double-slider/InvertibleDualSlider.js

@@ -0,0 +1,174 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+/**
+ * This dual slider (lil-gui styled) allows users to control the max and min of an interval simultaneously.
+ * The rendered interval (and number control) can be masked by a transformation - inverse pair.
+ * @param name
+ * @param min
+ * @param max
+ * @param setMin
+ * @param setMax
+ * @param reverse
+ * @param transform transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
+ * @param inverse transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
+ * @constructor
+ */
+export var InvertibleDualSlider = function (_a) {
+    var name = _a.name, min = _a.min, max = _a.max, setMin = _a.setMin, setMax = _a.setMax, _b = _a.reverse, reverse = _b === void 0 ? false : _b, _c = _a.transform, transform = _c === void 0 ? function (x) { return x; } : _c, _d = _a.inverse, inverse = _d === void 0 ? function (x) { return x; } : _d, onFinalize = _a.onFinalize;
+    var _e = useState(0), leftSliderPosition = _e[0], setLeftSliderPosition = _e[1]; // Initial percentage for the left slider
+    var _f = useState(100), rightSliderPosition = _f[0], setRightSliderPosition = _f[1]; // Initial percentage for the right slider
+    useEffect(function () {
+        setMin && setMin(min);
+        setMax && setMax(max);
+        setLeftSliderPosition(0);
+        setRightSliderPosition(100);
+    }, [min, max]);
+    var _g = useState(false), isHovering = _g[0], setIsHovering = _g[1];
+    var _h = useState(false), leftEditing = _h[0], setLeftEditing = _h[1];
+    var _j = useState(undefined), minOverride = _j[0], setMinOverride = _j[1];
+    var _k = useState(undefined), maxOverride = _k[0], setMaxOverride = _k[1];
+    if (minOverride)
+        min = minOverride;
+    if (maxOverride)
+        max = maxOverride;
+    var a = transform((max - min) * leftSliderPosition / 100 + min);
+    var b = transform((max - min) * rightSliderPosition / 100 + min);
+    var left = Math.min(a, b);
+    var right = Math.max(a, b);
+    var sliderRef = useRef(null); // Ref for the parent box
+    var handleDragStart = function (e, slider) {
+        // Prevent default behavior
+        e.preventDefault();
+        setLeftEditing(false);
+        setLeftIsNaN(false);
+        leftRef.current.blur();
+        setRightEditing(false);
+        setRightIsNaN(false);
+        rightRef.current.blur();
+        // Calculate initial positions
+        var startX = e.clientX;
+        // @ts-ignore
+        var sliderWidth = sliderRef.current.offsetWidth;
+        var handleMouseMove = function (e) {
+            var moveX = e.clientX - startX;
+            var newPosition = ((moveX / sliderWidth) * 100) + (slider === 'left' ? leftSliderPosition : rightSliderPosition);
+            // Prevent the slider from going outside the parent box
+            var clampedPosition = Math.min(100, Math.max(0, newPosition));
+            // Update the position of the slider
+            if (slider === 'left') {
+                setLeftSliderPosition(clampedPosition);
+                var a_1 = (max - min) * clampedPosition / 100 + min;
+                var b_1 = (max - min) * rightSliderPosition / 100 + min;
+                setMin && setMin(Math.min(a_1, b_1));
+                setMax && setMax(Math.max(a_1, b_1));
+            }
+            else if (slider === 'right') {
+                setRightSliderPosition(clampedPosition);
+                var a_2 = (max - min) * leftSliderPosition / 100 + min;
+                var b_2 = (max - min) * clampedPosition / 100 + min;
+                setMin && setMin(Math.min(a_2, b_2));
+                setMax && setMax(Math.max(a_2, b_2));
+            }
+        };
+        var handleMouseUp = function () {
+            // Remove event listeners once dragging is complete
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            onFinalize && onFinalize();
+        };
+        // Add mouse move and mouse up listeners to document to handle drag
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+    var leftText = Math.abs(left) < 0.01 && left != 0 ? Number(left).toExponential(3).toUpperCase() : Number(left).toFixed(3);
+    var _l = useState(''), leftEditedText = _l[0], setLeftEditedText = _l[1];
+    var _m = useState(false), leftIsNaN = _m[0], setLeftIsNaN = _m[1];
+    var leftRef = useRef(null);
+    var _o = useState(false), rightEditing = _o[0], setRightEditing = _o[1];
+    var _p = useState(''), rightEditedText = _p[0], setRightEditedText = _p[1];
+    var _q = useState(false), rightIsNaN = _q[0], setRightIsNaN = _q[1];
+    var rightRef = useRef(null);
+    // Logic to handle right value box editing...
+    var rightText = Math.abs(right) < 0.01 && right != 0 ? Number(right).toExponential(3).toUpperCase() : Number(right).toFixed(3);
+    return _jsxs(Box, __assign({ sx: { display: 'flex', flexDirection: 'row', paddingLeft: '4px', paddingRight: '4px' }, height: 27 }, { children: [name != '' && _jsx(Box, __assign({ fontSize: 16, marginRight: '5pt', color: 'white', alignItems: 'center', display: 'flex', marginBottom: '1pt', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif' }, { children: name })), _jsxs(Box, __assign({ sx: { display: 'flex', flexDirection: 'row' }, flex: 1 }, { children: [_jsx("input", { ref: leftRef, style: { backgroundColor: '#ffffff', width: '45px', borderRadius: '2px', outline: "none", borderStyle: 'none', paddingLeft: '3px', paddingRight: '3px', lineHeight: '20px',
+                            whiteSpace: 'nowrap', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif', fontSize: '11px', color: leftIsNaN ? 'red' : 'black' }, value: (leftEditing) ? leftEditedText : leftText, onKeyDown: function (e) {
+                            if (e.key === 'Enter' && !leftIsNaN) {
+                                //@ts-ignore
+                                e.target.blur(); // This will cause the input to lose focus
+                            }
+                        }, onFocus: function (e) {
+                            setLeftEditedText(e.target.value);
+                            setLeftEditing(true);
+                        }, onChange: function (event) {
+                            setLeftIsNaN(isNaN(Number(event.target.value)));
+                            setLeftEditedText(event.target.value);
+                        }, onBlur: function (e) {
+                            var val = inverse(Number(leftEditedText));
+                            if (isNaN(val)) {
+                                return e.preventDefault();
+                            }
+                            setLeftEditing(false);
+                            setMin && setMin(val);
+                            var newMin = min;
+                            if (val < min) {
+                                setMinOverride(val);
+                                newMin = val;
+                            }
+                            var leftPosition = (val - newMin) / (max - newMin) * 100;
+                            setLeftSliderPosition(leftPosition);
+                            onFinalize && onFinalize();
+                        } }), _jsxs(Box, __assign({ sx: { backgroundColor: '#ffffff', flex: 1, marginLeft: '4px', marginRight: '4px', borderRadius: '2px', position: 'relative',
+                            overflow: 'hidden'
+                        }, ref: sliderRef, onMouseEnter: function () { return setIsHovering(true); }, onMouseLeave: function () { return setIsHovering(false); } }, { children: [!reverse && _jsx(Box, { sx: { backgroundColor: isHovering ? '#b9deff' : '#8ec7ff',
+                                    height: '100%', position: 'absolute',
+                                    left: "calc(".concat(Math.min(leftSliderPosition, rightSliderPosition + 3) * 0.97, "%)"),
+                                    right: "calc(".concat((100 - Math.max(leftSliderPosition - 3, rightSliderPosition)) * 0.97, "%)"),
+                                    zIndex: 1 } }), reverse && _jsx(Box, { sx: { backgroundColor: isHovering ? '#b9deff' : '#8ec7ff',
+                                    height: '100%', position: 'absolute',
+                                    left: "calc(".concat(Math.max(leftSliderPosition, rightSliderPosition + 3) * 0.97, "%)"),
+                                    right: "0",
+                                    zIndex: 1 } }), reverse && _jsx(Box, { sx: { backgroundColor: isHovering ? '#b9deff' : '#8ec7ff',
+                                    height: '100%', position: 'absolute',
+                                    left: "0",
+                                    right: "calc(".concat((100 - Math.min(leftSliderPosition - 3, rightSliderPosition)) * 0.97, "%)"),
+                                    zIndex: 1 } }), _jsx(Box, __assign({ sx: { position: 'absolute', left: "calc(".concat(leftSliderPosition * 0.97, "% - 10px)"), width: '20px', height: '100%', cursor: 'ew-resize', zIndex: 1 }, onMouseDown: function (e) { return handleDragStart(e, 'left'); } }, { children: _jsx(Box, { sx: { position: 'absolute', left: '10px', width: '2px', height: '100%', backgroundColor: '#2e9eff' } }) })), _jsx(Box, __assign({ sx: { position: 'absolute', right: "calc(".concat((100 - rightSliderPosition) * 0.97, "% - 10px)"), width: '20px', height: '100%', cursor: 'ew-resize', zIndex: 1 }, onMouseDown: function (e) { return handleDragStart(e, 'right'); } }, { children: _jsx(Box, { sx: { position: 'absolute', right: '10px', width: '2px', height: '100%', backgroundColor: '#2e9eff' } }) }))] })), _jsx("input", { style: { backgroundColor: '#ffffff', width: '45px', borderRadius: '2px', outline: "none", borderStyle: 'none', paddingLeft: '3px', paddingRight: '3px', lineHeight: '20px',
+                            whiteSpace: 'nowrap', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif', fontSize: '11px', color: rightIsNaN ? 'red' : 'black' }, value: (rightEditing) ? rightEditedText : rightText, ref: rightRef, onKeyDown: function (e) {
+                            if (e.key === 'Enter' && !rightIsNaN) {
+                                //@ts-ignore
+                                e.target.blur(); // This will cause the input to lose focus
+                            }
+                        }, onFocus: function (e) {
+                            setRightEditedText(e.target.value);
+                            setRightEditing(true);
+                        }, onChange: function (event) {
+                            setRightIsNaN(isNaN(Number(event.target.value)));
+                            setRightEditedText(event.target.value);
+                        }, onBlur: function (e) {
+                            var val = inverse(Number(rightEditedText));
+                            if (isNaN(val)) {
+                                return e.preventDefault();
+                            }
+                            setRightEditing(false);
+                            setMax && setMax(val);
+                            var newMax = max;
+                            if (val > max) {
+                                setMaxOverride(val);
+                                newMax = val;
+                            }
+                            var rightPosition = (val - min) / (newMax - min) * 100;
+                            setRightSliderPosition(rightPosition);
+                            onFinalize && onFinalize();
+                        } })] }))] }));
+};

package/dist/CmrComponents/gui-slider/ControlledSlider.d.ts

@@ -0,0 +1,9 @@
+export declare const ControlledSlider: ({ name, min, max, setValue, transform, inverse, value }: {
+    name: string;
+    min: number;
+    max: number;
+    setValue?: ((value: number) => void) | undefined;
+    transform?: ((x: number) => number) | undefined;
+    inverse?: ((x: number) => number) | undefined;
+    value: number;
+}) => import("react/jsx-runtime").JSX.Element;