@topconsultnpm/sdkui-react 6.19.0-dev2.9 → 6.19.0-test2

package/lib/components/base/TMFileManagerDataGridView.js

@@ -5,7 +5,7 @@ import TMDataGrid from "./TMDataGrid";
 import TMDcmtIcon from "../features/documents/TMDcmtIcon";
 import TMTooltip from "./TMTooltip";
 const TMFileManagerDataGridView = (props) => {
-    const { items, focusedFile, handleFocusedFile, selectedFiles, handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler } = props;
+    const { items, allUsers, focusedFile, handleFocusedFile, selectedFiles, handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler } = props;
     // State hook to store the currently focused row key, initially set to undefined
     const [focusedRowKey, setFocusedRowKey] = useState(focusedFile?.id);
     // State to store selected row keys
@@ -16,6 +16,15 @@ const TMFileManagerDataGridView = (props) => {
     useEffect(() => {
         setSelectedRowKeys(selectedFiles.map(selectedFile => selectedFile.id));
     }, [selectedFiles]);
+    const findCheckOutUserName = useCallback((checkOutUserName, checkOutUserID) => {
+        if (checkOutUserName) {
+            return checkOutUserName;
+        }
+        else {
+            let checkOutUser = allUsers.find(user => user.id === checkOutUserID);
+            return checkOutUser ? checkOutUser.name : '-';
+        }
+    }, [allUsers]);
     // DataGrid Callback    
     // Handles focus change in the data grid
     const onFocusedRowChanged = useCallback((e) => {
@@ -58,7 +67,7 @@ const TMFileManagerDataGridView = (props) => {
         const checkoutUsedId = checkOutUserID;
         const editMode = checkoutDate && checkoutUsedId && userID && userID === checkoutUsedId;
         const lockMode = checkoutDate && checkoutUsedId && userID && userID !== checkoutUsedId;
-        const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", checkOutUserName ?? '-', " (ID: ", checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(lastUpdateTime?.toString())] })] })] })] });
+        const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", findCheckOutUserName(checkOutUserName, checkOutUserID) ?? '-', " (ID: ", checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(lastUpdateTime?.toString())] })] })] })] });
         return _jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: "4px" }, children: [editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-lock" }) }), renderHighlightedText(cellData.value, searchText, false)] });
     }, [searchText]);
     const cellExtRender = useCallback((cellData) => {
@@ -87,6 +96,6 @@ const TMFileManagerDataGridView = (props) => {
             { dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
         ];
     }, [searchText]);
-    return _jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onCellDblClick: onCellDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, noDataText: SDKUI_Localizator.FolderIsEmpty });
+    return _jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onCellDblClick: onCellDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, noDataText: SDKUI_Localizator.FolderIsEmpty }, items.length);
 };
 export default TMFileManagerDataGridView;

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import { FileItem } from './TMFileManagerUtils';
+import { UserDescriptor } from '@topconsultnpm/sdk-ts';
 export interface TMFileManagerThumbnailItemsProps {
     items: Array<FileItem>;
+    allUsers: Array<UserDescriptor>;
     paginatedItems: Array<FileItem>;
     focusedFile: FileItem | undefined;
     handleFocusedFile: (fileItem: FileItem | undefined) => void;

package/lib/components/base/TMFileManagerThumbnailItems.js

@@ -6,7 +6,7 @@ import TMTooltip from './TMTooltip';
 import TMDcmtIcon from '../features/documents/TMDcmtIcon';
 const TMFileManagerThumbnailItems = (props) => {
     // Destructuring props for cleaner usage
-    const { items, paginatedItems, selectedFiles, searchText, userID, onDoubleClick, handleSelectedFiles, handleFocusedFile, setDraftThumbViewAnchor } = props;
+    const { items, allUsers, paginatedItems, selectedFiles, searchText, userID, onDoubleClick, handleSelectedFiles, handleFocusedFile, setDraftThumbViewAnchor } = props;
     // Ref for the scrollable container
     const containerRef = useRef(null);
     // Stores index of the last selected item for shift selection
@@ -112,6 +112,16 @@ const TMFileManagerThumbnailItems = (props) => {
         setDraftThumbViewAnchor(e.currentTarget);
         handleFocusedFile(item);
     }, []);
+    const findCheckOutUserName = useCallback((item) => {
+        if (item.checkOutUserName) {
+            return item.checkOutUserName;
+        }
+        else {
+            const checkOutUserID = item.checkOutUserID;
+            let checkOutUser = allUsers.find(user => user.id === checkOutUserID);
+            return checkOutUser ? checkOutUser.name : '-';
+        }
+    }, [allUsers]);
     return _jsx("div", { style: { width: "100%", height: "100%" }, children: paginatedItems.map(item => {
             const isSelected = selectedFiles?.map(file => file.id).includes(item.id) ?? false;
             const checkoutDate = item.checkoutDate;
@@ -130,7 +140,7 @@ const TMFileManagerThumbnailItems = (props) => {
                 bgColor = isSelected ? colors.PRIMARY_BLUE : backgroundColors.lockMode;
                 bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#fff59d";
             }
-            const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", item.checkOutUserName ?? '-', " (ID: ", item.checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(item.checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", item.version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", item.ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(item.creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime?.toString())] })] })] })] });
+            const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", findCheckOutUserName(item) ?? '-', " (ID: ", item.checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(item.checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", item.version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", item.ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(item.creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime?.toString())] })] })] })] });
             const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", item.id ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "DID:" }), " ", item.did ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "TID:" }), " ", item.tid ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", item.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", item.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", item.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(item.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime)] })] }));
             return _jsx(TMFileItemContainer, { className: "tm-file-manager-thumbnail-items", ref: containerRef, id: "tm-file-manager-thumbnail-item-" + item.id.toString(), "$backgroundColor": bgColor, "$bgHoverColor": bgHoverColor, "$textColor": textColor, onDoubleClick: () => onDoubleClickHandler(item), onContextMenu: (e) => onContextMenu(e, item), onClick: (e) => onClickHandler(e, item), tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { marginRight: '16px', flexShrink: 0 }, children: [_jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }), editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-lock" }) })] }), _jsxs("div", { style: { overflow: 'hidden', minWidth: 0 }, children: [_jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: '1rem', fontWeight: "bold" }, children: _jsx(TMTooltip, { parentStyle: { overflow: 'hidden' }, childStyle: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block' }, children: renderHighlightedText(item.name, searchText, isSelected) }) }), _jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: 'calc(1rem - 1px)' }, children: formatBytes(item.size ?? 0) })] })] }), item.version && (_jsx("div", { style: { flexShrink: 0, marginLeft: '12px', whiteSpace: 'nowrap' }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: _jsx("div", { style: { border: "2px solid #28a745", backgroundColor: "#28a745", color: "#ffffff", borderRadius: '50%', width: '30px', height: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 'bold' }, children: item.version }) }) }))] }) }, "tm-file-manager-thumbnail-item-" + item.id);
         }) });

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

