@topconsultnpm/sdkui-react 6.22.0-dev2.19 → 6.22.0-dev2.20

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

@@ -32,6 +32,11 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
     const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
     // Track if TMRelationViewer is loading (used to disable context menu during loading)
     const [isRelationViewerLoading, setIsRelationViewerLoading] = useState(false);
+    // Funzione fornita da TMRelationViewer per interrompere il calcolo delle correlazioni
+    // (nessuna ulteriore chiamata GetMetadata). È sincrona: invocabile anche subito prima di uscire.
+    const stopRelationsCalculationRef = useRef(undefined);
+    // True quando si sta uscendo dalla maschera: evita l'alert sui risultati parziali
+    const isLeavingRef = useRef(false);
     // Track if loading has ever been TRUE (to distinguish initial false from post-load false)
     const hasLoadingBeenTrueRef = useRef(false);
     // Track the previous loading state to detect transitions
@@ -63,6 +68,39 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
     const onRefreshOperationsDatagrid = useCallback(async () => {
         setRefreshOperationsTrigger(prev => prev + 1);
     }, []);
+    // Riceve da TMRelationViewer la funzione per interrompere il calcolo
+    const handleStopCalculationReady = useCallback((stopCalculation) => {
+        stopRelationsCalculationRef.current = stopCalculation;
+    }, []);
+    // Interrompe il calcolo delle correlazioni: mostra subito quelle già calcolate
+    // senza attendere le restanti chiamate GetMetadata
+    const handleStopRelationsCalculation = useCallback(() => {
+        stopRelationsCalculationRef.current?.();
+        setIsCheckingFirstLoad(false); // Nasconde l'overlay e mostra l'albero (parziale)
+    }, []);
+    // Esce dalla maschera interrompendo anche le chiamate GetMetadata ancora in coda:
+    // l'interruzione è invocata in modo sincrono perché onBack può smontare il componente
+    // (un effect non farebbe in tempo a propagare l'interruzione)
+    const handleBack = useCallback(() => {
+        isLeavingRef.current = true;
+        stopRelationsCalculationRef.current?.();
+        onBack?.();
+    }, [onBack]);
+    const handleCancelFirstLoad = useCallback(() => {
+        setIsCheckingFirstLoad(false);
+        handleBack();
+    }, [handleBack]);
+    // Notifica all'utente che i dati mostrati sono parziali (non quando si sta uscendo)
+    const handleRelationsCalculationStopped = useCallback(() => {
+        if (isLeavingRef.current)
+            return;
+        ShowAlert({
+            message: SDKUI_Localizator.RelationsCalculationStopped,
+            title: SDKUI_Localizator.Attention,
+            duration: 4000,
+            mode: 'info',
+        });
+    }, []);
     // Refresh ALL panels (tree view + search results) with fade-out -> update -> fade-in transition
     const onRefreshAllPanels = async () => {
         await dcmtUtility?.onRefreshPreviewForm?.(); // Refresh preview form data
@@ -238,6 +276,12 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
         },
     });
     const { dcmtOperations: { abortController, showWaitPanel, showPrimary, waitPanelTitle, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, }, } = features;
