@topconsultnpm/sdkui-react-beta 6.17.0 → 6.17.1

package/lib/components/features/documents/TMDcmtIcon.js

@@ -7,13 +7,13 @@ import { DownloadTypes } from '../../../ts';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { TMWaitPanel } from '../../base/TMWaitPanel';
-const StyledCellRenderDcmtIcon = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    overflow: visible;
-    position: relative;
+const StyledCellRenderDcmtIcon = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
+    position: relative;
 `;
 const TMDcmtIcon = ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode = "none", tooltipContent, openInOffice, onDownloadDcmtsAsync }) => {
     const { downloadDcmtsAsync, showWaitPanel, waitPanelTitle, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, abortController } = useDcmtOperations();
@@ -56,7 +56,7 @@ const TMDcmtIcon = ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isS
 };
 export default TMDcmtIcon;
 function IconLexProtLock(props) {
-    return (_jsxs("svg", { viewBox: "0 0 512 512", height: "1em", width: "1em", ...props, children: [_jsx("path", { fill: "#455A64", d: "M256,0c-76.544,0.094-138.573,62.122-138.667,138.667V224c0,5.891,4.776,10.667,10.667,10.667h42.667\n        c5.891,0,10.667-4.776,10.667-10.667v-85.333C181.333,97.429,214.763,64,256,64s74.667,33.429,74.667,74.667V224\n        c0,5.891,4.776,10.667,10.667,10.667H384c5.891,0,10.667-4.776,10.667-10.667v-85.333C394.573,62.122,332.544,0.094,256,0z" }), _jsx("path", { fill: "#FFC107", d: "M128,213.333h256c29.455,0,53.333,23.878,53.333,53.333v192C437.333,488.122,413.455,512,384,512H128\n        c-29.455,0-53.333-23.878-53.333-53.333v-192C74.667,237.211,98.545,213.333,128,213.333z" }), _jsx("path", { fill: "#455A64", d: "M309.333,330.667c0.124-29.455-23.653-53.434-53.108-53.558\n        c-29.455-0.124-53.434,23.653-53.558,53.108c-0.086,20.36,11.427,38.992,29.674,48.023l-8.235,57.6\n        c-0.825,5.833,3.235,11.23,9.068,12.055c0.494,0.07,0.993,0.105,1.492,0.105h42.667c5.891,0.06,10.715-4.667,10.774-10.558\n        c0.005-0.543-0.03-1.086-0.108-1.623l-8.235-57.6C297.788,369.199,309.216,350.82,309.333,330.667z" }), _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " })] })
+    return (_jsxs("svg", { viewBox: "0 0 512 512", height: "1em", width: "1em", ...props, children: [_jsx("path", { fill: "#455A64", d: "M256,0c-76.544,0.094-138.573,62.122-138.667,138.667V224c0,5.891,4.776,10.667,10.667,10.667h42.667\r\n        c5.891,0,10.667-4.776,10.667-10.667v-85.333C181.333,97.429,214.763,64,256,64s74.667,33.429,74.667,74.667V224\r\n        c0,5.891,4.776,10.667,10.667,10.667H384c5.891,0,10.667-4.776,10.667-10.667v-85.333C394.573,62.122,332.544,0.094,256,0z" }), _jsx("path", { fill: "#FFC107", d: "M128,213.333h256c29.455,0,53.333,23.878,53.333,53.333v192C437.333,488.122,413.455,512,384,512H128\r\n        c-29.455,0-53.333-23.878-53.333-53.333v-192C74.667,237.211,98.545,213.333,128,213.333z" }), _jsx("path", { fill: "#455A64", d: "M309.333,330.667c0.124-29.455-23.653-53.434-53.108-53.558\r\n        c-29.455-0.124-53.434,23.653-53.558,53.108c-0.086,20.36,11.427,38.992,29.674,48.023l-8.235,57.6\r\n        c-0.825,5.833,3.235,11.23,9.068,12.055c0.494,0.07,0.993,0.105,1.492,0.105h42.667c5.891,0.06,10.715-4.667,10.774-10.558\r\n        c0.005-0.543-0.03-1.086-0.108-1.623l-8.235-57.6C297.788,369.199,309.216,350.82,309.333,330.667z" }), _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " })] })
     // <svg
     //     viewBox="0 0 24 24"
     //     fill="currentColor"

package/lib/components/features/documents/TMDcmtPreview.js

@@ -364,29 +364,29 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
         if (!doc)
             return;
         doc.open();
-        doc.write(`
-            <html>
-                <head>
-                    <title>Print Image</title>
-                    <style>
-                        body, html {
-                            margin: 0;
-                            padding: 0;
-                            height: 100%;
-                            display: flex;
-                            justify-content: center;
-                            align-items: center;
-                        }
-                        img {
-                            max-width: 100%;
-                            max-height: 100%;
-                        }
-                    </style>
-                </head>
-                <body>
-                    <img src="${dataUrl}" onload="setTimeout(() => { window.print(); window.close(); }, 100);" />
-                </body>
-            </html>
+        doc.write(`
+            <html>
+                <head>
+                    <title>Print Image</title>
+                    <style>
+                        body, html {
+                            margin: 0;
+                            padding: 0;
+                            height: 100%;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                        }
+                        img {
+                            max-width: 100%;
+                            max-height: 100%;
+                        }
+                    </style>
+                </head>
+                <body>
+                    <img src="${dataUrl}" onload="setTimeout(() => { window.print(); window.close(); }, 100);" />
+                </body>
+            </html>
         `);
         doc.close();
         iframe.contentWindow?.addEventListener('afterprint', () => {
@@ -436,11 +436,11 @@ const StyledImage = styled.img.attrs(props => ({
     style: {
         transform: `translate(${props.$tx}px, ${props.$ty}px) scale(${props.$scale}) rotate(${props.$rotate}deg)`,
     },
-})) `
-  display: block;
-  max-width: none;
-  max-height: none;
-  transform-origin: top left;
-  pointer-events: none;
-  position: absolute;
+})) `
+  display: block;
+  max-width: none;
+  max-height: none;
+  transform-origin: top left;
+  pointer-events: none;
+  position: absolute;
 `;

package/lib/components/features/documents/TMFileUploader.js

@@ -89,27 +89,27 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
     const innerContent = (_jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [enableDragDropOverlay && _jsx(TMDragDropOverlay, { handleFile: handleFile, refocusAfterFileInput: refocusAfterFileInput }), content] }));
     return showTMPanel ? (_jsx(TMPanel, { ref: fileUploaderPanelRef, panelID: 'file-uploader-panel', title: SDKUI_Localizator.FileUpload, onBack: deviceType === DeviceType.MOBILE ? () => onClose?.() : undefined, toolbar: deviceType !== DeviceType.MOBILE ? (_jsx(StyledHeaderIcon, { onClick: onClose, "$color": 'white', children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) })) : undefined, children: innerContent })) : (innerContent);
 };
-const UploadContainer = styled.div ` 
-position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 5px;
-  border: 2px dashed ${props => props.$isRequired ? () => TMColors.error : () => TMColors.primaryColor};
-  /* max-height: 100px; */
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  padding: 30px;
-  text-align: center;
-  color: ${props => props.$isRequired ? () => TMColors.error : () => TMColors.primaryColor};
-  transition: background-color 0.3s;
-  &:hover {
-    background-color: #658cab;
-  } 
+const UploadContainer = styled.div ` 
+position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 5px;
+  border: 2px dashed ${props => props.$isRequired ? () => TMColors.error : () => TMColors.primaryColor};
+  /* max-height: 100px; */
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  padding: 30px;
+  text-align: center;
+  color: ${props => props.$isRequired ? () => TMColors.error : () => TMColors.primaryColor};
+  transition: background-color 0.3s;
+  &:hover {
+    background-color: #658cab;
+  } 
 `;
-const HiddenInput = styled.input `
-  display: none;
+const HiddenInput = styled.input `
+  display: none;
 `;
 export default TMFileUploader;

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

@@ -15,57 +15,57 @@ import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { StyledDivHorizontal, StyledOffCanvasPanel } from '../../base/Styled';
 import { useOutsideClick } from '../../../hooks/useOutsideClick';
 import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
-const StyledSqdItem = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    min-width: 0;
-    padding: 10px;
-    position: relative;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-   &:hover {
-        cursor: pointer;
-        background: linear-gradient(
-            270deg,
-            rgba(70, 181, 162, 0.15) 16%,
-            rgba(59, 170, 188, 0.15) 34%,
-            rgba(59, 170, 188, 0.15) 34%,
-            rgba(54, 129, 173, 0.15) 54%,
-            rgba(51, 104, 165, 0.15) 72%,
-            rgba(47, 84, 157, 0.15) 88%,
-            rgba(48, 79, 153, 0.15) 100%
-        );
-    }
-
-    .info-icon {
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.2s;
-        ${({ $isMobile }) => $isMobile && `
-            display: none !important;
-        `}
-    }
-
-    &:hover .info-icon {
-        opacity: 1;
-        pointer-events: auto;
-    }
-
-    &::after {
-        content: '';
-        display: block;
-        width: 90%;
-        margin: 0 auto;
-        border-bottom: 1px solid #00A99D;
-        margin-top: 8px;
-    }
-
-    &:last-child {
-        border-bottom: none; // remove border for last item
-        margin-bottom: 0;
-    }
+const StyledSqdItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-width: 0;
+    padding: 10px;
+    position: relative;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+   &:hover {
+        cursor: pointer;
+        background: linear-gradient(
+            270deg,
+            rgba(70, 181, 162, 0.15) 16%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(54, 129, 173, 0.15) 54%,
+            rgba(51, 104, 165, 0.15) 72%,
+            rgba(47, 84, 157, 0.15) 88%,
+            rgba(48, 79, 153, 0.15) 100%
+        );
+    }
+
+    .info-icon {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s;
+        ${({ $isMobile }) => $isMobile && `
+            display: none !important;
+        `}
+    }
+
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    &::after {
+        content: '';
+        display: block;
+        width: 90%;
+        margin: 0 auto;
+        border-bottom: 1px solid #00A99D;
+        margin-top: 8px;
+    }
+
+    &:last-child {
+        border-bottom: none; // remove border for last item
+        margin-bottom: 0;
+    }
 `;
 const getSharingModeColor = (sharingMode) => {
     switch (sharingMode) {

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

@@ -14,19 +14,19 @@ import TMMetadataEditor, { useMetadataEditableList } from '../../editors/TMMetad
 import { colorOperator, StyledItemWrapper, StyledRowItem } from '../../query/TMQueryEditor';
 import { TMMidViewer } from '../../viewers/TMMidViewer';
 import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
-const StyledMetadataListItem = styled.div `
-    padding: 5px;
-    border-radius: 8px;
-    height: max-content;
-    width: 100%;
-    /* box-shadow: 1px 1px 7px rgba(0,0,0,0.15); */
-    /* font-size: ${(props) => props.$isSelected ? '1.2rem' : '1rem'}; */
-    background: ${(props) => props.$isSelected ? props.$selectedColor : props.$backgroundColor};
-
-    &:hover {
-        background: ${(props) => props.$isSelected ? props.$selectedColor : props.$hoverColor};
-        cursor: pointer;
-    }
+const StyledMetadataListItem = styled.div `
+    padding: 5px;
+    border-radius: 8px;
+    height: max-content;
+    width: 100%;
+    /* box-shadow: 1px 1px 7px rgba(0,0,0,0.15); */
+    /* font-size: ${(props) => props.$isSelected ? '1.2rem' : '1rem'}; */
+    background: ${(props) => props.$isSelected ? props.$selectedColor : props.$backgroundColor};
+
+    &:hover {
+        background: ${(props) => props.$isSelected ? props.$selectedColor : props.$hoverColor};
+        cursor: pointer;
+    }
 `;
 const TMSearchQueryEditor = ({ qd, dcmtTypesList = [], isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showAllMdWhere, onQdChanged, onFocusedMetadataChanged, onAdvancedMenuClick }) => {
     const [dynDataListsToBeRefreshed, setDynDataListsToBeRefreshed] = useState([]);

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

@@ -324,36 +324,36 @@ export const refreshLastSearch = async (qd) => {
     }
     return searchResults;
 };
-export const StyledToppyTextContainer = styled.div `
-    padding: 22px 8px;
-    width: 100%;
-    max-width: 300px;
-    border: 1px solid #2559A5;
-    border-radius: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    min-height: 100px;
+export const StyledToppyTextContainer = styled.div `
+    padding: 22px 8px;
+    width: 100%;
+    max-width: 300px;
+    border: 1px solid #2559A5;
+    border-radius: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-height: 100px;
 `;
-export const StyledToppyText = styled.p `
-    text-align: center;
-    color: #2559A5;
-    font-size: 1rem;
-    user-select: none;
-    margin: 0;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3; /* non è una proprietà standard ma è così diffusa e ben supportata che è considerata una "best practice pragmatica" */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;
-    word-break: break-word;
-    line-height: 1.2;
+export const StyledToppyText = styled.p `
+    text-align: center;
+    color: #2559A5;
+    font-size: 1rem;
+    user-select: none;
+    margin: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3; /* non è una proprietà standard ma è così diffusa e ben supportata che è considerata una "best practice pragmatica" */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+    word-break: break-word;
+    line-height: 1.2;
 `;
-export const StyledToppyImage = styled.img `
-    width: 100%; 
-    max-width: 120px; 
-    height: auto;
-    display: block; 
+export const StyledToppyImage = styled.img `
+    width: 100%; 
+    max-width: 120px; 
+    height: auto;
+    display: block; 
 `;

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

@@ -703,9 +703,9 @@ const TMSearchResultGrid = ({ openInOffice, inputFocusedItem, showSearch, allowM
     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: TMDataGridPageSize.Small, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, onContextMenuPreparing: onContextMenuPreparing, onKeyDown: onKeyDown, counterConfig: { show: true } }), (showExportForm && searchResult && onCloseExportForm) && _jsx(TMDataGridExportForm, { dataColumns: dataColumns, dataSource: dataSource, selectedRowKeys: selectedRowKeys, onCloseExportForm: onCloseExportForm, searchResult: searchResult })] });
 };
 //#region TMSearchResultSelector
