@topconsultnpm/sdkui-react 6.22.0-dev2.9 → 6.22.0-dev3.11

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

@@ -1,18 +1,34 @@
-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, useMemo, useRef, useState } from "react";
 import { ObjectClasses, SDK_Globals } from "@topconsultnpm/sdk-ts";
-import { TASK_MORE_INFO_PREFIX_NAME, SDKUI_Localizator, PDGS_COLORS, calcResponsiveSizes } from "../../../helper";
+import { TASK_MORE_INFO_PREFIX_NAME, SDKUI_Localizator, PDGS_COLORS, calcResponsiveSizes, isSign4TopEnabled } from "../../../helper";
 import { TMColors } from "../../../utils/theme";
 import { StyledReferenceButton } from "../../base/Styled";
 import TMButton from "../../base/TMButton";
 import TMModal from "../../base/TMModal";
 import TMTooltip from "../../base/TMTooltip";
 import { WorkFlowOperationButtons } from "../workflow/TMWorkflowPopup";
+import { getWorkItemActionName, isSignatureWorkItem } from "../../../services/caseflow/caseFlowWorkItemUtils";
 const TMDcmtFormActionButtons = (props) => {
-    const { showToppyForApprove, workItems, deviceType, isMobile, handleSignApprove, updateShowApprovePopup, updateShowRejectPopup, updateShowReAssignPopup, updateShowMoreInfoPopup, fromDTD, showToppyForCompleteMoreInfo, moreInfoTasks, setShowCommentForm, showToppyForReferences, dcmtReferences, referenceActionMap, handleNavigateToReference, setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask } = props;
+    const { showToppyForApprove, workItems, caseFlowWorkItems, onCompleteCaseFlowWorkItem, onRejectCaseFlowWorkItem, deviceType, isMobile, handleSignApprove, updateShowApprovePopup, updateShowRejectPopup, updateShowReAssignPopup, updateShowMoreInfoPopup, fromDTD, showToppyForCompleteMoreInfo, moreInfoTasks, setShowCommentForm, showToppyForReferences, dcmtReferences, referenceActionMap, handleNavigateToReference, setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask } = props;
     const [showAllMoreInfoModal, setShowAllMoreInfoModal] = useState(false);
     const [showAllDossiersModal, setShowAllDossiersModal] = useState(false);
     const [showAllWorkingGroupsModal, setShowAllWorkingGroupsModal] = useState(false);
+    // Rifiuto di un'attività di pratica: il motivo è obbligatorio, quindi si passa
+    // da un dialogo. `busyItemId` disabilita i pulsanti dell'attività in corso.
+    const [rejectingItem, setRejectingItem] = useState(null);
+    const [rejectReason, setRejectReason] = useState('');
+    const [busyItemId, setBusyItemId] = useState(null);
+    const cfItems = useMemo(() => caseFlowWorkItems ?? [], [caseFlowWorkItems]);
+    const runCaseFlowAction = useCallback(async (item, action) => {
+        setBusyItemId(item.workItem.id ?? null);
+        try {
+            await action();
+        }
+        finally {
+            setBusyItemId(null);
+        }
+    }, []);
     const tasksNumber = useMemo(() => moreInfoTasks?.length ?? 0, [moreInfoTasks]);
     const firstTask = useMemo(() => {
         if (!moreInfoTasks || moreInfoTasks.length === 0)
@@ -31,19 +47,66 @@ const TMDcmtFormActionButtons = (props) => {
             return false;
         return true;
     }, [firstTask]);
-    const { hasMoreInfo, hasApprove, hasReferences } = useMemo(() => {
+    const { hasMoreInfo, hasApprove, hasReferences, hasCaseFlow } = useMemo(() => {
         const referencesExist = showToppyForReferences && dcmtReferences?.some(ref => ref.objClass === ObjectClasses.Dossier || ref.objClass === ObjectClasses.WorkingGroup);
         return {
             hasMoreInfo: Boolean(showToppyForCompleteMoreInfo),
             hasApprove: Boolean(showToppyForApprove),
-            hasReferences: Boolean(referencesExist)
+            hasReferences: Boolean(referencesExist),
+            hasCaseFlow: cfItems.length > 0
         };
     }, [
         showToppyForCompleteMoreInfo,
         showToppyForApprove,
         showToppyForReferences,
-        dcmtReferences
+        dcmtReferences,
+        cfItems
     ]);
+    /**
+     * Attività di pratica: contesto (pratica + testo dell'attività) e gli STESSI
+     * pulsanti dei work item del workflow (`WorkFlowOperationButtons`), così le due
+     * provenienze si comportano allo stesso modo davanti all'utente.
+     *
+     * La forma dei pulsanti la decide la CATEGORIA dell'attività, non il tipo
+     * documento: un'approvazione su un tipo abilitato alla firma non deve mostrare
+     * "Firma e approva" (per questo si passa `signFlow`). La firma richiede comunque
+     * il widget Sign4Top sul tipo, altrimenti il viewer non avrebbe come aprirsi.
+     *
+     * Per la FIRMA il pulsante apre il viewer (`handleSignApprove`, lo stesso del
+     * workflow) e il completamento avviene lì a firma riuscita: il form non sa
+     * firmare, e completare qui "a fiducia" chiuderebbe l'attività su un documento
+     * non firmato.
+     */
+    const renderCaseFlowWorkItemCard = (item) => {
+        const { caseflow, workItem } = item;
+        const isBusy = busyItemId === workItem.id;
+        const canSign = !!fromDTD?.widgets && isSign4TopEnabled(fromDTD.widgets);
+        const requiresSignature = isSignatureWorkItem(workItem) && canSign;
+        const description = workItem.description || getWorkItemActionName(caseflow, workItem);
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                textAlign: 'center',
+                gap: '10px',
+                cursor: 'default',
+            }, children: [description && (_jsx("div", { style: {
+                        maxWidth: '240px',
+                        paddingBottom: '8px',
+                        borderBottom: '1px solid rgba(255,255,255,0.25)',
+                        color: '#FFFFFF',
+                        fontSize: '0.95rem',
+                        fontWeight: 600,
+                        lineHeight: 1.3,
+                        letterSpacing: '0.2px',
+                        textShadow: '0 1px 2px rgba(0,0,0,0.35)',
+                        whiteSpace: 'pre-line',
+                    }, children: description })), _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, signFlow: requiresSignature, approveDisable: isBusy, signApproveDisable: isBusy, rejectDisable: isBusy, onSignApprove: handleSignApprove, onApprove: onCompleteCaseFlowWorkItem
+                        ? () => void runCaseFlowAction(item, () => onCompleteCaseFlowWorkItem(item))
+                        : undefined, onReject: onRejectCaseFlowWorkItem
+                        ? () => { setRejectReason(''); setRejectingItem(item); }
+                        : undefined })] }, workItem.id));
+    };
     // Raggruppa references per categoria
     const { dossierRefs, workingGroupRefs } = useMemo(() => {
         const dossiers = dcmtReferences?.filter(ref => ref.objClass === ObjectClasses.Dossier) ?? [];
@@ -144,7 +207,7 @@ const TMDcmtFormActionButtons = (props) => {
         return (_jsxs("div", { style: { position: 'relative', display: 'inline-flex' }, children: [_jsxs(StyledReferenceButton, { onMouseDown: handleRefButtonMouseDown, onMouseMove: handleRefButtonMouseMove, onClick: () => {
                         handleRefButtonClick(ref);
                         onClickRef?.();
-                    }, onDoubleClick: (e) => { e.preventDefault(); e.stopPropagation(); }, "$bgColor": backgroundColor, children: [_jsx("span", { children: label }), _jsx("span", { children: `"${ref.objName}"` })] }), showOthersIndicator && othersCount > 0 && (_jsx("div", { onClick: (e) => { e.stopPropagation(); onShowAll(); }, onMouseDown: e => e.stopPropagation(), style: {
+                    }, onDoubleClick: (e) => { e.preventDefault(); e.stopPropagation(); }, $bgColor: backgroundColor, children: [_jsx("span", { children: label }), _jsx("span", { children: `"${ref.objName}"` })] }), showOthersIndicator && othersCount > 0 && (_jsx("div", { onClick: (e) => { e.stopPropagation(); onShowAll(); }, onMouseDown: e => e.stopPropagation(), style: {
                         position: 'absolute',
                         right: '-36px',
                         top: '50%',
@@ -171,10 +234,17 @@ const TMDcmtFormActionButtons = (props) => {
                         e.currentTarget.style.transform = 'translateY(-50%)';
                     }, children: formatBadgeCount(othersCount) }))] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [hasMoreInfo && firstTask && isMoreInfoCardVisible && (_jsx("div", { style: { display: 'flex', gap: "10px", flexDirection: 'column', alignItems: 'center', paddingRight: tasksNumber > 1 ? '36px' : '0' }, children: renderMoreInfoCard(firstTask, tasksNumber > 1) })), hasMoreInfo && isMoreInfoCardVisible && hasApprove && _jsx(Divider, {}), hasApprove && (workItems.length === 1 ?
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [hasMoreInfo && firstTask && isMoreInfoCardVisible && (_jsx("div", { style: { display: 'flex', gap: "10px", flexDirection: 'column', alignItems: 'center', paddingRight: tasksNumber > 1 ? '36px' : '0' }, children: renderMoreInfoCard(firstTask, tasksNumber > 1) })), hasMoreInfo && isMoreInfoCardVisible && hasCaseFlow && _jsx(Divider, {}), hasCaseFlow && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px', alignItems: 'center' }, children: cfItems.map(item => renderCaseFlowWorkItemCard(item)) })), hasCaseFlow && hasApprove && _jsx(Divider, {}), hasMoreInfo && isMoreInfoCardVisible && !hasCaseFlow && hasApprove && _jsx(Divider, {}), hasApprove && (workItems.length === 1 ?
                         _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, onApprove: () => updateShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => updateShowRejectPopup(true), onReAssign: () => updateShowReAssignPopup(true), onMoreInfo: () => updateShowMoreInfoPopup(true) })
                         :
-                            _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Questo documento è associato a ${workItems.length} workitem.`, _jsx("br", {}), `Per approvare, vai alla pagina "Approvazione workflow".`] })), (hasApprove && hasReferences) || (hasMoreInfo && isMoreInfoCardVisible && !hasApprove && hasReferences) ? (_jsx(Divider, {})) : null, hasReferences && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px', alignItems: 'center' }, children: [dossierRefs.length > 0 && (_jsx("div", { style: { paddingRight: dossierRefs.length > 1 ? '36px' : '0' }, children: renderReferenceCard(dossierRefs[0], dossierRefs, dossierRefs.length > 1, () => setShowAllDossiersModal(true)) })), workingGroupRefs.length > 0 && (_jsx("div", { style: { paddingRight: workingGroupRefs.length > 1 ? '36px' : '0' }, children: renderReferenceCard(workingGroupRefs[0], workingGroupRefs, workingGroupRefs.length > 1, () => setShowAllWorkingGroupsModal(true)) }))] }))] }), showAllMoreInfoModal && moreInfoTasks && moreInfoTasks.length > 1 && (_jsx(TMModal, { title: `Altre richieste maggiori informazioni (${moreInfoTasks.length - 1})`, onClose: () => setShowAllMoreInfoModal(false), width: calcResponsiveSizes(deviceType, '450px', '450px', '95%'), height: 'auto', children: _jsx("div", { style: {
+                            _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Questo documento è associato a ${workItems.length} workitem.`, _jsx("br", {}), `Per approvare, vai alla pagina "Approvazione workflow".`] })), (hasApprove && hasReferences) || (hasMoreInfo && isMoreInfoCardVisible && !hasApprove && hasReferences) ? (_jsx(Divider, {})) : null, hasReferences && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px', alignItems: 'center' }, children: [dossierRefs.length > 0 && (_jsx("div", { style: { paddingRight: dossierRefs.length > 1 ? '36px' : '0' }, children: renderReferenceCard(dossierRefs[0], dossierRefs, dossierRefs.length > 1, () => setShowAllDossiersModal(true)) })), workingGroupRefs.length > 0 && (_jsx("div", { style: { paddingRight: workingGroupRefs.length > 1 ? '36px' : '0' }, children: renderReferenceCard(workingGroupRefs[0], workingGroupRefs, workingGroupRefs.length > 1, () => setShowAllWorkingGroupsModal(true)) }))] }))] }), rejectingItem && onRejectCaseFlowWorkItem && (_jsx(TMModal, { title: rejectingItem.workItem.rejectLabel || SDKUI_Localizator.Reject, onClose: () => { setRejectingItem(null); setRejectReason(''); }, width: calcResponsiveSizes(deviceType, '450px', '450px', '95%'), height: 'auto', children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, padding: 15 }, children: [_jsx("div", { style: { fontSize: 13, color: '#555' }, children: `${SDKUI_Localizator.Description}:` }), _jsx("textarea", { value: rejectReason, onChange: (e) => setRejectReason(e.target.value), rows: 4, style: { width: '100%', resize: 'vertical', fontFamily: 'inherit', fontSize: 13, padding: 8 } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 }, children: [_jsx(TMButton, { caption: SDKUI_Localizator.Cancel, showTooltip: false, onClick: () => { setRejectingItem(null); setRejectReason(''); } }), _jsx(TMButton, { caption: rejectingItem.workItem.rejectLabel || SDKUI_Localizator.Reject, color: 'error', showTooltip: false, disabled: !rejectReason.trim() || busyItemId === rejectingItem.workItem.id, onClick: () => {
+                                        const item = rejectingItem;
+                                        void runCaseFlowAction(item, async () => {
+                                            await onRejectCaseFlowWorkItem(item, rejectReason.trim());
+                                            setRejectingItem(null);
+                                            setRejectReason('');
+                                        });
+                                    } })] })] }) })), showAllMoreInfoModal && moreInfoTasks && moreInfoTasks.length > 1 && (_jsx(TMModal, { title: `Altre richieste maggiori informazioni (${moreInfoTasks.length - 1})`, onClose: () => setShowAllMoreInfoModal(false), width: calcResponsiveSizes(deviceType, '450px', '450px', '95%'), height: 'auto', children: _jsx("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
                         gap: '8px',

package/lib/components/features/documents/TMDcmtIcon.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DcmtInfo, DownloadModes, DownloadTypes } from '../../../ts';
 import { FileDescriptor } from '@topconsultnpm/sdk-ts';
 interface ITMDcmtIconProps {
@@ -16,5 +17,5 @@ interface ITMDcmtIconProps {
     /** Se true, renderizza il wait panel nel body tramite Portal (centrato a schermo intero) */
     usePortal?: boolean;
 }
-declare const TMDcmtIcon: ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode, tooltipContent, openInOffice, onDownloadDcmtsAsync, usePortal }: ITMDcmtIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMDcmtIcon: ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode, tooltipContent, openInOffice, onDownloadDcmtsAsync, usePortal }: ITMDcmtIconProps) => React.JSX.Element;
 export default TMDcmtIcon;

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

@@ -54,9 +54,11 @@ const TMDcmtIcon = ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isS
             cursor: isMobile
                 ? (isDownloadable ? "pointer" : undefined)
                 : (isDownloadable ? "default" : undefined)
-        }, ...(deviceType === DeviceType.MOBILE
-            ? { onClick: handleDownloadAction } // Su mobile, un singolo click sull'icona avvia il download
-            : { onDoubleClick: handleDownloadAction } // Su desktop, un doppio click sull'icona avvia il download
+        }, ...(downloadMode === "none"
+            ? {}
+            : deviceType === DeviceType.MOBILE
+                ? { onClick: handleDownloadAction } // Su mobile, un singolo click sull'icona avvia il download
+                : { onDoubleClick: handleDownloadAction } // Su desktop, un doppio click sull'icona avvia il download
         ), children: [icon, isLexProt == 1 && _jsx("div", { style: { position: 'absolute', left: '-7px', top: isShared ? undefined : '2px' }, children: _jsx(TMTooltip, { content: "Protezione LEX", children: _jsx(IconLexProtLock, { color: 'blue', fontSize: 13 }) }) }), isShared == 1 && _jsx("div", { style: { position: 'absolute', top: '-7px', left: '-5px' }, children: _jsx(TMTooltip, { content: "Documento condiviso", children: _jsx(IconShared, { fontSize: 16 }) }) }), isSigned == 1 && _jsx("div", { style: { position: 'absolute', bottom: '-4px', right: '-7px' }, children: _jsx(TMTooltip, { content: "Documento firmato", children: _jsx(IconSignature, { fontSize: 28 }) }) }), showWaitPanel && (usePortal ? createPortal(_jsx(TMWaitPanel, { title: waitPanelTitle, showSecondary: showSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); }, useHighZIndex: true }), document.body) : (_jsx(TMWaitPanel, { title: waitPanelTitle, showSecondary: showSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); } })))] }));
 };
 export default TMDcmtIcon;

