@topconsultnpm/sdkui-react 6.20.0-dev1.13 → 6.20.0-dev1.131

package/lib/components/features/workflow/diagram/WFDiagram.js

@@ -1,19 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef, useMemo, useLayoutEffect } from 'react';
 import { DiagramItemTypes, ArrowSymbol } from './interfaces';
 import { parseWfDiagramXml, serializeWfDiagramToXml } from './xmlParser';
 import styled, { css, keyframes } from 'styled-components';
-import { CultureIDs, DataListCacheService, SearchEngine, WFAppTypes, WorkItemStatus } from "@topconsultnpm/sdk-ts";
+import { AppModules, CultureIDs, DataListCacheService, SDK_Globals, SearchEngine, WFAppTypes, WorkItemStatus } from "@topconsultnpm/sdk-ts";
 import ConnectionComponent from './ConnectionComponent';
 import DiagramItemComponent from './DiagramItemComponent';
 import DiagramItemSvgContent from './DiagramItemSvgContent';
 import { calculateArrowAngle, downloadFile, getConnectionPoint, getNewWfDiagram, isConnectionNonLinear, validateDiagram } from './workflowHelpers';
-import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator, generateUUID, IconExport, IconImport, IconWindowMaximize, IconZoomIn, IconZoomOut, IconPencil, IconLock, LocalizeDiagramItemType, IconWindowMinimize } from '../../../../helper';
+import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator, generateUUID, IconExport, IconImport, IconWindowMaximize, IconZoomIn, IconZoomOut, IconPencil, IconLock, LocalizeDiagramItemType, IconWindowMinimize, IconZoomAuto } from '../../../../helper';
 import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from '../../../base/TMPopUp';
 import { StyledLoadingContainer, StyledSpinner } from '../../../base/Styled';
 import DiagramItemForm from './DiagramItemForm';
 import ReactDOM from 'react-dom';
 import ConnectionForm from './ConnectionForm';
+import TMFloatingMenuBar from '../../../NewComponents/FloatingMenuBar';
 const ZoomLevelText = styled.span `
     font-size: 0.9em;
     color: #555; 
@@ -21,6 +22,7 @@ const ZoomLevelText = styled.span `
     background-color: white;
     padding: 2px 4px; /* Aggiunto un leggero padding per chiarezza */
     border-radius: 4px;
+    width: 40px;
 
     /* A. Modalità Compressa (non Floating & Collapsed) */
     ${props => !props.$isFloating && props.$isCollapsed
@@ -317,13 +319,15 @@ const DiagramMessage = styled.div `
   color: #555;
   text-align: center;
 `;
-const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagramChange }) => {
+const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagramChange, workitems, defaultAutoZoom = false, onDiagramItemClick }) => {
     const [isReadOnly, setIsReadOnly] = useState(true);
     const [isFullScreen, setIsFullScreen] = useState(false);
     const [zoomLevel, setZoomLevel] = useState(1);
     const [translateX, setTranslateX] = useState(0);
     const [translateY, setTranslateY] = useState(0);
+    const [isAutoZoomEnabled, setIsAutoZoomEnabled] = useState(defaultAutoZoom);
     const [isLoading, setIsLoading] = useState(true);
+    const [isInitialZoomCalculated, setIsInitialZoomCalculated] = useState(!defaultAutoZoom);
     const [wfDiagram, setWfDiagram] = useState(null);
     const [selectedItems, setSelectedItems] = useState(new Set());
     const [selectedConnections, setSelectedConnections] = useState(new Set());
@@ -333,11 +337,29 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
     const initialDiagramRef = useRef(null);
     const notifiedXmlRef = useRef(null);
     const svgRef = useRef(null);
+    const containerRef = useRef(null);
     const [isDrawingConnection, setIsDrawingConnection] = useState(false);
     const [tempConnectionSource, setTempConnectionSource] = useState(null);
     const [tempConnectionEnd, setTempConnectionEnd] = useState(null);
     const [mouseDownPos, setMouseDownPos] = useState(null);
     const [isDraggingExistingConnectionEndpoint, setIsDraggingExistingConnectionEndpoint] = useState(false);
+    // Helper function per ottenere il colore di sfondo basato sullo stato del workitem
+    const getWorkItemBackgroundColor = useCallback((setID) => {
+        if (!workitems || workitems.length === 0)
+            return undefined;
+        const workitem = workitems.find(wi => wi.setID === setID);
+        if (!workitem || !workitem.setStatus || workitem.setStatus.value === undefined)
+            return undefined;
+        const statusValue = typeof workitem.setStatus.value === 'number'
+            ? workitem.setStatus.value
+            : parseInt(String(workitem.setStatus.value), 10);
+        switch (statusValue) {
+            case 0: return '#FFFACD'; // Giallo pastello (lemon chiffon) (nuovo)
+            case 1: return '#C8E6C9'; // Verde pastello (completato)
+            case -1: return '#FFCDD2'; // Rosso pastello (rifiutato)
+            default: return '#e0e0e0'; // Grigio di default
+        }
+    }, [workitems]);
     const [draggingConnectionId, setDraggingConnectionId] = useState(null);
     const [draggingEndpointType, setDraggingEndpointType] = useState(null);
     const [draggingConnectionFixedPoint, setDraggingConnectionFixedPoint] = useState(null);
@@ -1236,6 +1258,12 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
         setDraggedItemType(null);
     }, [isDrawingConnection, tempConnectionSource, tempConnectionEnd, isDrawingSelectionRect, selectionRectStart, selectionRectEnd, wfDiagram, zoomLevel, translateX, translateY, isReadOnly, isDraggingExistingConnectionEndpoint, draggingConnectionId, draggingEndpointType, draggingConnectionFixedPoint]);
     const handleDiagramItemClick = useCallback((id, event) => {
+        // Se allowEdit è false e ci sono workitems, delega al parent se la callback è definita
+        if (!allowEdit && workitems && workitems.length > 0 && onDiagramItemClick) {
+            event.stopPropagation();
+            onDiagramItemClick(id, event);
+            return;
+        }
         if (isReadOnly)
             return;
         event.stopPropagation();
@@ -1258,7 +1286,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
         });
         if (!isCtrlPressed)
             setSelectedConnections(new Set());
