@topconsultnpm/sdkui-react 6.22.0-dev3.24 → 6.22.0-dev3.25

package/lib/components/base/waitPanel/TMWaitPanelView.js

@@ -0,0 +1,274 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import styled, { keyframes } from 'styled-components';
+import toppy from '../../../assets/Toppy-generico.png';
+import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { getAppModuleButtonColors, SDKUI_Localizator } from '../../../helper';
+import TMWaitPanelConfirm from './TMWaitPanelConfirm';
+/** Colore della barra per applicazione, da getAppModuleButtonColors. SDK_Globals.tmSession lancia senza sessione. */
+const getProgressColor = () => {
+    let appModuleID = AppModules.SURFER;
+    try {
+        appModuleID = SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER;
+    }
+    catch { /* nessuna sessione: resta il default */ }
+    return getAppModuleButtonColors(appModuleID).base;
+};
+const fadeIn = keyframes `
+    from { opacity: 0; }
+    to   { opacity: 1; }
+`;
+// Sfondo su uno pseudo-elemento: il layer composito dell'animazione sgranerebbe Toppy.
+const StyledOverlay = styled.div `
+    position: fixed;
+    inset: 0;
+    z-index: ${props => props.$zIndex};
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: rgba(17, 24, 39, 0.16);
+        animation: ${fadeIn} 140ms ease-out;
+    }
+`;
+const StyledCard = styled.div `
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 420px;
+    max-width: calc(100% - 24px);
+    max-height: calc(100% - 24px);
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: 22px 24px 18px 24px;
+    background: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.22);
+    font-family: inherit;
+`;
+const StyledHeader = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+`;
+// Ritaglio dal contenitore, non object-fit: cover darebbe un'altezza frazionaria e sgranerebbe l'immagine.
+const StyledToppyClip = styled.div `
+    height: 61px;
+    width: 68px;
+    overflow: hidden;
+    flex: 0 0 auto;
+`;
+const StyledToppy = styled.img `
+    display: block;
+    width: 68px;
+    height: 79px;
+    user-select: none;
+    -webkit-user-drag: none;
+`;
+const StyledHeaderText = styled.div `
+    flex: 1;
+    min-width: 0;
+`;
+const StyledTitle = styled.div `
+    font-size: 17px;
+    font-weight: 600;
+    color: #1f2937;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+`;
+const StyledSubtitle = styled.div `
+    margin-top: 3px;
+    font-size: 13px;
+    color: #6b7280;
+    line-height: 1.3;
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+`;
+// Didascalia di una barra: con due avanzamenti e' l'unica cosa che dice quale sia quale.
+const StyledBarLabel = styled.div `
+    margin-top: 18px;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: #9aa3b2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+const StyledPercentRow = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    margin-top: ${props => (props.$hasLabel ? '4px' : '18px')};
+`;
+const StyledPercent = styled.div `
+    font-size: 34px;
+    font-weight: 700;
+    color: #111827;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+`;
+const StyledCounters = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    padding-bottom: 3px;
+`;
+const StyledPill = styled.span `
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px 2px 6px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 18px;
+    color: ${props => props.$color};
+    background: ${props => props.$background};
+    font-variant-numeric: tabular-nums;
+
+    svg { flex: 0 0 auto; }
+`;
+const StyledTrack = styled.div `
+    margin-top: 12px;
+    width: 100%;
+    height: 8px;
+    border-radius: 999px;
+    background: #e8edf4;
+    overflow: hidden;
+`;
+const StyledFill = styled.div `
+    width: 100%;
+    height: 100%;
+    background: ${props => props.$color};
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition: transform 120ms linear;
+    will-change: transform;
+`;
+const StyledTimeRow = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 8px;
+    font-size: 12px;
+    color: #8a94a6;
+    font-variant-numeric: tabular-nums;
+`;
+// Seconda barra: come la principale ma piu' piccola e in tono minore.
+const StyledSecondary = styled.div `
+    margin-top: ${props => (props.$hasLabel ? '4px' : '14px')};
+`;
+const StyledSecondaryRow = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    font-size: 12px;
+    color: #6b7280;
+    font-variant-numeric: tabular-nums;
+`;
+const StyledSecondaryText = styled.span `
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+const StyledSecondaryTrack = styled.div `
+    margin-top: 5px;
+    width: 100%;
+    height: 5px;
+    border-radius: 999px;
+    background: #eef1f6;
+    overflow: hidden;
+`;
+const StyledSecondaryFill = styled.div `
+    width: 100%;
+    height: 100%;
+    background: ${props => props.$color};
+    opacity: 0.55;
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition: transform 120ms linear;
+    will-change: transform;
+`;
+const StyledFooter = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: 18px;
+`;
+const StyledAbortButton = styled.button `
+    padding: 9px 18px;
+    border: 1px solid #d5dbe5;
+    border-radius: 10px;
+    background: #ffffff;
+    color: #374151;
+    font-size: 13px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color 120ms ease, border-color 120ms ease;
+
+    &:hover:not(:disabled) { background: #f3f5f9; border-color: #c3cbd8; }
+    &:active:not(:disabled) { background: #e9edf4; }
+    &:disabled { cursor: default; opacity: 0.55; }
+`;
+const IconOk = () => (_jsx("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '3', strokeLinecap: 'round', strokeLinejoin: 'round', children: _jsx("polyline", { points: '20 6 9 17 4 12' }) }));
+const IconWarning = () => (_jsxs("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2.4', strokeLinecap: 'round', strokeLinejoin: 'round', children: [_jsx("path", { d: 'M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z' }), _jsx("line", { x1: '12', y1: '9', x2: '12', y2: '13' }), _jsx("line", { x1: '12', y1: '17', x2: '12.01', y2: '17' })] }));
+const IconError = () => (_jsxs("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '3', strokeLinecap: 'round', strokeLinejoin: 'round', children: [_jsx("line", { x1: '18', y1: '6', x2: '6', y2: '18' }), _jsx("line", { x1: '6', y1: '6', x2: '18', y2: '18' })] }));
+const TMWaitPanelView = ({ title = '', subtitle = '', cancelable = false, showEta = true, showCounters = true, showSecondary = false, secondaryText = '', primaryLabel = '', secondaryLabel = '', zIndex = 2147483601, onAbort, onConfirmYes, onConfirmNo, onMount }) => {
+    const confirmRef = useRef(null);
+    const titleRef = useRef(null);
+    const subtitleRef = useRef(null);
+    const percentRef = useRef(null);
+    const fillRef = useRef(null);
+    const elapsedRef = useRef(null);
+    const remainingRef = useRef(null);
+    const okValueRef = useRef(null);
+    const warningValueRef = useRef(null);
+    const errorValueRef = useRef(null);
+    const abortRef = useRef(null);
+    const secondaryTextRef = useRef(null);
+    const secondaryPercentRef = useRef(null);
+    const secondaryFillRef = useRef(null);
+    useLayoutEffect(() => {
+        if (!confirmRef.current || !titleRef.current || !subtitleRef.current || !percentRef.current || !fillRef.current)
+            return;
+        if (!elapsedRef.current || !remainingRef.current)
+            return;
+        if (!okValueRef.current || !warningValueRef.current || !errorValueRef.current)
+            return;
+        onMount?.({
+            confirm: confirmRef.current,
+            title: titleRef.current,
+            subtitle: subtitleRef.current,
+            percent: percentRef.current,
+            fill: fillRef.current,
+            elapsed: elapsedRef.current,
+            remaining: remainingRef.current,
+            okValue: okValueRef.current,
+            warningValue: warningValueRef.current,
+            errorValue: errorValueRef.current,
+            abortButton: abortRef.current,
+            secondaryText: secondaryTextRef.current,
+            secondaryPercent: secondaryPercentRef.current,
+            secondaryFill: secondaryFillRef.current,
+        });
+        // Montaggio una tantum: da qui in avanti il manager aggiorna il pannello via DOM, non via render.
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(StyledOverlay, { $zIndex: zIndex, children: _jsxs(StyledCard, { role: 'dialog', "aria-live": 'polite', children: [_jsxs(StyledHeader, { children: [_jsx(StyledToppyClip, { children: _jsx(StyledToppy, { src: toppy, alt: '', draggable: false }) }), _jsxs(StyledHeaderText, { children: [_jsx(StyledTitle, { ref: titleRef, children: title }), _jsx(StyledSubtitle, { ref: subtitleRef, children: subtitle })] })] }), primaryLabel && _jsx(StyledBarLabel, { children: primaryLabel }), _jsxs(StyledPercentRow, { $hasLabel: !!primaryLabel, children: [_jsx(StyledPercent, { ref: percentRef, children: "0.00%" }), _jsxs(StyledCounters, { style: { display: showCounters ? 'flex' : 'none' }, children: [_jsxs(StyledPill, { $color: '#3E7B1C', $background: '#E8F5E0', children: [_jsx(IconOk, {}), _jsx("span", { ref: okValueRef, children: "0" })] }), _jsxs(StyledPill, { $color: '#8A6D00', $background: '#FBF3CF', children: [_jsx(IconWarning, {}), _jsx("span", { ref: warningValueRef, children: "0" })] }), _jsxs(StyledPill, { $color: '#B00F2B', $background: '#FBE1E6', children: [_jsx(IconError, {}), _jsx("span", { ref: errorValueRef, children: "0" })] })] })] }), _jsx(StyledTrack, { children: _jsx(StyledFill, { ref: fillRef, $color: getProgressColor() }) }), _jsxs(StyledTimeRow, { style: { visibility: showEta ? 'visible' : 'hidden' }, children: [_jsx("span", { ref: elapsedRef }), _jsx("span", { ref: remainingRef })] }), showSecondary && secondaryLabel && _jsx(StyledBarLabel, { children: secondaryLabel }), showSecondary &&
+                            _jsxs(StyledSecondary, { $hasLabel: !!secondaryLabel, children: [_jsxs(StyledSecondaryRow, { children: [_jsx(StyledSecondaryText, { ref: secondaryTextRef, children: secondaryText }), _jsx("span", { ref: secondaryPercentRef, children: "0.00%" })] }), _jsx(StyledSecondaryTrack, { children: _jsx(StyledSecondaryFill, { ref: secondaryFillRef, $color: getProgressColor() }) })] }), cancelable &&
+                            _jsx(StyledFooter, { children: _jsx(StyledAbortButton, { ref: abortRef, type: 'button', onClick: onAbort, children: SDKUI_Localizator.Abort }) })] }) }), _jsx(TMWaitPanelConfirm, { ref: confirmRef, zIndex: zIndex + 1, onYes: onConfirmYes, onNo: onConfirmNo })] }));
+};
+export default TMWaitPanelView;

package/lib/components/base/waitPanel/index.d.ts

@@ -0,0 +1 @@
+export * from './TMWaitPanelManager';

package/lib/components/base/waitPanel/index.js

@@ -0,0 +1 @@
+export * from './TMWaitPanelManager';

package/lib/components/choosers/TMPathChooser.js

@@ -6,12 +6,11 @@ import { TMColors } from '../../utils/theme';
 import ShowAlert from '../base/TMAlert';
 import TMAreaManager from '../base/TMAreaManager';
 import TMButton from '../base/TMButton';
-import { TMLayoutItem } from '../base/TMLayout';
+import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMModal from '../base/TMModal';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
-import { TMLayoutWaitingContainer } from '../base/TMWaitPanel';
+import TMWaitPanelManager from '../base/waitPanel/TMWaitPanelManager';
 import TMTextBox from '../editors/TMTextBox';
-let abortController = new AbortController();
 const TMPathChooser = (props) => {
     //const [path, setPath] = useState<string>(props.value)
     const [elementStyle, setElementStyle] = useState(props.elementStyle);
@@ -22,12 +21,6 @@ const TMPathChooser = (props) => {
     const [showAreaManager, setShowAreaManager] = useState(false);
     const [downloadLink, setDownloadLink] = useState(null);
     const [file, setFile] = useState(null);
-    const [showWaitPanel, setShowWaitPanel] = useState(false);
-    const [waitPanelTitle, setWaitPanelTitle] = useState('');
-    const [showSecondary, setShowSecondary] = useState(false);
-    const [waitPanelTextSecondary, setWaitPanelTextSecondary] = useState('');
-    const [waitPanelValueSecondary, setWaitPanelValueSecondary] = useState(0);
-    const [waitPanelMaxValueSecondary, setWaitPanelMaxValueSecondary] = useState(0);
     const formulaItems = ['{@JobName}', '{@JobStartDate}', '{@JobStartDate_DDMMYYYY}', '{@JobStartDateTime}', '{@ProcessRunID}', '{@ProcessName}', '{@ProcessStartDate}', '{@ProcessStartDateTime}'];
     //useEffect(() => { setPath(props.value) }, [props.value])
     useEffect(() => {
@@ -98,30 +91,23 @@ const TMPathChooser = (props) => {
         return buttons;
     };
     const onFileDownloadHandler = async () => {
+        // Un solo file: la barra del pannello segue i byte scaricati
+        const waitPanel = TMWaitPanelManager.show({
+            title: "Download",
+            cancelable: true,
+            showCounters: false,
+        });
         try {
             let av = AreaHelper.ExtractAreaInfo_2(props.value, true);
             let doc;
             let tms = props.tmSession ?? SDK_Globals.tmSession;
-            setShowWaitPanel(true);
-            setShowSecondary(true);
-            setWaitPanelTitle("Download");
-            abortController = new AbortController();
-            let firstBlock = true;
-            let maxFileSize = 0;
-            doc = await tms?.NewAreaEngine().RetrieveFileAsync(av.aid, av.subFolder, av.fileName, FileFormats.None, abortController.signal, (pd) => {
-                if (firstBlock) {
-                    maxFileSize = pd.ProgressBarMaximum ?? 0;
-                    setWaitPanelMaxValueSecondary(maxFileSize);
-                    firstBlock = false;
-                }
-                setWaitPanelValueSecondary(pd.ProgressBarValue);
-                setWaitPanelTextSecondary(`Downloading... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(maxFileSize, true)}`);
-                if (pd.ProgressBarValue === pd.ProgressBarMaximum) {
-                    setWaitPanelMaxValueSecondary(0);
-                    setWaitPanelValueSecondary(0);
-                    setWaitPanelTextSecondary('');
-                    firstBlock = true;
-                }
+            doc = await tms?.NewAreaEngine().RetrieveFileAsync(av.aid, av.subFolder, av.fileName, FileFormats.None, waitPanel.signal, (pd) => {
+                const total = pd.ProgressBarMaximum ?? 0;
+                waitPanel.update({
+                    value: pd.ProgressBarValue,
+                    max: total,
+                    subtitle: `Downloading... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(total, true)}`
+                });
             });
             setFile(doc);
         }
@@ -135,13 +121,10 @@ const TMPathChooser = (props) => {
             setFile(null);
         }
         finally {
-            setWaitPanelTextSecondary('');
-            setWaitPanelMaxValueSecondary(0);
-            setWaitPanelValueSecondary(0);
-            setShowWaitPanel(false);
+            waitPanel.close();
         }
     };
-    return (_jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { buttons: renderButtons(), elementStyle: elementStyle, formulaItems: props.allowParametricPath ? formulaItems : [], isModifiedWhen: props.isModifiedWhen, label: props.label, value: props.value || '', onValueChanged: (e) => { /*setPath(e.target.value);*/ props.onValueChanged?.(e.target.value); }, validationItems: props.validationItems }) }), showAreaManager &&
+    return (_jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { buttons: renderButtons(), elementStyle: elementStyle, formulaItems: props.allowParametricPath ? formulaItems : [], isModifiedWhen: props.isModifiedWhen, label: props.label, value: props.value || '', onValueChanged: (e) => { /*setPath(e.target.value);*/ props.onValueChanged?.(e.target.value); }, validationItems: props.validationItems }) }), showAreaManager &&
                 _jsxs(TMModal, { resizable: true, width: '80%', onClose: () => setShowAreaManager(false), children: [_jsx(TMAreaManager, { showOnlyFolders: props.allowBrowseFolder_Area && !props.allowBrowseFile_Area, initialPath: props.value, onFolderChanged: (folder) => setAreaFolderPath(folder), onFileChanged: (file) => setAreaFilePath(file), isPathChooser: true, areaChoose: areaChoose, width: '98%', height: props.allowBrowseFile_Area ? '70vh' : '90%', tmSession: props.tmSession, selectionMode: 'single' }), _jsx("div", { style: { position: 'absolute', right: '22px', bottom: '8px' }, children: _jsx(TMButton, { caption: 'OK', onClick: () => areaChoose() }) })] })] }));
 };
 export default TMPathChooser;

package/lib/components/features/assistant/TMToppyDraggableHelpCenter.js

@@ -60,7 +60,7 @@ const TMToppyButton = styled.div.attrs((props) => ({
     height: ${(props) => props.$isCollapsed ? '56px' : '110px'};
     max-width: 100%;
     max-height: 100%;
-    z-index: 2147483647;
+    z-index: 2147483600;
     background-color: ${(props) => props.$isCollapsed ? '#ffffff' : 'transparent'};
     border: ${(props) => props.$isCollapsed ? '3px solid #3b82f6' : 'none'};
     border-radius: ${(props) => props.$isCollapsed ? '50%' : '0'};
@@ -130,7 +130,7 @@ const DragOverlay = styled.div `
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 2147483646;
+  z-index: 2147483599;
   cursor: grabbing;
 `;
 const TMToppyDraggableHelpCenter = (props) => {

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

@@ -6,11 +6,10 @@ import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { DcmtOperationTypes, FormModes } from '../../../ts';
 import { StyledToolbarCardContainer, StyledFormButtonsContainer } from '../../base/Styled';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
-import { TMSplitterLayout } from '../../base/TMLayout';
+import TMLayoutContainer, { TMSplitterLayout } from '../../base/TMLayout';
 import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from '../../base/TMPopUp';
 import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
 import TMSpinner from '../../base/TMSpinner';
-import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
 import TMDistinctValues from '../../choosers/TMDistinctValues';
 import TMFormulaEditor, { FormulaDescriptor, FormulaHelper, FormulaTargets } from '../../editors/TMFormulaEditor';
 import { useMetadataEditableList } from '../../editors/TMMetadataEditor';
@@ -28,7 +27,7 @@ const TMBatchUpdateForm = ({ inputDcmts, TID, DID, isExpertMode = SDKUI_Globals.
     const [showFormulaEditor, setShowFormulaEditor] = useState(false);
     const [focusedMetadataValue, setFocusedMetadataValue] = useState();
     const [addOrRemoveEditableList] = useMetadataEditableList();
-    const { abortController, runOperationAsync, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary } = useDcmtOperations();
+    const { runOperationAsync } = useDcmtOperations();
     const deviceType = useDeviceType();
     useEffect(() => {
         if (!TID)
@@ -131,7 +130,7 @@ const TMBatchUpdateForm = ({ inputDcmts, TID, DID, isExpertMode = SDKUI_Globals.
         });
     };
     const renderContent = () => {
-        return (_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: Gutters.getGutters(), separatorColor: 'transparent', separatorActiveColor: 'transparent', showSeparator: showFormulaEditor, start: showFormulaEditor ? ['50%', '50%'] : ['100%', '0%'], min: ['0', '0'], children: [_jsx(TMPanel, { title: isModal ? 'Modifica i metadati' : `${SDKUI_Localizator.BatchUpdate} (${inputDcmts.length} documenti selezionati)`, onBack: deviceType === DeviceType.MOBILE ? handleClose : undefined, allowMaximize: !isModal, showHeader: !isModal, children: _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, isExpertMode: isExpertMode, showCheckBoxes: ShowCheckBoxesMode.Always, showNullValueCheckBoxes: true, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, validationItems: validationItems, isOpenDistinctValues: showDistinctValuesPanel, selectedMID: focusedMetadataValue?.mid, onFocusedItemChanged: (item) => { setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+        return (_jsx(TMLayoutContainer, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: Gutters.getGutters(), separatorColor: 'transparent', separatorActiveColor: 'transparent', showSeparator: showFormulaEditor, start: showFormulaEditor ? ['50%', '50%'] : ['100%', '0%'], min: ['0', '0'], children: [_jsx(TMPanel, { title: isModal ? 'Modifica i metadati' : `${SDKUI_Localizator.BatchUpdate} (${inputDcmts.length} documenti selezionati)`, onBack: deviceType === DeviceType.MOBILE ? handleClose : undefined, allowMaximize: !isModal, showHeader: !isModal, children: _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, isExpertMode: isExpertMode, showCheckBoxes: ShowCheckBoxesMode.Always, showNullValueCheckBoxes: true, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, validationItems: validationItems, isOpenDistinctValues: showDistinctValuesPanel, selectedMID: focusedMetadataValue?.mid, onFocusedItemChanged: (item) => { setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
                                         setMetadataValues((prevItems) => prevItems.map((item) => {
                                             const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
                                             return newItem ? { ...item, ...newItem } : item;

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

@@ -13,8 +13,8 @@ import TMOrderRetrieveFormats from '../../choosers/TMOrderRetrieveFormats';
 import TMButton from '../../base/TMButton';
 import { ButtonNames, TMMessageBoxManager } from '../../base/TMPopUp';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
-import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
 import { TMSplitterLayout } from '../../base/TMLayout';
+import TMWaitPanelManager from '../../base/waitPanel/TMWaitPanelManager';
 import TMCheckBox from '../../editors/TMCheckBox';
 import ShowAlert from '../../base/TMAlert';
 import { TMColors } from '../../../utils/theme';
@@ -26,17 +26,13 @@ import { buildInitialDownloadSettings, fileExists, generateTargetFileName, gener
  * e TMDownloadRelationViewerSection.
  */
 const TMCopyToFolderForm = ({ mode, selectedDcmtInfos, onClose, showTMRelationViewer, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
-    const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync, } = useDcmtOperations();
+    // Il wait panel del download lo apre e lo aggiorna l'hook: qui serve solo la funzione.
+    const { downloadDcmtsAsync } = useDcmtOperations();
     // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
     const deviceType = useDeviceType();
     // ---- Stato dei settings ----
     const [settings, setSettings] = useState(() => buildInitialDownloadSettings(SDKUI_Globals.userSettings.documentDownloadSettings, SDKUI_Globals.userSettings.searchSettings.invoiceRetrieveFormat, SDKUI_Globals.userSettings.searchSettings.orderRetrieveFormat));
     const [selectedItemsRelationViewer, setSelectedItemsRelationViewer] = useState([]);
-    // ---- Stato per la creazione ZIP (spinner separato) ----
-    const [isCreatingZip, setIsCreatingZip] = useState(false);
-    const [zipProgressText, setZipProgressText] = useState('');
-    const [zipProgressValue, setZipProgressValue] = useState(0);
-    const [zipProgressMax, setZipProgressMax] = useState(0);
     const [hasSavedLayout, setHasSavedLayout] = useState(() => {
         const saved = SDKUI_Globals.userSettings.documentDownloadSettings;
         const defaults = new DocumentDownloadSettings();
@@ -215,18 +211,19 @@ const TMCopyToFolderForm = ({ mode, selectedDcmtInfos, onClose, showTMRelationVi
                 const zipFileName = settings.zipFileName.trim().toLowerCase().endsWith('.zip')
                     ? settings.zipFileName.trim()
                     : settings.zipFileName.trim() + '.zip';
-                // Crea il blob ZIP
-                setIsCreatingZip(true);
-                setZipProgressMax(zipEntries.length);
-                setZipProgressValue(0);
-                setZipProgressText(SDKUI_Localizator.CompressToZipFile);
+                // Crea il blob ZIP: la compressione non e' interrompibile, quindi niente Interrompi.
+                const zipPanel = TMWaitPanelManager.show({
+                    title: SDKUI_Localizator.CompressToZipFile,
+                    subtitle: SDKUI_Localizator.CompressToZipFile,
+                    max: zipEntries.length,
+                    showCounters: false,
+                });
                 try {
                     const zipBlob = await ZipManager.createZip(zipEntries, {
                         compressionLevel: 6,
                         password: settings.zipPassword.trim() || undefined,
                         onProgress: (current, total, filename) => {
-                            setZipProgressValue(current);
-                            setZipProgressText(`${SDKUI_Localizator.CompressToZipFile}: ${filename}`);
+                            zipPanel.update({ value: current, subtitle: `${SDKUI_Localizator.CompressToZipFile}: ${filename}` });
                         },
                     });
                     // Se c'è un handle della cartella: salva direttamente nella cartella selezionata
@@ -258,7 +255,7 @@ const TMCopyToFolderForm = ({ mode, selectedDcmtInfos, onClose, showTMRelationVi
                     ShowAlert({ message: SDKUI_Localizator.Error, mode: 'error', duration: 5000, title: SDKUI_Localizator.CompressToZipFile });
                 }
                 finally {
-                    setIsCreatingZip(false);
+                    zipPanel.close();
                 }
             }
         }
@@ -388,25 +385,25 @@ const TMCopyToFolderForm = ({ mode, selectedDcmtInfos, onClose, showTMRelationVi
                                                     { value: 'skip', display: SDKUI_Localizator.DoNotCopy },
                                                     { value: 'rename', display: SDKUI_Localizator.CopyButRename },
                                                 ], value: isUsingDefaultDownloads ? 'rename' : settings.fileExistsMode, direction: "row", disabled: isUsingDefaultDownloads, onValueChanged: (value) => updateSettings('fileExistsMode', value), fontSize: '0.9rem' }) }), isUsingDefaultDownloads && (_jsx("span", { style: { fontSize: '0.8rem', color: '#888', fontStyle: 'italic', marginTop: '4px', display: 'block' }, children: SDKUI_Localizator.BrowserAutoRenamesDuplicateFilesInDownloadsFolder }))] }) }), fileNamingRow, formatSelectorsRow] })), settings.exportMode === 'zip' && (_jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', columnGap: '10px' }, children: [_jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', columnGap: '10px', width: '100%' }, children: [folderSelector, _jsx("div", { style: { flex: '1 1 280px', minWidth: '280px' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.ZipFileName, value: settings.zipFileName, validationItems: zipValidationItems, autoComplete: "one-time-code", onValueChanged: (e) => updateSettings('zipFileName', e.target.value) }) }), _jsx("div", { style: { flex: '1 1 280px', minWidth: '280px' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.ProtectWithPasswordOptional, value: settings.zipPassword, type: "password", autoComplete: "one-time-code", onValueChanged: (e) => updateSettings('zipPassword', e.target.value) }) })] }), fileNamingRow, formatSelectorsRow] }))] })] }));
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel || isCreatingZip, showWaitPanelPrimary: isCreatingZip ? true : showPrimary, showWaitPanelSecondary: isCreatingZip ? false : showSecondary, waitPanelTitle: isCreatingZip ? SDKUI_Localizator.CompressToZipFile : waitPanelTitle, waitPanelTextPrimary: isCreatingZip ? zipProgressText : waitPanelTextPrimary, waitPanelValuePrimary: isCreatingZip ? zipProgressValue : waitPanelValuePrimary, waitPanelMaxValuePrimary: isCreatingZip ? zipProgressMax : waitPanelMaxValuePrimary, waitPanelTextSecondary: isCreatingZip ? '' : waitPanelTextSecondary, waitPanelValueSecondary: isCreatingZip ? 0 : waitPanelValueSecondary, waitPanelMaxValueSecondary: isCreatingZip ? 0 : waitPanelMaxValueSecondary, isCancelable: !isCreatingZip, abortController: abortController, usePortal: true, children: _jsx(TMModal, { width: calcResponsiveSizes(deviceType, showTMRelationViewer ? '95%' : '950px', '95%', '95%'), height: showTMRelationViewer ? '95%' : 'auto', title: getTitle(), onClose: onClose, showCloseButton: true, children: _jsxs("div", { onContextMenu: (e) => e.preventDefault(), style: { display: 'flex', flexDirection: 'column', padding: '4px 4px 16px 4px', width: '100%', height: '100%', boxSizing: 'border-box', overflow: 'hidden' }, children: [showTMRelationViewer ? (_jsx("div", { style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }, children: _jsxs(TMSplitterLayout, { direction: 'vertical', showSeparator: true, separatorSize: 8, separatorColor: 'transparent', separatorActiveColor: 'transparent', overflow: 'hidden', min: ["50", "50"], start: ['65%', '35%'], children: [_jsx(TMDownloadRelationViewerSection, { selectedDcmtInfos: selectedDcmtInfos, onSelectionChanged: setSelectedItemsRelationViewer, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), configSection] }, "TMCopyToFolder-relation-config") })) : (configSection), _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexShrink: 0, marginTop: '12px' }, children: _jsxs("button", { disabled: !isFormValid() || (showTMRelationViewer && selectedItemsRelationViewer.filter(i => i.isDcmt).length === 0), onClick: run, style: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                gap: '6px',
-                                padding: '8px 20px',
-                                fontSize: '0.95rem',
-                                fontWeight: 600,
-                                color: '#fff',
-                                background: (!isFormValid() || (showTMRelationViewer && selectedItemsRelationViewer.filter(i => i.isDcmt).length === 0))
-                                    ? '#b0b0b0'
-                                    : 'linear-gradient(135deg, #28a745 0%, #218838 100%)',
-                                border: 'none',
-                                borderRadius: '6px',
-                                cursor: (!isFormValid() || (showTMRelationViewer && selectedItemsRelationViewer.filter(i => i.isDcmt).length === 0)) ? 'not-allowed' : 'pointer',
-                                boxShadow: (!isFormValid() || (showTMRelationViewer && selectedItemsRelationViewer.filter(i => i.isDcmt).length === 0))
-                                    ? 'none'
-                                    : '0 2px 8px rgba(40, 167, 69, 0.35)',
-                                transition: 'all 0.2s ease',
-                            }, children: [_jsx(IconPlay, {}), _jsx("span", { children: SDKUI_Localizator.Execute })] }) })] }) }) }));
+    return (_jsx(TMModal, { width: calcResponsiveSizes(deviceType, showTMRelationViewer ? '95%' : '950px', '95%', '95%'), height: showTMRelationViewer ? '95%' : 'auto', title: getTitle(), onClose: onClose, showCloseButton: true, children: _jsxs("div", { onContextMenu: (e) => e.preventDefault(), style: { display: 'flex', flexDirection: 'column', padding: '4px 4px 16px 4px', width: '100%', height: '100%', boxSizing: 'border-box', overflow: 'hidden' }, children: [showTMRelationViewer ? (_jsx("div", { style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }, children: _jsxs(TMSplitterLayout, { direction: 'vertical', showSeparator: true, separatorSize: 8, separatorColor: 'transparent', separatorActiveColor: 'transparent', overflow: 'hidden', min: ["50", "50"], start: ['65%', '35%'], children: [_jsx(TMDownloadRelationViewerSection, { selectedDcmtInfos: selectedDcmtInfos, onSelectionChanged: setSelectedItemsRelationViewer, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), configSection] }, "TMCopyToFolder-relation-config") })) : (configSection), _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexShrink: 0, marginTop: '12px' }, children: _jsxs("button", { disabled: !isFormValid() || (showTMRelationViewer && selectedItemsRelationViewer.filter(i => i.isDcmt).length === 0), onClick: run, style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            gap: '6px',
+                            padding: '8px 20px',
+                            fontSize: '0.95rem',
+                            fontWeight: 600,
+                            color: '#fff',
+                            background: (!isFormValid() || (showTMRelationViewer && selectedItemsRelationViewer.filter(i => i.isDcmt).length === 0))
+                                ? '#b0b0b0'
+                                : 'linear-gradient(135deg, #28a745 0%, #218838 100%)',
+                            border: 'none',
+                            borderRadius: '6px',
+                            cursor: (!isFormValid() || (showTMRelationViewer && selectedItemsRelationViewer.filter(i => i.isDcmt).length === 0)) ? 'not-allowed' : 'pointer',
+                            boxShadow: (!isFormValid() || (showTMRelationViewer && selectedItemsRelationViewer.filter(i => i.isDcmt).length === 0))
+                                ? 'none'
+                                : '0 2px 8px rgba(40, 167, 69, 0.35)',
+                            transition: 'all 0.2s ease',
+                        }, children: [_jsx(IconPlay, {}), _jsx("span", { children: SDKUI_Localizator.Execute })] }) })] }) }));
 };
 export default TMCopyToFolderForm;