npm - @topconsultnpm/sdkui-react - Versions diffs - 6.22.0-t2 → 6.22.0-t3 - Mend

@topconsultnpm/sdkui-react 6.22.0-t2 → 6.22.0-t3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (199) hide show

package/lib/components/features/wg/TMWGsCopyMoveForm.js CHANGED Viewed

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ResultTypes, SDK_Globals, WorkingGroupCacheService, WorkingGroupEngine } from "@topconsultnpm/sdk-ts";
 import { TreeView } from 'devextreme-react';
+import { LoadIndicator } from 'devextreme-react/load-indicator';
 import styled from 'styled-components';
 import { buildFolderHierarchy, findFileItems, setFolderTreeViewItems } from '../../base/TMFileManagerUtils';
-import TMSpinner from '../../base/TMSpinner';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import { useDeviceType } from '../../base/TMDeviceProvider';
 import { SDKUI_Localizator, getExceptionMessage, Globalization, IconUserGroup, IconFolder, calcResponsiveSizes } from '../../../helper';
@@ -13,7 +13,8 @@ import { FormModes } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
 import TMDataGrid from '../../base/TMDataGrid';
 import TMTooltip from '../../base/TMTooltip';
-import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
+import TMLayoutContainer from '../../base/TMLayout';
+import TMWaitPanelManager from '../../base/waitPanel/TMWaitPanelManager';
 import { TMResultManager } from '../../forms/TMResultDialog';
 import TMSaveForm from '../../forms/TMSaveForm';
 // Returns a formatted name and optional description based on document type and item DID.
@@ -34,7 +35,6 @@ export const getDocumentDisplayInfo = (descriptor, item) => {
         : '';
     return { name, description };
 };
