@topconsultnpm/sdkui-react 6.20.0-dev1.15 → 6.20.0-dev1.17

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

@@ -0,0 +1,18 @@
+import { DcmtInfo, DownloadModes, DownloadTypes } from '../../../ts';
+import { FileDescriptor } from '@topconsultnpm/sdk-ts';
+interface ITMDcmtIconProps {
+    fileExtension?: string | undefined;
+    fileCount?: number | undefined;
+    isLexProt?: number | undefined;
+    isSigned?: number | undefined;
+    isMail?: number | undefined;
+    isShared?: number | undefined;
+    tid?: number;
+    did?: number;
+    downloadMode?: DownloadModes;
+    tooltipContent?: JSX.Element | string;
+    openInOffice?: (selectedDcmtsOrFocused: Array<DcmtInfo>) => Promise<void>;
+    onDownloadDcmtsAsync?: (inputDcmts: DcmtInfo[] | undefined, downloadType: DownloadTypes, downloadMode: DownloadModes, onFileDownloaded?: (dcmtFile: File | undefined) => void, confirmAttachments?: (list: FileDescriptor[]) => Promise<string[] | undefined>) => Promise<void>;
+}
+declare const TMDcmtIcon: ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode, tooltipContent, openInOffice, onDownloadDcmtsAsync }: ITMDcmtIconProps) => import("react/jsx-runtime").JSX.Element;
+export default TMDcmtIcon;

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

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+import { getFileIcon } from '../../../helper';
+import TMTooltip from '../../base/TMTooltip';
+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 TMDcmtIcon = ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode = "none", tooltipContent, openInOffice, onDownloadDcmtsAsync }) => {
+    const { downloadDcmtsAsync, showWaitPanel, waitPanelTitle, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, abortController } = useDcmtOperations();
+    const deviceType = useDeviceType();
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const icon = useMemo(() => {
+        return getFileIcon(isMail == 2 ? "PEC" : fileExtension, fileCount, tooltipContent);
+    }, [fileExtension, fileCount, isMail, tooltipContent]);
+    // Gestore unificato per l'azione di download (click singolo su mobile, doppio click su desktop)
+    const handleDownloadAction = useCallback(async (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (tid && did) {
+            const fileName = fileExtension ? `${did}.${fileExtension}` : undefined;
+            let dcmt = [{ TID: tid, DID: did, FILEEXT: fileExtension, fileName: fileName }];
+            // Per file con problemi di estensione nelle blob URL (.p7m, .msg), forza la modalità download
+            const fileExtLower = fileExtension?.toLowerCase();
+            const needsForceDownload = fileExtLower?.includes('p7m') || fileExtLower === 'msg';
+            const effectiveDownloadMode = (downloadMode === 'openInNewWindow' && needsForceDownload) ? 'download' : downloadMode;
+            // Usa la funzione passata tramite prop se disponibile, altrimenti usa l'hook interno
+            if (openInOffice) {
+                await openInOffice(dcmt);
+            }
+            else if (onDownloadDcmtsAsync) {
+                await onDownloadDcmtsAsync?.(dcmt, DownloadTypes.Dcmt, effectiveDownloadMode);
+            }
+            else {
+                await downloadDcmtsAsync(dcmt, DownloadTypes.Dcmt, effectiveDownloadMode);
+            }
+        }
+    }, [tid, did, fileExtension, downloadMode, openInOffice, onDownloadDcmtsAsync, downloadDcmtsAsync]);
+    const isDownloadable = downloadMode !== "none" &&
+        tid !== undefined &&
+        did !== undefined &&
+        fileCount && fileCount > 0;
+    return (_jsxs(StyledCellRenderDcmtIcon, { className: "tm-dcmt-icon", style: {
+            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
+        ), 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 &&
+                _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;
+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\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"
+    //     height="1em"
+    //     width="1em"
+    //     {...props}
+    // >
+    //     <path d="M12 2C9.243 2 7 4.243 7 7v3H6a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2v-8a2 2 0 00-2-2h-1V7c0-2.757-2.243-5-5-5zM9 7c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9V7zm4 10.723V20h-2v-2.277a1.993 1.993 0 01.567-3.677A2.001 2.001 0 0114 16a1.99 1.99 0 01-1 1.723z" />
+    // </svg>
+    );
+}
+function IconShared(props) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M11 9V5l7 7-7 7v-4.1c-5 0-8.5 1.6-11 5.1 1-5 4-10 11-11m6-1V5l7 7-7 7v-3l4-4-4-4z" }) }));
+}
+function IconSignature(props) {
+    return (
+    // <svg viewBox="0 0 128 128" fill="currentColor"
+    //     height="1em"
+    //     width="1em"
+    //     {...props}>
+    //     <g><path d="m128 82.7c0-.3-.1-.6-.2-.8l-6.4-10.9c-2.2-3.7-4.8-7.1-7.9-10.2l-39.8-39.8c-2.7-2.7-7-2.7-9.7 0s-2.7 7 0 9.7l39.8 39.8c3.1 3.1 6.5 5.7 10.2 7.9l8.3 4.8c-.3.2-.7.5-1 .7-1.4 1-2.9 2-4.3 3.1-1.2.9-2.3 1.9-3.3 2.9-2.5 2.2-4.8 4.3-7.8 5.6-3.5 1.5-8.9 2.2-12.6-.9-.7-.6-1.4-1.4-2.2-2.2-2-2.2-4.3-4.7-7.8-4.6-2.9.1-4.9 2-6.7 3.7-.8.8-1.6 1.5-2.4 2-1 .6-2.1.9-3.2.9 1.9-3.5 2.5-7.1 1.7-10.5-.6-2.4-3.1-8.7-7.7-8.5-1.8.1-3.3 1-4.3 2.6-2.2 3.5-1.4 9.7-.4 12.2 1 2.4 2.6 4.4 4.5 5.9-3.9 4.3-9.6 7.4-15.9 8.6-6.4 1.2-12.9-.7-18.2-4.8 4.7-2 9.1-5.2 12.7-9.4 5.7-6.8 8-14.5 6.1-21.1-1.2-4.1-3.8-7.2-7.8-8.9-4.7-2-10.7-1.6-15.6 1.1-11.1 6.1-12.2 20.3-6.8 30.6 1.1 2.1 2.3 4 3.7 5.7-.5.1-1 .1-1.4.1-4.5.1-8.3-1.4-11.4-4.7-9.8-10.2-7-27.9 1.1-38.5 8.4-11 23.5-14.9 35.1-9.1 1 .5 2.2.1 2.7-.9s.1-2.2-.9-2.7c-13.2-6.6-30.4-2.2-40 10.2-9.2 12-12.2 32-.9 43.7 3.9 4 8.9 6.1 14.4 5.9 1.5 0 3-.3 4.5-.6 5.3 4.9 11.9 7.7 18.7 7.7 1.5 0 3-.1 4.6-.4 7.7-1.4 14.4-5.2 18.9-10.6 2.7.8 5.4.4 7.8-1.1 1.1-.7 2.1-1.6 3-2.5 1.4-1.4 2.7-2.5 4-2.6 1.6 0 2.8 1.2 4.7 3.3.8.9 1.6 1.8 2.6 2.6 4.2 3.5 10.8 4.1 16.8 1.5 3.6-1.6 6.3-4 8.9-6.3 1-.9 2.1-1.9 3.2-2.7 1.3-1 2.6-1.9 4-2.9 1.2-.8 2.5-1.7 3.7-2.6.7-.6 1-1.3.9-2zm-12-7.8c-3.4-2-6.5-4.4-9.4-7.2l-39.8-39.8c-1.1-1.1-1.1-2.9 0-4 .6-.6 1.3-.8 2-.8s1.5.3 2 .8l39.8 39.8c2.8 2.8 5.3 6 7.2 9.4l2.7 4.6zm-93.1 15.4c-4.5-8.5-3.8-20.3 5.2-25.2 2.2-1.2 4.8-1.8 7.3-1.8 1.7 0 3.4.3 4.9.9 1.9.8 4.4 2.6 5.5 6.3 2.1 7.6-3 14.7-5.3 17.4-3.5 4.2-8.2 7.4-12.9 9-1.9-2-3.4-4.2-4.7-6.6zm44.3 2.6c-1.4-1-2.5-2.5-3.2-4.2-.7-1.8-1.2-6.5.1-8.6.3-.5.6-.7 1.1-.7 1.2 0 3 3 3.5 5.4.8 3.2-.3 6.1-1.5 8.1z"></path></g>
+    // </svg>
+    _jsx("svg", { height: "1em", viewBox: "0 0 450 450", width: "1em", fill: "currentColor", ...props, children: _jsx("g", { children: _jsx("g", { children: _jsxs("g", { clipRule: "evenodd", fill: "rgb(0,0,0)", fillRule: "evenodd", children: [_jsx("path", { d: "m366.6 67.8 1.1-4c.4-1.5.6-3 .6-4.5 0-8.1-5.5-15.2-13.3-17.3-9.5-2.5-19.3 3.2-21.8 12.8l-20.4 77.9 34.6 9z" }), _jsx("path", { d: "m234.9 198.9h148.6v35.7h-148.6z", transform: "matrix(.253 -.968 .968 .253 21.311 461.088)" }), _jsx("path", { d: "m292.8 316 8.4 2.2 4.5-17.3-34.6-9.1-4.5 17.4 8.3 2.2z" }), _jsx("path", { d: "m275.3 319.7-12.7 14.7 5.4 40.3 24.4-32.5-3.9-19.1zm6.5 23.3c-.8 2.9-3.7 4.6-6.6 3.9s-4.6-3.7-3.9-6.6 3.7-4.6 6.6-3.9 4.6 3.7 3.9 6.6z" }), _jsx("path", { d: "m395.6 71.5-20.3-5.5-2 7.7 16.5 4.4-24.8 95c-.6 2.1.7 4.3 2.8 4.8.3.1.7.1 1 .1 1.8 0 3.4-1.2 3.8-3l25.8-98.8c.6-2-.7-4.2-2.8-4.7z" }), _jsx("path", { d: "" }), _jsx("path", { d: "m243.4 379.8c-1.8-1.2-4.3-.8-5.5 1.1-9.6 14.1-29.9 19.6-45.3 12.2-.5-.2-.9-.5-1.4-.7-3.5-1.8-7.9-4-12.8-2.7-2.7.7-4.7 2.3-6.5 3.6-1.5 1.2-2.8 2.2-3.9 2.2-2 .1-4-3-5-5.9-.2-.5-.4-1-.5-1.5-1.4-4.1-3.1-9.1-7.8-11.8-5.8-3.3-12.9-.9-17.4 3-2.4 2-4.2 4.4-6 6.7-1.2 1.5-2.3 2.9-3.4 4.1-7.5 7.9-20.3 10-30.2 5.6 7.6-6.9 13-15.5 15.4-24.9s1-21.1-7.8-25.8c-4.5-2.4-9.9-2.4-15.2.2-4.4 2.2-8.4 5.9-10.9 10.3-3.9 7-5.1 15.4-3.3 23.8 1.4 6.3 4.3 12 8.4 16.5-8.4 4.9-18.2 7.3-27.8 6.1-2.2-.3-4.2 1.2-4.5 3.4s1.2 4.2 3.4 4.5c2.1.3 4.1.4 6.2.4 10 0 20.1-3.1 29.1-9 6.1 3.7 13.5 5.4 21.1 4.7 8.5-.8 16.3-4.4 21.8-10.2 1.5-1.5 2.7-3.1 3.9-4.7 1.6-2.1 3.1-4 4.9-5.6 2.4-2 6-3.4 8.3-2.1 2.1 1.2 3.1 4.2 4.2 7.5.2.5.4 1.1.6 1.6 2.5 7 7.1 11.1 12.4 11.1h.6c3.6-.2 6.2-2.2 8.3-3.9 1.3-1 2.5-2 3.6-2.2 2-.5 4.5.8 7.2 2.1.5.3 1 .5 1.5.7 5.7 2.7 11.9 4 18.2 4 14.4 0 29-6.9 37.1-18.9 1.3-1.8.9-4.3-1-5.5zm-152.6 11.3c-8.1-8-10.4-21.8-4.8-31.7 2.5-4.5 7.5-8.2 12-8.2 1.2 0 2.3.3 3.4.8 5 2.7 5.5 10.6 3.9 16.8-2.2 8.7-7.5 16.5-14.5 22.3z" })] }) }) }) })
+    // <svg
+    //     viewBox="0 0 24 24"
+    //     fill="currentColor"
+    //     height="1em"
+    //     width="1em"
+    //     {...props}
+    // >
+    //     <path d="M22 22H2v-2h20v2M2.26 16.83L5.09 14l-2.83-2.83 1.41-1.41 2.83 2.83 2.83-2.83 1.41 1.41L7.91 14l2.83 2.83-1.41 1.41-2.83-2.83-2.83 2.83-1.41-1.41z" />
+    // </svg>
+    );
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ITMDcmt } from '../../../ts';
+interface ITMDcmtPreviewProps {
+    dcmtData: ITMDcmt | undefined;
+    canNext?: boolean;
+    canPrev?: boolean;
+    isResizingActive?: boolean;
+    isVisible?: boolean;
+    onNext?: () => void;
+    onPrev?: () => void;
+    onClosePanel?: () => void;
+    allowMaximize?: boolean;
+    onMaximizePanel?: () => void;
+}
+declare const TMDcmtPreview: React.FC<ITMDcmtPreviewProps>;
+export default TMDcmtPreview;
+interface ITMFileViewerProps {
+    fileBlob?: Blob;
+    isResizingActive?: boolean;
+}
+export declare const TMFileViewer: React.FC<ITMFileViewerProps>;
+export declare const TMNothingToShow: ({ text, secondText, fileExt, icon }: {
+    text?: any;
+    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/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $color: string;
+}>> & string;
+export declare const StyledPanelStatusContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,491 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { RetrieveFileOptions, DcmtOpers, GeneralRetrieveFormats, FileFormats } from '@topconsultnpm/sdk-ts';
+import { extensionHandler, sleep, getExceptionMessage, formatBytes, IconMenuVertical, IconCloseCircle, IconClear, IconCloseOutline, IconPreview, SDKUI_Globals, IconZoomOutLinear, IconZoomInLinear, IconPrintOutline, SDKUI_Localizator, IconRefresh } from '../../../helper';
+import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
+import { FileExtensionHandler, FormModes } from '../../../ts';
+import { TMColors } from '../../../utils/theme';
+import ShowAlert from '../../base/TMAlert';
+import TMButton from '../../base/TMButton';
+import TMDropDownMenu from '../../base/TMDropDownMenu';
+import { TMExceptionBoxManager } from '../../base/TMPopUp';
+import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
+import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../../forms/TMSaveForm';
+import { StyledAnimatedComponentOpacity } from '../../base/Styled';
+import TMPanel from '../../base/TMPanel';
+import TMTooltip from '../../base/TMTooltip';
+import { Document, Page, pdfjs } from 'react-pdf';
+// Configure PDF.js worker
+pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+const ErrorContent = ({ error, isAbortError, onRetry }) => {
+    if (isAbortError) {
+        return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [_jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), _jsxs(StyledPreviewNotAvailable, { children: [_jsx("div", { children: error }), _jsx("div", { children: SDKUI_Localizator.PreviewNotAvailable })] }), _jsx(TMButton, { caption: SDKUI_Localizator.TryAgain, onClick: onRetry, showTooltip: false })] }) }));
+    }
+    return _jsx(TMNothingToShow, { icon: _jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), text: error });
+};
+const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev, onClosePanel, onNext, onPrev, allowMaximize = true, onMaximizePanel }) => {
+    const [dcmtBlob, setDcmtBlob] = useState(undefined);
+    const [showPreview, setShowPreview] = useState(false);
+    const [isFromCache, setIsFromCache] = useState(false);
+    const [error, setError] = useState('');
+    const [isAbortError, setIsAbortError] = useState(false);
+    const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, getDcmtFileAsync, clearDcmtsFileCache, removeDcmtsFileCache, isDcmtFileInCache } = useDcmtOperations();
+    const cacheKey = dcmtData ? `${dcmtData.tid}-${dcmtData.did}` : '00';
+    const [hasLoadedDataOnce, setHasLoadedDataOnce] = useState(false);
+    const [lastLoadedDid, setLastLoadedDid] = useState(undefined);
+    useEffect(() => {
+        if (!dcmtData) {
+            setLastLoadedDid(undefined); // Reset 
+            setDcmtBlob(undefined);
+            setError('');
+            setIsAbortError(false);
+            setShowPreview(false);
+            return;
+        }
+        const currentCacheKey = `${dcmtData.tid}-${dcmtData.did}`;
+        const shouldFetch = isVisible && (!hasLoadedDataOnce || currentCacheKey !== lastLoadedDid);
+        if (isDcmtFileInCache(currentCacheKey)) {
+            loadDocumentWithCache();
+            setShowPreview(true);
+            return;
+        }
+        if (shouldFetch) {
+            setDcmtBlob(undefined);
+            setError('');
+            setIsAbortError(false);
+            if ((extensionHandler(dcmtData.fileExt) !== FileExtensionHandler.NONE) && ((dcmtData.fileSize ?? 0) <= (SDKUI_Globals.userSettings.searchSettings.previewThreshold * 1024))) {
+                loadDocumentWithCache();
+                setShowPreview(true);
+            }
+            else {
+                setShowPreview(false);
+            }
+            setHasLoadedDataOnce(true);
+            setLastLoadedDid(currentCacheKey);
+        }
+    }, [dcmtData?.did, isVisible, hasLoadedDataOnce, lastLoadedDid]);
+    const loadDocumentWithCache = async () => {
+        const rfo = new RetrieveFileOptions();
+        rfo.retrieveReason = DcmtOpers.None;
+        rfo.generalRetrieveFormat = GeneralRetrieveFormats.OriginalUnsigned;
+        rfo.cvtFormat = extensionHandler(dcmtData?.fileExt) === FileExtensionHandler.CONVERTIBLE ? FileFormats.PDF : FileFormats.None;
+        rfo.invoiceRetrieveFormat = SDKUI_Globals.userSettings?.searchSettings.invoiceRetrieveFormat;
+        rfo.orderRetrieveFormat = SDKUI_Globals.userSettings?.searchSettings.orderRetrieveFormat;
+        try {
+            await sleep(300); //wait for DX-DataGrid selectionChanged
+            let dcmtFile = await getDcmtFileAsync({ TID: dcmtData?.tid, DID: dcmtData?.did, FILEEXT: dcmtData?.fileExt }, rfo, 'Anteprima', false);
+            setDcmtBlob(dcmtFile?.file);
+            setIsFromCache(!!dcmtFile?.isFromCache);
+            setError('');
+            setIsAbortError(false);
+        }
+        catch (ex) {
+            const err = ex;
+            if (err.name === 'CanceledError') {
+                setError('Operazione annullata.');
+                setIsAbortError(true);
+                ShowAlert({ message: err.message, mode: 'warning', duration: 3000, title: 'Abort' });
+            }
+            else {
+                setError(getExceptionMessage(ex));
+                setIsAbortError(false);
+                TMExceptionBoxManager.show({ exception: ex });
+            }
+        }
+    };
+    const titleHandler = () => {
+        let title = 'Anteprima ';
+        if (!dcmtData?.did)
+            return title;
+        let extensionInfo;
+        if (dcmtData.fileExt !== null) {
+            if (extensionHandler(dcmtData.fileExt) === FileExtensionHandler.CONVERTIBLE)
+                extensionInfo = `(${dcmtData.fileExt} Convertito in PDF - `;
+            else
+                extensionInfo = `(${dcmtData.fileExt} - `;
+        }
+        else
+            extensionInfo = '';
+        title += extensionInfo;
+        title += dcmtData.fileSize && dcmtData.fileSize > 0 ? formatBytes(dcmtData.fileSize) + ')' : '';
+        if ((isDcmtFileInCache(cacheKey) && isFromCache)) {
+            title += ' | da cache';
+        }
+        return title;
+    };
+    const reOpenDcmt = async () => {
+        removeDcmtsFileCache(cacheKey);
+        setIsFromCache(false);
+        setError('');
+        setIsAbortError(false);
+        setDcmtBlob(undefined);
+        try {
+            await loadDocumentWithCache();
+        }
+        catch (error) {
+            console.error('Error reopening document:', 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, 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(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: [
+                                { icon: _jsx(IconCloseCircle, {}), text: SDKUI_Localizator.RemoveFromCache, onClick: () => { removeDcmtsFileCache(cacheKey); setIsFromCache(false); } },
+                                { icon: _jsx(IconClear, {}), text: SDKUI_Localizator.ClearCache, onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
+                            ] }, "btn13") }), _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, () => { loadDocumentWithCache(); setShowPreview(true); }, dcmtBlob) }) }));
+};
+export default TMDcmtPreview;
+export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
+    const [blobUrl, setBlobUrl] = useState(undefined);
+    const [fileType, setFileType] = useState(undefined);
+    const [formattedXml, setFormattedXml] = useState(undefined);
+    const [isMobile, setIsMobile] = useState(false);
+    const [numPages, setNumPages] = useState(0);
+    useEffect(() => {
+        const checkIsMobile = () => {
+            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+            // Only detect actual mobile/tablet devices, NOT desktop browsers
+            const isMobileDevice = 
+            // Traditional mobile detection (phones and tablets)
+            /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent) ||
+                // Additional Android tablet detection (covers tablets in landscape)
+                /android.*tablet|android.*mobile/i.test(userAgent) ||
+                // Touch-only devices (excludes laptops with touchscreen)
+                (('ontouchstart' in window || navigator.maxTouchPoints > 0) &&
+                    !/Windows NT|Macintosh|Linux/.test(userAgent)) ||
+                // Small screen mobile devices only
+                (window.screen.width <= 768 && /Mobi|Android/i.test(userAgent));
+            setIsMobile(isMobileDevice);
+        };
+        checkIsMobile();
+        // Listen for orientation changes (important for tablets)
+        window.addEventListener('orientationchange', checkIsMobile);
+        window.addEventListener('resize', checkIsMobile);
+        return () => {
+            window.removeEventListener('orientationchange', checkIsMobile);
+            window.removeEventListener('resize', checkIsMobile);
+        };
+    }, []);
+    useEffect(() => {
+        if (fileBlob) {
+            setFileType(fileBlob.type);
+            setFormattedXml(undefined);
+            const fileName = fileBlob.name || '';
+            const fileExtension = fileName.split('.').pop()?.toLowerCase() || '';
+            const isConfigFile = ['config', 'cfg'].includes(fileExtension);
+            if (fileBlob.type.includes("xml") && !isConfigFile) {
+                fileBlob.text().then((text) => {
+                    const parser = new DOMParser();
+                    const xmlDoc = parser.parseFromString(text, "application/xml");
+                    if (xmlDoc.querySelector("parsererror")) {
+                        setFormattedXml(`<div style="color: red;">Invalid XML</div>`);
+                        return;
+                    }
+                    const serializer = new XMLSerializer();
+                    const prettyXml = serializer
+                        .serializeToString(xmlDoc)
+                        .replace(/></g, ">\n<")
+                        .replace(/^(?!\s*$)/gm, "  ");
+                    setFormattedXml(`<pre style="font-family: monospace; white-space: pre-wrap; line-height: 1.5;">${prettyXml
+                        .replace(/</g, "&lt;")
+                        .replace(/>/g, "&gt;")}</pre>`);
+                });
+                setBlobUrl(undefined);
+            }
+            else if (isConfigFile) {
+                fileBlob.text().then((text) => {
+                    const escapedText = text
+                        .replace(/&/g, "&amp;")
+                        .replace(/</g, "&lt;")
+                        .replace(/>/g, "&gt;");
+                    setFormattedXml(`<pre style="font-family: monospace; white-space: pre-wrap; line-height: 1.5; margin: 0; padding: 10px;">${escapedText}</pre>`);
+                }).catch((error) => {
+                    console.error("Error reading text file:", error);
+                    setFormattedXml(`<div style="color: red;">Error reading file</div>`);
+                });
+                setBlobUrl(undefined);
+            }
+            else {
+                const url = URL.createObjectURL(fileBlob);
+                setBlobUrl(url);
+                return () => {
+                    URL.revokeObjectURL(url);
+                };
+            }
+        }
+        else {
+            setBlobUrl(undefined);
+            setFileType(undefined);
+            setFormattedXml(undefined);
+        }
+        return () => { };
+    }, [fileBlob]);
+    if (!fileBlob) {
+        return _jsx("div", { children: `${SDKUI_Localizator.FileUpload}...` });
+    }
+    if (fileBlob.type.includes('image')) {
+        return (_jsx(ImageViewer, { fileBlob: fileBlob, alt: '' }));
+    }
+    if (fileType === 'application/pdf' && isMobile) {
+        return (_jsx(PDFViewerContainer, { children: _jsx(Document, { file: blobUrl, onLoadSuccess: ({ numPages }) => setNumPages(numPages), loading: _jsxs("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100%',
+                        flexDirection: 'column',
+                        gap: '10px'
+                    }, children: [_jsx(IconPreview, { fontSize: 64 }), _jsxs("div", { children: [SDKUI_Localizator.Loading, "..."] })] }), error: _jsxs("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100%',
+                        flexDirection: 'column',
+                        gap: '10px'
+                    }, children: [_jsx(IconCloseOutline, { fontSize: 64, color: TMColors.error }), _jsx("div", { children: "Errore nel caricamento del PDF" })] }), children: Array.from(new Array(numPages), (el, index) => (_jsx(Page, { pageNumber: index + 1, renderTextLayer: false, renderAnnotationLayer: false, width: window.innerWidth }, `page_${index + 1}`))) }) }));
+    }
+    return (_jsx("iframe", { srcDoc: formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !formattedXml
+            ? (fileType === 'application/pdf' ? `${blobUrl}#view=FitH&scrollbar=1` : blobUrl)
+            : undefined, title: "File Viewer", width: "100%", height: "100%", style: { border: 'none', zIndex: 0, pointerEvents: isResizingActive === true ? "none" : "auto" } }, blobUrl));
+};
+const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
+    const containerRef = useRef(null);
+    const imageRef = useRef(null);
+    const [imageUrl, setImageUrl] = useState(null);
+    const [baseZoom, setBaseZoom] = useState(1);
+    const [zoomFactor, setZoomFactor] = useState(1);
+    const [translateX, setTranslateX] = useState(0);
+    const [translateY, setTranslateY] = useState(0);
+    const [rotation, setRotation] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const dragStartX = useRef(0);
+    const dragStartY = useRef(0);
+    useEffect(() => {
+        if (fileBlob) {
+            const url = URL.createObjectURL(fileBlob);
+            setImageUrl(url);
+            return () => URL.revokeObjectURL(url);
+        }
+        return () => { };
+    }, [fileBlob]);
+    useEffect(() => {
+        if (!imageUrl)
+            return;
+        const handleLoad = () => {
+            const container = containerRef.current;
+            const image = imageRef.current;
+            if (container && image) {
+                const cw = container.clientWidth;
+                const ch = container.clientHeight;
+                const iw = image.naturalWidth;
+                const ih = image.naturalHeight;
+                const scaleX = cw / iw;
+                const scaleY = ch / ih;
+                const initialZoom = Math.min(scaleX, scaleY);
+                setBaseZoom(initialZoom);
+                setZoomFactor(1);
+                setTranslateX(0);
+                setTranslateY(0);
+                setRotation(0);
+            }
+        };
+        const img = imageRef.current;
+        if (img?.complete)
+            handleLoad();
+        else {
+            img?.addEventListener('load', handleLoad);
+            return () => img?.removeEventListener('load', handleLoad);
+        }
+        return () => { };
+    }, [imageUrl]);
+    const fullZoom = baseZoom * zoomFactor;
+    const clampTranslation = (tx, ty, zoom) => {
+        const container = containerRef.current;
+        const image = imageRef.current;
+        if (!container || !image)
+            return { x: tx, y: ty };
+        const cw = container.clientWidth;
+        const ch = container.clientHeight;
+        const iw = image.naturalWidth * zoom;
+        const ih = image.naturalHeight * zoom;
+        const minX = Math.min(0, cw - iw);
+        const minY = Math.min(0, ch - ih);
+        return {
+            x: Math.max(minX, Math.min(0, tx)),
+            y: Math.max(minY, Math.min(0, ty)),
+        };
+    };
+    const handleZoom = (delta) => {
+        const newZoom = Math.min(3, Math.max(0.5, zoomFactor + delta));
+        if (newZoom === zoomFactor)
+            return;
+        const scaleChange = newZoom / zoomFactor;
+        const newTx = translateX * scaleChange;
+        const newTy = translateY * scaleChange;
+        const clamped = clampTranslation(newTx, newTy, baseZoom * newZoom);
+        setTranslateX(clamped.x);
+        setTranslateY(clamped.y);
+        setZoomFactor(newZoom);
+    };
+    const handleZoomIn = () => handleZoom(0.25);
+    const handleZoomOut = () => handleZoom(-0.25);
+    const onMouseDown = (e) => {
+        if (zoomFactor === 1)
+            return;
+        setIsDragging(true);
+        const point = 'touches' in e ? e.touches[0] : e;
+        dragStartX.current = point.clientX;
+        dragStartY.current = point.clientY;
+    };
+    const onMouseMove = (e) => {
+        if (!isDragging)
+            return;
+        const point = 'touches' in e ? e.touches[0] : e;
+        const dx = point.clientX - dragStartX.current;
+        const dy = point.clientY - dragStartY.current;
+        const scale = baseZoom * zoomFactor;
+        const newTx = translateX + dx / scale;
+        const newTy = translateY + dy / scale;
+        const clamped = clampTranslation(newTx, newTy, scale);
+        setTranslateX(clamped.x);
+        setTranslateY(clamped.y);
+        dragStartX.current = point.clientX;
+        dragStartY.current = point.clientY;
+    };
+    const stopDrag = () => setIsDragging(false);
+    useEffect(() => {
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', stopDrag);
+        window.addEventListener('touchmove', onMouseMove);
+        window.addEventListener('touchend', stopDrag);
+        return () => {
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', stopDrag);
+            window.removeEventListener('touchmove', onMouseMove);
+            window.removeEventListener('touchend', stopDrag);
+        };
+    }, [translateX, translateY, fullZoom, isDragging]);
+    const handlePrint = async () => {
+        if (!fileBlob)
+            return;
+        const dataUrl = await new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onloadend = () => resolve(reader.result);
+            reader.readAsDataURL(fileBlob);
+        });
+        const iframe = document.createElement('iframe');
+        iframe.style.position = 'fixed';
+        iframe.style.right = '0';
+        iframe.style.bottom = '0';
+        iframe.style.width = '0';
+        iframe.style.height = '0';
+        iframe.style.border = '0';
+        document.body.appendChild(iframe);
+        const doc = iframe.contentWindow?.document;
+        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.close();
+        iframe.contentWindow?.addEventListener('afterprint', () => {
+            document.body.removeChild(iframe);
+        });
+        setTimeout(() => {
+            if (document.body.contains(iframe)) {
+                document.body.removeChild(iframe);
+            }
+        }, 1000);
+    };
+    const cursor = useMemo(() => {
+        if (zoomFactor <= 1)
+            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 })) })] }));
+};
+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})` })] })] })] }) }));
+};
+const renderedPreview = (tid, did, fileExt, fileSize, fileCount, extHandler, showPreview, isResizingActive, onDownloadShowPreviewClick, dcmtBlob) => {
+    if (!did)
+        return _jsx(TMNothingToShow, { text: `${SDKUI_Localizator.NoDcmtSelected}.` });
+    if (fileCount == 0) {
+        return _jsx(TMNothingToShow, { text: SDKUI_Localizator.MetadataOnlyDocument });
+    }
+    if (fileExt && extHandler === FileExtensionHandler.NONE) {
+        return _jsx(TMNothingToShow, { fileExt: fileExt });
+    }
+    if (showPreview) {
+        return (_jsx(StyledPreviewContainer, { style: { overflow: 'auto' }, children: _jsx(TMFileViewer, { fileBlob: dcmtBlob, isResizingActive: isResizingActive }) }));
+    }
+    return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [_jsx(IconPreview, { fontSize: 96 }), _jsxs("p", { children: [" La dimensione del file \u00E8 ", _jsx("strong", { children: formatBytes(fileSize) }), ". Visualizzare l'anteprima? "] }), _jsx(TMButton, { caption: "Si", onClick: onDownloadShowPreviewClick, showTooltip: false })] }) }));
+};
+//#region  Styled Components
+const StyledPreviewContainer = styled.div `display: flex; justify-content: center; align-items: center; position: relative; width:100%; height: 100%; `;
+export const StyledHeaderIcon = styled.div ` color: ${props => props.$color};  cursor: pointer; display: flex; align-items: center; justify-content: center; &:hover{ color: white ; transition: 200ms ease; } `;
+export const StyledPanelStatusContainer = styled.div ` width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; `;
+const StyledPreviewNotAvailable = styled.div ` display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; `;
+const ImageContainer = styled.div ` width: calc(100% - 20px); height: 100%; left:10px; position: absolute; top:50px; overflow: hidden; background: #f5f5f5; touch-action: none; user-select: none; cursor: ${({ $cursor }) => $cursor ?? 'default'}; `;
+const TopToolbar = styled.div ` position: absolute; top: 0; width: 100%; height: 40px; background-color: #e4e4e4; display: flex; justify-content: center; align-items: center; z-index: 10; `;
+const ToolbarCenter = styled.div ` display: flex; align-items: center; gap: 12px;`;
+const ToolbarIconButton = styled.button ` background: #f0f0f0; border: none; color: #313131; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; padding: 0; border-radius: 50px; &:hover{ background-color: #c4c4c4; } &:disabled { color: #c2c2c2; cursor: not-allowed; } `;
+const Divider = styled.div `width:1px;  height: 20px; background-color: darkgray; `;
+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;
+`;
+const PDFViewerContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #f5f5f5;
+  
+  .react-pdf__Document {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 0;
+  }
+  
+  .react-pdf__Page {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    margin: 0 auto;
+  }
+  
+  .react-pdf__Page__canvas {
+    max-width: 100%;
+    height: auto !important;
+  }
+`;