-const StyledItemTemplate = styled.div ` 
-    background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
-    cursor: pointer; 
+const StyledItemTemplate = styled.div ` 
+    background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
+    cursor: pointer; 
 `;
 const MemoizedStyledItemTemplate = React.memo(StyledItemTemplate);
 const TMSearchResultSelector = ({ searchResults = [], disableAccordionIfSingleCategory = false, selectedTID, onSelectionChanged }) => {

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

@@ -201,70 +201,70 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
             : _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
 };
 export default TMTreeSelector;
-const StyledTreeListWrapper = styled.div `
-    width: 100%;
-    height: 100%;
-    min-height: 0;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-
-    .dx-treelist,
-    .dx-treelist-rowsview,
-    .dx-scrollable,
-    .dx-scrollable-wrapper,
-    .dx-scrollable-container,
-    .dx-scrollable-content {
-        height: 100% !important;
-        min-height: 0 !important;
-        max-height: 100% !important;
-        box-sizing: border-box;
-    }
-
-    .dx-scrollable-scrollbar.dx-scrollbar-vertical {
-        /* Mostra solo quando serve */
-        opacity: 1 !important;
-    }
-
-    .dx-scrollable-scrollbar.dx-scrollbar-horizontal {
-        display: none !important;
-    }
-
-	.dx-treelist-container>.dx-treelist-headers,
-	.dx-treelist-container>.dx-treelist-rowsview {
-		background-color: transparent;
-	}
-
-	.dx-treelist-rowsview .dx-treelist-empty-space {
-		position: relative;
-		top: 4px;
-		display: inline-block;
-		width: 16px;
-	}
-
-	.dx-row > td {
-		padding: 10px 4px;
-		font-size: 1rem;
-        white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.dx-selection td {
-		background: oklch(from var(--dx-color-primary) l c h / .2) !important;
-	}
-
-    .dx-data-row:hover {
-        cursor: pointer;
-        background: linear-gradient(
-            270deg,
-            rgba(70, 181, 162, 0.15) 16%,
-            rgba(59, 170, 188, 0.15) 34%,
-            rgba(59, 170, 188, 0.15) 34%,
-            rgba(54, 129, 173, 0.15) 54%,
-            rgba(51, 104, 165, 0.15) 72%,
-            rgba(47, 84, 157, 0.15) 88%,
-            rgba(48, 79, 153, 0.15) 100%
-        );
-    }
+const StyledTreeListWrapper = styled.div `
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .dx-treelist,
+    .dx-treelist-rowsview,
+    .dx-scrollable,
+    .dx-scrollable-wrapper,
+    .dx-scrollable-container,
+    .dx-scrollable-content {
+        height: 100% !important;
+        min-height: 0 !important;
+        max-height: 100% !important;
+        box-sizing: border-box;
+    }
+
+    .dx-scrollable-scrollbar.dx-scrollbar-vertical {
+        /* Mostra solo quando serve */
+        opacity: 1 !important;
+    }
+
+    .dx-scrollable-scrollbar.dx-scrollbar-horizontal {
+        display: none !important;
+    }
+
+	.dx-treelist-container>.dx-treelist-headers,
+	.dx-treelist-container>.dx-treelist-rowsview {
+		background-color: transparent;
+	}
+
+	.dx-treelist-rowsview .dx-treelist-empty-space {
+		position: relative;
+		top: 4px;
+		display: inline-block;
+		width: 16px;
+	}
+
+	.dx-row > td {
+		padding: 10px 4px;
+		font-size: 1rem;
+        white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.dx-selection td {
+		background: oklch(from var(--dx-color-primary) l c h / .2) !important;
+	}
+
+    .dx-data-row:hover {
+        cursor: pointer;
+        background: linear-gradient(
+            270deg,
+            rgba(70, 181, 162, 0.15) 16%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(54, 129, 173, 0.15) 54%,
+            rgba(51, 104, 165, 0.15) 72%,
+            rgba(47, 84, 157, 0.15) 88%,
+            rgba(48, 79, 153, 0.15) 100%
+        );
+    }
 `;

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

@@ -419,15 +419,15 @@ const TMWGsCopyMoveForm = (props) => {
                             }, children: SDKUI_Localizator.Cancel })] })] }) });
 };
 export default TMWGsCopyMoveForm;
