@topconsultnpm/sdkui-react 6.20.0-dev1.77 → 6.20.0-dev1.78

package/lib/components/features/search/TMSearchResult.js

@@ -48,6 +48,7 @@ import { useCheckInOutOperations } from '../../../hooks/useCheckInOutOperations'
 import TMDcmtCheckoutInfoForm from './TMDcmtCheckoutInfoForm';
 import { useDataListItem } from '../../../hooks/useDataListItem';
 import { useDataUserIdItem } from '../../../hooks/useDataUserIdItem';
+import { LoadIndicator } from 'devextreme-react';
 let abortControllerLocal = new AbortController();
 //#region Helper Methods
 export const getSearchResultCountersSingleCategory = (searchResults) => {
@@ -795,9 +796,6 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
                 }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), (showSignSettingsForm && fromDTD) && _jsx(TMSignSettingsForm, { fromDTD: fromDTD, inputDcmts: allFieldSelectedDocs, onCloseSignSettingsForm: closeSignSettingsForm, onSavedAsyncCallback: handleSavedAsyncCallback }), (showHistory && fromDTD && getSelectedDcmtsOrFocused(selectedItems, focusedItem).length > 0) && _jsx(TMViewHistoryDcmt, { fromDTD: fromDTD, deviceType: deviceType, inputDcmt: getSelectedDcmtsOrFocused(selectedItems, focusedItem)[0], onClose: hideHistoryCallback, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), (commentFormState.show && getSelectedDcmtsOrFocused(selectedItems, focusedItem).length > 0) && _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid: getSelectedDcmtsOrFocused(selectedItems, focusedItem)[0].TID, did: getSelectedDcmtsOrFocused(selectedItems, focusedItem)[0].DID } }, onClose: hideCommentFormCallback, refreshCallback: triggerBlogRefresh, participants: [], showAttachmentsSection: true, allArchivedDocumentsFileItems: convertSearchResultDescriptorToFileItems(currentSearchResults ?? []), isCommentRequired: commentFormState.isRequired, removeAndEditAttachment: commentFormState.removeAndEditAttachment, selectedAttachmentDid: [Number(getSelectedDcmtsOrFocused(selectedItems, focusedItem)[0].DID)] })] }));
 };
 export default TMSearchResult;
-const renderDcmtIcon = (cellData, onDownloadDcmtsAsync, openInOffice) => {
-    return _jsx(TMDcmtIcon, { tid: cellData.data.TID, did: cellData.data.DID, fileExtension: cellData.data.FILEEXT, fileCount: cellData.data.FILECOUNT, isLexProt: cellData.data.IsLexProt, isMail: cellData.data.ISMAIL, isShared: cellData.data.ISSHARED, isSigned: cellData.data.ISSIGNED, downloadMode: 'openInNewWindow', onDownloadDcmtsAsync: onDownloadDcmtsAsync, openInOffice: openInOffice });
-};
 const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem, showSearch, allowMultipleSelection = true, showExportForm = false, onCloseExportForm, onFocusedItemChanged, onDownloadDcmtsAsync, onVisibleItemChanged, inputSelectedItems = [], lastUpdateSearchTime, searchResult, floatingMenuItems, onSelectionChanged, onDblClick }) => {
     const [dataSource, setDataSource] = useState();
     const [columns, setColumns] = useState([]);
@@ -806,6 +804,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
     const [focusedItem, setFocusedItem] = useState();
     const [visibleItems, setVisibleItems] = useState([]);
     const [pageSize, setPageSize] = useState(SDKUI_Globals.userSettings.searchSettings?.pageSize ?? TMDataGridPageSize.Large);
+    const [isDataGridReady, setIsDataGridReady] = useState(false);
     const { loadDataListsAsync, renderDataListCell, dataListsCache } = useDataListItem();
     const { loadUsersAsync, renderUserIdViewer, usersCache } = useDataUserIdItem();
     useEffect(() => {
@@ -882,6 +881,9 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
             }
         }
     }, [inputSelectedItems, inputFocusedItem, dataSource]);