package/lib/components/features/documents/TMDcmtPreview.d.ts

@@ -25,10 +25,12 @@ export declare const TMNothingToShow: ({ text, secondText, fileExt, icon }: {
     secondText?: any;
     fileExt?: string;
     icon?: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const StyledHeaderIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color"> & {
+}) => React.JSX.Element;
+export declare const StyledHeaderIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $color: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color"> & {
-    $color: string;
-}, never>>> & string;
-export declare const StyledPanelStatusContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+}>> & string;
+export declare const StyledPanelStatusContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

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

@@ -50,13 +50,17 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
             return;
         }
         const currentCacheKey = isBasketMode ? `basket-${dcmtData.btid}-${dcmtData.bid}-${dcmtData.bfid}` : `${dcmtData.tid}-${dcmtData.did}`;
-        const shouldFetch = isVisible && (!hasLoadedDataOnce || currentCacheKey !== lastLoadedDid);
+        // Fuori campo non si carica: l'anteprima nativa creata in una pagina non a video resta rotta
+        if (!isVisible)
+            return;
+        // Documento già caricato: ricaricarlo ricreerebbe il visualizzatore senza motivo
+        if (hasLoadedDataOnce && currentCacheKey === lastLoadedDid)
+            return;
         if (isDcmtFileInCache(currentCacheKey)) {
             isBasketMode ? loadBasketFile() : loadDocumentWithCache();
             setShowPreview(true);
-            return;
         }