-const StepSpan = styled.span `
-  color: ${({ $isCurrent, $isPast }) => ($isCurrent ? TMColors.primary : $isPast ? '#555' : '#888')};
-  font-weight: ${({ $isCurrent }) => ($isCurrent ? 600 : 400)};
-  cursor: ${({ $isPast }) => ($isPast ? 'pointer' : 'default')};
-  transition: color 0.3s ease;
-  &:hover {
-    color: ${({ $isPast }) => ($isPast ? '#007bff' : undefined)};
-    text-decoration: ${({ $isPast }) => ($isPast ? 'underline' : 'none')};
-  }
+const StepSpan = styled.span `
+  color: ${({ $isCurrent, $isPast }) => ($isCurrent ? TMColors.primary : $isPast ? '#555' : '#888')};
+  font-weight: ${({ $isCurrent }) => ($isCurrent ? 600 : 400)};
+  cursor: ${({ $isPast }) => ($isPast ? 'pointer' : 'default')};
+  transition: color 0.3s ease;
+  &:hover {
+    color: ${({ $isPast }) => ($isPast ? '#007bff' : undefined)};
+    text-decoration: ${({ $isPast }) => ($isPast ? 'underline' : 'none')};
+  }
 `;
 export const TMStepNavigator = (props) => {
     const { steps, currentStep, onStepChange } = props;

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

@@ -15,55 +15,55 @@ import TMTextArea from "../../editors/TMTextArea";
 import TMDropDown from "../../editors/TMDropDown";
 import TMDateBox from "../../editors/TMDateBox";
 import ShowAlert from "../../base/TMAlert";
-const StyledWorkFlowOperationButtonsContainer = styled.div `
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-direction: column;
+const StyledWorkFlowOperationButtonsContainer = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-direction: column;
 `;
 const StyledTextArea = styled.textarea.attrs({
     maxLength: 200
-}) `
-    width: 100%; 
-    height: 100%; 
-    border: 1px solid ${props => props.$isValid ? '#b4b4b4' : TMColors.error}; 
-    border-radius: 10px; 
-    padding: 10px;
-    &:focus{
-        outline: none;
-        border-bottom: 4px solid ${props => props.$isValid ? TMColors.primaryColor : TMColors.error};
-    }
+}) `
+    width: 100%; 
+    height: 100%; 
+    border: 1px solid ${props => props.$isValid ? '#b4b4b4' : TMColors.error}; 
+    border-radius: 10px; 
+    padding: 10px;
+    &:focus{
+        outline: none;
+        border-bottom: 4px solid ${props => props.$isValid ? TMColors.primaryColor : TMColors.error};
+    }
 `;
