@topconsultnpm/sdkui-react-beta 6.5.51

package/lib/components/base/TMListView.js

@@ -0,0 +1,321 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Colors, FontSize } from '../../utils/theme';
+import { getColor } from '../../helper/helpers';
+import { IconCloseCircle, IconDown, IconInsertAbove, IconInsertBelow, IconSearch, IconUp } from '../../helper';
+const StyledContainer = styled.div `
+    z-index: -1;
+    border: 1px solid;
+    border-color: ${props => getColor(props.$color)} ;
+    overflow: auto;
+    max-height: ${props => props.$maxHight};
+`;
+const StyledListViewWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    font-size: ${props => props.$fontSize} ;
+`;
+const StyledListItemContainer = styled.div `
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    background-color: ${props => !props.$isSelected ? props.$index % 2 === 0 ? 'white' : Colors.colore_sul_primary : Colors.secondary};
+    font-size: ${props => props.$fontSize};
+    color: ${props => !props.$isSelected ? Colors.primary : 'white'};
+    z-index: 1;
+`;
+const StyledLsitItemCheck = styled.input `
+    margin-right: 5px;
+    cursor: pointer;
+`;
+const StyledListItem = styled.li `
+    padding: 3px;
+    list-style: none;
+    text-decoration: none;
+    color: ${props => props.$color};
+`;
+const StyledListViewItemDetails = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 5px;
+    background-color: ${Colors.contenitore_su_colore_primary};
+    color: white;
+    width: 100%;
+`;
+const StyledDetailsToggleButton = styled.button `
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    color: ${props => props.$isSelected ? 'white' : Colors.primary};
+`;
+const StyledListViewSearchContainer = styled.div `
+    position: sticky;
+    padding: 5px;
+    top: 0px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding-bottom: 5px;
+    border-bottom: 1px solid ${props => getColor(props.$color)};
+    background-color: ${props => getColor(props.$color)};
+    z-index: 100;
+`;
+const StyledSelectOptionCheckBox = styled.input `
+    margin-right: 5px;
+    margin-left: 2px;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+`;
+const StyledListViewSearchInput = styled.input `
+    width: 100%;
+    padding: 3px 10px;
+    border-radius: 5px;
+    border-width: 1px ;
+    border-color: ${props => getColor(props.$color)};
+    border-style: solid;
+    color: ${props => getColor(props.$color)};
+    &::placeholder{
+        color: ${props => getColor(props.$color)};
+    }
+    &:focus{
+        outline: none;
+        background-color: #fbf5ca;      
+    }
+`;
+const StyledListViewSearchIcon = styled.button `
+    background-color: transparent;
+    border: none;
+    cursor: ${props => props.$isSearch ? 'pointer' : 'default'};
+    color: ${props => getColor(props.$color)};
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    &:focus{
+        outline: ${props => !props.$isSearch && 'none'};     
+    }
+`;
+const StyledListViewFooter = styled.div `
+    z-index: 100;
+    position: sticky;
+    bottom: 0px;
+    width: 100%;
+    padding: 5px;
+    background-color: ${props => getColor(props.$color)};
+    color: white;
+    font-size: 1rem;
+`;
+const StyledShowHideDetailsButton = styled.button `
+    background-color: transparent;
+    border: none;
+    margin-right: 10px;
+    /* color: ${props => getColor(props.$color)}; */
+    color: white;
+    cursor: pointer;
+    transform: translateY(1.5px);
+`;
+const TMListView = ({ maxHeight = '100%', selectedValues = [], color = 'primary', footer = false, header = false, customItemDetails, customListViewItem, hasItemDetails = false, detailsFields, dataSource, displayField, searchable, elementStyle, selectedListItems, multipleSelect = false, fontSize = FontSize.defaultFontSize }) => {
+    const [focusedItem, setFocusedItem] = useState(undefined);
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [detailRequestItems, setDetailRequestItems] = useState([]);
+    const [currentDetailsFields, setCurrentDetailsField] = useState(detailsFields);
+    const [searchValue, setSearchValue] = useState('');
+    const [currentDataSource, setCurrentDataSource] = useState([]);
+    const [usedFields, setUsedFields] = useState([]);
+    useEffect(() => {
+        if (!selectedValues.fieldName) {
+            setSelectedItems(selectedValues);
+        }
+        else {
+            let data = [];
+            for (let value of selectedValues.fieldValues) {
+                for (let d of currentDataSource) {
+                    if (value === d[selectedValues.fieldName]) {
+                        data.push(d);
+                    }
+                }
+            }
+            setSelectedItems(data);
+        }
+    }, [currentDataSource]);
+    useEffect(() => { selectedListItems && selectedListItems(selectedItems); }, [selectedItems]);
+    useEffect(() => {
+        const selectByKey = (e) => { if (e.code === 'Space' && focusedItem) {
+            onListItemClick();
+        } };
+        window.addEventListener('keyup', selectByKey);
+        return () => window.removeEventListener('keyup', selectByKey);
+    }, [focusedItem, selectedItems]);
+    useEffect(() => {
+        let arr = [];
+        if (customListViewItem) {
+            for (let key of Object.keys(customListViewItem.props)) {
+                arr.push(customListViewItem.props[key]);
+            }
+        }
+        else {
+            arr.push(displayField);
+        }
+        if (customItemDetails) {
+            for (let key of Object.keys(customItemDetails.props)) {
+                arr.push(customItemDetails.props[key]);
+            }
+        }
+        else if (currentDetailsFields) {
+            for (let field of currentDetailsFields) {
+                arr.push(field);
+            }
+        }
+        setUsedFields(arr);
+    }, [customItemDetails, customListViewItem, displayField, detailsFields]);
+    useEffect(() => {
+        if (hasItemDetails) {
+            let keys = Object.keys(dataSource[0]);
+            if (!displayField) {
+                let detailsKeys = keys.filter(key => key !== displayField);
+                if (!detailsFields) {
+                    setCurrentDetailsField(detailsKeys);
+                }
+                else {
+                    setCurrentDetailsField(detailsFields);
+                }
+            }
+            else {
+                if (!detailsFields) {
+                    setCurrentDetailsField(keys);
+                }
+                else {
+                    setCurrentDetailsField(detailsFields);
+                }
+            }
+        }
+    }, [hasItemDetails, detailsFields, displayField]);
+    useEffect(() => {
+        if (searchable) {
+            if (searchValue.length > 0) {
+                filter(dataSource, searchValue);
+            }
+            else {
+                setCurrentDataSource(dataSource);
+            }
+        }
+        else {
+            setCurrentDataSource(dataSource);
+        }
+    }, [dataSource, searchValue, searchable]);
+    const showHideDetails = () => {
+        if (detailRequestItems.length > 0) {
+            setDetailRequestItems([]);
+        }
+        else {
+            setDetailRequestItems(currentDataSource);
+        }
+    };
+    const filter = (dataSource, value) => {
+        let arr = [];
+        for (let data of dataSource) {
+            if (typeof data === 'string') {
+                setCurrentDataSource(dataSource.filter(item => item.toString().toLowerCase().includes(value.toLowerCase())));
+            }
+            else {
+                for (let key of usedFields) {
+                    if (data[key].toString().toLowerCase().includes(value.toLowerCase())) {
+                        if (!arr.includes(data)) {
+                            arr.push(data);
+                        }
+                    }
+                }
+                ;
+                setCurrentDataSource(arr);
+            }
+        }
+    };
+    const onListItemClick = () => {
+        if (multipleSelect) {
+            if (!hasItem(selectedItems, focusedItem)) {
+                setSelectedItems(prev => [...prev, focusedItem]);
+            }
+            else {
+                (setSelectedItems(selectedItems.filter(item => JSON.stringify(item) !== JSON.stringify(focusedItem))));
+            }
+        }
+        else {
+            setSelectedItems([]);
+            setSelectedItems(prev => [...prev, focusedItem]);
+        }
+    };
+    const onCheckClick = () => { if (hasItem(selectedItems, focusedItem)) {
+        setSelectedItems(selectedItems.filter(item => JSON.stringify(item) !== JSON.stringify(focusedItem)));
+    } };
+    const detailsToggle = (e) => {
+        if (detailRequestItems.includes(focusedItem)) {
+            setDetailRequestItems(detailRequestItems.filter(item => item !== focusedItem));
+        }
+        else {
+            setDetailRequestItems(prev => [...prev, focusedItem]);
+        }
+    };
+    const obj = (data, type) => {
+        let object = {};
+        switch (type) {
+            case 'item':
+                for (let key of Object.keys(customListViewItem?.props)) {
+                    object[key] = data[customListViewItem?.props[key]];
+                }
+                break;
+            case 'details':
+                for (let key of Object.keys(customItemDetails?.props)) {
+                    object[key] = data[customItemDetails?.props[key]];
+                }
+                break;
+        }
+        return object;
+    };
+    const hasItem = (arr, el) => {
+        let bool = false;
+        for (let item of arr) {
+            if (typeof item === 'string') {
+                if (item === el) {
+                    bool = true;
+                    break;
+                }
+                else {
+                    bool = false;
+                }
+            }
+            else {
+                if (JSON.stringify(item) == JSON.stringify(el)) {
+                    bool = true;
+                    break;
+                }
+                else {
+                    bool = false;
+                }
+            }
+        }
+        return bool;
+    };
+    const selectDeselectAll = () => { if (selectedItems.length > 0) {
+        setSelectedItems([]);
+    }
+    else {
+        setSelectedItems(currentDataSource);
+    } };
+    const renderedList = () => {
+        return (currentDataSource?.map((d, index) => (_jsxs(StyledListViewWrapper, { "$fontSize": fontSize, children: [_jsxs(StyledListItemContainer, { "$isFocused": focusedItem === d, "$isSelected": hasItem(selectedItems, d), "$fontSize": fontSize, tabIndex: 0, "$index": index, onFocus: () => setFocusedItem(d), children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: '100%' }, onClick: onListItemClick, children: [multipleSelect && _jsx(StyledLsitItemCheck, { checked: hasItem(selectedItems, d), onChange: onCheckClick, tabIndex: -1, type: "checkbox" }), !customListViewItem ? _jsx(StyledListItem, { "$color": color, children: displayField ? d[displayField] : d }) : React.cloneElement(customListViewItem, obj(d, 'item'))] }), hasItemDetails && _jsx(StyledDetailsToggleButton, { "$isSelected": hasItem(selectedItems, d), onClick: (e) => detailsToggle(e), children: detailRequestItems.includes(d) ? _jsx(IconUp, {}) : _jsx(IconDown, {}) })] }), detailRequestItems.includes(d) && _jsxs(StyledListViewItemDetails, { children: [" ", !customItemDetails ? currentDetailsFields.map((detail, index) => (_jsxs("div", { children: [detail, ": ", d[detail]] }, index))) : React.cloneElement(customItemDetails, obj(d, 'details')), " "] })] }, index))));
+    };
+    const renderedHeader = () => {
+        return (_jsxs(StyledListViewSearchContainer, { "$color": color, children: [multipleSelect && _jsx(StyledSelectOptionCheckBox, { "$color": color, "$fontsize": fontSize, type: 'checkbox', checked: selectedItems.length > 0, onChange: selectDeselectAll }), hasItemDetails && _jsx(StyledShowHideDetailsButton, { "$color": color, onClick: showHideDetails, children: detailRequestItems.length > 0 ? _jsx(IconInsertBelow, {}) : _jsx(IconInsertAbove, {}) }), searchable && _jsx(StyledListViewSearchInput, { "$color": color, value: searchValue, onChange: (e) => setSearchValue(e.target.value), placeholder: 'search' }), searchable && _jsx(StyledListViewSearchIcon, { onClick: () => searchValue.length > 0 && setSearchValue(''), "$isSearch": searchValue.length > 0, "$color": color, children: searchValue.length > 0 ? _jsx(IconCloseCircle, {}) : _jsx(IconSearch, {}) })] }));
+    };
+    return (_jsx("div", { style: elementStyle, children: _jsxs(StyledContainer, { "$maxHight": maxHeight, "$color": color, children: [" ", (searchable || multipleSelect) && renderedHeader(), " ", _jsx("ul", { children: renderedList() }), " ", multipleSelect && footer && _jsxs(StyledListViewFooter, { "$color": color, children: ["Selected items: ", selectedItems.length, " | Visible items: ", currentDataSource.length] })] }) }));
+};
+export default TMListView;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+interface ITMModal {
+    children?: React.ReactNode;
+    width?: string;
+    height?: string;
+    toolbar?: any;
+    title?: string;
+    fontSize?: string;
+    isModal?: boolean;
+    resizable?: boolean;
+    onClose?: () => void;
+}
+declare const TMModal: React.FC<ITMModal>;
+export default TMModal;