@@ -1,7 +1,9 @@
 import React from "react";
 import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
+import { UserDescriptor } from "@topconsultnpm/sdk-ts";
 interface TMFileManagerThumbnailsViewProps {
     items: Array<FileItem>;
+    allUsers: Array<UserDescriptor>;
     focusedFile: FileItem | undefined;
     handleFocusedFile: (fileItem: FileItem | undefined) => void;
     selectedFiles: Array<FileItem>;

package/lib/components/base/TMFileManagerThumbnailsView.js

@@ -5,7 +5,7 @@ import { ContextMenu, Pagination, ScrollView } from "devextreme-react";
 import TMFileManagerThumbnailItems from "./TMFileManagerThumbnailItems";
 import { SDKUI_Localizator } from "../../helper";
 const TMFileManagerThumbnailsView = (props) => {
-    const { items, focusedFile, handleFocusedFile, selectedFiles = [], handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler, draftThumbViewAnchor, setDraftThumbViewAnchor } = props;
+    const { items, allUsers, focusedFile, handleFocusedFile, selectedFiles = [], handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler, draftThumbViewAnchor, setDraftThumbViewAnchor } = props;
     const PAGE_SIZES = [TMFileManagerPageSize.Small, TMFileManagerPageSize.Medium, TMFileManagerPageSize.Large];
     const initPageSize = TMFileManagerPageSize.Small;
     const showPagination = (items?.length ?? 0) > initPageSize;
@@ -39,7 +39,7 @@ const TMFileManagerThumbnailsView = (props) => {
         handleSelectedFiles?.([]);
     };
     return items.length > 0 ?
-        _jsxs("div", { style: { width: "100%", height: "100%" }, onContextMenu: onBackgroundContextMenu, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'vertical', children: _jsx(TMFileManagerThumbnailItems, { items: items, paginatedItems: paginatedItems, focusedFile: focusedFile, selectedFiles: selectedFiles, userID: userID, searchText: searchText, handleFocusedFile: handleFocusedFile, handleSelectedFiles: handleSelectedFiles, onDoubleClick: handleItemDoubleClick, setDraftThumbViewAnchor: setDraftThumbViewAnchor }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize }), draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] })
+        _jsxs("div", { style: { width: "100%", height: "100%" }, onContextMenu: onBackgroundContextMenu, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'vertical', children: _jsx(TMFileManagerThumbnailItems, { items: items, allUsers: allUsers, paginatedItems: paginatedItems, focusedFile: focusedFile, selectedFiles: selectedFiles, userID: userID, searchText: searchText, handleFocusedFile: handleFocusedFile, handleSelectedFiles: handleSelectedFiles, onDoubleClick: handleItemDoubleClick, setDraftThumbViewAnchor: setDraftThumbViewAnchor }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize }), draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] })
         :
             _jsxs("div", { onContextMenu: onBackgroundContextMenu, style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: [SDKUI_Localizator.FolderIsEmpty, draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] });
 };

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

