@topconsultnpm/sdkui-react 6.20.0-dev1.2 → 6.20.0-dev1.20

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import TMDcmtPreview from './TMDcmtPreview';
-import { AccessLevels, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutCacheService, LayoutModes, MetadataDataTypes, ObjectClasses, ResultTypes, SDK_Globals, SDK_Localizator, SystemMIDsAsNumber, SystemTIDs, Task_States, TemplateTIDs, TID_DID, UpdateEngineByID, ValidationItem, WorkflowCacheService, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { AccessLevels, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutCacheService, LayoutModes, MetadataDataTypes, ObjectClasses, ResultTypes, SDK_Globals, SDK_Localizator, SystemMIDsAsNumber, SystemTIDs, Task_States, TemplateTIDs, TID_DID, UpdateEngineByID, UserListCacheService, ValidationItem, WorkflowCacheService, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
 import { ContextMenu } from 'devextreme-react';
 import { WorkFlowApproveRejectPopUp, WorkFlowMoreInfoPopUp, WorkFlowOperationButtons, WorkFlowReAssignPopUp } from '../workflow/TMWorkflowPopup';
 import { DownloadTypes, FormModes, DcmtOperationTypes } from '../../../ts';
@@ -9,7 +9,7 @@ import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { useRelatedDocuments } from '../../../hooks/useRelatedDocuments';
 import { getWorkItemSetIDAsync, handleArchiveVisibility, searchResultToMetadataValues } from '../../../helper/queryHelper';
-import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare, IconCheck, IconActivity, TMImageLibrary, IconStar, IconRelation, IconInfo, IconArchiveDoc, IconDelete, IconPair, IconUnpair, IconArchiveMaster, IconArchiveDetail } from '../../../helper';
+import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare, IconCheck, IconActivity, TMImageLibrary, IconStar, IconRelation, IconInfo, IconArchiveDoc, IconDelete, IconPair, IconUnpair, IconArchiveMaster, IconArchiveDetail, getDcmtCicoStatus, IconFileDots } from '../../../helper';
 import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
 import { Gutters, TMColors } from '../../../utils/theme';
 import { StyledFormButtonsContainer, StyledLoadingContainer, StyledModalContainer, StyledReferenceButton, StyledSpinner, StyledToolbarCardContainer } from '../../base/Styled';
@@ -42,9 +42,14 @@ import TMToppyMessage from '../../../helper/TMToppyMessage';
 import { getTaskAssignedToMe } from '../tasks/TMTasksUtils';
 import TMCustomButton from '../../base/TMCustomButton';
 import ToppyDraggableHelpCenter from '../assistant/ToppyDraggableHelpCenter';
