cloudmr-ux 2.0.7 → 3.0.1

package/dist/CmrComponents/gui-slider/ControlledSlider.js

@@ -0,0 +1,96 @@
+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";
+export var ControlledSlider = function (_a) {
+    var name = _a.name, min = _a.min, max = _a.max, setValue = _a.setValue, _b = _a.transform, transform = _b === void 0 ? function (x) { return x; } : _b, _c = _a.inverse, inverse = _c === void 0 ? function (x) { return x; } : _c, value = _a.value;
+    var sliderPosition = (value - min) / (max - min) * 100;
+    var sliderRef = useRef(null);
+    var _d = useState(false), isEditing = _d[0], setIsEditing = _d[1];
+    var _e = useState(''), editedValue = _e[0], setEditedValue = _e[1];
+    var _f = useState(false), textIsNaN = _f[0], setIsNaN = _f[1];
+    var handleDragStart = function (e) {
+        e.preventDefault();
+        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) + sliderPosition;
+            var clampedPosition = Math.min(100, Math.max(0, newPosition));
+            var newValue = (max - min) * clampedPosition / 100 + min;
+            setValue && setValue(newValue);
+        };
+        var handleMouseUp = function () {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+    var handleInputChange = function (e) {
+        setIsNaN(isNaN(Number(e.target.value)));
+        setEditedValue(e.target.value);
+    };
+    var handleInputBlur = function (e) {
+        var val = inverse(Number(editedValue));
+        if (isNaN(val)) {
+            return e.preventDefault();
+        }
+        setIsEditing(false);
+        setValue && setValue(val);
+    };
+    var handleInputKeyDown = function (e) {
+        if (e.key === 'Enter' && !textIsNaN) {
+            e.currentTarget.blur();
+        }
+    };
+    var formatText = function (value) {
+        return Math.abs(value) < 0.01 && value != 0 ?
+            Number(value).toExponential(3).toUpperCase() :
+            Number(value).toFixed(3);
+    };
+    var displayValue = isEditing ? editedValue : formatText(value);
+    return (_jsxs(Box, __assign({ sx: { display: 'flex', flexDirection: 'row', paddingLeft: '4px', paddingRight: '4px' }, height: 20 }, { children: [_jsx(Box, __assign({ flex: 0.77, 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(Box, __assign({ sx: {
+                            backgroundColor: '#f0f0f0',
+                            flex: 1,
+                            marginLeft: '4px',
+                            marginRight: '4px',
+                            borderRadius: '2px',
+                            position: 'relative',
+                            overflow: 'hidden'
+                        }, ref: sliderRef, onMouseDown: handleDragStart }, { children: _jsx(Box, __assign({ sx: {
+                                position: 'absolute',
+                                left: "calc(".concat(sliderPosition * 0.98, "% - 10px)"),
+                                width: '20px',
+                                height: '100%',
+                                cursor: 'ew-resize',
+                                zIndex: 1
+                            } }, { children: _jsx(Box, { sx: { position: 'absolute', left: '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: textIsNaN ? 'red' : 'black'
+                        }, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, onFocus: function (e) {
+                            setEditedValue(e.target.value);
+                            setIsEditing(true);
+                        } })] }))] })));
+};

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

@@ -0,0 +1,20 @@
+/**
+ * This slider allows users to control a single value within a given range.
+ * The rendered value can be masked by a transformation.
+ * @param name
+ * @param min
+ * @param max
+ * @param setValue
+ * @param transform transform is used to mask the rendered value by a transformation
+ * @param inverse transform is used to unmask the value to its original form
+ * @constructor
+ */
+export declare const Slider: ({ 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 | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/gui-slider/Slider.js

@@ -0,0 +1,127 @@
+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 slider allows users to control a single value within a given range.
+ * The rendered value can be masked by a transformation.
+ * @param name
+ * @param min
+ * @param max
+ * @param setValue
+ * @param transform transform is used to mask the rendered value by a transformation
+ * @param inverse transform is used to unmask the value to its original form
+ * @constructor
+ */
+export var Slider = function (_a) {
+    var name = _a.name, min = _a.min, max = _a.max, setValue = _a.setValue, _b = _a.transform, transform = _b === void 0 ? function (x) { return x; } : _b, _c = _a.inverse, inverse = _c === void 0 ? function (x) { return x; } : _c, value = _a.value;
+    useEffect(function () {
+        if (value != undefined) {
+            setSliderPosition((value - min) / (max - min) * 100);
+        }
+    }, [value]);
+    var _d = useState(50), sliderPosition = _d[0], setSliderPosition = _d[1]; // Initial percentage for the slider
+    var sliderRef = useRef(null); // Ref for the parent box
+    var handleDragStart = function (e) {
+        // Prevent default behavior
+        e.preventDefault();
+        // 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) + sliderPosition;
+            // Prevent the slider from going outside the parent box
+            var clampedPosition = Math.min(100, Math.max(0, newPosition));
+            // Update the position of the slider
+            setSliderPosition(clampedPosition);
+            var value = transform((max - min) * clampedPosition / 100 + min);
+            setValue && setValue(value);
+        };
+        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 _e = useState(false), isEditing = _e[0], setIsEditing = _e[1];
+    var _f = useState(''), editedValue = _f[0], setEditedValue = _f[1];
+    var _g = useState(false), textIsNaN = _g[0], setIsNaN = _g[1];
+    var handleInputChange = function (e) {
+        setIsNaN(isNaN(Number(e.target.value)));
+        setEditedValue(e.target.value);
+    };
+    var handleInputBlur = function (e) {
+        var val = inverse(Number(editedValue));
+        if (isNaN(val)) {
+            return e.preventDefault();
+        }
+        setIsEditing(false);
+        setValue && setValue(val);
+    };
+    var handleInputKeyDown = function (e) {
+        if (e.key === 'Enter' && !textIsNaN) {
+            e.currentTarget.blur();
+        }
+    };
+    var formatText = function (value) {
+        return Math.abs(value) < 0.01 && value != 0 ?
+            Number(value).toExponential(3).toUpperCase() :
+            Number(value).toFixed(3);
+    };
+    var val = transform((max - min) * sliderPosition / 100 + min);
+    var displayValue = isEditing ? editedValue : formatText(val);
+    return _jsxs(Box, __assign({ sx: { display: 'flex', flexDirection: 'row', paddingLeft: '4px', paddingRight: '4px', marginBottom: '4px'
+        }, height: 20 }, { children: [_jsx(Box, __assign({ flex: 0.77, 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(Box, __assign({ sx: {
+                            backgroundColor: '#f0f0f0',
+                            flex: 1,
+                            marginLeft: '4px',
+                            marginRight: '4px',
+                            borderRadius: '2px',
+                            position: 'relative',
+                            overflow: 'hidden'
+                        }, ref: sliderRef, onMouseDown: handleDragStart }, { children: _jsx(Box, __assign({ sx: {
+                                position: 'absolute',
+                                left: "calc(".concat(sliderPosition * 0.98, "% - 10px)"),
+                                width: '20px',
+                                height: '100%',
+                                cursor: 'ew-resize',
+                                zIndex: 1
+                            } }, { children: _jsx(Box, { sx: {
+                                    position: 'absolute',
+                                    left: '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: textIsNaN ? 'red' : 'black'
+                        }, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, onFocus: function (e) {
+                            setEditedValue(e.target.value);
+                            setIsEditing(true);
+                        } })] }))] }));
+};

package/dist/CmrComponents/header/Header.d.ts

@@ -0,0 +1,17 @@
+import "./Header.scss";
+interface MenuItem {
+    path: string;
+    title: string;
+}
+interface DropdownMenuItem {
+    label: string;
+    onClick: () => void;
+}
+interface HeaderProps {
+    menuList: MenuItem[];
+    siteLogo: string;
+    dropdownMenuItems?: DropdownMenuItem[];
+}
+declare const Header: ({ menuList, siteLogo, dropdownMenuItems }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default Header;
+export type { MenuItem, DropdownMenuItem };

package/dist/CmrComponents/header/Header.js

@@ -0,0 +1,90 @@
+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 { useEffect, useState } from "react";
+import "./Header.scss";
+import { Link, useNavigate } from "react-router-dom";
+import { getAppConfig } from "../../core/config/AppConfig";
+import { Container, Toolbar } from "@mui/material";
+import { useAppDispatch, useAppSelector } from "../../core/store/hooks";
+import { signOut } from "../../core/features/authenticate/authenticateActionCreation";
+var Header = function (_a) {
+    var menuList = _a.menuList, siteLogo = _a.siteLogo, _b = _a.dropdownMenuItems, dropdownMenuItems = _b === void 0 ? [] : _b;
+    var config = getAppConfig();
+    var navigate = useNavigate();
+    var dispatch = useAppDispatch();
+    var authentication = useAppSelector(function (state) { return state.authenticate; });
+    var currPath = navigate.name;
+    var _c = useState(config.APP_NAME), menuSelect = _c[0], setMenuSelect = _c[1];
+    var email = authentication.email;
+    var handleLogout = function () {
+        dispatch(signOut());
+    };
+    // console.log(authentication);
+    useEffect(function () {
+        for (var _i = 0, menuList_1 = menuList; _i < menuList_1.length; _i++) {
+            var item = menuList_1[_i];
+            console.log(item.path);
+            console.log(currPath);
+            if (item.path === currPath)
+                setMenuSelect(item.title);
+        }
+    }, [currPath]);
+    var handleMenuChange = function (info, navigate) {
+        if (currPath === info.path)
+            return;
+        navigate(info.path);
+        for (var _i = 0, menuList_2 = menuList; _i < menuList_2.length; _i++) {
+            var item = menuList_2[_i];
+            if (item.path === info.path) {
+                setMenuSelect(item.title);
+            }
+        }
+        return false;
+    };
+    return (_jsx("nav", __assign({ className: "navbar navbar-expand-md navbar-dark bg-dark shadow-sm", style: {
+            background: "#390063",
+            paddingTop: "10px",
+            paddingBottom: "10px"
+        } }, { children: _jsx(Container, __assign({ maxWidth: "lg" }, { children: _jsxs(Toolbar, __assign({ sx: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center"
+                } }, { children: [_jsx(Link, __assign({ to: "/", className: "navbar-brand" }, { children: _jsxs("div", __assign({ style: {
+                                // backgroundColor: 'white',
+                                // borderRadius: '30%',
+                                width: "60px",
+                                height: "60px",
+                                marginRight: "10px",
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center"
+                            } }, { children: [_jsx("img", { src: siteLogo, alt: "Logo", style: { height: "30px", width: "65px" } }), " "] })) })), _jsx("button", __assign({ className: "navbar-toggler", type: "button", "data-bs-toggle": "collapse", "data-bs-target": "#navbarToggleExternalContent", "aria-controls": "navbarToggleExternalContent", "aria-expanded": "false", "aria-label": "Toggle navigation" }, { children: _jsx("span", { className: "navbar-toggler-icon" }) })), _jsxs("div", __assign({ className: "collapse navbar-collapse", id: "navbarToggleExternalContent" }, { children: [_jsx("ul", __assign({ className: "navbar-nav" }, { children: menuList.map(function (menuItem) {
+                                    return (_jsx("li", __assign({ className: "nav-item".concat(menuItem.title == menuSelect ? " active" : "") }, { children: _jsx("a", __assign({ className: "nav-link", style: { cursor: "pointer" }, onClick: function (event) {
+                                                switch (menuItem.title) {
+                                                    case "Bug Report":
+                                                        window.open(config.APP_BUG_REPORT);
+                                                        // window.location.href='https://github.com/cloudmrhub-com/mroptimum/issues';
+                                                        return;
+                                                }
+                                                event.preventDefault();
+                                                handleMenuChange(menuItem, navigate);
+                                            } }, { children: menuItem.title })) }), menuItem.path));
+                                }) })), authentication.logged_in_token && (_jsx("ul", __assign({ className: "navbar-nav ms-auto" }, { children: _jsxs("li", __assign({ className: "nav-item dropdown" }, { children: [_jsxs("button", __assign({ className: "nav-link  dropdown-toggle", type: "button", id: "dropdownMenuButton", "data-bs-toggle": "dropdown", "aria-expanded": "false" }, { children: [email, " ", _jsx("span", { className: "caret" })] })), _jsxs("ul", __assign({ className: "dropdown-menu", "aria-labelledby": "dropdownMenuButton" }, { children: [dropdownMenuItems.map(function (item, index) { return (_jsx("li", { children: _jsx("button", __assign({ className: "dropdown-item", onClick: function (event) {
+                                                            event.preventDefault();
+                                                            item.onClick();
+                                                        } }, { children: item.label })) }, index)); }), _jsx("li", { children: _jsx("button", __assign({ className: "dropdown-item", onClick: function (event) {
+                                                            event.preventDefault();
+                                                            handleLogout();
+                                                        } }, { children: "Logout" })) })] }))] })) })))] }))] })) })) })));
+};
+export default Header;

package/dist/CmrComponents/header/Header.scss

@@ -0,0 +1,32 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+  --bs-dark-rgb: 0, 0, 0; /* change these values to your preferred RGB color */
+}
+
+.navbar {
+  font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+.navbar .dropdown-toggle {
+  font-size: 14px;
+}
+
+.navbar .nav-link {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.small-margin{
+  margin-left: 25pt;
+  margin-right: 25pt;
+}
+
+.navbar-nav > .active > a {
+  color: white;
+  font-weight: 500;
+}
+
+.navbar-brand {
+  font-family: 'Inter', sans-serif;
+}

package/dist/CmrComponents/input-number/InputNumber.d.ts

@@ -0,0 +1,17 @@
+import React, { CSSProperties } from 'react';
+import './InputNumber.css';
+import { SizeType } from 'antd/lib/config-provider/SizeContext';
+interface CmrInputNumberProps {
+    defaultValue?: number;
+    disabled?: boolean;
+    keyboard?: boolean;
+    max?: number;
+    min?: number;
+    size?: SizeType;
+    value?: number;
+    onChange?: (value: number | null) => void;
+    children?: React.ReactNode;
+    style?: CSSProperties;
+}
+declare const CmrInputNumber: (props: CmrInputNumberProps) => import("react/jsx-runtime").JSX.Element;
+export default CmrInputNumber;

package/dist/CmrComponents/input-number/InputNumber.js

@@ -0,0 +1,30 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import './InputNumber.css';
+import { InputNumber } from 'antd';
+var CmrInputNumber = function (props) {
+    var defaultValue = props.defaultValue, style = props.style, max = props.max, min = props.min, value = props.value, onChange = props.onChange, children = props.children, rest = __rest(props, ["defaultValue", "style", "max", "min", "value", "onChange", "children"]);
+    return (_jsx(InputNumber, __assign({ defaultValue: defaultValue, max: max, style: style, min: min, value: value, onChange: onChange }, rest, { children: children })));
+};
+export default CmrInputNumber;

package/dist/CmrComponents/label/Label.css

@@ -0,0 +1,13 @@
+.cmr-label {
+    display: flex;
+    align-items: center;
+    font-style: normal;
+    font-weight: 400;
+    font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    padding-right: 10px;
+}
+
+.asterik {
+    color: red !important;
+    margin-left: 4px;
+}

package/dist/CmrComponents/label/Label.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./Label.css";
+interface CmrLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    marginLeft?: number;
+    required?: boolean;
+    children?: any;
+}
+declare const CmrLabel: (props: CmrLabelProps) => import("react/jsx-runtime").JSX.Element;
+export default CmrLabel;

package/dist/CmrComponents/label/Label.js

@@ -0,0 +1,18 @@
+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 "./Label.css";
+var CmrLabel = function (props) {
+    var children = props.children, _a = props.required, required = _a === void 0 ? false : _a;
+    return (_jsxs("label", __assign({ className: "cmr-label", style: __assign({ marginLeft: props.marginLeft, fontSize: "16px" }, props.style) }, { children: [children, required && _jsx("span", __assign({ className: "asterik" }, { children: "*" }))] })));
+};
+export default CmrLabel;

package/dist/CmrComponents/panel/Panel.css

@@ -0,0 +1,5 @@
+/* .no-underline {
+    border-bottom: none;
+    border: none !important;
+
+} */

package/dist/CmrComponents/panel/Panel.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+interface CmrPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    activeKey?: string | string[];
+    header: string | undefined;
+    children: ReactNode;
+    panelKey?: number;
+    onToggle?: (key: number | undefined) => void;
+    expanded?: boolean;
+    cardProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+declare const CmrPanel: (props: CmrPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default CmrPanel;

package/dist/CmrComponents/panel/Panel.js

@@ -0,0 +1,42 @@
+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 ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+var CmrPanel = function (props) {
+    var _a, _b;
+    var expanded = props.expanded, onToggle = props.onToggle;
+    var toggle = function () {
+        if (onToggle)
+            onToggle(props.panelKey);
+    };
+    return (_jsxs("div", __assign({ className: "card ".concat(props.className) }, { children: [_jsx("div", __assign({ className: "card-header", style: {
+                    background: "white",
+                    display: props.header == undefined ? "none" : undefined
+                } }, { children: _jsxs("div", __assign({ className: "row align-items-center" }, { children: [_jsx("div", __assign({ className: "col" }, { children: props.header })), onToggle && (_jsx("div", __assign({ className: "col text-end" }, { children: _jsx("span", __assign({ className: "react-collapse float-end btn", onClick: function (e) {
+                                    toggle();
+                                } }, { children: !expanded ? (_jsx(ArrowDropDownIcon, {})) : (_jsx(ArrowDropUpIcon, {})) })) })))] })) })), !expanded ? (_jsx("div", __assign({ className: "card-body m-0 ".concat(((_a = props.cardProps) === null || _a === void 0 ? void 0 : _a.className) || ""), style: {
+                    maxHeight: "0",
+                    padding: 0,
+                    opacity: "0",
+                    overflow: "hidden",
+                    visibility: "collapse",
+                    transition: "all 0.5s"
+                } }, { children: props.children }))) : (_jsx("div", __assign({ className: "card-body m-4 ".concat(((_b = props.cardProps) === null || _b === void 0 ? void 0 : _b.className) || ""), style: {
+                    maxHeight: undefined,
+                    padding: 0,
+                    opacity: "1",
+                    visibility: "visible",
+                    transition: "all 0.5s"
+                } }, { children: props.children })))] })));
+};
+export default CmrPanel;

package/dist/CmrComponents/rename/edit.d.ts

@@ -0,0 +1,7 @@
+export default function CmrNameDialog(props: {
+    originalName: string;
+    renamingCallback: (alias: string, isDemoData?: boolean) => Promise<boolean>;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    isDemoData?: boolean;
+}): import("react/jsx-runtime").JSX.Element;