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

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

@@ -1,18 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,491 +0,0 @@
-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;
-  }
-`;