-        if (shouldFetch) {
+        else {
             setDcmtBlob(undefined);
             setError('');
             setIsAbortError(false);
@@ -71,10 +75,10 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
             else {
                 setShowPreview(false);
             }
-            setHasLoadedDataOnce(true);
-            setLastLoadedDid(currentCacheKey);
         }
-    }, [dcmtData?.did, isVisible, hasLoadedDataOnce, lastLoadedDid]);
+        setHasLoadedDataOnce(true);
+        setLastLoadedDid(currentCacheKey);
+    }, [dcmtData?.tid, dcmtData?.did, isVisible, hasLoadedDataOnce, lastLoadedDid]);
     const loadBasketFile = async () => {
         try {
             // Check cache first
@@ -183,7 +187,7 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev
         { icon: _jsx(IconCloseCircle, {}), name: SDKUI_Localizator.RemoveFromCache, onClick: () => { removeDcmtsFileCache(cacheKey); setIsFromCache(false); } },
         { icon: _jsx(IconClear, {}), name: SDKUI_Localizator.ClearCache, onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
     ], [cacheKey, removeDcmtsFileCache, clearDcmtsFileCache, setIsFromCache]);
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanel, { padding: '0', title: titleHandler(), onClose: onClosePanel, onBack: onBack, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [onPrev && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), onNext && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(StyledHeaderIcon, { "$color": TMColors.primaryColor, children: _jsx(ContextMenu, { items: cacheMenuItems, trigger: "left", children: _jsx(IconMenuVertical, {}) }) }), _jsx(StyledHeaderIcon, { onClick: reOpenDcmt, "$color": TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.ReopenDocument, children: _jsx(IconRefresh, {}) }) })] }), children: error
+    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanel, { padding: '0', title: titleHandler(), onClose: onClosePanel, onBack: onBack, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [onPrev && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), onNext && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(StyledHeaderIcon, { $color: TMColors.primaryColor, children: _jsx(ContextMenu, { items: cacheMenuItems, trigger: "left", children: _jsx(IconMenuVertical, {}) }) }), _jsx(StyledHeaderIcon, { onClick: reOpenDcmt, $color: TMColors.primaryColor, children: _jsx(TMTooltip, { content: SDKUI_Localizator.ReopenDocument, children: _jsx(IconRefresh, {}) }) })] }), children: error
                 ? _jsx(ErrorContent, { error: error, isAbortError: isAbortError, onRetry: reOpenDcmt })
                 : renderedPreview(dcmtData?.tid, dcmtData?.did, dcmtData?.fileExt, dcmtData?.fileSize, dcmtData?.fileCount, extensionHandler(dcmtData?.fileExt), showPreview, isResizingActive, () => { isBasketMode ? loadBasketFile() : loadDocumentWithCache(); setShowPreview(true); }, dcmtBlob, isBasketMode) }) }));
 };
