@topconsultnpm/sdkui-react 6.22.0-dev2.3 → 6.22.0-dev2.30

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

@@ -0,0 +1,363 @@
+import React from 'react';
+import { DataListViewModes, DcmtTypeDescriptor, MetadataDescriptor, RelationDescriptor } from '@topconsultnpm/sdk-ts';
+import { DataGridTypes, IColumnProps } from 'devextreme-react/data-grid';
+import { TMPanelDimensionsMap } from '../../layout/panelManager/types';
+import { DcmtInfo, MetadataValueDescriptorEx } from '../../../ts';
+/** Relazione di dettaglio con il relativo tipo documento */
+export interface DetailRelationItem {
+    relation: RelationDescriptor;
+    detailDtd: DcmtTypeDescriptor | undefined;
+}
+export interface MultiDetailStep {
+    phase: number;
+    label: React.ReactNode;
+}
+export type AccordionSection = 'masterInfo' | 'archivedDetails' | 'archiveList';
+/**
+ * Stato del pannello che ospita una sezione. Lo espone il panel manager, il cui contesto è leggibile
+ * solo dentro l'albero del provider: da qui passa alle testate (vedi TMSummarySectionSlot)
+ */
+export type SectionPanelState = {
+    isMaximized: boolean;
+    canMaximize: boolean;
+    canCollapse: boolean;
+    toggleMaximize: () => void;
+};
+/** Valore di un metadato letto da un documento: una cella del risultato di ricerca */
+export type MetadataScalarValue = string | number | boolean | Date | null | undefined;
+/**
+ * Riga del riepilogo: oltre ai campi di servizio (prefisso `__`) porta i valori dei metadati
+ * indicizzati per mid (`String(mid)`), come richiesto dal dataField delle colonne della griglia
+ */
+export interface ArchiveRow {
+    /** Chiave della riga in griglia */
+    id: number;
+    /** Tipo documento di dettaglio a cui appartiene la riga */
+    __tid: number;
+    /** Valori compilati nel form, nel formato richiesto dall'archiviazione */
+    __values: Array<MetadataValueDescriptorEx>;
+    /** File da archiviare, se il tipo documento lo prevede */
+    __file?: File;
+    /** Valore del metadato mostrato in colonna, indicizzato per mid */
+    [mid: string]: string | number | Array<MetadataValueDescriptorEx> | File | undefined;
+}
+/**
+ * Cella nel render delle colonne del riepilogo: i valori dei metadati arrivano dal form come
+ * stringhe, quindi il `value` generico di DevExtreme si restringe
+ */
+export type ArchiveRowCell = Omit<DataGridTypes.ColumnCellTemplateData<ArchiveRow, number>, 'value'> & {
+    readonly value?: string | number;
+};
+/**
+ * Modifiche di una riga in arrivo dalla griglia (mid -> nuovo valore): in modifica diretta ci sono
+ * i metadati testuali e numerici (vedi isInlineEditableMetadata), quindi stringhe e numeri,
+ * e l'editor svuotato restituisce null
+ */
+export type ArchiveRowChanges = Record<string, string | number | null | undefined>;
+/** Aggiornamento di una riga della griglia, con le sole modifiche possibili in linea */
+export type ArchiveRowUpdatingEvent = Omit<DataGridTypes.RowUpdatingEvent<ArchiveRow, number>, 'newData'> & {
+    newData: ArchiveRowChanges;
+};
+export declare const SECTION_WEIGHTS: Record<AccordionSection, number>;
+export declare const SECTION_HEADER_HEIGHT_PX = 30;
+export declare const PANEL_GUTTER_PX = 10;
+/** Il master è modificabile solo se il tipo documento lo consente */
+export declare const canUpdateMasterCallback: (dtd?: DcmtTypeDescriptor, masterDcmt?: DcmtInfo) => boolean;
+/** Permesso di archiviazione sul tipo documento di dettaglio */
+export declare const canArchive: (dtd?: DcmtTypeDescriptor) => boolean;
+/**
+ * Marcatore delle celle modificabili direttamente in griglia: il doppio clic le porta in modifica,
+ * quindi non deve aprire anche il form della riga
+ */
+export declare const INLINE_EDITABLE_CELL_CLASS = "tm-cell-inline-editable";
+/**
+ * Modifica diretta in griglia: testo libero e numeri. Liste dati, calcolati, numeratori e speciali
+ * hanno editor e vincoli propri, le date una formattazione dedicata: restano al form
+ */
+export declare const isInlineEditableMetadata: (md: MetadataDescriptor) => boolean;
+/**
+ * Valore di una cella numerica: l'editor della griglia vuole un numero, non la stringa che
+ * la riga porta in `__values` per l'archiviazione. Vuoto o non numerico: cella vuota
+ */
+export declare const toGridNumber: (value: unknown) => number | undefined;
+/** Colonne della griglia di riepilogo dai metadati (utente) del tipo documento */
+export declare const buildColumnsFromDtd: (dtd: DcmtTypeDescriptor | undefined, renderDataListCell: (value: string | Date | number | undefined, dataListID: number, viewMode: DataListViewModes) => React.ReactElement) => Array<IColumnProps>;
+export declare const getDetailDtdAsync: (detailTID: number | undefined) => Promise<DcmtTypeDescriptor | undefined>;
+/** Nome visualizzato del tipo documento (localizzato se richiesto) */
+export declare const getDtdDisplayName: (dtd: DcmtTypeDescriptor | undefined) => string;
+/** Messaggio del blocco: con righe inserite il tipo documento non è più modificabile */
+export declare const getBackLockedTitle: () => string;
+/**
+ * Altezze dei pannelli impilati a partire dalle sezioni aperte:
+ * una sezione chiusa vale 0% e resta a schermo con la sola testata
+ * le aperte si spartiscono tutto lo spazio
+ */
+export declare const sectionPanelHeights: (sections: Array<AccordionSection>, sectionsOpen: Record<AccordionSection, boolean>, currentDimensions?: TMPanelDimensionsMap) => TMPanelDimensionsMap;
+export declare const multiDetailStyles: {
+    stepper: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        gap: string;
+    };
+    backArrow: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        width: string;
+        height: string;
+        borderRadius: string;
+        border: string;
+        color: string;
+        cursor: "pointer";
+        marginRight: string;
+        transition: "all 0.18s ease";
+    };
+    stepPill: {
+        display: "flex";
+        alignItems: "center";
+        gap: string;
+        padding: string;
+        borderRadius: string;
+        transition: "all 0.18s ease";
+    };
+    stepCircle: {
+        width: string;
+        height: string;
+        borderRadius: string;
+        color: "#ffffff";
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        fontSize: string;
+        fontWeight: number;
+        flexShrink: number;
+        transition: "all 0.18s ease";
+    };
+    stepLabel: {
+        fontSize: string;
+        whiteSpace: "nowrap";
+        display: "flex";
+        alignItems: "center";
+    };
+    stepConnector: {
+        width: string;
+        height: string;
+        margin: string;
+        borderRadius: string;
+        flexShrink: number;
+    };
+    stepTypeLabel: {
+        display: "flex";
+        alignItems: "center";
+        gap: string;
+        maxWidth: string;
+    };
+    stepTypeLabelText: {
+        overflow: "hidden";
+        textOverflow: "ellipsis";
+        whiteSpace: "nowrap";
+    };
+    selectContainer: {
+        display: "flex";
+        flexDirection: "column";
+        alignItems: "center";
+        flex: number;
+        gap: string;
+        overflow: "auto";
+        padding: string;
+    };
+    selectTitle: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        textAlign: "center";
+        marginBottom: string;
+    };
+    selectList: {
+        display: "flex";
+        flexDirection: "column";
+        gap: string;
+        width: string;
+        maxWidth: string;
+    };
+    typeCard: {
+        display: "flex";
+        alignItems: "center";
+        gap: string;
+        padding: string;
+        borderRadius: string;
+        cursor: "pointer";
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.06)";
+        transition: "all 0.15s ease";
+    };
+    typeCardIcon: {
+        width: string;
+        height: string;
+        borderRadius: string;
+        background: string;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        flexShrink: number;
+    };
+    typeCardName: {
+        flex: number;
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        whiteSpace: "normal";
+        wordBreak: "break-word";
+        lineHeight: number;
+    };
+};
+export declare const accordionStyles: {
+    accordion: {
+        display: "flex";
+        flexDirection: "column";
+        minHeight: number;
+        borderRadius: string;
+        border: string;
+        background: string;
+        overflow: "hidden";
+    };
+    accordionInPanel: {
+        flex: number;
+    };
+    accordionHeader: {
+        display: "flex";
+        alignItems: "center";
+        gap: string;
+        padding: string;
+        cursor: "pointer";
+        userSelect: "none";
+        transition: "background 0.15s ease";
+        outline: string;
+        flexShrink: number;
+        minHeight: string;
+    };
+    accordionTitle: {
+        flex: number;
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        display: "flex";
+        alignItems: "center";
+        gap: string;
+        minWidth: number;
+    };
+    accordionBadge: {
+        display: "inline-flex";
+        alignItems: "center";
+        justifyContent: "center";
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flexShrink: number;
+    };
+    accordionListBody: {
+        position: "relative";
+        flex: number;
+        minHeight: number;
+        display: "flex";
+        flexDirection: "column";
+        borderTop: string;
+    };
+    accordionListPlaceholder: {
+        display: "flex";
+        flex: number;
+        alignItems: "center";
+        justifyContent: "center";
+        gap: string;
+        padding: string;
+        color: string;
+        fontSize: string;
+    };
+    accordionExpandBtn: {
+        display: "inline-flex";
+        alignItems: "center";
+        justifyContent: "center";
+        width: string;
+        height: string;
+        padding: number;
+        borderRadius: string;
+        border: string;
+        background: string;
+        color: string;
+        cursor: "pointer";
+        flexShrink: number;
+        transition: "background 0.15s ease, color 0.15s ease";
+    };
+};
+export interface RenderStepperParams {
+    /** Passi da mostrare, in ordine di fase */
+    steps: Array<MultiDetailStep>;
+    /** Fase corrente: i passi con fase minore sono completati */
+    phase: number;
+    /** Con un solo tipo documento il numero dello step non si mostra */
+    hasMultipleTypes: boolean;
+    /** Con righe inserite il ritorno alla scelta del tipo è bloccato (freccia e step completato) */
+    isBackLocked: boolean;
+    /** La freccia di ritorno si mostra solo dove ha senso tornare indietro */
+    showBackArrow: boolean;
+    /** Ritorno indietro dalla freccia */
+    onBack: () => void;
+    /** Click su uno step completato: riceve la fase di destinazione */
+    onStepClick: (phase: number) => void;
+}
+export declare const renderStepper: ({ steps, phase, hasMultipleTypes, isBackLocked, showBackArrow, onBack, onStepClick }: RenderStepperParams) => import("react/jsx-runtime").JSX.Element;
+export interface RenderSelectDcmtTypeParams {
+    /** Relazioni di dettaglio fra cui scegliere */
+    detailRelationItems: Array<DetailRelationItem>;
+    /** Relazione attualmente selezionata */
+    selectedRelation: RelationDescriptor | undefined;
+    /** Selezione di una relazione */
+    onSelectRelation: (item: DetailRelationItem) => void;
+}
+export declare const renderSelectDcmtType: ({ detailRelationItems, selectedRelation, onSelectRelation }: RenderSelectDcmtTypeParams) => import("react/jsx-runtime").JSX.Element;
+export interface RenderAccordionHeaderParams {
+    /** Sezione a cui appartiene la testata */
+    section: AccordionSection;
+    /** Sezione aperta o collassata */
+    isOpen: boolean;
+    /** Tooltip del collasso */
+    tooltip: string;
+    /** Conteggio mostrato nel badge */
+    count: number;
+    /** Titolo della sezione (icona + testo) */
+    title: React.ReactNode;
+    /** Pulsanti specifici della sezione, mostrati prima di quello di ingrandimento */
+    actions?: React.ReactNode;
+    /** Stato del pannello che ospita la sezione: l'ingrandimento è quello del panel manager */
+    panel: SectionPanelState;
+    /** Apre/chiude la sezione */
+    onToggleOpen: (section: AccordionSection, isOpen: boolean) => void;
+}
+export declare const renderAccordionHeader: ({ section, isOpen, tooltip, count, title, actions, panel, onToggleOpen }: RenderAccordionHeaderParams) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Contenuto di un pannello: il contesto del panel manager è leggibile solo dentro l'albero del
+ * provider, quindi è qui che si prende lo stato di ingrandimento da passare alla sezione
+ */
+export declare const TMSummarySectionSlot: ({ section, render, onBeforeMaximize }: {
+    section: AccordionSection;
+    render: (panel: SectionPanelState) => React.ReactNode;
+    onBeforeMaximize?: (section: AccordionSection) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Segnala che l'utente ha spostato un separatore: è l'unico caso in cui le altezze dei pannelli sono
+ * una sua scelta, quindi la sola da salvare. Le quote calcolate all'apertura del riepilogo o al
+ * collasso di una sezione non vanno scritte nel local storage.
+ * Vive dentro il provider perché il contesto è leggibile solo lì
+ */
+export declare const TMSummaryResizeTracker: ({ onUserResize }: {
+    onUserResize: () => void;
+}) => null;
+/**
+ * Tiene allineate le altezze dei pannelli al collasso delle sezioni: il panel manager non
+ * conosce il collasso, quindi è qui che l'apertura di una sezione si traduce nelle nuove quote.
+ * Vive dentro il provider perché il contesto è leggibile solo lì
+ */
+export declare const TMSectionPanelsHeights: ({ sections, sectionsOpen }: {
+    sections: Array<AccordionSection>;
+    sectionsOpen: Record<AccordionSection, boolean>;
+}) => null;

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

@@ -0,0 +1,259 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useRef } from 'react';
+import { AccessLevelsEx, DataListViewModes, DcmtTypeListCacheService, MetadataDataDomains, MetadataDataTypes, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { hoverStyle, IconChevronRight, IconWindowMaximize, IconWindowMinimize, SDKUI_Localizator } from '../../../helper';
+import { formatScalarValue, getUserMetadataSorted } from '../../../helper/dcmtsHelper';
+import { TMColors } from '../../../utils/theme';
+import { TMDcmtTypeIcon } from '../../viewers/TMTidViewer';
+import TMTooltip from '../../base/TMTooltip';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import { useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
+// l'elenco da archiviare è l'informazione più importante, quindi prende la fetta maggiore
+export const SECTION_WEIGHTS = {
+    masterInfo: 25,
+    archivedDetails: 30,
+    archiveList: 45
+};
+export const SECTION_HEADER_HEIGHT_PX = 30;
+// Spessore dei separatori fra i pannelli
+export const PANEL_GUTTER_PX = 10;
+// =================================================================================================
+// HELPER
+// =================================================================================================
+/** Il master è modificabile solo se il tipo documento lo consente */
+export const canUpdateMasterCallback = (dtd, masterDcmt) => (dtd?.perm?.canUpdate === AccessLevelsEx.Yes || dtd?.perm?.canUpdate === AccessLevelsEx.Mixed)
+    && masterDcmt?.TID !== undefined && masterDcmt?.DID !== undefined;
+/** Permesso di archiviazione sul tipo documento di dettaglio */
+export const canArchive = (dtd) => dtd?.perm?.canArchive === AccessLevelsEx.Yes || dtd?.perm?.canArchive === AccessLevelsEx.Mixed;
+/**
+ * Marcatore delle celle modificabili direttamente in griglia: il doppio clic le porta in modifica,
+ * quindi non deve aprire anche il form della riga
+ */
+export const INLINE_EDITABLE_CELL_CLASS = 'tm-cell-inline-editable';
+/**
+ * Modifica diretta in griglia: testo libero e numeri. Liste dati, calcolati, numeratori e speciali
+ * hanno editor e vincoli propri, le date una formattazione dedicata: restano al form
+ */
+export const isInlineEditableMetadata = (md) => (md.dataType === MetadataDataTypes.Varchar || md.dataType === MetadataDataTypes.Number)
+    && (md.dataDomain === undefined || md.dataDomain === MetadataDataDomains.None)
+    && md.isSystem !== 1 && md.isSystemDerived !== 1;
+/**
+ * Valore di una cella numerica: l'editor della griglia vuole un numero, non la stringa che
+ * la riga porta in `__values` per l'archiviazione. Vuoto o non numerico: cella vuota
+ */
+export const toGridNumber = (value) => {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    const parsed = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+};
+/** Colonne della griglia di riepilogo dai metadati (utente) del tipo documento */
+export const buildColumnsFromDtd = (dtd, renderDataListCell) => getUserMetadataSorted(dtd).map(md => {
+    const dataListID = md.dataListID ?? 0;
+    const isDataList = md.dataDomain === MetadataDataDomains.DataList && dataListID > 0;
+    const viewMode = md.dataListViewMode ?? DataListViewModes.None;
+    const dataType = md.dataType;
+    const format = md.format?.format;
+    const formatCulture = md.format?.formatCulture;
+    const isInlineEditable = isInlineEditableMetadata(md);
+    const isNumber = dataType === MetadataDataTypes.Number;
+    // Date e numeri usano la formattazione scalare; le liste dati il render comune. La cella
+    // modificabile mostra sempre l'editor, quindi non ha un proprio render
+    const needsScalarFormat = !isDataList && !isInlineEditable && (dataType === MetadataDataTypes.DateTime || isNumber);
+    return {
+        dataField: String(md.id),
+        caption: (SDK_Globals.useLocalizedName ? md.nameLoc : md.name) ?? md.name ?? '',
+        // La colonna modificabile dichiara il tipo: senza valori DevExtreme non saprebbe che editor usare
+        ...(isInlineEditable
+            ? {
+                // I numeri arrivano in cella già come numeri (vedi buildArchiveRow): l'editor è la casella numerica
+                dataType: isNumber ? 'number' : 'string',
+                allowEditing: true,
+                showEditorAlways: true,
+                cssClass: INLINE_EDITABLE_CELL_CLASS,
+                // Lunghezza e obbligatorietà del metadato valgono anche in griglia; sui numeri
+                // i limiti restano all'API, in cella basta che sia un numero
+                editorOptions: !isNumber && md.length ? { maxLength: md.length } : undefined,
+                validationRules: String(md.isRequired) === '1' ? [{ type: 'required', message: SDKUI_Localizator.RequiredField }] : undefined,
+            }
+            : { allowEditing: false }),
+        cellRender: isDataList
+            ? (cellData) => renderDataListCell(cellData.value, dataListID, viewMode)
+            : (needsScalarFormat ? (cellData) => formatScalarValue(cellData.value, dataType, format, formatCulture) : undefined),
+    };
+});
+// Accesso al descrittore del tipo documento di dettaglio
+export const getDetailDtdAsync = (detailTID) => detailTID === undefined ? Promise.resolve(undefined) : DcmtTypeListCacheService.GetWithNotGrantedAsync(detailTID, undefined);
+/** Nome visualizzato del tipo documento (localizzato se richiesto) */
+export const getDtdDisplayName = (dtd) => {
+    if (!dtd)
+        return '';
+    return (SDK_Globals.useLocalizedName ? dtd.nameLoc : dtd.name) ?? dtd.name ?? '';
+};
+/** Messaggio del blocco: con righe inserite il tipo documento non è più modificabile */
+export const getBackLockedTitle = () => SDKUI_Localizator.DeleteAllRowsToChangeDcmtType;
+/**
+ * Altezze dei pannelli impilati a partire dalle sezioni aperte:
+ * una sezione chiusa vale 0% e resta a schermo con la sola testata
+ * le aperte si spartiscono tutto lo spazio
+ */
+export const sectionPanelHeights = (sections, sectionsOpen, currentDimensions) => {
+    const weightOf = (section) => {
+        if (!sectionsOpen[section])
+            return 0;
+        const current = parseFloat(currentDimensions?.[section]?.height ?? '');
+        // Sezione che si apre ora (era a 0%) o prima apertura: si riparte dalla quota nominale
+        return Number.isFinite(current) && current > 0 ? current : SECTION_WEIGHTS[section];
+    };
+    const total = sections.reduce((sum, section) => sum + weightOf(section), 0);
+    return sections.reduce((acc, section) => {
+        acc[section] = { width: '100%', height: total > 0 ? `${(weightOf(section) / total) * 100}%` : '0%' };
+        return acc;
+    }, {});
+};
+// =================================================================================================
+// STILI
+// =================================================================================================
+export const multiDetailStyles = {
+    // Stepper
+    stepper: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px' },
+    backArrow: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '26px', height: '26px', borderRadius: '50%', border: `1.5px solid ${TMColors.primary}`, color: TMColors.primary, cursor: 'pointer', marginRight: '8px', transition: 'all 0.18s ease' },
+    stepPill: { display: 'flex', alignItems: 'center', gap: '7px', padding: '3px 10px 3px 4px', borderRadius: '16px', transition: 'all 0.18s ease' },
+    stepCircle: { width: '22px', height: '22px', borderRadius: '50%', color: '#ffffff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 600, flexShrink: 0, transition: 'all 0.18s ease' },
+    stepLabel: { fontSize: '12px', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center' },
+    stepConnector: { width: '18px', height: '2px', margin: '0 5px', borderRadius: '1px', flexShrink: 0 },
+    stepTypeLabel: { display: 'flex', alignItems: 'center', gap: '6px', maxWidth: '260px' },
+    stepTypeLabelText: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    // Fase 1 - Selezione tipo documento
+    selectContainer: { display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 1, gap: '8px', overflow: 'auto', padding: '8px 16px 24px' },
+    selectTitle: { fontSize: '18px', fontWeight: 700, color: TMColors.text_normal, textAlign: 'center', marginBottom: '16px' },
+    selectList: { display: 'flex', flexDirection: 'column', gap: '8px', width: '100%', maxWidth: '640px' },
+    typeCard: { display: 'flex', alignItems: 'center', gap: '12px', padding: '10px 14px', borderRadius: '9px', cursor: 'pointer', boxShadow: '0 1px 3px rgba(0, 0, 0, 0.06)', transition: 'all 0.15s ease' },
+    typeCardIcon: { width: '34px', height: '34px', borderRadius: '9px', background: TMColors.primary_container, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
+    typeCardName: { flex: 1, fontSize: '14px', fontWeight: 500, color: TMColors.text_normal, whiteSpace: 'normal', wordBreak: 'break-word', lineHeight: 1.3 },
+};
+// Stili delle sezioni collassabili
+export const accordionStyles = {
+    accordion: { display: 'flex', flexDirection: 'column', minHeight: 0, borderRadius: '8px', border: `1px solid ${TMColors.card_background}`, background: TMColors.default_background, overflow: 'hidden' },
+    accordionInPanel: { flex: 1 },
+    accordionHeader: { display: 'flex', alignItems: 'center', gap: '8px', padding: '4px 8px', cursor: 'pointer', userSelect: 'none', transition: 'background 0.15s ease', outline: 'none', flexShrink: 0, minHeight: '28px' },
+    accordionTitle: { flex: 1, fontSize: '12px', fontWeight: 600, color: TMColors.text_normal, display: 'flex', alignItems: 'center', gap: '6px', minWidth: 0 },
+    accordionBadge: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: TMColors.primary, fontSize: '13px', fontWeight: 700, flexShrink: 0 },
+    accordionListBody: { position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', borderTop: `1px solid ${TMColors.card_background}` },
+    accordionListPlaceholder: { display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center', gap: '10px', padding: '16px', color: TMColors.label_normal, fontSize: '13px' },
+    accordionExpandBtn: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '20px', height: '20px', padding: 0, borderRadius: '6px', border: 'none', background: 'transparent', color: TMColors.label_normal, cursor: 'pointer', flexShrink: 0, transition: 'background 0.15s ease, color 0.15s ease' },
+};
+export const renderStepper = ({ steps, phase, hasMultipleTypes, isBackLocked, showBackArrow, onBack, onStepClick }) => (_jsxs("div", { style: multiDetailStyles.stepper, children: [showBackArrow && (_jsx(TMTooltip, { content: isBackLocked ? getBackLockedTitle() : SDKUI_Localizator.Back, parentStyle: { marginRight: '10px' }, children: _jsx("div", { onClick: isBackLocked ? undefined : onBack, style: {
+                    ...multiDetailStyles.backArrow,
+                    marginRight: 0,
+                    ...(isBackLocked ? { borderColor: TMColors.disabled, color: TMColors.disabled, background: TMColors.card_background, opacity: 0.55, cursor: 'default' } : {}),
+                }, ...(isBackLocked ? {} : hoverStyle({ background: TMColors.primary, color: '#ffffff', transform: 'translateX(-2px)' }, { background: 'transparent', color: TMColors.primary, transform: 'translateX(0)' })), children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", style: { display: 'block' }, children: _jsx("path", { d: "M15 5l-7 7 7 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) })), steps.map((step, index) => {
+            const isActive = step.phase === phase;
+            const isCompleted = step.phase < phase;
+            // Completato: verde con spunta. Corrente: blu. Da fare: grigio disabilitato
+            const accentColor = isCompleted ? TMColors.success : (isActive ? TMColors.primary : TMColors.disabled);
+            // Step completato cliccabile per tornare indietro, salvo il lock per righe presenti
+            const isClickable = isCompleted && !isBackLocked;
+            // Tooltip esplicativo solo sullo step completato quando il ritorno è bloccato dalle righe
+            const showLockTooltip = isCompleted && isBackLocked;
+            const stepPill = (_jsxs("div", { onClick: isClickable ? () => onStepClick(step.phase) : undefined, style: {
+                    ...multiDetailStyles.stepPill,
+                    background: isActive ? TMColors.primary_container : 'transparent',
+                    boxShadow: isActive ? `inset 0 0 0 1.5px ${TMColors.primary}` : 'none',
+                    cursor: isClickable ? 'pointer' : 'default',
+                    ...(showLockTooltip ? { opacity: 0.5, filter: 'grayscale(0.6)' } : {}),
+                }, ...(isClickable && !isActive
+                    ? hoverStyle({ background: TMColors.primary_container, transform: 'translateY(-1px)' }, { background: 'transparent', transform: 'translateY(0)' })
+                    : {}), children: [hasMultipleTypes && (_jsx("div", { style: { ...multiDetailStyles.stepCircle, background: accentColor, boxShadow: isActive ? `0 2px 6px ${TMColors.primary}55` : 'none' }, children: isCompleted
+                            ? (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", style: { display: 'block' }, children: _jsx("path", { d: "M5 13l4 4L19 7", stroke: "#ffffff", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }))
+                            : step.phase + 1 })), _jsx("span", { style: { ...multiDetailStyles.stepLabel, fontWeight: isActive ? 700 : 500, color: accentColor }, children: step.label })] }));
+            return (_jsxs(React.Fragment, { children: [showLockTooltip
+                        ? _jsx(TMTooltip, { content: getBackLockedTitle(), children: stepPill })
+                        : stepPill, index < steps.length - 1 && (_jsx("div", { style: { ...multiDetailStyles.stepConnector, background: isCompleted ? TMColors.success : TMColors.disabled } }))] }, step.phase));
+        })] }));
+export const renderSelectDcmtType = ({ detailRelationItems, selectedRelation, onSelectRelation }) => (_jsxs("div", { style: multiDetailStyles.selectContainer, children: [_jsx("div", { style: multiDetailStyles.selectTitle, children: SDKUI_Localizator.SelectDcmtTypeForDetailArchiving }), _jsx("div", { style: multiDetailStyles.selectList, children: detailRelationItems.map((item) => {
+                const isSelected = item.relation === selectedRelation;
+                return (_jsxs("div", { onClick: () => onSelectRelation(item), style: {
+                        ...multiDetailStyles.typeCard,
+                        border: `1.5px solid ${isSelected ? TMColors.primary : TMColors.card_background}`,
+                        background: isSelected ? TMColors.primary_container : TMColors.default_background,
+                    }, ...hoverStyle({ borderColor: TMColors.primary, boxShadow: '0 4px 12px rgba(37, 89, 165, 0.18)' }, { borderColor: isSelected ? TMColors.primary : TMColors.card_background, boxShadow: '0 1px 3px rgba(0, 0, 0, 0.06)' }), children: [_jsx("div", { style: multiDetailStyles.typeCardIcon, children: _jsx(TMDcmtTypeIcon, { dtd: item.detailDtd }) }), _jsx("span", { style: multiDetailStyles.typeCardName, children: getDtdDisplayName(item.detailDtd) }), _jsx(IconChevronRight, { fontSize: 18, color: TMColors.label_normal })] }, item.relation.id ?? item.relation.detailTID));
+            }) })] }));
+export const renderAccordionHeader = ({ section, isOpen, tooltip, count, title, actions, panel, onToggleOpen }) => {
+    const restBackground = isOpen ? TMColors.toolbar_background : 'transparent';
+    // Un pannello ingrandito non si collassa: resterebbe la sola testata al posto di tutto il riepilogo.
+    // Dove i pannelli si vedono uno alla volta (mobile) il collasso è precluso per lo stesso motivo
+    const canToggle = panel.canCollapse && !panel.isMaximized;
+    // Con un pannello alla volta l'ingrandimento non ha nulla da nascondere
+    const canMaximize = panel.canMaximize;
+    const onToggle = () => onToggleOpen(section, !isOpen);
+    const expandTooltip = panel.isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.ZoomIn;
+    return (_jsxs("div", { role: canToggle ? 'button' : undefined, tabIndex: canToggle ? 0 : undefined, "aria-expanded": canToggle ? isOpen : undefined, style: { ...accordionStyles.accordionHeader, background: restBackground, ...(canToggle ? {} : { cursor: 'default' }) }, onClick: canToggle ? onToggle : undefined, onDoubleClick: canMaximize ? () => panel.toggleMaximize() : undefined, onKeyDown: canToggle ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onToggle();
+        } } : undefined, ...(canToggle ? hoverStyle({ background: TMColors.primary_container }, { background: restBackground }) : {}), children: [_jsx(TMTooltip, { content: canToggle ? tooltip : undefined, parentStyle: { flex: 1, minWidth: 0 }, childStyle: { maxWidth: '100%' }, children: _jsxs("span", { style: accordionStyles.accordionTitle, children: [title, _jsx("span", { style: accordionStyles.accordionBadge, children: count })] }) }), actions, canMaximize && (_jsx(TMTooltip, { content: expandTooltip, children: _jsx("button", { type: 'button', onClick: (e) => { e.stopPropagation(); panel.toggleMaximize(); }, style: accordionStyles.accordionExpandBtn, "aria-label": expandTooltip, ...hoverStyle({ background: TMColors.primary_container, color: TMColors.primary }, { background: 'transparent', color: TMColors.label_normal }), children: panel.isMaximized ? _jsx(IconWindowMinimize, { fontSize: 14 }) : _jsx(IconWindowMaximize, { fontSize: 14 }) }) })), canToggle && (_jsx(IconChevronRight, { fontSize: 16, color: TMColors.label_normal, style: { transform: isOpen ? 'rotate(90deg)' : 'none', transition: 'transform 0.2s ease', flexShrink: 0 } }))] }));
+};
+/**
+ * Contenuto di un pannello: il contesto del panel manager è leggibile solo dentro l'albero del
+ * provider, quindi è qui che si prende lo stato di ingrandimento da passare alla sezione
+ */
+export const TMSummarySectionSlot = ({ section, render, onBeforeMaximize }) => {
+    const { maximizedPanels, toggleMaximize } = useTMPanelManagerContext();
+    const isMaximized = maximizedPanels.includes(section);
+    // Su mobile il panel manager mostra un pannello alla volta: la sezione è già a tutto schermo, e
+    // ingrandirla nasconderebbe la barra con cui si passa da una sezione all'altra; chiuderla lascerebbe
+    // a schermo la sola testata, perché non ci sono altre sezioni a cui cedere lo spazio
+    const isMobile = useDeviceType() === DeviceType.MOBILE;
+    // Una sezione collassata non ha corpo: ingrandirla mostrerebbe un pannello vuoto, senza
+    // nemmeno poterla riaprire (da ingrandita il collasso è bloccato), quindi la si apre prima
+    const toggleMaximizeSection = () => {
+        if (!isMaximized)
+            onBeforeMaximize?.(section);
+        toggleMaximize(section);
+    };
+    return _jsx(_Fragment, { children: render({ isMaximized, canMaximize: !isMobile, canCollapse: !isMobile, toggleMaximize: toggleMaximizeSection }) });
+};
+/**
+ * Segnala che l'utente ha spostato un separatore: è l'unico caso in cui le altezze dei pannelli sono
+ * una sua scelta, quindi la sola da salvare. Le quote calcolate all'apertura del riepilogo o al
+ * collasso di una sezione non vanno scritte nel local storage.
+ * Vive dentro il provider perché il contesto è leggibile solo lì
+ */
+export const TMSummaryResizeTracker = ({ onUserResize }) => {
+    const { isResizingActive } = useTMPanelManagerContext();
+    useEffect(() => {
+        if (isResizingActive)
+            onUserResize();
+    }, [isResizingActive]);
+    return null;
+};
+/**
+ * Tiene allineate le altezze dei pannelli al collasso delle sezioni: il panel manager non
+ * conosce il collasso, quindi è qui che l'apertura di una sezione si traduce nelle nuove quote.
+ * Vive dentro il provider perché il contesto è leggibile solo lì
+ */
+export const TMSectionPanelsHeights = ({ sections, sectionsOpen }) => {
+    const { panelDimensions, panelVisibility, setPanelDimensionsById, maximizedPanels } = useTMPanelManagerContext();
+    // Con un pannello ingrandito le quote sono quelle dell'ingrandimento (100% e 0%): riallinearle al
+    // collasso lo svuoterebbe, quindi si aspetta il ritorno alla vista normale per rifare i conti
+    const hasMaximizedPanel = maximizedPanels.length > 0;
+    // Le altezze correnti si leggono da un ref: fra le dipendenze rientrerebbero a ogni ridimensionamento,
+    // mentre qui interessa solo il collasso
+    const dimensionsRef = useRef(panelDimensions);
+    dimensionsRef.current = panelDimensions;
+    // Le prime altezze le imposta il provider da initialDimensions, già calcolate sul collasso corrente
+    const isFirstRun = useRef(true);
+    useEffect(() => {
+        if (isFirstRun.current) {
+            isFirstRun.current = false;
+            return;
+        }
+        if (hasMaximizedPanel)
+            return;
+        // Solo i pannelli a schermo si spartiscono l'altezza, altrimenti resterebbe vuoto lo spazio dei nascosti
+        const visibleSections = sections.filter(section => panelVisibility[section] !== false);
+        const heights = sectionPanelHeights(visibleSections, sectionsOpen, dimensionsRef.current);
+        visibleSections.forEach(section => setPanelDimensionsById(section, heights[section].width, heights[section].height));
+    }, [sectionsOpen, hasMaximizedPanel, panelVisibility]);
+    return null;
+};

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

@@ -132,6 +132,19 @@ export interface TMRelationViewerProps {
      * Useful to disable interactions (like context menu) during loading.
      */
     onLoadingStateChanged?: (isLoading: boolean) => void;
+    /**
+     * Invoked on mount to hand over a function that stops the ongoing correlations
+     * calculation: no further GetMetadata calls are performed and only the
+     * correlations already calculated are kept.
+     * The function is synchronous, so it can be safely called right before
+     * unmounting the viewer (e.g. when navigating back).
+     */
+    onStopCalculationReady?: (stopCalculation: () => void) => void;
+    /**
+     * Callback invoked when the calculation has actually been stopped
+     * (loadData terminated after an abort request).
+     */
+    onCalculationStopped?: () => void;
 }
 /**
  * Check if document type has detail relations
@@ -150,7 +163,7 @@ export declare const getDisplayValueByColumn: (col: DataColumnDescriptor | undef
  * For each document, fetches complete metadata using GetMetadataAsync to ensure
  * all metadata properties (isSpecialSearchOutput, permissions, etc.) are available
  */
-export declare const searchResultToDataSource: (searchResult: SearchResultDescriptor | undefined, hideSysMetadata?: boolean) => Promise<any[]>;
+export declare const searchResultToDataSource: (searchResult: SearchResultDescriptor | undefined, hideSysMetadata?: boolean, signal?: AbortSignal) => Promise<any[]>;
 export declare const DEFAULT_RELATION_EXPAND_LEVEL = 4;
 declare const TMRelationViewer: React.FC<TMRelationViewerProps>;
 export default TMRelationViewer;