@topconsultnpm/sdkui-react-beta 6.13.64 → 6.13.66

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

@@ -2,20 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
 import TMDcmtPreview from './TMDcmtPreview';
-import { AccessLevels, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutModes, MetadataDataTypes, ResultTypes, SDK_Globals, SystemMIDsAsNumber, TemplateTIDs, UpdateEngineByID, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+import { AccessLevels, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutModes, MetadataDataTypes, ResultTypes, SDK_Globals, SDK_Localizator, SystemMIDsAsNumber, TemplateTIDs, UpdateEngineByID, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
 import { ContextMenu } from 'devextreme-react';
 import { WorkFlowApproveRejectPopUp, WorkFlowOperationButtons, WorkFlowReAssignPopUp } from '../workflow/TMWorkflowPopup';
 import { DownloadTypes, FormModes } from '../../../ts';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { handleArchiveVisibility, searchResultToMetadataValues } from '../../../helper/queryHelper';
-import { genUniqueId, IconShow, SDKUI_Localizator, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconRoundFileUpload, IconArrowLeft, IconPreview } from '../../../helper';
+import { genUniqueId, IconShow, SDKUI_Localizator, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview } from '../../../helper';
 import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
 import { TMColors } from '../../../utils/theme';
 import { StyledFormButtonsContainer, StyledModalContainer, StyledToolbarCardContainer } from '../../base/Styled';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
-import { TMSplitterLayout, TMLayoutItem } from '../../base/TMLayout';
 import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
@@ -29,12 +28,12 @@ import TMMasterDetailDcmts from './TMMasterDetailDcmts';
 import TMDcmtBlog from './TMDcmtBlog';
 import { useInputAttachmentsDialog } from '../../../hooks/useInputDialog';
 import TMModal from '../../base/TMModal';
-import TMPanel from '../../base/TMPanel';
-import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
 import toppy from '../../../assets/Toppy-generico.png';
+import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
+import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
 let abortControllerLocal = new AbortController();
 //#endregion
-const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, customRightSidebarItems = [], allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtForm = true, showDcmtFormSidebar = true, showPreview = false, showBoard = false, showSysMetadata = false, onClosePreviewPanel, onCloseBlogPanel, onCloseSysMetadataPanel, titleModal, isModal = false, widthModal = "100%", heightModal = "100%" }) => {
+const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, customRightSidebarItems = [], allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtForm = true, showDcmtFormSidebar = true, showPreview = false, showBoard = false, showSysMetadata = false, onClosePreviewPanel, onCloseBlogPanel, onCloseSysMetadataPanel, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId }) => {
     const mruTIDs = SDKUI_Globals.userSettings.archivingSettings.mruTIDs;
     const [id, setID] = useState('');
     const [showWaitPanelLocal, setShowWaitPanelLocal] = useState(false);
@@ -75,7 +74,6 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const { openConfirmAttachmentsDialog, ConfirmAttachmentsDialog } = useInputAttachmentsDialog();
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
     const deviceType = useDeviceType();
-    const isOpenMiddlePanel = () => isOpenSysMetadata || isOpenBoard || isOpenTags || isOpenFormulaEditor;
     const retrieveMetadataAsync = async () => {
         try {
             await DcmtTypeListCacheService.GetAsync(TID).then(async (dtd) => {
@@ -138,62 +136,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
         setFocusedMetadataValue(undefined);
     }, [fromDTD, layoutMode]);
     const fileIsNotValid = (fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && !dcmtFile);
-    const fileManagerIcon = useMemo(() => {
-        if (layoutMode === LayoutModes.Ark) {
-            return _jsx(IconRoundFileUpload, { color: fileIsNotValid ? TMColors.error : undefined });
-        }
-        return _jsx(IconShow, {});
-    }, [layoutMode, fileIsNotValid]);
-    const closeMiddlePanel = () => {
-        if (isOpenSysMetadata)
-            onCloseSysMetadataPanel?.();
-        if (isOpenBoard)
-            onCloseBlogPanel?.();
-        setIsOpenBoard(false);
-        setIsOpenSysMetadata(false);
-        setIsOpenTags(false);
-        setIsOpenFormulaEditor(false);
-    };
-    const titleText = () => {
-        if (isOpenTags)
-            return 'Tags';
-        if (isOpenSysMetadata)
-            return 'Metadati di sistema';
-        if (isOpenBoard)
-            return 'Bacheca';
-        if (isOpenFormulaEditor)
-            return `${SDKUI_Localizator.FormulaEditorTitle} (${focusedMetadataValue?.md?.nameLoc})`;
-        return '';
-    };
     const middlePanelToolbar = _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [layoutMode === LayoutModes.Update && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: () => onPrev?.() }), layoutMode === LayoutModes.Update && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: () => onNext?.() })] });