+    // Nuovi documenti in input: il componente non sta più uscendo dalla maschera
+    // (chiave stabile: l'array inputDcmts può essere ricreato a ogni render)
+    const inputDcmtsKey = useMemo(() => (inputDcmts ?? []).map(d => `${d.TID}-${d.DID}`).join('|'), [inputDcmts]);
+    useEffect(() => {
+        isLeavingRef.current = false;
+    }, [inputDcmtsKey]);
     // Load dtdMaster when inputDcmts changes
     useEffect(() => {
         const loadDtdMaster = async () => {
@@ -335,11 +379,11 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
                         setContextMenuVisible(true);
                     }, children: [_jsx(TMRelationViewerWrapper, { refreshKey: refreshKey, inputDcmts: inputDcmts, isForMaster: isForMaster, showCurrentDcmtIndicator: showCurrentDcmtIndicator, showZeroDcmts: showZeroDcmts, 
                             // customItemRender={customItemRender}
-                            allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: handleSelectedItemsChanged, onNoRelationsFound: handleNoRelationsFound, onItemContextMenu: isRelationViewerLoading ? undefined : onItemContextMenu, focusedItemFormData: focusedItemFormData, onLoadingStateChanged: setIsRelationViewerLoading }), _jsx(TMContextMenu, { items: operationItems, externalControl: {
+                            allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: handleSelectedItemsChanged, onNoRelationsFound: handleNoRelationsFound, onItemContextMenu: isRelationViewerLoading ? undefined : onItemContextMenu, focusedItemFormData: focusedItemFormData, onLoadingStateChanged: setIsRelationViewerLoading, onStopCalculationReady: handleStopCalculationReady, onCalculationStopped: handleRelationsCalculationStopped }), _jsx(TMContextMenu, { items: operationItems, externalControl: {
                                 visible: contextMenuVisible,
                                 position: contextMenuPosition,
                                 onClose: () => setContextMenuVisible(false)
-                            } })] }) }), [inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, allowMultipleSelection, focusedItem, selectedItems, handleFocusedItemChanged, handleSelectedItemsChanged, handleNoRelationsFound, onItemContextMenu, contextMenuVisible, contextMenuPosition, refreshKey, focusedItemFormData, isRelationViewerLoading]);
+                            } })] }) }), [inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, allowMultipleSelection, focusedItem, selectedItems, handleFocusedItemChanged, handleSelectedItemsChanged, handleNoRelationsFound, onItemContextMenu, contextMenuVisible, contextMenuPosition, refreshKey, focusedItemFormData, isRelationViewerLoading, handleStopCalculationReady, handleRelationsCalculationStopped]);
     const tmFormOrResult = useMemo(() => _jsx(TMFormOrResultWrapper, { refreshKey: refreshKeyFormOrResult, deviceType: deviceType, focusedItem: focusedItem, onTaskCreateRequest: onTaskCreateRequest, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, handleNavigateToReference: handleNavigateToReference, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, editPdfForm: editPdfForm, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, onOpenPdfEditorRequest: onOpenPdfEditorRequest, onRefreshSearchResults: onRefreshAllPanels }), [focusedItem, deviceType, allTasks, handleNavigateToWGs, handleNavigateToDossiers, handleNavigateToReference, editPdfForm, openS4TViewer, onOpenS4TViewerRequest, onOpenPdfEditorRequest, onRefreshAfterAddDcmtToFavs, refreshKeyFormOrResult]);
     const initialPanelDimensions = {
         'tmTreeView': { width: '50%', height: '100%' },
@@ -370,7 +414,9 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
                     title: getTitle(),
                     toolbar: toolbar,
                     allowMaximize: !isMobile,
-                    onBack: onBack
+                    // handleBack interrompe il calcolo prima di uscire.
+                    // Resta undefined se il padre non ha passato onBack (nessun pulsante indietro)
+                    onBack: onBack ? handleBack : undefined
                 }
             },
             toolbarOptions: {
@@ -417,10 +463,7 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
             toolbarOptions: { icon: _jsx(IconSearchCheck, { fontSize: 24 }), visible: false, orderNumber: 2, isActive: allInitialPanelVisibility['tmFormOrResult'] }
         }
     ], [tmTreeView, tmFormOrResult, focusedItem?.isDcmt, dtdMaster]);
