@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

package/lib/components/base/TMPanel.js

@@ -1,181 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,336 +0,0 @@
-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 = {}));
-// Dimensioni minime di default per i popup
-const DEFAULT_MIN_WIDTH = 500;
-const DEFAULT_MIN_HEIGHT = 400;
-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: sticky;
-    bottom: 0;
-    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: 1;
-    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;
-    overflow: hidden;
-`;
-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);
-    overflow: auto;
-    
-    @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;
-    }
-`;
-// ResponsiveButton wrapper component to avoid circular dependency
-const ResponsiveButton = (props) => {
-    const { fontSize: customFontSize, ...otherProps } = props;
-    return _jsx(TMButton, { fontSize: customFontSize || 'clamp(12px, 2vw, 1.1rem)', padding: "clamp(2px, 1vw, 8px) clamp(4px, 2vw, 12px)", width: "clamp(30px, 10vw, 60px)", ...otherProps });
-};
-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 popupRef = useRef(null);
-    const [width, setWidth] = useState(initialWidth);
-    const [height, setHeight] = useState(initialHeight);
-    const [minWidth, setMinWidth] = useState(0);
-    const [minHeight, setMinHeight] = useState(0);
-    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]);
-    /**
-     * Gestore chiamato quando il popup viene mostrato.
-     * Calcola e imposta le dimensioni minime del popup in base allo spazio disponibile.
-     * Le dimensioni minime sono il valore più piccolo tra le dimensioni effettive del parent e le dimensioni minime di default
-     */
-    const handleShown = () => {
-        // Usa requestAnimationFrame per attendere il completamento del rendering
-        requestAnimationFrame(() => {
-            if (popupRef.current && popupRef.current.instance) {
-                const instance = popupRef.current.instance();
-                if (instance) {
-                    // Ottiene l'elemento content del popup
-                    const element = instance.content();
-                    if (element) {
-                        const parentElement = element.parentElement;
-                        if (parentElement) {
-                            // Legge le dimensioni effettive del contenitore parent
-                            const widthPx = parentElement.offsetWidth;
-                            const heightPx = parentElement.offsetHeight;
-                            // Imposta le dimensioni minime usando il valore più piccolo tra le dimensioni disponibili e quelle di default
-                            setMinWidth(widthPx < DEFAULT_MIN_WIDTH ? widthPx : DEFAULT_MIN_WIDTH);
-                            setMinHeight(heightPx < DEFAULT_MIN_HEIGHT ? heightPx : DEFAULT_MIN_HEIGHT);
-                        }
-                    }
-                }
-            }
-        });
-    };
-    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, { ref: popupRef, animation: undefined, visible: isVisible, showCloseButton: true, width: width, height: height, minWidth: minWidth, minHeight: minHeight || 'clamp(100px, 20vh, 180px)', maxHeight: '95%', maxWidth: '95%', title: title, onHidden: () => { onClose?.(); setIsVisible(false); }, resizeEnabled: resizable, onShown: () => {
-            handleShown();
-            const el = document.getElementById('tm-messagebox-wrapper');
-            if (el)
-                el.style.zIndex = '20000';
-        }, onResizeEnd: handleResizeEnd, wrapperAttr: { id: 'tm-messagebox-wrapper' }, 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 popupRef = useRef(null);
-    const [isVisible, setIsVisible] = useState(true);
-    const [minWidth, setMinWidth] = useState(0);
-    const [minHeight, setMinHeight] = useState(0);
-    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();
-    /**
-     * Gestore chiamato quando il popup viene mostrato.
-     * Calcola e imposta le dimensioni minime del popup in base allo spazio disponibile.
-     * Le dimensioni minime sono il valore più piccolo tra le dimensioni effettive del parent e le dimensioni minime di default
-     */
-    const handleShown = () => {
-        // Usa requestAnimationFrame per attendere il completamento del rendering
-        requestAnimationFrame(() => {
-            if (popupRef.current && popupRef.current.instance) {
-                const instance = popupRef.current.instance();
-                if (instance) {
-                    // Ottiene l'elemento content del popup
-                    const element = instance.content();
-                    if (element) {
-                        const parentElement = element.parentElement;
-                        if (parentElement) {
-                            // Legge le dimensioni effettive del contenitore parent
-                            const widthPx = parentElement.offsetWidth;
-                            const heightPx = parentElement.offsetHeight;
-                            // Imposta le dimensioni minime usando il valore più piccolo tra le dimensioni disponibili e quelle di default
-                            setMinWidth(widthPx < DEFAULT_MIN_WIDTH ? widthPx : DEFAULT_MIN_WIDTH);
-                            setMinHeight(heightPx < DEFAULT_MIN_HEIGHT ? heightPx : DEFAULT_MIN_HEIGHT);
-                        }
-                    }
-                }
-            }
-        });
-    };
-    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, { ref: popupRef, resizeEnabled: resizable, visible: isVisible, onHidden: () => { onClose?.(); setIsVisible(false); }, onShown: handleShown, showCloseButton: true, width: calcResponsiveSizes(deviceType, '600px', '400px', '350px'), height: '350px', minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', 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

@@ -1,11 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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;