-    const getPrimarySplitterStartLayout = () => {
-        let size = isOpenDcmtForm ? ['100%', '0'] : ['0%', '100%'];
-        if (deviceType !== DeviceType.MOBILE) {
-            if (isOpenPreview || isOpenMiddlePanel()) {
-                if (layoutMode === LayoutModes.Ark) {
-                    size = ['50%', '50%'];
-                }
-                else if (isOpenDcmtForm) {
-                    size = ['50%', '50%'];
-                }
-                else
-                    size = ['0%', '100%'];
-            }
-        }
-        else {
-            size = (isOpenPreview || isOpenMiddlePanel()) ? ['0', '100%'] : ['100%', '0'];
-        }
-        return size;
-    };
-    const getSecondarySplitterStartLayout = () => {
-        if (isOpenPreview && !isOpenMiddlePanel()) {
-            return ['0', '100%'];
-        }
-        if (!isOpenPreview && isOpenMiddlePanel()) {
-            return ['100%', '0'];
-        }
-        return ['40%', '60%'];
-    };
     const getSelectionDcmtInfo = () => {
         let dcmts = [];
         dcmts.push({ TID: TID ?? 0, DID: DID ?? 0 });
@@ -206,12 +149,22 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const handleRemoveItem = (tid, did) => {
         setSecondaryMasterDcmts((prevItems) => prevItems.filter(item => item.TID !== tid && item.DID !== did));
     };
+    const isPreviewDisabled = layoutMode === LayoutModes.Ark && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
+    const isBoardDisabled = layoutMode !== LayoutModes.Update;
+    const isSysMetadataDisabled = layoutMode !== LayoutModes.Update;
+    const isDetailsDisabled = layoutMode !== LayoutModes.Update || !DID;
+    const isMasterDisabled = layoutMode !== LayoutModes.Update || !DID;
     const getDcmts = () => { return [{ TID: currentDcmt?.tid, DID: currentDcmt?.did, FILEEXT: currentDcmt?.fileExt }]; };
     const commandsMenuItems = [
         { icon: svgToString(_jsx(IconDownload, {})), operationType: 'singleRow', disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, text: "Download file", onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Dcmt) },
         { icon: svgToString(_jsx(IconDownload, {})), operationType: 'singleRow', disabled: !isXMLFileExt(currentDcmt?.fileExt), text: "Download allegati XML", onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Attachment, openConfirmAttachmentsDialog) },
+        ...(allowRelations && currentTIDHasMasterRelations ? [{ icon: svgToString(_jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' })), operationType: 'singleRow', disabled: isMasterDisabled, text: SDKUI_Localizator.DcmtsMaster, onClick: () => { if (!isMasterDisabled)
+                    setIsOpenMaster(!isOpenMaster); } }] : []),
+        ...(allowRelations && currentTIDHasDetailRelations ? [{ icon: svgToString(_jsx(IconDetailDcmts, {})), operationType: 'singleRow', disabled: isDetailsDisabled, text: SDKUI_Localizator.DcmtsDetail, onClick: () => { if (!isDetailsDisabled)
+                    setIsOpenDetails(!isOpenDetails); } }] : []),
+        // ...customRightSidebarItems
     ];