+import { useCheckInOutOperations } from '../../../hooks/useCheckInOutOperations';
+import TMViewHistoryDcmt from '../search/TMViewHistoryDcmt';
+import TMDcmtCheckoutInfoForm from '../search/TMDcmtCheckoutInfoForm';
+import styled from 'styled-components';
 let abortControllerLocal = new AbortController();
 //#endregion
 const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, showBackButton = true, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtFormSidebar = true, invokedByTodo = false, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId, onWFOperationCompleted, onTaskCompleted, onTaskCreateRequest, inputFile = null, taskFormDialogComponent, taskMoreInfo, connectorFileSave = undefined, inputMids = [], openS4TViewer = false, onOpenS4TViewerRequest, s4TViewerDialogComponent, enableDragDropOverlay = false, passToSearch, isSharedDcmt = false, sharedSourceTID, sharedSourceDID, allowButtonsRefs = false, onReferenceClick, }) => {
+    const { showHistory, showHistoryCallback, hideHistoryCallback, showCheckoutInformationForm, commentFormState, hideCommentFormCallback, showCheckoutInformationFormCallback, hideCheckoutInformationFormCallback, copyCheckoutPathToClipboardCallback, handleCheckOutCallback, handleCheckInCallback, refreshPreviewTrigger, showCicoWaitPanel, cicoWaitPanelTitle, showCicoPrimaryProgress, cicoPrimaryProgressText, cicoPrimaryProgressValue, cicoPrimaryProgressMax, } = useCheckInOutOperations();
     const [id, setID] = useState('');
     const [showWaitPanelLocal, setShowWaitPanelLocal] = useState(false);
     const [waitPanelTitleLocal, setWaitPanelTitleLocal] = useState('');
@@ -68,6 +73,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
     const [layout, setLayout] = useState();
     const [customButtonsLayout, setCustomButtonsLayout] = useState();
     const [customButton, setCustomButton] = useState();
+    const [allUsers, setAllUsers] = useState([]);
     const appliedInputMidsRef = useRef(null);
     // Refs per evitare stale closure nei callback
     // I useCallback catturano i valori delle dipendenze al momento della creazione.
@@ -96,10 +102,18 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
     const [isInitialLoading, setIsInitialLoading] = useState(true);
     const [isNavigating, setIsNavigating] = useState(false);
     const [dcmtReferences, setDcmtReferences] = useState(undefined);
-    // Dcmt Blog states
-    const [blogsDatasource, setBlogsDatasource] = useState([]);
-    const [hasLoadedDataOnce, setHasLoadedDataOnce] = useState(false); //traccia se *qualsiasi* dato è stato caricato per la prima volta
-    const [lastLoadedDid, setLastLoadedDid] = useState(undefined); // `lastLoadedDid` tiene traccia dell'ultimo `did` per cui abbiamo caricato i dati
+    // Stato per triggerare il refresh del blog dall'esterno
+    const [refreshBlogTrigger, setRefreshBlogTrigger] = useState(0);
+    const triggerBlogRefresh = useCallback(async () => {
+        setRefreshBlogTrigger(prev => prev + 1);
+    }, []);
+    useEffect(() => {
+        const fetchAllUsers = async () => {
+            const users = await UserListCacheService.GetAllAsync();
+            setAllUsers(users ?? []);
+        };
+        fetchAllUsers();
+    }, []);
     useEffect(() => {
         if (!allowButtonsRefs)
             setDcmtReferences(undefined);
@@ -123,7 +137,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
             selectMIDs: selectMIDs,
             dtdResult: {
                 rows: [rowValues],
-                columns: selectMIDs.map(mid => ({ name: `MID_${mid}` }))
+                columns: selectMIDs.map(mid => ({ name: `MID_${mid}`, }))
             },
             dcmtsFound: 1,
             dcmtsReturned: 1
@@ -237,8 +251,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
             // Imposta il layout e customButtonsLayout immediatamente
             setLayout(resLayout);
             if (layoutMode === LayoutModes.Update && customButtonsLayoutResult) {
-                //disabilitato per ora
-                //setCustomButtonsLayout(customButtonsLayoutResult);
+                setCustomButtonsLayout(customButtonsLayoutResult);
             }
             // Carica DTD e metadata
             let dtd = await DcmtTypeListCacheService.GetWithNotGrantedAsync(TID, DID, getMetadataResult);
@@ -410,6 +423,21 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
     const workItemSetIDValue = useMemo(() => formData.find(o => o.md?.name === WorkItemMetadataNames.WI_SetID)?.value, [formData]);
     // Valore derivato: true se formData ha elementi validi
     const hasFormData = useMemo(() => formData.length > 0 && formData.some(md => md.mid && md.mid > 99), [formData]);
+    const handleCheckOutOperationCallback = async (checkout) => {
+        if (!currentDcmt)
+            return;
+        await handleCheckOutCallback({ TID: currentDcmt.tid, DID: currentDcmt.did, FILEEXT: currentDcmt.fileExt }, checkout, fromDTD?.name ?? SDKUI_Localizator.SearchResult, downloadDcmtsAsync, updateCurrentDcmt);
+    };
+    const handleCheckInOperationCallback = async () => {
+        if (!currentDcmt)
+            return;
+        await handleCheckInCallback({ TID: currentDcmt.tid, DID: currentDcmt.did, FILEEXT: currentDcmt.fileExt, fileName: fromDTD?.name ?? SDKUI_Localizator.SearchResult }, updateCurrentDcmt, undefined);
+    };
+    const copyCheckoutPathToClipboardOperationCallback = () => {
+        if (!currentDcmt)
+            return;
+        copyCheckoutPathToClipboardCallback({ TID: currentDcmt.tid, DID: currentDcmt.did, FILEEXT: currentDcmt.fileExt }, fromDTD?.name ?? SDKUI_Localizator.SearchResult);
+    };
     useEffect(() => {
         const loadAllWfData = async () => {
             if (layoutMode !== LayoutModes.Update || !DID || fromDTD?.templateTID !== TemplateTIDs.WF_WIApprView) {
@@ -565,6 +593,53 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                 items: operationsItems
             });
         }
+        if (fromDTD?.id !== SystemTIDs.Drafts) {
+            // Check in/Check out menu
+            const { cicoEnabled, checkoutStatus } = getDcmtCicoStatus(formData, allUsers, fromDTD);
+            items.push({
+                icon: svgToString(_jsx(IconFileDots, {})),
+                text: "Check in/Check out",
+                disabled: false,
+                items: [
+                    {
+                        icon: "edit",
+                        text: 'Check out',
+                        disabled: !cicoEnabled || checkoutStatus.isCheckedOut,
+                        onClick: () => handleCheckOutOperationCallback(true),
+                    },
+                    {
+                        icon: "unlock",
+                        text: 'Check in',
+                        onClick: () => handleCheckInOperationCallback(),
+                        disabled: !cicoEnabled || !checkoutStatus.isCheckedOut || checkoutStatus.mode === 'lockMode'
+                    },
+                    {
+                        icon: "remove",
+                        text: SDKUI_Localizator.CancelCheckOut,
+                        disabled: !cicoEnabled || !checkoutStatus.isCheckedOut || checkoutStatus.mode === 'lockMode',
+                        onClick: () => handleCheckOutOperationCallback(false),
+                    },
+                    {
+                        icon: "info",
+                        text: SDKUI_Localizator.CheckoutInfo,
+                        onClick: showCheckoutInformationFormCallback,
+                        disabled: !checkoutStatus.isCheckedOut
+                    },
+                    {
+                        icon: "copy",
+                        text: SDKUI_Localizator.CopyCheckoutPath,
+                        onClick: copyCheckoutPathToClipboardOperationCallback,
+                        disabled: !checkoutStatus.isCheckedOut
+                    },
+                    {
+                        icon: "clock",
+                        text: SDKUI_Localizator.History,
+                        disabled: !cicoEnabled,
+                        onClick: showHistoryCallback,
+                    },
+                ]
+            });
+        }
         if (allowRelations && layoutMode === LayoutModes.Update && DID) {
             const relationsItems = [
                 {
@@ -680,16 +755,15 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                 text: customButton.title || 'Bottone personalizzato',
                 onClick: () => setCustomButton(customButton)
             }));
-            //disabilitato per ora
-            /*
             items.push({
-                icon: svgToString(<IconCheck />),
+                icon: svgToString(_jsx(IconCheck, {})),
                 text: SDKUI_Localizator.CustomButtons,
                 items: customButtonsItems
-            } as TMDataGridContextMenuItem);*/
+            });
         }
         return items;
     }, [
+        fromDTD?.id,
         fromDTD?.perm?.canRetrieveFile,
         fromDTD?.description,
         currentDcmt?.fileExt,
@@ -732,6 +806,60 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
             },
         });
     }, [isModal, id, layoutMode]);