@@ -8,9 +8,11 @@ interface ITMModal {
     fontSize?: string;
     isModal?: boolean;
     resizable?: boolean;
+    expandable?: boolean;
     onClose?: () => void;
     hidePopup?: boolean;
     askClosingConfirm?: boolean;
+    showCloseButton?: boolean;
 }
 declare const TMModal: React.FC<ITMModal>;
 export default TMModal;

package/lib/components/base/TMModal.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Popup } from 'devextreme-react';
 import styled from 'styled-components';
 import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
 import { FontSize, TMColors } from '../../utils/theme';
+import { IconWindowMaximize, IconWindowMinimize, svgToString } from '../../helper';
 const StyledModal = styled.div `
     width: ${props => props.$width};
     height: ${props => props.$height};
@@ -38,11 +39,46 @@ const StyledModalContext = styled.div `
     overflow: auto;
     height: 100%;
 `;
-const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false }) => {
+const TMModal = ({ resizable = true, expandable = false, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true }) => {
+    const popupRef = useRef(null);
     const [initialWidth, setInitialWidth] = useState(width);
     const [initialHeight, setInitialHeight] = useState(height);
     const [showPopup, setShowPopup] = useState(false);
     const [isResizing, setIsResizing] = useState(false);
+    const [isFullScreen, setIsFullScreen] = useState(false);
+    // Dimensioni minime di default per il popup
+    const DEFAULT_MIN_WIDTH = 500;
+    const DEFAULT_MIN_HEIGHT = 400;
+    const [minWidth, setMinWidth] = useState(0);
+    const [minHeight, setMinHeight] = useState(0);
+    /**
+     * 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);
+                        }
+                    }
+                }
+            }
+        });
+    };
     useEffect(() => {
         setShowPopup(isModal);
     }, [isModal]);
@@ -65,6 +101,15 @@ const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClos
             setShowPopup(false);
         onClose && onClose();
     };
-    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { showCloseButton: true, animation: undefined, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: initialWidth, height: initialHeight, title: title, visible: showPopup, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 50px)' : 'calc(100% - 10px)', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
+    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { ref: popupRef, showCloseButton: showCloseButton, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, toolbarItems: expandable ? [
+                {
+                    widget: 'dxButton',
+                    location: 'after',
+                    options: {
+                        icon: isFullScreen ? svgToString(_jsx(IconWindowMinimize, {})) : svgToString(_jsx(IconWindowMaximize, {})),
+                        onClick: () => setIsFullScreen(!isFullScreen)
+                    }
+                }
+            ] : undefined, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 40px)' : '100%', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
 };
 export default TMModal;

package/lib/components/base/TMPopUp.js

@@ -20,6 +20,9 @@ export var ButtonNames;
     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;
@@ -33,7 +36,8 @@ const StyledExeptionToolbar = styled.div `
     background-color: white;
 `;
 const StyledMessageToolbar = styled.div `