+    const cellRenderDcmtIcon = useCallback((cellData, onDownloadDcmtsAsync, openInOffice) => {
+        return _jsx(TMDcmtIcon, { tid: cellData.data.TID, did: cellData.data.DID, fileExtension: cellData.data.FILEEXT, fileCount: cellData.data.FILECOUNT, isLexProt: cellData.data.IsLexProt, isMail: cellData.data.ISMAIL, isShared: cellData.data.ISSHARED, isSigned: cellData.data.ISSIGNED, downloadMode: 'openInNewWindow', onDownloadDcmtsAsync: onDownloadDcmtsAsync, openInOffice: openInOffice });
+    }, []);
     const cellRender = useCallback((cellData, dataDomain, dataListID, dataListViewMode) => {
         if (!cellData || cellData.value === undefined)
             return null;
@@ -1040,6 +1042,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
         const loadColumnsAndData = async () => {
             // Resetta l'elemento focalizzato quando si caricano nuovi dati
             setFocusedItem(undefined);
+            setIsDataGridReady(false);
             // Set per raccogliere gli ID univoci da precaricare
             const dataListIDs = new Set();
             const userIDs = new Set();
@@ -1076,6 +1079,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
             // Converte i risultati di ricerca in un array semplice per la griglia
             let newDataSource = searchResultDescriptorToSimpleArray(searchResult);
             setDataSource(newDataSource);
+            setIsDataGridReady(true);
         };
         loadColumnsAndData();
     }, [searchResult, fromDTD, allUsers, loadDataListsAsync, loadUsersAsync, generateColumns]);