+    // Funzione helper per ottenere e aggiornare i metadati con gestione errori centralizzata
+    const refreshMetadataAsync = useCallback(async () => {
+        let metadataResult = undefined;
+        let hasGetMetadataError = false;
+        try {
+            metadataResult = await SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(TID, DID, true);
+        }
+        catch (metadataError) {
+            hasGetMetadataError = true;
+            // Estrai ErrorCode dal campo detail se disponibile
+            let errorCode = undefined;
+            if (metadataError?.isApiException && metadataError?.response?.detail) {
+                try {
+                    const detailObj = JSON.parse(metadataError.response.detail);
+                    errorCode = detailObj?.ErrorCode;
+                }
+                catch (parseError) {
+                    console.log("Impossibile parsare il detail dell'eccezione:", parseError);
+                }
+            }
+            // Se ErrorCode è -5, mostra messaggio personalizzato, altrimenti mostra l'eccezione originale
+            if (errorCode === -5) {
+                TMMessageBoxManager.show({
+                    message: SDKUI_Localizator.DcmtOutOfView,
+                    buttons: [ButtonNames.OK],
+                });
+            }
+            else {
+                TMExceptionBoxManager.show({ exception: metadataError });
+            }
+            // Usa null per indicare al callback che c'è stato un errore e non deve ritentare
+            metadataResult = null;
+        }
+        // Aggiorna i metadati locali solo se non ci sono stati errori
+        if (!hasGetMetadataError && metadataResult && metadataResult !== null) {
+            await setMetadataList(fromDTDRef.current?.metadata ?? [], metadataResult);
+        }
+        return { success: !hasGetMetadataError, result: metadataResult };
+    }, [TID, DID, setMetadataList]);
+    const updateCurrentDcmt = useCallback(async () => {
+        try {
+            TMSpinner.show({ description: 'Aggiornamento in corso...' });
+            const { success, result: metadataResult } = await refreshMetadataAsync();
+            if (!success)
+                onClose?.();
+            await onSavedAsyncCallback?.(TID, DID, metadataResult === null ? null : metadataResult);
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }, [refreshMetadataAsync, onClose]);
     const handleSave = useCallback(async () => {
         const ue = new UpdateEngineByID(SDK_Globals.tmSession);
         ue.DID = DID;
@@ -768,55 +896,20 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
             const savedFormData = structuredClone(formDataRef.current);
             setFormDataOrig(savedFormData);
             formDataOrigRef.current = savedFormData;
-            // Tenta di ottenere i metadati aggiornati
-            let metadataResult = undefined;
-            let hasGetMetadataError = false;
-            try {
-                metadataResult = await SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(TID, DID, true);
-            }
-            catch (metadataError) {
-                hasGetMetadataError = true;
-                // Estrai ErrorCode dal campo detail se disponibile
-                let errorCode = undefined;
-                if (metadataError?.isApiException && metadataError?.response?.detail) {
-                    try {
-                        const detailObj = JSON.parse(metadataError.response.detail);
-                        errorCode = detailObj?.ErrorCode;
-                    }
-                    catch (parseError) {
-                        console.log("Impossibile parsare il detail dell'eccezione:", parseError);
-                    }
-                }
-                // Se ErrorCode è -5, mostra messaggio personalizzato, altrimenti mostra l'eccezione originale
-                if (errorCode === -5) {
-                    TMMessageBoxManager.show({
-                        message: SDKUI_Localizator.DcmtOutOfView,
-                        buttons: [ButtonNames.OK],
-                    });
-                }
-                else {
-                    TMExceptionBoxManager.show({ exception: metadataError });
-                }
-                // Usa null per indicare al callback che c'è stato un errore e non deve ritentare
-                metadataResult = null;
-            }
+            // Usa la funzione helper per ottenere i metadati aggiornati
+            const { success, result: metadataResult } = await refreshMetadataAsync();
             // Esegui sempre il callback:
             // - Se metadataResult è un oggetto: refresh normale
             // - Se metadataResult è null: GetMetadataAsync fallito, rimuove il documento dalla griglia senza ritentare
             // - Se metadataResult è undefined: nessun parametro passato, il callback può decidere cosa fare
             await onSavedAsyncCallback?.(TID, DID, metadataResult === null ? null : metadataResult);
             // Mostra messaggio di successo solo se non ci sono stati errori critici
-            if (!hasGetMetadataError) {
-                if (metadataResult && metadataResult !== null) {
-                    // Usa fromDTDRef.current invece di fromDTD per evitare stale closure.
-                    // fromDTD potrebbe essere undefined/vuoto nel callback se lo stato è cambiato,
-                    // mentre fromDTDRef.current contiene sempre il valore corrente sincronizzato tramite useEffect.
-                    await setMetadataList(fromDTDRef.current?.metadata ?? [], metadataResult);
-                }
+            if (success) {
                 ShowAlert({ mode: 'success', title: 'Form di documento', message: 'Le modifiche sono state salvate con successo', duration: 3000 });
             }
-            else
+            else {
                 onClose?.();
+            }
         }
         catch (e) {
             TMExceptionBoxManager.show({ exception: e });
@@ -824,7 +917,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
         finally {
             TMSpinner.hide();
         }
-    }, [DID, TID, getSpecificChangedKeysWithValues, onSavedAsyncCallback, onClose, setMetadataList]);
+    }, [DID, TID, getSpecificChangedKeysWithValues, refreshMetadataAsync, onSavedAsyncCallback, onClose]);
     const handleArchiveCompleted = useCallback(async () => {
         let firstBlock = true;
         let maxFileSize = 0;
@@ -1007,50 +1100,40 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
             setShowAll(true);
         }
     }, [shouldShowAll, showAll]);