-    position: relative;
+    position: sticky;
+    bottom: 0;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
@@ -43,7 +47,7 @@ const StyledMessageToolbar = styled.div `
     user-select: none;
     border-top: 1px solid #f3f3f3;
     background-color: #ffffff;
-    z-index: 100;
+    z-index: 1;
     flex-wrap: wrap;
     
     @media (max-width: 200px) {
@@ -95,6 +99,7 @@ const ResponsiveMessageContainer = styled.div `
     height: 100%;
     width: 100%;
     background-color: #ffffff;
+    overflow: hidden;
 `;
 const ResponsiveMessageContent = styled.div `
     flex: 1;
@@ -105,6 +110,7 @@ const ResponsiveMessageContent = styled.div `
     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'};
@@ -163,8 +169,11 @@ const ResponsiveMessageBody = ({ message, isMobile, MessageToolbar, showToppy })
 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(() => {
@@ -176,6 +185,34 @@ const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', me
             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();
@@ -210,19 +247,51 @@ const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', me
         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: () => {
+    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';
-        }, children: _jsx(ResponsiveMessageBody, { message: message, isMobile: isMobile, MessageToolbar: MessageToolbar, showToppy: showToppy }) }));
+        }, 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`;
@@ -235,7 +304,7 @@ const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.a
     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, {}) })] }) }));
+    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 }) {

package/lib/components/base/TMWaitPanel.js

@@ -33,8 +33,14 @@ const StyledProgressText = styled.p ` font-weight: bold; color: #333; margin: 0;
 const StyledMessage = styled.p ` color: #666; font-size: 0.9em; margin-top: 10px; `;
 const StyledAbortButton = styled.button ` background: #ff4d4d; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 1em; cursor: pointer; margin-top: 20px; &:hover { background: #ff6666; } `;
 export const TMWaitPanel = (props) => {
-    let progressValue1 = 100 * (((props.valuePrimary ?? 0) / (props.maxValuePrimary ?? 0)) || 0);
-    let progressValue2 = 100 * (((props.valueSecondary ?? 0) / (props.maxValueSecondary ?? 0)) || 0);
+    const calculateProgress = (value = 0, maxValue = 0) => {
+        if (maxValue === 0)
+            return 0;
+        const progress = (value / maxValue) * 100;
+        return Number.isFinite(progress) ? progress : 0;
+    };
+    let progressValue1 = calculateProgress(props.valuePrimary, props.maxValuePrimary);
+    let progressValue2 = calculateProgress(props.valueSecondary, props.maxValueSecondary);
     return (_jsx(StyledWaitPanelOverlay, { children: _jsxs(StyledWaitPanel, { "$height": (props.showPrimary && props.showSecondary) ? '350px' : '250px', children: [_jsx(StyledTitle, { children: props.title }), props.showPrimary &&
                     _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue1.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue1.toFixed(2), "%"] }), _jsx(StyledMessage, { children: props.textPrimary })] }), props.showSecondary &&
                     _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue2.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue2.toFixed(2), "%"] }), _jsx(StyledMessage, { children: props.textSecondary })] }), props.isCancelable && _jsx(StyledAbortButton, { onClick: () => props.onAbortClick?.(props.abortController), children: SDKUI_Localizator.Abort })] }) }));

package/lib/components/choosers/TMDataListItemChooser.js

