@topconsultnpm/sdkui-react 6.19.0-dev2.5 → 6.19.0-dev2.50

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

@@ -16,6 +16,7 @@ export interface ITMButton extends ITMEditorBase {
     padding?: string;
     showTooltip?: boolean;
     onClick?: VoidFunction;
+    onMouseDown?: (e: any) => any;
 }
 declare const TMButton: React.ForwardRefExoticComponent<ITMButton & React.RefAttributes<HTMLButtonElement>>;
 export default TMButton;

package/lib/components/base/TMButton.js

@@ -145,23 +145,23 @@ const StyledAdvancedButtonText = styled.div `
     padding: 5px;
 `;
 const TMButton = forwardRef((props, ref) => {
-    const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { } } = props;
+    const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { }, onMouseDown = () => { } } = props;
     const [isHovered, setIsHovered] = useState(false);
     const renderedButton = () => {
         if (btnStyle === 'normal') {
-            return (_jsx(StyledNormalButton, { ref: ref, width: width, height: height, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: caption }));
+            return (_jsx(StyledNormalButton, { ref: ref, width: width, height: height, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
         }
         else if (btnStyle === 'toolbar') {
-            return (_jsx(StyledToolbarButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: icon }));
+            return (_jsx(StyledToolbarButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: icon }));
         }
         else if (btnStyle === 'icon') {
-            return (_jsx(StyledIconButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, children: icon }));
+            return (_jsx(StyledIconButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: icon }));
         }
         else if (btnStyle === 'advanced') {
-            return (_jsxs(StyledAdvancedButton, { ref: ref, "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: caption })] }));
+            return (_jsxs(StyledAdvancedButton, { ref: ref, "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), onMouseDown: (e) => !disabled && onMouseDown?.(e), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: caption })] }));
         }
         else {
-            return (_jsx(StyledTextButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: caption }));
+            return (_jsx(StyledTextButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
         }
     };
     const renderTooltip = () => {

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

@@ -7,5 +7,5 @@ type TMCustomButtonProps = {
     selectedItems?: Array<any>;
     onClose?: () => void;
 };
-declare const TMCustomButton: (props: TMCustomButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TMCustomButton: (props: TMCustomButtonProps) => false | import("react/jsx-runtime").JSX.Element;
 export default TMCustomButton;

package/lib/components/base/TMCustomButton.js

@@ -1,13 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SDK_Globals } from '@topconsultnpm/sdk-ts';
-import { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useMemo } from 'react';
 import TMModal from './TMModal';
 import styled from 'styled-components';
-import { processButtonAttributes } from '../../helper/dcmtsHelper';
+import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
+import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
   flex-direction: column;
+  padding-left: 15px;
 `;
 const StyledIframe = styled.iframe `
   border: none;
@@ -17,47 +18,101 @@ const TMCustomButton = (props) => {
     const { button, isModal = true, formData, selectedItems, onClose } = props;
     const { appName: scriptUrl, arguments: args } = button;
     const iframeRef = useRef(null);
-    const attributes = processButtonAttributes(args, formData);
+    const attributes = useMemo(() => getButtonAttributes(args, formData, selectedItems), [args, formData, selectedItems]);
+    const RunOnce = button.mode === "RunOnce";
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
-    const getTargetOrigin = (url) => {
-        if (!url)
+    const selectedItemsCount = selectedItems?.length || 0;
+    // Stati per il wait panel
+    const [showWaitPanel, setShowWaitPanel] = useState(selectedItemsCount > 0 && !RunOnce);
+    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, selectedItemsCount));
+    const [waitPanelValue, setWaitPanelValue] = useState(0);
+    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(selectedItemsCount);
+    const [abortController, setAbortController] = useState(undefined);
+    const targetOrigin = useMemo(() => {
+        if (!scriptUrl)
             return '*';
         try {
-            const urlObj = new URL(url);
+            const urlObj = new URL(scriptUrl);
             return urlObj.origin;
         }
         catch {
             return '*';
         }
-    };
-    useEffect(() => {
-        if (iframeRef.current?.contentWindow) {
-            const mergedAttributes = { ...attributes, selectedItems: selectedItems };
-            iframeRef.current.contentWindow.postMessage({
-                "options": mergedAttributes,
-                "selectedItems": selectedItems,
-                "session": SDK_Globals.tmSession
-            }, getTargetOrigin(scriptUrl));
-        }
-        clearTimeout(timeoutIframe);
-    }, [loading, error, scriptUrl, attributes]);
+    }, [scriptUrl]);
     const handleLoad = () => setLoading(false);
     const handleError = () => {
         setLoading(false);
         setError(true);
     };
-    // Timeout di sicurezza nel caso l'evento 'error' non venga chiamato
-    const timeoutIframe = setTimeout(() => {
-        if (loading)
-            handleError();
-    }, 5000); // 5 secondi
+    const executeSequentially = async (controller) => {
+        if (!selectedItems)
+            return;
+        for (const [index, item] of selectedItems.entries()) {
+            if (controller.signal.aborted)
+                break;
+            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, selectedItemsCount));
+            setWaitPanelValue(index);
+            // Attendi che l'iframe sia pronto e invia il messaggio
+            await new Promise((resolve) => {
+                const checkIframe = setInterval(() => {
+                    if (iframeRef.current?.contentWindow) {
+                        clearInterval(checkIframe);
+                        //devo convertire item in formData
+                        const processedItem = getSelectedItem(args, formData, item);
+                        postMessageIframe(processedItem);
+                        // Attendi prima di passare al prossimo
+                        setTimeout(() => {
+                            setWaitPanelValue(index + 1);
+                            resolve();
+                        }, 500);
+                    }
+                }, 100);
+            });
+        }
+        setShowWaitPanel(false);
+        onClose?.();
+    };
+    const postMessageIframe = (data) => {
+        console.log("TMCustomButton - postMessageIframe - data:", data);
+        if (iframeRef.current?.contentWindow) {
+            iframeRef.current.contentWindow.postMessage({ "options": data }, targetOrigin);
+        }
+    };
+    useEffect(() => {
+        if (loading || error)
+            return;
+        //if(error) clearTimeout(timeoutIframe);
+        if (!RunOnce && selectedItemsCount > 0) {
+            // esegui per ogni item selezionato
+            const controller = new AbortController();
+            controller.signal.addEventListener('abort', () => {
+                setShowWaitPanel(false);
+                onClose?.();
+            });
+            setAbortController(controller);
+            setWaitPanelMaxValue(selectedItemsCount);
+            executeSequentially(controller);
+        }
+        else {
+            // Modalità RunOnce: invia dati all'iframe quando è caricato
+            postMessageIframe(attributes);
+            if (!RunOnce) {
+                //chiudo l'iframe dopo 2 secondi
+                setTimeout(() => {
+                    onClose?.();
+                }, 2000);
+            }
+            //clearTimeout(timeoutIframe);
+        }
+    }, [loading, error, RunOnce]);
     useEffect(() => {
-        if (!isModal && scriptUrl) {
+        if (!isModal && RunOnce && scriptUrl) {
             window.open(scriptUrl, '_blank');
             onClose?.();
         }
-    }, [isModal, scriptUrl, onClose]);
-    return isModal ? (_jsx(TMModal, { title: button.title, width: '60%', height: '60%', resizable: true, onClose: onClose, children: _jsxs(IframeContainer, { children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }) })) : null;
+    }, []);
+    const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }));
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, expandable: true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
 };
 export default TMCustomButton;

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