-    const fetchBlogDataAsync = useCallback(async (tid, did) => {
-        try {
-            TMSpinner.show({ description: 'Caricamento - Bacheca...' });
-            const res = await SDK_Globals.tmSession?.NewSearchEngine().BlogRetrieveAsync(tid, did);
-            setBlogsDatasource(res ?? []);
-            setHasLoadedDataOnce(true);
-            setLastLoadedDid(did);
-        }
-        catch (e) {
-            let err = e;
-            TMExceptionBoxManager.show({ exception: err });
-        }
-        finally {
-            TMSpinner.hide();
-        }
-    }, []);
     const afterTaskSaved = useCallback(async (task, formMode, forceRefresh = false) => {
         const shouldRefresh = forceRefresh || (task && task.state === Task_States.Completed) || formMode === FormModes.Create || formMode === FormModes.Duplicate;
         if (TID && DID && shouldRefresh) {
-            await fetchBlogDataAsync(TID, DID);
+            await triggerBlogRefresh();
         }
-    }, [TID, DID]);
+    }, [TID, DID, triggerBlogRefresh]);
+    const checkoutBadge = useMemo(() => {
+        const { cicoEnabled, checkoutStatus } = getDcmtCicoStatus(formData, allUsers, fromDTD);
+        if (!cicoEnabled || !checkoutStatus.isCheckedOut)
+            return null;
+        return (_jsx(Ribbon, { "$isMobile": isMobile, children: _jsx(TMTooltip, { content: checkoutStatus.editLockTooltipText, position: "right", children: _jsx("span", { children: checkoutStatus.mode === 'editMode' ? SDKUI_Localizator.CheckOut : 'Locked' }) }) }));
+    }, [formData, fromDTD, isMobile]);
     const tmDcmtForm = useMemo(() => {
-        return _jsx(_Fragment, { children: metadataValuesSource.length > 0 &&
-                _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, isReadOnly: formMode === FormModes.ReadOnly, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, inputMids: inputMids, layout: layout, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
-                                setFormData((prevItems) => prevItems.map((item) => {
-                                    const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
-                                    return newItem ? { ...item, ...newItem } : item;
-                                }));
-                            }, onAdvancedMenuClick: (e) => {
-                                switch (e.button) {
-                                    case AdvancedMenuButtons.DistinctValues:
-                                        setIsOpenDistinctValues(!isOpenDistinctValues);
-                                        break;
-                                    case AdvancedMenuButtons.FormulaEditor:
-                                        setIsOpenFormulaEditor(!isOpenFormulaEditor);
-                                        break;
-                                }
-                            } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: handleConfirmAction }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: handleUndo })] }) :
-                                            _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Archive, advancedColor: TMColors.success, onClick: handleConfirmAction }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Clear, advancedColor: TMColors.tertiary, onClick: handleClearForm }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: SDKUI_Localizator.Undo, advancedColor: TMColors.tertiary, onClick: handleUndo })] }) }) }), customButton && _jsx(TMCustomButton, { button: customButton, formData: formData, selectedItems: [], onClose: () => setCustomButton(undefined) }), totalItems > listMaxItems &&
-                                    !isApprView &&
-                                    TID !== SystemTIDs.Drafts &&
-                                    !shouldShowAll &&
-                                    _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), _jsx(ConfirmAttachmentsDialog, {})] }) });
+        return _jsxs(_Fragment, { children: [checkoutBadge && _jsx("div", { style: { padding: '10px', display: 'flex', justifyContent: 'center' }, children: checkoutBadge }), metadataValuesSource.length > 0 &&
+                    _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, isReadOnly: formMode === FormModes.ReadOnly, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, inputMids: inputMids, layout: layout, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+                                    setFormData((prevItems) => prevItems.map((item) => {
+                                        const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
+                                        return newItem ? { ...item, ...newItem } : item;
+                                    }));
+                                }, onAdvancedMenuClick: (e) => {
+                                    switch (e.button) {
+                                        case AdvancedMenuButtons.DistinctValues:
+                                            setIsOpenDistinctValues(!isOpenDistinctValues);
+                                            break;
+                                        case AdvancedMenuButtons.FormulaEditor:
+                                            setIsOpenFormulaEditor(!isOpenFormulaEditor);
+                                            break;
+                                    }
+                                } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: handleConfirmAction }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: handleUndo })] }) :
+                                                _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Archive, advancedColor: TMColors.success, onClick: handleConfirmAction }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Clear, advancedColor: TMColors.tertiary, onClick: handleClearForm }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: SDKUI_Localizator.Undo, advancedColor: TMColors.tertiary, onClick: handleUndo })] }) }) }), customButton && _jsx(TMCustomButton, { button: customButton, formData: formData, selectedItems: [], onClose: () => setCustomButton(undefined) }), totalItems > listMaxItems &&
+                                        !isApprView &&
+                                        TID !== SystemTIDs.Drafts &&
+                                        !shouldShowAll &&
+                                        _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), _jsx(ConfirmAttachmentsDialog, {})] })] });
     }, [
         TID,
         DID,
@@ -1078,11 +1161,11 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
         handleUndo,
         handleClearForm
     ]);