@@ -33,7 +33,7 @@ export const TMDataListItemChooserForm = (props) => {
         if (!props.dataListId)
             return [];
         if (refreshCache)
-            DataListCacheService.RemoveAll();
+            DataListCacheService.Remove();
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DataList} ...` });
         let dataList = await DataListCacheService.GetAsync(props.dataListId);
         TMSpinner.hide();

package/lib/components/choosers/TMDcmtTypeChooser.js

@@ -23,7 +23,7 @@ const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, f
 export default TMDcmtTypeChooser;
 const cellRenderIcon = (data) => _jsx(TMDcmtTypeIcon, { dtd: data.data });
 const cellRenderNameAndDesc = (data) => _jsx("p", { style: { textAlign: 'left', color: data.data.isView ? 'red' : '' }, children: data.value });
-export const TMDcmtTypeChooserForm = ({ tmSession, allowMultipleSelection, width, height, selectedIDs, dataSource, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, accessFilter = 'all', filter, onClose, onChoose }) => {
+export const TMDcmtTypeChooserForm = ({ tmSession, allowMultipleSelection, width, height, selectedIDs, dataSource, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, accessFilter = 'all', startWithShowOnlySelectedItems = true, filter, onClose, onChoose }) => {
     const isPermitted = (accessLevel) => accessLevel === AccessLevelsEx.Yes || accessLevel === AccessLevelsEx.Mixed;
     const getItems = async (refreshCache) => {
         let tms = tmSession ?? SDK_Globals.tmSession;
@@ -57,5 +57,5 @@ export const TMDcmtTypeChooserForm = ({ tmSession, allowMultipleSelection, width
             return false;
         return true;
     };
-    return (_jsx(TMChooserForm, { title: SDK_Localizator.ListDcmtTypeOrView, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, width: width, height: height, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: dataSource, getItems: getItems, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.ListDcmtTypeOrView, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, startWithShowOnlySelectedItems: startWithShowOnlySelectedItems, width: width, height: height, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: dataSource, getItems: getItems, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
 };

package/lib/components/choosers/TMMetadataChooser.d.ts

@@ -2,6 +2,9 @@ import React from 'react';
 import { MetadataDescriptor, QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { ITMChooserFormProps, ITMChooserProps, TID_MID } from '../../ts';
 import { TID_Alias } from '../../helper/queryHelper';
+type MetadataDescriptorWithKey = MetadataDescriptor & {
+    uniqueKey: string;
+};
 interface ITMMetadataChooserProps extends ITMChooserProps {
     /** Allows you to view system metadata  */
     allowSysMetadata?: boolean;
@@ -32,7 +35,7 @@ interface ITMMetadataChooserProps extends ITMChooserProps {
 }
 declare const TMMetadataChooser: React.FunctionComponent<ITMMetadataChooserProps>;
 export default TMMetadataChooser;
-interface ITMMetadataChooserFormProps extends ITMChooserFormProps<MetadataDescriptor> {
+interface ITMMetadataChooserFormProps extends ITMChooserFormProps<MetadataDescriptorWithKey> {
     /** Allows you to view system metadata  */
     allowSysMetadata?: boolean;
     /** TIDs of document types to retrieve metadata from */

package/lib/components/choosers/TMMetadataChooser.js

@@ -38,7 +38,18 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
         if (checkProps)
             throw Error('Le props qd | tids | dataSource devono essere in alternativa');
         try {
-            if (qd) {
+            if (dataSource) {
+                // Se ho dataSource, aggiungo tutti i suoi metadati con uniqueKey
+                dataSource.forEach((md) => {
+                    const mdWithKey = md;
+                    mdWithKey.uniqueKey = `${mdWithKey.customData1 ?? 0}_${md.id}_${mdWithKey.customData2 ?? ''}`;
+                    metadata.push(mdWithKey);
+                });
+                setDcmtTypes(dtdList);
+                setHasSysMetadata(allowSysMetadata && metadata.findIndex(md => md.isSystem == 1) >= 0);
+                return showSysMetadata ? metadata : metadata.filter(o => o.isSystem != 1);
+            }
+            else if (qd) {
                 let tids = getTIDsByQd(qd);
                 let inputTIDs = tids.map((item) => item.tid);
                 TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DcmtType} ...` });
@@ -48,20 +59,26 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
                     dtd.init({ ...dtds[i] });
                     const alias = tids?.[i].alias ?? '';
                     dtd.customData2 = alias;
