@topconsultnpm/sdkui-react 6.20.0-dev1.7 → 6.20.0-dev1.70

package/lib/components/grids/TMBlogsPost.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { DossierEngine, LayoutModes, ResultTypes, SDK_Globals, TaskDescriptor, WorkingGroupEngine } from "@topconsultnpm/sdk-ts";
-import { ContextMenu } from "devextreme-react";
+import { DossierEngine, LayoutModes, ObjectClasses, ResultTypes, SDK_Globals, TaskDescriptor, WorkingGroupEngine } from "@topconsultnpm/sdk-ts";
+import { ContextMenu as TMContextMenu } from "../NewComponents/ContextMenu";
 import { SDKUI_Localizator, Globalization, getExceptionMessage, TMConditionalWrapper, calcResponsiveSizes } from "../../helper";
 import TMToppyMessage from "../../helper/TMToppyMessage";
 import { useDcmtOperations } from "../../hooks/useDcmtOperations";
@@ -68,7 +68,8 @@ const TMBlogsPost = (props) => {
     const [showTaskForm, setShowTaskForm] = useState(false);
     // State to manage show selected file
     const [dcmtForm, setDcmtForm] = useState({ show: false, dcmt: undefined });
-    const [anchorEl, setAnchorEl] = useState(null);
+    const [menuVisible, setMenuVisible] = useState(false);
+    const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
     const [menuItems, setMenuItems] = useState([]);
     const [localShowWaitPanel, setLocalShowWaitPanel] = useState(false);
     const [localWaitPanelTitle, setLocalWaitPanelTitle] = useState('');
@@ -500,8 +501,8 @@ const TMBlogsPost = (props) => {
         const classId = targetItem ? targetItem.classID : undefined;
         if (contextMenuParams.isDownloadAttachmentEnabled && focusedAttachment !== undefined) {
             menuItems.push({
-                icon: "download",
-                text: 'Download',
+                icon: _jsx("span", { className: "dx-icon-download" }),
+                name: 'Download',
                 onClick: async () => {
                     await downloadDcmtsAsync([
                         { TID: focusedAttachment.TID, DID: focusedAttachment.DID, fileName: focusedAttachment.fileName }
@@ -511,26 +512,26 @@ const TMBlogsPost = (props) => {
         }
         if (contextMenuParams.isViewEditMetadata && focusedAttachment !== undefined) {
             menuItems.push({
-                icon: 'eyeopen',
-                text: SDKUI_Localizator.OpenForm,
+                icon: _jsx("span", { className: "dx-icon-eyeopen" }),
+                name: SDKUI_Localizator.OpenForm,
                 onClick: () => openDcmtForm(focusedAttachment),
             });
         }
         if (contextMenuParams.isCommentEnabled && showCommentFormCallback !== undefined) {
             menuItems.push({
-                icon: 'chat',
-                text: SDKUI_Localizator.Comment,
+                icon: _jsx("span", { className: "dx-icon-chat" }),
+                name: SDKUI_Localizator.Comment,
                 disabled: isGroupArchived ? true : false,
                 onClick: () => {
                     showCommentFormCallback(focusedAttachment);
                 },
-                beginGroup: true
+                beginGroup: menuItems.length > 0
             });
         }
         if (targetItem && contextMenuParams.isDeleteEnabled) {
             menuItems.push({
-                icon: "trash",
-                text: SDKUI_Localizator.Delete,
+                icon: _jsx("span", { className: "dx-icon-trash" }),
+                name: SDKUI_Localizator.Delete,
                 visible: contextMenuParams.isDeleteEnabled,
                 onClick: () => deleteOrUndeleteCommentCallback(targetItem, true),
                 disabled: isNotOwner || isDeleted || isGroupArchived,
@@ -538,24 +539,24 @@ const TMBlogsPost = (props) => {
         }
         if (targetItem && contextMenuParams.isRestoreEnabled) {
             menuItems.push({
-                icon: "undo",
-                text: SDKUI_Localizator.Restore,
+                icon: _jsx("span", { className: "dx-icon-undo" }),
+                name: SDKUI_Localizator.Restore,
                 onClick: () => deleteOrUndeleteCommentCallback(targetItem, false),
                 disabled: isNotOwner || (targetItem && (targetItem.isDel === undefined || targetItem.isDel === 0)),
             });
         }
         if (targetItem && contextMenuParams.isCopyToClipboardEnabled) {
             menuItems.push({
-                text: SDKUI_Localizator.CopyToClipboard,
-                icon: 'copy',
+                name: SDKUI_Localizator.CopyToClipboard,
+                icon: _jsx("span", { className: "dx-icon-copy" }),
                 disabled: false,
                 onClick: () => { copyInClipboard(targetItem); }
             });
         }
         if (contextMenuParams.isCreateContextualTask) {
             menuItems.push({
-                text: SDKUI_Localizator.CreateContextualTask,
-                icon: 'plus',
+                name: SDKUI_Localizator.CreateContextualTask,
+                icon: _jsx("span", { className: "dx-icon-plus" }),
                 onClick: () => openTaskFormCallback(targetItem),
                 disabled: isGroupArchived ? true : false,
                 beginGroup: true
@@ -563,15 +564,15 @@ const TMBlogsPost = (props) => {
         }
         if (targetItem && Boolean(classId && (classId === 'WG' || classId === 'DS'))) {
             menuItems.push({
-                icon: "eyeclose",
-                text: SDKUI_Localizator.Unfollow,
+                icon: _jsx("span", { className: "dx-icon-eyeclose" }),
+                name: SDKUI_Localizator.Unfollow,
                 onClick: () => (targetItem && classId) && unFollowCallback(targetItem, classId),
             });
         }
         if (contextMenuParams.isShowHideFilterEnabled) {
             menuItems.push({
-                icon: isHeaderHidden ? 'eyeopen' : 'eyeclose',
-                text: isHeaderHidden ? SDKUI_Localizator.ShowFilters : SDKUI_Localizator.HideFilters,
+                icon: _jsx("span", { className: isHeaderHidden ? "dx-icon-eyeopen" : "dx-icon-eyeclose" }),
+                name: isHeaderHidden ? SDKUI_Localizator.ShowFilters : SDKUI_Localizator.HideFilters,
                 onClick: toggleHeaderClick,
                 disabled: false,
                 beginGroup: true
@@ -579,23 +580,24 @@ const TMBlogsPost = (props) => {
         }
         if (contextMenuParams.isShowHideIDEnaled) {
             menuItems.push({
-                icon: localShowId ? 'eyeclose' : 'eyeopen',
+                icon: _jsx("span", { className: localShowId ? "dx-icon-eyeclose" : "dx-icon-eyeopen" }),
                 onClick: () => setLocalShowId(prevShowId => !prevShowId),
-                text: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+                name: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
                 disabled: false,
             });
         }
         if (contextMenuParams.isRefreshEnabled && refreshCallback !== undefined) {
             menuItems.push({
-                icon: "refresh",
-                text: SDKUI_Localizator.Refresh,
+                icon: _jsx("span", { className: "dx-icon-refresh" }),
+                name: SDKUI_Localizator.Refresh,
                 onClick: refresh,
                 disabled: false,
             });
         }
         if (menuItems.length > 0) {
-            setAnchorEl(event.currentTarget);
+            setMenuPosition({ x: event.clientX, y: event.clientY });
             setMenuItems(menuItems);
+            setMenuVisible(true);
         }
     };
     const handlePostsToShowChange = (value) => {
@@ -606,12 +608,31 @@ const TMBlogsPost = (props) => {
         setSearchText(value);
     };
     const closeContextMenu = useCallback(() => {
-        setAnchorEl(null);
+        setMenuVisible(false);
     }, []);
+    const handleNavigateToReference = (ref) => {
+        switch (ref.objClass) {
+            case ObjectClasses.Dossier:
+                if (ref.objID)
+                    handleNavigateToDossiers?.(ref.objID);
+                else
+                    console.log("Dossier reference missing objID");
+                break;
+            case ObjectClasses.WorkingGroup:
+                if (ref.objID)
+                    handleNavigateToWGs?.(ref.objID);
+                else
+                    console.log("Working Group reference missing objID");
+                break;
+            // Handle other object types as needed
+            default:
+                console.warn(`Unhandled object type: ${ref.objClass}`);
+        }
+    };
     return _jsx("div", { ref: containerRef, style: { height: height, width: width }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: localShowWaitPanel, showWaitPanelPrimary: localShowPrimary, waitPanelTitle: localWaitPanelTitle, waitPanelTextPrimary: localWaitPanelTextPrimary, waitPanelValuePrimary: localWaitPanelValuePrimary, waitPanelMaxValuePrimary: localWaitPanelMaxValuePrimary, isCancelable: true, abortController: localAbortController, children: [_jsx(TMBlogHeader, { isVisible: currentHeader !== undefined && !isHeaderHidden, layoutMode: layoutMode, height: layoutMode === 'extended' ? "40px" : "70px", width: "100%", allPosts: posts, postsToShow: postsToShow, onPostsToShowChange: handlePostsToShowChange, categoryIdDataSource: categoryIdDataSource, appliedCategoryIdFilters: appliedCategoryIdFilters, setAppliedCategoryIdFilters: setAppliedCategoryIdFilters, searchText: searchText, onSearchChange: handleSearchChange }), _jsxs("div", { style: {
                             width: "100%",
                             height: currentHeader !== undefined && !isHeaderHidden ? `calc(100% - ${layoutMode === 'extended' ? "40px" : "70px"})` : "100%",
-                        }, children: [blogPosts.length === 0 && _jsx(TMToppyMessage, { message: searchText.length > 0 ? SDKUI_Localizator.NoMessagesFound : SDKUI_Localizator.NoMessages }), blogPosts.length > 0 && _jsxs("div", { tabIndex: 0, onKeyDown: handleKeyDown, onContextMenu: onContextMenu, style: {
+                        }, children: [blogPosts.length === 0 && _jsx(TMToppyMessage, { message: searchText.length > 0 ? SDKUI_Localizator.NoMessagesFound : SDKUI_Localizator.NoMessages }), blogPosts.length > 0 && _jsxs("div", { id: `${id}-blogs-container`, tabIndex: 0, onKeyDown: handleKeyDown, onContextMenu: onContextMenu, style: {
                                     height: '100%',
                                     width: '100%',
                                     outline: "none",
@@ -659,7 +680,11 @@ const TMBlogsPost = (props) => {
                                                             boxShadow: isFocused ? "0 4px 12px rgba(19, 85, 150, 0.6)" : "none",
                                                             cursor: 'pointer',
                                                         }, children: [_jsx(BlogPostTitle, { displayMode: displayMode, layoutMode: layoutMode, blogPost: blogPost, isSelected: isSelected, isOwnComment: isOwnComment, searchText: searchText, isSys: isSys, isHomeBlogPost: isHomeBlogPost, showId: localShowId, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), isNew && _jsx(NewBadge, { layoutMode: layoutMode }), _jsx("div", { style: { fontSize: '1rem', color: "#000", marginTop: "10px", overflow: "hidden" }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0 && (_jsx(TMBlogAttachments, { attachments: blogPost.attachments, layoutMode: layoutMode, isSelected: isSelected, searchText: searchText, dcmtTypeDescriptors: dcmtTypeDescriptors, treeFs: treeFs, draftLatestInfoMap: draftLatestInfoMap, archivedDocumentMap: archivedDocumentMap, handleAttachmentFocus: handleFocusedAttachment, openDcmtForm: openDcmtForm }))] }, `${id}-blogpost-${blogPost.id}`) })] }, "blog-post-wrapper-" + id + "-" + blogPost.id);
-                                    }), _jsx("div", { ref: bottomRef }), anchorEl && _jsx("div", { style: { position: 'fixed', zIndex: 9999 }, children: _jsx(ContextMenu, { dataSource: menuItems, target: anchorEl, onHiding: closeContextMenu }) })] }), (showTaskForm && handleNavigateToWGs && handleNavigateToDossiers && getAllTasks && deleteTaskByIdsCallback && addTaskCallback && editTaskCallback) && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsx(TMTaskForm, { id: -1, title: SDKUI_Localizator.ContextualTask, isModal: true, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '670px', '80%', '95%'), formMode: FormModes.Create, visualizedTasks: [], currentTask: currentTask, setCurrentTask: () => { }, selectedRowKeys: [], handleFocusedRowKeyChange: () => { }, onStatusChanged: () => { }, onSaved: onSavedTaskFormCallback, onClose: () => closeTaskFormCallback(), onCancel: () => closeTaskFormCallback(), usersList: participants, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, isContextualCreate: true, taskContext: taskContext, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback }) }), (dcmtForm.dcmt && dcmtForm.dcmt.TID && dcmtForm.dcmt.DID) && _jsx(TMDcmtForm, { TID: Number(dcmtForm.dcmt.TID), DID: Number(dcmtForm.dcmt.DID), layoutMode: LayoutModes.Update, onClose: closeDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + dcmtForm.dcmt.fileName, isModal: true, widthModal: "95%", heightModal: "95%", allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), (showFloatingCommentButton && showCommentFormCallback && !(context?.engine === 'WorkingGroupEngine' && context?.object?.customData1 === 1)) && _jsx("button", { style: {
+                                    }), _jsx("div", { ref: bottomRef }), _jsx(TMContextMenu, { items: menuItems, target: `#${id}-blogs-container`, externalControl: {
+                                            visible: menuVisible,
+                                            position: menuPosition,
+                                            onClose: closeContextMenu,
+                                        } })] }), (showTaskForm && handleNavigateToWGs && handleNavigateToDossiers && getAllTasks && deleteTaskByIdsCallback && addTaskCallback && editTaskCallback) && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsx(TMTaskForm, { id: -1, title: SDKUI_Localizator.ContextualTask, isModal: true, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '670px', '80%', '95%'), formMode: FormModes.Create, visualizedTasks: [], currentTask: currentTask, setCurrentTask: () => { }, selectedRowKeys: [], handleFocusedRowKeyChange: () => { }, onStatusChanged: () => { }, onSaved: onSavedTaskFormCallback, onClose: () => closeTaskFormCallback(), onCancel: () => closeTaskFormCallback(), usersList: participants, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, isContextualCreate: true, taskContext: taskContext, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback }) }), (dcmtForm.dcmt && dcmtForm.dcmt.TID && dcmtForm.dcmt.DID) && _jsx(TMDcmtForm, { TID: Number(dcmtForm.dcmt.TID), DID: Number(dcmtForm.dcmt.DID), layoutMode: LayoutModes.Update, onClose: closeDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + dcmtForm.dcmt.fileName, isModal: true, widthModal: "95%", heightModal: "95%", allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, onReferenceClick: handleNavigateToReference }), (showFloatingCommentButton && showCommentFormCallback && !(context?.engine === 'WorkingGroupEngine' && context?.object?.customData1 === 1)) && _jsx("button", { style: {
                                     position: 'absolute',
                                     bottom: '18px',
                                     right: '20px',

package/lib/components/grids/TMRecentsManager.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { useCallback, useEffect, useState } from 'react';
-import ReactDOMServer from 'react-dom/server';
 import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts';
-import ContextMenu from 'devextreme-react/context-menu';
+import { ContextMenu as TMContextMenu } from '../NewComponents/ContextMenu';
 import { IconDelete, SDKUI_Localizator, IconApply, IconInfo, IconCloseOutline } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import { DeviceType } from '../base/TMDeviceProvider';
@@ -62,11 +61,15 @@ const StyledRecentTidItem = styled.div `
         margin-bottom: 0;
     }
 `;
-const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
 const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = 'all', onSelectedTID, onDeletedTID }) => {
     const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
     const [recentDcmtTypes, setRecentDcmtTypes] = useState([]);
     const [infoDTD, setInfoDTD] = useState();
+    const [contextMenuState, setContextMenuState] = useState({
+        visible: false,
+        position: { x: 0, y: 0 },
+        tid: null
+    });
     // Handler for the cache refresh event
     const handleCacheRefresh = useCallback(async () => {
         // Retrieve all document types without metadata from the refreshed cache
@@ -114,7 +117,10 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = '
                                     textOverflow: 'ellipsis'
                                 }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true, accessFilter)})` }) }) }, 0), recentDcmtTypes.map((dtd) => {
                         const isCurrent = currentMruTID == dtd.id;
-                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
+                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, onContextMenu: (e) => {
+                                e.preventDefault();
+                                setContextMenuState({ visible: true, position: { x: e.clientX, y: e.clientY }, tid: dtd.id ?? null });
+                            }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
                                                 marginRight: 4,
                                                 display: 'flex',
                                                 alignItems: 'center'
@@ -135,20 +141,24 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = '
                                                 fontWeight: 'bold',
                                                 marginLeft: 8,
                                                 visibility: isCurrent ? 'visible' : 'hidden'
-                                            }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }), _jsx(ContextMenu, { dataSource: [
+                                            }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }), contextMenuState.tid === dtd.id && (_jsx(TMContextMenu, { items: [
                                         {
-                                            text: SDKUI_Localizator.Remove,
-                                            icon: iconDelete(),
+                                            name: SDKUI_Localizator.Remove,
+                                            icon: _jsx(IconDelete, {}),
                                             onClick: () => { onDeletedTID?.(dtd.id ?? 0); }
                                         },
                                         ...(isMobile ? [
                                             {
-                                                text: SDKUI_Localizator.About,
-                                                icon: ReactDOMServer.renderToString(_jsx(IconInfo, { color: TMColors.info })),
+                                                name: SDKUI_Localizator.About,
+                                                icon: _jsx(IconInfo, { color: TMColors.info }),
                                                 onClick: () => { setInfoDTD(dtd); }
                                             }
                                         ] : [])
-                                    ], target: `#tid-${dtd.id}` })] }, dtd.id));
+                                    ], target: `#tid-${dtd.id}`, externalControl: {
+                                        visible: contextMenuState.visible,
+                                        position: contextMenuState.position,
+                                        onClose: () => setContextMenuState({ visible: false, position: { x: 0, y: 0 }, tid: null })
+                                    } }))] }, dtd.id));
                     })] }), showDcmtTypeChooser &&
                 _jsx(TMDcmtTypeChooserForm, { accessFilter: accessFilter, onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] }));
 };