-    const formToolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [canPrev != undefined && _jsx("p", { style: { textAlign: 'center', padding: '1px 4px', display: 'flex' }, children: `${itemIndex}/${count}` }), canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: calcIsModified(formData, formDataOrig), formMode: formMode, canPrev: canPrev, onPrev: onPrev }), canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: calcIsModified(formData, formDataOrig), formMode: formMode, canNext: canNext, onNext: onNext }), layoutMode === LayoutModes.Update && _jsx(IconMenuVertical, { id: `commands-detail-${id}`, color: 'white', cursor: 'pointer' }), layoutMode === LayoutModes.Update && _jsx(ContextMenu, { showEvent: 'click', dataSource: commandsMenuItems, target: `#commands-detail-${id}` })] });
+    const formToolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowNavigation && canPrev != undefined && _jsx("p", { style: { textAlign: 'center', padding: '1px 4px', display: 'flex' }, children: `${itemIndex}/${count}` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: calcIsModified(formData, formDataOrig), formMode: formMode, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: calcIsModified(formData, formDataOrig), formMode: formMode, canNext: canNext, onNext: onNext }), layoutMode === LayoutModes.Update && _jsx(IconMenuVertical, { id: `commands-detail-${id}`, color: 'white', cursor: 'pointer' }), layoutMode === LayoutModes.Update && _jsx(ContextMenu, { showEvent: 'click', dataSource: commandsMenuItems, target: `#commands-detail-${id}` })] });
     function createChange(mid, metadataType, modifiedValue) {
         return { mid, metadataType, modifiedValue };
     }
@@ -432,6 +385,28 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const metadataValuesSourceOrig = useMemo(() => {
         return showAll ? formDataOrig.filter(o => o.mid && o.mid > 100) : formDataOrig.filter(o => o.mid && o.mid > 100).slice(0, listMaxItems);
     }, [showAll, formDataOrig]);