@@ -1,4 +1,4 @@
-import { IColumnProps } from 'devextreme-react/cjs/data-grid';
+import { IColumnProps } from 'devextreme-react/data-grid';
 import { SearchResultDescriptor } from '@topconsultnpm/sdk-ts';
 export type FormatOption = {
     value: 'csv' | 'xlsx' | 'xls' | 'txt';

package/lib/components/base/TMDataGridExportForm.js

@@ -64,7 +64,7 @@ const TMDataGridExportForm = (props) => {
             // Retrieve columns from the search result, or use an empty array if not available
             const columns = searchResult?.dtdResult?.columns ?? [];
             // If exportDescriptionsForDataLists is true, build a map of values to labels for the columns; otherwise use an empty Map
-            const { valueToNameMap, captions } = exportDescriptionsForDataLists ? await buildValueToLabelMapFromDataColumns(columns) : { valueToNameMap: new Map(), captions: new Set() };
+            const valueToNameMap = exportDescriptionsForDataLists ? await buildValueToLabelMapFromDataColumns(columns) : new Map();
             // Create a Set from selectedRowKeys for efficient lookup
             const selectedSet = new Set(selectedRowKeys);
             // If exporting only selected rows, filter the dataSource accordingly; otherwise use the full dataSource
@@ -82,8 +82,14 @@ const TMDataGridExportForm = (props) => {
             const getValue = (col, value) => {
                 // Replace raw value with corresponding label from the map if applicable
                 let result = value;
-                if (exportDescriptionsForDataLists && col.caption && captions.has(col.caption.toString())) {
-                    result = valueToNameMap.get(value) ?? value;
+                if (exportDescriptionsForDataLists && col.dataField && valueToNameMap.size > 0) {
+                    const mapForField = valueToNameMap.get(col.dataField);
+                    if (mapForField) {
+                        result = mapForField.get(value) ?? value;
+                    }
+                    else {
+                        result = value;
+                    }
                 }
                 // If the column is a datetime type, attempt to format it as a locale date string
                 if (col.dataType === 'datetime' && result) {

package/lib/components/base/TMFileManager.js

@@ -8,11 +8,12 @@ import { TMColors } from "../../utils/theme";
 import TMPanel from "./TMPanel";
 import { TMSplitterLayout } from "./TMLayout";
 import { ContextMenu, TreeView } from "devextreme-react";
-import Toolbar, { Item as ToolbarItem } from 'devextreme-react/cjs/toolbar';
+import Toolbar, { Item as ToolbarItem } from 'devextreme-react/toolbar';
 import TMButton from "./TMButton";
 import { TMSearchBar } from "../sidebar/TMHeader";
 import TMFileManagerThumbnailsView from "./TMFileManagerThumbnailsView";
 import TMFileManagerDataGridView from "./TMFileManagerDataGridView";
+import { UserListCacheService } from "@topconsultnpm/sdk-ts";
 const TMFileManager = (props) => {
     // Destructure props
     const { 
@@ -44,6 +45,14 @@ const TMFileManager = (props) => {
     const [droppedFiles, setDroppedFiles] = useState([]);
     // State to track whether a file drag operation is in progress
     const [isDragging, setIsDragging] = useState(false);
+    const [allUsers, setAllUsers] = useState([]);
+    useEffect(() => {
+        const fetchAllUsers = async () => {
+            const users = await UserListCacheService.GetAllAsync();
+            setAllUsers(users ?? []);
+        };
+        fetchAllUsers();
+    }, []);
     // useEffect runs whenever `treeFs` changes
     useEffect(() => {
         // Initialize an empty array to hold tree view directory data
@@ -198,7 +207,7 @@ const TMFileManager = (props) => {
                             width: "100%",
                             height: "100%",
                             ...(isMobile && { display: openDraftList ? 'block' : 'none', transition: "opacity 0.3s ease-in-out" }),
-                        }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [!showPanel && _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '200px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
+                        }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [!showPanel && _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.CompactView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '200px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
                                     width: "100%",
                                     height: "calc(100% - 40px)",
                                     position: "relative",
@@ -219,6 +228,6 @@ const TMFileManager = (props) => {
                                             pointerEvents: "none",
                                             backdropFilter: "blur(3px)",
                                             textShadow: "0 2px 4px rgba(0,0,0,0.5)"
-                                        }, children: SDKUI_Localizator.DropFileToShare }), viewMode === 'thumbnails' && _jsx(TMFileManagerThumbnailsView, { items: filteredFileItems ?? [], focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, draftThumbViewAnchor: draftThumbViewAnchor, setDraftThumbViewAnchor: setDraftThumbViewAnchor, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(TMFileManagerDataGridView, { items: filteredFileItems ?? [], focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, onDoubleClickHandler: onDoubleClickHandler })] })] })] }) }) });
+                                        }, children: SDKUI_Localizator.DropFileToShare }), viewMode === 'thumbnails' && _jsx(TMFileManagerThumbnailsView, { items: filteredFileItems ?? [], allUsers: allUsers, focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, draftThumbViewAnchor: draftThumbViewAnchor, setDraftThumbViewAnchor: setDraftThumbViewAnchor, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(TMFileManagerDataGridView, { items: filteredFileItems ?? [], allUsers: allUsers, focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, onDoubleClickHandler: onDoubleClickHandler })] })] })] }) }) });
 };
 export default TMFileManager;

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

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

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

@@ -4,6 +4,7 @@ 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,12 @@ 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 [initialWidth, setInitialWidth] = useState(width);
     const [initialHeight, setInitialHeight] = useState(height);
     const [showPopup, setShowPopup] = useState(false);
     const [isResizing, setIsResizing] = useState(false);
+    const [isFullScreen, setIsFullScreen] = useState(false);
     useEffect(() => {
         setShowPopup(isModal);
     }, [isModal]);
@@ -65,6 +67,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, { showCloseButton: showCloseButton, animation: undefined, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, 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% - 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 })] })) }));
 };
 export default TMModal;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ITooltipOptions } from 'devextreme-react/cjs/tooltip';
+import { ITooltipOptions } from 'devextreme-react/tooltip';
 import { Position } from 'devextreme/common';
 import { PositionConfig } from 'devextreme/animation/position';
 interface ITMTooltipProps extends ITooltipOptions {

package/lib/components/base/TMTooltip.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Tooltip } from 'devextreme-react/cjs/tooltip';
+import { Tooltip } from 'devextreme-react/tooltip';
 import { genUniqueId } from '../../helper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
 const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle }) => {

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/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 */