@@ -430,7 +434,7 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
             return 'default';
         return isDragging ? 'grabbing' : 'grab';
     }, [zoomFactor, isDragging]);
-    return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }, children: [_jsx(TopToolbar, { children: _jsxs(ToolbarCenter, { children: [_jsx(ToolbarIconButton, { title: 'Diminuisci lo zoom', onClick: handleZoomOut, disabled: zoomFactor <= 0.5, children: _jsx(IconZoomOutLinear, {}) }), _jsx(ToolbarIconButton, { title: 'Aumenta lo zoom', onClick: handleZoomIn, disabled: zoomFactor >= 3, children: _jsx(IconZoomInLinear, {}) }), _jsx(Divider, {}), _jsx(ToolbarIconButton, { title: 'Stampa', onClick: handlePrint, children: _jsx(IconPrintOutline, {}) })] }) }), _jsx(ImageContainer, { ref: containerRef, onMouseDown: onMouseDown, onTouchStart: onMouseDown, "$cursor": cursor, className: className, children: imageUrl && (_jsx(StyledImage, { ref: imageRef, src: imageUrl, alt: alt, "$scale": fullZoom, "$tx": translateX, "$ty": translateY, "$rotate": rotation })) })] }));
+    return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }, children: [_jsx(TopToolbar, { children: _jsxs(ToolbarCenter, { children: [_jsx(ToolbarIconButton, { title: 'Diminuisci lo zoom', onClick: handleZoomOut, disabled: zoomFactor <= 0.5, children: _jsx(IconZoomOutLinear, {}) }), _jsx(ToolbarIconButton, { title: 'Aumenta lo zoom', onClick: handleZoomIn, disabled: zoomFactor >= 3, children: _jsx(IconZoomInLinear, {}) }), _jsx(Divider, {}), _jsx(ToolbarIconButton, { title: 'Stampa', onClick: handlePrint, children: _jsx(IconPrintOutline, {}) })] }) }), _jsx(ImageContainer, { ref: containerRef, onMouseDown: onMouseDown, onTouchStart: onMouseDown, $cursor: cursor, className: className, children: imageUrl && (_jsx(StyledImage, { ref: imageRef, src: imageUrl, alt: alt, $scale: fullZoom, $tx: translateX, $ty: translateY, $rotate: rotation })) })] }));
 };
 export const TMNothingToShow = ({ text = '', secondText, fileExt, icon = _jsx(IconPreview, { fontSize: 96 }) }) => {
     return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [icon, _jsxs(StyledPreviewNotAvailable, { children: [text && _jsx("div", { children: text }), _jsxs("div", { children: [" ", secondText ?? SDKUI_Localizator.PreviewNotAvailable, fileExt && _jsx("b", { children: ` (*.${fileExt})` })] })] })] }) }));