-    return (_jsxs("div", { style: { width: '100%', height: '100%', position: 'relative' }, children: [isCheckingFirstLoad && (_jsx(TMLoadingOverlay, { onCancel: () => {
-                    setIsCheckingFirstLoad(false);
-                    onBack?.();
-                } })), _jsxs("div", { style: isCheckingFirstLoad ? { position: 'absolute', width: 0, height: 0, overflow: 'hidden', opacity: 0, pointerEvents: 'none' } : { width: '100%', height: '100%' }, children: [_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(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmTreeView', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }) }), renderDcmtOperations, renderFloatingBar] })] }));
+    return (_jsxs("div", { style: { width: '100%', height: '100%', position: 'relative' }, children: [isCheckingFirstLoad && (_jsx(TMLoadingOverlay, { onCancel: handleCancelFirstLoad, onStop: handleStopRelationsCalculation })), _jsxs("div", { style: isCheckingFirstLoad ? { position: 'absolute', width: 0, height: 0, overflow: 'hidden', opacity: 0, pointerEvents: 'none' } : { width: '100%', height: '100%' }, children: [_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(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmTreeView', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }) }), renderDcmtOperations, renderFloatingBar] })] }));
 };
 export default TMMasterDetailDcmts;
 /**
@@ -429,7 +472,7 @@ export default TMMasterDetailDcmts;
  * - Panel visibility toggling
  * - Focus delay handling
  */
-const TMRelationViewerWrapper = ({ refreshKey, inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, customItemRender, allowMultipleSelection, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onNoRelationsFound, onItemContextMenu, focusedItemFormData, onLoadingStateChanged }) => {
+const TMRelationViewerWrapper = ({ refreshKey, inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, customItemRender, allowMultipleSelection, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onNoRelationsFound, onItemContextMenu, focusedItemFormData, onLoadingStateChanged, onStopCalculationReady, onCalculationStopped }) => {
     const { setPanelVisibilityById, setToolbarButtonVisibility } = useTMPanelManagerContext();
     // Monitor device type changes to restore panel visibility when switching from mobile to desktop
     const deviceType = useDeviceType();
@@ -489,7 +532,7 @@ const TMRelationViewerWrapper = ({ refreshKey, inputDcmts, isForMaster, showCurr
             onItemContextMenu?.(item, e);
         }, 100);
     }, [onItemContextMenu, handleFocusedItemChanged]);
-    return (_jsx(TMRelationViewer, { inputDcmts: inputDcmts, isForMaster: isForMaster, showCurrentDcmtIndicator: showCurrentDcmtIndicator, initialShowZeroDcmts: showZeroDcmts, customItemRender: customItemRender, allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: onSelectedItemsChanged, maxDepthLevel: 1, invertMasterNavigation: false, showExpandAllButton: true, onNoRelationsFound: onNoRelationsFound, onItemContextMenu: onContextMenu, focusedItemFormData: focusedItemFormData, onLoadingStateChanged: onLoadingStateChanged }, refreshKey));
+    return (_jsx(TMRelationViewer, { inputDcmts: inputDcmts, isForMaster: isForMaster, showCurrentDcmtIndicator: showCurrentDcmtIndicator, initialShowZeroDcmts: showZeroDcmts, customItemRender: customItemRender, allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: onSelectedItemsChanged, maxDepthLevel: 1, invertMasterNavigation: false, showExpandAllButton: true, onNoRelationsFound: onNoRelationsFound, onItemContextMenu: onContextMenu, focusedItemFormData: focusedItemFormData, onLoadingStateChanged: onLoadingStateChanged, onStopCalculationReady: onStopCalculationReady, onCalculationStopped: onCalculationStopped }, refreshKey));
 };
 const TMFormOrResultWrapper = ({ refreshKey, deviceType, focusedItem, onTaskCreateRequest, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, onRefreshAfterAddDcmtToFavs, editPdfForm, openS4TViewer, onOpenS4TViewerRequest, onOpenPdfEditorRequest, onRefreshSearchAsyncDatagrid, onRefreshSearchResults, handleNavigateToReference, fetchRemoteCertificates }) => {
     const { setPanelVisibilityById } = useTMPanelManagerContext();
@@ -499,7 +542,7 @@ const TMFormOrResultWrapper = ({ refreshKey, deviceType, focusedItem, onTaskCrea
                 }, fetchRemoteCertificates: fetchRemoteCertificates }, refreshKey) :
             focusedItem?.searchResult === undefined ? (_jsx(TMPanel, { title: SDKUI_Localizator.SearchResult, children: _jsx(TMToppyMessage, { message: SDKUI_Localizator.SelectDocumentToViewSearchResults }) })) : (_jsx(TMSearchResult, { groupId: 'tmFormOrResult', isClosable: deviceType !== DeviceType.MOBILE, context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, allowRelations: false, openDcmtFormAsModal: true, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, showDcmtFormSidebar: false, autoFocusFirstRow: false, onTaskCreateRequest: onTaskCreateRequest, onClose: () => { setPanelVisibilityById('tmTreeView', true); }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, editPdfForm: editPdfForm, onOpenPdfEditorRequest: onOpenPdfEditorRequest, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, enablePinIcons: false, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, showBackButton: false, onRefreshSearchAsyncDatagrid: onRefreshSearchResults, onReferenceClick: handleNavigateToReference, fetchRemoteCertificates: fetchRemoteCertificates }, refreshKey)) }));
 };
-const TMLoadingOverlay = ({ onCancel, description, cancelText }) => {
+const TMLoadingOverlay = ({ onCancel, onStop, description, cancelText, stopText }) => {
     return (_jsx("div", { style: {
             position: 'absolute',
             top: 0,
@@ -569,24 +612,39 @@ const TMLoadingOverlay = ({ onCancel, description, cancelText }) => {
 						.tm-spinner-animation div:nth-child(7):after { top: 63px; left: 17px; background: #782b7d; }
 						.tm-spinner-animation div:nth-child(8) { animation-delay: -0.288s; }
 						.tm-spinner-animation div:nth-child(8):after { top: 56px; left: 12px; background: #782b7d; }
-					` }), _jsxs("div", { className: "tm-spinner-animation", children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx("span", { style: { fontSize: '14px', color: '#334155', textAlign: 'center' }, children: description ?? SDKUI_Localizator.Loading }), onCancel && (_jsx("button", { onClick: onCancel, style: {
-                        marginTop: '4px',
-                        padding: '8px 24px',
-                        fontSize: '13px',
-                        fontWeight: 500,
-                        color: '#64748b',
-                        background: 'transparent',
-                        border: '1.5px solid #cbd5e1',
-                        borderRadius: '6px',
-                        cursor: 'pointer',
-                        transition: 'all 0.2s ease',
-                    }, onMouseEnter: (e) => {
-                        e.currentTarget.style.background = '#f1f5f9';
-                        e.currentTarget.style.borderColor = '#94a3b8';
-                        e.currentTarget.style.color = '#475569';
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.background = 'transparent';
-                        e.currentTarget.style.borderColor = '#cbd5e1';
-                        e.currentTarget.style.color = '#64748b';
-                    }, children: cancelText ?? SDKUI_Localizator.Cancel }))] }) }));
+					` }), _jsxs("div", { className: "tm-spinner-animation", children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx("span", { style: { fontSize: '14px', color: '#334155', textAlign: 'center' }, children: description ?? SDKUI_Localizator.Loading }), (onStop || onCancel) && (_jsxs("div", { style: { marginTop: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap', gap: '10px' }, children: [onStop && (_jsx("button", { onClick: onStop, title: SDKUI_Localizator.StopRelationsCalculation, style: {
+                                padding: '8px 24px',
+                                fontSize: '13px',
+                                fontWeight: 500,
+                                color: 'white',
+                                background: '#0c448e',
+                                border: '1.5px solid #0c448e',
+                                borderRadius: '6px',
+                                cursor: 'pointer',
+                                transition: 'all 0.2s ease',
+                            }, onMouseEnter: (e) => {
+                                e.currentTarget.style.background = '#0a3872';
+                                e.currentTarget.style.borderColor = '#0a3872';
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.background = '#0c448e';
+                                e.currentTarget.style.borderColor = '#0c448e';
+                            }, children: stopText ?? SDKUI_Localizator.ShowPartialResults })), onCancel && (_jsx("button", { onClick: onCancel, style: {
+                                padding: '8px 24px',
+                                fontSize: '13px',
+                                fontWeight: 500,
+                                color: '#64748b',
+                                background: 'transparent',
+                                border: '1.5px solid #cbd5e1',
+                                borderRadius: '6px',
+                                cursor: 'pointer',
+                                transition: 'all 0.2s ease',
+                            }, onMouseEnter: (e) => {
+                                e.currentTarget.style.background = '#f1f5f9';
+                                e.currentTarget.style.borderColor = '#94a3b8';
+                                e.currentTarget.style.color = '#475569';
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.background = 'transparent';
+                                e.currentTarget.style.borderColor = '#cbd5e1';
+                                e.currentTarget.style.color = '#64748b';
+                            }, children: cancelText ?? SDKUI_Localizator.Back }))] }))] }) }));
 };

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

@@ -0,0 +1,19 @@
+import { DcmtTypeDescriptor } from '@topconsultnpm/sdk-ts';
+import { DcmtInfo } from '../../../ts';
+interface TMMasterInfoFieldsProps {
+    /** Tipo documento: definisce i metadati (utente) da mostrare e come formattarli */
+    dtd: DcmtTypeDescriptor | undefined;
+    /** Documento di cui mostrare i metadati: se cambia, i valori vengono riletti */
+    dcmt: DcmtInfo | undefined;
+    /** Legge i valori del documento indicizzati per mid (il chiamante li tiene in cache) */
+    getValuesByMidAsync: () => Promise<Map<number, any>>;
+    /** Incrementare per forzare la rilettura dei valori (es. dopo il salvataggio del documento) */
+    reloadToken?: number;
+    /**
+     * Vista a tutto schermo: c'è spazio per tutti i metadati, quindi niente limite dell'anteprima
+     * ed è qui che compare la ricerca per nome/valore.
+     */
+    isExpandedView?: boolean;
+}
+declare const TMMasterInfoFields: ({ dtd, dcmt, getValuesByMidAsync, reloadToken, isExpandedView }: TMMasterInfoFieldsProps) => import("react/jsx-runtime").JSX.Element;
+export default TMMasterInfoFields;

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

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { DataListViewModes, MetadataDataDomains, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { hoverStyle, IconChevronDown, IconClearButton, IconCopy, IconSearch, IconSuccess, SDKUI_Localizator } from '../../../helper';
+import { formatScalarValue, getUserMetadataSorted } from '../../../helper/dcmtsHelper';
+import { useDataListItem } from '../../../hooks/useDataListItem';
+import { TMColors } from '../../../utils/theme';
+import ShowAlert from '../../base/TMAlert';
+import TMTooltip from '../../base/TMTooltip';
+// Metadati mostrati in linea prima del pulsante "mostra tutti".
+const PREVIEW_COUNT = 12;
+const styles = {
+    wrapper: { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, borderTop: `1px solid ${TMColors.card_background}` },
+    body: { flex: 1, minHeight: 0, padding: '13px 10px 9px', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(185px, 1fr))', gridAutoRows: 'max-content', alignContent: 'start', columnGap: '10px', rowGap: '13px', overflow: 'auto' },
+    item: { position: 'relative', display: 'flex', alignItems: 'center', minWidth: 0, minHeight: '30px', padding: '5px 10px 4px', borderRadius: '8px', border: `1px solid ${TMColors.card_background}`, background: TMColors.default_background, transition: 'border-color 0.15s ease, box-shadow 0.15s ease' },
+    label: { position: 'absolute', top: '-7px', left: '8px', maxWidth: 'calc(100% - 16px)', padding: '0 5px', background: TMColors.default_background, fontSize: '9px', fontWeight: 700, lineHeight: '13px', letterSpacing: '0.5px', textTransform: 'uppercase', color: TMColors.label_normal, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
+    value: { display: 'block', width: '100%', fontSize: '12.5px', fontWeight: 500, color: TMColors.text_normal, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', userSelect: 'text', cursor: 'text', minHeight: '17px', lineHeight: '17px' },
+    emptyValue: { color: TMColors.disabled, fontWeight: 400 },
+    // Pulsante di copia: pastiglia sul bordo superiore della card, come la caption
+    copyBtn: { position: 'absolute', top: '-9px', right: '6px', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '18px', height: '18px', padding: 0, borderRadius: '50%', border: `1px solid ${TMColors.card_background}`, background: TMColors.default_background, color: TMColors.label_normal, cursor: 'pointer', transition: 'opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease' },
+    placeholder: { gridColumn: '1 / -1', padding: '6px 2px', color: TMColors.label_normal, fontSize: '12px' },
+    // Barra di ricerca
+    searchBar: { display: 'flex', alignItems: 'center', gap: '8px', padding: '12px 14px 0', flexShrink: 0 },
+    searchBox: { position: 'relative', display: 'flex', alignItems: 'center', flex: 1, minWidth: 0, maxWidth: '300px', height: '26px', borderRadius: '13px', border: `1px solid ${TMColors.card_background}`, background: TMColors.toolbar_background, transition: 'border-color 0.15s ease, box-shadow 0.15s ease' },
+    searchIcon: { flexShrink: 0, margin: '0 3px 0 9px', color: TMColors.label_normal, display: 'flex' },
+    searchInput: { flex: 1, minWidth: 0, height: '100%', padding: '0 2px', margin: 0, border: 'none', outline: 'none', background: 'transparent', fontSize: '12px', color: TMColors.text_normal },
+    searchClear: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '18px', height: '18px', marginRight: '5px', padding: 0, border: 'none', borderRadius: '50%', background: 'transparent', color: TMColors.label_normal, cursor: 'pointer', flexShrink: 0, transition: 'background 0.15s ease, color 0.15s ease' },
+    searchCount: { fontSize: '11px', fontWeight: 600, color: TMColors.label_normal, whiteSpace: 'nowrap', flexShrink: 0 },
+    // Pulsante "mostra tutti / comprimi"
+    footer: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2px 10px 9px', flexShrink: 0 },
+    showAllBtn: { display: 'inline-flex', alignItems: 'center', gap: '6px', height: '24px', padding: '0 13px', borderRadius: '12px', border: `1px solid ${TMColors.primary_container}`, background: TMColors.primary_container, color: TMColors.primary, fontSize: '11.5px', fontWeight: 700, letterSpacing: '0.2px', cursor: 'pointer', transition: 'background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease' },
+};
+// Sui dispositivi touch l'hover non esiste: il pulsante di copia deve restare sempre visibile
+const SUPPORTS_HOVER = typeof window === 'undefined' || window.matchMedia?.('(hover: hover)')?.matches !== false;
+// Colori del pulsante di copia nei suoi tre stati
+const COPY_BTN_IDLE = { background: TMColors.default_background, borderColor: TMColors.card_background, color: TMColors.label_normal };
+const COPY_BTN_HOVER = { background: TMColors.primary_container, borderColor: TMColors.primary, color: TMColors.primary };
+const COPY_BTN_COPIED = { background: TMColors.default_background, borderColor: TMColors.success, color: TMColors.success };
+// Card di un singolo metadato: hover e feedback della copia sono locali, così non si ridisegna tutta la griglia
+const MetadataCard = ({ caption, copyText, children }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const [isCopied, setIsCopied] = useState(false);
+    // Il feedback "copiato" si spegne da solo: il timer va annullato se la card sparisce prima
+    useEffect(() => {
+        if (!isCopied)
+            return;
+        const timerID = setTimeout(() => setIsCopied(false), 1400);
+        return () => clearTimeout(timerID);
+    }, [isCopied]);
+    const copyAsync = async () => {
+        try {
+            await navigator.clipboard.writeText(copyText);
+            setIsCopied(true);
+        }
+        catch {
+            ShowAlert({ message: SDKUI_Localizator.FailedToCopyToClipboard, mode: 'error', title: SDKUI_Localizator.CopyToClipboard, duration: 3000 });
+        }
+    };
+    // Il pulsante resta visibile durante il feedback e quando ha il focus (accessibilità da tastiera)
+    const isCopyVisible = copyText !== '' && (!SUPPORTS_HOVER || isHovered || isCopied);
+    return (_jsxs("div", { style: styles.item, onMouseEnter: (e) => { setIsHovered(true); Object.assign(e.currentTarget.style, { borderColor: TMColors.primary, boxShadow: '0 2px 8px rgba(37, 89, 165, 0.14)' }); }, onMouseLeave: (e) => { setIsHovered(false); Object.assign(e.currentTarget.style, { borderColor: TMColors.card_background, boxShadow: 'none' }); }, children: [_jsx("span", { style: { ...styles.label, maxWidth: isCopyVisible ? 'calc(100% - 38px)' : 'calc(100% - 16px)' }, title: caption, children: caption }), children, copyText !== '' && (_jsx("button", { type: 'button', style: { ...styles.copyBtn, ...(isCopied ? COPY_BTN_COPIED : COPY_BTN_IDLE), opacity: isCopyVisible ? 1 : 0, pointerEvents: isCopyVisible ? 'auto' : 'none' }, title: isCopied ? SDKUI_Localizator.CopiedSuccessfully : SDKUI_Localizator.CopyToClipboard, "aria-label": SDKUI_Localizator.CopyToClipboard, onClick: copyAsync, onFocus: () => setIsHovered(true), onBlur: () => setIsHovered(false), ...hoverStyle(isCopied ? COPY_BTN_COPIED : COPY_BTN_HOVER, isCopied ? COPY_BTN_COPIED : COPY_BTN_IDLE), children: isCopied ? _jsx(IconSuccess, { fontSize: 11 }) : _jsx(IconCopy, { fontSize: 11 }) }))] }));
+};
+// Riepilogo dei metadati di un documento in card compatte
+const TMMasterInfoFields = ({ dtd, dcmt, getValuesByMidAsync, reloadToken, isExpandedView = false }) => {
+    const { renderDataListCell, loadDataListsAsync, getDataListItem } = useDataListItem();
+    const [rows, setRows] = useState([]);
+    // Finché la prima lettura non è conclusa non si mostra "nessun dato" (evita il lampo al primo render)
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [filter, setFilter] = useState('');
+    const [showAll, setShowAll] = useState(false);
+    // Carica i metadati del documento (valori + liste dati referenziate).
+    // getValuesByMidAsync è volutamente fuori dalle dipendenze: il chiamante la ricrea a ogni render
+    useEffect(() => {
+        let cancelled = false;
+        const loadAsync = async () => {
+            try {
+                if (!dcmt?.TID || !dcmt?.DID) {
+                    setRows([]);
+                    return;
+                }
+                const metadata = getUserMetadataSorted(dtd);
+                // Precarica le liste dati referenziate dai metadati, così le card mostrano subito il valore leggibile
+                const dataListIDs = new Set();
+                metadata.forEach(md => { if (md.dataDomain === MetadataDataDomains.DataList && md.dataListID)
+                    dataListIDs.add(md.dataListID); });
+                await loadDataListsAsync(dataListIDs);
+                const valueByMid = await getValuesByMidAsync();
+                if (cancelled)
+                    return;
+                setRows(metadata.map(md => ({
+                    mid: md.id,
+                    caption: (SDK_Globals.useLocalizedName ? md.nameLoc : md.name) ?? md.name ?? '',
+                    value: valueByMid.get(md.id),
+                    dataListID: (md.dataDomain === MetadataDataDomains.DataList && md.dataListID) ? md.dataListID : 0,
+                    viewMode: md.dataListViewMode ?? DataListViewModes.None,
+                    dataType: md.dataType,
+                    format: md.format?.format,
+                    formatCulture: md.format?.formatCulture,
+                })));
+            }
+            catch {
+                if (!cancelled)
+                    setRows([]);
+            }
+            finally {
+                if (!cancelled)
+                    setIsLoaded(true);
+            }
+        };
+        // Cambiando documento/tipo documento il filtro non ha più senso: si riparte dall'anteprima
+        setFilter('');
+        setShowAll(false);
+        loadAsync();
+        return () => { cancelled = true; };
+    }, [dtd?.id, dcmt?.TID, dcmt?.DID, reloadToken]);
+    // Testo su cui cerca il filtro: valore visualizzato del metadato (per le liste dati il nome dell'item)
+    const getSearchText = (item) => {
+        if (item.value === undefined || item.value === null || item.value === '')
+            return '';
+        if (item.dataListID > 0) {
+            const dataListItem = getDataListItem(item.dataListID, item.value);
+            return dataListItem ? `${dataListItem.name ?? ''} ${dataListItem.value ?? ''}` : String(item.value);
+        }
+        return formatScalarValue(item.value, item.dataType, item.format, item.formatCulture);
+    };
+    // Testo copiato negli appunti: quello che l'utente vede nella card (per le liste dati il nome dell'item)
+    const getCopyText = (item) => {
+        if (item.value === undefined || item.value === null || item.value === '')
+            return '';
+        if (item.dataListID > 0) {
+            const dataListItem = getDataListItem(item.dataListID, item.value);
+            return dataListItem?.name ?? String(item.value);
+        }
+        return formatScalarValue(item.value, item.dataType, item.format, item.formatCulture);
+    };
+    // Ricerca case insensitive su nome e valore del metadato
+    const query = filter.trim().toLowerCase();
+    const filteredRows = useMemo(() => {
+        if (!query)
+            return rows;
+        return rows.filter(item => item.caption.toLowerCase().includes(query) || getSearchText(item).toLowerCase().includes(query));
+    }, [rows, query]);
+    const renderCard = (item) => {
+        const hasValue = item.value !== undefined && item.value !== null && item.value !== '';
+        const displayNode = item.dataListID > 0 && hasValue ? renderDataListCell(item.value, item.dataListID, item.viewMode) : (hasValue ? formatScalarValue(item.value, item.dataType, item.format, item.formatCulture) : '');
+        return (_jsx(MetadataCard, { caption: item.caption, copyText: getCopyText(item), children: hasValue
+                ? (
+                // Tooltip con il valore esteso (utile quando è troncato)
+                _jsx(TMTooltip, { content: displayNode, parentStyle: { flex: 1, minWidth: 0 }, childStyle: { maxWidth: '100%', minWidth: 0 }, children: _jsx("span", { style: { ...styles.value, minWidth: 0 }, children: displayNode }) }))
+                // Segnaposto per i metadati vuoti: la card mantiene la stessa altezza
+                : _jsx("span", { style: { ...styles.value, ...styles.emptyValue }, children: "\u2014" }) }, item.mid));
+    };
+    // Ricerca dei metadati: solo nella vista ingrandita e solo quando sono troppi per essere trovati a vista
+    const renderSearchBar = () => (_jsxs("div", { style: styles.searchBar, children: [_jsxs("div", { style: styles.searchBox, children: [_jsx(IconSearch, { fontSize: 13, style: styles.searchIcon }), _jsx("input", { type: 'text', value: filter, placeholder: `${SDKUI_Localizator.SearchAction}...`, style: styles.searchInput, onChange: (e) => setFilter(e.target.value), 
+                        // Esc svuota il filtro senza propagare la chiusura del modale
+                        onKeyDown: (e) => { if (e.key === 'Escape' && filter !== '') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setFilter('');
+                        } }, onFocus: (e) => Object.assign(e.currentTarget.parentElement?.style ?? {}, { borderColor: TMColors.primary, boxShadow: '0 0 0 2px rgba(37, 89, 165, 0.14)' }), onBlur: (e) => Object.assign(e.currentTarget.parentElement?.style ?? {}, { borderColor: TMColors.card_background, boxShadow: 'none' }) }), filter !== '' && (_jsx("button", { type: 'button', style: styles.searchClear, title: SDKUI_Localizator.Clear, "aria-label": SDKUI_Localizator.Clear, onClick: () => setFilter(''), ...hoverStyle({ background: TMColors.primary_container, color: TMColors.primary }, { background: 'transparent', color: TMColors.label_normal }), children: _jsx(IconClearButton, { fontSize: 13 }) }))] }), _jsxs("span", { style: styles.searchCount, children: [filteredRows.length, "/", rows.length] })] }));
+    // La ricerca sta solo nella vista ingrandita: in linea lo spazio è poco e l'elenco è limitato
+    // all'anteprima, con il pulsante per aprirlo tutto
+    const hasSearch = isExpandedView && rows.length > PREVIEW_COUNT;
+    const isCapped = !isExpandedView && !showAll && filteredRows.length > PREVIEW_COUNT;
+    const canCollapse = !isExpandedView && showAll && filteredRows.length > PREVIEW_COUNT;
+    const visibleRows = isCapped ? filteredRows.slice(0, PREVIEW_COUNT) : filteredRows;
+    const hiddenCount = filteredRows.length - visibleRows.length;
+    return (_jsxs("div", { style: { ...styles.wrapper, ...(isExpandedView ? { borderTop: 'none' } : {}) }, children: [hasSearch && renderSearchBar(), _jsx("div", { style: { ...styles.body, ...(isExpandedView ? { padding: '18px 14px 14px' } : {}) }, children: visibleRows.length > 0
+                    ? visibleRows.map(renderCard)
+                    : (isLoaded && _jsx("span", { style: styles.placeholder, children: SDKUI_Localizator.NoDataToDisplay })) }), (isCapped || canCollapse) && (_jsx("div", { style: styles.footer, children: _jsxs("button", { type: 'button', style: styles.showAllBtn, onClick: () => setShowAll(!showAll), ...hoverStyle({ background: TMColors.primary, borderColor: TMColors.primary, color: '#ffffff', boxShadow: '0 2px 6px rgba(37, 89, 165, 0.25)' }, { background: TMColors.primary_container, borderColor: TMColors.primary_container, color: TMColors.primary, boxShadow: 'none' }), children: [isCapped ? `${SDKUI_Localizator.ShowAll} (+${hiddenCount})` : SDKUI_Localizator.Collapse, _jsx(IconChevronDown, { fontSize: 13, style: { transform: isCapped ? 'none' : 'rotate(180deg)', transition: 'transform 0.2s ease' } })] }) }))] }));
+};
+export default TMMasterInfoFields;

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

@@ -0,0 +1,40 @@
+import { DcmtTypeDescriptor, HomeBlogPost, ObjectRef, TaskDescriptor } from "@topconsultnpm/sdk-ts";
+import { DcmtInfo, IGraphometricManagerProp, TaskContext } from "../../../ts";
+import { IntesiCertificateData } from "../../../helper";
+interface TMMultiMasterDetailDcmtsFormProps {
+    /** Tipo documento del master (per individuare le relazioni di dettaglio) */
+    dtd: DcmtTypeDescriptor;
+    /** Documento master da cui parte l'archiviazione dei dettagli */
+    masterDcmt: DcmtInfo;
+    /** Funzione per la chiusura del modale */
+    onClose: () => void;
+    allTasks?: Array<TaskDescriptor>;
+    getAllTasks?: () => Promise<void>;
+    deleteTaskByIdsCallback?: (deletedTaskIds: Array<number>) => Promise<void>;
+    addTaskCallback?: (task: TaskDescriptor) => Promise<void>;
+    editTaskCallback?: (task: TaskDescriptor) => Promise<void>;
+    handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
+    handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
+    showDcmtFormSidebar?: boolean;
+    showTodoDcmtForm?: boolean;
+    openFileUploaderPdfEditor?: (fromDTD?: DcmtTypeDescriptor, file?: File | null, handleFile?: (file: File) => void) => void;
+    graphometricManager?: IGraphometricManagerProp;
+    editPdfForm?: boolean;
+    openS4TViewer?: boolean;
+    showToppyDraggableHelpCenter?: boolean;
+    toppyHelpCenterUsePortal?: boolean;
+    fetchRemoteCertificates?: (email: string) => Promise<IntesiCertificateData[]>;
+    onOpenS4TViewerRequest?: (dcmtInfo: Array<DcmtInfo>, refreshDocumentPreview?: () => Promise<void>) => void;
+    onOpenPdfEditorRequest?: (dcmtInfo: Array<DcmtInfo>, refreshDocumentPreview?: () => Promise<void>) => void;
+    onReferenceClick?: (ref: ObjectRef) => void;
+    onTaskCreateRequest?: (taskContext: TaskContext, onTaskCreated?: (task?: TaskDescriptor) => void) => void;
+    onRefreshAfterAddDcmtToFavs?: () => void;
+    onFileOpened?: (blob: File | undefined) => void;
+    passToArchiveCallback?: (outputMids: Array<{
+        mid: number;
+        value: string;
+    }>, tid?: number) => void;
+    openWGsCopyMoveForm?: (mode: "copyToWgDraft" | "copyToWgArchivedDoc", dcmtTypeDescriptor: DcmtTypeDescriptor, documents: Array<DcmtInfo>) => void;
+}
+declare const TMMultiMasterDetailDcmtsForm: (props: TMMultiMasterDetailDcmtsFormProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TMMultiMasterDetailDcmtsForm;