@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/base/TMPanel.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Gestione TMPanel "attivo / non attivo" secondo una pattern ibrido (Controlled/Uncontrolled Component):
+1) Modalità Non Controllata (Uncontrolled): Se non gli viene passata la prop "isActive", il pannello gestisce lo stato "attivo" internamente. Per l'uso singolo ("plug-and-play").
+2) Modalità Controllata (Controlled): Se il genitore passa la prop "isActive", il pannello cede il controllo e si affida completamente al genitore. Ideale per layout con più pannelli che necessitano di coordinamento.
+*/
+import { useCallback, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import styled from 'styled-components';
+import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
+import TMButton from './TMButton';
+import { Gutters } from '../../utils/theme';
+const StyledPanelContainer = styled.div `
+    width: 100%;
+    height: 100%;
+    font-size: 1rem;
+    box-shadow: 3px 3px 5px #D3D3D3BF;
+    border-radius: 10px;
+    opacity: 1;
+    background: #FFFFFF;
+    min-height: 0; 
+    overflow: hidden;
+    position: ${({ $isMaximized }) => $isMaximized ? 'fixed' : 'relative'};
+    top: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
+    left: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
+    width: ${({ $isMaximized }) => $isMaximized ? `calc(100vw - 50px - (${Gutters.getGutters()}px * 2))` : '100%'};
+    height: ${({ $isMaximized }) => $isMaximized ? `calc(100vh - 50px - (${Gutters.getGutters()}px * 2))` : '100%'};
+    z-index: ${({ $isMaximized }) => $isMaximized ? 2000 : 'auto'};
+    margin: ${({ $isMaximized }) => $isMaximized ? `${Gutters.getGutters()}px` : '0'};
+    /* transition: all 0.2s; */
+`;
+const StyledPanelHeader = styled.div `
+    width:100% ;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 4px 10px;
+    background: ${({ $isActive, $backgroundColor }) => $isActive
+    ? 'linear-gradient(270deg, #46B5A2 16%, #3BAABC 34%, #3BAABC 34%, #3681AD 54%, #3368A5 72%, #2F549D 88%, #304F99 100%)'
+    : ($backgroundColor ?? '#F4F4F4')};
+    box-shadow: 3px 3px 5px #D3D3D3BF;
+    color: ${({ $isActive, $color }) => $isActive ? '#FFFFFF' : ($color ?? '#2559A5')};
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    height: 40px;
+    font-weight: 600;
+    outline: none;
+    &:focus {
+        outline: none;
+    }
+    // Ensure all children inherit the header color
+    &,
+    * {
+        color: ${({ $isActive, $color }) => $isActive ? '#FFFFFF' : ($color ?? '#2559A5')} !important;
+    }
+`;
+const StyledPanelContent = styled.div `
+    width: 100%;
+    height: ${props => props.$height};
+    min-height: 0; 
+    overflow: hidden;
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    padding: ${props => props.$padding};
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    user-select: none;
+    outline: none;
+    &:focus {
+        outline: none;
+    }
+`;
+const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, panelID = 'tmpanel', isActive, // Questa prop determinerà la modalità
+onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }, ref) => {
+    const [isMaximized, setIsMaximized] = useState(false);
+    // INTERNAL STATUS for UNCONTROLLED mode
+    const [internalIsActive, setInternalIsActive] = useState(false);
+    const panelRef = useRef(null);
+    // If `isActive` prop is passed (it is not undefined), the component is checked.
+    const isControlled = isActive !== undefined;
+    // Use parent state if checked, otherwise use internal state.
+    const currentIsActive = isControlled ? isActive : internalIsActive;
+    // Focus/blur management logic for UNCONTROLLED mode
+    const pendingFocusCheck = useRef(null);
+    // Espone i metodi imperativi tramite useImperativeHandle
+    useImperativeHandle(ref, () => ({
+        focusPanel: () => {
+            // Imposta il focus sul div StyledPanelContent
+            panelRef.current?.focus();
+        },
+    }));
+    const handleFocusUncontrolled = useCallback(() => {
+        if (pendingFocusCheck.current) {
+            clearTimeout(pendingFocusCheck.current);
+            pendingFocusCheck.current = null;
+        }
+        if (!internalIsActive) {
+            setInternalIsActive(true);
+            onActiveChanged?.(true);
+        }
+    }, [internalIsActive, onActiveChanged]);
+    const handleBlurUncontrolled = useCallback(() => {
+        if (pendingFocusCheck.current) {
+            clearTimeout(pendingFocusCheck.current);
+        }
+        pendingFocusCheck.current = setTimeout(() => {
+            if (panelRef.current && !panelRef.current.contains(document.activeElement)) {
+                setInternalIsActive(false);
+                onActiveChanged?.(false);
+            }
+        }, 50);
+    }, [onActiveChanged]);
+    const handleActivation = () => {
+        if (isControlled) {
+            // In modalità controllata, notifica il genitore.
+            // Il genitore sarà responsabile di aggiornare la prop `isActive`.
+            onActivate?.(panelID);
+        }
+        else {
+            // In modalità non controllata, gestisci internamente.
+            handleFocusUncontrolled();
+        }
+    };
+    // handler for external maximize management
+    const handleMaximize = () => {
+        setIsMaximized(prevState => {
+            const newValue = !prevState;
+            if (onMaximize) {
+                onMaximize(newValue);
+            }
+            return newValue;
+        });
+    };
+    return (_jsxs(StyledPanelContainer, { ref: panelRef, "$isMaximized": onMaximize ? false : isMaximized, style: {
+            visibility: isVisible ? 'visible' : 'hidden',
+        }, tabIndex: -1, onFocus: !isControlled ? handleFocusUncontrolled : undefined, onBlur: !isControlled ? handleBlurUncontrolled : undefined, onClick: handleActivation, children: [showHeader &&
+                _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": currentIsActive, onDoubleClick: () => {
+                        if (onHeaderDoubleClick)
+                            onHeaderDoubleClick();
+                        else
+                            allowMaximize && handleMaximize();
+                    }, children: _jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            width: '100%',
+                            minWidth: 0
+                        }, children: [_jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: '8px',
+                                    flex: 1,
+                                    minWidth: 0
+                                }, children: [onBack &&
+                                        _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconArrowLeft, {}), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            overflow: 'hidden',
+                                        }, children: _jsxs("p", { style: {
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                margin: 0
+                                            }, children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
+                                                    ? ` (${displayedItemsCount} / ${totalItems})`
+                                                    : isPositiveNumber(totalItems)
+                                                        ? ` (${totalItems})`
+                                                        : ''] }) })] }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: '5px',
+                                    flexShrink: 0,
+                                    marginLeft: 10
+                                }, children: [toolbar, allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
+                                            ? _jsx(IconWindowMinimize, { fontSize: 16 })
+                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsx(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, children: children })] }));
+});
+export default TMPanel;