-let abortController = new AbortController();
 const TMWGsCopyMoveForm = (props) => {
     const { mode, workingGroups, context, folder, onClose, focusedWorkingGroupId = undefined, fetchTreeFileSystemForWorkingGroup, fetchArchivedDocumentsForWorkingGroup } = props;
     // Destructure context to get the current working group descriptor or document type descriptor based on the engine type
@@ -58,18 +58,10 @@ const TMWGsCopyMoveForm = (props) => {
     const [treeViewData, setTreeViewData] = useState([]);
     // State to manage the selected file
     const [selectedFolder, setSelectedFolder] = useState(undefined);
-    // State variable to control the visibility of the wait panel
-    const [showWaitPanel, setShowWaitPanel] = useState(false);
-    // State variable to store the title of the wait panel
-    const [waitPanelTitle, setWaitPanelTitle] = useState('');
-    // State variable to control the visibility of the primary section of the wait panel
-    const [showPrimary, setShowPrimary] = useState(false);
-    // State variable to store the primary text of the wait panel
-    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
-    // State variable to track the current value of the primary progress indicator in the wait panel
-    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
-    // State variable to define the maximum value for the primary progress indicator in the wait panel
-    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
+    // True until the list of working groups is ready
+    const [isLoadingWgs, setIsLoadingWgs] = useState(true);
+    // Id of the working group whose folder tree has been loaded
+    const [loadedTreeWgId, setLoadedTreeWgId] = useState(undefined);
     // State to manage the current working group descriptor, initially set to the one from context
     const steps = useMemo(() => {
         return mode === 'copyToWgArchivedDoc'
@@ -104,7 +96,6 @@ const TMWGsCopyMoveForm = (props) => {
             let groupsToUse = workingGroups;
             if (!groupsToUse) {
                 try {
-                    TMSpinner.show({ description: SDKUI_Localizator.LoadingWorkGroups });
                     // Clear cache and fetch working groups
                     WorkingGroupCacheService.RemoveAll();
                     const fetchedGroups = await WorkingGroupCacheService.GetAllAsync();
@@ -113,9 +104,6 @@ const TMWGsCopyMoveForm = (props) => {
                 catch (error) {
                     TMExceptionBoxManager.show({ exception: error });
                 }
-                finally {
-                    TMSpinner.hide();
-                }
             }
             if (groupsToUse) {
                 const sortedGroups = [...groupsToUse].sort((a, b) => {
@@ -134,6 +122,7 @@ const TMWGsCopyMoveForm = (props) => {
                     setCurrentStep(1);
                 }
             }
+            setIsLoadingWgs(false);
         };
         loadWorkingGroups();
     }, [workingGroups, currentWorkingGroupDescriptor]);
@@ -154,11 +143,16 @@ const TMWGsCopyMoveForm = (props) => {
             catch (error) {
                 TMExceptionBoxManager.show({ exception: error });
             }
+            finally {
+                setLoadedTreeWgId(selectedWg.id);
+            }
         };
         if (selectedWg && wgs.length) {
             fetchWgTree();
         }
     }, [selectedWg, wgs]);
+    // Loading while the working groups are fetched, or while the folder tree of the selected working group is not loaded yet
+    const isLoading = isLoadingWgs || (currentStep === 1 && mode !== 'copyToWgArchivedDoc' && !!selectedWg?.id && loadedTreeWgId !== selectedWg.id);
     // When the current step resets to the first step (index 0), clear the selected folder by setting it to undefined
     useEffect(() => {
         if (currentStep === 0) {
@@ -235,86 +229,91 @@ const TMWGsCopyMoveForm = (props) => {
             if (missingWgOrFolder) {
                 return Promise.resolve();
             }
-            setWaitPanelTitle(mode !== 'move' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move);
-            setShowWaitPanel(true);
-            setShowPrimary(true);
-            abortController = new AbortController();
             let result = [];
             const totalDrafts = context.selectedDrafts.length;
-            setWaitPanelMaxValuePrimary(totalDrafts);
-            const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
-            const selectedFolderId = selectedFolder?.id === -1 ? 0 : selectedFolder?.id ?? 0;
-            const isWgEngine = context.engine === 'WorkingGroupEngine';
-            const isSearchEngine = context.engine === 'SearchEngine';
-            for (let i = 0; i < totalDrafts; i++) {
-                if (abortController.signal.aborted) {
-                    result.push({
-                        rowIndex: i + 1,
-                        id1: i + 1,
-                        id2: i + 1,
-                        resultType: ResultTypes.WARNING,
-                        description: SDKUI_Localizator.OperationFilesInterrupted.replaceParams(i + 1)
-                    });
-                    break;
-                }
-                setWaitPanelValuePrimary(i + 1);
-                setWaitPanelTextPrimary(`${i + 1}/${totalDrafts}`);
-                const item = context.selectedDrafts[i];
-                try {
-                    if (isWgEngine && targetWorkingGroup && targetWorkingGroup.id && currentWorkingGroupDescriptor && currentWorkingGroupDescriptor.id && selectedFolder && item.did) {
-                        const draft = item;
-                        const did = draft.did ?? 0;
-                        if (mode === 'copy') {
-                            await workingGroupEngine.DraftsCopyAsync(currentWorkingGroupDescriptor.id, did, targetWorkingGroup.id, selectedFolderId);
-                            if (fetchTreeFileSystemForWorkingGroup) {
-                                await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
+            const waitPanel = TMWaitPanelManager.show({
+                title: mode !== 'move' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move,
+                max: totalDrafts,
+                cancelable: true,
+            });
+            try {
+                const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
+                const selectedFolderId = selectedFolder?.id === -1 ? 0 : selectedFolder?.id ?? 0;
+                const isWgEngine = context.engine === 'WorkingGroupEngine';
+                const isSearchEngine = context.engine === 'SearchEngine';
+                for (let i = 0; i < totalDrafts; i++) {
+                    if (waitPanel.aborted) {
+                        result.push({
+                            rowIndex: i + 1,
+                            id1: i + 1,
+                            id2: i + 1,
+                            resultType: ResultTypes.WARNING,
+                            description: SDKUI_Localizator.OperationFilesInterrupted.replaceParams(i + 1)
+                        });
+                        waitPanel.warning();
+                        break;
+                    }
+                    waitPanel.setSubtitle(`${i + 1}/${totalDrafts}`);
+                    const item = context.selectedDrafts[i];
+                    try {
+                        if (isWgEngine && targetWorkingGroup && targetWorkingGroup.id && currentWorkingGroupDescriptor && currentWorkingGroupDescriptor.id && selectedFolder && item.did) {
+                            const draft = item;
+                            const did = draft.did ?? 0;
+                            if (mode === 'copy') {
+                                await workingGroupEngine.DraftsCopyAsync(currentWorkingGroupDescriptor.id, did, targetWorkingGroup.id, selectedFolderId);
+                                if (fetchTreeFileSystemForWorkingGroup) {
+                                    await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
+                                }
+                            }
+                            else if (mode === 'move') {
+                                await workingGroupEngine.DraftsMoveAsync(currentWorkingGroupDescriptor.id, did, targetWorkingGroup.id, selectedFolderId);
+                                if (fetchTreeFileSystemForWorkingGroup) {
+                                    await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
+                                    await fetchTreeFileSystemForWorkingGroup(currentWorkingGroupDescriptor.id);
+                                }
                             }
                         }
-                        else if (mode === 'move') {
-                            await workingGroupEngine.DraftsMoveAsync(currentWorkingGroupDescriptor.id, did, targetWorkingGroup.id, selectedFolderId);
-                            if (fetchTreeFileSystemForWorkingGroup) {
-                                await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
-                                await fetchTreeFileSystemForWorkingGroup(currentWorkingGroupDescriptor.id);
+                        else if (isSearchEngine) {
+                            if (mode === 'copyToWgDraft' && targetWorkingGroup && targetWorkingGroup.id && selectedFolder && currentDcmtTypeDescriptor) {
+                                const documentDisplayInfo = getDocumentDisplayInfo(currentDcmtTypeDescriptor, item);
+                                await workingGroupEngine.DraftsAddByIDAsync(targetWorkingGroup.id, selectedFolderId, documentDisplayInfo.name, documentDisplayInfo.description, item.TID, item.DID);
+                                if (fetchTreeFileSystemForWorkingGroup)
+                                    await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
+                            }
+                            else if (mode === 'copyToWgArchivedDoc' && targetWorkingGroup && targetWorkingGroup.id) {
+                                await workingGroupEngine.DcmtsAddOrRemoveAsync(targetWorkingGroup.id, item.TID, item.DID, false);
+                                if (fetchArchivedDocumentsForWorkingGroup)
+                                    await fetchArchivedDocumentsForWorkingGroup(targetWorkingGroup.id);
                             }
                         }
+                        result.push({
+                            rowIndex: i + 1,
+                            id1: item.DID ?? i + 1,
+                            id2: item.TID ?? i + 1,
+                            description: SDKUI_Localizator.UpdateCompletedSuccessfully,
+                            resultType: ResultTypes.SUCCESS
+                        });
+                        waitPanel.ok();
                     }
-                    else if (isSearchEngine) {
-                        if (mode === 'copyToWgDraft' && targetWorkingGroup && targetWorkingGroup.id && selectedFolder && currentDcmtTypeDescriptor) {
-                            const documentDisplayInfo = getDocumentDisplayInfo(currentDcmtTypeDescriptor, item);
-                            await workingGroupEngine.DraftsAddByIDAsync(targetWorkingGroup.id, selectedFolderId, documentDisplayInfo.name, documentDisplayInfo.description, item.TID, item.DID);
-                            if (fetchTreeFileSystemForWorkingGroup)
-                                await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
-                        }
-                        else if (mode === 'copyToWgArchivedDoc' && targetWorkingGroup && targetWorkingGroup.id) {
-                            await workingGroupEngine.DcmtsAddOrRemoveAsync(targetWorkingGroup.id, item.TID, item.DID, false);
-                            if (fetchArchivedDocumentsForWorkingGroup)
-                                await fetchArchivedDocumentsForWorkingGroup(targetWorkingGroup.id);
-                        }
+                    catch (err) {
+                        result.push({
+                            rowIndex: i + 1,
+                            id1: item.DID ?? i + 1,
+                            id2: item.TID ?? i + 1,
+                            resultType: ResultTypes.ERROR,
+                            description: getExceptionMessage(err)
+                        });
+                        waitPanel.error();
                     }
-                    result.push({
-                        rowIndex: i + 1,
-                        id1: item.DID ?? i + 1,
-                        id2: item.TID ?? i + 1,
-                        description: SDKUI_Localizator.UpdateCompletedSuccessfully,
-                        resultType: ResultTypes.SUCCESS
-                    });
-                }
-                catch (err) {
-                    result.push({
-                        rowIndex: i + 1,
-                        id1: item.DID ?? i + 1,
-                        id2: item.TID ?? i + 1,
-                        resultType: ResultTypes.ERROR,
-                        description: getExceptionMessage(err)
-                    });
+                    await waitPanel.step();
                 }
             }
-            setWaitPanelTextPrimary('');
-            setWaitPanelMaxValuePrimary(0);
-            setWaitPanelValuePrimary(0);
-            setShowWaitPanel(false);
-            TMResultManager.show(result, mode !== 'move' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move, "ID", undefined);
+            finally {
+                waitPanel.close();
+            }
             onClose();
+            // Shown after the modal has closed: the alert animation is time-based, so it must not start while the page is still busy re-rendering
+            setTimeout(() => TMResultManager.show(result, mode !== 'move' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move, "ID", undefined), 0);
         }
         catch (e) {
             TMExceptionBoxManager.show({ exception: e });
@@ -365,7 +364,7 @@ const TMWGsCopyMoveForm = (props) => {
         const tooltipContent = _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID" }), ": ", itemData.id] });
         return (_jsxs("div", { style: { whiteSpace: "nowrap", display: "flex", alignItems: "center" }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(TMTooltip, { content: tooltipContent, children: _jsx(IconFolder, { fontSize: 24, style: { marginRight: 5, color: TMColors.iconLight } }) }), itemData.text] }));
     };
-    return _jsx(TMSaveForm, { title: getTitle(), showTitleFormMode: false, showErrorCount: false, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', validationItems: validationItems, exception: exception, isModified: isLocalSelectionModified(), showToolbar: false, showSaveButton: false, onClose: onClose, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: [_jsx("div", { style: { width: "100%", height: '48px' }, children: _jsx(TMStepNavigator, { steps: steps, currentStep: adjustedCurrentStep, onStepChange: (stepIndex) => { setCurrentStep(stepIndex); } }) }), _jsxs("div", { style: {
+    return _jsx(TMSaveForm, { title: getTitle(), showTitleFormMode: false, showErrorCount: false, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', validationItems: validationItems, exception: exception, isModified: isLocalSelectionModified(), showToolbar: false, showSaveButton: false, onClose: onClose, children: _jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx("div", { style: { width: "100%", height: '48px' }, children: _jsx(TMStepNavigator, { steps: steps, currentStep: adjustedCurrentStep, onStepChange: (stepIndex) => { setCurrentStep(stepIndex); } }) }), _jsxs("div", { style: {
                         marginTop: '10px',
                         padding: '10px',
                         borderRadius: '8px',
@@ -374,8 +373,9 @@ const TMWGsCopyMoveForm = (props) => {
                         width: '100%',
                         height: 'calc(100% - 113px)',
                         overflow: 'auto',
-                    }, children: [(currentStep === 0 && wgs.length > 0) &&
-                            _jsx(TMDataGrid, { dataColumns: dataColumns, dataSource: wgs, selection: selection, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged, selectedRowKeys: [...selectedRowKeys], onSelectionChanged: onSelectionChanged, onRowClick: onRowClick, onRowDblClick: onRowDblClick, autoNavigateToFocusedRow: true, showColumnHeaders: false }), (currentStep === 1) &&
+                    }, children: [isLoading &&
+                            _jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: '10px' }, children: [_jsx(LoadIndicator, { height: 40, width: 40 }), _jsx("div", { children: currentStep === 0 ? SDKUI_Localizator.LoadingWorkGroups : SDKUI_Localizator.Loading })] }), (!isLoading && currentStep === 0 && wgs.length > 0) &&
+                            _jsx(TMDataGrid, { dataColumns: dataColumns, dataSource: wgs, selection: selection, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged, selectedRowKeys: [...selectedRowKeys], onSelectionChanged: onSelectionChanged, onRowClick: onRowClick, onRowDblClick: onRowDblClick, autoNavigateToFocusedRow: true, showColumnHeaders: false }), (!isLoading && currentStep === 1) &&
                             _jsx(TreeView, { dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick })] }), _jsxs("div", { style: {
                         width: "100%",
                         height: '45px',
@@ -434,6 +434,6 @@ export const TMStepNavigator = (props) => {
     return (_jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', backgroundColor: '#f9f9f9', padding: '6px 16px', borderRadius: '999px', boxShadow: '0 1px 4px rgba(0, 0, 0, 0.05)' }, children: steps.map((step, index) => {
                 const isPastStep = index < currentStep;
                 const isCurrent = currentStep === index;
-                return _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StepSpan, { "$isCurrent": isCurrent, "$isPast": isPastStep, onClick: isPastStep ? () => onStepChange(index) : undefined, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' }, children: [_jsx("span", { children: step.title }), step.subtitle && _jsxs("span", { style: { fontSize: '0.90em', fontStyle: "italic" }, children: ["\"", step.subtitle, "\""] })] }) }), index < steps.length - 1 && (_jsx("span", { style: { margin: '0 8px', color: '#ddd' }, children: _jsx("i", { className: 'dx-icon-greater' }) }))] }, step.id);
+                return _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StepSpan, { $isCurrent: isCurrent, $isPast: isPastStep, onClick: isPastStep ? () => onStepChange(index) : undefined, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' }, children: [_jsx("span", { children: step.title }), step.subtitle && _jsxs("span", { style: { fontSize: '0.90em', fontStyle: "italic" }, children: ["\"", step.subtitle, "\""] })] }) }), index < steps.length - 1 && (_jsx("span", { style: { margin: '0 8px', color: '#ddd' }, children: _jsx("i", { className: 'dx-icon-greater' }) }))] }, step.id);
             }) }) }));
 };

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { ResultTypes, SDK_Globals, UserListCacheService, ValidationItem, WFEvents, WorkflowCacheService } from '@topconsultnpm/sdk-ts';
 import styled from "styled-components";
@@ -66,7 +66,7 @@ export const WorkFlowOperationButtons = (props) => {
         }
         return false;
     }, [dtd, signFlow]);
-    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" }), onMoreInfo && (_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" }), onReAssign && (_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" })), onMoreInfo && (_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" }))] })) }));
+    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" }), onMoreInfo && (_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" }), onReAssign && (_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" })), onMoreInfo && (_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" }))] })) }));
 };
 export const WorkFlowApproveRejectPopUp = ({ TID = 0, DID = 0, deviceType = DeviceType.DESKTOP, isReject, selectedItems = [], onClose, onCompleted }) => {
     const { refreshWorkflowApprove } = useWorkflowApprove();

package/lib/components/features/workflow/diagram/ConnectionComponent.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback } from 'react';
 import { ArrowSymbol } from './interfaces';
 import styled, { css } from 'styled-components';