+    const handleClose = () => {
+        if (!isModified) {
+            onClose?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            parentId: isModal ? "TMDcmtFormShowConfirmForClose-" + id : undefined,
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES)
+                        await onSavedAsync?.();
+                    onClose?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
     const getFormula = () => {
         let fd = new FormulaDescriptor();
         fd.expression = FormulaHelper.isFormula(focusedMetadataValue?.value) ? FormulaHelper.removeFormulaTag(focusedMetadataValue?.value) : undefined;
@@ -441,11 +416,101 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
         fd.tid = TID;
         return fd;
     };
-    const isPreviewDisabled = layoutMode === LayoutModes.Ark && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
-    const isBoardDisabled = layoutMode !== LayoutModes.Update;
-    const isSysMetadataDisabled = layoutMode !== LayoutModes.Update;
-    const isDetailsDisabled = layoutMode !== LayoutModes.Update || !DID;
-    const isMasterDisabled = layoutMode !== LayoutModes.Update || !DID;
+    const isMobile = deviceType === DeviceType.MOBILE;
+    const tmDcmtForm = useMemo(() => _jsx(_Fragment, { children: metadataValuesSource.length > 0 &&
+            _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+                            setFormData((prevItems) => prevItems.map((item) => {
+                                const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
+                                return newItem ? { ...item, ...newItem } : item;
+                            }));
+                        }, onAdvancedMenuClick: (e) => {
+                            switch (e.button) {
+                                case AdvancedMenuButtons.DistinctValues:
+                                    setIsOpenDistinctValues(!isOpenDistinctValues);
+                                    break;
+                                case AdvancedMenuButtons.FormulaEditor:
+                                    setIsOpenFormulaEditor(!isOpenFormulaEditor);
+                                    break;
+                            }
+                        } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: confirmActionPopup }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: onUndoHandler })] }) :
+                                        _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Archive, advancedColor: TMColors.success, onClick: confirmActionPopup }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Clear, advancedColor: TMColors.tertiary, onClick: clearFormHandler }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: SDKUI_Localizator.Undo, advancedColor: TMColors.tertiary, onClick: onUndoHandler })] }) }) }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, TID: TID, DID: DID, onClose: () => setShowReAssignPopup(false) }), _jsx(ConfirmAttachmentsDialog, {})] }) }), [TID, DID, formData, formDataOrig, focusedMetadataValue, isOpenDistinctValues, isOpenFormulaEditor, validationItems, showAll]);
+    const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { tid: TID, did: DID }), [TID, DID]);
+    const tmSysMetadata = useMemo(() => _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] }), [TID, layoutMode, formData, deviceType]);
+    const tmDcmtPreview = useMemo(() => _jsx(TMDcmtPreviewWrapper, { currentDcmt: currentDcmt, dcmtFile: dcmtFile, deviceType: deviceType, fromDTD: fromDTD, layoutMode: layoutMode, onFileUpload: (setFile) => {
+            setDcmtFile(setFile);
+        } }), [currentDcmt, dcmtFile, deviceType, fromDTD, layoutMode]);
+    const allInitialPanelVisibility = {
+        'tmDcmtForm': true,
+        'tmBlog': false,
+        'tmSysMetadata': false,
+        'tmDcmtPreview': true,
+    };
+    const initialPanelDimensions = {
+        'tmDcmtForm': { width: '25%', height: '100%' },
+        'tmBlog': { width: '25%', height: '100%' },
+        'tmSysMetadata': { width: '25%', height: '100%' },
+        'tmDcmtPreview': { width: '25%', height: '100%' },
+    };
+    const initialPanels = useMemo(() => [
+        {
+            id: 'tmDcmtForm',
+            name: SDK_Localizator.Metadatas,
+            contentOptions: {
+                component: tmDcmtForm,
+                isClosable: isClosable,
+                panelContainer: {
+                    showHeader: showHeader,
+                    title: fromDTD?.nameLoc,
+                    allowMaximize: !isMobile,
+                    onBack: (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose,
+                    onClose: isClosable ? () => setIsOpenDcmtForm(false) : undefined,
+                    toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {})
+                },
+            },
+            toolbarOptions: {
+                icon: _jsx(IconPreview, { fontSize: 24 }),
+                visible: true,
+                orderNumber: 1,
+                isActive: allInitialPanelVisibility['tmDcmtForm']
+            }
+        },
+        {
+            id: 'tmBlog',
+            name: SDKUI_Localizator.BlogCase,
+            contentOptions: { component: tmBlog, panelContainer: { title: SDKUI_Localizator.BlogCase, allowMaximize: !isMobile } },
+            toolbarOptions: { icon: _jsx(IconBoard, { fontSize: 24 }), visible: true, disabled: isBoardDisabled, orderNumber: 2, isActive: allInitialPanelVisibility['tmBlog'] }
+        },
+        {
+            id: 'tmSysMetadata',
+            name: SDKUI_Localizator.MetadataSystem,
+            contentOptions: { component: tmSysMetadata, panelContainer: { title: SDKUI_Localizator.MetadataSystem, allowMaximize: !isMobile } },
+            toolbarOptions: { icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }), visible: true, disabled: isSysMetadataDisabled, orderNumber: 3, isActive: allInitialPanelVisibility['tmSysMetadata'] }
+        },
+        {
+            id: 'tmDcmtPreview',
+            name: SDKUI_Localizator.PreviewDocument,
+            contentOptions: { component: tmDcmtPreview },
+            toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), disabled: isPreviewDisabled, visible: true, orderNumber: 4, isActive: allInitialPanelVisibility['tmDcmtPreview'] }
+        }
+    ], [tmDcmtForm, tmBlog, tmSysMetadata, tmDcmtPreview, isPreviewDisabled, isBoardDisabled, isSysMetadataDisabled, isClosable]);
+    // {showDcmtFormSidebar && <TMCommandsPanel
+    //     isMobile={deviceType === DeviceType.MOBILE}
+    //     items={[
+    //         ...(layoutMode === LayoutModes.Ark ? [
+    //             { icon: <IconRoundFileUpload />, selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled) setIsOpenPreview(!isOpenPreview); } }
+    //         ] : []),
+    //         ...(layoutMode !== LayoutModes.Ark ? [
+    //             ...(deviceType === DeviceType.MOBILE ? [{ icon: <IconArrowLeft />, onClick: isClosable ? undefined : handleClose }] : []),
+    //             { icon: <IconPreview />, selected: isOpenDcmtForm, onClick: () => { setIsOpenDcmtForm(!isOpenDcmtForm); } },
+    //             { icon: <IconShow />, selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled) setIsOpenPreview(!isOpenPreview); } },
+    //             { icon: <IconBoard />, selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) { closeMiddlePanel(); setIsOpenBoard(!isOpenBoard); } } },
+    //             { icon: <IconDcmtTypeSys />, selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) { closeMiddlePanel(); setIsOpenSysMetadata(!isOpenSysMetadata); } } },
+    //         ] : []),
+    //         ...(allowRelations && currentTIDHasMasterRelations ? [{ icon: <IconDetailDcmts />, selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled) setIsOpenMaster(!isOpenMaster); } }] : []),
+    //         ...(allowRelations && currentTIDHasDetailRelations ? [{ icon: <IconDetailDcmts transform='scale(-1, 1)' />, selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled) setIsOpenDetails(!isOpenDetails); } }] : []),
+    //         ...customRightSidebarItems
+    //     ]}
+    // />}
     const renderDcmtForm = () => {
         return (_jsxs("div", { style: {
                 display: 'flex',
@@ -454,70 +519,23 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 gap: SDKUI_Globals.userSettings.themeSettings.gutters,
                 width: '100%',
                 height: '100%',
-            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel()) && deviceType !== DeviceType.MOBILE && isOpenDcmtForm, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], children: [_jsx(TMLayoutItem, { children: _jsx(TMPanel, { showHeader: showHeader, title: fromDTD?.nameLoc, toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {}), onBack: (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose, onClose: isClosable ? () => setIsOpenDcmtForm(false) : undefined, children: metadataValuesSource.length > 0 &&
-                                                _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
-                                                                setFormData((prevItems) => prevItems.map((item) => {
-                                                                    const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
-                                                                    return newItem ? { ...item, ...newItem } : item;
-                                                                }));
-                                                            }, onAdvancedMenuClick: (e) => {
-                                                                switch (e.button) {
-                                                                    case AdvancedMenuButtons.DistinctValues:
-                                                                        setIsOpenDistinctValues(!isOpenDistinctValues);
-                                                                        break;
-                                                                    case AdvancedMenuButtons.FormulaEditor:
-                                                                        setIsOpenFormulaEditor(!isOpenFormulaEditor);
-                                                                        break;
-                                                                }
-                                                            } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: confirmActionPopup }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: onUndoHandler })] }) :
-                                                                            _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Archive, advancedColor: TMColors.success, onClick: confirmActionPopup }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Clear, advancedColor: TMColors.tertiary, onClick: clearFormHandler }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: SDKUI_Localizator.Undo, advancedColor: TMColors.tertiary, onClick: onUndoHandler })] }) }) }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, TID: TID, DID: DID, onClose: () => setShowReAssignPopup(false) }), _jsx(ConfirmAttachmentsDialog, {})] }) }) }), isOpenPreview || isOpenMiddlePanel() ?
-                                        _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, showSeparator: deviceType !== DeviceType.MOBILE && (isOpenPreview && isOpenMiddlePanel()), start: getSecondarySplitterStartLayout(), min: ['0', '0'], separatorColor: 'transparent', children: [isOpenMiddlePanel()
-                                                        ? _jsx(TMLayoutItem, { children: _jsxs(TMPanel, { showHeader: !(isOpenDetails && layoutMode === LayoutModes.Update), title: titleText(), onClose: () => { closeMiddlePanel(); }, children: [isOpenBoard && layoutMode === LayoutModes.Update &&
-                                                                        _jsx(TMDcmtBlog, { tid: TID, did: DID }), isOpenSysMetadata && layoutMode === LayoutModes.Update &&
-                                                                        _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] }), isOpenFormulaEditor &&
-                                                                        _jsx(TMFormulaEditor, { isModal: false, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
-                                                                                setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
-                                                                                setFocusedMetadataValue(prevState => ({
-                                                                                    ...prevState,
-                                                                                    isSelected: true,
-                                                                                    isEditable: true,
-                                                                                    value: FormulaHelper.addFormulaTag(newFormula.expression)
-                                                                                }));
-                                                                            } })] }) })
-                                                        : _jsx(_Fragment, {}), isOpenPreview
-                                                        ? _jsxs(TMLayoutItem, { children: [layoutMode === LayoutModes.Update ?
-                                                                    _jsx(TMDcmtPreview, { onClosePanel: () => { setIsOpenPreview(false); onClosePreviewPanel?.(); }, dcmtData: currentDcmt }) :
-                                                                    _jsx(TMFileUploader, { onFileUpload: (file) => setDcmtFile(file), onClose: () => setIsOpenPreview(false), isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType }), " "] })
-                                                        : _jsx(_Fragment, {})] }) }) : _jsx(_Fragment, {})] }), isOpenDistinctValues &&
-                                _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
-                                        if (!e)
-                                            return;
-                                        setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
-                                    } }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }) }), showDcmtFormSidebar && _jsx(TMCommandsPanel, { isMobile: deviceType === DeviceType.MOBILE, items: [
-                        ...(layoutMode === LayoutModes.Ark ? [
-                            { icon: _jsx(IconRoundFileUpload, {}), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
-                                    setIsOpenPreview(!isOpenPreview); } }
-                        ] : []),
-                        ...(layoutMode !== LayoutModes.Ark ? [
-                            ...(deviceType === DeviceType.MOBILE ? [{ icon: _jsx(IconArrowLeft, {}), onClick: isClosable ? undefined : handleClose }] : []),
-                            { icon: _jsx(IconPreview, {}), selected: isOpenDcmtForm, onClick: () => { setIsOpenDcmtForm(!isOpenDcmtForm); } },
-                            { icon: _jsx(IconShow, {}), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
-                                    setIsOpenPreview(!isOpenPreview); } },
-                            { icon: _jsx(IconBoard, {}), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
-                                    closeMiddlePanel();
-                                    setIsOpenBoard(!isOpenBoard);
-                                } } },
-                            { icon: _jsx(IconDcmtTypeSys, {}), selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) {
-                                    closeMiddlePanel();
-                                    setIsOpenSysMetadata(!isOpenSysMetadata);
-                                } } },
-                        ] : []),
-                        ...(allowRelations && currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, {}), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
-                                    setIsOpenMaster(!isOpenMaster); } }] : []),
-                        ...(allowRelations && currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
-                                    setIsOpenDetails(!isOpenDetails); } }] : []),
-                        ...customRightSidebarItems
-                    ] }), (fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isOpenDetails && !isOpenMaster) &&
+            }, children: [_jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [(groupId && groupId.length > 0)
+                            ? _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })
+                            : _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmDcmtForm', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar }) }), isOpenDistinctValues &&
+                            _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
+                                    if (!e)
+                                        return;
+                                    setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
+                                } }), isOpenFormulaEditor &&
+                            _jsx(TMFormulaEditor, { isModal: true, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
+                                    setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
+                                    setFocusedMetadataValue(prevState => ({
+                                        ...prevState,
+                                        isSelected: true,
+                                        isEditable: true,
+                                        value: FormulaHelper.addFormulaTag(newFormula.expression)
+                                    }));
+                                } }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), (fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isOpenDetails && !isOpenMaster) &&
                     _jsx(ToppyHelpCenter, { deviceType: deviceType, 
                         // onClick={() => isMobile ? openConfigureMode?.() : undefined}
                         content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), isInDcmtForm: deviceType === DeviceType.MOBILE }) }) }), isOpenDetails &&
