@topconsultnpm/sdkui-react-beta 6.13.44 → 6.13.46

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

@@ -5,6 +5,10 @@ interface ITMBatchUpdateFormProps {
     TID: number | undefined;
     DID: number | undefined;
     isExpertMode?: boolean;
+    isModal?: boolean;
+    titleModal?: string;
+    widthModal?: string;
+    heightModal?: string;
     onBack?: () => void;
     onSavedCallbackAsync?: () => Promise<void>;
     onStatusChanged?: (isModified: boolean, isValid: boolean) => void;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { AccessLevels, DcmtTypeListCacheService, LayoutModes, MetadataDataDomains, ResultTypes, SDK_Globals, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
 import { searchResultToMetadataValues, getSystemMetadata, calcIsModified, getListMaxItems, SDKUI_Localizator, SDKUI_Globals } from '../../../helper';
@@ -17,7 +17,8 @@ import { useMetadataEditableList } from '../../editors/TMMetadataEditor';
 import TMMetadataValues, { ShowCheckBoxesMode, AdvancedMenuButtons } from '../../editors/TMMetadataValues';
 import { TMSaveFormButtonSave, TMSaveFormButtonUndo } from '../../forms/TMSaveForm';
 import TMPanel from '../../base/TMPanel';
-const TMBatchUpdateForm = ({ inputDcmts, TID, DID, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, onSavedCallbackAsync, onBack, onStatusChanged }) => {
+import TMModal from '../../base/TMModal';
+const TMBatchUpdateForm = ({ inputDcmts, TID, DID, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", onSavedCallbackAsync, onBack, onStatusChanged }) => {
     const [metadataValues, setMetadataValues] = useState([]);
     const [metadataValuesOrig, setMetadataValuesOrig] = useState([]);
     const [validationItems, setValidationItems] = useState([]);
@@ -112,35 +113,40 @@ const TMBatchUpdateForm = ({ inputDcmts, TID, DID, isExpertMode = SDKUI_Globals.
     const totalItems = metadataValues.filter(o => o.mid && o.mid > 100).length;
     const metadataValuesSource = metadataValues.filter(o => o.mid && o.mid > 100).slice(0, showAll ? metadataValues.filter(o => o.mid && o.mid > 100).length : listMaxItems);
     const metadataValuesSourceOrig = metadataValuesOrig.filter(o => o.mid && o.mid > 100).slice(0, showAll ? metadataValuesOrig.filter(o => o.mid && o.mid > 100).length : listMaxItems);
-    return (_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: showFormulaEditor, start: showFormulaEditor ? ['50%', '50%'] : ['100%', '0%'], min: ['0', '0'], children: [_jsx(TMPanel, { title: `${SDKUI_Localizator.BatchUpdate} (${inputDcmts.length} documenti selezionati)`, onBack: deviceType === DeviceType.MOBILE ? onBack : undefined, onClose: deviceType !== DeviceType.MOBILE ? onBack : undefined, children: _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, isExpertMode: isExpertMode, showCheckBoxes: ShowCheckBoxesMode.Always, showNullValueCheckBoxes: true, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, validationItems: validationItems, isOpenDistinctValues: showDistinctValuesPanel, selectedMID: focusedMetadataValue?.mid, onFocusedItemChanged: (item) => { setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
-                                    setMetadataValues((prevItems) => prevItems.map((item) => {
-                                        const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
-                                        return newItem ? { ...item, ...newItem } : item;
+    const renderContent = () => {
+        return (_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: showFormulaEditor, start: showFormulaEditor ? ['50%', '50%'] : ['100%', '0%'], min: ['0', '0'], children: [_jsx(TMPanel, { title: `${SDKUI_Localizator.BatchUpdate} (${inputDcmts.length} documenti selezionati)`, onBack: deviceType === DeviceType.MOBILE ? onBack : undefined, onClose: deviceType !== DeviceType.MOBILE ? onBack : undefined, children: _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, isExpertMode: isExpertMode, showCheckBoxes: ShowCheckBoxesMode.Always, showNullValueCheckBoxes: true, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, validationItems: validationItems, isOpenDistinctValues: showDistinctValuesPanel, selectedMID: focusedMetadataValue?.mid, onFocusedItemChanged: (item) => { setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+                                        setMetadataValues((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:
+                                                setShowDistinctValuesPanel(!showDistinctValuesPanel);
+                                                break;
+                                            case AdvancedMenuButtons.FormulaEditor:
+                                                setShowFormulaEditor(!showFormulaEditor);
+                                                break;
+                                        }
+                                    } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: errors.length <= 0 && isModified, formMode: FormModes.Update, errorsCount: errors.length, onSaveAsync: onSavedAsync }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: FormModes.Update, onUndo: onUndoHandler })] }) }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] })] }) }), showDistinctValuesPanel && focusedMetadataValue &&
+                        _jsx(TMDistinctValues, { isModal: true, tid: TID, mid: focusedMetadataValue?.mid, separator: ', ', allowAppendMode: false, onClosePanelCallback: () => setShowDistinctValuesPanel(false), onSelectionChanged: (e) => {
+                                if (!e)
+                                    return;
+                                setMetadataValues((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue, isSelected: true } : item));
+                            } }), showFormulaEditor && focusedMetadataValue &&
+                        _jsx(TMPanel, { title: SDKUI_Localizator.FormulaEditorTitle + (focusedMetadataValue?.md?.nameLoc ? ` (${focusedMetadataValue?.md?.nameLoc})` : ''), onClose: () => setShowFormulaEditor(false), children: _jsx(TMFormulaEditor, { isModal: false, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setShowFormulaEditor(false), onApplied: (newFormula) => {
+                                    setMetadataValues((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)
                                     }));
-                                }, onAdvancedMenuClick: (e) => {
-                                    switch (e.button) {
-                                        case AdvancedMenuButtons.DistinctValues:
-                                            setShowDistinctValuesPanel(!showDistinctValuesPanel);
-                                            break;
-                                        case AdvancedMenuButtons.FormulaEditor:
-                                            setShowFormulaEditor(!showFormulaEditor);
-                                            break;
-                                    }
-                                } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: errors.length <= 0 && isModified, formMode: FormModes.Update, errorsCount: errors.length, onSaveAsync: onSavedAsync }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: FormModes.Update, onUndo: onUndoHandler })] }) }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] })] }) }), showDistinctValuesPanel && focusedMetadataValue &&
-                    _jsx(TMDistinctValues, { isModal: true, tid: TID, mid: focusedMetadataValue?.mid, separator: ', ', allowAppendMode: false, onClosePanelCallback: () => setShowDistinctValuesPanel(false), onSelectionChanged: (e) => {
-                            if (!e)
-                                return;
-                            setMetadataValues((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue, isSelected: true } : item));
-                        } }), showFormulaEditor && focusedMetadataValue &&
-                    _jsx(TMPanel, { title: SDKUI_Localizator.FormulaEditorTitle + (focusedMetadataValue?.md?.nameLoc ? ` (${focusedMetadataValue?.md?.nameLoc})` : ''), onClose: () => setShowFormulaEditor(false), children: _jsx(TMFormulaEditor, { isModal: false, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setShowFormulaEditor(false), onApplied: (newFormula) => {
-                                setMetadataValues((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)
-                                }));
-                                addOrRemoveEditableList(newFormula.mid);
-                            } }) })] }) }));
+                                    addOrRemoveEditableList(newFormula.mid);
+                                } }) })] }) }));
+    };
+    return (_jsx(_Fragment, { children: (isModal && onBack)
+            ? _jsx(TMModal, { title: titleModal, onClose: onBack, width: widthModal ?? '100%', height: heightModal ?? '100%', hidePopup: false, askClosingConfirm: true, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block', padding: "4px" }, children: renderContent() }) })
+            : renderContent() }));
 };
 export default TMBatchUpdateForm;

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

@@ -38,8 +38,9 @@ interface ITMDcmtFormProps {
 }
 declare const TMDcmtForm: React.FC<ITMDcmtFormProps>;
 export default TMDcmtForm;
-export declare const ToppyHelpCenter: ({ content, onClick, deviceType }: {
+export declare const ToppyHelpCenter: ({ content, onClick, deviceType, top }: {
     content?: any;
     onClick?: () => void;
     deviceType?: DeviceType;
+    top?: number;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -9,7 +9,7 @@ import { DownloadTypes, FormModes } from '../../../ts';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { handleArchiveVisibility, searchResultToMetadataValues } from '../../../helper/queryHelper';
-import { genUniqueId, IconShow, SDKUI_Localizator, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconRoundFileUpload, IconArrowLeft } from '../../../helper';
+import { genUniqueId, IconShow, SDKUI_Localizator, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconRoundFileUpload, IconArrowLeft, IconPreview } from '../../../helper';
 import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
 import { TMColors } from '../../../utils/theme';
 import { StyledFormButtonsContainer, StyledModalContainer, StyledToolbarCardContainer } from '../../base/Styled';
@@ -454,22 +454,23 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 gap: SDKUI_Globals.userSettings.themeSettings.gutters,
                 width: '100%',
                 height: '100%',
-            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel()) && deviceType !== DeviceType.MOBILE && isOpenDcmtForm, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], children: [_jsx(TMLayoutItem, { children: _jsx(TMPanel, { showHeader: showHeader, title: fromDTD?.nameLoc, toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {}), onBack: (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose, onClose: isClosable ? handleClose : undefined, children: metadataValuesSource.length > 0 && _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
-                                                            setFormData((prevItems) => prevItems.map((item) => {
-                                                                const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
-                                                                return newItem ? { ...item, ...newItem } : item;
-                                                            }));
-                                                        }, onAdvancedMenuClick: (e) => {
-                                                            switch (e.button) {
-                                                                case AdvancedMenuButtons.DistinctValues:
-                                                                    setIsOpenDistinctValues(!isOpenDistinctValues);
-                                                                    break;
-                                                                case AdvancedMenuButtons.FormulaEditor:
-                                                                    setIsOpenFormulaEditor(!isOpenFormulaEditor);
-                                                                    break;
-                                                            }
-                                                        } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: confirmActionPopup }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: onUndoHandler })] }) :
-                                                                        _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), showTooltip: false, caption: 'Archivia', advancedColor: TMColors.success, onClick: confirmActionPopup }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), showTooltip: false, caption: 'Pulisci', advancedColor: TMColors.tertiary, onClick: clearFormHandler }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: 'Annulla modifiche', advancedColor: TMColors.tertiary, onClick: onUndoHandler })] }) }) }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, TID: TID, DID: DID, onClose: () => setShowReAssignPopup(false) }), _jsx(ConfirmAttachmentsDialog, {})] }) }) }), isOpenPreview || isOpenMiddlePanel() ?
+            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel()) && deviceType !== DeviceType.MOBILE && isOpenDcmtForm, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], children: [_jsx(TMLayoutItem, { children: _jsx(TMPanel, { showHeader: showHeader, title: fromDTD?.nameLoc, toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {}), onBack: (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose, onClose: isClosable ? () => setIsOpenDcmtForm(false) : undefined, children: metadataValuesSource.length > 0 &&
+                                                _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+                                                                setFormData((prevItems) => prevItems.map((item) => {
+                                                                    const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
+                                                                    return newItem ? { ...item, ...newItem } : item;
+                                                                }));
+                                                            }, onAdvancedMenuClick: (e) => {
+                                                                switch (e.button) {
+                                                                    case AdvancedMenuButtons.DistinctValues:
+                                                                        setIsOpenDistinctValues(!isOpenDistinctValues);
+                                                                        break;
+                                                                    case AdvancedMenuButtons.FormulaEditor:
+                                                                        setIsOpenFormulaEditor(!isOpenFormulaEditor);
+                                                                        break;
+                                                                }
+                                                            } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: confirmActionPopup }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: onUndoHandler })] }) :
+                                                                            _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), showTooltip: false, caption: 'Archivia', advancedColor: TMColors.success, onClick: confirmActionPopup }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), showTooltip: false, caption: 'Pulisci', advancedColor: TMColors.tertiary, onClick: clearFormHandler }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: 'Annulla modifiche', advancedColor: TMColors.tertiary, onClick: onUndoHandler })] }) }) }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, TID: TID, DID: DID, onClose: () => setShowReAssignPopup(false) }), _jsx(ConfirmAttachmentsDialog, {})] }) }) }), isOpenPreview || isOpenMiddlePanel() ?
                                         _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, showSeparator: deviceType !== DeviceType.MOBILE && (isOpenPreview && isOpenMiddlePanel()), start: getSecondarySplitterStartLayout(), min: ['0', '0'], separatorColor: 'transparent', children: [isOpenMiddlePanel()
                                                         ? _jsx(TMLayoutItem, { children: _jsxs(TMPanel, { showHeader: !(isOpenDetails && layoutMode === LayoutModes.Update), title: titleText(), onClose: () => { closeMiddlePanel(); }, children: [isOpenBoard && layoutMode === LayoutModes.Update &&
                                                                         _jsx(TMDcmtBlog, { tid: TID, did: DID }), isOpenSysMetadata && layoutMode === LayoutModes.Update &&
@@ -499,6 +500,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                         ] : []),
                         ...(layoutMode !== LayoutModes.Ark ? [
                             ...(deviceType === DeviceType.MOBILE ? [{ icon: _jsx(IconArrowLeft, {}), onClick: isClosable ? undefined : handleClose }] : []),
+                            { icon: _jsx(IconPreview, {}), selected: isOpenDcmtForm, onClick: () => { setIsOpenDcmtForm(!isOpenDcmtForm); } },
                             { icon: _jsx(IconShow, {}), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
                                     setIsOpenPreview(!isOpenPreview); } },
                             { icon: _jsx(IconBoard, {}), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
@@ -602,6 +604,6 @@ const ToppyImage = styled.img `
   height: ${props => props.$isMobile ? '140px' : '200px'};
   cursor: ${props => props.$isMobile ? 'pointer' : 'default'};
 `;
-export const ToppyHelpCenter = ({ content, onClick, deviceType }) => {
-    return (_jsxs(ToppyContainer, { children: [_jsx(ToppyImage, { "$isMobile": deviceType === DeviceType.MOBILE, onClick: onClick, src: toppy, alt: "Toppy" }), _jsx("div", { style: { top: deviceType === DeviceType.MOBILE ? -180 : -200, right: deviceType === DeviceType.MOBILE ? 20 : 1, transform: 'rotate(20deg)', position: 'absolute', width: 'max-content', height: 'max-content' }, children: content })] }));
+export const ToppyHelpCenter = ({ content, onClick, deviceType, top = -200 }) => {
+    return (_jsxs(ToppyContainer, { children: [_jsx(ToppyImage, { "$isMobile": deviceType === DeviceType.MOBILE, onClick: onClick, src: toppy, alt: "Toppy" }), _jsx("div", { style: { top: deviceType === DeviceType.MOBILE ? -180 : top, right: deviceType === DeviceType.MOBILE ? 20 : 1, transform: 'rotate(20deg)', position: 'absolute', width: 'max-content', height: 'max-content' }, children: content })] }));
 };

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

@@ -1,11 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DataColumnTypes, DcmtTypeListCacheService, MetadataDataDomains, MetadataFormats, RelationCacheService, RelationTypes, ResultTypes, SDK_Globals, SystemMIDs } from '@topconsultnpm/sdk-ts-beta';
 import { ContextMenu } from 'devextreme-react';
 import { TMNothingToShow } from './TMDcmtPreview';
 import TMDcmtForm from './TMDcmtForm';
 import TMSearchResult from '../search/TMSearchResult';
-import { genUniqueId, getExceptionMessage, IconFolder, IconShow, IconBoard, IconDcmtTypeSys, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, svgToString, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMultipleSelection, IconMenuVertical, IconSearchCheck, IconDataList } from '../../../helper';
+import { genUniqueId, getExceptionMessage, IconFolder, IconDetailDcmts, SDKUI_Localizator, svgToString, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMultipleSelection, IconMenuVertical, IconSearchCheck, IconDataList, SDKUI_Globals, IconInfo } from '../../../helper';
 import { hasDetailRelations } from '../../../helper/dcmtsHelper';
 import { FormModes, SearchResultContext } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
@@ -23,7 +23,10 @@ import TMDataListItemViewer from '../../viewers/TMDataListItemViewer';
 import { TMDcmtTypeTooltip } from '../../viewers/TMTidViewer';
 import TMTreeView from '../../base/TMTreeView';
 import TMDcmtIcon from './TMDcmtIcon';
-import TMPanelManager from '../../base/TMPanelManager';
+import { TMPanelManagerContextProvider, useTMPanelContext } from '../../layout/panel/TMPanelContext';
+import { useResizablePanels } from '../../layout/panel/useResizablePanels';
+import { TMPanelToolbar } from '../../layout/panel/TMPanelToolbar';
+import TMPanel from '../../base/TMPanel';
 let abortController = new AbortController();
 const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentDcmtIndicator = true, allowNavigation, canNext, canPrev, onNext, onPrev, onBack, appendMasterDcmts, onTaskCreateRequest }) => {
     const [id, setID] = useState('');
@@ -378,7 +381,7 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
     const toolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowMultipleSelection && _jsx("p", { style: { color: TMColors.colorHeader, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${selectedItems.length} selezionati` }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Selezione multipla', icon: _jsx(IconMultipleSelection, { fontSize: 16, color: allowMultipleSelection ? TMColors.tertiary : 'white' }), onClick: () => setAllowMultipleSelection(!allowMultipleSelection) }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(IconMenuVertical, { id: `commands-detail-${id}`, color: 'white', cursor: 'pointer' }), _jsx(ContextMenu, { showEvent: 'click', dataSource: commandsMenuItems, target: `#commands-detail-${id}` })] });
     const getTitle = () => isForMaster ? `${SDKUI_Localizator.DcmtsMaster} - ${dtdMaster?.nameLoc}` : SDKUI_Localizator.DcmtsDetail;
     const isMobile = deviceType === DeviceType.MOBILE;
-    const renderTMTreeView = (handleTogglePanel) => _jsx(_Fragment, { children: isLoading ? _jsx(_Fragment, {}) :
+    const renderTMTreeView = (handleTogglePanel) => _jsx(TMPanel, { title: getTitle(), onBack: onBack, toolbar: toolbar, allowMaximize: !isMobile, children: isLoading ? _jsx(_Fragment, {}) :
             data.length <= 0
                 ?
                     _jsx(TMNothingToShow, { text: getTitle(), secondText: SDKUI_Localizator.NoDataToDisplay, icon: isForMaster ? _jsx(IconDetailDcmts, { fontSize: 96, transform: 'scale(-1, 1)' }) : _jsx(IconDetailDcmts, { fontSize: 96 }) })
@@ -387,129 +390,46 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
     const renderTMFormOrResult = useMemo(() => (handleTogglePanel) => {
         return (_jsx(_Fragment, { children: focusedItem?.isDcmt ?
                 _jsx(TMDcmtForm, { TID: focusedItem?.tid, DID: focusedItem.did, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: deviceType === DeviceType.MOBILE, showPreview: showPreview, showBoard: showBoard, showSysMetadata: showSysMetadata, showDcmtForm: showDcmtForm, onClose: () => { setShowDcmtForm(false); }, onClosePreviewPanel: () => { setShowPreview(false); } }) :
-                _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, searchResults: focusedItem?.searchResult ?? [], showPreview: showPreview, showBoard: showBoard, showSysMetadata: showSysMetadata, showSearchResultSidebar: false, onClose: () => { setShowDcmtForm(false); }, onClosePreviewPanel: () => {
+                _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, allowRelations: false, openDcmtFormAsModal: true, searchResults: focusedItem?.searchResult ?? [], 
+                    // showPreview={showPreview}
+                    // showBoard={showBoard}
+                    // showSysMetadata={showSysMetadata}
+                    showSearchResultSidebar: false, onClose: () => { setShowDcmtForm(false); }, onClosePreviewPanel: () => {
                         setShowPreview(false);
                         handleTogglePanel("commandPreview");
                     }, onTaskCreateRequest: onTaskCreateRequest }) }));
     }, [focusedItem, showPreview, showBoard, showSysMetadata, showDcmtForm, deviceType]);
-    const panelsConfig = [
+    const panels = [
         {
             id: 'TMTreeView',
             name: getTitle(),
-            toolbarOptions: { icon: _jsx(IconDataList, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 1 },
-            type: 'content',
+            children: [],
             contentOptions: {
-                visible: true,
+                width: '50%',
                 height: '100%',
-                width: '20%',
-                content: renderTMTreeView,
-                panelContainer: {
-                    title: getTitle(),
-                    allowMaximize: !isMobile,
-                    onBack: onBack,
-                    toolbar: toolbar
-                },
             },
+            toolbarOptions: {
+                icon: _jsx(IconDataList, { fontSize: 24 }),
+                visible: true,
+                isActive: true
+            }
         },
         {
             id: 'TMFormOrResult',
             name: focusedItem?.isDcmt ? "Form del documento" : SDKUI_Localizator.SearchResult,
-            toolbarOptions: { icon: _jsx(IconSearchCheck, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 2 },
-            type: 'content',
+            children: [],
             contentOptions: {
-                visible: true,
+                width: '50%',
                 height: '100%',
-                width: '20%',
-                content: renderTMFormOrResult,
-            },
-        },
-        {
-            id: 'commandPreview',
-            name: SDKUI_Localizator.PreviewDocument,
-            toolbarOptions: {
-                icon: _jsx(IconShow, { fontSize: 24 }),
-                visible: true,
-                disabled: !focusedItem,
-                isActive: showPreview,
-                orderNumber: 3,
             },
-            type: 'button',
-            buttonOptions: {
-                onClick: () => {
-                    setShowPreview(prev => !prev);
-                },
-            },
-        },
-        {
-            id: 'commandSysMetadata',
-            name: SDKUI_Localizator.MetadataSystem,
-            toolbarOptions: {
-                icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }),
-                visible: true,
-                disabled: !focusedItem,
-                isActive: showSysMetadata,
-                orderNumber: 3,
-            },
-            type: 'button',
-            buttonOptions: {
-                onClick: () => {
-                    setShowSysMetadata(prev => !prev);
-                },
-            },
-        },
-        {
-            id: 'commandBoard',
-            name: SDKUI_Localizator.BlogCase,
             toolbarOptions: {
-                icon: _jsx(IconBoard, { fontSize: 24 }),
-                disabled: !focusedItem,
+                icon: _jsx(IconSearchCheck, { fontSize: 24 }),
                 visible: true,
-                isActive: showBoard,
-                orderNumber: 3,
-            },
-            type: 'button',
-            buttonOptions: {
-                onClick: () => {
-                    setShowBoard(prev => !prev);
-                },
-            },
-        },
-        {
-            id: 'commandZeroDcmts',
-            name: "Consenti dettagli con 0 documenti",
-            toolbarOptions: {
-                icon: _jsx(IconCheckFile, { fontSize: 24 }),
-                visible: true,
-                isActive: showZeroDcmts,
-                orderNumber: 3,
-                beginGroup: true,
-            },
-            type: 'button',
-            buttonOptions: {
-                onClick: () => {
-                    setShowZeroDcmts(prev => !prev);
-                },
-            },
-        },
-        {
-            id: 'commandMasterDcmts',
-            name: SDKUI_Localizator.DcmtsMaster,
-            toolbarOptions: {
-                icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)', fontSize: 24 }),
-                disabled: !focusedItem?.isDcmt,
-                visible: true,
-                isActive: false,
-                orderNumber: 3,
-            },
-            type: 'button',
-            buttonOptions: {
-                onClick: () => {
-                    appendMasterDcmts?.(focusedItem?.tid, focusedItem?.did);
-                },
-            },
-        },
+                isActive: true
+            }
+        }
     ];
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsx(TMPanelManager, { panels: panelsConfig, initialMobilePanelId: 'TMTreeView', toolbarMode: 1 }) }));
+    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsx(TMPanelManagerContextProvider, { panels: panels, initialMobilePanelId: "TMTreeView", children: _jsx(TMMasterDetailPanelContent, { isMobile: isMobile, panelTMTreeView: renderTMTreeView, panelTMFormOrResult: renderTMFormOrResult }) }) }));
 };
 export default TMMasterDetailDcmts;
 function getMetadataKeys(obj) {
@@ -589,3 +509,60 @@ const getDisplayValueByColumn = (col, value) => {
 export function IconBackhandIndexPointingRight(props) {
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 128 128", width: "1em", height: "1em", ...props, children: [_jsx("path", { fill: "#E0BB95", d: "M58.7 41.1c10.8.1 53.3.4 54.9.4c12.8.3 12.7 16.7.7 16.9c-1.5 0-25 1.1-32.2 1.3c5.2 2 7.5 11.9-3.1 14.9c5 2.6 6.4 12.9-4.2 14.7c3.8 2.5 4.3 10.9-6 14.2c-8.4 2.7-28.2 2-40.3-2.3c-9.1-3.3-8.4-5.8-16.7-5.6c-1.4 0-2.1-1.1-2.4-2.4c-1.3-5.9-1.9-26.3-.3-33.8c.4-1.6 1.7-1.8 2.2-1.9c2.1-.4 4.2-2.5 5-4.3c3.2-6.4 12.8-12.8 23.4-18.2c5.5-2.8 9.2-8.8 10.4-18.3c.8-6.3 8.6-7.7 11.8-2.5c2.2 3.6 2.9 7 2.9 10.4c.2 6.2-1.6 10.1-6.1 16.5" }), _jsx("defs", { children: _jsx("path", { id: "notoBackhandIndexPointingRightMediumLightSkinTone0", d: "M58.7 41.1c10.8.1 53.3.4 54.9.4c12.8.3 12.7 16.7.7 16.9c-1.5 0-25 1.1-32.2 1.3c5.2 2 7.5 11.9-3.1 14.9c5 2.6 6.4 12.9-4.2 14.7c3.8 2.5 4.3 10.9-6 14.2c-8.4 2.7-28.2 2-40.3-2.3c-9.1-3.3-8.4-5.8-16.7-5.6c-1.4 0-2.1-1.1-2.4-2.4c-1.3-5.9-1.9-26.3-.3-33.8c.4-1.6 1.7-1.8 2.2-1.9c2.1-.4 4.2-2.5 5-4.3c3.2-6.4 12.8-12.8 23.4-18.2c5.5-2.8 9.2-8.8 10.4-18.3c.8-6.3 8.6-7.7 11.8-2.5c2.2 3.6 2.9 7 2.9 10.4c.2 6.2-1.6 10.1-6.1 16.5" }) }), _jsx("clipPath", { id: "notoBackhandIndexPointingRightMediumLightSkinTone1", children: _jsx("use", { href: "#notoBackhandIndexPointingRightMediumLightSkinTone0" }) }), _jsx("g", { fill: "#D19661", clipPath: "url(#notoBackhandIndexPointingRightMediumLightSkinTone1)", children: _jsx("path", { d: "M73.3 59.5c.1 1.6 2.8 2.9 2.8 6.4c0 3.7-3 4.7-3.1 7.5c-.1 2.7 2 3.8 1.5 7.7c-.6 4.5-4.1 4-4.2 7.1c0 2.7 1.8 3.2 1.8 6.6c0 3.1-3 5.8-5.5 7s-1.2 3.4 0 3.4s11.9-1.3 14.5-8.2c3-8 11-29.6 8.8-36.9c-7.1-1-11.5-1.6-13.7-1.8c-.7-.1-2.9-.6-2.9 1.2M60.1 40.7c0 .9.1 1.5 1 1.5c1 0 43.6 2.1 51.6 2.3c9.2.2 8.7 7.6 5.9 10.1c-1.9 1.7.6 4 2.2 2.6s4.4-3.4 4.3-8.4s-4.4-8.6-8.4-8.9c-3.8-.3-56.6.8-56.6.8m-51.9 21c15.9 0 14.1-11.7 25.2-18.9c15.4-10.1 16.3-11.1 19.7-25.2c1.2-4.9 5.7-4.4 7.7-2.1s4.9-1.3 3.6-2.7s-7.8-7.7-14.8-1.1s-42 46.2-42 46.2z" }) }), _jsx("defs", { children: _jsx("use", { href: "#notoBackhandIndexPointingRightMediumLightSkinTone0", id: "notoBackhandIndexPointingRightMediumLightSkinTone2" }) }), _jsx("clipPath", { id: "notoBackhandIndexPointingRightMediumLightSkinTone3", children: _jsx("use", { href: "#notoBackhandIndexPointingRightMediumLightSkinTone2" }) }), _jsx("g", { fill: "#8D542E", clipPath: "url(#notoBackhandIndexPointingRightMediumLightSkinTone3)", children: _jsx("path", { d: "M58.7 41.1h-1.9c-.4 0-.8-.4-.2-1.3s5.8-8 5.8-15c0-3.2-.5-7.7-3.4-12.4c-.6-.9.2-1.4.9-1c.7.5 6.4 3.2 6.5 13.4s-7.7 16.3-7.7 16.3m65.1 8.8c-.5 0-1.1-.2-1.7 1c-.7 1.5-3.1 4.4-8.4 4.7s-38.1 2.5-38.9 2.5c-1.1 0-1.2 1.9.1 1.8c1.7-.1 7.2-.2 7.2-.2s30.9 1.8 36.9-.6c6.1-2.4 4.8-9.2 4.8-9.2M86.6 68.5c-.3-.1-.7-.1-1 .3c-1.5 2-4.6 3.5-10.6 3.3c-1.4 0-1.6 2.7.1 2.7c.7 0 4-.1 4-.1l6.6-.2zm-3.6 15c-.3-.1-.7-.1-1.1.4c-1.5 2-3.5 2.8-9.7 3c-1.5.1-1.4 2.6.2 2.6c1.1 0 2.4-.1 2.4-.1l7-.6zm-5.4 12.7c-.3-.1-.8-.2-1.2.4c-.8 1.1-2.9 3-7.5 4.4c-3.7 1.1-21.3 1.9-32.5-.7c-2.3-.5-9.9-3-13.6-5.3s-7.3-1.6-8.3-1.4s-6.3.7-6.3.7l2.5 3.7l27 8.6l38.5-.6z" }) })] }));
 }
+const TMMasterDetailPanelContent = ({ isMobile, panelTMTreeView, panelTMFormOrResult }) => {
+    const gutters = SDKUI_Globals.userSettings.themeSettings.gutters;
+    const { visibility, maximizedPanelId, getPanelDimensions, togglePanel, toggleMaximizePanel, setPanelDisabledById, setPanelVisibility, hasVisiblePanels } = useTMPanelContext();
+    const containerRef = useRef(null);
+    const { onMouseDown } = useResizablePanels(containerRef);
+    const { width: widthPanel1, height: heightPanel1 } = getPanelDimensions('TMTreeView');
+    const { width: widthPanel2, height: heightPanel2 } = getPanelDimensions('TMFormOrResult');
+    return (_jsxs("div", { style: { display: 'flex', height: '100%', width: '100%', flexDirection: isMobile ? 'column' : 'row', gap: gutters }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    flexGrow: 1,
+                    width: `calc(100% - ${isMobile ? 0 : 70}px)`,
+                    height: `calc(100% - ${isMobile ? 55 : 0}px)`,
+                    flexDirection: 'row'
+                }, children: _jsxs("div", { style: { width: '100%', height: '100%' }, children: [_jsxs("div", { ref: containerRef, style: {
+                                display: hasVisiblePanels() ? 'flex' : 'none',
+                                width: '100%',
+                                height: '100%',
+                            }, children: [_jsx("div", { style: {
+                                        display: visibility.TMTreeView ? 'block' : 'none',
+                                        width: widthPanel1,
+                                        height: heightPanel1,
+                                        overflow: 'hidden',
+                                    }, children: panelTMTreeView() }), visibility.TMTreeView && visibility.TMFormOrResult && maximizedPanelId === null && (_jsx("div", { style: {
+                                        background: 'transparent',
+                                        cursor: 'col-resize',
+                                        width: `${gutters}px`,
+                                        height: '100%',
+                                        userSelect: 'none',
+                                    }, onMouseDown: (e) => onMouseDown(e, 'TMTreeView', 'TMFormOrResult', true) })), _jsx("div", { style: {
+                                        display: visibility.TMFormOrResult ? 'block' : 'none',
+                                        width: widthPanel2,
+                                        height: heightPanel2,
+                                        overflow: 'hidden',
+                                    }, children: panelTMFormOrResult() })] }), _jsxs("div", { style: {
+                                display: hasVisiblePanels() ? 'none' : 'flex',
+                                flexDirection: 'column',
+                                width: '100%',
+                                height: '100%',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                fontSize: '1.5rem',
+                                fontWeight: 'bold',
+                                color: '#888',
+                                backgroundColor: '#fff',
+                                borderRadius: '10px'
+                            }, children: [_jsx(IconInfo, { style: { fontSize: 50 } }), _jsx("div", { children: SDKUI_Localizator.NoPanelSelected })] })] }) }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: isMobile ? 'row' : 'column',
+                    alignItems: 'center',
+                    width: isMobile ? '100%' : '50px',
+                    height: isMobile ? '50px' : 'max-content',
+                    background: 'transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box',
+                    borderRadius: isMobile ? '10px' : '10px 0px 0px 10px',
+                    padding: '10px',
+                    gap: '10px'
+                }, children: _jsx(TMPanelToolbar, {}) })] }));
+};

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