package/lib/components/base/TMModal.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Popup } from 'devextreme-react';
+import { useState } from 'react';
+import styled from 'styled-components';
+import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
+import { FontSize, TMColors } from '../../utils/theme';
+const StyledModal = styled.div `
+    width: ${props => props.$width};
+    height: ${props => props.$height};
+    position: ${props => props.$isModal ? 'relative' : 'fixed'};
+    background-color: white;
+    box-shadow: 2px 2px 10px #939393;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    font-size: ${props => props.$fontSize};
+    overflow: hidden;
+    min-height: 33px;
+    min-width: 250px;
+    max-width: 95%;
+    max-height: 95%;
+    z-index: 2000000000;
+`;
+const StyledModalToolbar = styled.div `
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 5px;
+    flex-direction: row;
+    background-color: ${TMColors.toolbar_background};
+    border-bottom: 1px solid gray;
+`;
+const StyledModalContext = styled.div `
+    width: 100%;
+    overflow: auto;
+    height: 100%;
+`;
+const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize }) => {
+    const [showPopup, setShowPopup] = useState(true);
+    return (_jsx(_Fragment, { children: isModal ?
+            _jsx(Popup, { showCloseButton: true, animation: undefined, maxHeight: '95%', maxWidth: '95%', resizeEnabled: resizable, width: width, height: height, title: title, visible: showPopup, onHidden: () => { setShowPopup(false); onClose && onClose(); }, children: _jsxs(TMLayoutContainer, { children: [toolbar && _jsx(TMLayoutItem, { height: '40px', children: _jsx(StyledModalToolbar, { children: toolbar }) }), _jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })
+            :
+                _jsxs(StyledModal, { "$isModal": isModal, className: 'temp-modal', "$fontSize": fontSize, "$width": width, "$height": height, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] }) }));
+};
+export default TMModal;

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

@@ -0,0 +1,26 @@
+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;
+}
+interface ITMExceptionBox extends ITMPopup {
+    exception?: any;
+}
+declare class TMExceptionBoxManager {
+    static show({ title, exception }: ITMExceptionBox): void;
+}
+declare class TMMessageBoxManager {
+    static show({ title, buttons, onButtonClick, message }: ITMMessageBox): void;
+}
+export { TMExceptionBoxManager, TMMessageBoxManager };

package/lib/components/base/TMPopUp.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import TMButton from './TMButton';
+import { SDKUI_Localizator, calcResponsiveSizes } 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-beta';
+import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
+import { Popup } from 'devextreme-react';
+import TMTabGroup, { TMTab } from './TMTab';
+let TOOLBAR_HEIGHT = 38;
+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: 5px;
+    padding: 5px;
+    user-select: none;
+    border-top: 1px solid #f3f3f3;
+    background-color: #ffffff;
+    z-index: 100;
+`;
+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 TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', message = '', buttons }) => {
+    const [isVisible, setIsVisible] = useState(true);
+    const [btns, setBtns] = useState(buttons || []);
+    const [currentWidth, setCurrentWidth] = useState(window.innerWidth);
+    useEffect(() => { window.addEventListener('resize', () => setCurrentWidth(window.innerWidth)); return () => window.removeEventListener('resize', () => setCurrentWidth(window.innerWidth)); });
+    useEffect(() => {
+        let arr = [];
+        if (buttons) {
+            for (let button of buttons) {
+                arr.push(button);
+            }
+            setBtns(arr);
+        }
+    }, [buttons]);
+    const MessageToolbar = () => {
+        return (_jsxs(StyledMessageToolbar, { children: [(btns.includes(ButtonNames.OK) || btns.includes(ButtonNames.YES)) && _jsx(TMButton, { fontSize: '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(TMButton, { fontSize: '1.1rem', btnStyle: 'text', onClick: () => { onButtonClick && onButtonClick(ButtonNames.NO); setIsVisible(false); }, caption: SDKUI_Localizator.No, showTooltip: false, color: 'error' }), btns.includes(ButtonNames.CANCEL) && _jsx(TMButton, { fontSize: '1.1rem', btnStyle: 'text', onClick: () => { onButtonClick && onButtonClick(ButtonNames.CANCEL); setIsVisible(false); }, caption: SDKUI_Localizator.Cancel, showTooltip: false, color: 'error' })] }));
+    };
+    return (_jsx(Popup, { resizeEnabled: resizable, visible: isVisible, showCloseButton: true, width: calcResponsiveSizes(currentWidth, '400px', '300px', '250px'), height: 'fit-content', title: title, onHidden: () => { setIsVisible(false); }, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: 'calc(100% - 40px)', children: _jsx(TMCard, { showBorder: false, scrollY: true, children: _jsxs(TMLayoutContainer, { direction: 'horizontal', alignItems: 'center', justifyContent: 'center', gap: 10, children: [_jsx(TMLayoutItem, { width: 'fit-content', children: _jsx("img", { style: { transform: 'translateY(8px)' }, src: toppy, width: 60, height: 75, alt: "" }) }), _jsx(TMLayoutItem, { height: 'fit-content', children: _jsxs("div", { children: [" ", typeof message === 'string' ? _jsx(Message, { msg: message }) : message, " "] }) })] }) }) }), _jsx(TMLayoutItem, { height: '50px', children: _jsx(MessageToolbar, {}) })] }) }));
+};
+const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.appModule} v. ${SDK_Globals.appVersion}` }) => {
+    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 = exception.isApiException ? exception.response.title : exception.message;
+    const [currentWidth, setCurrentWidth] = useState(window.innerWidth);
+    useEffect(() => { window.addEventListener('resize', () => setCurrentWidth(window.innerWidth)); return () => window.removeEventListener('resize', () => setCurrentWidth(window.innerWidth)); });
+    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: () => setIsVisible(false), caption: SDKUI_Localizator.Close, showTooltip: false, color: 'error' })] }));
+    };
+    return (_jsx(Popup, { resizeEnabled: resizable, visible: isVisible, onHidden: () => setIsVisible(false), showCloseButton: true, width: calcResponsiveSizes(currentWidth, '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 ? message : 'Message not found'] }), _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 }) {
+        let container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = ReactDOM.createRoot(container);
+        root.render(React.createElement(TMExceptionBox, { title: title, exception: exception }));
+    }
+}
+class TMMessageBoxManager {
+    static show({ title, buttons, onButtonClick, message }) {
+        let container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = ReactDOM.createRoot(container);
+        root.render(React.createElement(TMMessageBox, { title: title, buttons: buttons, onButtonClick: onButtonClick, message: message }));
+    }
+}
+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/TMSpinner.d.ts

@@ -0,0 +1,13 @@
+interface ITMSpinner {
+    backgroundColor?: string;
+    fontSize?: string;
+    description?: string;
+    width?: string;
+}
+declare const Spinner: ({ backgroundColor, description, fontSize, width }: ITMSpinner) => import("react/jsx-runtime").JSX.Element;
+declare class TMSpinner {
+    static show({ description, backgroundColor, fontSize }?: ITMSpinner): void;
+    static hide(): void;
+}
+export { Spinner };
+export default TMSpinner;

package/lib/components/base/TMSpinner.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { FontSize } from '../../utils/theme';
+import logoSix from '../../assets/6.png';
+const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content' }) => {
+    return (_jsx("div", { className: 'tm-spinner-container', style: { backgroundColor: backgroundColor }, children: _jsxs("div", { className: 'tm-spinner-wrapper', style: { width: width }, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, src: logoSix, width: 25, height: 38, alt: "" }), _jsxs("div", { className: "tm-spinner", style: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx("div", { style: { fontSize: fontSize, textAlign: 'center' }, className: 'tm-spinner-description', children: description })] }) }));
+};
+class TMSpinner {
+    static show({ description, backgroundColor, fontSize } = { backgroundColor: 'transparent', description: '', fontSize: FontSize.defaultFontSize }) {
+        let container = document.createElement('div');
+        container.setAttribute("id", 'tm-spinner-temporary-container');
+        document.body.appendChild(container);
+        const root = ReactDOM.createRoot(container);
+        root.render(_jsx(React.StrictMode, { children: _jsx(Spinner, { backgroundColor: backgroundColor, fontSize: fontSize, description: description }) }));
+    }
+    static hide() {
+        let container = document.getElementById('tm-spinner-temporary-container');
+        container?.remove();
+    }
+}
+export { Spinner };
+export default TMSpinner;

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

@@ -0,0 +1,20 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+export interface ITMTabProps {
+    title: string;
+    propsToBeValidated?: string[];
+}
+export declare const TMTab: ({ label, propsToBeValidated, children }: {
+    label?: string;
+    propsToBeValidated?: string[] | undefined;
+    children?: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TMTabItemBadge: ({ vil }: {
+    vil: ValidationItem[];
+}) => import("react/jsx-runtime").JSX.Element;
+declare const TMTabGroup: ({ children, fontSize, validationItems, onTabIndexChanged }: {
+    onTabIndexChanged?: (e: number) => void;
+    children: any;
+    fontSize?: string;
+    validationItems?: ValidationItem[];
+}) => import("react/jsx-runtime").JSX.Element;
+export default TMTabGroup;