-    }, [isReadOnly]);
+    }, [isReadOnly, allowEdit, workitems, onDiagramItemClick]);
     const handleConnectionClick = useCallback((id, event) => {
         if (isReadOnly)
             return;
@@ -1607,6 +1635,54 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
     const handleZoomOut = useCallback(() => {
         setZoomLevel(prev => Math.max(prev - 0.1, 0.5)); // Limite min a 0.5
     }, []);
+    const calculateOptimalZoom = useCallback(() => {
+        if (!wfDiagram || !containerRef.current || wfDiagram.DiagramItems.length === 0) {
+            return 1;
+        }
+        // Calcola il bounding box del diagramma
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        wfDiagram.DiagramItems.forEach(item => {
+            minX = Math.min(minX, item.Left);
+            minY = Math.min(minY, item.Top);
+            maxX = Math.max(maxX, item.Left + item.Width);
+            maxY = Math.max(maxY, item.Top + item.Height + 50);
+        });
+        const padding = 100; // Padding intorno al diagramma
+        const diagramWidth = maxX - minX + (padding * 2);
+        const diagramHeight = maxY - minY + (padding * 2);
+        // Ottieni le dimensioni del container
+        const containerWidth = containerRef.current.clientWidth;
+        const containerHeight = containerRef.current.clientHeight;
+        // Calcola il fattore di zoom per far entrare tutto il contenuto
+        const zoomX = containerWidth / diagramWidth;
+        const zoomY = containerHeight / diagramHeight;
+        // Usa il fattore più piccolo per garantire che tutto sia visibile
+        let optimalZoom = Math.min(zoomX, zoomY, 2.0); // Max 2.0
+        // Applica un minimo di 0.3 per evitare zoom troppo piccoli
+        optimalZoom = Math.max(optimalZoom, 0.3);
+        // Arrotonda per eccesso alla decina più vicina (in percentuale)
+        const zoomPercentage = optimalZoom * 100;
+        const roundedPercentage = Math.ceil(zoomPercentage / 10) * 10;
+        // Limita al massimo 100%
+        const finalPercentage = Math.min(roundedPercentage, 100);
+        return finalPercentage / 100;
+    }, [wfDiagram]);
+    const handleToggleAutoZoom = useCallback(() => {
+        setIsAutoZoomEnabled(prev => {
+            const newValue = !prev;
+            if (newValue) {
+                // Se si attiva AutoZoom, calcola lo zoom ottimale, altrimenti mantieni il livello di zoom corrente
+                const optimalZoom = calculateOptimalZoom();
+                setZoomLevel(optimalZoom);
+                setTranslateX(0);
+                setTranslateY(0);
+            }
+            return newValue;
+        });
+    }, [calculateOptimalZoom]);
     const formattedZoomLevel = useMemo(() => {
         return `${Math.round(zoomLevel * 100)}%`;
     }, [zoomLevel]);
@@ -1645,8 +1721,6 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
         catch (error) {
             console.error("Errore durante l'elaborazione del diagramma:", error);
             setWfDiagram(null);
-        }
-        finally {
             setIsLoading(false);
         }
     }, [xmlDiagramString, getAdjustedAndRecalculatedDiagram]);
@@ -1655,11 +1729,78 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
             isUndoingRedoing.current = false;
         }
     }, [wfDiagram]);