package/lib/components/features/documents/TMDcmtTasks.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { FormModes, TaskContext } from "../../../ts";
 import { HomeBlogPost, TaskDescriptor } from "@topconsultnpm/sdk-ts";
 interface TMDcmtTasksProps {
@@ -12,5 +13,5 @@ interface TMDcmtTasksProps {
     handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
     onBack?: () => void;
 }
-declare const TMDcmtTasks: (props: TMDcmtTasksProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMDcmtTasks: (props: TMDcmtTasksProps) => React.JSX.Element;
 export default TMDcmtTasks;

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

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from 'react';
 import TreeView from 'devextreme-react/tree-view';
 import { LayoutModes } from '@topconsultnpm/sdk-ts';

package/lib/components/features/documents/TMDragDropOverlay.d.ts

@@ -2,5 +2,5 @@ interface TMDragDropOverlayProps {
     handleFile: (file: File) => void;
     refocusAfterFileInput: () => void;
 }
-declare const TMDragDropOverlay: (props: TMDragDropOverlayProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMDragDropOverlay: (props: TMDragDropOverlayProps) => import("react").JSX.Element;
 export default TMDragDropOverlay;

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

@@ -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 { IconFolderOpen, IconScanner, SDKUI_Localizator, formatBytes, IconClear, extensionHandler, IconCloseOutline, IconMenuVertical, TMCommandsContextMenu, IconEdit, isPdfEditorAvailable, SDKUI_Globals } from '../../../helper';
@@ -29,6 +29,7 @@ const TMFileUploader = ({ fromDTD, deviceType = DeviceType.DESKTOP, onClose, onF
     const [fileSize, setFileSize] = useState(undefined);
     const [fileExt, setFileExt] = useState(undefined);
     const uploaderRef = useRef(null);
+    const fileInputRef = useRef(null);
     // Ref al TMPanel per chiamare focusPanel()
     const fileUploaderPanelRef = useRef(null);
     usePreventFileDrop([uploaderRef]);
@@ -85,19 +86,18 @@ const TMFileUploader = ({ fromDTD, deviceType = DeviceType.DESKTOP, onClose, onF
         setFileSize(undefined);
         setFileExt(undefined);
         onFileUpload?.(null);
-        const fileInput = document.getElementById('fileInput');
-        if (fileInput) {
-            fileInput.value = '';
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
         }
         //Rifocalizza dopo la cancellazione del file
         if (refocus)
             refocusAfterFileInput();
     }, [onFileUpload, refocusAfterFileInput]);
     const browseHandler = useCallback(() => {
-        document.getElementById('fileInput')?.click();
+        fileInputRef.current?.click();
     }, []);
     let content = !uploadedFile ?
-        _jsxs("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), _jsxs(UploadContainer, { ref: uploaderRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsxs("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: [_jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }), showScannerIcon && isScannerLicenseConfigured() && onScanRequest && _jsx(TMButton, { btnStyle: 'icon', caption: 'Scanner', color: 'primary', onClick: () => { onScanRequest((file) => { onFileUpload?.(file); }); }, icon: _jsx(IconScanner, { fontSize: 22 }) }), showScannerIcon && isScannerLicenseConfigured() && !onScanRequest && _jsx(TMButton, { btnStyle: 'icon', caption: 'Scanner', color: 'primary', onClick: () => { ShowAlert({ message: SDKUI_Localizator.ScanFeatureUnavailableInThisContext, mode: 'info', duration: 3000, title: 'Scanner' }); }, icon: _jsx(IconScanner, { fontSize: 22 }) })] }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? SDKUI_Localizator.ClickToBrowseFile : SDKUI_Localizator.DragOrDoubleClickToBrowseFile }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] })] }) :
+        _jsxs("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: [_jsx(HiddenInput, { ref: fileInputRef, type: "file", onChange: handleInputChange }), _jsxs(UploadContainer, { ref: uploaderRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, $isRequired: isRequired, children: [_jsxs("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: [_jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }), showScannerIcon && isScannerLicenseConfigured() && onScanRequest && _jsx(TMButton, { btnStyle: 'icon', caption: 'Scanner', color: 'primary', onClick: () => { onScanRequest((file) => { onFileUpload?.(file); }); }, icon: _jsx(IconScanner, { fontSize: 22 }) }), showScannerIcon && isScannerLicenseConfigured() && !onScanRequest && _jsx(TMButton, { btnStyle: 'icon', caption: 'Scanner', color: 'primary', onClick: () => { ShowAlert({ message: SDKUI_Localizator.ScanFeatureUnavailableInThisContext, mode: 'info', duration: 3000, title: 'Scanner' }); }, icon: _jsx(IconScanner, { fontSize: 22 }) })] }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? SDKUI_Localizator.ClickToBrowseFile : SDKUI_Localizator.DragOrDoubleClickToBrowseFile }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] })] }) :
         _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%', height: '100%' }, children: [_jsxs("div", { style: { backgroundColor: 'white', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("p", { children: "File name:" }), _jsxs("div", { style: { fontWeight: 'bold' }, children: [fileName, " ", _jsxs("span", { children: [" ", ` (${formatBytes(fileSize)})`, " "] })] })] }), uploadedFile && _jsx(TMButton, { btnStyle: 'icon', color: 'error', caption: 'Pulisci', onClick: () => clearFile(true), icon: _jsx(IconClear, { fontSize: 22 }) })] }), extensionHandler(fileExt) === FileExtensionHandler.READY_TO_SHOW ? _jsx(TMFileViewer, { fileBlob: uploadedFile, isResizingActive: isResizingActive }) :
                     _jsx("div", { style: { backgroundColor: '#f6dbdb', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.error }, children: _jsxs("div", { children: [" ", SDKUI_Localizator.PreviewNotAvailable, fileExt && _jsx("b", { children: ` (*.${fileExt})` })] }) })] });
     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] }));