-const CharacterCounter = styled.div `
-    text-align: right;
-    font-size: 0.8rem;
-    color: #6c757d;
-    margin-top: 2px;
+const CharacterCounter = styled.div `
+    text-align: right;
+    font-size: 0.8rem;
+    color: #6c757d;
+    margin-top: 2px;
 `;
-const StyledModalBodyWrapper = styled.div `
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+const StyledModalBodyWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 `;
-const StyledModalFooter = styled.div `
-    padding: 16px 0 12px 0; 
-    height: 60px;
-    display: flex;
-    justify-content: center;
+const StyledModalFooter = styled.div `
+    padding: 16px 0 12px 0; 
+    height: 60px;
+    display: flex;
+    justify-content: center;
 `;
-const StyledModalContentContainer = styled.div `
-    width: 100%;
-    padding: 10px; 
-    flex: 1; /* Questo fa sì che prenda tutto lo spazio verticale disponibile */
-    overflow-y: auto; 
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
+const StyledModalContentContainer = styled.div `
+    width: 100%;
+    padding: 10px; 
+    flex: 1; /* Questo fa sì che prenda tutto lo spazio verticale disponibile */
+    overflow-y: auto; 
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
 `;
-const StyledHorizontalContainer = styled.div `
-    display: flex;
-    gap: 10px;
-    /* align-items: flex-end; */
+const StyledHorizontalContainer = styled.div `
+    display: flex;
+    gap: 10px;
+    /* align-items: flex-end; */
 `;
 export const WorkFlowOperationButtons = ({ deviceType = DeviceType.DESKTOP, approveDisable = false, signApproveDisable = false, reassignDisable = false, rejectDisable = false, infoDisable = false, onApprove, onSignApprove, onReAssign, onReject, onMoreInfo }) => {
     const isMobile = deviceType === DeviceType.MOBILE;