+    // useLayoutEffect viene eseguito PRIMA del paint del browser, evitando il flash visivo
+    useLayoutEffect(() => {
+        if (defaultAutoZoom && !isInitialZoomCalculated && wfDiagram && wfDiagram.DiagramItems.length > 0 && containerRef.current) {
+            const container = containerRef.current;
+            // Calcola il bounding box del diagramma
+            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+            wfDiagram.DiagramItems.forEach(item => {
+                minX = Math.min(minX, item.Left);
+                minY = Math.min(minY, item.Top);
+                maxX = Math.max(maxX, item.Left + item.Width);
+                maxY = Math.max(maxY, item.Top + item.Height + 50);
+            });
+            const padding = 100;
+            const diagramWidth = maxX - minX + (padding * 2);
+            const diagramHeight = maxY - minY + (padding * 2);
+            const containerWidth = container.clientWidth;
+            const containerHeight = container.clientHeight;
+            if (containerWidth > 0 && containerHeight > 0) {
+                const zoomX = containerWidth / diagramWidth;
+                const zoomY = containerHeight / diagramHeight;
+                let optimalZoom = Math.min(zoomX, zoomY, 2.0);
+                optimalZoom = Math.max(optimalZoom, 0.3);
+                const zoomPercentage = optimalZoom * 100;
+                const roundedPercentage = Math.ceil(zoomPercentage / 10) * 10;
+                const finalPercentage = Math.min(roundedPercentage, 100);
+                setZoomLevel(finalPercentage / 100);
+                setIsInitialZoomCalculated(true);
+                setIsLoading(false);
+            }
+            else {
+                // Se il container non ha dimensioni, riprova al prossimo render
+                requestAnimationFrame(() => {
+                    setIsInitialZoomCalculated(false);
+                });
+            }
+        }
+        else if (!defaultAutoZoom && wfDiagram && isLoading) {
+            // Se non c'è autozoom, rimuovi il loading appena il diagramma è pronto
+            setIsLoading(false);
+        }
+    }, [wfDiagram, defaultAutoZoom, isInitialZoomCalculated, isLoading]);
+    // Gestisce AutoZoom: ricalcola lo zoom quando il diagramma cambia o il container viene ridimensionato
+    useEffect(() => {
+        if (!containerRef.current || !isAutoZoomEnabled || !isInitialZoomCalculated) {
+            return;
+        }
+        // Funzione per ricalcolare e applicare lo zoom se necessario
+        const updateZoom = () => {
+            if (wfDiagram && wfDiagram.DiagramItems.length > 0) {
+                const newZoom = calculateOptimalZoom();
+                if (newZoom !== undefined && Math.abs(zoomLevel - newZoom) > 0.001) {
+                    setZoomLevel(newZoom);
+                }
+            }
+        };
+        // Ricalcola lo zoom quando il diagramma cambia
+        updateZoom();
+        // Installa ResizeObserver per reagire ai ridimensionamenti del container
+        const container = containerRef.current;
+        const resizeObserver = new ResizeObserver(() => {
+            updateZoom();
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [isAutoZoomEnabled, wfDiagram, calculateOptimalZoom, isInitialZoomCalculated, zoomLevel]);
     const handleCanvasDoubleClick = useCallback((event) => {
-        if (isReadOnly) {
+        if (isReadOnly && allowEdit) {
             toggleReadOnlyMode();
         }
-    }, [isReadOnly, toggleReadOnlyMode]);
+    }, [isReadOnly, allowEdit, toggleReadOnlyMode]);
     const handleFullScreenKeyDown = useCallback((event) => {
         if (event.key === 'Escape') {
             // Blocca sempre la propagazione per evitare che TMSaveForm riceva l'evento
@@ -1672,6 +1813,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
         }
     }, [isModalOpen, isConnectionModalOpen]);
     const fullScreenRef = useRef(null);
+    const diagramRef = useRef(null);
     // Gestione focus automatico quando si entra in fullscreen
     useEffect(() => {
         if (isFullScreen && fullScreenRef.current) {
@@ -1679,8 +1821,18 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
         }
     }, [isFullScreen]);
     const diagramContent = (_jsxs(CanvasContainer, { onDoubleClick: handleCanvasDoubleClick, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".xml" // Filtra per file XML
-                , onChange: handleFileChange, style: { display: 'none' } }), _jsxs(ToolbarContainer, { "$isCollapsed": isToolbarCollapsed, "$isFloating": isToolbarFloating, "$isToolboxVisible": isToolboxVisible, "$isReadOnly": isReadOnly, children: [allowEdit && _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: toggleReadOnlyMode, title: isReadOnly ? SDKUI_Localizator.Design : SDKUI_Localizator.ReadOnly, children: [isReadOnly ? _jsx(IconPencil, {}) : _jsx(IconLock, {}), !isToolbarCollapsed && _jsx("span", { children: isReadOnly ? SDKUI_Localizator.Design : SDKUI_Localizator.ReadOnly })] }) }), allowEdit && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [!isReadOnly && _jsxs("button", { onClick: handleToggleToolboxVisibility, title: SDKUI_Localizator.ShowToolbox, children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ShowToolboxToggle })] }), _jsxs("button", { onClick: toggleFullScreenMode, title: SDKUI_Localizator.ShowFullScreen, children: [isFullScreen ? _jsx(IconWindowMinimize, {}) : _jsx(IconWindowMaximize, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ShowFullScreen })] })] }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleZoomIn, title: SDKUI_Localizator.ZoomIn, children: [_jsx(IconZoomIn, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomIn })] }), _jsxs("button", { onClick: handleZoomOut, title: SDKUI_Localizator.ZoomOut, children: [_jsx(IconZoomOut, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomOut })] }), _jsx(ZoomLevelText, { "$isFloating": isToolbarFloating, "$isCollapsed": isToolbarCollapsed, children: formattedZoomLevel })] }), !isReadOnly && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: SDKUI_Localizator.Undo, children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Undo })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: SDKUI_Localizator.Redo, children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Redo })] }), _jsxs("button", { onClick: handleRestore, title: SDKUI_Localizator.Restore, children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Restore })] }), _jsxs("button", { onClick: handleNew, title: SDKUI_Localizator.DiagramNew, disabled: isReadOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.DiagramNew })] }), _jsxs("button", { onClick: handleExportDiagram, disabled: isReadOnly || !wfDiagram, title: SDKUI_Localizator.Export, children: [_jsx(IconExport, {}), _jsx("span", { children: SDKUI_Localizator.Export })] }), _jsxs("button", { onClick: handleImportDiagramClick, disabled: isReadOnly, title: SDKUI_Localizator.Import, children: [_jsx(IconImport, {}), _jsx("span", { children: SDKUI_Localizator.Import })] })] }), !isReadOnly && _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: SDKUI_Localizator.AutoAdjust, children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.AutoAdjust })] }) }), !isReadOnly && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: SDKUI_Localizator.Copy, children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Copy })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: SDKUI_Localizator.Cut, children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Cut })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: SDKUI_Localizator.Paste, children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Paste })] })] }), allowEdit && _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? SDKUI_Localizator.ToolbarDock : SDKUI_Localizator.ToolbarFloat, children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: SDKUI_Localizator.ToggleMode })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? SDKUI_Localizator.ToolbarExpand : SDKUI_Localizator.ToolbarCollapse, children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] }), !isReadOnly && (_jsx(ToolboxContainer, { "$isVisible": isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(ToolboxIconWrapper, { children: _jsx(DiagramItemSvgContent, { itemType: type, width: 38, height: 38, isToolboxPreview: true }) }), _jsx("span", { children: LocalizeDiagramItemType(type) })] }, type))) })), _jsx(SvgScrollContainer, { children: isLoading ?
-                    (_jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento diagramma'}...` })] })) : wfDiagram ? (_jsx(StyledSvg, { ref: svgRef, tabIndex: 0, onKeyDownCapture: handleKeyDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onDrop: handleDropOnCanvas, onDragOver: handleDragOver, width: svgWidth, height: svgHeight, children: _jsxs(ScalableGroup, { "$scale": zoomLevel, "$translateX": translateX, "$translateY": translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { wf: wfDiagram?.Info, readOnly: isReadOnly, item: item, isSelected: selectedItems.has(item.ID), isCurrent: item.ID === currentSetID, onClick: handleDiagramItemClick, onDrag: handleDrag, onDragEnd: handleDragEnd, onConnectorMouseDown: handleConnectorMouseDown, onConnectorMouseUp: handleConnectorMouseUp, onDimensionsChange: handleItemDimensionsChange, onDoubleClick: handleDoubleClickItem }, item.ID))), calculatedConnections.map(connection => {
+                , onChange: handleFileChange, style: { display: 'none' } }), SDK_Globals.tmSession?.SessionDescr?.appModuleID === AppModules.SURFER ?
+                _jsx(TMFloatingMenuBar, { containerRef: diagramRef, defaultPosition: { x: 45, y: 85 }, enableConfigMode: false, fixedItems: [
+                        { icon: _jsx(IconZoomIn, {}), name: SDKUI_Localizator.ZoomIn, disabled: isAutoZoomEnabled, onClick: () => { handleZoomIn(); }, id: 'zoom-in', isPinned: true },
+                        { icon: _jsx(IconZoomOut, {}), name: SDKUI_Localizator.ZoomOut, disabled: isAutoZoomEnabled, onClick: () => { handleZoomOut(); }, id: 'zoom-out', isPinned: true },
+                        { icon: _jsx(IconZoomAuto, {}), name: 'AutoZoom', onClick: () => { handleToggleAutoZoom(); }, id: 'zoom-auto', isPinned: true, isToggle: isAutoZoomEnabled },
+                        { icon: _jsx(_Fragment, {}), name: 'Zoom Level', onClick: () => { }, id: 'zoom-level', isPinned: true, staticItem: _jsx(ZoomLevelText, { "$isFloating": isToolbarFloating, "$isCollapsed": isToolbarCollapsed, children: formattedZoomLevel }) }
+                    ], isConstrained: true }) :
+                _jsxs(ToolbarContainer, { "$isCollapsed": isToolbarCollapsed, "$isFloating": isToolbarFloating, "$isToolboxVisible": isToolboxVisible, "$isReadOnly": isReadOnly, children: [allowEdit && _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: toggleReadOnlyMode, title: isReadOnly ? SDKUI_Localizator.Design : SDKUI_Localizator.ReadOnly, children: [isReadOnly ? _jsx(IconPencil, {}) : _jsx(IconLock, {}), !isToolbarCollapsed && _jsx("span", { children: isReadOnly ? SDKUI_Localizator.Design : SDKUI_Localizator.ReadOnly })] }) }), allowEdit && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [!isReadOnly && _jsxs("button", { onClick: handleToggleToolboxVisibility, title: SDKUI_Localizator.ShowToolbox, children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ShowToolboxToggle })] }), _jsxs("button", { onClick: toggleFullScreenMode, title: SDKUI_Localizator.ShowFullScreen, children: [isFullScreen ? _jsx(IconWindowMinimize, {}) : _jsx(IconWindowMaximize, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ShowFullScreen })] })] }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleZoomIn, title: SDKUI_Localizator.ZoomIn, disabled: isAutoZoomEnabled, children: [_jsx(IconZoomIn, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomIn })] }), _jsxs("button", { onClick: handleZoomOut, title: SDKUI_Localizator.ZoomOut, disabled: isAutoZoomEnabled, children: [_jsx(IconZoomOut, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomOut })] }), _jsxs("button", { onClick: handleToggleAutoZoom, title: "AutoZoom", style: { backgroundColor: isAutoZoomEnabled ? '#66b3ff' : undefined }, children: [_jsx(IconZoomAuto, {}), !isToolbarCollapsed && _jsx("span", { children: "AutoZoom" })] }), _jsx(ZoomLevelText, { "$isFloating": isToolbarFloating, "$isCollapsed": isToolbarCollapsed, children: formattedZoomLevel })] }), !isReadOnly && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: SDKUI_Localizator.Undo, children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Undo })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: SDKUI_Localizator.Redo, children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Redo })] }), _jsxs("button", { onClick: handleRestore, title: SDKUI_Localizator.Restore, children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Restore })] }), _jsxs("button", { onClick: handleNew, title: SDKUI_Localizator.DiagramNew, disabled: isReadOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.DiagramNew })] }), _jsxs("button", { onClick: handleExportDiagram, disabled: isReadOnly || !wfDiagram, title: SDKUI_Localizator.Export, children: [_jsx(IconExport, {}), _jsx("span", { children: SDKUI_Localizator.Export })] }), _jsxs("button", { onClick: handleImportDiagramClick, disabled: isReadOnly, title: SDKUI_Localizator.Import, children: [_jsx(IconImport, {}), _jsx("span", { children: SDKUI_Localizator.Import })] })] }), !isReadOnly && _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: SDKUI_Localizator.AutoAdjust, children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.AutoAdjust })] }) }), !isReadOnly && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: SDKUI_Localizator.Copy, children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Copy })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: SDKUI_Localizator.Cut, children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Cut })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: SDKUI_Localizator.Paste, children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Paste })] })] }), allowEdit && _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? SDKUI_Localizator.ToolbarDock : SDKUI_Localizator.ToolbarFloat, children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: SDKUI_Localizator.ToggleMode })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? SDKUI_Localizator.ToolbarExpand : SDKUI_Localizator.ToolbarCollapse, children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] }), !isReadOnly && (_jsx(ToolboxContainer, { "$isVisible": isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(ToolboxIconWrapper, { children: _jsx(DiagramItemSvgContent, { itemType: type, width: 38, height: 38, isToolboxPreview: true }) }), _jsx("span", { children: LocalizeDiagramItemType(type) })] }, type))) })), _jsx(SvgScrollContainer, { ref: containerRef, children: isLoading ?
+                    (_jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento diagramma'}...` })] })) : wfDiagram ? (_jsx(StyledSvg, { ref: svgRef, tabIndex: 0, onKeyDownCapture: handleKeyDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onDrop: handleDropOnCanvas, onDragOver: handleDragOver, width: svgWidth, height: svgHeight, style: {
+                        opacity: (defaultAutoZoom && !isInitialZoomCalculated) ? 0 : 1,
+                        transition: 'opacity 0.15s ease-in'
+                    }, children: _jsxs(ScalableGroup, { "$scale": zoomLevel, "$translateX": translateX, "$translateY": translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { wf: wfDiagram?.Info, readOnly: isReadOnly, allowItemClick: !allowEdit && workitems && workitems.length > 0 && !!onDiagramItemClick, item: item, isSelected: selectedItems.has(item.ID), isCurrent: item.ID === currentSetID, onClick: handleDiagramItemClick, onDrag: handleDrag, onDragEnd: handleDragEnd, onConnectorMouseDown: handleConnectorMouseDown, onConnectorMouseUp: handleConnectorMouseUp, onDimensionsChange: handleItemDimensionsChange, onDoubleClick: handleDoubleClickItem, backgroundColor: getWorkItemBackgroundColor(item.ID) }, item.ID))), calculatedConnections.map(connection => {
                                 const sourceItem = wfDiagram?.DiagramItems.find(item => item.ID === connection.Source.ParentDiagramItem.ID);
                                 const sinkItem = wfDiagram?.DiagramItems.find(item => item.ID === connection.Sink.ParentDiagramItem.ID);
                                 if (!sourceItem || !sinkItem)
@@ -1692,7 +1844,6 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
                                 const isThisConnectionBeingDragged = isDraggingExistingConnectionEndpoint && draggingConnectionId === connection.ID;
                                 return (_jsx(ConnectionComponent, { connection: connection, isSelected: selectedConnections.has(connection.ID), sourcePoint: sourcePoint, sinkPoint: sinkPoint, isTemporary: isThisConnectionBeingDragged, onClick: handleConnectionClick, onDoubleClick: handleDoubleClickConnection, onConnectionEndpointMouseDown: handleConnectionEndpointMouseDown }, connection.ID));
                             }), isDrawingConnection && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDraggingExistingConnectionEndpoint && tempConnectionPathData && (_jsx(TempConnectionPath, { d: tempConnectionPathData })), isDrawingSelectionRect && currentSelectionRect && (_jsx(SelectionRect, { x: currentSelectionRect.x, y: currentSelectionRect.y, width: currentSelectionRect.width, height: currentSelectionRect.height }))] }) })) : (_jsx(DiagramMessage, { children: `${SDKUI_Localizator.WorkflowDiagramMissingOrInvalid} ...` })) }), isModalOpen && itemToEdit && (_jsx(DiagramItemForm, { itemToEdit: itemToEdit, wf: wfDiagram?.Info, onClose: handleCloseModal, onApply: handleUpdateDiagramItem })), isConnectionModalOpen && connectionToEdit && (_jsx(ConnectionForm, { connectionToEdit: connectionToEdit, onClose: () => setIsConnectionModalOpen(false), onApply: handleUpdateConnection }))] }));