@@ -108,31 +108,31 @@ const TMFileUploader = ({ fromDTD, deviceType = DeviceType.DESKTOP, onClose, onF
                             text: 'PDF Editor',
                             onClick: () => openFileUploaderPdfEditor(fromDTD, uploadedFile, handleFile)
                         }
-                    ], showEvent: "click", children: _jsx(IconMenuVertical, { id: "TMPanel-FileUploader-Commands-Header", color: "white", cursor: "pointer" }) })), deviceType !== DeviceType.MOBILE && (_jsx(StyledHeaderIcon, { onClick: onClose, "$color": "white", children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) }))] }));
+                    ], showEvent: "click", children: _jsx(IconMenuVertical, { id: "TMPanel-FileUploader-Commands-Header", color: "white", cursor: "pointer" }) })), deviceType !== DeviceType.MOBILE && (_jsx(StyledHeaderIcon, { onClick: onClose, $color: "white", children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) }))] }));
     }, [deviceType, fromDTD, onClose]);
     return showTMPanel ? (_jsx(TMPanel, { ref: fileUploaderPanelRef, panelID: 'file-uploader-panel', title: SDKUI_Localizator.FileUpload, onBack: deviceType === DeviceType.MOBILE ? () => onClose?.() : undefined, toolbar: toolbar, 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;