-    const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { blogsDatasource: blogsDatasource, hasLoadedDataOnce: hasLoadedDataOnce, lastLoadedDid: lastLoadedDid, setBlogsDatasource: setBlogsDatasource, setHasLoadedDataOnce: setHasLoadedDataOnce, setLastLoadedDid: setLastLoadedDid, fetchBlogDataAsync: fetchBlogDataAsync, tid: TID, did: DID, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), [blogsDatasource, hasLoadedDataOnce, lastLoadedDid, TID, DID, allTasks]);
+    const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { tid: TID, did: DID, allTasks: allTasks, fetchBlogDataTrigger: refreshBlogTrigger, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), [TID, DID, allTasks, refreshBlogTrigger]);
     const tmSysMetadata = useMemo(() => _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [], inputMids: inputMids }), [TID, layoutMode, formData, deviceType, inputMids]);
     const tmDcmtPreview = useMemo(() => _jsx(TMDcmtPreviewWrapper, { currentDcmt: currentDcmt, dcmtFile: dcmtFile ?? inputFile, deviceType: deviceType, fromDTD: fromDTD, layoutMode: layoutMode, onFileUpload: (file) => {
             setDcmtFile(file);
-        }, enableDragDropOverlay: enableDragDropOverlay }), [currentDcmt, dcmtFile, deviceType, fromDTD, layoutMode, inputFile, enableDragDropOverlay, setDcmtFile]);
+        }, enableDragDropOverlay: enableDragDropOverlay }, refreshPreviewTrigger), [currentDcmt, dcmtFile, deviceType, fromDTD, layoutMode, inputFile, enableDragDropOverlay, setDcmtFile]);
     const tmWF = useMemo(() => {
         if (isWFDataLoading) {
             return (_jsx("div", { style: {
@@ -1347,23 +1430,23 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                 height: '100%',
                 position: 'relative',
                 overflow: 'hidden'
-            }, children: [_jsxs("div", { style: { width: '100%', height: '100%', display: isOpenDetails || isOpenMaster ? 'none' : 'flex' }, children: [isNavigating && _jsx(Spinner, { description: SDKUI_Localizator.Loading, flat: false }), (fromDTD) && _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [(groupId && groupId.length > 0)
-                                    ? _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })
-                                    : _jsxs(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: defaultPanelDimensions, initialDimensions: defaultPanelDimensions, initialMobilePanelId: 'tmDcmtForm', isPersistenceEnabled: !isMobile ? hasSavedLayout() : false, persistPanelStates: !isMobile ? (state) => persistPanelStates(state) : undefined, persistedPanelStates: getPersistedPanelStates(), children: [_jsx(WfButtonStateHandler, { isWFDisabled: isWFDisabled }), _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })] }), isOpenDistinctValues &&
-                                    _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
-                                            if (!e)
-                                                return;
-                                            setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
-                                        } }), isOpenFormulaEditor &&
-                                    _jsx(TMFormulaEditor, { isModal: true, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
-                                            setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
-                                            setFocusedMetadataValue(prevState => ({
-                                                ...prevState,
-                                                isSelected: true,
-                                                isEditable: true,
-                                                value: FormulaHelper.addFormulaTag(newFormula.expression)
-                                            }));
-                                        } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), _jsx(ToppyDraggableHelpCenter, { initialIsCollapsed: false, deviceType: deviceType, isVisible: (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && !openS4TViewer, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [showToppyForApprove && (workItems.length === 1 ?
+            }, children: [_jsxs("div", { style: { width: '100%', height: '100%', display: isOpenDetails || isOpenMaster ? 'none' : 'flex' }, children: [isNavigating && _jsx(Spinner, { description: SDKUI_Localizator.Loading, flat: false }), (fromDTD) && _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showCicoWaitPanel, showWaitPanelPrimary: showCicoPrimaryProgress, waitPanelTitle: cicoWaitPanelTitle, waitPanelTextPrimary: cicoPrimaryProgressText, waitPanelValuePrimary: cicoPrimaryProgressValue, waitPanelMaxValuePrimary: cicoPrimaryProgressMax, isCancelable: true, abortController: abortControllerLocal, children: [(groupId && groupId.length > 0)
+                                        ? _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })
+                                        : _jsxs(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: defaultPanelDimensions, initialDimensions: defaultPanelDimensions, initialMobilePanelId: 'tmDcmtForm', isPersistenceEnabled: !isMobile ? hasSavedLayout() : false, persistPanelStates: !isMobile ? (state) => persistPanelStates(state) : undefined, persistedPanelStates: getPersistedPanelStates(), children: [_jsx(WfButtonStateHandler, { isWFDisabled: isWFDisabled }), _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })] }), isOpenDistinctValues &&
+                                        _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
+                                                if (!e)
+                                                    return;
+                                                setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
+                                            } }), isOpenFormulaEditor &&
+                                        _jsx(TMFormulaEditor, { isModal: true, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
+                                                setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
+                                                setFocusedMetadataValue(prevState => ({
+                                                    ...prevState,
+                                                    isSelected: true,
+                                                    isEditable: true,
+                                                    value: FormulaHelper.addFormulaTag(newFormula.expression)
+                                                }));
+                                            } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }) }), _jsx(ToppyDraggableHelpCenter, { initialIsCollapsed: false, deviceType: deviceType, isVisible: (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && !openS4TViewer, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [showToppyForApprove && (workItems.length === 1 ?
                                         _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), onMoreInfo: () => setShowMoreInfoPopup(true), dtd: fromDTD })
                                         :
                                             _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Devi approvare ${workItems.length} workitem(s) per questo documento.`, `Vai alla sezione di approvazione.`] })), showToppyForCompleteMoreInfo && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: `${SDKUI_Localizator.MoreInfoCompleteRequestSentBy} ${taskMoreInfo?.fromName}!` }), _jsx(TMButton, { caption: SDKUI_Localizator.CommentAndComplete, color: 'success', showTooltip: false, onClick: () => {
@@ -1417,7 +1500,8 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                     finally {
                         TMSpinner.hide();
                     }
-                }, onClose: () => setShowManyToManyChooser(false), manageUseLocalizedName: false })), isOpenArchiveRelationForm && (_jsx(TMDcmtForm, { isModal: true, titleModal: SDKUI_Localizator.Archive + ' - ' + (archiveType === 'detail' ? SDKUI_Localizator.DcmtsDetail : SDKUI_Localizator.DcmtsMaster), TID: archiveRelatedDcmtFormTID, layoutMode: LayoutModes.Ark, inputMids: archiveRelatedDcmtFormMids, showBackButton: false, allowButtonsRefs: false, onClose: () => {
+                }, onClose: () => setShowManyToManyChooser(false), manageUseLocalizedName: false })), (showHistory && fromDTD && currentDcmt) && _jsx(TMViewHistoryDcmt, { fromDTD: fromDTD, deviceType: deviceType, inputDcmt: { TID: currentDcmt.tid, DID: currentDcmt.did }, onClose: hideHistoryCallback, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), (showCheckoutInformationForm && fromDTD && currentDcmt) &&
+                _jsx(TMDcmtCheckoutInfoForm, { dtdName: fromDTD.name ?? SDKUI_Localizator.SearchResult, selectedDcmtOrFocused: { TID: currentDcmt.tid, DID: currentDcmt.did, FILEEXT: currentDcmt.fileExt }, onClose: hideCheckoutInformationFormCallback }), (commentFormState.show && currentDcmt) && _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid: currentDcmt.tid, did: currentDcmt.did } }, onClose: hideCommentFormCallback, refreshCallback: triggerBlogRefresh, participants: [], showAttachmentsSection: false, allArchivedDocumentsFileItems: [], isCommentRequired: commentFormState.isRequired, removeAndEditAttachment: commentFormState.removeAndEditAttachment }), isOpenArchiveRelationForm && (_jsx(TMDcmtForm, { isModal: true, titleModal: SDKUI_Localizator.Archive + ' - ' + (archiveType === 'detail' ? SDKUI_Localizator.DcmtsDetail : SDKUI_Localizator.DcmtsMaster), TID: archiveRelatedDcmtFormTID, layoutMode: LayoutModes.Ark, inputMids: archiveRelatedDcmtFormMids, showBackButton: false, allowButtonsRefs: false, onClose: () => {
                     setIsOpenArchiveRelationForm(false);
                     setArchiveType(undefined);
                     setArchiveRelatedDcmtFormTID(undefined);
@@ -1451,8 +1535,11 @@ const applyMetadataFilter = (data, showAll, listMaxItems, TID) => {
         o.mid === SystemMIDsAsNumber.FileSize ||
         o.mid === SystemMIDsAsNumber.LastUpdateTime ||
         o.mid === SystemMIDsAsNumber.CreationTime;
+    const chronologySystemFilter = (o) => baseFilter(o) ||
+        o.mid === SystemMIDsAsNumber.FileExt ||
+        o.mid === SystemMIDsAsNumber.FileSize;
     // Select the appropriate filter based on document type
-    const currentFilter = TID === SystemTIDs.Drafts ? draftFilter : baseFilter;
+    const currentFilter = TID === SystemTIDs.Drafts ? draftFilter : TID === SystemTIDs.Chronology ? chronologySystemFilter : baseFilter;
     // Apply filter once
     const filteredData = data.filter(currentFilter);
     // Return all filtered data or slice to max items
@@ -1506,3 +1593,35 @@ const TMDcmtPreviewWrapper = ({ currentDcmt, layoutMode, fromDTD, dcmtFile, devi
         _jsx(TMDcmtPreview, { isVisible: isVisible, onClosePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => toggleMaximize("tmDcmtPreview") : undefined, dcmtData: currentDcmt, isResizingActive: isResizingActive }) :
         _jsx(TMFileUploader, { onFileUpload: onFileUpload, onClose: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType, isResizingActive: isResizingActive, enableDragDropOverlay: panelVisibility['tmDcmtPreview'] && enableDragDropOverlay }));
 };
+const Ribbon = styled.div `
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    --f: .4em; /* control the folded part */
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    z-index: 1200;
+    line-height: 1.6;
+    padding-inline: 0.8lh;
+    padding-bottom: var(--f);
+    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
+    clip-path: polygon(100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
+    transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
+    transform-origin: 100% 100%;
+    background-color: rgba(217, 148, 13, 0.92);
+    display: inline-block;
+    padding-top: 0.1em;
+    white-space: nowrap;
+    transition: ${props => props.$isMobile ? 'none' : 'all 0.3s ease'};
+    cursor: 'default';
+    
+    ${props => !props.$isMobile && `
+        &:hover {
+            background-color: #d9940d;
+            font-size: 1.1rem;
+            transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg) scale(1.05);
+        }
+    `}
+`;