package/lib/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './base/TMTreeView';
 export * from './base/TMPanel';
 export * from './base/TMResizableMenu';
 export * from './base/TMAccordionNew';
+export * from './NewComponents/ContextMenu';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';
@@ -92,6 +93,7 @@ export { default as SettingsAppearance } from "./settings/SettingsAppearance";
 export * from "./viewers/TMTidViewer";
 export * from "./viewers/TMMidViewer";
 export * from "./viewers/TMDataListItemViewer";
+export * from "./viewers/TMDataUserIdItemViewer";
 export * from "./base/TMDeviceProvider";
 export { default as TMDataGrid } from "./base/TMDataGrid";
 export { default as TMFileManager } from "./base/TMFileManager";
@@ -112,5 +114,7 @@ export * from "./features/workflow/diagram/WFDiagram";
 export * from "./features/workflow/diagram/workflowHelpers";
 export * from "./features/workflow/diagram/xmlParser";
 export * from "./features/workflow/diagram/interfaces";
+export * from "./features/workflow/diagram/DiagramItemSvgContent";
+export * from "./features/workflow/TMWorkflowPopup";
 export { default as TMWizard } from './wizard/TMWizard';
 export * from './wizard/TMWizard';

package/lib/components/index.js

@@ -17,6 +17,7 @@ export * from './base/TMTreeView';
 export * from './base/TMPanel';
 export * from './base/TMResizableMenu';
 export * from './base/TMAccordionNew';