-    const diagramRef = useRef(null);
     return (_jsxs(_Fragment, { children: [!isFullScreen && (_jsx(DiagramWrapper, { ref: diagramRef, children: diagramContent })), isFullScreen && ReactDOM.createPortal(_jsx(FullScreenContainer, { ref: fullScreenRef, tabIndex: 0, onKeyDown: handleFullScreenKeyDown, children: diagramContent }), document.body)] }));
 };
 export default WFDiagram;

package/lib/components/forms/Login/LoginValidatorService.d.ts

@@ -3,6 +3,8 @@ import { TMEndpointsType } from './TMLoginForm';
 export interface LoginData {
     endpoint: TMEndpointsType;
     dcmtArchive: ArchiveDescriptor;
+    manualArchiveID?: string;
+    hasArchives?: boolean;
     authenticationMode: AuthenticationModes;
     username?: string;
     password?: string;

package/lib/components/forms/Login/LoginValidatorService.js

@@ -27,8 +27,13 @@ export class LoginValidator {
         if (!data.endpoint?.Description?.trim()) {
             addError("endpoint", SDKUI_Localizator.RequiredField);
         }
-        if (!data.dcmtArchive?.description?.trim()) {
-            addError("dcmtArchive", SDKUI_Localizator.RequiredField);
+        if (data.hasArchives) {
+            if (!data.dcmtArchive?.description?.trim()) {
+                addError("dcmtArchive", SDKUI_Localizator.RequiredField);
+            }
+        }
+        else if (!data.manualArchiveID?.trim()) {
+            addError("manualArchiveID", SDKUI_Localizator.RequiredField);
         }
         if (!data.authenticationMode || data.authenticationMode === AuthenticationModes.None) {
             addError("authenticationMode", SDKUI_Localizator.RequiredField);

package/lib/components/forms/Login/TMLoginForm.js

@@ -8,6 +8,7 @@ import frMessages from "devextreme/localization/messages/fr.json";
 import itMessages from "devextreme/localization/messages/it.json";
 import ptMessages from "devextreme/localization/messages/pt.json";
 import { locale as dxlocale, loadMessages } from "devextreme/localization";
+import { devextremeCustomMessages } from "../../../helper/devextremeCustomMessages";
 import styled from "styled-components";
 import Menu from "./Menu";
 import TextBox from "./TextBox";
@@ -81,6 +82,7 @@ export const useCultureID = ({ cultureID = CultureIDs.It_IT }) => {
         loadMessages(frMessages);
         loadMessages(itMessages);
         loadMessages(ptMessages);
+        loadMessages(devextremeCustomMessages); // Fix traduzioni mancanti in DevExtreme
     }, []);
     return (currentCultureID);
 };
@@ -111,6 +113,7 @@ const TMLoginForm = (props) => {
     const [showCultureIDs, setShowCultureIDs] = useState(false);
     const [dcmtArchives, setDcmtArchives] = useState([]);
     const [dcmtArchive, setDcmtArchive] = useState();
+    const [manualArchiveID, setManualArchiveID] = useState('');
     const [authMode, setAuthMode] = useState(AuthenticationModes.TopMedia);
     const [username, setUsername] = useState('SysAdmin');
     const [password, setPassword] = useState('');
@@ -131,6 +134,8 @@ const TMLoginForm = (props) => {
             authenticationMode: authMode,
             cultureID: props.cultureID ?? CultureIDs.It_IT,
             dcmtArchive: dcmtArchive,
+            manualArchiveID: manualArchiveID,
+            hasArchives: dcmtArchives.length > 0,
             endpoint: endpoint,
             authDomain: authDomain,
             authDomainOnBehalfOf: authDomain,
@@ -142,7 +147,7 @@ const TMLoginForm = (props) => {
             username: username,
             usernameOnBehalfOf: usernameOnBehalf
         };
-    }, [authMode, props.cultureID, dcmtArchive, endpoint, authDomain, otpCode, password, passwordOnBehalf, saveLoginName, saveLoginEnable, username, usernameOnBehalf]);
+    }, [authMode, props.cultureID, dcmtArchive, manualArchiveID, dcmtArchives.length, endpoint, authDomain, otpCode, password, passwordOnBehalf, saveLoginName, saveLoginEnable, username, usernameOnBehalf]);
     const inputRefs = useMemo(() => {
         switch (authMode) {
             case AuthenticationModes.TopMedia:
@@ -259,7 +264,7 @@ const TMLoginForm = (props) => {
             { value: AuthenticationModes.TopMediaWithMFA, display: LOGINLocalizator.TopMediaWithMFA },
             { value: AuthenticationModes.TopMediaOnBehalfOf, display: SDKUI_Localizator.AuthMode_OnBehalfOf },
             { value: AuthenticationModes.WindowsThroughTopMedia, display: SDKUI_Localizator.AuthMode_WindowsViaTopMedia },
-            { value: AuthenticationModes.MSAzure, display: 'MSAzure' }];
+            { value: AuthenticationModes.MSAzure, display: 'Microsoft Entra ID' }];
     }, [props.cultureID]);
     const accessPointAdditionalIcons = useMemo(() => {
         return [
@@ -302,7 +307,7 @@ const TMLoginForm = (props) => {
     }, []);
     const disableContinueBtn = useMemo(() => {
         switch (loginStep) {
-            case 1: return fieldValidations('endpoint').length > 0 || fieldValidations('dcmtArchive').length > 0;
+            case 1: return fieldValidations('endpoint').length > 0 || fieldValidations('dcmtArchive').length > 0 || fieldValidations('manualArchiveID').length > 0;
             case 2: return fieldValidations('authenticationMode').length > 0 || fieldValidations('username').length > 0 || fieldValidations('password').length > 0;
             default: return false;
         }
@@ -321,8 +326,13 @@ const TMLoginForm = (props) => {
         return tmSession;
     }, [endpoint, username, dcmtArchive]);
     const nextStepHandler = async () => {
-        if (!endpoint || !dcmtArchive)
+        if (!endpoint || (!dcmtArchive && !manualArchiveID))
             return;
+        if (loginStep === 1 && !dcmtArchive && manualArchiveID) {
+            const isValid = await validateManualArchiveAsync();
+            if (!isValid)
+                return;
+        }
         if (loginStep === 1) {
             setLoginStep(2);
         }
@@ -349,6 +359,23 @@ const TMLoginForm = (props) => {
             return;
         setLoginStep(prev => prev - 1);
     }, [loginStep]);
+    const validateManualArchiveAsync = async () => {
+        if (!tmSession || !manualArchiveID)
+            return false;
+        try {
+            TMSpinner.show({ description: '' });
+            const archiveEngine = tmSession.NewArchiveEngine();
+            await archiveEngine.RetrieveAsync(manualArchiveID);
+            return true;
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+            return false;
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
     const getArchivesAsync = async () => {
         if (!tmSession)
             return;
@@ -392,7 +419,7 @@ const TMLoginForm = (props) => {
             const sdInput = {
                 authenticationMode: authMode,
                 appModuleID: props.appModule,
-                archiveID: dcmtArchive?.id,
+                archiveID: dcmtArchive?.id ?? (dcmtArchives.length === 0 && manualArchiveID ? manualArchiveID : undefined),
                 description: dcmtArchive?.description,
                 userName: username,
                 password: password,
@@ -594,7 +621,7 @@ const TMLoginForm = (props) => {
         }
     }, [SDK_Globals.appModule]);
     return (_jsxs(StyledWrapper, { children: [!isMobile && _jsxs(StyledVersionContainer, { children: [_jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.primary }, children: "\u25CF" }), SDK_Globals.appModule] }), _jsxs("p", { children: ["v.", SDK_Globals.appVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.tertiary }, children: "\u25CF" }), "SDKUI"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkuiVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.error }, children: "\u25CF" }), "SDK"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkVersion] })] })] }), _jsxs(StyledLoginContainer, { "$isMobile": isMobile, children: [_jsxs(StyledLeftSection, { "$isMobile": isMobile, "$isConnector": props.isConnector ?? false, children: [isMobile && _jsxs(StyledTopBar, { children: [_jsx(StyledTitle, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') + ' ' + welcomeAppNameHeader + ' ' + 'v.' + SDK_Globals.appVersion }), _jsx(StyledMobileVersionIcon, { onClick: showVersionPopup, children: _jsx(IconInfo, { fontSize: 20, color: TMColors.primary }) })] }), _jsx(StyledOverlay, { "$isMobile": isMobile, children: _jsx(StyledCustomLogo, { style: { backgroundImage: `url(${showDefaultLogo ? 'logo-default.svg' : 'logo-custom.svg'})` } }) }), (windowHeight === WindowHeight.LARGE || !isMobile) && _jsxs(StyledPoweredByContainer, { "$isMobile": isMobile, children: [" ", showDefaultLogo ? 'Powered by TopConsult' : _jsx("img", { src: "/logo-default.svg", alt: "Logo", width: isMobile ? 50 : 100 }), " "] })] }), _jsxs(StyledRightSection, { "$isMobile": isMobile, children: [((((getDeviceType() === 'desktop' || isDesktop || isTablet) && windowHeight !== WindowHeight.SMALL)) && !isMobile) && _jsxs(StyledLogoContainer, { "$isMobile": isMobile, children: [_jsx(StyledWelcomeText, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') }), _jsx(StyledLogo, { children: _jsx("img", { src: six, alt: "six", height: 50 }) }), _jsx(StyledWelcomeText, { children: welcomeAppName })] }), _jsxs(StyledToolbarContainer, { children: [_jsx(StyledLanguageChooser, { onClick: () => setShowCultureIDs(true), children: _jsx(TMTooltip, { content: SDKUI_Localizator.CultureID, children: _jsx("img", { src: getCultureIDImg(), alt: "Lang", width: 25, height: 25 }) }) }), loginStep !== 3 && _jsx(TMButton, { btnStyle: "icon", onClick: () => setShowRapidAccess(true), icon: _jsx(IconFastAccess, { fontSize: 20 }), caption: LOGINLocalizator.QuickAccess }), showPasswordOperations && _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "icon", onClick: () => setShowChangePassword(true), icon: _jsx(IconPasswordOutline, { fontSize: 19 }), caption: SDKUI_Localizator.ChangePassword })] }), _jsxs(StyledFormContainer, { "$isMobile": isMobile, "$windowHeight": windowHeight, children: [loginStep === 1 &&
-                                        _jsxs(StyledStepContainer, { "$deviceType": deviceType, children: [_jsx(Chooser, { isDropDown: isDesktop, dataSource: props.endpoints, value: 'Description', columns: accessPointChooserColumns, additionalIcons: accessPointAdditionalIcons, icon: _jsx(IconAccessPoint, {}), label: SDKUI_Localizator.Endpoint, onSelectionChanged: (ep) => { setEndpoint(ep); setDcmtArchive(undefined); }, validationItems: fieldValidations('endpoint'), selectedRow: endpoint ?? undefined }), _jsx(Chooser, { isDropDown: isDesktop, dataSource: dcmtArchives, value: 'description', columns: dcmtArchiveChooserColumns, icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, onSelectionChanged: (arch) => setDcmtArchive(arch), validationItems: fieldValidations('dcmtArchive'), disabled: !endpoint, selectedRow: dcmtArchive ?? undefined })] }), loginStep === 2 &&
+                                        _jsxs(StyledStepContainer, { "$deviceType": deviceType, children: [_jsx(Chooser, { isDropDown: isDesktop, dataSource: props.endpoints, value: 'Description', columns: accessPointChooserColumns, additionalIcons: accessPointAdditionalIcons, icon: _jsx(IconAccessPoint, {}), label: SDKUI_Localizator.Endpoint, onSelectionChanged: (ep) => { setEndpoint(ep); setDcmtArchive(undefined); }, validationItems: fieldValidations('endpoint'), selectedRow: endpoint ?? undefined }), dcmtArchives.length > 0 ? (_jsx(Chooser, { isDropDown: isDesktop, dataSource: dcmtArchives, value: 'description', columns: dcmtArchiveChooserColumns, icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, onSelectionChanged: (arch) => setDcmtArchive(arch), validationItems: fieldValidations('dcmtArchive'), disabled: !endpoint, selectedRow: dcmtArchive ?? undefined })) : (_jsx(TextBox, { type: "text", icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, value: manualArchiveID, onValueChanged: (value) => setManualArchiveID(value), validationItems: fieldValidations('manualArchiveID'), disabled: !endpoint, placeHolder: 'Inserisci archivio' }))] }), loginStep === 2 &&
                                         _jsxs(_Fragment, { children: [_jsxs(StyledSummaryContainer, { style: {
                                                         display: 'flex',
                                                         justifyContent: 'center',
@@ -604,7 +631,7 @@ const TMLoginForm = (props) => {
                                                         marginBottom: windowHeight === WindowHeight.SMALL ? '30px' : '25px',
                                                         width: '100%',
                                                         minHeight: '15px'
-                                                    }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: endpoint?.Description ?? '', children: _jsx("p", { children: endpoint?.Description && endpoint.Description.length > 20 ? endpoint.Description.substring(0, 20) + '...' : endpoint?.Description }) })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: dcmtArchive?.description ?? '', children: _jsx("p", { children: dcmtArchive?.description && dcmtArchive.description.length > 20 ? dcmtArchive.description.substring(0, 20) + '...' : dcmtArchive?.description }) })] })] }), _jsxs(StyledStepContainer, { "$windowHeight": windowHeight, "$deviceType": deviceType, children: [_jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), authMode !== AuthenticationModes.MSAzure && _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps) }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
+                                                    }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: endpoint?.Description ?? '', children: _jsx("p", { children: endpoint?.Description && endpoint.Description.length > 20 ? endpoint.Description.substring(0, 20) + '...' : endpoint?.Description }) })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID, children: _jsx(StyledArchiveText, { children: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID }) })] })] }), _jsxs(StyledStepContainer, { "$windowHeight": windowHeight, "$deviceType": deviceType, children: [_jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), authMode !== AuthenticationModes.MSAzure && _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps) }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
                                                                     _jsxs(StyledCredentialWrapper, { children: [_jsx(TextBox, { value: authDomain, ref: authDomainRef, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameOnBehalfOfRef, secondaryRef: passwordOnBehalfOfRRef, usernameValidator: fieldValidations('usernameOnBehalfOf'), passwordValidator: fieldValidations('passwordOnBehalfOf'), authMode: AuthenticationModes.TopMediaOnBehalfOf, username: usernameOnBehalf, password: passwordOnBehalf, onUsernameChanged: (un) => setUsernameOnBehalf(un), onPasswordChanged: (ps) => setPasswordOnBehalf(ps) })] })] }), authMode !== AuthenticationModes.TopMediaWithMFA &&
                                                             _jsx(RapidAccessContainer, { isSaveEnable: saveLoginEnable, name: saveLoginName, nameValidationItems: fieldValidations('rapidAccessName'), onEnableSaveChange: () => setSaveLoginEnable(!saveLoginEnable), onNameChange: (name) => setSaveLoginName(name) })] })] }), loginStep === 3 &&
                                         _jsxs(StyledStepThreeContainer, { "$isMobile": isMobile, children: [_jsx(OTPReader, { isMobile: isMobile, digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange, text: _jsxs("div", { children: [" ", LOGINLocalizator.EnterOtpInstructions, " "] }), header: '', additionalButtons: [
@@ -703,6 +730,7 @@ const StyledLogo = styled.div ` display: flex; gap: 5px; align-items: center; `;
 const StyledFormContainer = styled.div ` display: flex; flex-direction: column; padding: ${props => getPadding(props.$windowHeight, props.$isMobile)} ; align-items: center; justify-content: center; gap: 10px; width: 100%; height: fit-content; max-height: calc(100% - 100px); margin-top : ${props => !props.$isMobile && props.$windowHeight === WindowHeight.MEDIUM ? '70px' : '0'} ; `;
 const StyledButtonContainer = styled.div ` display: flex; align-items: center; justify-content: center; padding: ${props => props.$windowHeight !== WindowHeight.SMALL ? '10px' : '0'}; width: 100%; margin-top: ${props => props.$windowHeight !== WindowHeight.SMALL ? '10px' : '0'}; `;
 const StyledDescription = styled.div ` display: flex; align-items: center; gap: 2px; `;
+const StyledArchiveText = styled.p ` max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; `;
 const StyledRapidLoginSave = styled.div ` display: flex; flex-direction: column; width: 100%; gap: 2px; `;
 const StyledForgetPassword = styled.div ` position: absolute; bottom: ${props => props.$isMobile ? '15px' : '25px'}; left: 50%; transform: translateX(-50%); font-size: 0.8rem; `;
 const StyledBackButton = styled.div ` position: absolute; top: 20px; left: 20px; `;

package/lib/components/forms/TMChooserForm.js

@@ -88,7 +88,7 @@ const TMChooserForm = ({ children, title, allowMultipleSelection = false, allowA
     }, [manageUseLocalizedName, summaryItems]);
     return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: children ??
             filteredItems.length > 0
-            ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, searchPanelFocusStarting: true, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, showFilterPanel: showFilterPanel, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
+            ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, searchPanelFocusTrigger: 1, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, showFilterPanel: showFilterPanel, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
             : _jsx(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: _jsx(TMLayoutItem, { children: _jsx("p", { style: { height: "100%", color: TMColors.primaryColor, fontSize: "1.5rem", display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: SDKUI_Localizator.NoDataToDisplay }) }) }) }));
 };
 export default TMChooserForm;