@@ -65,7 +65,7 @@ const getSharingModeColor = (sharingMode) => {
 export const getTooltipBySqd = (sqd) => {
     if (!sqd)
         return null;
-    return (_jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10 }, children: [_jsx(IconSavedQuery, { color: getSharingModeColor(sqd.sharingMode), fontSize: 20, style: { flexShrink: 0 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs("div", { children: ["ID: ", sqd.id] }), _jsxs("div", { children: ["Master TID: ", sqd.masterTID] }), sqd.description && _jsx("div", { children: `${SDKUI_Localizator.Description}: ${sqd.description}` })] })] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.OwnerName, ": ", sqd.ownerName, " (", sqd.ownerID, ")"] }), _jsx("div", { children: LocalizeSharingModes(sqd.sharingMode) }), _jsxs("div", { children: ["Default: ", sqd.isDefault == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Filtro semplice", ": ", sqd.isEasyWhere == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Esegui ricerca immediatamente", ": ", sqd.runSearchWhenSelected == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.CreationTime, ": ", Globalization.getDateTimeDisplayValue(sqd.creationTime)] }), _jsxs("div", { children: [SDKUI_Localizator.LastUpdateTime, ": ", Globalization.getDateTimeDisplayValue(sqd.lastUpdateTime)] })] }));
+    return (_jsxs("div", { style: { textAlign: "left", fontSize: '1rem', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10 }, children: [_jsx(IconSavedQuery, { color: getSharingModeColor(sqd.sharingMode), fontSize: 20, style: { flexShrink: 0 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs("div", { children: ["ID: ", sqd.id] }), _jsxs("div", { children: ["Master TID: ", sqd.masterTID] }), sqd.description && _jsx("div", { children: `${SDKUI_Localizator.Description}: ${sqd.description}` })] })] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.OwnerName, ": ", sqd.ownerName, " (", sqd.ownerID, ")"] }), _jsx("div", { children: LocalizeSharingModes(sqd.sharingMode) }), _jsxs("div", { children: ["Default: ", sqd.isDefault == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Filtro semplice", ": ", sqd.isEasyWhere == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Esegui ricerca immediatamente", ": ", sqd.runSearchWhenSelected == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.CreationTime, ": ", Globalization.getDateTimeDisplayValue(sqd.creationTime)] }), _jsxs("div", { children: [SDKUI_Localizator.LastUpdateTime, ": ", Globalization.getDateTimeDisplayValue(sqd.lastUpdateTime)] })] }));
 };
 const initialSQDsMaxItems = 12;
 const SavedQueryContexMenu = ({ sqd, manageDefault, isMobile, deleteAsync, favManageAsync, setDefaultAsync, setInfoSQD }) => _jsx(ContextMenu, { items: [

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

@@ -15,7 +15,6 @@ import { TMPanelManagerContextProvider, useTMPanelContext } from '../../layout/p
 import { TMPanelToolbar } from '../../layout/panel/TMPanelToolbar';
 import { useResizablePanels } from '../../layout/panel/useResizablePanels';
 import TMPanel from '../../base/TMPanel';
-import { Gutters } from '../../../utils/theme';
 var TMSearchViews;
 (function (TMSearchViews) {
     TMSearchViews[TMSearchViews["Search"] = 0] = "Search";
@@ -179,8 +178,7 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
                     }, onTaskCreateRequest: onTaskCreateRequest, onClose: () => { setCurrentSearchView(TMSearchViews.Search); } })] }));
 };
 const TMSearchPanelContent = ({ isMobile, panelTMTreeSelector, panelTMRecentsManager, panelTMSearchQueryPanel, panelTMSavedQuerySelector }) => {
-    const gutters = Gutters.getGutters();
-    console.log('TMSearchPanelContent gutters', gutters);
+    const gutters = SDKUI_Globals.userSettings.themeSettings.gutters;
     const { visibility, maximizedPanelId, getPanelDimensions, togglePanel, toggleMaximizePanel, setPanelDisabledById, setPanelVisibility, hasVisiblePanels } = useTMPanelContext();
     const containerRef = useRef(null);
     const { onMouseDown } = useResizablePanels(containerRef);

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

@@ -187,7 +187,7 @@ const TMSearchQueryEditor = ({ qd, fromDTD, dcmtTypesList = [], isOpenDistinctVa
                         }, onWhereItemChange: (newWi) => { handleWhereItemChanged(newWi); }, onHideEditor: () => { setCurrentEditingMID(0); } }) }, `${wi.tid}_${wi.mid}_${index}`))) })
             :
                 _jsx("div", { style: { display: 'grid', borderRadius: '8px', alignItems: 'center', overflow: 'auto', padding: '5px', gap: '8px', gridTemplateColumns: 'minmax(0, max-content) minmax(0, max-content) minmax(50%, 1fr)' }, children: qd?.where?.slice(0, showAllMdWhere ? qd?.where.length : initialMaxItems).map((whereItem, index) => {
-                        return (_jsxs(React.Fragment, { children: [_jsx("div", { id: `wi-item-${whereItem.mid}`, style: { gridColumn: 1 }, children: _jsx(TMMidViewer, { isMetadataSelected: showDistinctValuesPanel && whereItem.mid === focusedTidMid?.mid, showIcon: true, tid_mid: { tid: whereItem?.tid, mid: whereItem?.mid, aliasTID: whereItem?.alias } }) }), _jsx("div", { style: { gridColumn: 2, paddingLeft: '5px', paddingRight: '5px' }, children: _jsx(TMDropDownMenu, { backgroundColor: colorOperator, color: getOperatorColor(whereItem), items: getQueryOperatorsMenuItems(whereItem, index), content: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(whereItem.operator) }) }) }), _jsxs("div", { style: { gridColumn: 3, position: 'relative' }, onClick: () => { handleMetadataSelection(whereItem.tid, whereItem.mid); }, onFocus: () => { handleMetadataSelection(whereItem.tid, whereItem.mid); }, children: [_jsx(TMSearchWhereItemEditor, { isSelected: showDistinctValuesPanel && whereItem.mid === focusedTidMid?.mid, openChooserBySingleClick: !showDistinctValuesPanel, whereItem: whereItem, index: index, isEditableList: isEditableList(whereItem.mid), queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid == whereItem.mid)?.queryParams ?? [], onValueChanged: (values) => {
+                        return (_jsxs(React.Fragment, { children: [_jsx("div", { id: `wi-item-${whereItem.mid}`, style: { gridColumn: 1 }, children: _jsx(TMMidViewer, { color: TMColors.primaryColor, isMetadataSelected: showDistinctValuesPanel && whereItem.mid === focusedTidMid?.mid, showIcon: true, tid_mid: { tid: whereItem?.tid, mid: whereItem?.mid, aliasTID: whereItem?.alias } }) }), _jsx("div", { style: { gridColumn: 2, paddingLeft: '5px', paddingRight: '5px' }, children: _jsx(TMDropDownMenu, { backgroundColor: colorOperator, color: getOperatorColor(whereItem), items: getQueryOperatorsMenuItems(whereItem, index), content: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(whereItem.operator) }) }) }), _jsxs("div", { style: { gridColumn: 3, position: 'relative' }, onClick: () => { handleMetadataSelection(whereItem.tid, whereItem.mid); }, onFocus: () => { handleMetadataSelection(whereItem.tid, whereItem.mid); }, children: [_jsx(TMSearchWhereItemEditor, { isSelected: showDistinctValuesPanel && whereItem.mid === focusedTidMid?.mid, openChooserBySingleClick: !showDistinctValuesPanel, whereItem: whereItem, index: index, isEditableList: isEditableList(whereItem.mid), queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid == whereItem.mid)?.queryParams ?? [], onValueChanged: (values) => {
                                                 handleWhereItemChanged({ ...whereItem, value1: values[0], value2: values[1] });
                                             }, onCascadeRefreshDynDataLists: (ddlToBeRefreshed) => {
                                                 let newDynDataListsToBeRefreshed = [];

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

@@ -279,7 +279,7 @@ export const refreshLastSearch = async (qd) => {
 export const StyledToppyTextContainer = styled.div ` 
     padding: 30px 50px; 
     max-width: 345px; 
-    border: 1px solid #8D2F88; 
+    border: 1px solid #2559A5; 
     border-radius: 30px; 
     display: flex; 
     align-items: center; 
@@ -287,7 +287,7 @@ export const StyledToppyTextContainer = styled.div `
 `;
 export const StyledToppyText = styled.p ` 
     text-align: center; 
-    color: #8d2f88; 
+    color: #2559A5; 
     font-size: 30px; 
     user-select: none;
 `;

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

@@ -6,8 +6,10 @@ interface ITMSearchResultProps {
     title?: string;
     searchResults: SearchResultDescriptor[] | undefined;
     allowFloatingBar?: boolean;
+    allowRelations?: boolean;
     isClosable?: boolean;
     isVisible?: boolean;
+    openDcmtFormAsModal?: boolean;
     showDcmtForm?: boolean;
     showPreview?: boolean;
     showBoard?: boolean;

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SDK_Globals, DataColumnTypes, MetadataDataDomains, DataListViewModes, MetadataFormats, LayoutModes, TemplateTIDs, DcmtTypeListCacheService, AccessLevels, SystemMIDsAsNumber, ArchiveConstraints } from '@topconsultnpm/sdk-ts-beta';
 import styled from 'styled-components';
 import { getCommandsMenuItems, getSelectedDcmtsOrFocused } from './TMSearchResultsMenuItems';
 import { ContextMenu } from 'devextreme-react';
-import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, IconDetailDcmts, SDKUI_Localizator, IconDelete, IconRefresh, IconMenuVertical, IconDownload, IconSignature, deepCompare, getDataColumnName, searchResultDescriptorToSimpleArray, IconArchive, IconActivityLog, IconStar, IconFreeSearch, IconChevronDown, searchResultToMetadataValues, SDKUI_Globals, IconSearchCheck, IconBatchUpdate } from '../../../helper';
+import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, IconDetailDcmts, SDKUI_Localizator, IconDelete, IconRefresh, IconMenuVertical, IconDownload, IconSignature, deepCompare, getDataColumnName, searchResultDescriptorToSimpleArray, IconArchive, IconActivityLog, IconStar, IconFreeSearch, IconChevronDown, searchResultToMetadataValues, SDKUI_Globals, IconSearchCheck, IconInfo } from '../../../helper';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { useInputAttachmentsDialog, useInputCvtFormatDialog } from '../../../hooks/useInputDialog';
 import { DcmtOperationTypes, FormModes, SearchResultContext, DownloadTypes } from '../../../ts';
@@ -33,7 +33,10 @@ import TMBatchUpdateForm from '../../features/documents/TMBatchUpdateForm';
 import TMDcmtForm, { ToppyHelpCenter } from '../documents/TMDcmtForm';
 import TMDcmtBlog from '../documents/TMDcmtBlog';
 import TMDcmtIcon from '../documents/TMDcmtIcon';
-import TMPanelManager from '../../base/TMPanelManager';
+import { TMPanelManagerContextProvider, useTMPanelContext } from '../../layout/panel/TMPanelContext';
+import { useResizablePanels } from '../../layout/panel/useResizablePanels';
+import TMPanel from '../../base/TMPanel';
+import { TMPanelToolbar } from '../../layout/panel/TMPanelToolbar';
 //#region Internal Components
 const CommandsContextMenu = React.memo(({ target, menuItems, allowPin }) => {
     return (_jsx(ContextMenu, { showEvent: 'click', dataSource: menuItems, target: `${target}` }));
@@ -48,7 +51,7 @@ const orderByName = (array) => {
         return 1;
     } return 0; });
 };
-const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisible = true, searchResults = [], showSearchResultSidebar = true, showSelector = false, onClosePreviewPanel, showDcmtForm = false, showBoard = false, showPreview = false, title, showSysMetadata = false, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync, onSelectedTIDChanged, onUpdate, onClose, onTaskCreateRequest }) => {
+const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisible = true, allowRelations = true, openDcmtFormAsModal = false, searchResults = [], showSearchResultSidebar = true, showSelector = false, onClosePreviewPanel, showDcmtForm = false, showBoard = false, showPreview = false, title, showSysMetadata = false, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync, onSelectedTIDChanged, onUpdate, onClose, onTaskCreateRequest }) => {
     const [id, setID] = useState('');
     const [showApprovePopup, setShowApprovePopup] = useState(false);
     const [showRejectPopup, setShowRejectPopup] = useState(false);
@@ -338,167 +341,90 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
     if (!searchResults || searchResults.length <= 0)
         return _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoDcmtFound })] });
     const isMobile = deviceType === DeviceType.MOBILE;
-    const renderTMSearchResult = (handleTogglePanel) => _jsxs(_Fragment, { children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', min: ['0', '0'], showSeparator: showSelector && deviceType !== DeviceType.MOBILE, start: showSelector ? deviceType !== DeviceType.MOBILE ? ['25%', '75%'] : splitterSize : ['0%', '100%'], children: [showSelector ?
-                                _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, onSelectionChanged: onSearchResultSelectionChanged }) })
-                                :
-                                    _jsx(_Fragment, {}), _jsxs(TMLayoutItem, { children: [_jsx(TMSearchResultGrid
-                                    // allowMultipleSelection={allowMultipleSelection}
-                                    , { 
+    const renderTMSearchResult = (handleTogglePanel) => _jsx(TMPanel, { title: getTitleHeader(), showHeader: showToolbarHeader, allowMaximize: !isMobile, onBack: (!isClosable && context === SearchResultContext.METADATA_SEARCH) ? onBack : undefined, onClose: isClosable ? onBack : undefined, toolbar: searchResutlToolbar, children: _jsxs(_Fragment, { children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', min: ['0', '0'], showSeparator: showSelector && deviceType !== DeviceType.MOBILE, start: showSelector ? deviceType !== DeviceType.MOBILE ? ['25%', '75%'] : splitterSize : ['0%', '100%'], children: [showSelector ?
+                                    _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, onSelectionChanged: onSearchResultSelectionChanged }) })
+                                    :
+                                        _jsx(_Fragment, {}), _jsxs(TMLayoutItem, { children: [_jsx(TMSearchResultGrid
                                         // allowMultipleSelection={allowMultipleSelection}
-                                        inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], lastUpdateSearchTime: lastUpdateSearchTime, onDblClick: () => openFormHandler(LayoutModes.Update), onContextMenuPreparing: onContextMenuPreparing, onSelectionChanged: (items) => { setSelectedItems(items); }, onVisibleItemChanged: setVisibleItems, onFocusedItemChanged: setFocusedItem }), allowFloatingBar && showFloatingBar && deviceType !== DeviceType.MOBILE &&
-                                        _jsxs(TMFloatingToolbar, { backgroundColor: TMColors.primaryColor, initialLeft: '10px', initialTop: 'calc(100% - 75px)', children: [fromDTD?.perm?.canRetrieveFile === AccessLevels.Yes && _jsx(TMButton, { btnStyle: 'icon', caption: "Download file", disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, icon: _jsx(IconDownload, { color: 'white' }), onClick: () => { downloadDcmtsAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DownloadTypes.Dcmt); } }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Firma e marca', icon: _jsx(IconSignature, { color: 'white' }), onClick: () => { ShowAlert({ message: "TODO Firma e marca ", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), _jsx(IconMenuVertical, { id: `commands-floating-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-floating-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] })] })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) }), (isVisible && fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isOpenDcmtForm && !isOpenDetails && !isOpenMaster) &&
-                        _jsx(ToppyHelpCenter, { deviceType: deviceType, 
-                            // onClick={() => isMobile ? openConfigureMode?.() : undefined}
-                            content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), approveDisable: disable, rejectDisable: disable, reassignDisable: disable, infoDisable: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length !== 1 }) }) })] }), _jsx(ConfirmFormatDialog, {}), _jsx(ConfirmAttachmentsDialog, {})] });
+                                        , { 
+                                            // allowMultipleSelection={allowMultipleSelection}
+                                            inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], lastUpdateSearchTime: lastUpdateSearchTime, onDblClick: () => openFormHandler(LayoutModes.Update), onContextMenuPreparing: onContextMenuPreparing, onSelectionChanged: (items) => { setSelectedItems(items); }, onVisibleItemChanged: setVisibleItems, onFocusedItemChanged: setFocusedItem }), allowFloatingBar && showFloatingBar && deviceType !== DeviceType.MOBILE &&
+                                            _jsxs(TMFloatingToolbar, { backgroundColor: TMColors.primaryColor, initialLeft: '10px', initialTop: 'calc(100% - 75px)', children: [fromDTD?.perm?.canRetrieveFile === AccessLevels.Yes && _jsx(TMButton, { btnStyle: 'icon', caption: "Download file", disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, icon: _jsx(IconDownload, { color: 'white' }), onClick: () => { downloadDcmtsAsync(getSelectedDcmtsOrFocused(selectedItems, focusedItem), DownloadTypes.Dcmt); } }), _jsx(TMButton, { btnStyle: 'icon', caption: 'Firma e marca', icon: _jsx(IconSignature, { color: 'white' }), onClick: () => { ShowAlert({ message: "TODO Firma e marca ", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), _jsx(IconMenuVertical, { id: `commands-floating-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-floating-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] })] })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onUpdate: onUpdate, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) }), isOpenBatchUpdate && _jsx(TMBatchUpdateForm, { isModal: true, titleModal: SDKUI_Localizator.BatchUpdate, inputDcmts: getSelectionDcmtInfo(), TID: focusedItem ? focusedItem?.TID : selectedItems[0]?.TID, DID: focusedItem ? focusedItem?.DID : selectedItems[0]?.DID, onBack: () => { handleTogglePanel("TMBatchUpdate"); }, onSavedCallbackAsync: async () => {
+                                setIsOpenBatchUpdate(false);
+                                setIsModifiedBatchUpdate(false);
+                                await refreshSelectionDataRowsAsync();
+                            }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }), (isVisible && fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isOpenDcmtForm && !isOpenDetails && !isOpenMaster) &&
+                            _jsx(ToppyHelpCenter, { deviceType: deviceType, 
+                                // onClick={() => isMobile ? openConfigureMode?.() : undefined}
+                                content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), approveDisable: disable, rejectDisable: disable, reassignDisable: disable, infoDisable: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length !== 1 }) }) }), (!isOpenDcmtForm && allowRelations && (currentTIDHasDetailRelations || currentTIDHasMasterRelations)) &&
+                            _jsx(ToppyHelpCenter, { deviceType: deviceType, top: -100, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [currentTIDHasDetailRelations && _jsx(TMButton, { btnStyle: 'advanced', disabled: !focusedItem?.DID, showTooltip: false, width: '180px', icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), caption: SDKUI_Localizator.DcmtsDetail, onClick: () => setIsOpenDetails(true), advancedColor: TMColors.primaryColor, color: 'success' }), currentTIDHasMasterRelations && _jsx(TMButton, { btnStyle: 'advanced', disabled: !focusedItem?.DID, showTooltip: false, width: '180px', icon: _jsx(IconDetailDcmts, {}), caption: SDKUI_Localizator.DcmtsMaster, onClick: () => setIsOpenMaster(true), advancedColor: TMColors.primaryColor, color: 'error' })] }) })] }), _jsx(ConfirmFormatDialog, {}), _jsx(ConfirmAttachmentsDialog, {})] }) });
     const renderTMBlog = (handleTogglePanel) => _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID });
     const renderTMSysMetadata = (handleTogglePanel) => _jsx(TMMetadataValues, { layoutMode: LayoutModes.Update, openChooserBySingleClick: true, TID: focusedItem?.TID, isReadOnly: true, deviceType: deviceType, metadataValues: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] });
     const renderTMDcmtPreview = (handleTogglePanel) => _jsx(TMDcmtPreview, { onClose: () => {
             handleTogglePanel("TMDcmtPreview");
             onClosePreviewPanel?.();
         }, dcmtData: currentDcmt });
-    const renderTMBatchUpdate = (handleTogglePanel) => _jsx(TMBatchUpdateForm, { inputDcmts: getSelectionDcmtInfo(), TID: focusedItem ? focusedItem?.TID : selectedItems[0]?.TID, DID: focusedItem ? focusedItem?.DID : selectedItems[0]?.DID, onBack: () => { handleTogglePanel("TMBatchUpdate"); }, onSavedCallbackAsync: async () => {
-            setIsOpenBatchUpdate(false);
-            setIsModifiedBatchUpdate(false);
-            await refreshSelectionDataRowsAsync();
-        }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } });
-    const panelsConfig = [
+    const panels = [
         {
             id: 'TMSearchResult',
             name: SDKUI_Localizator.SearchResult,
-            toolbarOptions: { icon: _jsx(IconSearchCheck, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 1 },
-            type: 'content',
+            children: [],
             contentOptions: {
-                visible: true,
+                width: '25%',
                 height: '100%',
-                width: '20%',
-                content: renderTMSearchResult,
-                panelContainer: {
-                    title: getTitleHeader(),
-                    showHeader: showToolbarHeader,
-                    allowMaximize: !isMobile,
-                    onBack: (!isClosable && context === SearchResultContext.METADATA_SEARCH) ? onBack : undefined,
-                    onClose: isClosable ? onBack : undefined,
-                    toolbar: searchResutlToolbar
-                },
             },
+            toolbarOptions: {
+                icon: _jsx(IconSearchCheck, { fontSize: 24 }),
+                visible: true,
+                isActive: true
+            }
         },
         {
             id: 'TMBlog',
             name: SDKUI_Localizator.BlogCase,
-            toolbarOptions: {
-                icon: _jsx(IconBoard, { fontSize: 24 }),
-                disabled: !focusedItem?.DID,
-                visible: true,
-                isActive: showBoard,
-                orderNumber: 2
-            },
-            type: 'content',
+            children: [],
             contentOptions: {
-                visible: true,
+                width: '25%',
                 height: '100%',
-                width: '20%',
-                content: renderTMBlog,
-                panelContainer: {
-                    title: SDKUI_Localizator.BlogCase,
-                    allowMaximize: !isMobile,
-                    toolbar: middlePanelToolbar
-                },
             },
+            toolbarOptions: {
+                icon: _jsx(IconBoard, { fontSize: 24 }),
+                // disabled: !focusedItem?.DID,
+                visible: true,
+                isActive: false,
+            }
         },
         {
             id: 'TMSysMetadata',
             name: SDKUI_Localizator.MetadataSystem,
-            toolbarOptions: {
-                icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }),
-                visible: true,
-                disabled: !focusedItem?.DID,
-                isActive: showSysMetadata,
-                orderNumber: 3
-            },
-            type: 'content',
+            children: [],
             contentOptions: {
-                visible: true,
+                width: '25%',
                 height: '100%',
-                width: '20%',
-                content: renderTMSysMetadata,
-                panelContainer: {
-                    title: SDKUI_Localizator.MetadataSystem,
-                    allowMaximize: !isMobile,
-                    toolbar: middlePanelToolbar
-                },
             },
-        },
-        {
-            id: 'TMDcmtPreview',
-            name: SDKUI_Localizator.PreviewDocument,
             toolbarOptions: {
-                icon: _jsx(IconShow, { fontSize: 24 }),
-                disabled: !focusedItem?.DID && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata,
-                visible: true,
-                isActive: showPreview,
-                orderNumber: 4
-            },
-            type: 'content',
-            contentOptions: {
+                icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }),
                 visible: true,
-                height: '100%',
-                width: '20%',
-                content: renderTMDcmtPreview,
-            },
+                // disabled: !focusedItem?.DID,
+                isActive: false,
+            }
         },
         {
-            id: 'TMBatchUpdate',
-            name: SDKUI_Localizator.BatchUpdate,
-            toolbarOptions: { icon: _jsx(IconBatchUpdate, { fontSize: 24 }), visible: true, isActive: false, orderNumber: 5 },
-            type: 'content',
+            id: 'TMDcmtPreview',
+            name: SDKUI_Localizator.PreviewDocument,
+            children: [],
             contentOptions: {
-                visible: true,
+                width: '25%',
                 height: '100%',
-                width: '20%',
-                content: renderTMBatchUpdate,
             },
-        },
-        {
-            id: 'commandMaster',
-            name: SDKUI_Localizator.DcmtsMaster,
             toolbarOptions: {
-                icon: _jsx(IconDetailDcmts, { fontSize: 24 }),
-                visible: !!currentTIDHasMasterRelations,
-                disabled: (!focusedItem?.DID && selectedItems.length <= 0),
-                isActive: !!currentTIDHasMasterRelations,
-                orderNumber: 6,
-                beginGroup: true
-            },
-            type: 'button',
-            buttonOptions: {
-                onClick: () => { setIsOpenMaster(true); },
-            },
-        },
-        {
-            id: 'commandDetails',
-            name: SDKUI_Localizator.DcmtsDetail,
-            toolbarOptions: {
-                icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)', fontSize: 24 }),
-                visible: !!currentTIDHasDetailRelations,
-                disabled: !focusedItem?.DID,
-                isActive: !!currentTIDHasDetailRelations,
-                orderNumber: 7,
-            },
-            type: 'button',
-            buttonOptions: {
-                onClick: () => { setIsOpenDetails(true); },
-            },
+                icon: _jsx(IconShow, { fontSize: 24 }),
+                disabled: !focusedItem?.DID && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata,
+                visible: true,
+                isActive: false,
+            }
         },
     ];
-    const getPanelMobile = () => {
-        if (showPreview)
-            return 'TMDcmtPreview';
-        if (showBoard)
-            return 'TMBlog';
-        if (showSysMetadata)
-            return 'TMSysMetadata';
-        return 'TMSearchResult';
-    };
     return (_jsxs(StyledMultiViewPanel, { "$isVisible": isVisible, children: [_jsx(StyledMultiViewPanel, { "$isVisible": !isOpenDcmtForm && !isOpenDetails && !isOpenMaster, style: {
                     display: 'flex',
                     flexDirection: isMobile ? 'column' : 'row',
@@ -506,9 +432,9 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                     gap: SDKUI_Globals.userSettings.themeSettings.gutters,
                     width: '100%',
                     height: '100%',
-                }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanelManager, { panels: panelsConfig, initialMobilePanelId: getPanelMobile(), showToolbar: showSearchResultSidebar, toolbarMode: 1 }) }) }), _jsx(StyledMultiViewPanel, { "$isVisible": isOpenDetails, children: isOpenDetails && _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenDetails(false) }) }), _jsxs(StyledMultiViewPanel, { "$isVisible": isOpenMaster, children: [isOpenMaster && _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
+                }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMPanelManagerContextProvider, { panels: panels, initialMobilePanelId: "TMSearchResult", children: _jsx(TMSearchResultPanelContent, { showSearchResultSidebar: showSearchResultSidebar, isMobile: isMobile, panelTMSearchResult: renderTMSearchResult, panelTMBlog: renderTMBlog, panelTMSysMetadata: renderTMSysMetadata, panelTMDcmtPreview: renderTMDcmtPreview }) }) }) }), _jsx(StyledMultiViewPanel, { "$isVisible": isOpenDetails, children: isOpenDetails && _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenDetails(false) }) }), _jsxs(StyledMultiViewPanel, { "$isVisible": isOpenMaster, children: [isOpenMaster && _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
                         return (_jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem }) }, `${index}-${dcmt.DID}`));
-                    })] }), _jsx(StyledMultiViewPanel, { "$isVisible": isOpenDcmtForm, children: isOpenDcmtForm && _jsx(TMDcmtForm, { TID: focusedItem?.TID, DID: focusedItem?.DID, layoutMode: dcmtFormLayoutMode, showPreview: deviceType !== DeviceType.MOBILE, count: visibleItems.length, itemIndex: visibleItems.findIndex(o => o.rowIndex === focusedItem?.rowIndex) + 1, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onClose: () => { setIsOpenDcmtForm(false); }, onSavedAsyncCallback: async (tid, did) => { await refreshFocusedDataRowAsync(tid, did, true); } }) })] }));
+                    })] }), _jsx(StyledMultiViewPanel, { "$isVisible": isOpenDcmtForm, children: isOpenDcmtForm && _jsx(TMDcmtForm, { isModal: openDcmtFormAsModal, titleModal: fromDTD?.name ?? '', TID: focusedItem?.TID, DID: focusedItem?.DID, layoutMode: dcmtFormLayoutMode, showPreview: deviceType !== DeviceType.MOBILE, count: visibleItems.length, itemIndex: visibleItems.findIndex(o => o.rowIndex === focusedItem?.rowIndex) + 1, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onClose: () => { setIsOpenDcmtForm(false); }, onSavedAsyncCallback: async (tid, did) => { await refreshFocusedDataRowAsync(tid, did, true); } }) })] }));
 };
 export default TMSearchResult;
 const renderDcmtIcon = (cellData) => _jsx(TMDcmtIcon, { fileExtension: cellData.data.FILEEXT, fileCount: cellData.data.FILECOUNT, isLexProt: cellData.data.IsLexProt, isMail: cellData.data.ISMAIL, isShared: cellData.data.ISSHARED, isSigned: cellData.data.ISSIGNED });
@@ -772,3 +698,84 @@ const TMSearchResultSelector = ({ searchResults = [], onSelectionChanged }) => {
     };
     return (_jsx("div", { style: { height: '100%', width: '100%', overflow: 'auto' }, children: sortedCategories.map((category) => (_jsxs("div", { children: [_jsxs(StyledGroupTemplate, { onClick: () => toggleCategory(category), children: [activeCategories.includes(category) ? _jsx(IconChevronDown, {}) : _jsx(IconChevronDown, { transform: 'scale(-1, 1)' }), renderGroupTemplate(category)] }, category), activeCategories.includes(category) && (_jsx("div", { style: { padding: '5px' }, children: groupedResults[category].map((result, index) => (_jsx(StyledItemTemplate, { "$isSelected": selectedResult === result, onClick: () => handleSelect(result), children: renderItemTemplate(result) }, index))) }))] }, category))) }));
 };
+const TMSearchResultPanelContent = ({ isMobile, showSearchResultSidebar, panelTMSearchResult, panelTMBlog, panelTMSysMetadata, panelTMDcmtPreview }) => {
+    const gutters = SDKUI_Globals.userSettings.themeSettings.gutters;
+    const { visibility, maximizedPanelId, getPanelDimensions, togglePanel, toggleMaximizePanel, setPanelDisabledById, setPanelVisibility, hasVisiblePanels } = useTMPanelContext();
+    const containerRef = useRef(null);
+    const { onMouseDown } = useResizablePanels(containerRef);
+    const { width: widthPanel1, height: heightPanel1 } = getPanelDimensions('TMSearchResult');
+    const { width: widthPanel2, height: heightPanel2 } = getPanelDimensions('TMBlog');
+    const { width: widthPanel3, height: heightPanel3 } = getPanelDimensions('TMSysMetadata');
+    const { width: widthPanel4, height: heightPanel4 } = getPanelDimensions('TMDcmtPreview');
+    return (_jsxs("div", { style: { display: 'flex', height: '100%', width: '100%', flexDirection: isMobile ? 'column' : 'row', gap: gutters }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    flexGrow: 1,
+                    width: `calc(100% - ${isMobile ? 0 : 70}px)`,
+                    height: `calc(100% - ${isMobile ? 55 : 0}px)`,
+                    flexDirection: 'row'
+                }, children: _jsxs("div", { style: { width: '100%', height: '100%' }, children: [_jsxs("div", { ref: containerRef, style: {
+                                display: hasVisiblePanels() ? 'flex' : 'none',
+                                width: '100%',
+                                height: '100%',
+                            }, children: [_jsx("div", { style: {
+                                        display: visibility.TMSearchResult ? 'block' : 'none',
+                                        width: widthPanel1,
+                                        height: heightPanel1,
+                                        overflow: 'hidden',
+                                    }, children: panelTMSearchResult() }), visibility.TMSearchResult && visibility.TMBlog && maximizedPanelId === null && (_jsx("div", { style: {
+                                        background: 'transparent',
+                                        cursor: 'col-resize',
+                                        width: `${gutters}px`,
+                                        height: '100%',
+                                        userSelect: 'none',
+                                    }, onMouseDown: (e) => onMouseDown(e, 'TMSearchResult', 'TMBlog', true) })), _jsx("div", { style: {
+                                        display: visibility.TMBlog ? 'block' : 'none',
+                                        width: widthPanel2,
+                                        height: heightPanel2,
+                                        overflow: 'hidden',
+                                    }, children: _jsx(TMPanel, { title: SDKUI_Localizator.BlogCase, onClose: () => togglePanel('TMBlog'), onMaximize: () => toggleMaximizePanel('TMBlog'), onHeaderDoubleClick: () => toggleMaximizePanel('TMBlog'), allowMaximize: !isMobile, children: panelTMBlog() }) }), visibility.TMBlog && visibility.TMSysMetadata && maximizedPanelId === null && (_jsx("div", { style: {
+                                        background: 'transparent',
+                                        cursor: 'col-resize',
+                                        width: `${gutters}px`,
+                                        height: '100%',
+                                        userSelect: 'none',
+                                    }, onMouseDown: (e) => onMouseDown(e, 'TMBlog', 'TMSysMetadata', true) })), _jsx("div", { style: {
+                                        display: visibility.TMSysMetadata ? 'block' : 'none',
+                                        width: widthPanel3,
+                                        height: heightPanel3,
+                                        overflow: 'hidden',
+                                    }, children: _jsx(TMPanel, { title: SDKUI_Localizator.MetadataSystem, onClose: () => togglePanel('TMSysMetadata'), onMaximize: () => toggleMaximizePanel('TMSysMetadata'), onHeaderDoubleClick: () => toggleMaximizePanel('TMSysMetadata'), allowMaximize: !isMobile, children: panelTMSysMetadata() }) }), visibility.TMSysMetadata && visibility.TMDcmtPreview && maximizedPanelId === null && (_jsx("div", { style: {
+                                        background: 'transparent',
+                                        cursor: 'col-resize',
+                                        width: `${gutters}px`,
+                                        height: '100%',
+                                        userSelect: 'none',
+                                    }, onMouseDown: (e) => onMouseDown(e, 'TMSysMetadata', 'TMDcmtPreview', true) })), _jsx("div", { style: {
+                                        display: visibility.TMDcmtPreview ? 'block' : 'none',
+                                        width: widthPanel4,
+                                        height: heightPanel4,
+                                        overflow: 'hidden',
+                                    }, children: panelTMDcmtPreview(() => togglePanel('TMDcmtPreview')) })] }), _jsxs("div", { style: {
+                                display: hasVisiblePanels() ? 'none' : 'flex',
+                                flexDirection: 'column',
+                                width: '100%',
+                                height: '100%',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                fontSize: '1.5rem',
+                                fontWeight: 'bold',
+                                color: '#888',
+                                backgroundColor: '#fff',
+                                borderRadius: '10px'
+                            }, children: [_jsx(IconInfo, { style: { fontSize: 50 } }), _jsx("div", { children: SDKUI_Localizator.NoPanelSelected })] })] }) }), showSearchResultSidebar && _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: isMobile ? 'row' : 'column',
+                    alignItems: 'center',
+                    width: isMobile ? '100%' : '50px',
+                    height: isMobile ? '50px' : 'max-content',
+                    background: 'transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box',
+                    borderRadius: isMobile ? '10px' : '10px 0px 0px 10px',
+                    padding: '10px',
+                    gap: '10px'
+                }, children: _jsx(TMPanelToolbar, {}) })] }));
+};

package/lib/components/viewers/TMMidViewer.d.ts

@@ -2,9 +2,10 @@ import React from 'react';
 import { ITopMediaSession, LayoutModes, MetadataDescriptor } from '@topconsultnpm/sdk-ts-beta';
 import { TID_MID } from '../../ts';
 import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
-export declare const TMMidViewer: ({ isMetadataSelected, tmSession, tid_mid, showCompleteName, showIcon, showId, noneSelectionText }: {
+export declare const TMMidViewer: ({ isMetadataSelected, color, tmSession, tid_mid, showCompleteName, showIcon, showId, noneSelectionText }: {
     tmSession?: ITopMediaSession;
     tid_mid: TID_MID | undefined;
+    color?: string;
     showCompleteName?: boolean;
     showIcon?: boolean;
     showId?: boolean;
@@ -14,13 +15,15 @@ export declare const TMMidViewer: ({ isMetadataSelected, tmSession, tid_mid, sho
 interface ITMMetadataIcon {
     tid: number | undefined;
     md: MetadataDescriptor | undefined;
+    color?: string;
     layoutMode?: LayoutModes;
     isMetadataSelected?: boolean;
 }
-export declare const TMMetadataIcon: ({ tid, md, layoutMode, isMetadataSelected }: ITMMetadataIcon) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TMMetadataIcon: ({ tid, md, color, layoutMode, isMetadataSelected }: ITMMetadataIcon) => import("react/jsx-runtime").JSX.Element | null;
 interface ITMMetadataTooltip {
     tid: number | undefined;
     md: MetadataDescriptor | undefined;
+    color?: string;
     children?: React.ReactNode;
     layoutMode?: LayoutModes;
 }

package/lib/components/viewers/TMMidViewer.js

@@ -5,7 +5,7 @@ import { DcmtTypeListCacheService, LayoutModes, MetadataDataDomains, MetadataDat
 import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipItem, StyledTooltipSeparatorItem } from '../base/Styled';
 import TMTooltip from '../base/TMTooltip';
 import { TMColors } from '../../utils/theme';
-export const TMMidViewer = ({ isMetadataSelected = false, tmSession, tid_mid, showCompleteName, showIcon = false, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
+export const TMMidViewer = ({ isMetadataSelected = false, color, tmSession, tid_mid, showCompleteName, showIcon = false, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
     const [md, setMd] = useState();
     const [dcmtTypeName, setDcmtTypeName] = useState();
     useEffect(() => {
@@ -29,22 +29,22 @@ export const TMMidViewer = ({ isMetadataSelected = false, tmSession, tid_mid, sh
     return (_jsxs(StyledDivHorizontal, { style: {
             whiteSpace: 'nowrap',
             overflow: 'hidden',
-            textOverflow: 'ellipsis'
-        }, children: [showIcon && _jsx(TMMetadataIcon, { isMetadataSelected: isMetadataSelected, tid: tid_mid?.tid, md: md }), _jsx("p", { title: displayName(), style: {
+            textOverflow: 'ellipsis',
+            color: md?.isRequired == 1 ? 'red' : color,
+        }, children: [showIcon && _jsx(TMMetadataIcon, { isMetadataSelected: isMetadataSelected, tid: tid_mid?.tid, md: md, color: color }), _jsx("p", { title: displayName(), style: {
                     textAlign: 'left',
                     marginLeft: showIcon ? '5px' : '',
-                    color: md?.isRequired == 1 ? 'red' : undefined,
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textOverflow: 'ellipsis'
                 }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px' }, children: `(MID: ${tid_mid?.mid})` })] }));
 };
-export const TMMetadataIcon = ({ tid, md, layoutMode = LayoutModes.Update, isMetadataSelected = false }) => {
+export const TMMetadataIcon = ({ tid, md, color, layoutMode = LayoutModes.Update, isMetadataSelected = false }) => {
     let selectedMetadataStyle = { borderBottom: isMetadataSelected ? `thick solid ${TMColors.text_normal}` : 'none', height: 'max-content' };
     if (!md)
         return null;
     let isNumeratorInArk = md.dataDomain === MetadataDataDomains.Numerator && layoutMode === LayoutModes.Ark;
-    let iconColor = md.isRequired === 1 && !isNumeratorInArk ? TMColors.error : TMColors.text_normal;
+    let iconColor = md.isRequired === 1 && !isNumeratorInArk ? TMColors.error : (color ?? TMColors.text_normal);
     let icon = null;
     switch (md.dataDomain) {
         case MetadataDataDomains.Computed:
@@ -82,9 +82,9 @@ export const TMMetadataIcon = ({ tid, md, layoutMode = LayoutModes.Update, isMet
             }
             break;
     }
-    return (_jsx(_Fragment, { children: icon ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, children: icon }) : null }));
+    return (_jsx(_Fragment, { children: icon ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, color: color, children: icon }) : null }));
 };
-export const TMMetadataTooltip = ({ tid, md, children, layoutMode = LayoutModes.Update }) => {
+export const TMMetadataTooltip = ({ tid, md, color, children, layoutMode = LayoutModes.Update }) => {
     const _setDefaultValueForUI = (defaultValue) => {
         if (!defaultValue)
             return defaultValue;
@@ -95,7 +95,7 @@ export const TMMetadataTooltip = ({ tid, md, children, layoutMode = LayoutModes.
     let isNumeratorInArk = md?.dataDomain === MetadataDataDomains.Numerator && layoutMode === LayoutModes.Ark;
     const renderTooltipContent = (tid, md) => {
         return (!md ? null
-            : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { children: `${SDK_Globals.useLocalizedName ? md.nameLoc : md.name} (TID: ${tid}, MID: ${md.id})` }), md.description && _jsx(StyledTooltipItem, { children: md.description }), _jsx(StyledTooltipSeparatorItem, {}), _jsxs(StyledTooltipItem, { children: [md.dataType, " ", md.dataType == MetadataDataTypes.Varchar ? `(${md.length ?? 0})` : md.dataType == MetadataDataTypes.Number ? `(${md.length ?? 0},${md.scale ?? 0})` : '', md.isPrimaryKey === 1 ? ' (PK)' : ''] }), _jsx(StyledTooltipItem, { style: { color: md.isRequired === 1 && !isNumeratorInArk ? TMColors.error : TMColors.text_normal }, children: md.isRequired === 1 && !isNumeratorInArk ? SDKUI_Localizator.Required : SDKUI_Localizator.RequiredNOT }), md.dataDomain && _jsx(StyledTooltipItem, { children: md.dataDomain }), md.isLexProt == 1 && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes}` }), md.isLexProt == 2 && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.MetadataFlag}` }), md.isLexProt == 3 && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes} (${SDKUI_Localizator.MetadataFlag})` }), md.isFreeSearchInput && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search_Free}: ${SDKUI_Localizator.Yes}` }), md.isSpecialSearchOutput && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search_Special}: ${SDKUI_Localizator.Yes}` }), md.format?.format && md.format.format != MetadataFormats.None && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Format}: ${LocalizeMetadataFormats(md.format.format)}` }), md.defaultValue && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Default}: ${_setDefaultValueForUI(md.defaultValue)}` }), md.fromTID && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.MetadataRoot}: ${md.isRootMID == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}` }), md.templateMID && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Template}: ${md.templateMID}` }), md.perm && _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Archive}: ${md.perm.canArchive ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.View_Metadato}: ${md.perm.canView ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search}: ${md.perm.canSearch ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Update}: ${md.perm.canUpdate ?? SDKUI_Localizator.No}` })] })] }));
+            : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { "$color": color, children: `${SDK_Globals.useLocalizedName ? md.nameLoc : md.name} (TID: ${tid}, MID: ${md.id})` }), md.description && _jsx(StyledTooltipItem, { "$color": color, children: md.description }), _jsx(StyledTooltipSeparatorItem, { color: color }), _jsxs(StyledTooltipItem, { "$color": color, children: [md.dataType, " ", md.dataType == MetadataDataTypes.Varchar ? `(${md.length ?? 0})` : md.dataType == MetadataDataTypes.Number ? `(${md.length ?? 0},${md.scale ?? 0})` : '', md.isPrimaryKey === 1 ? ' (PK)' : ''] }), _jsx(StyledTooltipItem, { style: { color: md.isRequired === 1 && !isNumeratorInArk ? TMColors.error : color }, children: md.isRequired === 1 && !isNumeratorInArk ? SDKUI_Localizator.Required : SDKUI_Localizator.RequiredNOT }), md.dataDomain && _jsx(StyledTooltipItem, { "$color": color, children: md.dataDomain }), md.isLexProt == 1 && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes}` }), md.isLexProt == 2 && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.MetadataFlag}` }), md.isLexProt == 3 && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes} (${SDKUI_Localizator.MetadataFlag})` }), md.isFreeSearchInput && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Search_Free}: ${SDKUI_Localizator.Yes}` }), md.isSpecialSearchOutput && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Search_Special}: ${SDKUI_Localizator.Yes}` }), md.format?.format && md.format.format != MetadataFormats.None && _jsx(StyledTooltipItem, { color: color, children: `${SDKUI_Localizator.Format}: ${LocalizeMetadataFormats(md.format.format)}` }), md.defaultValue && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Default}: ${_setDefaultValueForUI(md.defaultValue)}` }), md.fromTID && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.MetadataRoot}: ${md.isRootMID == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}` }), md.templateMID && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Template}: ${md.templateMID}` }), md.perm && _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, { color: color }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Archive}: ${md.perm.canArchive ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.View_Metadato}: ${md.perm.canView ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Search}: ${md.perm.canSearch ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Update}: ${md.perm.canUpdate ?? SDKUI_Localizator.No}` })] })] }));
     };
     return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { content: renderTooltipContent(tid, md), children: children }) }));
 };

package/lib/utils/theme.d.ts

@@ -47,6 +47,7 @@ declare class TMColors {
     static set backgroundColorHeader(theBackgroundColorHeader: string | undefined);
     static get colorHeader(): string | undefined;
     static set colorHeader(theColorHeader: string | undefined);
+    static separator: string;
 }
 declare class FontSize {
     static defaultFontSize: string;

package/lib/utils/theme.js

@@ -47,6 +47,7 @@ TMColors.isModified = "#E29000"; //= tertiary
 TMColors.card_background = "#CAD9EB";
 TMColors._backgroundColorHeader = "#CAD9EB";
 TMColors._colorHeader = "black";
+TMColors.separator = "#00A99D";
 class FontSize {
 }
 FontSize.defaultFontSize = '1rem';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.13.44",
+    "version": "6.13.46",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",