+export * from './NewComponents/ContextMenu';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';
@@ -110,6 +111,7 @@ export { default as SettingsAppearance } from "./settings/SettingsAppearance";
 export * from "./viewers/TMTidViewer";
 export * from "./viewers/TMMidViewer";
 export * from "./viewers/TMDataListItemViewer";
+export * from "./viewers/TMDataUserIdItemViewer";
 //TMDeviceProvider
 export * from "./base/TMDeviceProvider";
 export { default as TMDataGrid } from "./base/TMDataGrid";
@@ -133,6 +135,8 @@ export * from "./features/workflow/diagram/WFDiagram";
 export * from "./features/workflow/diagram/workflowHelpers";
 export * from "./features/workflow/diagram/xmlParser";
 export * from "./features/workflow/diagram/interfaces";
+export * from "./features/workflow/diagram/DiagramItemSvgContent";
+export * from "./features/workflow/TMWorkflowPopup";
 // wizard
 export { default as TMWizard } from './wizard/TMWizard';
 export * from './wizard/TMWizard';

package/lib/components/settings/SettingsAppearance.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
-import TMLayoutContainer from '../base/TMLayout';
+import { useMemo } from 'react';
 import TMDropDown from '../editors/TMDropDown';
 import TMCheckBox from '../editors/TMCheckBox';
 import TMButton from '../base/TMButton';
 import { LandingPages, SDKUI_Globals, SDKUI_Localizator, ThemeSettings } from '../../helper';