package/lib/components/base/TMPopUp.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export declare enum ButtonNames {
+    YES = "Yes",
+    NO = "No",
+    OK = "OK",
+    CANCEL = "Cancel"
+}
+interface ITMPopup {
+    title?: string;
+    resizable?: boolean;
+}
+interface ITMMessageBox extends ITMPopup {
+    buttons?: ButtonNames[];
+    message?: string | React.ReactNode;
+    onButtonClick?: (e: ButtonNames) => void;
+    parentId?: string;
+    onClose?: () => void;
+    confirmOnEnter?: boolean;
+    showToppy?: boolean;
+    initialWidth?: string;
+    initialHeight?: string;
+}
+interface ITMExceptionBox extends ITMPopup {
+    exception?: any;
+    onClose?: () => void;
+}
+declare class TMExceptionBoxManager {
+    static show({ title, exception, onClose }: ITMExceptionBox): void;
+}
+declare class TMMessageBoxManager {
+    static show({ title, buttons, onButtonClick, message, parentId, resizable, onClose, confirmOnEnter, showToppy, initialHeight, initialWidth }: ITMMessageBox): void;
+}
+export { TMExceptionBoxManager, TMMessageBoxManager };

package/lib/components/base/TMPopUp.js

@@ -0,0 +1,280 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import TMButton from './TMButton';
+import { SDKUI_Localizator, calcResponsiveSizes, getExceptionMessage } from '../../helper';
+import styled from 'styled-components';
+import toppy from '../../assets/Toppy-generico.png';
+import { TMColors } from '../../utils/theme';
+import ShowAlert from './TMAlert';
+import { IconCopy } from '../../helper';
+import ReactDOM from 'react-dom/client';
+import { SDK_Globals } from '@topconsultnpm/sdk-ts';
+import TMLayoutContainer, { TMLayoutItem } from './TMLayout';
+import { Popup } from 'devextreme-react';
+import TMTabGroup, { TMTab } from './TMTab';
+import { DeviceType, TMDeviceProvider, useDeviceType } from './TMDeviceProvider';
+export var ButtonNames;
+(function (ButtonNames) {
+    ButtonNames["YES"] = "Yes";
+    ButtonNames["NO"] = "No";
+    ButtonNames["OK"] = "OK";
+    ButtonNames["CANCEL"] = "Cancel";
+})(ButtonNames || (ButtonNames = {}));
+const StyledExeptionToolbar = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    padding: 5px;
+    user-select: none;
+    border-top: 1px solid #f3f3f3;
+    /* background-color: ${TMColors.primary_container}; */
+    background-color: white;
+`;
+const StyledMessageToolbar = styled.div `
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: clamp(2px, 1vw, 5px);
+    padding: clamp(3px, 1vw, 5px);
+    user-select: none;
+    border-top: 1px solid #f3f3f3;
+    background-color: #ffffff;
+    z-index: 100;
+    flex-wrap: wrap;
+    
+    @media (max-width: 200px) {
+        flex-direction: column;
+        gap: 2px;
+        padding: 3px;
+        justify-content: center;
+    }
+    
+    @media (max-width: 150px) {
+        padding: 2px;
+        gap: 1px;
+    }
+`;
+const TabContextContainer = styled.div `
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+    border-radius: 5px;
+    overflow: auto;
+    user-select: none;
+    position: relative;
+`;
+const StyledAppVersionText = styled.p `
+    width: '200px'; 
+    display: 'flex';
+    flex-direction: row; 
+    justify-content: space-between; 
+    align-items: center; 
+    color: ${props => props.$color};
+`;
+const StyledCopyInclipBoardButtonContainer = styled.div `
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+`;
+const Message = ({ msg }) => {
+    let wrapper = document.createElement('div');
+    wrapper.innerHTML = msg;
+    const containerRef = useRef(null);
+    useEffect(() => {
+        containerRef.current?.appendChild(wrapper);
+    }, []);
+    return (_jsx("div", { ref: containerRef }));
+};
+const ResponsiveMessageContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: #ffffff;
+`;
+const ResponsiveMessageContent = styled.div `
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: clamp(8px, 2vw, 20px);
+    padding: clamp(8px, 3vw, 25px) clamp(5px, 2vw, 30px);
+    min-height: clamp(80px, 15vh, 120px);
+    
+    @media (min-width: 300px) {
+        flex-direction: ${props => props.$isMobile ? 'column' : 'row'};
+    }
+    
+    @media (max-width: 200px) {
+        padding: 5px;
+        gap: 5px;
+        min-height: 60px;
+    }
+`;
+const ResponsiveToppyImage = styled.img `
+    width: clamp(25px, 8vw, 60px);
+    height: clamp(31px, 10vw, 75px);
+    flex-shrink: 0;
+    transform: ${props => props.$isMobile ? 'none' : 'translateY(8px)'};
+    
+    @media (max-width: 200px) {
+        width: 20px;
+        height: 25px;
+        transform: none;
+    }
+    
+    @media (min-width: 300px) {
+        transform: ${props => props.$isMobile ? 'none' : 'translateY(8px)'};
+    }
+`;
+const ResponsiveMessageText = styled.div `
+    flex: 1;
+    text-align: center;
+    font-size: clamp(12px, 2.5vw, 14px);
+    line-height: clamp(1.2, 1.4, 1.4);
+    color: #333;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    min-width: 0;
+    
+    @media (min-width: 300px) {
+        text-align: ${props => props.$isMobile ? 'center' : 'left'};
+    }
+    
+    @media (max-width: 150px) {
+        font-size: 8px;
+        line-height: 1.1;
+    }
+`;
+const ResponsiveButton = styled(TMButton) `
+    font-size: ${props => props.fontSize || 'clamp(12px, 2vw, 1.1rem)'} !important;
+    padding: clamp(2px, 1vw, 8px) clamp(4px, 2vw, 12px) !important;
+    min-width: clamp(30px, 10vw, 60px) !important;
+    white-space: nowrap !important;
+    
+    @media (max-width: 200px) {
+        padding: 2px 4px !important;
+        min-width: 25px !important;
+        font-size: 8px !important;
+    }
+    
+    @media (max-width: 150px) {
+        padding: 1px 3px !important;
+        min-width: 20px !important;
+        font-size: 7px !important;
+    }
+`;
+const ResponsiveMessageBody = ({ message, isMobile, MessageToolbar, showToppy }) => {
+    return (_jsxs(ResponsiveMessageContainer, { children: [_jsxs(ResponsiveMessageContent, { "$isMobile": isMobile, children: [showToppy && _jsx(ResponsiveToppyImage, { "$isMobile": isMobile, src: toppy, alt: "Toppy" }), _jsx(ResponsiveMessageText, { "$isMobile": isMobile, children: typeof message === 'string' ? _jsx(Message, { msg: message }) : message })] }), _jsx(MessageToolbar, {})] }));
+};
+const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', message = '', buttons, onClose, confirmOnEnter = false, showToppy = true, initialWidth = 'clamp(100px, 90vw, 400px)', initialHeight = 'auto' }) => {
+    let deviceType = useDeviceType();
+    const isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const [width, setWidth] = useState(initialWidth);
+    const [height, setHeight] = useState(initialHeight);
+    const [isVisible, setIsVisible] = useState(true);
+    const [btns, setBtns] = useState(buttons || []);
+    useEffect(() => {
+        let arr = [];
+        if (buttons) {
+            for (let button of buttons) {
+                arr.push(button);
+            }
+            setBtns(arr);
+        }
+    }, [buttons]);
+    const handleKeyDown = useCallback((e) => {
+        if (confirmOnEnter && e.key === 'Enter') {
+            e.preventDefault();
+            if (btns.includes(ButtonNames.YES)) {
+                onButtonClick?.(ButtonNames.YES);
+                setIsVisible(false);
+            }
+        }
+    }, [confirmOnEnter, btns, onButtonClick]);
+    useEffect(() => {
+        if (!confirmOnEnter)
+            return;
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [confirmOnEnter, handleKeyDown]);
+    const MessageToolbar = () => {
+        return (_jsxs(StyledMessageToolbar, { children: [(btns.includes(ButtonNames.OK) || btns.includes(ButtonNames.YES)) &&
+                    _jsx(ResponsiveButton, { fontSize: 'clamp(12px, 2vw, 1.1rem)', color: 'primaryOutline', btnStyle: 'text', onClick: () => {
+                            onButtonClick && btns.includes(ButtonNames.YES) ? onButtonClick(ButtonNames.YES) : onButtonClick && onButtonClick(ButtonNames.OK);
+                            setIsVisible(false);
+                        }, caption: btns.includes(ButtonNames.YES) ? SDKUI_Localizator.Yes : 'OK', showTooltip: false }), btns.includes(ButtonNames.NO) &&
+                    _jsx(ResponsiveButton, { fontSize: 'clamp(12px, 2vw, 1.1rem)', btnStyle: 'text', onClick: () => {
+                            onButtonClick && onButtonClick(ButtonNames.NO);
+                            setIsVisible(false);
+                        }, caption: SDKUI_Localizator.No, showTooltip: false, color: 'error' }), btns.includes(ButtonNames.CANCEL) &&
+                    _jsx(ResponsiveButton, { fontSize: 'clamp(12px, 2vw, 1.1rem)', btnStyle: 'text', onClick: () => {
+                            onButtonClick && onButtonClick(ButtonNames.CANCEL);
+                            setIsVisible(false);
+                        }, caption: SDKUI_Localizator.Cancel, showTooltip: false, color: 'error' })] }));
+    };
+    const handleResizeEnd = (e) => {
+        setWidth(e.width.toString());
+        setHeight(e.height.toString());
+    };
+    return (_jsx(Popup, { animation: undefined, visible: isVisible, showCloseButton: true, width: width, height: height, minHeight: 'clamp(100px, 20vh, 180px)', title: title, onHidden: () => { onClose?.(); setIsVisible(false); }, resizeEnabled: resizable, onResizeEnd: handleResizeEnd, wrapperAttr: { id: 'tm-messagebox-wrapper' }, onShown: () => {
+            const el = document.getElementById('tm-messagebox-wrapper');
+            if (el)
+                el.style.zIndex = '20000';
+        }, children: _jsx(ResponsiveMessageBody, { message: message, isMobile: isMobile, MessageToolbar: MessageToolbar, showToppy: showToppy }) }));
+};
+const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.appModule} v. ${SDK_Globals.appVersion}`, onClose }) => {
+    const [isVisible, setIsVisible] = useState(true);
+    let d = new Date();
+    let dateString = d.getDate() + '/' + d.getMonth() + 1 + '/' + d.getFullYear();
+    let timeString = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ':' + d.getMilliseconds();
+    let message = getExceptionMessage(exception);
+    let deviceType = useDeviceType();
+    const getFullMessage = () => {
+        let fullMessage = '';
+        fullMessage += `${d}\n${'-' + JSON.stringify(exception)}\n` + `-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`;
+        return fullMessage.replaceAll('{', '').replaceAll('}', '').replaceAll(`":`, '=').replaceAll(`,"`, '\n').replaceAll(`"`, '');
+    };
+    const copyToClipBoard = (e) => {
+        navigator.clipboard.writeText(e);
+        ShowAlert({ mode: 'success', duration: 3000, message: SDKUI_Localizator.CopiedSuccessfully, title: 'Success' });
+    };
+    const ExceptionToolbar = () => {
+        return (_jsxs(StyledExeptionToolbar, { children: [_jsx(TMButton, { color: 'primaryOutline', btnStyle: 'text', onClick: () => copyToClipBoard(getFullMessage()), caption: SDKUI_Localizator.CopyToClipboard, showTooltip: false }), _jsx(TMButton, { btnStyle: 'text', onClick: () => { onClose?.(); setIsVisible(false); }, caption: SDKUI_Localizator.Close, showTooltip: false, color: 'error' })] }));
+    };
+    return (_jsx(Popup, { resizeEnabled: resizable, visible: isVisible, onHidden: () => { onClose?.(); setIsVisible(false); }, showCloseButton: true, width: calcResponsiveSizes(deviceType, '600px', '400px', '350px'), height: '350px', title: title, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsxs(TMTabGroup, { validationItems: [], children: [_jsxs(TMTab, { label: SDKUI_Localizator.Error, children: [_jsxs(TabContextContainer, { style: { height: 'calc(100% - 68px )', paddingRight: '40px' }, children: [_jsxs("p", { children: [" ", _jsx("span", { style: { color: TMColors.primary }, children: "Messaggio: " }), " ", message] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: '5px', marginTop: '5px' }, children: _jsxs("div", { children: [_jsxs("span", { style: { color: TMColors.primary }, children: [SDKUI_Localizator.Date, "  ", SDKUI_Localizator.Time.toLowerCase(), ": "] }), d.toString()] }) })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`Date: ${dateString}\nTime: ${timeString}\nMessage: ${message}`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.CompleteError, children: [_jsx(TabContextContainer, { style: { paddingRight: '40px' }, children: JSON.stringify(exception).replaceAll('{', '').replaceAll('}', '').split(`,"`).map((t, index) => (_jsxs("div", { style: { padding: '5px', borderBottom: '1px solid rgb(180,180,180)' }, children: ["\u261B", ' ' + (t.toLowerCase().includes('detail') ? (t.replaceAll(`"`, '').replaceAll(`:`, ': ').replaceAll(String.fromCharCode(92), '')) : (t.replaceAll(`"`, '').replaceAll(`:`, ': ')))] }, index))) }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(JSON.stringify(exception).replaceAll('{', '').replaceAll('}', '').replaceAll(',', '\n')), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.Details, children: [_jsxs(TabContextContainer, { children: [_jsxs(StyledAppVersionText, { "$color": TMColors.primary, children: [SDK_Globals.appModule, " ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.appVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.tertiary, children: ["SDKUI: ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkuiVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.success, children: ["SDK : ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkVersion })] })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] })] }) }), _jsx(TMLayoutItem, { height: '40px', children: _jsx(ExceptionToolbar, {}) })] }) }));
+};
+class TMExceptionBoxManager {
+    static show({ title, exception, onClose }) {
+        let container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = ReactDOM.createRoot(container);
+        root.render(_jsx(TMDeviceProvider, { children: React.createElement(TMExceptionBox, { title: title, exception: exception, onClose: onClose }) }));
+    }
+}
+class TMMessageBoxManager {
+    static show({ title, buttons, onButtonClick, message, parentId, resizable, onClose, confirmOnEnter = false, showToppy = true, initialHeight, initialWidth }) {
+        let container = document.createElement('div');
+        if (parentId) {
+            const parent = document.getElementById(parentId);
+            if (parent) {
+                parent.appendChild(container);
+            }
+            else {
+                document.body.appendChild(container);
+            }
+        }
+        else {
+            document.body.appendChild(container);
+        }
+        const root = ReactDOM.createRoot(container);
+        root.render(_jsx(TMDeviceProvider, { children: React.createElement(TMMessageBox, { title, buttons, onButtonClick, message, resizable, onClose, confirmOnEnter, showToppy, initialHeight, initialWidth }) }));
+    }
+}
+export { TMExceptionBoxManager, TMMessageBoxManager };

package/lib/components/base/TMProgressBar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ITMEditorBase } from './TMEditorBase';
+import { Colors } from '../../utils/theme';
+interface ITMProgressBar extends ITMEditorBase {
+    startValue?: number;
+    currentValue?: number;
+    color?: Colors;
+    onAbort?: () => void;
+}
+declare const TMProgressBar: React.FC<ITMProgressBar>;
+export default TMProgressBar;

package/lib/components/base/TMProgressBar.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { getColor } from '../../helper';
+import { Colors } from '../../utils/theme';
+const StyledWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    width: fit-content;
+`;
+const StyledProgressBarContainer = styled.div `
+    width: 200px;
+    background-color: white;
+    height: 12px;
+    border-radius: 5px;
+    border: 1px solid ${props => getColor(props.color)};
+    overflow: hidden;
+`;
+const StyledProgressBar = styled.div.withConfig({ shouldForwardProp: prop => !['currentValue'].includes(prop) }) `
+    width: ${props => `${200 * props.currentValue}px`};
+    background: rgb(2,0,36);
+    background: linear-gradient(270deg, ${Colors.primary} 0%, ${Colors.primary} 35%, ${Colors.secondary});
+    height: 12px;
+    border-radius: 5px;
+    /* border: 1px solid ${props => getColor(props.color)}; */
+`;
+const TMProgressBar = ({ currentValue = 0, color = 'primary', elementStyle, onAbort }) => {
+    // console.log(currentValue)
+    return (_jsx("div", { style: elementStyle, children: _jsx(StyledWrapper, { children: _jsx(StyledProgressBarContainer, { color: color, children: _jsx(StyledProgressBar, { color: color, currentValue: currentValue }) }) }) }));
+};
+export default TMProgressBar;

package/lib/components/base/TMResizableMenu.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+type TMResizableMenuProps = {
+    isVisible: boolean;
+    top?: number;
+    left?: number;
+    bottom?: number;
+    right?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    minWidth?: number;
+    minHeight?: number;
+    children?: React.ReactNode;
+    resizable?: boolean;
+    ignoreRefs?: React.RefObject<HTMLElement>[];
+    padding?: number;
+    onClose?: () => void;
+    onResizeing?: (isResizing: boolean) => void;
+};
+export declare const TMResizableMenu: React.ForwardRefExoticComponent<TMResizableMenuProps & React.RefAttributes<HTMLDivElement>>;
+export default TMResizableMenu;

package/lib/components/base/TMResizableMenu.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
+import styled from 'styled-components';
+import { createPortal } from 'react-dom';
+const DEFAULT_WIDTH = 550;
+const DEFAULT_HEIGHT = window.innerHeight - 150;
+export const TMResizableMenu = forwardRef(({ isVisible, onClose, top, left, bottom, right, maxWidth, maxHeight, padding, children, minHeight, minWidth, resizable = true, ignoreRefs = [], onResizeing, }, ref) => {
+    const [width, setWidth] = useState(minWidth ?? DEFAULT_WIDTH);
+    const [height, setHeight] = useState(minHeight ?? DEFAULT_HEIGHT);
+    const [isResizing, setIsResizing] = useState(false);
+    const isResizingRef = useRef(false);
+    const menuRef = useRef(null);
+    const portalRoot = document.getElementById('portal-root') || (() => {
+        const el = document.createElement('div');
+        el.id = 'portal-root';
+        document.body.appendChild(el);
+        return el;
+    })();
+    useImperativeHandle(ref, () => menuRef.current);
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (!isResizingRef.current || !menuRef.current)
+                return;
+            const rect = menuRef.current.getBoundingClientRect();
+            const newWidth = Math.min(e.clientX - rect.left, maxWidth ?? Infinity);
+            const newHeight = Math.min(e.clientY - rect.top, maxHeight ?? Infinity);
+            setWidth(Math.max(150, newWidth));
+            setHeight(Math.max(150, newHeight));
+        };
+        const handleMouseUp = () => {
+            isResizingRef.current = false;
+            setIsResizing(false);
+            onResizeing?.(false);
+            document.body.style.pointerEvents = 'auto';
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [maxWidth, maxHeight]);
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (isResizing)
+                return;
+            const insideMenu = menuRef.current && menuRef.current.contains(e.target); //nosonar
+            const insideIgnored = ignoreRefs?.some(ref => ref.current && ref.current.contains(e.target)); //nosonar
+            if (!insideMenu && !insideIgnored) {
+                onClose?.();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [onClose]);
+    const menuContent = (_jsxs(_Fragment, { children: [_jsxs(MenuContainer, { ref: menuRef, "$display": isVisible ? 'block' : 'none', style: { top, left, bottom, right, width, height, position: 'fixed' }, "$maxWidth": maxWidth, "$maxHeight": maxHeight, "$minHeight": minHeight, "$minWidth": minWidth, "$padding": padding, children: [children, resizable && _jsx(ResizeHandle, { onMouseDown: (e) => {
+                            e.preventDefault();
+                            document.body.style.pointerEvents = 'none';
+                            isResizingRef.current = true;
+                            setIsResizing(true);
+                            onResizeing?.(true);
+                        } })] }), isResizing && _jsx(ResizeOverlay, {})] }));
+    return createPortal(menuContent, portalRoot);
+});
+export default TMResizableMenu;
+const MenuContainer = styled.div `
+  position: absolute;
+  display: ${({ $display }) => $display};
+  background-color: white;
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  overflow: auto;
+  max-width: ${({ $maxWidth }) => ($maxWidth ? `${$maxWidth}px` : 'none')};
+  max-height: ${({ $maxHeight }) => ($maxHeight ? `${$maxHeight}px` : 'none')};
+  border-radius: 6px;
+  padding: ${({ $padding }) => ($padding !== undefined ? `${$padding}px` : '16px')};
+  z-index: 1532;
+  min-width: ${({ $minWidth }) => `${$minWidth ?? 350}px`};
+  min-height: ${({ $minHeight }) => `${$minHeight ?? 500}px`};
+`;
+const ResizeHandle = styled.div `
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  right: 0;
+  bottom: 0;
+  cursor: se-resize;
+  background: linear-gradient(135deg, transparent 40%, #ccc 40%, #ccc 60%, transparent 60%);
+`;
+const ResizeOverlay = styled.div `
+  position: fixed;
+  inset: 0;
+  z-index: 1531;
+  pointer-events: all; 
+  cursor: se-resize;
+`;