+                    let mds;
                     if (!qdShowOnlySelectItems) {
                         dtd.metadata?.forEach((md) => {
-                            md.customData1 = dtd.id;
-                            md.customData2 = alias;
+                            const mdWithKey = md;
+                            mdWithKey.customData1 = dtd.id;
+                            mdWithKey.customData2 = alias;
+                            mdWithKey.uniqueKey = `${dtd.id}_${md.id}_${alias}`;
                         });
+                        mds = filterMetadata ? dtd.metadata?.filter(filterMetadata) : dtd.metadata;
                     }
                     else {
                         let newMetadata = dtd.metadata?.filter(o => qd.select?.some(s => s.tid == dtd.id && s.mid == o.id && ((s.alias ?? '') == alias)));
                         newMetadata?.forEach((md) => {
-                            md.customData1 = dtd.id;
-                            md.customData2 = alias;
+                            const mdWithKey = md;
+                            mdWithKey.customData1 = dtd.id;
+                            mdWithKey.customData2 = alias;
+                            mdWithKey.uniqueKey = `${dtd.id}_${md.id}_${alias}`;
                         });
+                        mds = filterMetadata ? newMetadata?.filter(filterMetadata) : newMetadata;
                     }
-                    let mds = filterMetadata ? dtd.metadata?.filter(filterMetadata) : dtd.metadata;
                     dtdList.push({ ...dtd, metadata: mds });
                 }
             }
@@ -81,7 +98,11 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
                         continue;
                     }
                     let mds = filterMetadata ? dtd.metadata?.filter(filterMetadata) : dtd.metadata;
-                    mds?.forEach((md) => { md.customData1 = dtd?.id; });
+                    mds?.forEach((md) => {
+                        const mdWithKey = md;
+                        mdWithKey.customData1 = dtd?.id;
+                        mdWithKey.uniqueKey = `${dtd.id}_${md.id}_${md.customData2 ?? ''}`;
+                    });
                     dtdList.push({ ...dtd, metadata: mds });
                 }
             }
@@ -130,5 +151,7 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
     const cellRenderNameAndDesc = useCallback((data) => {
         return _jsx("p", { style: { textAlign: 'left', color: data.data.isRequired == 1 ? 'red' : '' }, children: data.value });
     }, []);
-    return (_jsx(TMChooserForm, { title: SDK_Localizator.Metadatas, allowMultipleSelection: allowMultipleSelection, allowSorting: false, allowGrouping: dcmtTypes.length > 1, width: width, height: height, selectedIDs: selectedIDs?.map((item) => item.mid), convertID: convertID, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: dataSource, getItems: getItems, customButtons: renderCustomButtons(), columns: dataColumns, summaryItems: renderSummaryItems, onClose: onClose, onChoose: (IDs) => { onChoose?.(IDs); } }));
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.Metadatas, allowMultipleSelection: allowMultipleSelection, allowSorting: false, allowGrouping: dcmtTypes.length > 1, width: width, height: height, keyName: 'uniqueKey', selectedIDs: selectedIDs?.map((item) => `${item.tid}_${item.mid}_${item.aliasTID ?? ''}`), convertID: convertID, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, 
+        // dataSource={dataSource}
+        getItems: getItems, customButtons: renderCustomButtons(), columns: dataColumns, summaryItems: renderSummaryItems, onClose: onClose, onChoose: (IDs) => { onChoose?.(IDs); } }));
 };

package/lib/components/choosers/TMUserChooser.d.ts

@@ -14,6 +14,8 @@ interface ITMUserChooserProps extends ITMChooserProps {
     hideShowId?: boolean;
     /** Initial value for showChooser */
     initialShowChooser?: boolean;
+    /** Allow showing all users with toggle button */
+    allowShowAllUsers?: boolean;
 }
 declare const TMUserChooser: React.FunctionComponent<ITMUserChooserProps>;
 export default TMUserChooser;
@@ -24,6 +26,8 @@ interface ITMUserChooserFormProps extends ITMChooserFormProps<UserDescriptor> {
     hideRefresh?: boolean;
     /** Nascondi pulsante mostra ID */
     hideShowId?: boolean;
+    /** Allow showing all users with toggle button */
+    allowShowAllUsers?: boolean;
 }
 export declare const TMUserChooserForm: React.FunctionComponent<ITMUserChooserFormProps>;
 export declare const TMUserIdViewer: ({ userId, showIcon, noneSelectionText }: {