+import { useSettingsFeedback } from '../../hooks/useSettingsFeedback';
+import TMTooltip from '../base/TMTooltip';
 const fontSizes = [
     { value: "10px", display: "10px" },
     { value: "11px", display: "11px" },
@@ -23,8 +24,7 @@ const fontFamilies = [
     { value: "Roboto", display: "Roboto" }
 ];
 const SettingsAppearance = ({ landingPagesOptions, permissions = { canArchive: true, canSearch: true, dossiersLicense: true, wgGroupLicense: true, workFlowLicense: true } }) => {
-    const [, setForceUpdate] = useState(0); // Dummy state to force re-renders
-    const triggerUIUpdate = () => setForceUpdate((prev) => prev + 1); // Increment dummy state to re-render
+    const { showSavedBadge, lastChanged, triggerUIUpdate, closeBadge } = useSettingsFeedback();
     const filteredLandingPageOptopns = useMemo(() => {
         let options = landingPagesOptions ?? [];
         if (!permissions?.canArchive) {
@@ -44,30 +44,93 @@ const SettingsAppearance = ({ landingPagesOptions, permissions = { canArchive: t
         }
         return options;
     }, [permissions?.canArchive, permissions?.canSearch, permissions?.wgGroupLicense, permissions?.dossiersLicense, permissions?.workFlowLicense, landingPagesOptions]);
-    return (_jsxs(TMLayoutContainer, { children: [landingPagesOptions && _jsx("p", { style: { fontSize: '1.h1rem', fontWeight: 'bold', marginBottom: '5px' }, children: SDKUI_Localizator.LandingPage }), landingPagesOptions && _jsx(TMDropDown, { dataSource: filteredLandingPageOptopns, value: SDKUI_Globals.userSettings.landingPage, width: '230px', onValueChanged: (e) => {
-                    SDKUI_Globals.userSettings.landingPage = e.target.value;
-                    triggerUIUpdate();
-                } }), _jsx("p", { style: { fontSize: '1.h1rem', fontWeight: 'bold', marginTop: '10px' }, children: 'Font' }), _jsx(TMDropDown, { label: SDKUI_Localizator.Name, dataSource: fontFamilies, width: '230px', value: SDKUI_Globals.userSettings.themeSettings.fontFamily, onValueChanged: (e) => {
-                    let newFamily = e.target.value;
-                    SDKUI_Globals.userSettings.themeSettings.fontFamily = newFamily;
-                    triggerUIUpdate();
-                } }), _jsx(TMDropDown, { label: SDKUI_Localizator.Size, dataSource: fontSizes, width: '230px', value: SDKUI_Globals.userSettings.themeSettings.fontSize, onValueChanged: (e) => {
-                    let newpx = e.target.value;
-                    SDKUI_Globals.userSettings.themeSettings.fontSize = newpx;
-                    triggerUIUpdate();
-                } }), _jsx("p", { style: { fontSize: '1rem', fontWeight: 'bold', marginTop: '10px', marginBottom: '5px' }, children: SDKUI_Localizator.Grids }), _jsx(TMCheckBox, { label: SDKUI_Localizator.ShowRowSeparatingLines, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.showRowLines, onValueChanged: (newValue) => {
-                    SDKUI_Globals.userSettings.themeSettings.gridSettings.showRowLines = newValue;
-                    triggerUIUpdate();
-                } }), _jsx(TMCheckBox, { label: SDKUI_Localizator.ShowColumnSeparatingLines, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.showColumnLines, onValueChanged: (newValue) => {
-                    SDKUI_Globals.userSettings.themeSettings.gridSettings.showColumnLines = newValue;
-                    triggerUIUpdate();
-                } }), _jsx(TMCheckBox, { label: SDKUI_Localizator.UseNativeScrollbar, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.useNativeScrollbar, onValueChanged: (newValue) => {
-                    SDKUI_Globals.userSettings.themeSettings.gridSettings.useNativeScrollbar = newValue;
-                    triggerUIUpdate();
-                } }), _jsx(TMButton, { elementStyle: { marginTop: '10px' }, caption: SDKUI_Localizator.Restore, showTooltip: false, onClick: () => {
-                    SDKUI_Globals.userSettings.themeSettings = new ThemeSettings();
-                    SDKUI_Globals.userSettings.landingPage = LandingPages.DASHBOARD;
-                    triggerUIUpdate();
-                } })] }));
+    return (_jsxs("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column", position: "relative" }, children: [_jsxs("div", { style: { flex: 1, overflowY: "auto", padding: "4px" }, children: [_jsxs("div", { style: {
+                            backgroundColor: "rgba(var(--primary-rgb, 33, 150, 243), 0.04)",
+                            borderLeft: "3px solid var(--primary-color, #2196f3)",
+                            borderRadius: "4px",
+                            padding: "10px 12px",
+                            marginBottom: "6px"
+                        }, children: [_jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "6px",
+                                    marginBottom: "8px"
+                                }, children: [_jsx("i", { className: "dx-icon-font", style: { fontSize: "1.1rem", color: "var(--primary-color, #2196f3)" } }), _jsx("p", { style: { fontSize: '1.05rem', fontWeight: '600', margin: 0, color: "var(--text-primary, #333)" }, children: "Font" })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [_jsx(TMDropDown, { label: SDKUI_Localizator.Name, dataSource: fontFamilies, width: '100%', value: SDKUI_Globals.userSettings.themeSettings.fontFamily, onValueChanged: (e) => {
+                                            let newFamily = e.target.value;
+                                            SDKUI_Globals.userSettings.themeSettings.fontFamily = newFamily;
+                                            triggerUIUpdate(SDKUI_Localizator.Name, newFamily);
+                                        } }), _jsx(TMDropDown, { label: SDKUI_Localizator.Size, dataSource: fontSizes, width: '100%', value: SDKUI_Globals.userSettings.themeSettings.fontSize, onValueChanged: (e) => {
+                                            let newpx = e.target.value;
+                                            SDKUI_Globals.userSettings.themeSettings.fontSize = newpx;
+                                            triggerUIUpdate(SDKUI_Localizator.Size, newpx);
+                                        } })] })] }), _jsxs("div", { style: {
+                            backgroundColor: "rgba(var(--success-rgb, 76, 175, 80), 0.04)",
+                            borderLeft: "3px solid var(--success-color, #4caf50)",
+                            borderRadius: "4px",
+                            padding: "10px 12px",
+                            marginBottom: "6px"
+                        }, children: [_jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "6px",
+                                    marginBottom: "8px"
+                                }, children: [_jsx("i", { className: "dx-icon-tableproperties", style: { fontSize: "1.1rem", color: "var(--success-color, #4caf50)" } }), _jsx("p", { style: { fontSize: '1.05rem', fontWeight: '600', margin: 0, color: "var(--text-primary, #333)" }, children: SDKUI_Localizator.Grids })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "5px" }, children: [_jsx(TMCheckBox, { label: SDKUI_Localizator.ShowRowSeparatingLines, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.showRowLines, onValueChanged: (newValue) => {
+                                            SDKUI_Globals.userSettings.themeSettings.gridSettings.showRowLines = newValue;
+                                            triggerUIUpdate(SDKUI_Localizator.ShowRowSeparatingLines, newValue ? 'Attivo' : 'Non attivo');
+                                        } }), _jsx(TMCheckBox, { label: SDKUI_Localizator.ShowColumnSeparatingLines, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.showColumnLines, onValueChanged: (newValue) => {
+                                            SDKUI_Globals.userSettings.themeSettings.gridSettings.showColumnLines = newValue;
+                                            triggerUIUpdate(SDKUI_Localizator.ShowColumnSeparatingLines, newValue ? 'Attivo' : 'Non attivo');
+                                        } }), _jsx(TMCheckBox, { label: SDKUI_Localizator.UseNativeScrollbar, value: SDKUI_Globals.userSettings.themeSettings.gridSettings.useNativeScrollbar, onValueChanged: (newValue) => {
+                                            SDKUI_Globals.userSettings.themeSettings.gridSettings.useNativeScrollbar = newValue;
+                                            triggerUIUpdate(SDKUI_Localizator.UseNativeScrollbar, newValue ? 'Attivo' : 'Non attivo');
+                                        } })] })] }), landingPagesOptions && (_jsxs("div", { style: {
+                            backgroundColor: "rgba(var(--warning-rgb, 255, 152, 0), 0.04)",
+                            borderLeft: "3px solid var(--warning-color, #ff9800)",
+                            borderRadius: "4px",
+                            padding: "10px 12px"
+                        }, children: [_jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "6px",
+                                    marginBottom: "8px"
+                                }, children: [_jsx("i", { className: "dx-icon-home", style: { fontSize: "1.1rem", color: "var(--warning-color, #ff9800)" } }), _jsx("p", { style: { fontSize: '1.05rem', fontWeight: '600', margin: 0, color: "var(--text-primary, #333)" }, children: SDKUI_Localizator.LandingPage })] }), _jsx(TMDropDown, { dataSource: filteredLandingPageOptopns, value: SDKUI_Globals.userSettings.landingPage, width: '100%', onValueChanged: (e) => {
+                                    const selectedOption = filteredLandingPageOptopns.find(opt => opt.value === e.target.value);
+                                    SDKUI_Globals.userSettings.landingPage = e.target.value;
+                                    triggerUIUpdate(SDKUI_Localizator.LandingPage, selectedOption?.display || e.target.value);
+                                } })] }))] }), _jsxs("div", { style: { borderTop: "1px solid #e0e0e0", flexShrink: 0, paddingTop: "5px", display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: [_jsx(TMButton, { elementStyle: { marginTop: '0px' }, caption: SDKUI_Localizator.Restore, showTooltip: false, onClick: () => {
+                            SDKUI_Globals.userSettings.themeSettings = new ThemeSettings();
+                            SDKUI_Globals.userSettings.landingPage = LandingPages.DASHBOARD;
+                            triggerUIUpdate(SDKUI_Localizator.Restore, 'Impostazioni predefinite', true);
+                        } }), showSavedBadge && (_jsxs("div", { style: {
+                            marginTop: "5px",
+                            backgroundColor: "#4caf50",
+                            color: "white",
+                            padding: "7px 12px",
+                            fontSize: "0.95rem",
+                            borderRadius: "4px",
+                            boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "10px",
+                            width: "100%",
+                            maxWidth: "350px",
+                            boxSizing: "border-box"
+                        }, children: [_jsx("i", { className: "dx-icon-save", style: { fontSize: "1rem", flexShrink: 0 } }), _jsx("div", { style: {
+                                    flex: 1,
+                                    minWidth: 0,
+                                    overflow: "hidden"
+                                }, children: _jsxs("div", { style: {
+                                        display: "inline-flex",
+                                        alignItems: "center",
+                                        gap: "5px",
+                                        whiteSpace: "nowrap",
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis"
+                                    }, children: [_jsx("span", { children: SDKUI_Localizator.SettingSavedSuccessfully }), _jsx(TMTooltip, { content: `${lastChanged.label}: ${lastChanged.value}`, children: _jsx("i", { className: "dx-icon-info" }) })] }) }), _jsx("i", { className: "dx-icon-close", style: {
+                                    fontSize: "0.9rem",
+                                    flexShrink: 0,
+                                    cursor: "pointer",
+                                    opacity: 0.8
+                                }, onClick: closeBadge })] }))] })] }));
 };
 export default SettingsAppearance;

