@topconsultnpm/sdkui-react 6.21.0-dev3.9 → 6.21.0-dev4.10

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

@@ -0,0 +1,268 @@
+import { DcmtTypeListCacheService, LayoutModes, MetadataDataTypes, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { Globalization, isConvertibleToPdfExt, searchResultToMetadataValues } from '../../../helper';
+import { isPdfExt, MIN_PDF_FOR_MERGE } from './copyAndMergeDcmtsShared';
+/** Documento di soli metadati: FILEEXT null/undefined oppure FILECOUNT 0 (verrà convertito frontend) */
+export const isMetadataOnlyDcmt = (fileExt, fileCount) => {
+    if (!fileExt)
+        return true;
+    return Number(fileCount) === 0;
+};
+/**
+ * Calcola tutte le statistiche di selezione necessarie per il merge PDF.
+ * Restituisce info su file convertibili, non-PDF e conteggio file unibili.
+ *
+ * @param selectedDcmtInfos - Lista dei DcmtInfo selezionati (usata se showTMRelationViewer è false)
+ * @param selectedItemsFull - Lista completa con FILEEXT e FILECOUNT per check documenti di soli metadati
+ * @param selectedItemsRelationViewer - Lista degli IRelatedDcmt selezionati nel RelationViewer
+ * @param showTMRelationViewer - Se true, usa selectedItemsRelationViewer, altrimenti selectedDcmtInfos
+ */
+export const getMergePdfSelectionStats = (selectedDcmtInfos, selectedItemsFull, selectedItemsRelationViewer, showTMRelationViewer) => {
+    // Mappa per lookup veloce di FILECOUNT da selectedItemsFull (usato solo per isMetadataOnly)
+    const fileCountMap = new Map(selectedItemsFull.map(d => [`${d.TID}_${d.DID}`, d.FILECOUNT]));
+    // Pre-calcolo delle informazioni sui documenti selezionati
+    const docs = showTMRelationViewer
+        ? selectedItemsRelationViewer
+            .filter(i => i.isDcmt)
+            .map(i => {
+            const ext = i.fileExt ?? undefined;
+            return {
+                key: `${i.tid}_${i.did}`,
+                ext,
+                isPdf: isPdfExt(ext),
+                isConvertible: isConvertibleToPdfExt(ext),
+                isMetadataOnly: isMetadataOnlyDcmt(ext, null)
+            };
+        })
+        : selectedDcmtInfos.map(d => {
+            const ext = d.FILEEXT ?? undefined;
+            const key = `${d.TID}_${d.DID}`;
+            const fileCount = fileCountMap.get(key);
+            return {
+                key,
+                ext,
+                isPdf: isPdfExt(ext),
+                isConvertible: isConvertibleToPdfExt(ext),
+                isMetadataOnly: isMetadataOnlyDcmt(ext, fileCount)
+            };
+        });
+    // Elementi convertibili: file con estensione convertibile (esclusi documenti di soli metadati)
+    const convertibleSelectedItems = docs
+        .filter(i => i.isConvertible && !i.isMetadataOnly)
+        .map(i => ({ key: i.key, ext: i.ext }));
+    // Elementi NON PDF e NON convertibili (esclusi documenti di soli metadati)
+    const nonPdfSelectedItems = docs
+        .filter(i => !i.isPdf && !i.isConvertible && !i.isMetadataOnly)
+        .map(i => ({ key: i.key, ext: i.ext }));
+    // Documenti di soli metadati (senza file allegato)
+    const metadataOnlySelectedItems = docs
+        .filter(i => i.isMetadataOnly)
+        .map(i => ({ key: i.key, ext: i.ext }));
+    // Conteggio file unibili: PDF nativi + convertibili + documenti di soli metadati
+    const mergeableSelectedCount = docs
+        .filter(i => i.isPdf || i.isConvertible || i.isMetadataOnly).length;
+    return {
+        convertibleSelectedItems,
+        hasConvertibleSelected: convertibleSelectedItems.length > 0,
+        nonPdfSelectedItems,
+        hasNonPdfSelected: nonPdfSelectedItems.length > 0,
+        metadataOnlySelectedItems,
+        hasMetadataOnlySelected: metadataOnlySelectedItems.length > 0,
+        mergeableSelectedCount,
+        hasEnoughPdfForMerge: mergeableSelectedCount >= MIN_PDF_FOR_MERGE,
+    };
+};
+// LAZY LOADING pdf-lib
+let pdfLibModule = null;
+const loadPdfLib = async () => {
+    if (!pdfLibModule) {
+        pdfLibModule = await import('pdf-lib');
+    }
+    return pdfLibModule;
+};
+// HELPER FUNCTIONS
+/** Ottiene label localizzata del metadato (customName > nameLoc > name) */
+const getMetadataLabel = (md, customName) => {
+    if (customName)
+        return customName;
+    if (!md)
+        return '';
+    return md.nameLoc || md.name || '';
+};
+/** Formatta valore metadato per PDF (null/undefined -> stringa vuota, datetime -> dd/MM/yyyy HH:mm) */
+const formatMetadataValueForPdf = (value, md) => {
+    if (value === undefined || value === null)
+        return '';
+    // Se il metadato è di tipo DateTime, formatta in modo leggibile usando Globalization
+    if (md?.dataType === MetadataDataTypes.DateTime) {
+        return Globalization.getDateTimeDisplayValueCompact(value, undefined, md.format?.format);
+    }
+    return value.toString().trim();
+};
+// ============================================================================
+// CREAZIONE PDF DA METADATI DOCUMENTO
+// ============================================================================
+/** Crea PDF con metadati documento (header + lista label=valore). Supporta wrapping e paginazione.
+ * @param dcmtInfo - Informazioni del documento
+ * @param showSystemMetadata - Se true, include i metadati di sistema (mid < 100). Default: false
+ */
+export const createMetadataPdfFromDocument = async (dcmtInfo, showSystemMetadata = false) => {
+    // Configurazione ottimale per PDF A4
+    const pageWidth = 595; // A4 width in points
+    const pageHeight = 842; // A4 height in points
+    const margin = 50; // Margine confortevole
+    const titleFontSize = 14; // Titolo leggibile ma non troppo grande
+    const contentFontSize = 10; // Font contenuto ottimale per leggibilità
+    try {
+        // Recupera i metadati del documento
+        const metadata = await SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(dcmtInfo.TID, dcmtInfo.DID, true);
+        if (!metadata) {
+            console.warn('createMetadataPdfFromDocument: impossibile recuperare i metadati');
+            return null;
+        }
+        const dtdResult = metadata.dtdResult;
+        const rows = dtdResult?.rows?.[0] ?? [];
+        const mids = metadata.selectMIDs;
+        // Recupera il tipo documento con metadati
+        const dtdWithMetadata = await DcmtTypeListCacheService.GetWithNotGrantedAsync(dcmtInfo.TID, dcmtInfo.DID, metadata);
+        if (!dtdWithMetadata) {
+            console.warn('createMetadataPdfFromDocument: impossibile recuperare il tipo documento');
+            return null;
+        }
+        const mdList = dtdWithMetadata.metadata ?? [];
+        // Converte i metadati in formato leggibile
+        const metadataList = searchResultToMetadataValues(dcmtInfo.TID, dtdResult, rows, mids, mdList, LayoutModes.Update);
+        // Ottiene il nome del tipo documento (localizzato se abilitato)
+        const dcmtTypeName = dtdWithMetadata.nameLoc || dtdWithMetadata.name || 'Documento';
+        // Prepara la lista di metadati chiave-valore
+        const metadataKeyValues = metadataList
+            .filter(mvd => mvd.md && mvd.mid && mvd.mid > 0) // Filtra solo metadati validi
+            .filter(mvd => showSystemMetadata || (mvd.mid && mvd.mid >= 100)) // Filtra metadati di sistema se showSystemMetadata è false
+            .map(mvd => ({
+            label: getMetadataLabel(mvd.md, mvd.customName),
+            value: formatMetadataValueForPdf(mvd.value, mvd.md)
+        }))
+            .filter(kv => kv.label.length > 0); // Rimuovi metadati senza label
+        // Carica pdf-lib on-demand
+        const { PDFDocument, StandardFonts, rgb } = await loadPdfLib();
+        // Crea il documento PDF
+        const pdfDoc = await PDFDocument.create();
+        const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
+        const helveticaBoldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
+        // Calcola dimensioni
+        const contentWidth = pageWidth - (margin * 2);
+        const lineHeight = contentFontSize + 5;
+        const titleLineHeight = titleFontSize + 6;
+        // Funzione per aggiungere una nuova pagina
+        const addPage = () => {
+            const page = pdfDoc.addPage([pageWidth, pageHeight]);
+            return { page, yPosition: pageHeight - margin };
+        };
+        // Funzione per calcolare la larghezza del testo
+        const getTextWidth = (text, font, size) => {
+            try {
+                return font.widthOfTextAtSize(text, size);
+            }
+            catch {
+                // Fallback per caratteri non supportati
+                return text.length * size * 0.5;
+            }
+        };
+        // Funzione per spezzare il testo in righe che entrano nella larghezza disponibile
+        const wrapText = (text, font, fontSize, maxWidth) => {
+            const lines = [];
+            const words = text.split(' ');
+            let currentLine = '';
+            for (const word of words) {
+                const testLine = currentLine ? `${currentLine} ${word}` : word;
+                const testWidth = getTextWidth(testLine, font, fontSize);
+                if (testWidth > maxWidth && currentLine) {
+                    lines.push(currentLine);
+                    currentLine = word;
+                }
+                else {
+                    currentLine = testLine;
+                }
+            }
+            if (currentLine) {
+                lines.push(currentLine);
+            }
+            // Se una singola parola è troppo lunga, spezzala in più righe (carattere per carattere)
+            const result = [];
+            for (const line of lines) {
+                if (getTextWidth(line, font, fontSize) <= maxWidth) {
+                    result.push(line);
+                }
+                else {
+                    // Spezza la parola/linea troppo lunga carattere per carattere
+                    let chunk = '';
+                    for (const char of line) {
+                        const testChunk = chunk + char;
+                        if (getTextWidth(testChunk, font, fontSize) > maxWidth && chunk) {
+                            result.push(chunk);
+                            chunk = char;
+                        }
+                        else {
+                            chunk = testChunk;
+                        }
+                    }
+                    if (chunk) {
+                        result.push(chunk);
+                    }
+                }
+            }
+            return result;
+        };
+        // Sanitizza testo per Helvetica (solo ASCII)
+        const sanitize = (text) => text.replace(/[^\x20-\x7E]/g, '_');
+        let { page, yPosition } = addPage();
+        // Header (titolo centrato)
+        const titleText = sanitize(`${dcmtTypeName}`);
+        const titleWidth = getTextWidth(titleText, helveticaBoldFont, titleFontSize);
+        const titleX = Math.max(margin, margin + (contentWidth - titleWidth) / 2);
+        page.drawText(titleText, { x: titleX, y: yPosition, size: titleFontSize, font: helveticaBoldFont, color: rgb(0, 0, 0) });
+        yPosition -= titleLineHeight + 8;
+        // Metadati (label in grassetto, valore normale)
+        for (const kv of metadataKeyValues) {
+            const labelText = sanitize(kv.label) + ': ';
+            const labelWidth = getTextWidth(labelText, helveticaBoldFont, contentFontSize);
+            const valueMaxWidth = contentWidth - labelWidth;
+            const continuationIndent = labelWidth; // Indentazione per righe successive
+            // Wrappa il valore
+            const valueText = sanitize(kv.value);
+            const valueLines = wrapText(valueText, helveticaFont, contentFontSize, valueMaxWidth);
+            // Prima riga: label (bold) + primo pezzo di valore
+            if (yPosition < margin + lineHeight) {
+                ({ page, yPosition } = addPage());
+            }
+            page.drawText(labelText, { x: margin, y: yPosition, size: contentFontSize, font: helveticaBoldFont, color: rgb(0, 0, 0) });
+            if (valueLines.length > 0) {
+                page.drawText(valueLines[0], { x: margin + labelWidth, y: yPosition, size: contentFontSize, font: helveticaFont, color: rgb(0, 0, 0) });
+            }
+            yPosition -= lineHeight;
+            // Righe successive del valore (indentate)
+            for (let i = 1; i < valueLines.length; i++) {
+                if (yPosition < margin + lineHeight) {
+                    ({ page, yPosition } = addPage());
+                }
+                page.drawText(valueLines[i], { x: margin + continuationIndent, y: yPosition, size: contentFontSize, font: helveticaFont, color: rgb(0, 0, 0) });
+                yPosition -= lineHeight;
+            }
+        }
+        // Salva il PDF
+        const pdfBytes = await pdfDoc.save();
+        // Converte in Blob e File
+        const pdfBuffer = pdfBytes.buffer.slice(pdfBytes.byteOffset, pdfBytes.byteOffset + pdfBytes.byteLength);
+        const blob = new Blob([pdfBuffer], { type: 'application/pdf' });
+        const finalFileName = `${dcmtTypeName}_${dcmtInfo.DID}.pdf`;
+        const file = new File([blob], finalFileName, { type: 'application/pdf' });
+        return {
+            file,
+            blob,
+            bytes: pdfBytes
+        };
+    }
+    catch (error) {
+        console.error('createMetadataPdfFromDocument: errore durante la creazione del PDF', error);
+        return null;
+    }
+};

package/lib/components/features/search/TMMetadataOutputForm.d.ts

@@ -0,0 +1,17 @@
+import { MetadataDescriptor, QueryDescriptor, SelectItem } from "@topconsultnpm/sdk-ts";
+interface TMMetadataOutputFormProps {
+    /** QueryDescriptor da cui estrarre i metadati disponibili */
+    qd?: QueryDescriptor;
+    /** Lista di SelectItem attualmente selezionati */
+    selectedSelectItems?: SelectItem[];
+    /** Consente di visualizzare i metadati di sistema (es. MID < 150) */
+    allowSysMetadata?: boolean;
+    /** Funzione predicato per filtrare i metadati (es. solo quelli con permesso canView) */
+    filterMetadata?: (value: MetadataDescriptor, index: number, array: MetadataDescriptor[]) => unknown;
+    /** Callback chiamata alla chiusura del form */
+    onClose: () => void;
+    /** Callback chiamata quando l'utente conferma la selezione dei SelectItem */
+    onChoose?: (selectItems: SelectItem[] | undefined) => void;
+}
+declare const TMMetadataOutputForm: (props: TMMetadataOutputFormProps) => import("react/jsx-runtime").JSX.Element;
+export default TMMetadataOutputForm;

package/lib/components/features/search/TMMetadataOutputForm.js

@@ -0,0 +1,225 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { SDK_Localizator, SelectItem, SelectItemVisibilities } from "@topconsultnpm/sdk-ts";
+import { IconAddCircleOutline, IconApply, IconClear, IconDelete, IconDraggabledots, IconUndo, SDKUI_Localizator } from "../../../helper";
+import TMToppyMessage from "../../../helper/TMToppyMessage";
+import { ButtonNames, TMMessageBoxManager } from "../../base/TMPopUp";
+import { TMColors } from "../../../utils/theme";
+import { StyledToolbarForm } from "../../base/Styled";
+import TMButton from "../../base/TMButton";
+import TMModal from "../../base/TMModal";
+import { TMMetadataChooserForm } from "../../choosers/TMMetadataChooser";
+import { TMMetadataIcon } from "../../viewers/TMMidViewer";
+import { loadMetadataFromQd, removeDuplicatesByTidMid, areArraysEqual } from "./metadataFormHelper";
+const TMMetadataOutputForm = (props) => {
+    const { qd, selectedSelectItems, allowSysMetadata = true, filterMetadata, onClose, onChoose } = props;
+    // =============================================================================
+    // STATE
+    // =============================================================================
+    // Stato iniziale dei SelectItem (per confronto isModified)
+    const initialSelectItemsRef = useRef((selectedSelectItems ?? []).map(item => {
+        const newItem = new SelectItem();
+        newItem.tid = item.tid;
+        newItem.mid = item.mid;
+        newItem.visibility = item.visibility ?? SelectItemVisibilities.Visible;
+        return newItem;
+    }));
+    // Lista dei SelectItem correnti (inizializzata da selectedSelectItems)
+    const [selectItems, setSelectItems] = useState(() => {
+        // Clona i SelectItem iniziali per evitare mutazioni
+        return (selectedSelectItems ?? []).map(item => {
+            const newItem = new SelectItem();
+            newItem.tid = item.tid;
+            newItem.mid = item.mid;
+            newItem.visibility = item.visibility ?? SelectItemVisibilities.Visible;
+            return newItem;
+        });
+    });
+    // Calcola se ci sono modifiche rispetto allo stato iniziale
+    const isModified = useMemo(() => {
+        return !areArraysEqual(selectItems, initialSelectItemsRef.current);
+    }, [selectItems]);
+    // Lista "piatta" di tutti i metadati estratti dai DTD, con chiave univoca
+    const [metadataList, setMetadataList] = useState([]);
+    // Flag di caricamento
+    const [isLoading, setIsLoading] = useState(true);
+    // Flag per mostrare il TMMetadataChooserForm
+    const [showMetadataChooser, setShowMetadataChooser] = useState(false);
+    // Item in fase di drag
+    const [draggingItem, setDraggingItem] = useState(undefined);
+    // =============================================================================
+    // MEMOIZZAZIONI per evitare re-render del TMMetadataChooserForm
+    // =============================================================================
+    // Lista di TID_MID già selezionati (per escluderli dal chooser)
+    const selectedIDs = useMemo(() => selectItems.map(si => ({ tid: si.tid, mid: si.mid })), [selectItems]);
+    // Callback per chiudere il chooser
+    const handleCloseChooser = useCallback(() => {
+        setShowMetadataChooser(false);
+    }, []);
+    // =============================================================================
+    // EFFECT: Carica i metadati al mount
+    // =============================================================================
+    useEffect(() => {
+        const load = async () => {
+            setIsLoading(true);
+            try {
+                const { metadata } = await loadMetadataFromQd(qd, filterMetadata);
+                setMetadataList(metadata);
+            }
+            catch (error) {
+                console.error("Errore nel caricamento dei metadati:", error);
+                setMetadataList([]);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        load();
+    }, [qd, filterMetadata]);
+    // =============================================================================
+    // HELPER: Trova il MetadataDescriptor per un SelectItem
+    // =============================================================================
+    const getMetadataForSelectItem = useCallback((item) => {
+        return metadataList.find(md => md.customData1 === item.tid && md.id === item.mid);
+    }, [metadataList]);
+    // =============================================================================
+    // HANDLER: Conferma la scelta dal chooser (sincronizza la lista completa)
+    // =============================================================================
+    const handleChooseFromChooser = useCallback((tid_mids) => {
+        // Se la lista è vuota o undefined, rimuovi tutti
+        if (!tid_mids || tid_mids.length === 0) {
+            setSelectItems([]);
+            setShowMetadataChooser(false);
+            return;
+        }
+        setSelectItems(prev => {
+            // Filtra quelli esistenti che sono ancora selezionati (mantenendo ordine)
+            const kept = prev.filter(si => tid_mids.some(tm => tm.tid === si.tid && tm.mid === si.mid));
+            // Trova i nuovi da aggiungere
+            const newItems = [];
+            for (const tm of tid_mids) {
+                const exists = prev.some(si => si.tid === tm.tid && si.mid === tm.mid);
+                if (!exists) {
+                    const newItem = new SelectItem();
+                    newItem.tid = tm.tid;
+                    newItem.mid = tm.mid;
+                    newItem.visibility = SelectItemVisibilities.Visible;
+                    newItems.push(newItem);
+                }
+            }
+            return removeDuplicatesByTidMid([...kept, ...newItems]);
+        });
+        setShowMetadataChooser(false);
+    }, []);
+    // =============================================================================
+    // HANDLER: Rimuove un metadato dall'output
+    // =============================================================================
+    const handleRemoveSelectItem = useCallback((index) => {
+        setSelectItems(prev => prev.filter((_, i) => i !== index));
+    }, []);
+    // =============================================================================
+    // DRAG & DROP HANDLERS
+    // =============================================================================
+    const handleDragStart = useCallback((e, item) => {
+        // Previeni il drag se il target è l'icona elimina
+        const target = e.target;
+        if (target.closest('[data-no-drag="true"]')) {
+            e.preventDefault();
+            return;
+        }
+        setDraggingItem(item);
+        e.dataTransfer.setData('text/plain', '');
+        e.dataTransfer.effectAllowed = 'move';
+    }, []);
+    const handleDragEnd = useCallback(() => {
+        setDraggingItem(undefined);
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+    }, []);
+    const handleDrop = useCallback((e, targetItem) => {
+        e.preventDefault();
+        if (!draggingItem)
+            return;
+        const currentIndex = selectItems.indexOf(draggingItem);
+        const targetIndex = selectItems.indexOf(targetItem);
+        if (currentIndex === -1 || targetIndex === -1 || currentIndex === targetIndex) {
+            setDraggingItem(undefined);
+            return;
+        }
+        const listCopy = [...selectItems];
+        listCopy.splice(currentIndex, 1);
+        listCopy.splice(targetIndex, 0, draggingItem);
+        setSelectItems(listCopy);
+        setDraggingItem(undefined);
+    }, [draggingItem, selectItems]);
+    // =============================================================================
+    // HANDLER: Rollback allo stato iniziale
+    // =============================================================================
+    const handleRollback = useCallback(() => {
+        setSelectItems(initialSelectItemsRef.current.map(item => {
+            const newItem = new SelectItem();
+            newItem.tid = item.tid;
+            newItem.mid = item.mid;
+            newItem.visibility = item.visibility;
+            return newItem;
+        }));
+    }, []);
+    // =============================================================================
+    // HANDLER: Chiusura con conferma se modificato
+    // =============================================================================
+    const confirmCloseContainerId = "TMMetadataOutputFormConfirmClose";
+    const handleClose = useCallback(() => {
+        if (!isModified) {
+            onClose();
+            return;
+        }
+        TMMessageBoxManager.show({
+            parentId: confirmCloseContainerId,
+            message: SDKUI_Localizator.ConfirmOnCancel,
+            buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: (buttonClicked) => {
+                if (buttonClicked === ButtonNames.YES) {
+                    onClose();
+                }
+            }
+        });
+    }, [isModified, onClose]);
+    // =============================================================================
+    // HANDLER: Conferma la selezione
+    // =============================================================================
+    const handleConfirm = useCallback(() => {
+        onChoose?.(selectItems.length > 0 ? selectItems : undefined);
+        onClose();
+    }, [selectItems, onChoose, onClose]);
+    // =============================================================================
+    // RENDER
+    // =============================================================================
+    return (_jsxs(_Fragment, { children: [_jsxs(TMModal, { title: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QuerySelect}${selectItems.length > 0 ? ` (${selectItems.length})` : ''}`, width: "600px", height: "500px", onClose: handleClose, hidePopup: false, askClosingConfirm: isModified, children: [_jsx("div", { id: confirmCloseContainerId }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', gap: '10px' }, children: [_jsxs(StyledToolbarForm, { children: [_jsx(TMButton, { caption: SDKUI_Localizator.Confirm, icon: _jsx(IconApply, {}), btnStyle: "toolbar", color: "success", disabled: !isModified, onClick: handleConfirm }), _jsx(TMButton, { caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, {}), btnStyle: "toolbar", color: "tertiary", disabled: !isModified, onClick: handleRollback }), _jsx(TMButton, { caption: SDKUI_Localizator.Add, icon: _jsx(IconAddCircleOutline, {}), btnStyle: "toolbar", onClick: () => setShowMetadataChooser(true) }), _jsx(TMButton, { caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), btnStyle: "toolbar", disabled: selectItems.length === 0, onClick: () => setSelectItems([]) })] }), _jsxs("div", { style: {
+                                    flex: 1,
+                                    overflow: 'auto',
+                                    border: `1px solid ${TMColors.border_normal}`,
+                                    borderRadius: '4px',
+                                    padding: '5px'
+                                }, children: [isLoading && _jsxs("p", { style: { textAlign: 'center', padding: '20px' }, children: [SDKUI_Localizator.Loading, "..."] }), !isLoading && selectItems.length === 0 && (_jsx(TMToppyMessage, { message: SDKUI_Localizator.NoOutputMetadata, titleTooltip: SDKUI_Localizator.NoOutputMetadata })), !isLoading && selectItems.length > 0 && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: selectItems.map((item, index) => {
+                                            const md = getMetadataForSelectItem(item);
+                                            const isDragging = draggingItem === item;
+                                            return (_jsxs("div", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDrop: (e) => handleDrop(e, item), style: {
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: '6px',
+                                                    padding: '4px 8px',
+                                                    backgroundColor: isDragging ? TMColors.primary_container : TMColors.default_background,
+                                                    borderRadius: '3px',
+                                                    border: `1px solid ${isDragging ? TMColors.primaryColor : TMColors.border_normal}`,
+                                                    minHeight: '32px',
+                                                    cursor: 'grab',
+                                                    transition: 'all 0.2s ease',
+                                                    transform: isDragging ? 'scale(1.02)' : 'scale(1)',
+                                                    boxShadow: isDragging ? '0 4px 12px rgba(0,0,0,0.15)' : 'none',
+                                                    opacity: isDragging ? 0.9 : 1,
+                                                }, children: [_jsx("div", { style: { display: 'flex', cursor: 'grab' }, children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), _jsx(TMMetadataIcon, { tid: item.tid ?? 0, md: md }), _jsx("span", { style: { flex: 1, fontSize: '13px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: md?.name ?? `MID: ${item.mid}` }), _jsx("div", { "data-no-drag": "true", onMouseDown: (e) => e.stopPropagation(), children: _jsx(TMButton, { caption: SDKUI_Localizator.Remove, icon: _jsx(IconDelete, { color: TMColors.error }), btnStyle: "icon", onClick: () => handleRemoveSelectItem(index) }) })] }, `${item.tid}_${item.mid}_${index}`));
+                                        }) }))] })] })] }), showMetadataChooser && (_jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: "600px", width: "700px", allowSysMetadata: allowSysMetadata, filterMetadata: filterMetadata, qd: qd, selectedIDs: selectedIDs, onClose: handleCloseChooser, onChoose: handleChooseFromChooser }))] }));
+};
+export default TMMetadataOutputForm;

package/lib/components/features/search/TMMetadataSorterForm.d.ts

@@ -0,0 +1,17 @@
+import { MetadataDescriptor, OrderByItem, QueryDescriptor } from "@topconsultnpm/sdk-ts";
+interface TMMetadataSorterFormProps {
+    /** QueryDescriptor da cui estrarre i metadati disponibili */
+    qd?: QueryDescriptor;
+    /** Lista di OrderByItem attualmente selezionati */
+    selectedOrderByItems?: OrderByItem[];
+    /** Consente di visualizzare i metadati di sistema (es. MID < 150) */
+    allowSysMetadata?: boolean;
+    /** Funzione predicato per filtrare i metadati (es. solo quelli con permesso canView) */
+    filterMetadata?: (value: MetadataDescriptor, index: number, array: MetadataDescriptor[]) => unknown;
+    /** Callback chiamata alla chiusura del form */
+    onClose: () => void;
+    /** Callback chiamata quando l'utente conferma la selezione degli OrderByItem */
+    onChoose?: (orderByItems: OrderByItem[] | undefined) => void;
+}
+declare const TMMetadataSorterForm: (props: TMMetadataSorterFormProps) => import("react/jsx-runtime").JSX.Element;
+export default TMMetadataSorterForm;