@@ -56,7 +56,7 @@ const ConnectionComponent = ({ connection, isSelected, sourcePoint, sinkPoint, i
             default:
                 return null;
         }
-        return _jsx(StyledArrow, { d: pathData, "$color": connectionColor });
+        return _jsx(StyledArrow, { d: pathData, $color: connectionColor });
     }, [connectionColor]);
     // Calcola la trasformazione per posizionare e ruotare la freccia
     const calculateArrowTransform = useCallback((isSink) => {
@@ -86,7 +86,7 @@ const ConnectionComponent = ({ connection, isSelected, sourcePoint, sinkPoint, i
         event.stopPropagation();
         onContextMenu?.(connection.ID, event);
     }, [onContextMenu, connection.ID]);
-    return (_jsxs("g", { children: [_jsx(StyledPathHitArea, { d: connection.PathGeometry, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }), _jsx(StyledPath, { d: connection.PathGeometry, "$isSelected": isSelected, "$isTemporary": isTemporary, "$outputStatus": connection.OutputStatus, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }), connection.SinkArrowSymbol !== ArrowSymbol.None && (_jsxs("g", { transform: calculateArrowTransform(true), children: [renderArrow(connection.SinkArrowSymbol, 0), " "] })), connection.SourceArrowSymbol !== ArrowSymbol.None && (_jsx("g", { transform: calculateArrowTransform(false) + ' rotate(180)', children: renderArrow(connection.SourceArrowSymbol, 0) })), isSelected && (_jsxs(_Fragment, { children: [_jsx(StyledSquareConnector, { "$color": connectionColor, x: sourcePoint.x - 5, y: sourcePoint.y - 5, width: 10, height: 10 }), _jsx(StyledSquareConnector, { "$color": connectionColor, x: sinkPoint.x - 5, y: sinkPoint.y - 5, width: 10, height: 10, cursor: 'move', onMouseDown: (e) => {
+    return (_jsxs("g", { children: [_jsx(StyledPathHitArea, { d: connection.PathGeometry, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }), _jsx(StyledPath, { d: connection.PathGeometry, $isSelected: isSelected, $isTemporary: isTemporary, $outputStatus: connection.OutputStatus, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }), connection.SinkArrowSymbol !== ArrowSymbol.None && (_jsxs("g", { transform: calculateArrowTransform(true), children: [renderArrow(connection.SinkArrowSymbol, 0), " "] })), connection.SourceArrowSymbol !== ArrowSymbol.None && (_jsx("g", { transform: calculateArrowTransform(false) + ' rotate(180)', children: renderArrow(connection.SourceArrowSymbol, 0) })), isSelected && (_jsxs(_Fragment, { children: [_jsx(StyledSquareConnector, { $color: connectionColor, x: sourcePoint.x - 5, y: sourcePoint.y - 5, width: 10, height: 10 }), _jsx(StyledSquareConnector, { $color: connectionColor, x: sinkPoint.x - 5, y: sinkPoint.y - 5, width: 10, height: 10, cursor: 'move', onMouseDown: (e) => {
                             e.stopPropagation(); // Impedisce la propagazione dell'evento a elementi sottostanti
                             onConnectionEndpointMouseDown?.(connection.ID, 'sink', e);
                         } })] }))] }));

package/lib/components/features/workflow/diagram/DiagramItemComponent.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { DiagramItemTypes } from './interfaces';
 import styled, { keyframes, css } from 'styled-components';
@@ -230,7 +230,7 @@ const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, allow
         onDoubleClick?.(item.ID);
     }, [onDoubleClick, item.ID]);
     const renderContent = () => {
-        const renderConnectorWithHitArea = (cx, cy, connectorName) => (_jsxs(_Fragment, { children: [_jsx(Connector, { cx: cx, cy: cy, r: 4, "$isVisible": isHovered && !readOnly, "$isReadOnly": readOnly }), _jsx(ConnectorHitArea, { cx: cx, cy: cy, r: 15, "$isVisible": isHovered && !readOnly, "$isReadOnly": readOnly, "data-is-connector": "true", onMouseDown: (e) => {
+        const renderConnectorWithHitArea = (cx, cy, connectorName) => (_jsxs(_Fragment, { children: [_jsx(Connector, { cx: cx, cy: cy, r: 4, $isVisible: isHovered && !readOnly, $isReadOnly: readOnly }), _jsx(ConnectorHitArea, { cx: cx, cy: cy, r: 15, $isVisible: isHovered && !readOnly, $isReadOnly: readOnly, "data-is-connector": "true", onMouseDown: (e) => {
                         if (readOnly)
                             return;
                         e.stopPropagation();
@@ -266,6 +266,6 @@ const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, allow
         }
         return (_jsxs(_Fragment, { children: [isTruncated && _jsx("title", { children: item.ItemName }), backgroundColor && (_jsx("rect", { x: "-5", y: "-5", width: calculatedWidth + 10, height: calculatedHeight + 10, rx: "12", ry: "12", fill: backgroundColor, opacity: "0.4", style: { filter: 'blur(3px)' } })), _jsx("rect", { x: "0", y: "0", width: calculatedWidth, height: calculatedHeight, className: "item-main-shape", fill: "transparent" }), _jsx("g", { transform: `translate(${svgX}, ${svgY})`, children: _jsx(DiagramItemSvgContent, { itemType: item.Type, width: iconRenderWidth, height: iconRenderHeight, statusData: statusData }) }), textLines.length > 0 && (_jsx("text", { ref: textRef, x: calculatedWidth / 2, dominantBaseline: "central", className: "item-text", children: textLines.map((line, index) => (_jsx("tspan", { x: calculatedWidth / 2, dy: index === 0 ? PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT : FONT_SIZE + 1, children: line }, index))) })), connectors] }));
     };
-    return (_jsx(StyledDiagramItem, { ref: diagramItemRef, transform: `translate(${currentPosition.x}, ${currentPosition.y})`, "$isSelected": isSelected, "$itemType": item.Type, "$isDragging": isDragging, "$isHovered": isHovered, "$isReadOnly": readOnly, "$allowItemClick": allowItemClick, onMouseDown: handleMouseDown, onClick: handleItemClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleDoubleClick, children: _jsx(AnimatingGroup, { "$isCurrent": isCurrent, children: renderContent() }) }));
+    return (_jsx(StyledDiagramItem, { ref: diagramItemRef, transform: `translate(${currentPosition.x}, ${currentPosition.y})`, $isSelected: isSelected, $itemType: item.Type, $isDragging: isDragging, $isHovered: isHovered, $isReadOnly: readOnly, $allowItemClick: allowItemClick, onMouseDown: handleMouseDown, onClick: handleItemClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleDoubleClick, children: _jsx(AnimatingGroup, { $isCurrent: isCurrent, children: renderContent() }) }));
 };
 export default React.memo(DiagramItemComponent);

package/lib/components/features/workflow/diagram/DiagramItemForm.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react'; // Importa useState
 import TMModal from '../../../base/TMModal';
 import { DiagramItemTypes } from './interfaces';

package/lib/components/features/workflow/diagram/DiagramItemSvgContent.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DiagramItemTypes } from './interfaces'; // Assicurati che il percorso sia corretto
 import styled from 'styled-components';
 import { TMImageLibrary } from '../../../../helper';

package/lib/components/features/workflow/diagram/RecipientList.js CHANGED Viewed

@@ -199,7 +199,7 @@ const RecipientList = ({ recipients, title, tid, qd, maxRecipients, validationIt
             document.removeEventListener('keydown', handleKeyPress);
         };
     }, [handleKeyPress]);
-    return (_jsxs(RecipientsColumn, { children: [_jsxs(HeaderContainer, { children: [_jsx("p", { style: { fontWeight: 600 }, children: title }), _jsx(TMButton, { btnStyle: 'icon', caption: SDKUI_Localizator.AddRecipient, icon: _jsx(IconAdd, {}), onClick: handleAddClick, disabled: isMaxReached }), uiState.isMenuOpen && !isMaxReached && renderFloatingMenu()] }), _jsx(TMVilViewer, { vil: validationItems }), _jsx("div", { style: { height: '150px', overflowY: 'auto', gap: '5px', display: 'flex', flexDirection: 'column' }, children: recipients.map((recipient, index) => (_jsxs(RecipientItem, { "$isSelected": uiState.selectedRecipientIndex === index, onClick: () => handleRecipientClick(index), tabIndex: 0, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center', flexShrink: 0 }, children: _jsx(IconDelete, { color: '#c00', cursor: 'pointer', onClick: (e) => {
+    return (_jsxs(RecipientsColumn, { children: [_jsxs(HeaderContainer, { children: [_jsx("p", { style: { fontWeight: 600 }, children: title }), _jsx(TMButton, { btnStyle: 'icon', caption: SDKUI_Localizator.AddRecipient, icon: _jsx(IconAdd, {}), onClick: handleAddClick, disabled: isMaxReached }), uiState.isMenuOpen && !isMaxReached && renderFloatingMenu()] }), _jsx(TMVilViewer, { vil: validationItems }), _jsx("div", { style: { height: '150px', overflowY: 'auto', gap: '5px', display: 'flex', flexDirection: 'column' }, children: recipients.map((recipient, index) => (_jsxs(RecipientItem, { $isSelected: uiState.selectedRecipientIndex === index, onClick: () => handleRecipientClick(index), tabIndex: 0, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center', flexShrink: 0 }, children: _jsx(IconDelete, { color: '#c00', cursor: 'pointer', onClick: (e) => {
                                     e.stopPropagation();
                                     onRemove(recipient);
                                     setUiState(prevState => ({ ...prevState, selectedRecipientIndex: null }));

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, 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';
@@ -1925,13 +1925,13 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
                         { 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 }) }
+                        { 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(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 => {
+                    }, 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)

package/lib/components/forms/Login/Menu.js CHANGED Viewed

@@ -43,6 +43,6 @@ const Menu = ({ visible = false, children, x, y, onClose }) => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [visible, onClose]);
-    return visible ? (_jsx(MenuContainer, { ref: menuRef, "$x": x, "$y": y, "$visible": visible, children: children })) : null;
+    return visible ? (_jsx(MenuContainer, { ref: menuRef, $x: x, $y: y, $visible: visible, children: children })) : null;
 };
 export default Menu;

package/lib/components/forms/Login/OTPReader.js CHANGED Viewed

@@ -79,7 +79,7 @@ const OTPReader = ({ digits, onChange, onFullChange, onResendOTP, resendCooldown
         }, 1000);
     };
     const safeDigits = digits.length === 6 ? digits : Array(6).fill('');
-    return (_jsxs(Container, { children: [_jsx(LargeTitle, { children: header ?? LOGINLocalizator.EnterOtpCode }), _jsx(Title, { children: text ?? LOGINLocalizator.EnterOtpEmailOnly }), _jsx(InputsWrapper, { children: safeDigits.map((digit, i) => (_jsx(DigitBox, { "$isMobile": isMobile, "$filled": !!digit, maxLength: 1, value: digit, onChange: (e) => handleChange(e.target.value, i), onKeyDown: (e) => handleKeyDown(e, i), onPaste: handlePaste, ref: (el) => (inputRefs.current[i] = el), inputMode: "numeric" }, i * 2))) }), _jsxs(ControlsRow, { "$isMobile": isMobile, children: [_jsx(TMButton, { btnStyle: 'text', disabled: clearBtnDisabled, caption: SDKUI_Localizator.ClearOTP, showTooltip: false, onClick: handleClearOTP, color: 'tertiary' }), onResendOTP && (_jsx(TMButton, { btnStyle: 'text', disabled: resendTimer > 0, caption: resendTimer > 0 ? `${LOGINLocalizator.ResendIn + ' ' + resendTimer}s` : LOGINLocalizator.ResendOtp, showTooltip: false, onClick: handleResendOTP, color: 'success' })), additionalButtons.map((btn, index) => (_jsx("div", { children: btn }, index * 2)))] })] }));
+    return (_jsxs(Container, { children: [_jsx(LargeTitle, { children: header ?? LOGINLocalizator.EnterOtpCode }), _jsx(Title, { children: text ?? LOGINLocalizator.EnterOtpEmailOnly }), _jsx(InputsWrapper, { children: safeDigits.map((digit, i) => (_jsx(DigitBox, { $isMobile: isMobile, $filled: !!digit, maxLength: 1, value: digit, onChange: (e) => handleChange(e.target.value, i), onKeyDown: (e) => handleKeyDown(e, i), onPaste: handlePaste, ref: (el) => (inputRefs.current[i] = el), inputMode: "numeric" }, i * 2))) }), _jsxs(ControlsRow, { $isMobile: isMobile, children: [_jsx(TMButton, { btnStyle: 'text', disabled: clearBtnDisabled, caption: SDKUI_Localizator.ClearOTP, showTooltip: false, onClick: handleClearOTP, color: 'tertiary' }), onResendOTP && (_jsx(TMButton, { btnStyle: 'text', disabled: resendTimer > 0, caption: resendTimer > 0 ? `${LOGINLocalizator.ResendIn + ' ' + resendTimer}s` : LOGINLocalizator.ResendOtp, showTooltip: false, onClick: handleResendOTP, color: 'success' })), additionalButtons.map((btn, index) => (_jsx("div", { children: btn }, index * 2)))] })] }));
 };
 export default OTPReader;
 const Container = styled.div ` display: flex; flex-direction: column; align-items: center; gap: 2px; `;

package/lib/components/forms/Login/PasswordStrengthChecker.js CHANGED Viewed

@@ -36,7 +36,7 @@ const PasswordStrengthChecker = ({ password, onValidationChange }) => {
         const unmetRules = rules.filter((_, i) => !res[i]).map(r => r.label);
         onValidationChange?.(isValid, unmetRules);
     }, [password]);
-    return (_jsxs(Wrapper, { children: [_jsxs(Title, { children: [_jsxs(CircleContainer, { children: [" ", _jsx(IconInfo, { color: '#f9c1a8' }), " "] }), SDKUI_Localizator.PasswordRule_Requirement] }), rules.map((rule, i) => (_jsxs(Rule, { "$passed": results[i], children: [" ", rule.label, " "] }, i * 2)))] }));
+    return (_jsxs(Wrapper, { children: [_jsxs(Title, { children: [_jsxs(CircleContainer, { children: [" ", _jsx(IconInfo, { color: '#f9c1a8' }), " "] }), SDKUI_Localizator.PasswordRule_Requirement] }), rules.map((rule, i) => (_jsxs(Rule, { $passed: results[i], children: [" ", rule.label, " "] }, i * 2)))] }));
 };
 export default PasswordStrengthChecker;
 const Wrapper = styled.div ` padding: 10px; border-radius: 12px; background: linear-gradient(135deg, #f9c1a8 0%, white 40%, white 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); max-width: 400px; `;

package/lib/components/forms/Login/RapidAccessLogin.js CHANGED Viewed

@@ -273,8 +273,8 @@ const RapidAccessItem = ({ rapidAccess, isMobile = false, onRemove, onSelect, on
         handleClose();
     };
     const expandedAriaHandler = () => setIsExpanded(!isExpanded);
-    return (_jsxs(Container, { children: [_jsxs(ItemWrapper, { children: [_jsxs(ItemProfileWrapper, { style: { zIndex: 100 - index }, onDoubleClick: () => onSelect(rapidAccess.id), children: [_jsx(PreferredIconContainer, { onClick: () => onDefault(rapidAccess.id), children: _jsx(TMTooltip, { content: SDKUI_Localizator.Default, children: rapidAccess.preferred ? _jsx(IconStarSolid, { color: TMColors.tertiary, fontSize: 20 }) : _jsx(IconStarOutline, { fontSize: 20 }) }) }), _jsx(ProfileCircle, { "$color": rapidAccess.color ?? TMColors.primary, onClick: () => setIsMenuOpen(true), children: iconMap[rapidAccess.icon] ?? _jsx(IconUser, { fontSize: 20 }) }), _jsxs(RapidAccessName, { onClick: expandedAriaHandler, children: [" ", truncateText(rapidAccess.name, 50)] })] }), _jsxs(ItemOperationsWrapper, { children: [_jsx(ExpandButton, { onClick: expandedAriaHandler, children: isExpanded ? _jsx(IconCollapse, { fontSize: 16 }) : _jsx(IconExpand, { fontSize: 16 }) }), _jsx(TMButton, { color: 'primary', caption: SDKUI_Localizator.Select, showTooltip: false, onClick: () => onSelect(rapidAccess.id) }), _jsx(TMButton, { color: 'tertiary', caption: SDKUI_Localizator.Remove, showTooltip: false, onClick: onRemovePopup })] }), _jsx(Menu, { x: isMobile ? 0 : 80, y: isMobile ? -40 : 0, onClose: () => handleClose(), visible: isMenuOpen, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsxs(StyledMenuItemContainer, { style: { flexWrap: 'wrap' }, children: [colors.map((color, index) => (_jsx(ColorWrapper, { onClick: () => onColorPick(color), children: _jsx(ColorPicker, { "$color": color }) }, index * 2))), _jsx(ColorWrapper, { onClick: () => setShowIconMenu(!showIconMenu), children: icons.find(icon => icon[0] === rapidAccess.icon)?.[1] ?? _jsx(IconUser, {}) })] }), showIconMenu && _jsx(StyledMenuItemContainer, { style: { flexWrap: 'wrap' }, children: icons.map(([key, icon]) => (_jsx(ColorWrapper, { onClick: () => onIconPick(key), children: _jsx(ColorPicker, { "$color": "white", children: icon }) }, key))) })] }) })] }), isExpanded &&
-                _jsxs(ExpandedAria, { children: [_jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: name, onValueChanged: (value) => setName(value), type: 'text', label: SDKUI_Localizator.NameForAccess, additionalIcons: additionalSaveBtn }), _jsx(TextBox, { value: rapidAccess.endpoint?.Description, type: 'text', label: SDKUI_Localizator.Endpoint, disabled: true })] }), _jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: rapidAccess.archive?.description, type: 'text', label: SDKUI_Localizator.ArchiveID, disabled: true }), _jsx(TextBox, { value: rapidAccess.authenticationMode, type: 'text', label: SDKUI_Localizator.AuthMode, disabled: true })] }), _jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: rapidAccess.username, type: 'text', label: SDKUI_Localizator.UserName, disabled: true }), _jsx(TextBox, { value: cultureIDsDataSource.find(cid => cid.value === rapidAccess.language)?.display, type: 'text', label: SDKUI_Localizator.CultureID, disabled: true })] }), hasAuthDomain && _jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: domainValue, type: 'text', label: SDKUI_Localizator.Domain, disabled: true }), rapidAccess.authenticationMode === AuthenticationModes.TopMediaOnBehalfOf &&
+    return (_jsxs(Container, { children: [_jsxs(ItemWrapper, { children: [_jsxs(ItemProfileWrapper, { style: { zIndex: 100 - index }, onDoubleClick: () => onSelect(rapidAccess.id), children: [_jsx(PreferredIconContainer, { onClick: () => onDefault(rapidAccess.id), children: _jsx(TMTooltip, { content: SDKUI_Localizator.Default, children: rapidAccess.preferred ? _jsx(IconStarSolid, { color: TMColors.tertiary, fontSize: 20 }) : _jsx(IconStarOutline, { fontSize: 20 }) }) }), _jsx(ProfileCircle, { $color: rapidAccess.color ?? TMColors.primary, onClick: () => setIsMenuOpen(true), children: iconMap[rapidAccess.icon] ?? _jsx(IconUser, { fontSize: 20 }) }), _jsxs(RapidAccessName, { onClick: expandedAriaHandler, children: [" ", truncateText(rapidAccess.name, 50)] })] }), _jsxs(ItemOperationsWrapper, { children: [_jsx(ExpandButton, { onClick: expandedAriaHandler, children: isExpanded ? _jsx(IconCollapse, { fontSize: 16 }) : _jsx(IconExpand, { fontSize: 16 }) }), _jsx(TMButton, { color: 'primary', caption: SDKUI_Localizator.Select, showTooltip: false, onClick: () => onSelect(rapidAccess.id) }), _jsx(TMButton, { color: 'tertiary', caption: SDKUI_Localizator.Remove, showTooltip: false, onClick: onRemovePopup })] }), _jsx(Menu, { x: isMobile ? 0 : 80, y: isMobile ? -40 : 0, onClose: () => handleClose(), visible: isMenuOpen, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsxs(StyledMenuItemContainer, { style: { flexWrap: 'wrap' }, children: [colors.map((color, index) => (_jsx(ColorWrapper, { onClick: () => onColorPick(color), children: _jsx(ColorPicker, { $color: color }) }, index * 2))), _jsx(ColorWrapper, { onClick: () => setShowIconMenu(!showIconMenu), children: icons.find(icon => icon[0] === rapidAccess.icon)?.[1] ?? _jsx(IconUser, {}) })] }), showIconMenu && _jsx(StyledMenuItemContainer, { style: { flexWrap: 'wrap' }, children: icons.map(([key, icon]) => (_jsx(ColorWrapper, { onClick: () => onIconPick(key), children: _jsx(ColorPicker, { $color: "white", children: icon }) }, key))) })] }) })] }), isExpanded &&
+                _jsxs(ExpandedAria, { children: [_jsxs(InputContainer, { $isMobile: isMobile, children: [_jsx(TextBox, { value: name, onValueChanged: (value) => setName(value), type: 'text', label: SDKUI_Localizator.NameForAccess, additionalIcons: additionalSaveBtn }), _jsx(TextBox, { value: rapidAccess.endpoint?.Description, type: 'text', label: SDKUI_Localizator.Endpoint, disabled: true })] }), _jsxs(InputContainer, { $isMobile: isMobile, children: [_jsx(TextBox, { value: rapidAccess.archive?.description, type: 'text', label: SDKUI_Localizator.ArchiveID, disabled: true }), _jsx(TextBox, { value: rapidAccess.authenticationMode, type: 'text', label: SDKUI_Localizator.AuthMode, disabled: true })] }), _jsxs(InputContainer, { $isMobile: isMobile, children: [_jsx(TextBox, { value: rapidAccess.username, type: 'text', label: SDKUI_Localizator.UserName, disabled: true }), _jsx(TextBox, { value: cultureIDsDataSource.find(cid => cid.value === rapidAccess.language)?.display, type: 'text', label: SDKUI_Localizator.CultureID, disabled: true })] }), hasAuthDomain && _jsxs(InputContainer, { $isMobile: isMobile, children: [_jsx(TextBox, { value: domainValue, type: 'text', label: SDKUI_Localizator.Domain, disabled: true }), rapidAccess.authenticationMode === AuthenticationModes.TopMediaOnBehalfOf &&
                                     _jsx(TextBox, { value: rapidAccess.onBehalfUsername, type: 'text', label: SDKUI_Localizator.UserName + ' ' + `(${SDKUI_Localizator.OnBehalfOf})`, disabled: true })] })] })] }));
 };
 const ColorWrapper = styled.div ` cursor: pointer; width: 30px; height: 30px; background-color: white; border-radius: 30px; display: flex; align-items: center; justify-content: center; `;

package/lib/components/forms/Login/RecoverPasswordFlow.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import OTPReader from './OTPReader';
@@ -101,7 +101,7 @@ const RecoverPasswordFlow = ({ onClose, tmSession, windowHeight = 800, isMobile
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [step, email, otpCode, getOTPAsync, verifyOTPAsync]);
-    return (_jsxs(Wrapper, { "$windowHeight": windowHeight, children: [_jsx(Title, { children: SDKUI_Localizator.ForgetPassword + ` (${tmSession.SessionDescr?.userName})` }), _jsx(Divider, {}), (!isMobile || windowHeight === WindowHeight.LARGE) && _jsxs(StepIndicatorContainer, { "$windowHeight": windowHeight, children: [" ", _jsx(StepIndicator, { steps: steps, currentStep: step }), " "] }), step === 1 && (_jsxs(Card, { children: [_jsx(Title, { children: SDKUI_Localizator.InsertYourEmail }), _jsx(TextBox, { ref: emailRef, type: "email", showSuccess: true, value: email, onValueChanged: (e) => setEmail(e), placeHolder: 'Email...', validationItems: fieldValidations('email') }), _jsx(TMButton, { fontSize: "1.1rem", caption: LOGINLocalizator.SendOtp, showTooltip: false, disabled: !email, onClick: async () => await getOTPAsync() })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx(OTPReader, { digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange }), _jsx(TMButton, { fontSize: "1.2rem", caption: LOGINLocalizator.Continue, disabled: otpCode.join('').length !== 6, showTooltip: false, onClick: async () => await verifyOTPAsync() })] })), step === 3 && (_jsx(ChangePasswordInputs, { tmSession: tmSession, cpd: cpd, otp: otpCode.join(''), onClose: onClose })), _jsx(BackButtonWrapper, { children: _jsx(TMButton, { onClick: onClose, btnStyle: "icon", icon: _jsx(IconArrowLeft, { fontSize: 20 }), caption: SDKUI_Localizator.Back }) })] }));
+    return (_jsxs(Wrapper, { $windowHeight: windowHeight, children: [_jsx(Title, { children: SDKUI_Localizator.ForgetPassword + ` (${tmSession.SessionDescr?.userName})` }), _jsx(Divider, {}), (!isMobile || windowHeight === WindowHeight.LARGE) && _jsxs(StepIndicatorContainer, { $windowHeight: windowHeight, children: [" ", _jsx(StepIndicator, { steps: steps, currentStep: step }), " "] }), step === 1 && (_jsxs(Card, { children: [_jsx(Title, { children: SDKUI_Localizator.InsertYourEmail }), _jsx(TextBox, { ref: emailRef, type: "email", showSuccess: true, value: email, onValueChanged: (e) => setEmail(e), placeHolder: 'Email...', validationItems: fieldValidations('email') }), _jsx(TMButton, { fontSize: "1.1rem", caption: LOGINLocalizator.SendOtp, showTooltip: false, disabled: !email, onClick: async () => await getOTPAsync() })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx(OTPReader, { digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange }), _jsx(TMButton, { fontSize: "1.2rem", caption: LOGINLocalizator.Continue, disabled: otpCode.join('').length !== 6, showTooltip: false, onClick: async () => await verifyOTPAsync() })] })), step === 3 && (_jsx(ChangePasswordInputs, { tmSession: tmSession, cpd: cpd, otp: otpCode.join(''), onClose: onClose })), _jsx(BackButtonWrapper, { children: _jsx(TMButton, { onClick: onClose, btnStyle: "icon", icon: _jsx(IconArrowLeft, { fontSize: 20 }), caption: SDKUI_Localizator.Back }) })] }));
 };
 export default RecoverPasswordFlow;
 const Wrapper = styled.div ` width: 100%; background-color: white; position: absolute; top: 0; left: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: ${props => props.$windowHeight === WindowHeight.LARGE ? '20px' : '10px'}; padding: 20px 65px; `;

package/lib/components/forms/Login/SelectBox.js CHANGED Viewed

@@ -91,6 +91,6 @@ const SelectBox = ({ cursor = 'pointer', onClick, value, onValueChanged, label,
         }
         return color;
     }, [mainValidation]);
-    return (_jsxs(Container, { children: [label && _jsx(Label, { "$color": borderColor, children: label }), _jsxs(SelectContainer, { "$borderColor": borderColor, "$borderThickness": borderThickness, "$focused": isFocused, "$disabled": disabled, children: [icon && _jsx(IconWrapper, { "$color": validationItems.length > 0 ? borderColor : TMColors.primary, children: icon }), _jsxs(Select, { onClick: onClick, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), value: value, onChange: (e) => onValueChanged?.(e.target.value), "$readOnly": readOnly, disabled: disabled, "$color": fontColor, "$cursor": !disabled ? cursor : 'default', children: [placeHolder && _jsx("option", { value: "", disabled: true, children: placeHolder }), options.map((option, index) => (_jsx("option", { value: option.value, children: option.display }, index * 2)))] })] }), _jsx(ValidationMessageContainer, { children: validationMessages.map((val, index) => (_jsx(ValidationMessage, { "$color": val.color, children: val.message }, index * 2))) })] }));
+    return (_jsxs(Container, { children: [label && _jsx(Label, { $color: borderColor, children: label }), _jsxs(SelectContainer, { $borderColor: borderColor, $borderThickness: borderThickness, $focused: isFocused, $disabled: disabled, children: [icon && _jsx(IconWrapper, { $color: validationItems.length > 0 ? borderColor : TMColors.primary, children: icon }), _jsxs(Select, { onClick: onClick, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), value: value, onChange: (e) => onValueChanged?.(e.target.value), $readOnly: readOnly, disabled: disabled, $color: fontColor, $cursor: !disabled ? cursor : 'default', children: [placeHolder && _jsx("option", { value: "", disabled: true, children: placeHolder }), options.map((option, index) => (_jsx("option", { value: option.value, children: option.display }, index * 2)))] })] }), _jsx(ValidationMessageContainer, { children: validationMessages.map((val, index) => (_jsx(ValidationMessage, { $color: val.color, children: val.message }, index * 2))) })] }));
 };
 export default SelectBox;

package/lib/components/forms/Login/StepIndicator.js CHANGED Viewed

@@ -5,7 +5,7 @@ const StepIndicator = ({ steps, currentStep }) => {
     return (_jsx(StepIndicatorWrapper, { children: steps.map((label, index) => {
             const stepIndex = index + 1;
             const isLast = index === steps.length - 1;
-            return (_jsxs(StepItemWrapper, { children: [_jsxs(StepItem, { "$active": currentStep === stepIndex, "$completed": currentStep > stepIndex, children: [_jsx(Circle, { "$active": currentStep === stepIndex, "$completed": currentStep > stepIndex, children: currentStep > stepIndex ? '✓' : stepIndex }), _jsx(StepLabel, { children: label })] }), !isLast && (_jsxs(StepConnectorWrapper, { children: [_jsx(StepConnector, {}), _jsx(StepFiller, { "$filled": currentStep > stepIndex })] }))] }, label));
+            return (_jsxs(StepItemWrapper, { children: [_jsxs(StepItem, { $active: currentStep === stepIndex, $completed: currentStep > stepIndex, children: [_jsx(Circle, { $active: currentStep === stepIndex, $completed: currentStep > stepIndex, children: currentStep > stepIndex ? '✓' : stepIndex }), _jsx(StepLabel, { children: label })] }), !isLast && (_jsxs(StepConnectorWrapper, { children: [_jsx(StepConnector, {}), _jsx(StepFiller, { $filled: currentStep > stepIndex })] }))] }, label));
         }) }));
 };
 export default StepIndicator;