package/lib/components/viewers/TMDataListItemViewer.d.ts

@@ -4,7 +4,8 @@ interface ITMDataListItemViewerProps {
     dataListId?: number;
     value?: string | Date | number;
     viewMode?: DataListViewModes;
+    showTooltip?: boolean;
 }
-declare const TMDataListItemViewer: ({ dataListId, value, viewMode }: ITMDataListItemViewerProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMDataListItemViewer: ({ dataListId, value, viewMode, showTooltip }: ITMDataListItemViewerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TMDataListItemViewer;
 export declare const cellRenderDataListItem: (data: DataGridTypes.ColumnCellTemplateData, dataListId?: number, viewMode?: DataListViewModes) => import("react/jsx-runtime").JSX.Element;

package/lib/components/viewers/TMDataListItemViewer.js

@@ -1,78 +1,42 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { DataListCacheService, DataListViewModes } from '@topconsultnpm/sdk-ts';
-import { IconWarning, SDKUI_Localizator, TMImageLibrary } from '../../helper';
-import { StyledDivHorizontal } from '../base/Styled';
+import { DataListViewModes } from '@topconsultnpm/sdk-ts';
+import { SDKUI_Localizator } from '../../helper';
 import TMTooltip from '../base/TMTooltip';
-import { TMColors } from '../../utils/theme';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
-import { FormulaHelper } from '../editors/TMFormulaEditor';
-const TMDataListItemViewer = ({ dataListId, value, viewMode = DataListViewModes.ImageAndDescription }) => {
-    const [dataListItem, setDataListItem] = useState();
+import { useDataListItem } from '../../hooks/useDataListItem';
+const TMDataListItemViewer = ({ dataListId, value, viewMode = DataListViewModes.ImageAndDescription, showTooltip = true }) => {
+    const { loadDataListsAsync, getDataListItem, renderDataListCell, convertToDataListValue } = useDataListItem();
+    const [dataListItem, setDataListItem] = useState(undefined);
     useEffect(() => {
-        if (!dataListId || value === undefined || value === null) {
-            setDataListItem(undefined);
-            return;
-        }
-        let stringValue;
-        if (value instanceof Date) {
-            stringValue = value.toISOString();
-        }
-        else if (typeof value === 'number') {
-            stringValue = value.toString();
-        }
-        else {
-            stringValue = value;
-        }
-        DataListCacheService.GetAsync(dataListId).then((dl) => { setDataListItem(dl?.items?.find(o => o.value == stringValue)); }).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
-    }, [dataListId, value]);
-    let showIcon = viewMode != DataListViewModes.Description;
-    const getIcon = () => {
-        if (!showIcon)
-            return null;
-        if (value === undefined || value === null)
-            return null;
-        let stringValue;
-        if (value instanceof Date) {
-            stringValue = value.toISOString();
-        }
-        else if (typeof value === 'number') {
-            stringValue = value.toString();
-        }
-        else {
-            stringValue = value;
-        }
-        if (FormulaHelper.isFormula(stringValue))
-            return null;
-        return dataListItem ? _jsx(TMImageLibrary, { imageID: dataListItem.imageID }) : _jsx(IconWarning, { color: TMColors.warning });
-    };
-    const getDescription = () => {
-        if (!dataListId)
-            return undefined;
-        if (value === undefined || value === null)
-            return undefined;
-        let displayValue;
-        if (value instanceof Date) {
-            displayValue = value.toLocaleDateString();
-        }
-        else if (typeof value === 'number') {
-            displayValue = value.toString();
-        }
-        else {
-            displayValue = value;
-        }
-        return dataListItem ? dataListItem.name : displayValue;
-    };
-    return (_jsx(TMTooltip, { content: dataListItem ? dataListItem.value : SDKUI_Localizator.ValueNotPresent, parentStyle: { width: '100%' }, childStyle: { width: '100%' }, children: _jsxs(StyledDivHorizontal, { style: { width: '100%' }, children: [getIcon(), _jsx("p", { style: {
-                        textAlign: 'left',
-                        marginLeft: showIcon ? '5px' : '',
-                        opacity: dataListItem ? 1 : 0.5,
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        flexGrow: 1,
-                        minWidth: 0
-                    }, children: getDescription() })] }) }));
+        const loadData = async () => {
+            if (dataListId) {
+                try {
+                    await loadDataListsAsync(new Set([dataListId]));
+                    if (value !== undefined && value !== null) {
+                        const stringValue = convertToDataListValue(value);
+                        const item = getDataListItem(dataListId, stringValue);
+                        setDataListItem(item);
+                    }
+                    else {
+                        setDataListItem(undefined);
+                    }
+                }
+                catch (err) {
+                    TMExceptionBoxManager.show({ exception: err });
+                }
+            }
+            else {
+                setDataListItem(undefined);
+            }
+        };
+        loadData();
+    }, [dataListId, value, loadDataListsAsync, getDataListItem, convertToDataListValue]);
+    if (!dataListId || value === undefined || value === null) {
+        return null;
+    }
+    const content = renderDataListCell(value, dataListId, viewMode);
+    return showTooltip ? (_jsx(TMTooltip, { content: dataListItem ? dataListItem.value : SDKUI_Localizator.ValueNotPresent, parentStyle: { width: '100%' }, childStyle: { width: '100%' }, children: content })) : content;
 };
 export default TMDataListItemViewer;
 export const cellRenderDataListItem = (data, dataListId, viewMode) => {

package/lib/components/viewers/TMDataUserIdItemViewer.d.ts

@@ -0,0 +1,8 @@
+import { DataGridTypes } from 'devextreme-react/data-grid';
+interface ITMDataUserIdItemViewerProps {
+    userId?: number;
+    showIcon?: boolean;
+}
+declare const TMDataUserIdItemViewer: ({ userId, showIcon }: ITMDataUserIdItemViewerProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TMDataUserIdItemViewer;
+export declare const cellRenderUserIdItem: (data: DataGridTypes.ColumnCellTemplateData, showIcon?: boolean) => import("react/jsx-runtime").JSX.Element;