@@ -1126,10 +1130,6 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
         onDblClick();
     }, [onDblClick]);
     const dataColumns = useMemo(() => {
-        // Aspetta che le colonne siano completamente caricate
-        if (!columns || columns.length === 0) {
-            return [];
-        }
         return [
             {
                 dataType: "object",
@@ -1137,7 +1137,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
                 caption: '',
                 visible: true,
                 width: 50,
-                cellRender: (cellData) => renderDcmtIcon(cellData, onDownloadDcmtsAsync, openInOffice),
+                cellRender: (cellData) => cellRenderDcmtIcon(cellData, onDownloadDcmtsAsync, openInOffice),
                 allowResizing: false,
                 filterOperations: ['=', "anyof"],
                 allowHiding: false,
@@ -1154,7 +1154,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, allUsers, inputFocusedItem,
         setVisibleItems(visibleRows.map((row) => { return row.data; }));
     }, []);
     useEffect(() => { onVisibleItemChanged?.(visibleItems); }, [visibleItems]);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(TMDataGrid, { id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearch, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: pageSize, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: floatingMenuItems, counterConfig: { show: true } }), (showExportForm && searchResult && onCloseExportForm) && _jsx(TMDataGridExportForm, { dataColumns: dataColumns, dataSource: dataSource, selectedRowKeys: selectedRowKeys, onCloseExportForm: onCloseExportForm, searchResult: searchResult })] });
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [!isDataGridReady && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', gap: '10px' }, children: [_jsx(LoadIndicator, { height: 60, width: 60 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })), isDataGridReady && _jsx(TMDataGrid, { id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearch, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: pageSize, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: floatingMenuItems, counterConfig: { show: true } }), (showExportForm && searchResult && onCloseExportForm) && _jsx(TMDataGridExportForm, { dataColumns: dataColumns, dataSource: dataSource, selectedRowKeys: selectedRowKeys, onCloseExportForm: onCloseExportForm, searchResult: searchResult })] });
 };
 //#region TMSearchResultSelector
 const StyledItemTemplate = styled.div ` 

package/lib/components/features/workflow/TMWorkflowPopup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Priorities, ResultTypes, SDK_Globals, SDK_Localizator, TaskEngine, UserListCacheService, ValidationItem, WFEvents, WorkflowCacheService } from '@topconsultnpm/sdk-ts';
 import styled from "styled-components";
 import { SDKUI_Localizator, IconApply, IconCloseOutline, IconUser, IconInfo, DateDisplayTypes, TASK_MORE_INFO_PREFIX_NAME, IconSignaturePencil, isSign4TopEnabled, IconCheck, IconCloseCircle, IconStop } from "../../../helper";
@@ -66,17 +66,12 @@ const StyledHorizontalContainer = styled.div `
 export const WorkFlowOperationButtons = (props) => {
     const { dtd = undefined, deviceType = DeviceType.DESKTOP, approveDisable = false, signApproveDisable = false, rejectDisable = false, reassignDisable = false, infoDisable = false, onApprove, onSignApprove, onReject, onReAssign, onMoreInfo } = props;
     const isMobile = deviceType === DeviceType.MOBILE;
-    // Stato per distinguere workflow di firma vs approvazione
-    const [isSignWorkflow, setIsSignWorkflow] = useState(false);
-    useEffect(() => {
-        // Controlla se il documento ha dei widget definiti, se il documento ha il widget SIGN4_TOP abilitato, allora è un workflow di firma
+    // Calcola direttamente se è un workflow di firma per evitare flickering durante il render
+    const isSignWorkflow = useMemo(() => {
         if (dtd && dtd.widgets && dtd.widgets.length > 0) {
-            setIsSignWorkflow(isSign4TopEnabled(dtd.widgets));
-        }
-        else {
-            // Se non ci sono widget o non è SIGN4_TOP, imposta il workflow di default (approvazione senza firma)
-            setIsSignWorkflow(false);
+            return isSign4TopEnabled(dtd.widgets);
         }
+        return false;
     }, [dtd]);
     return (_jsx(StyledWorkFlowOperationButtonsContainer, { "$isMobile": isMobile, children: isSignWorkflow ? (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconSignaturePencil, {}), caption: SDKUI_Localizator.SignatureAndApprove, width: "160px", disabled: signApproveDisable, onClick: () => !signApproveDisable && onSignApprove?.(), onMouseDown: e => e.stopPropagation(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.info, color: "info" })] })) : (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove?.(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign?.(), advancedColor: TMColors.tertiary, color: "tertiary" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), advancedColor: TMColors.info, color: "info" })] })) }));
 };

package/lib/components/features/workflow/diagram/WFDiagram.d.ts

@@ -6,6 +6,7 @@ interface IWFDiagramProps {
     allowEdit?: boolean;
     onDiagramChange?: (newXmlDiagram: string) => void;
     workitems?: IWorkItemData[];
+    defaultAutoZoom?: boolean;
 }
 declare const WFDiagram: React.FC<IWFDiagramProps>;
 export default WFDiagram;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+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';
@@ -8,7 +8,7 @@ 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';
@@ -317,13 +317,15 @@ const DiagramMessage = styled.div `
   color: #555;
   text-align: center;
 `;
-const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagramChange, workitems }) => {
+const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagramChange, workitems, defaultAutoZoom = false }) => {
     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,6 +335,7 @@ 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);
@@ -1624,6 +1627,67 @@ 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 handleZoomToFit = useCallback(() => {
+        const optimalZoom = calculateOptimalZoom();
+        setZoomLevel(optimalZoom);
+        setTranslateX(0);
+        setTranslateY(0);
+        setIsAutoZoomEnabled(true);
+    }, [calculateOptimalZoom]);
+    const handleToggleAutoZoom = useCallback(() => {
+        setIsAutoZoomEnabled(prev => {
+            const newValue = !prev;
+            if (!newValue) {
+                // Se si disattiva AutoZoom, riporta lo zoom a 1
+                setZoomLevel(1);
+                setTranslateX(0);
+                setTranslateY(0);
+            }
+            else {
+                // Se si attiva AutoZoom, calcola lo zoom ottimale
+                const optimalZoom = calculateOptimalZoom();
+                setZoomLevel(optimalZoom);
+                setTranslateX(0);
+                setTranslateY(0);
+            }
+            return newValue;
+        });
+    }, [calculateOptimalZoom]);
     const formattedZoomLevel = useMemo(() => {
         return `${Math.round(zoomLevel * 100)}%`;
     }, [zoomLevel]);