@@ -526,28 +544,6 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                                 return (_jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem }) }, `${index}-${dcmt.DID}`));
                             })] })] }));
     };
-    const handleClose = () => {
-        if (!isModified) {
-            onClose?.();
-            return;
-        }
-        TMMessageBoxManager.show({
-            parentId: isModal ? "TMDcmtFormShowConfirmForClose-" + id : undefined,
-            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
-            onButtonClick: async (e) => {
-                try {
-                    if (e == ButtonNames.CANCEL)
-                        return;
-                    if (e == ButtonNames.YES)
-                        await onSavedAsync?.();
-                    onClose?.();
-                }
-                catch (ex) {
-                    TMExceptionBoxManager.show({ exception: ex });
-                }
-            }
-        });
-    };
     return (_jsx(_Fragment, { children: (isModal && onClose) ? _jsx(_Fragment, { children: _jsx(TMModal, { title: titleModal, onClose: handleClose, width: widthModal ?? '100%', height: heightModal ?? '100%', hidePopup: false, askClosingConfirm: true, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block', padding: "4px" }, children: renderDcmtForm() }) }) })
             : renderDcmtForm() }));
 };
@@ -607,3 +603,9 @@ const ToppyImage = styled.img `
 export const ToppyHelpCenter = ({ content, onClick, deviceType, top = -200 }) => {
     return (_jsxs(ToppyContainer, { children: [_jsx(ToppyImage, { "$isMobile": deviceType === DeviceType.MOBILE, onClick: onClick, src: toppy, alt: "Toppy" }), _jsx("div", { style: { top: deviceType === DeviceType.MOBILE ? -180 : top, right: deviceType === DeviceType.MOBILE ? 20 : 1, transform: 'rotate(20deg)', position: 'absolute', width: 'max-content', height: 'max-content' }, children: content })] }));
 };
+const TMDcmtPreviewWrapper = ({ currentDcmt, layoutMode, fromDTD, dcmtFile, deviceType, onFileUpload }) => {
+    const { setPanelVisibilityById, toggleMaximize, isResizingActive } = useTMPanelManagerContext();
+    return (layoutMode === LayoutModes.Update ?
+        _jsx(TMDcmtPreview, { onClosePanel: () => setPanelVisibilityById('tmDcmtPreview', false), onMaximizePanel: () => toggleMaximize('tmDcmtPreview'), dcmtData: currentDcmt, isResizingActive: isResizingActive }) :
+        _jsx(TMFileUploader, { onFileUpload: onFileUpload, onClose: () => setPanelVisibilityById('tmDcmtPreview', false), isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType, isResizingActive: isResizingActive }));
+};

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

@@ -4,6 +4,7 @@ interface ITMDcmtPreviewProps {
     dcmtData: ITMDcmt | undefined;
     canNext?: boolean;
     canPrev?: boolean;
+    isResizingActive?: boolean;
     onNext?: () => void;
     onPrev?: () => void;
     onClosePanel?: () => void;
@@ -13,6 +14,7 @@ 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 }: {

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

@@ -15,7 +15,7 @@ import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../../forms/TMSa
 import { StyledAnimatedComponentOpacity } from '../../base/Styled';
 import TMPanel from '../../base/TMPanel';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
-const TMDcmtPreview = ({ dcmtData, onClosePanel, canNext, canPrev, onNext, onPrev, onMaximizePanel }) => {
+const TMDcmtPreview = ({ dcmtData, isResizingActive, onClosePanel, canNext, canPrev, onNext, onPrev, onMaximizePanel }) => {
     const [dcmtBlob, setDcmtBlob] = useState(undefined);
     const [showPreview, setShowPreview] = useState(false);
     const [isFromCache, setIsFromCache] = useState(false);
@@ -92,10 +92,10 @@ const TMDcmtPreview = ({ dcmtData, onClosePanel, canNext, canPrev, onNext, onPre
                                 { icon: _jsx(IconClear, {}), text: "Cancella la cache", onClick: () => { clearDcmtsFileCache(); setIsFromCache(false); } },
                             ] }, "btn13") })] }), children: error
                 ? _jsx(TMNothingToShow, { icon: _jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), text: error })
-                : renderedPreview(dcmtData?.tid, dcmtData?.did, dcmtData?.fileExt, dcmtData?.fileSize, dcmtData?.fileCount, extensionHandler(dcmtData?.fileExt), showPreview, () => { loadDocumentWithCache(); setShowPreview(true); }, dcmtBlob) }) }));
+                : 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 }) => {
+export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
     const [blobUrl, setBlobUrl] = useState(undefined);
     const [fileType, setFileType] = useState(undefined);
     const [formattedXml, setFormattedXml] = useState(undefined);
@@ -134,7 +134,7 @@ export const TMFileViewer = ({ fileBlob }) => {
     if (fileBlob.type.includes('image')) {
         return (_jsx(ImageViewer, { fileBlob: fileBlob, alt: '' }));
     }
-    return (_jsx("iframe", { srcDoc: fileType?.includes("xml") && formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !fileType?.includes("xml") || !formattedXml ? blobUrl : undefined, title: "File Viewer", width: "100%", height: "100%", style: { border: 'none', zIndex: 0 } }));
+    return (_jsx("iframe", { srcDoc: fileType?.includes("xml") && formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !fileType?.includes("xml") || !formattedXml ? blobUrl : undefined, title: "File Viewer", width: "100%", height: "100%", style: { border: 'none', zIndex: 0, pointerEvents: isResizingActive === true ? "none" : "auto" } }));
 };
 const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
     const containerRef = useRef(null);
@@ -317,7 +317,7 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
 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 ?? 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] })] })] }) }));
 };
-const renderedPreview = (tid, did, fileExt, fileSize, fileCount, extHandler, showPreview, onDownloadShowPreviewClick, dcmtBlob) => {
+const renderedPreview = (tid, did, fileExt, fileSize, fileCount, extHandler, showPreview, isResizingActive, onDownloadShowPreviewClick, dcmtBlob) => {
     if (!did)
         return _jsx(TMNothingToShow, { text: 'Nessun documento selezionato.' });
     if (fileCount == 0) {
@@ -327,7 +327,7 @@ const renderedPreview = (tid, did, fileExt, fileSize, fileCount, extHandler, sho
         return _jsx(TMNothingToShow, { fileExt: fileExt });
     }
     if (showPreview) {
-        return (_jsx(StyledPreviewContainer, { style: { overflow: 'auto' }, children: _jsx(TMFileViewer, { fileBlob: dcmtBlob }) }));
+        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 })] }) }));
 };

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

@@ -6,6 +6,7 @@ interface ITMFileUploader {
     isRequired?: boolean;
     defaultBlob?: File | null;
     deviceType?: DeviceType;
+    isResizingActive?: boolean;
 }
 declare const TMFileUploader: React.FC<ITMFileUploader>;
 export default TMFileUploader;

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

@@ -10,7 +10,7 @@ import { DeviceType } from '../../base/TMDeviceProvider';
 import TMTooltip from '../../base/TMTooltip';
 import { TMFileViewer, StyledHeaderIcon } from './TMDcmtPreview';
 import TMPanel from '../../base/TMPanel';
-const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload, isRequired = false, defaultBlob = null }) => {
+const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload, isRequired = false, defaultBlob = null, isResizingActive }) => {
     const [dragOver, setDragOver] = useState(false);
     const [uploadedFile, setUploadedFile] = useState(defaultBlob);
     const [fileName, setFileName] = useState('');
@@ -71,7 +71,7 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
     };
     let content = !uploadedFile ?
         _jsx("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: _jsxs(UploadContainer, { ref: uploaderRef, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsx("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 }) }) }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? 'Clicca per sfogliare il tuo file' : 'Trascina il tuo file qui o fai doppio click per sfogliarlo' }), 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, icon: _jsx(IconClear, { fontSize: 22 }) })] }), extensionHandler(fileExt) === FileExtensionHandler.READY_TO_SHOW ? _jsx(TMFileViewer, { fileBlob: uploadedFile }) :
+        _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, 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: [" ", 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] }) })] });
     return (_jsx(TMPanel, { title: 'Caricamento File', onBack: deviceType === DeviceType.MOBILE ? () => onClose?.() : undefined, toolbar: deviceType !== DeviceType.MOBILE ? _jsx(StyledHeaderIcon, { onClick: onClose, "$color": 'white', children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) }) : undefined, children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), content] }) }));
 };