@@ -1662,8 +1726,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]);
@@ -1672,6 +1734,73 @@ 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 && allowEdit) {
             toggleReadOnlyMode();
@@ -1696,8 +1825,11 @@ 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, backgroundColor: getWorkItemBackgroundColor(item.ID) }, item.ID))), calculatedConnections.map(connection => {
+                , 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, 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, 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)

package/lib/helper/TMIcons.d.ts

@@ -238,6 +238,7 @@ export declare function IconFunction(props: Readonly<React.SVGProps<SVGSVGElemen
 export declare function IconNull(props?: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare function IconZoomOutLinear(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare function IconZoomInLinear(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare function IconZoomAuto(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare function IconRoundFileUpload(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare function IconRotate(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare function IconPrintOutline(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/lib/helper/TMIcons.js

@@ -575,6 +575,9 @@ function IconZoomOutLinear(props) {
 function IconZoomInLinear(props) {
     return (_jsxs("svg", { fontSize: props?.fontSize ? props.fontSize : FONTSIZE, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2" }), " "] }));
 }
+export function IconZoomAuto(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fontSize: props?.fontSize ? props.fontSize : FONTSIZE, ...props, children: _jsx("path", { fill: "currentColor", d: "m4.4 20.308l-.708-.708l3.6-3.6H4v-1h5v5H8v-3.292zm15.2 0l-3.6-3.6V20h-1v-5h5v1h-3.292l3.6 3.6zM4 9V8h3.292l-3.6-3.6l.708-.708l3.6 3.6V4h1v5zm11 0V4h1v3.292l3.6-3.6l.708.708l-3.6 3.6H20v1z" }) }));
+}
 function IconRoundFileUpload(props) {
     return (_jsxs("svg", { fontSize: props?.fontSize ? props.fontSize : FONTSIZE, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "M2 20V4h8l2 2h10v14zm9-3h2v-4.2l1.6 1.6L16 13l-4-4l-4 4l1.4 1.4l1.6-1.6z" }), " "] }));
 }
@@ -677,9 +680,7 @@ export function IconUnpair(props) {
     return (_jsxs("svg", { fontSize: props.fontSize ?? FONTSIZE, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "M16.61 13.5c-.8.35-1.5.86-2.07 1.5H9.5a2.5 2.5 0 0 1 0-5H17v1.5H9.5c-.55 0-1 .45-1 1s.45 1 1 1zm-13.11-1c0-2.21 1.79-4 4-4H18a2.495 2.495 0 0 1 1.45 4.53c.6.04 1.18.17 1.72.38c.52-.67.83-1.5.83-2.41c0-2.21-1.79-4-4-4H7.5C4.46 7 2 9.46 2 12.5S4.46 18 7.5 18h5.59c.09-.53.25-1.03.46-1.5H7.5c-2.21 0-4-1.79-4-4M15 18v2h8v-2z" }), " "] }));
 }
 export function IconCtrlWorkflow(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fontSize: props.fontSize ?? FONTSIZE, viewBox: "0 0 20 20", width: "1em", height: "1em", ...props, children: _jsx("path", { fill: "currentColor", 
-            // stroke="currentColor" strokeWidth="0.3px"
-            d: "M14.085 2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3v2H5.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1H13v-2h3a2 2 0 0 0 2-2V7h-1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10v-.5q.001-.264.085-.5M12 17H8v-2h4zm3-14.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V5h-.78a.5.5 0 0 0-.474.342l-.544 1.632A1.5 1.5 0 0 1 11.78 8H11v1.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V7h.78a.5.5 0 0 0 .474-.342l.544-1.632A1.5 1.5 0 0 1 14.22 4H15zM10 7H8v2h2zm6-2h2V3h-2z" }) }));
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: _jsx("path", { fill: "currentColor", d: "M4 12.308V18V6zm10.577 7.923q.54 0 .924-.384q.384-.383.384-.924q0-.54-.384-.924q-.384-.383-.924-.383t-.924.383t-.384.924t.384.924t.924.384M20 12q.54 0 .924-.384q.384-.383.384-.924q0-.54-.384-.924q-.383-.383-.924-.383t-.924.383q-.384.384-.384.924t.384.924T20 12M6.5 10.5h5.27v-1H6.5zm0 4h5.27v-1H6.5zM4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h14.77q.69 0 1.152.463T21 6.616h-1q0-.231-.192-.424T19.385 6H4.615q-.23 0-.423.192T4 6.616v10.769q0 .23.192.423t.423.192h5.654v1zm9.961 2.23q-.961 0-1.635-.672q-.673-.674-.673-1.635q0-.84.515-1.461q.514-.622 1.293-.787v-2.367H19.5V12.94q-.779-.165-1.293-.786q-.515-.621-.515-1.462q0-.961.674-1.634q.673-.674 1.634-.674t1.635.674t.673 1.634q0 .84-.515 1.462q-.514.621-1.293.787v2.367h-5.423v1.367q.779.166 1.293.787q.515.62.515 1.461q0 .962-.673 1.635t-1.635.673" }) }));
 }
 export function IconBackhandIndexPointingRight(props) {
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 128 128", width: "1em", height: "1em", ...props, children: [_jsx("path", { fill: "#E0BB95", d: "M58.7 41.1c10.8.1 53.3.4 54.9.4c12.8.3 12.7 16.7.7 16.9c-1.5 0-25 1.1-32.2 1.3c5.2 2 7.5 11.9-3.1 14.9c5 2.6 6.4 12.9-4.2 14.7c3.8 2.5 4.3 10.9-6 14.2c-8.4 2.7-28.2 2-40.3-2.3c-9.1-3.3-8.4-5.8-16.7-5.6c-1.4 0-2.1-1.1-2.4-2.4c-1.3-5.9-1.9-26.3-.3-33.8c.4-1.6 1.7-1.8 2.2-1.9c2.1-.4 4.2-2.5 5-4.3c3.2-6.4 12.8-12.8 23.4-18.2c5.5-2.8 9.2-8.8 10.4-18.3c.8-6.3 8.6-7.7 11.8-2.5c2.2 3.6 2.9 7 2.9 10.4c.2 6.2-1.6 10.1-6.1 16.5" }), _jsx("defs", { children: _jsx("path", { id: "notoBackhandIndexPointingRightMediumLightSkinTone0", d: "M58.7 41.1c10.8.1 53.3.4 54.9.4c12.8.3 12.7 16.7.7 16.9c-1.5 0-25 1.1-32.2 1.3c5.2 2 7.5 11.9-3.1 14.9c5 2.6 6.4 12.9-4.2 14.7c3.8 2.5 4.3 10.9-6 14.2c-8.4 2.7-28.2 2-40.3-2.3c-9.1-3.3-8.4-5.8-16.7-5.6c-1.4 0-2.1-1.1-2.4-2.4c-1.3-5.9-1.9-26.3-.3-33.8c.4-1.6 1.7-1.8 2.2-1.9c2.1-.4 4.2-2.5 5-4.3c3.2-6.4 12.8-12.8 23.4-18.2c5.5-2.8 9.2-8.8 10.4-18.3c.8-6.3 8.6-7.7 11.8-2.5c2.2 3.6 2.9 7 2.9 10.4c.2 6.2-1.6 10.1-6.1 16.5" }) }), _jsx("clipPath", { id: "notoBackhandIndexPointingRightMediumLightSkinTone1", children: _jsx("use", { href: "#notoBackhandIndexPointingRightMediumLightSkinTone0" }) }), _jsx("g", { fill: "#D19661", clipPath: "url(#notoBackhandIndexPointingRightMediumLightSkinTone1)", children: _jsx("path", { d: "M73.3 59.5c.1 1.6 2.8 2.9 2.8 6.4c0 3.7-3 4.7-3.1 7.5c-.1 2.7 2 3.8 1.5 7.7c-.6 4.5-4.1 4-4.2 7.1c0 2.7 1.8 3.2 1.8 6.6c0 3.1-3 5.8-5.5 7s-1.2 3.4 0 3.4s11.9-1.3 14.5-8.2c3-8 11-29.6 8.8-36.9c-7.1-1-11.5-1.6-13.7-1.8c-.7-.1-2.9-.6-2.9 1.2M60.1 40.7c0 .9.1 1.5 1 1.5c1 0 43.6 2.1 51.6 2.3c9.2.2 8.7 7.6 5.9 10.1c-1.9 1.7.6 4 2.2 2.6s4.4-3.4 4.3-8.4s-4.4-8.6-8.4-8.9c-3.8-.3-56.6.8-56.6.8m-51.9 21c15.9 0 14.1-11.7 25.2-18.9c15.4-10.1 16.3-11.1 19.7-25.2c1.2-4.9 5.7-4.4 7.7-2.1s4.9-1.3 3.6-2.7s-7.8-7.7-14.8-1.1s-42 46.2-42 46.2z" }) }), _jsx("defs", { children: _jsx("use", { href: "#notoBackhandIndexPointingRightMediumLightSkinTone0", id: "notoBackhandIndexPointingRightMediumLightSkinTone2" }) }), _jsx("clipPath", { id: "notoBackhandIndexPointingRightMediumLightSkinTone3", children: _jsx("use", { href: "#notoBackhandIndexPointingRightMediumLightSkinTone2" }) }), _jsx("g", { fill: "#8D542E", clipPath: "url(#notoBackhandIndexPointingRightMediumLightSkinTone3)", children: _jsx("path", { d: "M58.7 41.1h-1.9c-.4 0-.8-.4-.2-1.3s5.8-8 5.8-15c0-3.2-.5-7.7-3.4-12.4c-.6-.9.2-1.4.9-1c.7.5 6.4 3.2 6.5 13.4s-7.7 16.3-7.7 16.3m65.1 8.8c-.5 0-1.1-.2-1.7 1c-.7 1.5-3.1 4.4-8.4 4.7s-38.1 2.5-38.9 2.5c-1.1 0-1.2 1.9.1 1.8c1.7-.1 7.2-.2 7.2-.2s30.9 1.8 36.9-.6c6.1-2.4 4.8-9.2 4.8-9.2M86.6 68.5c-.3-.1-.7-.1-1 .3c-1.5 2-4.6 3.5-10.6 3.3c-1.4 0-1.6 2.7.1 2.7c.7 0 4-.1 4-.1l6.6-.2zm-3.6 15c-.3-.1-.7-.1-1.1.4c-1.5 2-3.5 2.8-9.7 3c-1.5.1-1.4 2.6.2 2.6c1.1 0 2.4-.1 2.4-.1l7-.6zm-5.4 12.7c-.3-.1-.8-.2-1.2.4c-.8 1.1-2.9 3-7.5 4.4c-3.7 1.1-21.3 1.9-32.5-.7c-2.3-.5-9.9-3-13.6-5.3s-7.3-1.6-8.3-1.4s-6.3.7-6.3.7l2.5 3.7l27 8.6l38.5-.6z" }) })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.77",
+  "version": "6.20.0-dev1.78",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",